Autor Zpráva
StrangeRTV
Profil *
Čau,
Začínám se učit html a css, ale mám jeden takový problém, když přidám text pomocí h2 a v css ho zarovnám, tak mi to rozšíří stránku do strany.

CSS
.StrangeRTV {
background-image: url("Images/Logo.png");
width: 390px;
height: 200px;
background-size: cover;
position: relative;
left: 1350px;
}

.YouTube {
position: relative;
left: 220px;
color: #ffffff;
}

HTML
<!DOCTYPE html>
<html>
   <head>
      <title>StrangeR's Website</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="StrangeRTV"></div> <!--  Logo, Header, However you call it-->
      <h2 class="YouTube">YouTube Channel</h2> 
   
   
   
   </body>
<html>

Ukázka: http://www.strangereu.tk/
Fisir
Profil
Reaguji na StrangeRTVa:
Elementy <h2> a <div> mají výchozí šířku 100% šířky rodiče. Ty je díky position: relative jen posuneš, ne zmenšíš. Kvůli tomu se ti stránka roztáhne. Použij raději padding.

Mimochodem, pokud se snažíš dostat hlavičku na pravou stranu, použij raději float, takto to sedí jen tobě (já ji třeba vidím až za okrajem).
StrangeRTV
Profil *
Něco takového chci udělat:
Fisir
Profil
Reaguji na StrangeRTVa:
Zmenši prosím obrázek a projev vlastní iniciativu. Vysvětlil jsem ti, proč se ti stránka roztahuje. Co konkrétně ti není jasné (nebo nefunguje)?
StrangeRTV
Profil *
Nechápu to, proč se to automaticky nedá na stejný řádek jako je přidaný ten obrázek, proč je to pod ním a proč se to snaží posunout tu stránku.
Bubák
Profil
StrangeRTV:
Relativní pozicování trápí začátečníky
Relativní pozicování se na stavbu layoutu nehodí a absolutní pozicování není tak jednoduché, jak to na prvý pohled vypadá.

proč se to automaticky nedá na stejný řádek jako je přidaný ten obrázek
H2 je blokový element, DIV, ve kterém máš obrázek na pozadí, taky.

proč se to snaží posunout tu stránku.
Stránku "posunuje tyto CSS deklarace:
position: relative;
left: 1350px;
Jak jsi vůbec přišel k hodnotě 1350px? Kolik lidí asi tak bude mít stejně široký monitor, jako ty?

Jak už ti napsal Fisir, tebou zvolená cesta ke správnému výsledku nevede, a ukázal ti jednu z možností, jak se jednoduše dobrat k požadovanému záhlaví.
Fisir
Profil
Reaguji na StrangeRTVa:
<div> a <h2> jsou blokové elementy. To znamená, že se ve výchozím nastavení (tj. pokud to ty sám nepřenastavíš) roztáhnout na 100% šířky jejich rodiče (ve tvém případě elementu <body>). Ty je pomocí pozicování (tj. position: relative a left: 222px) posouváš víc doprava. Ale jsou stále stejně široké (100% šířky <body>) a teď ještě k tomu posunuté. Proto se ti stránka roztáhne doprava.

Pokud jde o to, že se ti to nezobrazuje vedle sebe, je to zapříčiněno také šířkou. Oba elementy mají 100% šířku, tudíž už není místo aby se mohly zobrazit vedle sebe. Dá se to spravit vlastností float, která si šířku sama ohlídá a můžeš jí rovnou nastavit, na jakou stranu se má element zarovnat. Bohužel, může se stát, že se za poslední floatovaný element „přišoupne“ další text, nebo se nemusí špatně počítat výška rodiče. Toho se dá vyvarovat vložením <div style="clear: both"></div> hned za floatované elementy. (Pokud se řeší pouze problém se špatným počítáním výšky, stačí rodiči nastavit overflow: auto).
StrangeRTV
Profil *
Fisir:
A ještě k tomu floatu,
Když jsem si nastavil float: right; ,tak to je úplně vpravo, ale úplně vpravo to zrovna nechci, mělo by to být asi tak 30px od pozice na které to je teď, ale tak nějak, aby to všichni viděli stejně (Lidi s jiným rozlišením)
Bubák
Profil
StrangeRTV:
sem si nastavil float: right; ,tak to je úplně vpravo, ale úplně vpravo to zrovna nechci
Tak stačí deklarovat pravý padding, nebo pravá margin. V čem se liší, najdeš vysvětlené třebas na stránce Okraje objektů - margin a padding

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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