Autor Zpráva
Michal Sebek
Profil
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>&copy; 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 *
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
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 *
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
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.
Michal Sebek
Profil
Tomáš123:
Děkuji. Vše funguje jak má. :D

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: