Autor Zpráva
szucs
Profil
Zdravim,
cital som uz podobnu problematiku na tomto diskusnom fore o tejto teme,ale rad by som ju znovu nacal a trochu rozsiril.

mam takyto kod, /pouzivam IE 6.0, WIN XP)


<HTML>
<BODY>
<STYLE type=text/css>BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;
}

.hlavicka {
MARGIN:5px 60px 5px 40px; WIDTH: 100%;
}

.left {
FLOAT: left; WIDTH: 150px; HEIGHT: 250px; BACKGROUND-COLOR: #cccccc;MARGIN:0px 0px 0px 20px;
}
.right {
FLOAT: right; WIDTH: 150px; HEIGHT: 250px; BACKGROUND-COLOR: #cccccc;MARGIN:0px 24px 0px 0px;
}
.middle {
MARGIN-LEFT: 155px; MARGIN-RIGHT: 155px; HEIGHT: 120px; BACKGROUND-COLOR: #dedede;MARGIN:0px 0px 0px 0px;
}
.paticka {
CLEAR: both; BACKGROUND-COLOR: #b9b9b9;MARGIN:0px 47px 0px 40px;
}
</STYLE>

<DIV class=hlavicka><IMG SRC="programs/images/logo/skuska2.jpg" WIDTH="907" HEIGHT="108" BORDER="0" ALT=""></DIV>

<DIV class=left>Text Text
</DIV>
<DIV class=right>Text Text Text Text Text Text Text Text Text Text Text Text
</DIV>
<DIV class=middle>Text Text Textt
</DIV>
<DIV class=paticka>Text Tex Text Text Text
</DIV></BODY></HTML>

Chcel som sa spytat, ci sa da spravit nasledovne:

1. Ked maximalizujem okno prehliadaca, tak sirka obrazka(ktory je v hlavicke)zodpoveda sirke vsetkych troch stlpcov.
Problem je, ked zacnem zmensovat sirku okna prehliadaca tak, ze pravy okraj zacnem presuvat smerom dolava. Pravy stlpec sa zacina posuvat dolava na ukor stredneho stlpaca, to je OK, ale obrazok je na mieste az do chvile, ked sa pravy okraj prehliadaca dotkne praveho okraja obrazku. Naslednym zuzovanim sa zacne stracat prava cast obrazku. Ide o to, ze ked je okno prehliadaca maximalizovane, tak sirka obrazka zodpoveda sirke 3 stlpcov, co sa mi zda pekne, po zuyovani sirky okna sa sirka 3 stlpcov stane mensia ako sirka hlavicky, co sa mi velmi nepaci. Otazka znie: da sa zabezpecit a ako, aby aj po zmene sirky okan prehliadaca zostala sirka hlavicky identicka so sumou sirok vsetkych 3 stlpcov?

2 otazka:
Rad by som bol aby lavy a pravy stlpce boli oramcekovane. To je jednodoche, ked tam dam atribut border s parametrami. Ale rad by som bol, keby lavy horny roh laveho stlpca bol zaobleny a podobne pravy horny roh praveho stlpca bol zaobleny a tiez aj v paticke dolna lava cast a dolna prava cas boli zaoblene.
Skusal som spravit si gif obrazok, ktory sa podobal stvorcu. Problizne cez uhlopriecku som polovicu zafarbil farbou pozadia laveho a praveho stlpca cim sa mi podarilo vytvorit efekt zaoblenia. Vlozil som do do style left, right ako background-image url(roh). Ale ked som dal ohranicenie cez border, tak ciara ktora mala pekne ohranicit tieto dva krajne stlpce, zasiahla aj do casti obrazku gif(ktory tvori roh), kde bola biela farba, co je samozrejme nevyhovujuce.
Yuhů
Profil
1)
> da sa zabezpecit a ako, aby aj po zmene sirky okan prehliadaca zostala sirka hlavicky identicka
> so sumou sirok vsetkych 3 stlpcov?

Přiznám se, že jsem ten kód moc nestudoval, ale mělo by momoci uzavření celé stránky do divu s nastavenou šířkou.

