Double float problem - resen, ali ima dodatni problem :0

ljtruba · 19. 05. 2008.

Napravio sam nesto ovako

Kôd:

<div id="container">
<div id="stripe"><img src="images/header.jpg" alt="header" /></div>
<div id="stripe"><img src="images/kategorije.jpg" alt="kategorije" /></div>
<div id="left">
<div id="navigation">
:: <a href="onama.php">O nama</a><br />
</div>
</div>
<div id="right">
<div id="navigation">
:: <a href="vesti.php">Vesti</a><br />
</div>
</div>
<div id="stripe"><img src="images/novo.jpg" alt="forum" /></div>

a CSS je

Kôd:

#container{
width: 320px; /*The width of our layout*/
margin-left: auto;
margin-right: auto;
text-align: left; 
}

#stripe{
	width: 320px;
	height: 24px;
	margin-left: auto;
	margin-right: auto;
	display: inline;
	margin-top: 10px;
	margin-bottom: 10px;
}
#navigation{
color: #2876c0;
margin-bottom: 10px;
}

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

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

Dakle, pre nego sto sam u #stripe ubacio display: inline;
imao sam standardni double float problem, ali kad sam ubacio diplay::inline sada mi vise ne radi
margin-top: 10px;
margin-bottom: 10px;

Kako ovo da resim, trebaju mi te margine.
Hvala

bluesman · 19. 05. 2008.

A šta treba da dobiješ? Koliko vidim ti imaš ovaj stripe (koji treba da bude class a ne id ako ćeš ovako da ga koristiš) koji ima širinu 320px... a onda imaš layout koji je širine 320px i pokušavaš da zbudžiš stripe između 2 floata po 150px... to je 2 x 150 + 320 = 620px ... pa kada još dodaš margine... mislim da ti je container previše uzak.

... a opet... nisi objasnio (ili ja ne razimem) šta želiš da dobiješ.

xippi · 19. 05. 2008.

^^ + ovaj navigation bi isto trebao da je klasa. id je jedinstveni indetifikator na stranici tako da bi trebao da postoji samo jedan. ako imas vise elemenata koji treba da se ponasaju isto onda stavis klasu

nisam siguran sta zelis postici sa ovim inline elementima ali njima ne mozes staviti gornju i donju marginu, vec samo levo i desno. za vise pogledaj ovde. takodje, ako imas dva elementa koja floatuju i hoces treci da postavis ispod njih on mora da ima property clear:both (ili clear:left, clear:right... sta si vec koristio na prethodna dva)

Zero-Cool · 19. 05. 2008.

Evo malo sam ti prepravio kod, Ovako bi trebalo da izgleda da je ispravno napisano, sad ti to stavi kod sebe pa vidi jel to ono sto si ti hteo da dobijes ako nije onda ces morati da nacrtas tacno kako treba da izgleda pa ce ti vec neko objasniti.

xhtml:

Kôd:

<div id="container">
<div class="stripe"><img src="images/header.jpg" alt="header" /></div>
<div class="stripe"><img src="images/kategorije.jpg" alt="kategorije" /></div>
<div id="left">
<div class="navigation">
:: <a href="onama.php">O nama</a><br />
</div>
</div>
<div id="right">
<div class="navigation">
:: <a href="vesti.php">Vesti</a><br />
</div>
</div>
<br class="clearfloat" />
<div class="stripe"><img src="images/novo.jpg" alt="forum" /></div>
</div>

css:

Kôd:

#container{
             width: 320px; /*The width of our layout*/
             margin:0 auto;
             padding:0px;
             text-align: left; 
}

#stripe{
	width: 320px;
	height: 24px;
             padding:0px;
             margin: 10px auto;
}
#navigation{
             color: #2876c0;
             margin-bottom: 10px;
             padding:0px;
}

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

#right{
             width: 150px;
             float: right;
}
.clearfloat {
             clear:both;
             height:0;
             font-size: 1px;
             line-height: 0px;
}

Eto tako bi trebalo da izgleda, e sad sta ti tacno hoces da postignes ja i dalje nemam pojma moras malo vise da se potrudis da objasnis da bi te razumeli. Inace nisi imao zatvoren #container div u kodu koji si gore postavio, pored onih gresaka koje su blues i xippi pomenuli.

ljtruba · 19. 05. 2008.

Ovo mi je prvi xHTML koji radim, pa se izvinjavam na greskama, ajmo ispocetka.

Kôd:

