Reset css

igoo · ožujak 2010 13:08 3

Jel netko zna ?

pročitao sam članak o reset.css i odlučio ga staviti na svoju stranicu koja je još u fazi rada(tek prva stranica).Desilo se da su naslovi h2,h3 promijenili prijašnji položaj i sa sredine strane otišli neki gore do ruba a neki ulijevo.Isto tako jedan izbornik mi se malo promijenio.Pošto pozicioniranje naslova h2,h3 radim postavkama margina konkretno

h2{
position:absolute;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#FFFFFF;
text-decoration:none;
margin:550px 0 0 70px;
}
ne znam kako više pozicionirati naslove osim da reset css izbacim van.Link do reset.css mi je u html-u i vidi se po promjeni da radi.
Da li da reset.css izbacim ili kako da riješim ovaj problem?
Hvala unaprijed za odgovor.

bine · ožujak 2010 13:34 3

reset css - dobijo je naziv po tome da default css stanje “nulira” tako da ga nazovemo, a posto h1, h2, … po defaultu imaju neku marginu i padding dodavanjem reset css-a to se nulira i zato ti se to pomjeri,

pokazi nam kod stranice i onda cemo ti vise pomoc ili probaj promijeniti padding posto vidim da si margin dodao,

sretno

gog · ožujak 2010 13:35 3

Za početak, ne postoji jedan reset.css, ovisi o tome što unutra piše.

Kao drugo, imaš marginu s gornje strane od 550px na h2 elementu, to mi se baš i ne čini kao da je najispravnije.

Trebao bi prvo malo bolje savladati CSS prije nego što se uhvatiš u koštac sa izradom stranica.

zmaj · ožujak 2010 14:22 3

Po ovome što si napisao, pretpostavljam da si reset.css ubacio naknadno, to bi objasnilo tvoj problem.
Kad počinješ raditi, prvo resetiraj css, pa tek onda kreni dalje, mislim da će ti tako biti najlakše…

igoo · ožujak 2010 19:46 3

Istina je kao što je rekao zmaj reset.css sam naknadno ubacio.Reset je eric meyer-ov.Šta sada da radim,ne mogu sve iz početka.
Evo cijeli HTML i Css pa ako netko ima kakvu dobru ideju neka samo izvoli.
Pozdrav svima.

HTML

vjezba 2

<div id ="omotac_unutarnji">
	<div id="zaglavlje">
	<h1>Stranica u izradi</h1>
	</div>	
		<div id="sadrzaj">

		<div id="lijevo">
		
		
		<div id="slika_sova">
		<img src="images/sova.gif" width="130" height="98"/>
		</div>
		
		
		
		<div class="izbornik">
		
		<ul>
                    <li>

O nama

Ponuda

Fotografije

Kako do nas

Kontakt

   <div id="srednji">
   
   <div class="slika_kuca">
	<img src="images/kuca.jpg" width="142" height="107"alt="stara lonja"/>
		</div>
   
   <div class="slika_kuca2">
		<img src="images/plot.jpg" width="142" height="107"alt="stara lonja"/>
		</div>

   <h2>lorem ipsum</h2>
  
   <div id="text_sredina">
   <p>text1

   </div>

		<div id="desno">
		
		
		<h3>dolor sit amet</h3>
		
                                <div id="izleti">
		<p>Lorem ipsum</p>
		<p>Lorem ipsum</p>
		<p>Lorem ipsum</p>
		<p>Lorem ipsum</p>
		<p>Lorem ipsum</p>
		<p>Lorem ipsum</p>
		<p>Lorem ipsum</p>
		<p>Lorem ipsum</p>
		
		</div>
		</div>

(C)copyright Lorem ipsum

CSS

body
{
background:#a7b589;
}
{margin: 0; padding: 0;}
/-------------------------------------------tijelo---------------------------------------/
h1{
font-family:Arial,Helvetica,sans-serif;
font-size:24px;
color:#FFFFFF;
margin:0px 0 0 10px;
}
/-------------------------------------------omotači---------------------------------------*/
#omotac{
width:970px;
height:1010px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
border:2px dotted black;
background:#817C4C;
overflow:hidden;
}

