Autor Zpráva
chleeba
Profil
Zajímal by mě nejlepší postup jaksi rozvrhnou stránku webu.
Pomocí pozicování (absolutní, relativní) nebo pomocí float" a "clear.
Čemu se věnovat a jakou cestou se vydat. Chtěl bych se tvorbě webu věnovat a tak bych se rád nasměroval správnou cestou.
Moje představa je že si vzhled stránky navrhnu v nějakém grafickém editoru a pak si obrázek nařežu dle potřeby, ale jaký je pak správný postup jak poskládat web z těchto obrázků, sloupců, textů atd aby byl zápis moderní a hlavně se mi web nerozpadl a zobrazoval se správně v prohlížečích.

Příklad webu který chci realizovat: https://lh5.googleusercontent.com/_3Pbt-vcqsac/TYud9rfTcAI/AAAAAAAAAA8/UzTb4819V3Y/s912/web.jpg
panther
Profil
chleeba:
Čemu se věnovat a jakou cestou se vydat.
float, pozicování nedoporučuji pro stavbu layoutu, a už vůbec ne pro začátečníka.

Moje představa je [...]
v podstatě je správná. Navrhneš, nařežeš, nakóduješ.

hlavně se mi web nerozpadl a zobrazoval se správně v prohlížečích.
web se může a neusí rozpadnout nehledě na to, jestli použiješ floatovaný nebo pozicovaný layout.

Příklad webu který chci realizovat
klasický dvousloupcový layout, ve kterém je pravá část rozdělena opět na dvě.
chleeba
Profil
Klasický dvousloupcový layout?

Počítal jsem že web nařežu takhle https://lh4.googleusercontent.com/_3Pbt-vcqsac/TYumf2ttsYI/AAAAAAAAABc/teoMIgQECRU/s912/web%202.jpg

Dělá mi starost sloupec A neboť díky obrázku A-A je výš než sloupec B. A to jsem chtel řesit právě že si sloupce A, B, C, D udělám absolutně příklad v ccs:

#obsah { position: absolute; width: 500px; top: 120px; left: 150px; }
#patka { width: 100%; }
#hlavicka { position: absolute; width: 760px; top: 0px; left: 0px; height: 120px; }
#levy { position: absolute; width: 150px; top: 120px; left: 0px; }
#pravy { position: absolute; width: 110px; top: 120px; left: 650px; }

Tím pádem si určím pomocí souřadnic a rozměrů presné pozice těchto sloupců (viz.jako zde: http://www.jakpsatweb.cz/priklady/css-sloupce.html) a pak doplním obsah.

Ale někde sem čet že to není moderní psát absolutně layout ale právě pomocí float.
Co je podle Vás lepší a jdu vůbec správnou cestou ??
panther
Profil
chleeba:
počítal jsi špatně :-)

obrázky budou následující:
- logo
- textura na pozadí, která se bude opakovat (najdi si, odkud se opakuje, odhadem tak 50px) - tímto odpadá pozadí bloku A, ten pozadí mít zadané nebude
- na pozadí C budou jen ty dvě svislé linky (na jednom obrázku), prostředek bude vzat opět z body
- pod galerií žádné pozadí není, opět bude použito to z body
- v patičce taky žádné pozadí není

Ke stylům: Udělal jsem rychlý nástřel, snad ti pomůže. Pozicování nepotřebuješ, výšku žádným blokům, kde je proměnlivý obsah nikdy nezadávej. Nevíš, jestli nebude text vyšší, jestli uživatel nebude mít větší velikost písma, nevíš nic.
<div style="float: left; width:">
    <a href="">LOGO</a>
    <ul>
        <li>MENU
    </ul>
</div>
<div style="float: left; width: ...px">
    <img ...>
    <menu style="background, width, float: left;">
        <li>...
    </menu>
    <ul id="gallery" style="width, float">
        <li style="float, width"><!-- kazdy obrazek je jedno LI -->
    </ul>
</div>
<div style="clear (aby byla patka pod nejdelsim ze sloupcu), margin (levy o velikosti leveho sloupce), ...">
chleeba
Profil
Tak sem zkusil udělat strukturu webu a doufám že to je správně : http://chleeba.ic.cz/
Ale nechápu proč internet explorer ji zobrazuje špatně.
Kde mám chybu a zapsal sem kod dobře (html,css)

Příklad webu který chci realizovat: https://lh5.googleusercontent.com/_3Pbt-vcqsac/TYud9rfTcAI/AAAAAAAAAA8/UzTb4819V3Y/s912/web.jpg

