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