#omotac_unutarnji{
float:left;
margin:5px;
width:960px;
height:1000px;
background:#ffffff;
}

#zaglavlje{
position:relative;
width:960px;
height:150px;
background:url(images/headera.jpg) no-repeat;
}

#sadrzaj{
float:left;
width:960px;
height:1000px;
}

/-------------------------------------------lijevistupac---------------------------------------/
#lijevo{
width:316px;
height:793px;
float:left;
margin-left:0px;
margin-top:0px;
background:#679a3b;

}

#slika_sova{
position:absolute;
width:130px;
height: 98px;
margin:232px 0 0 35px;
background: url(images/sova.gif) no-repeat;
}

/-------------------------------------------izbornik---------------------------------------/
.izbornik{
position:absolute;
width:150px;
float:left;
margin:330px 0 0 35px;
}

.izbornik ul{
width:150px;
padding:0px;
margin:0px;
border:1px dashed;
}

.izbornik ul li a:link,a:visited{
width:140px;
height:20px;
display:block;
background:#595E23;
padding-left:10px;
}

.izbornik ul li a:hover{
background:#FFFFFF;
color:#000000;
text-decoration:none;
}

a:link,a:visited{
font-family:,Arial,Helvetica,sans-serif;
font-size:12;
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}

a:hover{
text-decoration:none;
}
ul{
list-style:none;
}
/-------------------------------------------izbornik---------------------------------------/

/-------------------------------------------srednjistupac---------------------------------------/

#srednji{
width:316px;
height:793px;
float:left;
margin-left:1px;
background:#3e6623;
}

.slika_kuca{
position:absolute;
background-image:url(images/kuca.jpg);
width:142px;
height: 107px;
margin:50px 0 0 80px;
border:2px double #d2d0d8;

}

.slika_kuca2{
position:absolute;
background-image:url(images/plot.jpg);
width:142px;
height: 107px;
margin:325px 0 0 80px;
border:2px double #d2d0d8;

}
#text_sredina{
position:absolute;
width:305px;
margin:180px 0 0 5px;
text-align:justify;
}

h2{
position:absolute;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#FFFFFF;
text-decoration:none;
margin:550px 0 0 70px;
}

/-------------------------------------------srednjistupac---------------------------------------/

/-------------------------------------------desnistupac---------------------------------------/

#desno{
width:316px;
height:793px;
float:left;
margin-left:1px;
margin-right:0px;
padding:0 5px 0 5px;
background:#679a3b;
}
h3 {
position:absolute;
font-family:Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFFFFF;
text-decoration:none;
margin:30px 0 0 120px;
}

#izleti{
position:absolute;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
color:#23430a;
margin:60px 0 0 105px;
line-height:1.5;
}

/-------------------------------------------podnožje---------------------------------------/
#podnozje{
clear:both;
width:960x;
height:57px;
background:#23430a;
margin-top:0px;
margin-left:0px;
margin-right:0px;
}
.text{
float:left;
margin:40px 0px 0px 363px;
font-size:15px;
font-style:italic;
}

stonesurfer · ožujak 2010 23:29 3

Ja bih ti preporučio da za početak ne koristiš Eric Mayerov reset.css ako ne kužiš o čemu je riječ. Može biti zbunjujuće.

Na vrh CSS-a stavi:

{ margin: 0px; padding: 0px }

I ništa drugo ti netreba. To je osnovni CSS reset, sve drugo su po mojem mišljenju samo komplikacije. Eventualno oko formi može biti nekih “diskrenpancija” ali ništa što se nebi dalo srediti.

darkqueliss · ožujak 2010 07:53 4

U svakom divu si odredi kako želiš da ti se prikazuje neki element.

igoo · ožujak 2010 21:29 7

Riješio sam problem.Samo treba reset.css staviti iznad styles.css.

NE OVAKO

NEGO OVAKO

I SVE JE OPET U REDU

zmaj · ožujak 2010 07:33 8

Možeš ga jednostavno importirati unutar style.css ovako:

@import url("reset.css");