PS: Bílá barva bude průhledná, atd je to jenom pro ukázku ať to jde pochopit i pouhým okem.
karel_
Profil *
Podstatná je verze IE ve které "to je špatně".
Pokud jde o IE6 , viz např. IE6 doubled margin bug > http://www.positioniseverything.net/explorer/floatIndent.html
chleeba
Profil
Mám teď momentálně verzi IE6 a vní seto rozpadlo i zarovnání na střed nefunguje, ale v Chromu a Firefoxu je to v pořádku. Rád bych se pohl dál poraďte prosím :)

WEB:http: http://chleeba.ic.cz/

karel_ --->> Anglicky neumím nešlo by to vysvětlit nějak jednoduše nebo napsat kousek kódu nebo opravit můj a říct mi kde mám chybu aby to zobrazovalo i v IE správně:

CSS zápis mé stránky:

body {
background-image: url("img/pozadi.png");
background-repeat: repeat;
font-family: "Trebuchet MS", Arial, Helvetica, Jamrul, sans-serif;
}

/* ------------------------------ Obsah ---------------------------------*/

#Obsah {
width: 1180px;
margin: 0px auto;
position: relative;
margin-top: 100px;
}

/* ------------------------------ Lefttnav ---------------------------------*/

#leftnav {
float: left;
width: 195px;
height: 300px;
margin-right: 5px;
background-color: white;
}

/* ------------------------------ Rightnav ---------------------------------*/

#rightnav {
float: right;
width: 980px;
height: 650px;
background-color: white;
}

/* ------------------------------ Podmenu Rightnav ---------------------------------*/

#banner {
width: 970px;
height: 230px;
margin-top: 40px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;
background-color: black;
}

#left {
float: left;
width: 220px;
height: 360px;
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;
background-color: black;
}

#right {
float: right;
width: 740px;
height: 360px;
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;
background-color: black;
}

/* ------------------------------ Konec ---------------------------------*/

#footer {
width: 1180px;
background-color: green;
clear: both;
height: 40px;
margin-top: 17px;
}
karel_
Profil *
Učte se učit.
Rychlejí tak dosáhneš řešení, než čekat, až někdo vyřeší přímo tvůj problem.
Neumíš anglicky, budiž, najdi v češtině
chleeba
Profil
Tak že řešení je takové, že ke každému plovoucímu boxu přiřadím vlastnost display na hodnotu inline ? Jsem to tak udělal a funguje to, ale je to správný zápis ?

WEB (optimalizovaný pro IE 6: http: http://chleeba.ic.cz/

CSS zápis mé stránky:

body {
background-image: url("img/pozadi.png");
background-repeat: repeat;
font-family: "Trebuchet MS", Arial, Helvetica, Jamrul, sans-serif;
margin-right: auto;
margin-left: auto;
text-align: center;
}

/* ------------------------------ Obsah ---------------------------------*/

#Obsah {
width: 1180px;
margin-top: 100px;
margin-right: auto;
margin-left: auto;
text-align: center;
}

/* ------------------------------ Lefttnav ---------------------------------*/

#leftnav {
float: left;
width: 195px;
height: 300px;
margin-right: 5px;
background-color: white;
display: inline;
}

/* ------------------------------ Rightnav ---------------------------------*/

#rightnav {
float: right;
width: 980px;
height: 650px;
background-color: white;
display: inline;
}

/* ------------------------------ Podmenu Rightnav ---------------------------------*/

#banner {
width: 970px;
height: 230px;
margin-top: 40px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;
background-color: black;
}

#left {
float: left;
width: 220px;
height: 360px;
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;
background-color: black;
display: inline;
}

#right {
float: right;
width: 740px;
height: 360px;
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;
background-color: black;
display: inline;
}

/* ------------------------------ Konec ---------------------------------*/

#footer {
width: 1180px;
background-color: green;
clear: both;
height: 40px;
margin-top: 17px;
}
chleeba
Profil
Akurát nechápu ještě centrování neboť u body sem nastavil:

margin-right: auto; 
margin-left: auto; 
text-align: center;

(V IE jeto na středu ale v Chromu ne a tak sem ten samy zapis musel zapsat i do #Obsah , sem myslel, že to stačí napsat jenom do body nebo to tak má být ?

CSS zápis:

body { 
background-image: url("img/pozadi.png"); 
background-repeat: repeat; 
font-family: "Trebuchet MS", Arial, Helvetica, Jamrul, sans-serif; 
margin-right: auto; 
margin-left: auto; 
text-align: center; 
} 

/* ------------------------------ Obsah ---------------------------------*/ 

#Obsah { 
width: 1180px; 
margin-top: 100px; 
margin-right: auto; 
margin-left: auto; 
text-align: center; 
}

WEB (optimalizovaný pro IE 6, Chrome: http: http://chleeba.ic.cz/

Moderátor Petr ZZZ: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí je obarvit a kliknout na todlencto: , máš to támhle u políčka na psaní).

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0