| Autor | Zpráva | ||
|---|---|---|---|
| spectic Profil |
#1 · Zasláno: 17. 7. 2011, 16:00:32 · Upravil/a: spectic
Zdravím, na tohle téma jsem tu našel dost threadů, ale ani jeden mi nepomohl. Mam na webu 3 <div>y, které se mají zobrazit vedle sebe (viz. obrázky), ale vždy se mi povede seřadit pouze dva. Třetí vleze dolu ten první... Jak byste to udělali vy? Přikládám obrázky problému a html kód včetně css souboru.
/* CSS Document */ body { text-align: center; background: #000000; } #page { text-align: left; background: #FFFFFF; width: 1024px; height: 100%; background-image: URL(page_background.jpg); background-repeat: y; } #header { background: #FFFFFF; width: 1024px; height: 317px; background-image: URL(header.jpg); } #horizontal { background: #FFFFFF; width: 1024px; height: 63px; background-image: URL(horizontal.jpg); margin: 0px 0px 20px 0px; } #nase_sluzby { height: 100%; width: 140px; text-align: center; float: left; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 5px; } #levyodkaz { height: 35px; width: 145px; text-align: center; background-image: URL(odkaz.jpg); margin: 5px 0 px 5px 0px; padding: 10px 0px 0px 0px; } #bila { color: #FFFFFF; font-weight: bold; text-decoration: none; } #cervena { color: #FF0000; font-weight: bold; text-decoration: none; } #obsah { background-color: #8383F8; height: 100%; width: 650px; float: left; margin: 0px 16px 0px 15px; } #kontakt { background-color: #6767da; height: 100%; width: 80px; text-align: center; } <body><center> <div id="page"> <div id="header"></div> <div id="horizontal"> </div> <div id="nase_sluzby"> </div> <div id="obsah"> </div> <div id="kontakt"> </div> </div> </center></body> </HTML> [img]http://2i.cz/d2abf2d80b[/img] Takhle by to mělo vypadat [img]http://2i.cz/a5dc85af7c[/img] Takhle to bohužel vypadá |
||
| nigdo Profil |
#2 · Zasláno: 17. 7. 2011, 16:25:39
Zkus u kontaktů taky dát
float: left; |
||
| spectic Profil |
#3 · Zasláno: 17. 7. 2011, 16:27:30 · Upravil/a: spectic
To pomůže, ale pak zase všechny ostatní divy ignorují že mají height nastaveno na 100%
|
||
| spectic Profil |
#4 · Zasláno: 17. 7. 2011, 18:18:31
Tj. div nazvaný "page" se vůbec nezobrazuje....
|
||
| Petyk Profil |
#5 · Zasláno: 17. 7. 2011, 18:25:41
na height 100% radši zapomeň a hledej clear:both
|
||
| Doby Profil |
#6 · Zasláno: 19. 7. 2011, 00:06:48
DIV page by se měl zobrazovat zde máš kód který funguje tak jak chceš.
HTML:
<div id="page">
<div id="header">HEADER</div>
<div id="horizontal">HORIZONTAL (asi menu)</div>
<div id="nase_sluzby">
NAŠE SLUŽBY
</div>
<div id="obsah">
OBSAH
</div>
<div id="kontakt">
KONTAKT
</div>
<div style="clear: both;"></div>
</div>
CSS
#page{
width: 1024px;
text-align: left;
}
#header{
width: 1024px;
height: 300px;
}
#horizontal{
width: 1024px;
height: 50px;
}
#nase_sluzby{
width: 282px;
float: left;
}
#obsah{
width: 540px;
float: left;
}
#kontakt{
width: 202px;
float: left;
}
U divů page, nase_sluzby, obsah a kontakt nedefinuj height (výšku), budou se ti roztahovat sami podle textu jistě budeš chtít mít mezi textem od různých divů mezery proto vytvoř další divy....místo ID dej CLASS a pojmenuj to podle toho v jakým divu se nachází. př.:
<div id="nase_sluzby">
<div class="nase_sluzby">
TEXT
</div>
</div>
Pak divům s danými CLASS nadefinuj šířku počítej s tím, že pokud chceš posunout div (aby se vytvořila daná mezera) musíš daný DIV s kterým hýbeš zmenšit. př.:
<div id="nase_sluzby">
<div class="nase_sluzby">
NAŠE_SLUŽBY_TEXT
</div>
</div>
<div id="obsah">
<div class="obsah">
OBSAH_TEXT
</div>
</div>
#nase_sluzby{
width: 282px;
float: left;
}
.nase_sluzby{
width: 272;
margin: 5px 0 0 5px;
}
#obsah{
width: 540px;
float: left;
}
.obsah{
width: 530px;
margin: 5px 0 0 5px;
}
Vytvoří se ti mezera mezi TEXTY v DIVu s CLASS nase_sluzby a obsah o velikosti 10px Nezkoušel jsem to psal jsem to z hlavy tak snad to je dobře =)) a snad jsem ti pomohl |
||
|
Časová prodleva: 13 let
|
|||
0