| Autor | Zpráva | ||
|---|---|---|---|
| StrangeRTV Profil * |
#1 · Zasláno: 31. 3. 2014, 17:56:34
Č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 |
#2 · Zasláno: 31. 3. 2014, 18:00:21
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 * |
#3 · Zasláno: 31. 3. 2014, 18:05:28
Něco takového chci udělat:
|
||
| Fisir Profil |
#4 · Zasláno: 31. 3. 2014, 18:28:38
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 * |
#5 · Zasláno: 31. 3. 2014, 18:47:55
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 |
#6 · Zasláno: 31. 3. 2014, 18:58:34
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 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 |
#7 · Zasláno: 31. 3. 2014, 19:06:04
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 * |
#8 · Zasláno: 31. 3. 2014, 20:45:52
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 |
#9 · Zasláno: 31. 3. 2014, 21:24:54
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 |
||
|
Časová prodleva: 10 let
|
|||
0