| Autor | Zpráva | ||
|---|---|---|---|
| Kos112567 Profil |
Zdravím,
potřeboval bych poradit ohledně přidání prvku vpravo od article section. Web mám jednoduchý, statický (zatím se učím hlavně s css). Dělal jsem ho tak, že jsem nastavil jako plovoucí article header, vedle tedy mám arcticle section a nevím jak docílit toho, abych mohl udělat prvky vpravo. Pro ilustraci předkládám screen https://www.dropbox.com/s/r6dhzikjrh26eqp/web_stranky.jpg Druhý otázka se týká pozicování. V některých stránkách webu mám nalevo submenu, pod které bych potřeboval umístit prvek Kontakty. Bohužel když mu nastavím position: absolute;, tak při změně rozlišení se mi posune. Když mu nastavím position: relative;, tak je zase jinak když tam submenu je a když tam submenu není. Chápu dobře, že position: relative; bere v potaz ostatní prvky, kdežto absolute natvrdo umisťuje prvky. Říkal jsem si, že by se to dalo vyřešit tím, že v každé stránce by bylo to submenu, někde by ale bylo schované (abych tím docílil stejné pozice toho prvku). Snad mě chápete :) Díky za odpovědi |
||
| Tomáš123 Profil |
#2 · Zasláno: 3. 7. 2014, 14:21:05
Kos112567:
„Bohužel když mu nastavím position: absolute;, tak při změně rozlišení se mi posune. Když mu nastavím position: relative;“ Relatívne poziciovanie sa používa ako počiatok súradnicového systému pre vnorené pozície. Teda absolútne poziciovaný prvok sa nebude pohybovať iba vtedy, ak nadradenému prvku nastavíš position:relative;. V prípade, že chceš vytvoriť vysúvacie menu, v niektorých prípadoch ani netreba riešiť relative nadradeného prvku. Stačí neudať vlastnosti top a left.
„potřeboval bych poradit ohledně přidání prvku vpravo od article section.“ Prvku naľavo nastav float: left; a prvku na pravo float:right;.
|
||
| Kos112567 Profil |
#3 · Zasláno: 3. 7. 2014, 15:20:17
Aha, takže když tento prvek je v headeru, tak nadřazený je section?
V section samotném nemám vůbec žádné pozicování, tedy ani relativní ani absolutní. To není vysouvací menu, jenom takový obdélník, ve kterém jsou vypsány kontakty. Nojo, ale když nastavím prvku napravo float:right;, tak se posune úplně doprava (až na pravý konec stránky). Já bych chtěl, v rámci article, přidat vedle headeru, section float:left dalšímu prvku tak, aby byl sice vpravo, ale byl hned u section |
||
| Tomáš123 Profil |
#4 · Zasláno: 3. 7. 2014, 15:27:22
Kos112567:
Pridaj prosím živú ukážku, aby sme sa mohli rozprávať konkrétne a nemusel som len strieľať na slepo. „tak se posune úplně doprava (až na pravý konec stránky)“ Zrejme to je preto, lebo mu nič nebráni. Celý prvok daj do iného elementu, aby niečo nedovolilo ísť úplne na kraj. Prípadne môžeš nastavovať margin-right, ale to mi nepríde ako čisté riešenie.
|
||
| Kos112567 Profil |
Jasně :)
Takže toto mám zatím v html <article>
<div id="centrovac">
<header>
<h1>
WEB
</h1>
<div class="contacts">
<h2>Kontakty</h2>
<p>asdasdasd</p>
<p>asdasdasd</p>
</div>
</header>
<section>
</section>
<div class="cleaner"></div>
</div>
<div class="prava_sekce">
<p>oiuvhidshvio</p>
<div class="cleaner"></div>
</article>a v css: article {
background: #FFFFFF;
padding: 20px 0px;
margin: 0 auto;
}
article header {
width: 250px;
float: left;
}
article section {
width: 666px;
float:left;
background: #FFFFFF;
border: solid #f01d26;
border-width: 2px 2px 2px 2px;
border-radius: 5px;
box-shadow: 2px 2px 7px #1c2228;
padding: 20px 20px 20px 20px;
overflow:hidden;
}
.cleaner
{
clear:both;
}
.contacts
{
background: #FFFFFF;
border: solid #f01d26;
border-width: 2px 2px 2px 2px;
border-radius: 5px;
margin:0px 5px 0px 0px;
padding: 0px 50px 15px 50px;
position: absolute;
top: 350px;
left: 0px;
text-align:center;
}
#centrovac {
margin: 0px auto;
width: 1350px;
}
.prava_sekce{
float:right;
} |
||
| Tomáš123 Profil |
Kos112567:
Takže: Div.prava-sekce uteká napravo preto, lebo ho nemá čo zastaviť. Obecne všetky prvky, ktoré majú nastavený float (plávanie) na inú hodnotu ako none, sa snažia "doplávať" čím ďalej. Ak im nič nebráni, pokojne aj na kraj.
Musíš div.prava-sekce obaliť ešte do jedného divu (šlo by to obaliť aj divom#centrovac, ale ten je príliš široký [Ak chceš, aby bol široký na celú obrazovku, nastav mu width: 100%;]), ktorému nastavíš šírku (odporúčam okolo 800 - 900px). Potom bude div s triedou prava-sekce plávať iba po stanovené hranice.
A ako som povedal, pri tom vysúvaní ani netreba relatívne poziciovanie. Stačí vymazať vlastnosti left a top.
|
||
| Kos112567 Profil |
#7 · Zasláno: 3. 7. 2014, 23:12:19
Jasně, chápu :)
Takže u divu #centrovac jsem nastavil šířku 100% - article section se mi posunulo doprava až k postrannímu submenu. Teď tedy k dalšímu vytvořenému divu - tomu jsem nastavil šířku 900px. Nicméně pořád je to asi málo (viz obrázek). Ještě k němu, potřeboval bych, aby byl ten prvek vpravo nohře, hned po hlavním menu https://www.dropbox.com/s/1xckcgv80sc3yjz/web3.jpg Když vymažu vlastnosti left a top, prvek se mi posune úplně nad submenu (já ovšem chci aby bylo pod ním (také viz obrázek) https://www.dropbox.com/s/4m2lo5oyu1ydsn1/web4.jpg |
||
| Tomáš123 Profil |
#8 · Zasláno: 3. 7. 2014, 23:26:57
Kos112567:
„(já ovšem chci aby bylo pod ním (také viz obrázek)“ Tak nastav iba vlastnosť top.
„Ještě k němu, potřeboval bych, aby byl ten prvek vpravo nohře, hned po hlavním menu“ Nastav mu margin-top: -XXpx;.
|
||
| jenikkozak Profil |
#9 · Zasláno: 4. 7. 2014, 10:46:02
Kos112567:
Prvky article, header a section ti nepůjdou ve starších IE nastylovat. Použij raději tradiční značky. Na žádný prvek ve svém návrhu nepotřebuješ ani position:relative, ani position:absolute. Jen si to tím komplikuješ.
Lépe uděláš, když všechny položky, které chceš mít v levém sloupečku, vložíš do jednoho prvku, který necháš vlevo plavat ( float:left). Mezery mezi nimi pak vytvoř pomocí marginu či paddingu.
Prvek .prava_sekce vlož do kontejneru, který má obalovat celý obsah stránky a definovat její šířku (#centrovac). V opačném případě se pravý sloupec bude zobrazovat až pod koncem veškerého obsahu.
Tomáš123: „A ako som povedal, pri tom vysúvaní ani netreba relatívne poziciovanie. Stačí vymazať vlastnosti left a top.“
Nestačí. Je potřeba odstranit i deklaraci position:absolute. Jinak prvek nebude ovlivněn šířkou svého rodiče.
|
||
| Tomáš123 Profil |
#10 · Zasláno: 4. 7. 2014, 14:07:10
jenikkozak:
„Je potřeba odstranit i deklaraci position:absolute.“ Potom nebude prvok vyňatý z toku dokumentu. |
||
| jenikkozak Profil |
#11 · Zasláno: 4. 7. 2014, 14:27:31
A protože ho vyjímat nepotřebujeme, tak ho tam raději necháme, než abychom mu nastavovali absolutní pozici, kterou bychom špatně odhadli, a tak bychom ho pomocí záporného marginu vraceli. :-)
|
||
| Tomáš123 Profil |
#12 · Zasláno: 4. 7. 2014, 14:47:33
jenikkozak:
„a tak bychom ho pomocí záporného marginu vraceli. :-)“ Prepáč, moja chyba, každý hovoríme o inej časti stránky. Samozrejme, ty máš pravdu. :-) |
||
|
Časová prodleva: 11 dní
|
|||
| Kos112567 Profil |
#13 · Zasláno: 15. 7. 2014, 18:52:07
Aha, tak super :) marginem a paddingem se to teď dá krásně nastavit.
Ještě k té pravé části - jak přesně myslíš vložit do kontejneru, který má obalovat celý obsah stránky? Mohl by jsi mi to přesně napsat, jak to bude v kódu? Zatím díky ! :) |
||
|
Časová prodleva: 3 měsíce
|
|||
| Kos112567 Profil |
#14 · Zasláno: 15. 10. 2014, 23:06:32
jenikkozak:
Ahoj, bohužel jsem se k tomu webu dostal až teď. Doufám, že mi budeš ochotný poradit i teď :) Vložil jsem do kontejneru #centrovac i tu mou pravou část takto: <div id="centrovac">
<header>
<h1>
WEB
</h1>
<div class="contacts">
<h2>Kontakty</h2>
<p>asdasdasd</p>
<p>asdasdasd</p>
<p>asdasdasd</p>
<p>asdasdasd</p>
<p>asdasdasd</p>
</div>
</header>
<section>
</section>
<div class="prava_sekce">
<p>PRAVA SEKCE</p>
</div>
</div>
<div class="cleaner"></div>
</div> Bohužel se mi prvek stále dělá psí kusy (viz screenshot). Je mi jasné, že něco dělám blbě, ale nějak jsem nepřišel na to co :) screen Díky za radu |
||
|
Časová prodleva: 10 let
|
|||
0