[Løst] Merkelig problem, undersider "flytter" designet

Niram · 18. februar 2011

Hei,

Jeg er relativt fersk på html/css (drevet i et par måneder) og har støtt på et problem jeg sliter med å finne ut av.

Tingen er at jeg har laget en helt enkel webside med noen undersider. Noen av undersidene fungerer fint, men på et par av de "flytter" hele designet seg litt mot høyre når jeg velger de. Jeg har satt på en background-color på "wrapper-div'en", og der ser jeg at selve div'en flytter seg noen pixler mot høyre.

Jeg kan ikke PHP enda, så jeg skriver all HTML-kode i hvert enkelt dokument.

agm · 18. februar 2011

Kan du vise HTML og CSS, så er det litt enklere å finne problemet

Niram · 18. februar 2011

HTML til en av sidene det gjelder:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;"/>
<link rel="stylesheet" type="text/css" href="master.css">
<title>Toten Toner | Kontakt oss</title>

</head>

<body>
<div id="wrapper">
<div id="header">
	<a href="index.html"><img src="grafikk/mainlogo.png" alt="hovedlogo" class="header" /></a>
</div> <!-- header end -->

<div id="menu">
	<ul>
		<a href="index.html"><li>Hjem</li></a>
		<a href="about.html"><li>Om oss</li></a>
		<a href="news.html"><li>Nyheter</li></a>
		<a href="members.html"><li>Medlemmer</li></a>
		<a href="links.html"><li>Linker</li></a>
		<a href="contact.html"><li>Kontakt oss</li></a>
	</ul>
</div> <!-- menu end-->

<div id="sidebar">
	<h2>Våre sponsorer</h2>
	<a href="http://www.totenbanken.no"><img src="grafikk/ts-logo.png" alt="ts-logo" width="195px" class="sponsor" /></a>
	<a href="http://www.fotografengjovik.no"><img src="grafikk/fotografen.png" alt="fotografen-logo" width="195px" class="sponsor" /></a>
	<img src="grafikk/selmermusikk.png" alt="selmer musikk-logo" width="195px" class="sponsor" />
</div> <!-- sidebar end -->

<div id="main">
	<h2>Kontakt oss</h2>
			<p>X, dirigent<br />
			Tlf.: <br />
			E-post: <a href="mailto:XX</a></p>

			<p>X, kapellmester<br />
			Tlf.: <br />
			E-post: <a href="mailto:XX</a></p>

</div> <!-- main end -->

<div class="clearfooter"></div>		<!-- Footer-triks hentet fra 			http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/ -->
</div> <!-- wrapper -->
<div id="footer">
	<br />
	Copyright @ MR X - All Rights Reserved
</div> <!-- footer end-->

</body>
</html>

CSS for hele nettstedet


html, body { 					/*Nullstiller margin og padding på rotelementene for å få full kontroll */
margin: 0;
padding 0;
height: 100%;
}

body {
font: 12px/18px "Arial", "Helvetica", "Verdana", sans-serif;
color: #666666;
background-color: #000;
}

#wrapper {
width: 960px;
margin: auto;
position: relative;
margin-bottom: -330px;
min-height: 100%;
background: #ddd;
}

#header {
height: 125px;
}

#header img {
display: block;
margin-right: auto;
margin-left: auto;
}

#menu {						/* Her styres menyen man bruker til navigering */
height: 39px;
text-align: center;
}

#menu ul {
margin: 0;
padding: 10px 10px;
font-size: 15px;
}

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

#menu li a {
color: #666666;
padding-right: 15px;
}

#menu li a:hover {
color: #4869B8;
}							/* Menystyring slutt */

#sidebar {
width: 195px;
position: absolute;
right: 30px;
top: 220px;
background-color: #FFF;
}

#sidebar h2 {
text-align: center;
}

#main {
width: 660px;
margin-right: 300px;
}

#footer {
clear: both;
font-size: smaller;
text-align: center;
height: 330px;
position: relative;
}

h1, h2, p {
margin: 5px 20px;
padding: 10px;
}

.clearfooter {
height: 330px;
clear: both;
}

.right {
float: right;
padding: 10px 10px;
border-style: none;
}

.left {
float: left;
padding: 10px 10px;
border-style: none;
}


.header {
border-style: none;
}

.sponsor {
padding-bottom: 15px;
border-style: none;
margin: auto;
display: block;
}

a  {
outline: none;
}

Endret 18. februar 2011 av NiRaM

Wedvich · 18. februar 2011

Muligens litt banalt, men kan det tenkes at undersidene har forskjellig høyde og at det dermed er den vertikale scrollbaren som skjules/vises så siden flytter på seg? Ellers kan det være greit å også få se en annen underside enn den du har brukt som eksempel nå, så vi får se koden på en side der designet flytter på seg i forhold til denne.

Niram · 23. februar 2011

**solved**

Endret 23. februar 2011 av NiRaM

Niram · 23. februar 2011

Never mind. Problem solved. Takk til Wedvich, du fant feilen!

Logg inn

[Løst] Merkelig problem, undersider "flytter" designet

Anbefalte innlegg

Niram

Lenke til kommentar

Videoannonse

agm

Lenke til kommentar

Niram

Lenke til kommentar

Wedvich

Lenke til kommentar

Niram

Lenke til kommentar

Niram

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer