 |
|
| ljtruba |
19. 05. 2008. 03:39 |
Double float problem - resen, ali ima dodatni problem :0
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. 03:56 |
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. 07:43 |
^^ + 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. 09:21 |
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. 10:38 |
1 Prilog(a)
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. 11:04 |
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. 11:15 |
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. 11:15 |
hmmm. hvala, imam ja jos da ucim :)
|
| ljtruba |
03. 06. 2008. 02:42 |
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. 02:43 |
I javite mi da li mi je xHTML/CSS ispravan, jer sam tek ušao u svet bez tabela.
|
| Vreme je GMT +2. Trenutno vreme je 10:26. |
|
Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.
Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.