<body>
<div id="container">
<div class="stripe"><img src="images/header.jpg" alt="header" /></div>
<div class="stripe"><img src="images/kategorije.jpg" alt="kategorije" /></div>
<div id="left">
<div class="navigation">
:: <a href="magazin.php">Magazin</a><br />
:: <a href="pretplata.php">Pretplata</a><br />
:: <a href="redakcija.php">Redakcija</a><br />
:: <a href="onama.php">O nama</a><br />
:: <a href="marketing.php">Marketing</a>
</div>
</div>
<div id="right">
<div class="navigation">
:: <a href="vesti.php">Vesti</a><br />
:: <a href="linkovi.php">Linkovi</a><br />
:: <a href="oglasivaci.php">Oglašivači</a><br />
:: <a href="reportaze.php">Reportaže</a><br />
:: <a href="intervjui.php">Intervjui</a>
</div>
</div>
<br class="clearfloat" />
<div class="stripe"><img src="images/novonaforumu.jpg" alt="forum" /></div>
<div id="banner"><img src="images/baner.gif" alt="banner" /></div>
<div class="stripe"><img src="images/footer.jpg" alt="footer" /></div>
</div>
</body>
</html>

CSS

Kôd:

#container{
width: 320px; /*The width of our layout*/
margin-left: auto;
margin-right: auto;
text-align: left;
}

#stripe{
	width: 320px;
	height: 24px;
	padding:0px;
    margin: 10px auto;
}

#banner{
width: 300px;
height: 75px;
margin-left: auto;
margin-right: auto;
}

#navigation{
color: #2876c0;
margin-bottom: 10px;
padding:0px;
}

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

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

#magazin{
float: right;
margin: 0 0 10px 10px;
border: 1px solid #666;
padding: 2px;
}

.clearfloat {
             clear:both;
             height:0;
             font-size: 1px;
             line-height: 0px;
}

A pokusavam da napravim prored iznad i ispod svih elemenata, da malo disu.
Evo sta pokusavam.

xippi · 19. 05. 2008.

html:

Kôd:

<div id="container">
<div class="stripe">heder</div>
<div class="stripe">kategorije</div>
<div id="left">
	<ul class="navigation">
		<li><a href="magazin.php">Magazin</a></li>
		<li><a href="pretplata.php">Pretplata</a></li>
		<li><a href="redakcija.php">Redakcija</a></li>
		<li><a href="onama.php">O nama</a></li>
		<li><a href="marketing.php">Marketing</a></li>
	</ul>
</div>
<div id="right">
	<ul class="navigation">
		<li><a href="vesti.php">Vesti</a></li>
		<li><a href="linkovi.php">Linkovi</a></li>
		<li><a href="oglasivaci.php">Oglašivači</a></li>
		<li><a href="reportaze.php">Reportaže</a></li>
		<li><a href="intervjui.php">Intervjui</a></li>
	</ul>
</div>
<div class="stripe">novo na forumu</div>
<div id="banner">baner</div>
<div class="stripe">futer</div>
</div>

css:

Kôd:

#container{
	 width: 320px; /*The width of our layout*/
	 margin:0 auto;
	 padding: 0;
}

.stripe{
	width: 320px;
	height: 24px;
	padding: 0px;
	margin: 0 auto 10px auto;
	clear: both;
	background: red;
}
.navigation {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.navigation a {
	color: #2876c0;
}

#left{
	width: 150px;
	float: left;
	margin: 0 0 10px 0; /* top right bottom left */
}

#right{
	width: 150px;
	float: right;
	margin: 0 0 10px 0;
}

#banner {
	margin: 0 0 10px 0;
}

Zero-Cool · 19. 05. 2008.

e sad je mnogo jasnije sta hoces, elem onda sam ti dobro napisao gore i ispravio tvoj kod jedino sto sam napravio gresku u css-u jer sam prevideo da treba da izmenim # sa . kod class-a.

Kôd:

<div id="container">
<div class="stripe"><img src="images/header.jpg" alt="header" /></div>
<div class="stripe"><img src="images/kategorije.jpg" alt="kategorije" /></div>
<div id="left">
<div class="navigation">
:: <a href="magazin.php">Magazin</a><br />
:: <a href="pretplata.php">Pretplata</a><br />
:: <a href="redakcija.php">Redakcija</a><br />
:: <a href="onama.php">O nama</a><br />
:: <a href="marketing.php">Marketing</a>
</div>
</div>
<div id="right">
<div class="navigation">
:: <a href="vesti.php">Vesti</a><br />
:: <a href="linkovi.php">Linkovi</a><br />
:: <a href="oglasivaci.php">Oglašivači</a><br />
:: <a href="reportaze.php">Reportaže</a><br />
:: <a href="intervjui.php">Intervjui</a>
</div>
</div>
<br class="clearfloat" />
<div class="stripe"><img src="images/novonaforumu.jpg" alt="forum" /></div>
<div id="banner"><img src="images/baner.gif" alt="banner" /></div>
<div class="stripe"><img src="images/footer.jpg" alt="footer" /></div>
</div>

Kôd:

#container{
width: 320px; /*The width of our layout*/
margin-left: auto;
margin-right: auto;
text-align: left;
}

