Autor | Zpráva | ||
---|---|---|---|
cartman Profil |
#1 · Zasláno: 21. 10. 2012, 09:45:33
Dobrý den.
Jsem v tvorbě webu celkem začátečník. Když píšu kód tak kolem všech ostatních elementů udělám obal v divu. Pokud, ale chci použít použít nějáké pozadí třeba barvu musím obalu nastavit výšku jinak se nezobrazí celé. Výšku, ale nastavovat nechci, protože když se zvětší text nebo dám do stránky více textu tak to přeteče. Je možné toto něják řešit? Popřípadě bych chtěl vědět co mi uniká. Děkuji |
||
Rellik Profil |
#2 · Zasláno: 21. 10. 2012, 09:51:46
cartman:
„Když píšu kód tak kolem všech ostatních elementů udělám obal v divu.“ Vysvětli pořádně tuto část. Co jsou to pro tebe ostatní elementy? Jinak pokud chceš nastavovat pouze barvu, tak stačí když ji prostě nastavíš. Ten div se natáhne podle obsahu sám. |
||
cartman Profil |
#3 · Zasláno: 21. 10. 2012, 10:13:50
Tím myslím, že obsah, záhlaví, navigaci - zabalím do divu obal. Například takto:
<body> <div class="obal"> <div class="zahlavi"> <h1> Záhlaví </h1> </div> <div class="obsah"> <p> <p>Lorem ipsum dolor sit amet consectetuer purus In et Fusce dapibus. Tempor quis id in est quam amet ante hac accumsan neque. Mattis justo vitae Aenean Quisque id orci ante pretium pretium eu. Urna interdum Curabitur Maecenas odio Fusce nibh et mauris dictum Curabitur. Pretium Curabitur Phasellus tincidunt Vestibulum consequat leo diam sit malesuada congue. Ut.</p> </p> </div> </div> </body> </html> Obalu nenastavuju výšku a když chci vložit obrázek jako pozadí nebo třeba jen barvu tak se zobrazí jen v záhlaví a dál ne. |
||
Rellik Profil |
#4 · Zasláno: 21. 10. 2012, 10:22:17
cartman:
„Obalu nenastavuju výšku a když chci vložit obrázek jako pozadí nebo třeba jen barvu tak se zobrazí jen v záhlaví a dál ne.“ V tom případě děláš něco špatně. Když to takhle zkusíš funguje to jak má: <div class="obal" style="background-color: #dcdcdc"> <div class="zahlavi" style="background-color: #cdcdcd"> <h1> Záhlaví </h1> </div> <div class="obsah"> <p> <p>Lorem ipsum dolor sit amet consectetuer purus In et Fusce dapibus. Tempor quis id in est quam amet ante hac accumsan neque. Mattis justo vitae Aenean Quisque id orci ante pretium pretium eu. Urna interdum Curabitur Maecenas odio Fusce nibh et mauris dictum Curabitur. Pretium Curabitur Phasellus tincidunt Vestibulum consequat leo diam sit malesuada congue. Ut.</p> </p> </div> </div> |
||
waran Profil |
#5 · Zasláno: 21. 10. 2012, 10:23:10
cartman:
Ještě jeden dotaz: Mohl bys sem postnout i ten kód, kde to styluješ? IMHO bude chyba tam. |
||
cartman Profil |
#6 · Zasláno: 21. 10. 2012, 10:31:12
Díky ještě to něják zkusím. Chtěl jsem vědět ještě jednu věc - když chci udělat tří sloupcový layout musí být všechno v plavoucím umístění nebo to můžu udělat takto - levý sloupec má nějákou velikost a plave do leva. Pravý taky tak jen plave do prava. A prostřední umístit v absolutním umístění. Je to použitelné, aby se layout nerozpadal při zvětšení písma a stránky?
|
||
Plaváček Profil |
#7 · Zasláno: 21. 10. 2012, 10:37:59
cartman:
Ne. Dodej živou ukázku, jinak plýtváš naším i svým časem. |
||
Rellik Profil |
#8 · Zasláno: 21. 10. 2012, 10:43:43
Tady máš inspiraci. Ber to jako nakopávku, chce to ještě trochu doladit a hlavně udělat externí CSS soubor...
|
||
cartman Profil |
#9 · Zasláno: 22. 10. 2012, 08:32:10
Problém tří sloupců jsem už vyřešil. Rellik díky za ukázku pomohla mi. Zkoumal jsem ten problém s obalem. Když je text normálně pod sebou tak se normálně zabarvý celý obsah, ale když je to v plovoucím umístění nejde to. Posílám příklad.
<body> <div class="obal"> <div class="zahlavi"> <h1> Záhlaví </h1> </div> <div class="nav"> <ul> <li>odkaz</li> <li>odkaz</li> </ul> </div> <div class="obsah"> <p> <p>Lorem ipsum dolor sit amet consectetuer purus In et Fusce dapibus. Tempor quis id in est quam amet ante hac accumsan neque. Mattis justo vitae Aenean Quisque id orci ante pretium pretium eu. Urna interdum Curabitur Maecenas odio Fusce nibh et mauris dictum Curabitur. Pretium Curabitur Phasellus tincidunt Vestibulum consequat leo diam sit malesuada congue. Ut.</p> </p> <div class="nav"> <ul> <li>odkaz</li> <li>odkaz</li> </ul> </div> </div> </div> </body> </html> a css .obal { background-color: rgb(0,204,255); width: 700px; } .nav { float: left; display: block; } .obsah { float: left; } |
||
preca1 Profil |
#10 · Zasláno: 22. 10. 2012, 15:04:40
Zdravim,
Obtékaný prvek je vyjmut z toku dokumentu (stejně jako position: absolute). Řeší se pomocí tzv. clearfixu. |
||
cartman Profil |
#11 · Zasláno: 23. 10. 2012, 17:01:36
preca1 - Díky už to mám.
Nechci zbytečně zakládat nové téma tak se zeptám tady - zkouším responzivní design. Do HTML jsem dal toto - <link type="text/css" href="../styly/mobil.css" rel="stylesheet" media="handheld"> <link type="text/css" href="../styly/styly_main.css" rel="stylesheet"> První je odkaz na styly pro mobil a druhý na normální styl pro počítače. Stylu pro mobil jsem určil červené pozadí namísto bílého, ale nefunguje to. Druhá věc, která mě zajímá je flexibilita obrázků na jiných zařízeních. V css jsem určil základ img { max-width: 100%; height: auto; } |
||
Časová prodleva: 11 let
|
0