Gå til innhold

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

Niram

Av Niram
i Programmering og webutvikling

Anbefalte innlegg

Niram

Niram

Skrevet
Skrevet

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.

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Niram

Niram

Skrevet
  • Forfatter
Skrevet (endret)

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 av NiRaM
Lenke til kommentar
Wedvich

Wedvich

Skrevet
Skrevet

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.

  • Liker 1
Lenke til kommentar

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...