Gå til innhold

[Løst] margin er på bærtur!

jeIIy

Av jeIIy
i Programmering og webutvikling

Anbefalte innlegg

jeIIy

jeIIy

Skrevet
Skrevet

Jeg får en margin på toppen som jeg ikke kan kontrollere. Det eneste stedet jeg kan skifte margin er maincontent, alt annet styrer av seg selv :S

 

har lastet opp et bilde av problemet.RWcwajVn.jpeg

html, body
{
    margin: 0;
    padding: 0;
    background-color:#d2d1d0;
}

a:link {color:#666; text-decoration:none;}
a:visited {color:#666;}
a:hover {color:#FFFFFF; background-color:#232323; border-radius:5px; padding:5px;}
a:active {color:#000000;}

#container {
width:900px;
margin-left:auto;
margin-right:auto;
}
#header {
background-color:#232323;
color:white;

}

#menu {
background-color:#CCCCCC;
}

#menu ul {
padding:20px;
}

#menu ul li{
list-style-type:none;
display:inline;
}

#mainContent {
width:100%;
margin: 20px 0 20px 0;
}
#content {
border:2px solid #FFFFFF;
border-radius:5px;
float:left;
width:60%;
height:200px;
background-color:#FFFFFF;
margin:0 0 20px 0;
}

#sidebar {
border:2px solid #FFFFFF;
border-radius:5px;
float:right;
width:35%;
background-color:#FFFFFF;
margin: 0;
}
#sidebar ul li {
list-style-type:none;
}
#footer{
clear:both;
padding:30px;
background-color:#CCCCCC;
}

<!doctype html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
	<div id="header">
		<h1>Testside</h1>
	</div> <!--- END header----->
		<div id="menu">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">About me</a></li>
				<li><a href="#">Contact me</a></li>
			</ul>
		</div> <!--- END Menu----->
	<div id="mainContent">
		<div id="content">
			Main content
		</div> <!----end content---->
			<div id="sidebar">
				<ul>
					<li>test</li>
					<li>test</li>
					<li>test</li>
					<li>test</li>
				</ul>
			</div><!----END SIDEBAR----->
	</div> <!---- END MAIN CONTENT----->
	<div id="footer">
		FOOTER HERE
	</div> <!---end footer---->
</div> <!--- END container----->
</body>
</html>

Videoannonse

Videoannonse
Annonse
j--

j--

Skrevet
Skrevet

Dette er default-verdier som slår inn. Søk etter "CSS reset" og implementer det, og design ut fra det.

 

quick fix:

*{
    margin: 0;
    padding: 0;
}
jeIIy

jeIIy

Skrevet
  • Forfatter
Skrevet

 

Dette er default-verdier som slår inn. Søk etter "CSS reset" og implementer det, og design ut fra det.

 

quick fix:

*{
    margin: 0;
    padding: 0;
}

Leste akkurat på reset.css før du svarte, men takk for svaret uansett!

 

så greia er at tags som <p> <h#> lager margin?

j--

j--

Skrevet
Skrevet

Mer eller mindre alle elementer har flere css properties satt, og disse vil variere noe mellom forskjellige nettlesere. Det CSS reset gjør er å gi alle elementer et likt utgangspunkt, og fjeren alle marginer/paddings/annet tull, slik at de oppfører seg "helt plain".

jeIIy

jeIIy

Skrevet
  • Forfatter
Skrevet (endret)

Mer eller mindre alle elementer har flere css properties satt, og disse vil variere noe mellom forskjellige nettlesere. Det CSS reset gjør er å gi alle elementer et likt utgangspunkt, og fjeren alle marginer/paddings/annet tull, slik at de oppfører seg "helt plain".

Takk!

 

En liten ting til. Fikk siden til å "midtstille" seg ved hjelp av dette i #containeren som inneholder hele siden

width:900px;
margin-left:auto;margin-right:auto;

men jeg har bare lyst til at teksten får denne effekten. hvordan går jeg fram? skal jeg bruke 2 divs å bruke margin og padding auto på den siste av 2 divs?

 

EDIT: testet dette og det fungerte, men jeg må lage en ekstra div for hver div får å få til dette. er det en enklere måte?

 

vet ikke om jeg forklarer så godt her.

Endret av jeIIy
j--

j--

Skrevet
Skrevet

Tekst midtstilles med "text-align: center". Det blir feil å bruke margins for å midstille tekstelementer.

 

Et par tips på veien:

* Doctypen din viser at det er et HTML5-dokument. Det finnes mange nye elementer som på en mer semantisk måte forklarer hvilket innhold som er i elementet. F.eks <article>, <section>, <header> og <footer>. Se mer her (New Semantic Elements in HTML5)

* CSS shorthand er ganske kult. F.eks kan margin-left:auto;margin-right:auto; skrives som margin: 0 auto;

* Få på plass charset i <head>. Står om det i den linken litt lenger opp.

 

Stå på :-)

Yawa

Yawa

Skrevet
Skrevet

kan legge til at http://html5doctor.com/ også har masse bra ressurser med tanke på når og hvor disse elementene kan/bør/skal benyttes ;)

 

Viktig å ha i bakhodet at hjelpemiddler som skjermlesere, fjerning av overflødige elementer o.l analyserer og tolker disse elementene. Da er det en fordel at disse er riktig brukt ;)

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...