.stripe{
	width: 320px;
	height: 24px;
	padding:0px;
             margin: 10px auto;
}

.banner{
             width: 300px;
             height: 75px;
             margin-left: auto;
             margin-right: auto;
}

.navigation{
             color: #2876c0;
             margin-bottom: 10px;
             padding:0px;
}

#left{
             width: 100px;
             float: left;
}

#right{
             width: 100px;
             float: left;
             margin-left:20px; /* udaljenost od leve kolone linkova*/
}

#magazin{
             width: xxx px; /* dodaj ovom elementu width jer bez toga ce ti se poremetiti float */ /* a u xhtml kodu obavezno posle ovog elementa stavi <br class="clearfloat" /> */
             float: right;
             margin: 0 0 10px 10px;
             border: 1px solid #666;
             padding: 2px;
}

.clearfloat {
             clear:both;
             height:0;
             font-size: 1px;
             line-height: 0px;
}
</style>

ljtruba · 19. 05. 2008.

hmmm. hvala, imam ja jos da ucim

ljtruba · 03. 06. 2008.

Pozdrav,
evo igrao sam se još malo pa sam hteo da se malo pohvalim sa dosadašnjim radom.
Naravno, nije sve gotovo, treba da uradim još 4 stranice, a imam i problem sa utf-8

Pogledajte sajt na wap.hi-files.com

Da li neko može da mi objasni zašto dobijam one upitnike u kvadratima?
Stavio sam koding stranice na utf-8 a podatke vučem iz baze.

ljtruba · 03. 06. 2008.

I javite mi da li mi je xHTML/CSS ispravan, jer sam tek ušao u svet bez tabela.

Slične teme
Tema	Početna poruka teme	Forum	Odgovori	Poslednja poruka
SEO: dodatni domeni?	ivanhoe	Marketing i SEO	14	16. 08. 2010. 19:18
Double Click	bojan.pejanovic	Marketing i SEO	0	20. 10. 2009. 16:35
Double pointers - C (Cudno!)	orangem	Programiranje	4	15. 02. 2009. 21:21
IE background flicker RESEN !!!	ivanhoe	(X)HTML, JavaScript, DHTML, XML, CSS	1	29. 09. 2006. 10:51
IE i rendering kad se koristi float	nixa	(X)HTML, JavaScript, DHTML, XML, CSS	11	25. 01. 2006. 23:08

19. 05. 2008.	#2
bluesman Goran Pilipović Sir Write-a-Lot Datum učlanjenja: 18.05.2005 Lokacija: Beograd Poruke: 5.450 Hvala: 288 1.247 "Hvala" u 446 poruka	A šta treba da dobiješ? Koliko vidim ti imaš ovaj stripe (koji treba da bude class a ne id ako ćeš ovako da ga koristiš) koji ima širinu 320px... a onda imaš layout koji je širine 320px i pokušavaš da zbudžiš stripe između 2 floata po 150px... to je 2 x 150 + 320 = 620px ... pa kada još dodaš margine... mislim da ti je container previše uzak. ... a opet... nisi objasnio (ili ja ne razimem) šta želiš da dobiješ. __________________ Goran Pilipović a.k.a. Ugly Fingers Bradley f.k.a. bluesman I don't always know what I'm talking about but I know I'm right!

19. 05. 2008.	#3
xippi xippster Master Datum učlanjenja: 16.06.2005 Lokacija: Beograd Poruke: 681 Hvala: 102 138 "Hvala" u 84 poruka	^^ + ovaj navigation bi isto trebao da je klasa. id je jedinstveni indetifikator na stranici tako da bi trebao da postoji samo jedan. ako imas vise elemenata koji treba da se ponasaju isto onda stavis klasu nisam siguran sta zelis postici sa ovim inline elementima ali njima ne mozes staviti gornju i donju marginu, vec samo levo i desno. za vise pogledaj ovde. takodje, ako imas dva elementa koja floatuju i hoces treci da postavis ispod njih on mora da ima property clear:both (ili clear:left, clear:right... sta si vec koristio na prethodna dva)

19. 05. 2008.	#8
ljtruba old school Expert Datum učlanjenja: 14.10.2006 Poruke: 460 Hvala: 39 17 "Hvala" u 14 poruka	hmmm. hvala, imam ja jos da ucim

03. 06. 2008.	#9
ljtruba old school Expert Datum učlanjenja: 14.10.2006 Poruke: 460 Hvala: 39 17 "Hvala" u 14 poruka	Pozdrav, evo igrao sam se još malo pa sam hteo da se malo pohvalim sa dosadašnjim radom. Naravno, nije sve gotovo, treba da uradim još 4 stranice, a imam i problem sa utf-8 Pogledajte sajt na wap.hi-files.com Da li neko može da mi objasni zašto dobijam one upitnike u kvadratima? Stavio sam koding stranice na utf-8 a podatke vučem iz baze.