2)
jo, to je problém. Rámeček se s kulatými rohy nemá rád. Neznám jednoduché řešení. Leda tam zanořit více divů a každému udělat vlastní pozadí. Pokud někdo znáte něco jednoduššího (ideálně s jedním divem), rád se poučím.
szucs
Profil
Dakujem za radu, skusal som ten bod 1.

Hned na zaciatok ako prvy div som dal
<div style="width:1000px">

a ako posledny som uzavrel </div>

Ale teraz je to sice OK, ale ked sa zmensuje velkost okna prehliadaca, tak sa okamzite meni sirka praveho stlpca, co som nechcel, pred tym, boli staticke sirky krajnych stlpcov, menila sa sirka len stredneho stlpca.

Co sa tyka bodu 2, pozeral som stranky aj velkeho guru pana Pixiho, aj jeho priklad na 3 stlpcovy dizajn, aj u neho som sa inspiroval
http://www.pixy.cz/blogg/clanky/css-3col-layout/
tam som videl aj tie rohy, ale nie presne to, co by som potreboval.
D

Dakujem
Vlado
szucs
Profil
Uz som to spravil ten bod 2.

K tomu bodu 1 som sa chcel spytat, ci sa to da aj nejak inac realizovat, lebo takto, ked sa zmensuje okno prehliadaca, tak sa ihned zmensuje aj pravy stlpec, a ja by som potrebovla viac, aby sa zmensoval stredny stlpec

Vdaka
Vlado
mat
Profil
Třísloupcový layout (vycentrovaný na střed) používám na svých stránkách (klikni si na "člen" pod mým nickem, tam je na mé stránky odkaz) - podívej se do kódu, ten základ (kostru) css máš tady:

body {

text-align: center;

}
#celek {
width: 750px;
margin-left: auto;
margin-right: auto;
text-align: left;

}
#hlavicka {
width: 100%;

}


#levastrana {
width: 150px;
float: left;

}
#pravastrana {
width: 150px;
float: right;

}
#hlavni {
margin: 0 150px;
padding: 0 10px;
height: 1%;
}

... na to pak nabalíš všechno ostatní (kdyby ti přišlo divný, proč je v hlavním sloupci nastavenou height 1%, tak je to proto, že IE, když je levý sloupec kratší než hlavní sloupec, hodí ten hlavní sloupec trošku doleva, asi o dva pixely.

P. S. v tom tvém kódu nahoře: proč má middle 2x definici margin? Napřed: 0 155px; a pak vzápětí: margin: 0;?

- stránky mají fixní šířku, při zmenšování šířky prohlížeče se tedy nezúžují sloupce, ale objeví se horizontální posuvník.
mat
Profil
Jo, a pokud bys chtěl (teprve teď jsem to pořádně pochopil) zužovat střední sloupec - pak stačí dát v kódu z předchozího příspěvku #celek šířku v procentech: 100%, v body uber to centrování a mělo by to fungovat...
szucs
Profil
Jo, a pokud bys chtěl (teprve teď jsem to pořádně pochopil) zužovat střední sloupec - pak stačí dát v kódu z předchozího příspěvku #celek šířku v procentech: 100%, v body uber to centrování a mělo by to fungovat...

Ak dam ako celek šírku v percentach, tak po zuzovani sirky sa zadne zuzovat stredny stlpec a pravy sa zacne posuvat do stredu, ale ja mam v hlavicke obrazok a ten stoji na mieste, a vysledny dojem je taky, ze kraje obrazku v hlavicke uz nie su zarovnane s krajnymi stlpcami.


Add. PS , to bol preklep

Diki aj tak za radu

Vlado
mat
Profil
možná by pomohlo, kdybys nám sem dal link na stránky, kde máš problém, tahle se špatně radí.
szucs
Profil
možná by pomohlo, kdybys nám sem dal link na stránky, kde máš problém, tahle se špatně radí.

http://www.enveco.sk/test/css/
ak by som chcel, aby sa to aj v Mozille tak isto zobrazovalo, co treba spravit?
Yuhů
Profil
Přidej do stylu toto:

* {-moz-box-sizing: border-box; box-sizing: border-box;}

Jde o simulaci quirk módu, to by mělo pomoci od největších křečí.
Toto téma je uzamčeno. Odpověď nelze zaslat.