| Autor | Zpráva | ||
|---|---|---|---|
| Michal Sebek Profil |
#1 · Zasláno: 13. 6. 2014, 20:39:52
Potřebuji poradit. Začínám tvořit stránky v HTML a CSS a narazil jsem na jeden problém. Když mám v css #text, Když dám krátký text v html, musím dát v css left:-125px;, když delší, už musí být 0px nebo 5px. Prosím pomozte...
Kódy: index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="webdata/css/style.css"> <title>Animace</title> </head> <body> <div id="animation"> <header> <h1>Animace</h1> </header> <nav> <wh_u>Úvod</wh_u> | <a href="stranka2.html">Stránka 2</a> </nav> <div id="text"><p>Příliš žluťoučký kůň úpěl ďábelské ódy.</p></div> <footer>© 2014 Michal Sebek</footer> </div> </body> </html> style.css: /*------CSS File website.site40.net (c)2014 Michal Sebek------*/
/*---ANIMATED BACKGROUND---*/
#animation
{
width:100%;
height:100%;
background:yellow;
position:relative;
-webkit-animation:myfirst 5s linear infinite alternate; /* Chrome, Safari, Opera */
animation:myfirst 5s linear 0s infinite alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
0% {background:yellow;}
25% {background:yellowgreen;}
50% {background:lawngreen;}
75% {background:greenyellow;}
100% {background:chartreuse;}
}
/* Standard syntax */
@keyframes myfirst
{
0% {background:yellow;}
25% {background:yellowgreen;}
50% {background:lawngreen;}
75% {background:greenyellow;}
100% {background:chartreuse;}
}
/*---BODY---*/
html,body
{
height:99%; /* ve 100% blbne; needed for animated background */
background-color: white;
}
/*---MENU---*/
#menu
{
width: 100%;
position: absolute;
right: 5px;
top: 5px;
font-size:20px;
}
a:link, a:visited
{
color:white;
text-decoration: none;
text-shadow: 0px 0px 5px white;
}
a:hover
{
color:white;
text-decoration:underline;
text-shadow: 0px 0px 10px white;
}
wh_u
{ /* white underlined text */
color:white;
text-decoration:underline;
text-shadow: 0px 0px 5px white;
}
/*---HEADING---*/
h1
{
font-size:250%;
color: white;
text-align: center;
text-shadow: 0px 0px 5px black;
}
/*---HEADER---*/
header
{
position:relative;
float:left;
top:-20px;
left:10px;
}
/*---FOOTER---*/
footer
{
position:absolute;
bottom:0px;
left:0;
right:0;
color:black;
text-align:center;
padding:10px;
height:15px;
}
/*---NAVIGATION---*/
nav
{
position:relative;
float:right;
right:40px;
top:20px;
color:white;
font-size:25px;
}
/*---TEXT---*/
#text
{
position:relative;
float:left;
left:5px;
top:75px;
}
p
{
color:darkorange;
font-style:normal;
font-size:20px;
text-align:justify;
text-shadow:0px 0px 5px darkorange;
} |
||
| Tomáš123 Profil |
Michal Sebek:
Chcel by som ti pomôcť, avšak neviem ako ostatným, ale mne tvoj problém nie je jasný. Popíš prosím bližšie, čo ti nefunguje a ako presne sa to prejavuje. Pomôže aj popis tvojich pokusov vyriešiť tento problém. |
||
| Michal Šebek Profil * |
#3 · Zasláno: 13. 6. 2014, 21:46:33
Když napíšu text přes několik řádků, vypadá to normálně. Když ale napíšu kratší text (méně než 1 řádek), posune se o 125 pixelů doprava.
|
||
| Tomáš123 Profil |
Michal Šebek:
Nemiešaj poziciovanie a plávanie! Každé má svoj význam a spolu nepracujú správne. V CSS uprav deklaráciu pre #text následovne:
#text
{
float:left;
margin-left: 125px; /* Ak chceš nastaviť ľavý okraj iba na 5 pixelov, tak jednoducho zmeň hodnotu */
}Ak aj po tejto úprave niečo nebude fungovať správne, napíš sem. |
||
| Michal Sebek Profil |
#5 · Zasláno: 15. 6. 2014, 09:56:56
Je to pořád stejné :(
|
||
| Tomáš123 Profil |
Michal Sebek:
„Je to pořád stejné :(“ Ospravedlňujem sa, zabudol som to opraviť. Takže: - element <header> som nechal plávať naľavo a zrušil mu position:relative;
- element <nav> pláva napravo a zrušil som mu position:relative;
- po nich nasleduje div s triedou clear, ktorý vyčistí priestor (v css to určuje riadok 118).
Tu je živá ukážka vzťahujúca sa k tvojmu problému: http://kod.djpw.cz/kwdb. Bližie o vlastnosti clear a float si môžeš prečítať tu.
Mal by si si prečítať aj tento článok: Relativní pozicování trápí začátečníky. |
||
| nonameR Profil * |
#7 · Zasláno: 15. 6. 2014, 13:33:20 · Upravil/a: nonameR
co takhle použít prostý
tex-align:right; padding:20px; ? Popřípadě hodnotu paddingu upravit... nevíme pořádně, jak bys chtěl, aby to vypadalo. Pak se těžko radí. Pkud ti jde jen o tu 125px mezeru, tak si přečti něco o tom pozicování...pardon: tex-align:left; |
||
| Tomáš123 Profil |
#8 · Zasláno: 15. 6. 2014, 13:35:03
nonameR:
„tex-align:left;“ To nepomôže, skúšal som. :-) |
||
| martinK Profil |
Tomáš123:
Ale pomůže, stačí tomu prvku nastavit jakoukoliv width. Ať už v pixelích, nebo v procentech. |
||
|
Časová prodleva: 3 dny
|
|||
| Michal Sebek Profil |
#10 · Zasláno: 18. 6. 2014, 17:43:29
Tomáš123:
Děkuji. Vše funguje jak má. :D |
||
|
Časová prodleva: 10 let
|
|||
0