PDA

Prikaži potpunu verziju : [div] tag i problem sa pozadinom

Gabriel Blackheart
8.11.2008, 23:53
Ok, resih i ja da napravim svoj sajt.
Naucim ja malo HTML, malo CSS, nabavim CS4 (Dreamweaver i Photoshop).
Izdizajniram u PS, slicujem sve to lepo.
Otvorim DW, pocenem da kucam kod.
Napravim prvi div, stavim mu pozadinsku sliku koja treba da se ponavlja.
Testiram u FF, ne radi!
Kazu da u IE 6 radi, ali nisam probao.
Sklonim sliku i repat-x stavim samo color , nema ni colora, nema nicega.
Ako neko ima predlog neka da, plz :confused:.
pyost
9.11.2008, 1:11
Kopiraj HTML i CSS kôd ovde, da ne bi bespotrebno nagadjali sta je problem ;)
Gabriel Blackheart
9.11.2008, 10:06
E fora je sto i gomila ljudi ima taj prob u FF, ali ne u IE.
Ja sam imao u oba browsera.
Problem sam resio jer sam u div dodao neki bzv paragraf pa onda iz CSS bacground color ili image.
Mozda nekome pomogne ;).
Ok, malo da budem dosadan.
Imam malecni prob sa divom, mada mislim da nije nista ozbiljno.
Kada sam postavio pozadinu primetio sam da taj div ne stoji potpuno uz levu i gornju ivicu browsera.
Zato sam uradio sledece:
#glavni
{
background:url(images/Untitled-1_09_02.jpg);
width: 100%;
height:247px;
position:absolute;
left: 0px;
top: 0px;

}
Prob je u tome sto sa gornje ivice postoji linija sirine 1px (prazan prostor) preko celog ekrana, sive boje.
Nije da smeta previse, ali ako neko zna neka pomogne, a ja cu da guglam malo.
holodoc
9.11.2008, 14:01
Dobra praksa je da se pre početka bilo kakvog rada na dizajnu stranice primeni tzv. "nulovanje" ili resetovanje svih CSS selektora na margine (margins), margo (padding) i na ivice (borders).

Sledeći wildcard selector (*) će uticati na apsolutno sve elemente na stranici a atributi i vrednosti u njemu će se pobrinuti da se sve vrednosti postave na nulu. ovo je jako bitan faktor za kompatibilnost među browserima zato što apsolutno svi browseri razumeju * selector.
* {
margin:0;
padding:0;
border:0;
}
Navedeni kod bi trebalo da reši i navedene probleme sa marginama.
Gabriel Blackheart
9.11.2008, 14:56
Ok, jednu pitanje :o...
Kako da ovaj wildcard postavim u HTML-u?
Postavio sam ga u CSS, ali sta sada treba da uradim sa HTML-om?
holodoc
9.11.2008, 19:15
Ok, jednu pitanje :o...
Kako da ovaj wildcard postavim u HTML-u?
Postavio sam ga u CSS, ali sta sada treba da uradim sa HTML-om?
Jednostavno u HTML fajlu između <head> i </head> tagova dodaš sledeći blok:
<style type="text/css">
<!--
* {
margin:0;
padding:0;
border:0;
}
-->
</style>
Gabriel Blackheart
10.11.2008, 1:07
<style type="text/css">
<!--
@import url("style1280x1024.css");
<!--
* {
margin:0;
padding:0;
border:0;
}
-->
</style>

Dodao sam ovo tvoje, mada ne vidim neku promenu.
da mu moj externi style ne predstavlja problem ?
VojaM
10.11.2008, 16:04
Jesi li dobro pročitao šta ti je on napisao?

Jednostavno u HTML fajlu između <head> i </head> tagova dodaš sledeći blok
Gabriel Blackheart
10.11.2008, 22:14
Ne, jos uvek ne vidim promenu.
Dodam kod i nista se ne desava...
Moze li neko lepo da mi napise kako bi izgledao kod, od <head> do </head>
sa jednim spoljim stilom i ovim wildcardom?
holodoc
10.11.2008, 22:56
CSS je po prirodi jezik kao i svaki drugi pri čemu svaka naknadna redefinicija selektora koji je već definisan znači da će se vrednosti u redefiniciji koje postoje u prvobitnom definisanju postaviti na vrednosti novog bloka. Drugim rečima ako se na početku stranice za sve elemente putem wildcarda definišu margine, ivice i margo-i na nulu a nakon toga se recimo za body definiše margina 10 piksela svi elementi osim body-ja će imati vrednost margina od 0 piksela.

Nulovanje se uvek radi na početku svake stranice. Drugim rečima pre bilo kakvih drugih definicija poyiva se blok ya nulovanje svih selektora. Nakon toga ide importovanje ostalih pravila putem @import-a ili preko link i style blokova.

Usput... Nemoj da koristiš url() sintaksu kada importuješ css fajlove zato što veći broj browsera podržava isključivo @import "ime_fajla.css" varijantu.

Ispravan kod bi bio...
<style type="text/css">
<!--
* {
margin:0;
padding:0;
border:0;
}
@import "style1280x1024.css";
-->
</style>
A da... Nemoj da nepotrebno dupliraš otvaranje komentara <!-- iliti u prevodu svako <!-- mora da ima tačno jedno -->. Kod style bloka otvaranje komentara ide odmah posle otvaranja style bloka a zatvarajući odmah pre zatvaranja style bloka.
Gabriel Blackheart
11.11.2008, 10:32
Ubacio sam doticni kod, i rezultati su bili zabrinjavajuci.
Logo koji se takodje nalazi u ovom divu-u i dalje ima sivu liniju iznad, dok sve ostalo deluje ok.
Izgubio sam repeat-x i repeat-y u par divova, kao i pozadinu body-a.
Probacu da sa sledecim projektom prvo nulujem stranicu a onda kodiram, hvala u svakom slucaju.
holodoc
11.11.2008, 12:02
To što kažeš ne može da bude bez da si baš nešto brk'o po kodu. Postavi kompletan CSS i kompletan HTML.
Gabriel Blackheart
12.11.2008, 8:11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style type="text/css">
<!--

@import url("style1280x1024.css");

-->
</style>
</head>

<body id="telo">
<div id="celo">

<div id="glavni"><img src="images/Untitled-1_09_01.jpg" width="263" height="248" /><img src="images/Untitled-1_09_04.jpg" width="593" id="puca" /><img src="images/Untitled-1_09_08.jpg" alt="" width="4" height="13" id="split" /></div>
<div id="meni">
<img src="images/Untitled-1_09_10.jpg" alt="" width="264" height="36" id="slikameni" />
<ul id="lista">
<li>&nbsp;</li>
<li>About me</li>
<li>Music</li>
<li>Pictures</li>
<li>Guestbook </li>
</ul>
<img src="images/MASTER(WORK).jpg" alt="" width="264" height="305" /></div>
<div id="tekst">
<img src="images/box_03.jpg" alt="" width="545" height="13" class="a"/><br/>
<p>
</p>
<img src="images/images/box_08.jpg" alt="" width="544" height="11" class="a"/>
</div>
</div>
</body>
</html>



@charset "utf-8";
/* CSS Document */

#glavni
{
background:url(images/Untitled-1_09_02.jpg);
width: 856px;
height:249px;
position:absolute;
left: 0px;
top: 0px;

}
#puca
{
margin-right:0px;
margin-left:0%;
margin-bottom:1px;
}
#split
{
width:856px;
position:absolute;
top: 247px;
height: 11px;
left: 0px;
}
* {
margin:0;
padding:0;
border:0;
}
#meni
{
position:absolute;
left: 0px;
width: 264px;
top: 261px;
height: 68%;
background-image:url(images/Untitled-1_09_11.jpg);
background-repeat:repeat-y;
}
#lista
{
font-size:25px;
background-color:#989898;
text-align:center;
list-style:none;
font-family:"Arial Black", Gadget, sans-serif;
color:#FFF;
}
li:hover
{
background-color:#000
}
#slikameni
{
position:absolute;
}
#tekst
{
margin-left:300px;
margin-top:260px;
color:#093;
text-align:center;
background:#000;
width:550px;
height:500px;
background-image:url(images/box_06.jpg);
background-repeat:repeat-y;
position:absolute;
left: 0px;
}
#telo
{
background-color:#000;
padding:0;
border:0;
margin-left:18%;
height:800px;
}
.a {
float: left;
}
#celo
{
position:absolute;
}
holodoc
12.11.2008, 12:07
Da ne gubimo nepotrebno vreme imaš podosta grešaka u CSS-u a da bi svaku objasnio treba podoosta vremena. Pre nego što budeš počinjao sa radom na sledećem projektu uveri se da si savladao CSS dobro jer će ti biti potreban u izradi layouta.

Preporučujem da pogledaš sledeću stranicu: http://www.maxdesign.com.au/presentation/page_layouts/ gde ćeš naći podrobne tutorijale kako se izvode različite vrste tutorijala kao i info na šta treba da obratiš pažnju.
VojaM
12.11.2008, 14:01
Pa sad, gubili ne gubili, ovde i jeste fora u tome da ljudi nauče.
Druga priča je ako ti nemaš kada da mu napišeš ;)

Ako mene pitaš, bilo bi korisno čak i da mu samo naznačiš nekoliko najvećih i najosnovnijih grešaka.
Gabriel Blackheart
16.11.2008, 23:16
Izvinite ljudi malo idem offtopic od div-a.
Ali imam jedan mali prob.
Jedan deo sajta je gotov i to nameravam da objavim.
Samo sto me kompatibilnost zeza.
Sajt je optimizovan za FF, radi sjajno.
Za Operu i IE, pojavljuje se ista greska.
Kod je validan i sve.
Znam kako i da sredim to, dodam javascript da detektuje browser.
Ali javascript se ne startuje na sajtu.
Pa cak ni hello word script.
Izvinjavam se zbog offtopica blagog, ali molim pomoc.
pyost
16.11.2008, 23:34
Nemoj da resavas preko JavaScripta, vec sredi CSS tako da ostane isto u Firefoxu, a da proradi u Operi i IEu ;)
Gabriel Blackheart
16.11.2008, 23:41
Ma radi odlicno i u IE i FF, samo sto mi jedan repeat-x ide van diva...
Mada nije stasno, kako zna da bude :D.
Za prvi projekat valjda nije lose.
PDarko
19.11.2008, 19:30
Za prvi projekat valjda nije lose.
Постави линк овде па да те оценимо. :D