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

jeIIy · 21. februar 2014

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.

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>

j-- · 21. februar 2014

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 · 21. februar 2014

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-- · 21. februar 2014

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 · 22. februar 2014

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 22. februar 2014 av jeIIy

j-- · 22. februar 2014

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 · 22. februar 2014

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

Logg inn

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

Anbefalte innlegg

jeIIy

Lenke til kommentar

Videoannonse

j--

Lenke til kommentar

jeIIy

Lenke til kommentar

j--

Lenke til kommentar

jeIIy

Lenke til kommentar

j--

Lenke til kommentar

Yawa

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer