Šta je novo?
Od:
Filteri

CSS site design-problem

Serbianboss

Serbianboss

Čuven
Učlanjen(a)
07.01.2005
Poruke
1,864
Poena
660
Pravim jedan sajt koji treba da izgleda ovako:



U pitanju je 3 column layout sajt, radim preko css-a.

Width treba da bude 100%, sidebarovi su fixni, jedino se content menja u zavisnosti od rezolucije.

E sad, left i right sidebar treba da budu kao na slici, znaci da uvek budu crveni. Napravio sam sliku 176x2 i stavio da se ponavlja po y osi ali bezuspesno. Prvo sam napravio css kod za html i stavio sliku da ide za desni sidebar, potom sam napravio css kod za body i stavio sliku da ide za levi sidebar. Ta fora uspe samo za desni sidebar a za levi(body) ne uspe.

Inace trik za body i html(sidebarovi) sam video na primeru:
http://www.positioniseverything.net/threecolbglong.html

Ovo je kod pa ako neko zna resenje kako da se resi ovaj problem:

Kod: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html {
	background-image: url(faux-red.jpg);
	background-repeat: repeat-y;
	background-position: 100% 0%;
}


body {
	margin: 0px;
	padding: 0px;
	background-image: url(faux-red.jpg);
	background-repeat: repeat-y;
	background-position: 0% 0%;
}

#wrapper {
	width: 100%;
	background-image: url(faux-red.jpg);
	background-repeat: repeat-y;
	background-position: 100% 0%;
}
#left {
	float: left;
	width: 176px;
}
#right {
	float: right;
	width: 176px;
}
#centar {
	margin-right: 200px;
	margin-left: 200px;
}

#clear {
	clear: both;
}

-->
</style>
</head>

<body>

<div id="wrapper">

<div id="left">
levo
</div>

<div id="right">
desno
</div>

<div id="centar">
cenatar
</div>


<div id="clear"></div>
</div>
</body>
</html>

Znaci levi sidebar treba da bude kao desni.
Evo okacio sam i faux sliku:
http://img210.imageshack.us/img210/5702/fauxrediq8.jpg
 
Poslednja izmena:
Serbianboss je napisao(la):
Ta fora uspe samo za desni sidebar a za levi(body) ne uspe.
Kliknite za proširenje...
Naravno da ne radi, piše ti tamo odakle si pokupio kod zašto ne radi:

The only major glitch is that if none of the cols is long enough to force a vertical scrollbar, then the cols don't all end together.
Kliknite za proširenje...

Za konkretan slučaj ti zaista ne trebaju slike, ali slike mogu biti korisne ako se hoće neka komplikovanija pozadina (sa nekim linijama i sl).
 
Kako ne radi, kada na tom primeru radi i to sve sa faux slikama. Cilj je da leva i desna kolona budu skroz u boji po vertikali bez obzira na tekst. Zato mi ne znaci da stavim boju samo na sidebar jer ce u tom slucaju boja ici onoliko koliko ima teksta. Zato je i ideja da se stavi faux slika koja ce se ponavljati do beskonacnosti. Ako neko zna kako ovo da se resi(ne mora da bude sa faux slikama ako ne mora) neka postavi kod.
 
Poslednja izmena:
To tvoje nije dobro, sidebarovi(boja) treba da idu do beskonacnosti.I nije ti isto u FF i IE,i to kosta 100e. Citaj malo sta se ovde trazi
 
Poslednja izmena:
slika ce ti se takodje ponavljati po y osi samo onoliko koliko ima texta ako ne naznacis "height".
Za #body i # html nije bilo potrebe.
Evo ga kod (ja sam stavio visinu 300px a ti stavi koliko ti treba), nadam se da pomaze:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

#wrapper {
	width: 100%;
	background-position: 100% 0%;
}
#left {
	background-image:url(fauxrediq8.jpg);
	background-repeat: repeat-y;
	float: left;
	width: 176px;
	height:300px;
}
#right {
	background-image:url(fauxrediq8.jpg);
	background-repeat: repeat-y;
	float: right;
	width: 176px;
	height:300px;
}
#centar {
	margin-right: 200px;
	margin-left: 200px;
	height:auto;
}

#clear {
	clear: both;
}


</style>
</head>

<body>

<div id="wrapper">

<div id="left">
levo
</div>

<div id="right">
desno
</div>

<div id="centar">
cenatar
</div>


<div id="clear"></div>
</div>
</body>
</html>
 
Ali postoji fora da se ponavlja bez obzira na text. Treba da dobijem sidebarove kao na ovom sajtu:

http://www.positioniseverything.net/sidepages/threecolbgshort.html

Ustvari ovde se i uspe ako se stavi hight na 100% na body,html i wrapper. Medjutim kada previse stavim teksta u srednju kolonu, levi sidebar se raspadne, tacnije boja ne ide onda do kraja.

A ovaj primer nikako da uspem da napravim:
http://www.positioniseverything.net/threecolbglong.html

Znaci cilj je da bez obzira na tekst u sidebarovima da boja ide do beskonacnosti.
 
znaci pitanje je kako da napravis da ti bocne kolone prate duzinu texta u srednjoj! ***. ne znam. ajde ljudi pomagajte 🙂 znam da ovde ima naprednijih korisnika css-a
 
evo nesto sam zbudzio 🙂 verovatno moze jos da se preradi, da se izbace slike a stave margine ili nesto slicno. ovaj kod kod mene radi ali ne znam koliko ce tebi biti zanimljiv.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

body {
	margin: 0px;
	padding: 0px;
	background-image:url(fauxrediq8.jpg);
	background-repeat: repeat-y;
	background-position: 0% 0%;
	
	}
#wrapper {
    background-image:url(fauxrediq8.jpg);
	background-repeat: repeat-y;
	background-position: 0% 0%;
	width: 100%;
	background-position: 100% 0%;
}
#left {
	background-color:#FF0000;

	float: left;
	width: 176px;

}
#right {
	background-color:#FF0000;

	float: right;
	width: 176px;

}
#centar {
	margin-right: 200px;
	margin-left: 200px;
}

#clear {
	clear: both;
}


</style>
</head>

<body>

<div id="wrapper">

<div id="left">
levometus non per magna. Lorem luctus eu turpis egestas sodales, a dolor erat velit, sapien arcu suspendisse diam sodales pretium a, vestibulum tortor vel in donec te
</div>

<div id="right">
desno cenatarext in the content column.Lorem ipsum dolor sit amet, nibh pellentesque ut lacus mollis, ante dolor vivamus pede quis pede integer, quis massa facilisis eget nunc amet, pulvinar vitae pellentesque dui quis purus possimus, commodo integer tristique. Donec nec. Praesent consequat vel viverra. Quis placerat lacinia nulla, at wisi. Sed nam pede egestas suspendisse, proin rutrum ut 
</div>

