|
(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi |
|
Alati teme | Način prikaza |
19. 05. 2008. | #1 |
old school
Expert
Datum učlanjenja: 14.10.2006
Poruke: 460
Hvala: 39
17 "Hvala" u 14 poruka
|
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> 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; } 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 |
19. 05. 2008. | #2 |
Goran Pilipović
Sir Write-a-Lot
|
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 |
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. | #4 |
profesionalac
Qualified
|
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> 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; }
__________________
Mess with the best die like rest!!! |
19. 05. 2008. | #5 |
old school
Expert
Datum učlanjenja: 14.10.2006
Poruke: 460
Hvala: 39
17 "Hvala" u 14 poruka
|
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; } Evo sta pokusavam. |
19. 05. 2008. | #6 |
xippster
Master
Datum učlanjenja: 16.06.2005
Lokacija: Beograd
Poruke: 681
Hvala: 102
138 "Hvala" u 84 poruka
|
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> 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; } |
"Hvala" xippi za poruku: |
19. 05. 2008. | #7 |
profesionalac
Qualified
|
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>
__________________
Mess with the best die like rest!!! |
19. 05. 2008. | #8 |
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 |
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. |
03. 06. 2008. | #10 |
old school
Expert
Datum učlanjenja: 14.10.2006
Poruke: 460
Hvala: 39
17 "Hvala" u 14 poruka
|
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 |