Autor Zpráva
swifter
Profil *
Potreboval by som css zdroj k trojstĺpcovému Layoutu zo stálym width.
Na internete je plno takýchto príkladov ale problém je ten, že ja potrebujem takúto HTML štruktúru.

<div id=containter>

<div id=header></div>
<div id=content></div>
<div id=right_sidebar></div>
<div id=left_sidebar></div>
</div>


všetky budú v css na rovnakej úrovni ale je tu dosť veľký problém z pozicovaním keďže majú ísť za sebou z ľava do prava takto: ľavý panel, obsah, pravý panel. Ide o to, aby sa stránka bez css zobrazovala v tom poradí akom som napísal v html.
Jan Tvrdík
Profil
Proč přesně takovou?

body {text-align: center;}
#containter {text-align: left; position: relative; margin: auto; width: 600px;}
#header {position: absolute; background-color: #FFFFCC; left: 0px; top: 0px; width: 600px; height: 100px;}
#content {position: absolute; left: 100px; top: 100px; width: 400px; background-color: #99FF00;}
#right_sidebar {position: absolute; top: 100px; left: 0px; width: 100px; background-color: #CCFF00;}
#left_sidebar {position: absolute; top: 100px; left: 500px; width: 100px; background-color: #FFCC00;}
miroslav-vano
Profil *
To kôli indexacii vyhľadávacu a aby užívaťeľ videl ako prvé hlavný obsah. V tejto stránke naboku bude tiež obsah a nie menu tak aj preto.

Inak mám takú otázku ohľade SEo čo som si neni istý. Keď mám dvoj, alebo trojstĺpcovú stránku a napr. ľavý panel je menu tak je lepšie keď budev HTML najprv to ľavé menu a potom obsah, alebo opačne najprv obsah a potom menu. Keď je prvé menu sa to ľahšie programuje, ale nechcem aby vyhľadávač povaoval za hlavný obsah menu.
WanTo
Profil
Tady je řešení bez absolutních pozic. Přidal jsem patičku (která se dělá při absolutním pozicování blbě) a jeden pomocný div. Každopádně pořadí, které si přeješ, se nezměnilo.


<style type = "text/css">
body {
text-align: center;
}
#container {
width: 700px;
margin: auto;
text-align: left;
}
#header {
height: 100px;
}
#content {
float: left;
width: 400px;
}
#pomocny {
float: right;
width: 550px;
}
#right_sidebar {
margin-left: 400px;
}
#left_sidebar {
margin-right: 550px;
}
#footer {
clear: both;
}
</style>

<div id=container>

<div id=header></div>
<div id=pomocny>
<div id=content>
Obsah
</div>

<div id=right_sidebar>Pravy pruh</div>
</div>
<div id=left_sidebar>Levy pruh</div>
<div id=footer>Paticka</div>
</div>


Podívej se na výsledek.
miroslav-vano
Profil *
a ešte ten css funguje vo všetkých prehliadačoch rovnako? lebo potrebujem script 100% validný a aby spĺal všetky štandardy. Inak tento vyzerá dobre len sa potrebujem uistiť.
WanTo
Profil
miroslav-vano
V IE se nevycentruje. Ještě to trochu doladím, aby fungoval bez problémů i tam.
WanTo
Profil
Já jsem ale... Napsal jsem místo body #body :-) Když se ten '#' odstraní, funguje v pohodě i v IE.
WanTo
Profil
Takže závěrečný verdikt: Otestováno v Opeře 9, Firefoxu 1.5, IE 6, Konqueroru 3.4. Funguje všude a bez problémů.
miroslav-vano
Profil *
diiki moc

absolutne pozície veľmi nevyužívam ale podľa toho prvého kódu je to v niektorých prípadoch lepšie. Túto pozíciu som sa trochu bál používať.
miroslav-vano
Profil *
a ešte niečo v tabulke header potrebujem naspodu tabulky tabulku z menu
WanTo
Profil
Takto?
miroslav-vano
Profil *
nie tabulka menu musi byt v tabulke header
<div id="header">header
<div id="menu">menu</div>
</div>
WanTo
Profil
miroslav-vano
TaK ještě jednou. Je to teďka správně?
miroslav-vano
Profil *
musí to vyzerať ako v tom prvom prípade, len tá tabuľka bude naspodu tabuľky header.
WanTo
Profil
miroslav-vano
Proč? Z hlediska sémantiky není podle mě mezi těmito dvěma zápisy téměř žádný rozdíl. A na vyhledávače to nebude mít opravdu žádný vliv.

1. zápis
<div id="header">header
<div id="menu">menu</div>
</div>

2. zápis
<div id="header">header</div>
<div id="menu">menu</div>
miroslav-vano
Profil *
ale koli grafike
miroslav-vano
Profil *
http://vano.wms.sk/images/my%20times%202.jpg
tuto si môžeš všimnúť menu ako je a okraj hlavičky. Hlavička musí byť až potiaľ, pretože obsah obsahuje pozadie iba ktore sa opakuje.
WanTo
Profil
Tak ještě jednou.

http://wanto.czweb.org/blbosti/layout.html
miroslav-vano
Profil *
diki
snáď to už pôjde :) potom pošlem výsledok...
WanTo
Profil
Jsem na tebe zvědavý :-) Ten grafický návrh vypadá velice slibně.
jozob
Profil
miroslav-vano
Vyzerá to naozaj slušne a oveľa lepšie ako súčasný design. Aj ja som zvedavý na výsledok.
miroslav-vano
Profil *
Narazil som na malý problém v tom layoute. Keď v ľavom paneli sa nachádza tag <p></p> tak celý panel odskočí nižšie. Dá sa to vidieť aj na tom príklade. http://wanto.czweb.org/blbosti/layout.html
miroslav-vano
Profil *
a vo firefoxe to robi pravy panel. a v ie ten lavy.
miroslav-vano
Profil *
No šablonu mám hotovú už asi tak na 90%, ale stále mám problém z tým layoutom čo som písal v predchádzajúcich príspevkoch. To niekto nevie ako ten problém vyriešiť? :(
WanTo
Profil
Zkus nastavit tagu p margin-top: 0px.
miroslav-vano
Profil *
http://data.tvorbawebstranok.sk/mytimes2/
tak tu si môžete pozrieť zprogramovanú html šablónu. Je asi na 99% hotová. Ešte musím odstrániť chyby v css a html ale už je to vlastne hotové. :)
Railbot
Profil
miroslav-vano
dej tomu jine pozadi, nejakou jemnejsi...mene vyraznou texturu..
miroslav-vano
Profil *
ja si práveže myslím, že tá textúra je dobrá je to ako keby to bolo položené na nejakom materiále. Drevo sa tam veľmi nehodilo tak som dal toto a to sa mi celkom páči.
Toto téma je uzamčeno. Odpověď nelze zaslat.

0