<div id="centar">
cenatarext in the content column.Lorem ipsum dolor sit amet, nibh pellentesque ut lacus mollis, ante dolor vivamus pede quis pede integer, quis massa facilisis eget nunc amet, pulvinar vitae pellentesque dui quis purus possimus, commodo integer tristique. Donec nec. Praesent consequat vel viverra. Quis placerat lacinia nulla, at wisi. Sed nam pede egestas suspendisse, proin rutrum ut vitae. Sem turpis lacinia ac sed et, morbi mauris nulla aenean vitae. Donec neque a, interdum cras vitae vitae. Consectetuer ante eleifend ultrices, convallis orci. Euismod erat ut fermentum nascetur fusce, praesent dui suscipit arcu, libero placerat felis metus non per magna. Lorem luctus eu turpis egestas sodales, a dolor erat velit, sapien arcu suspendisse diam sodales pretium a, vestibulum tortor vel in donec tempor sollicitudin, tristique sollicitudin. At ipsum elit mi vitae sed eget, risus nulla nisl ut. Pede etiam, aenean sed massa quis rutrum. Porttitor sit sit nunc magnis, est quis taciti torquent, libero mauris convallis sed a at. Eros voluptatem consequat venenatis, vestibulum ipsum velit enim eget vivamus faucibus, nunc gravida. Tempor velit sit interdum mattis augue erat, sit amet commodo cras pellentesque vel neque, est ipsum, ac nisl a tristique aut fermentum, proin ultricies. Tempor malesuada quam quam, aliquet a ut congue lorem risus eget, velit amet et. Tristique neque enim non dapibus nullam, dolor elit vestibulum fermentum et, consequat nisl hac sed volutpat pellentesque gravida, et velit orci, donec feugiat condimentum donec tellus proin. Sapien eget sollicitudin a quam magna, pellentesque elit dui phasellus, ipsum venenatis nullam quis. Erat risus nascetur euismod egestas, urna sit nulla, ipsum nascetur hac. Vitae maecenas vitae in in vitae convallis, vivamus amet. Dui tellus varius, mus gravida mauris non, nulla est nibh. Magnis corrupti, arcu quam cursus interdum rutrum fermentum, ultricies curabitur, est ac dolor ante proin. Urna aptent mauris tristique malesuada, donec nibh. Dolor eget pulvinar neque arcu ligula facilisi, aptent vehicula, suscipit id, pretium quo. Imperdiet enim vitae metus blandit est, adipiscing eu, eleifend eu ut posuere sit duis et, a eu ligula, id vestibulum porta lacinia praesent mattis. Non dui magna a cursus aliquam, praesent sed lacinia sed imperdiet, aliquam in in habitasse at, per dictumst per curae, tellus eget et pulvinar tincidunt. Amet purus donec, interdum mauris nibh ut minus arcu, wisi nunc elementum eros at et, et sit mattis vehicula aliquam mi odio. Nec integer, semper ipsum posuere quis morbi donec, aliquam auctor, congue magna diam porttitor eu sed suspendisse. Suspendisse dui vitae et erat lorem wisi, scelerisque integer consectetuer ut eu pellentesque, dolor accumsan, ac eget sed vestibulum commodo duis natoque. A lectus nunc vehicula ultricies elit, pede porttitor quam. In ipsum euismod orci, nullam non accumsan, malesuada proin euismod. Augue et posuere odio lacinia eget nec, maecenas morbi mauris, sit sodales ipsum nibh gravida. Orci eu et cras morbi sed, enim justo viverra feugiat in ipsum aenean. 

Text in the third column. 




</div>


<div id="clear"></div>
</div>
</body>
</html>
 
Serbianboss je napisao(la):
To tvoje nije dobro, sidebarovi(boja) treba da idu do beskonacnosti.I nije ti isto u FF i IE,i to kosta 100e. Citaj malo sta se ovde trazi
Kliknite za proširenje...

Ajd da ti odgovorim, visina je nebitan faktor i da se lako podesiti.
U kom IE nije isto?

100 eura kosta iskodirani template, ne holder+3 diva. 😉
 
Serbianboss je napisao(la):
Kako ne radi, kada na tom primeru radi i to sve sa faux slikama.
Kliknite za proširenje...
Hm, jel ti čitaš šta tamo piše ili ne razumeš engeski ili šta? U taj tvoj kod dodaj negde (u srednji deo) dovoljno teksta da isprovocira pojavu scrollbara - i ima da radi. Ne radi ako je prazno, ne radi ako se ne pojavi scrollbar - radi ako se pojavi.

E sad, ti kažeš da ako dodaš previše teksta opet ne radi... Ja sam prilikom testiranja dodavao i uvek mi je radilo. Šta znam...

Mislim, evo zašto ja grmim na CSS... Dodate jedno <center></center> i sve lepo radi. Onda hoćete da umesto toga centrirate jednostavan DIV pomoću CSS-a i treba vam hrpa ružnog koda. Opera i FF centriraju na jedan način, IE to radi na drugi (potpuno nakaradan). Stalno se iznova ponavlja da vam za neke proste stvari treba silna glavobolja da ih uradite u CSS. Sve dok su stvari čvrste to je savršeno, čim nešto treba da se širi i/ili pozicionira automatski, vi ste u problemu.
 
Poslednja izmena:
Evo skoro da sam uspeo da napravim kako treba ali opet novi problemi. Evo kacim attachment da vidite u cemu je problem. Sada sam popunio srednju kolonu nekim tekstom, medjutim kada popunim tu kolonu tekstom taj tekst postane paragraf (<p> </p>) sto je u redu. Medjutim cim tekst postane paragraf sa leve kolone pri vrhu i pri dnu nestane crvene boje mozda oko 20px.

Okacio sam fajl da vidite o cemu se radi. Kako bi taj problem mogao da resim? Inace taj Problem se vidi u Mozilli 2.0.0.6 a u IE 7 ne.
 

Prilozi

Morate se prijaviti ili registrovati da odgovorite ovde.
Nazad
Vrh Dno