Forum Mjukvara Programmering och digitalt skapande Tråd

En av mina div boxar beter sig konstigt

1
Skriv svar
Permalänk
Medlem
●

En av mina div boxar beter sig konstigt

Efter att jag fint slipat min hemsida såg jag ett problem...min

#content1

har flyttat på sig men jag hittar var felet ligger :S

Det skulle vara hur snällt som helst om någon hade kunnat hitta felet, för jag har letat i flera timmar.

Så här ser problemet ut:

http://img132.imageshack.us/img132/426/buggk.png

http://img259.imageshack.us/img259/6586/bugg1t.png

HTML kod:

<?xml version="1.0"?>
<! DOCTYPE html PUPLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1/-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title> Start </title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link rel="stylesheet" type="text/css" href="styles.css" />
		<!--[if gte IE 6]>
		<link rel="stylesheet" type="text/css" href="nycss.css" />
		<![endif]-->
	</head>
<body>

<div id="main">
	<div id="banner">
	<div id='cssmenu'>
	<ul>
	<li class='active '><a href='#'><span>Hem</span></a></li>
	   <li><a href='#'><span>Information</span></a></li>
	   <li><a href='#'><span>Om oss</span></a></li>
	   <li><a href='#'><span>Anmäla</span></a></li>
	   <li><a href='#'><span>Partners</span></a></li>
	</ul>
	</div>
	</div>
	
	<div id="content1">
		<div id="background">
		</div>
		
		<div id="fb">
			<a href="#"><img src="images/fb.png" /></a>
		</div>
		<div id="twitter">
			<a href="#"><img src="images/twitter.png" /> </a>
		</div>
		
		<div id="textoperation"><h1> Operation Pixel 19/02-13 </br>Folkets Hus i Karlshamn </h1></div>
		<div id="textinled">
			<p> Operation Pixel drivs av fem elever från JB Gymnasiet </br> i Karlshamn som ett projekt arbete. Vi som står för lanet </br> är Adam Erlandsson, Isak Risberg Jönsson, Jonatan Tjärnberg, </br>Victor Johansson och Lucas Mattsson.</p>
			<p> Lanet kostar 200 kr och vara mellan 2013.02.19-2013-02.21. </br> Du kan även förhandsboka och betala 150 kr istället.</br> Klicka på <a href="#"> Anmäla </a> för att boka din plats. </p>
		</div>
		<div id="video">
			<iframe width="410" height="280" src="http://www.youtube.com/embed/qP40Liau6z4" frameborder="0" allowfullscreen></iframe>
		</div>
	
		<div id="mitten"></div>
		<div id="nyheter">
			<div id="nyhettext"><h2> Nyheter </h2></div>
			<div id="underline"></div>
			<div id="nyhet">
			<h4>Hemsidan är på gång nu</h4><p>Adam Erlandsson håller just nu på att utveckla Operation Pixelshemsida. Hemsidan kommer vara klart inom 1-2 veckor.</br> Mer information kommer inom kort.</p> 
			<h4> Datum och lokal är bestämd </h4><p> Vi har nu hittat en lokal (folkets hus) och datumet är </br> satt mellan  19/02-13 21/02-13. Lorem ipsum dolor sit amet, consectetur </br>adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </br></br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate. </p>
			<h4> Projekt arbete </h4> <p>ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem ap
			eriam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </br></br> Nemo enim ipsam voluptatem quia volup
			tas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
			</br></br></br><h3><a href="#" class="nyhetlänk"> Läs alla nyheter </a></h3>
		</div>
		</div>
		
	

	</div>
	<div id="content2">
	<div id="textcontent">
		<div id="test"><a href="#"> Hem </a> </br></div>
		<div id="test"><a href="#"> Information </a> </br></div>
		<div id="test"><a href="#"> Om Oss </a> </br></div>
		<div id="test"><a href="#"> Anmäla </a> </br></div>
		<div id="test"><a href="#"> Partners </a></div>
	</div>
	<div id="kodad">
		<p> Code by Adam Erlandsson. Design by Adam Erlandsson & Victor Johansson </p>
	</div>
	<div id="copy">
		<p> © 2012 Operation Pixel </p>
	</div>
	
</div>
</div>
</body>
</html>

CSS:

body{
background-image: url(images/bakgrund.png);
background-repeat: no-repeat;
background-position: center;
height: 100%;
width: 100%;
text-align: center;
}

#fb{
height: 44px;
width: 45px;
margin-top: 510px;
margin-left: 835px;
position: absolute;
}

#nyheter{
position: absolute;
width: 460px;
height: 210px;
margin-top: 30px;
margin-left: 500px;
}

#nyheter a{
color: white;
text-decoration: underline;
}

.nyhetlänk{
margin-top: 30px;
position: absolute;
}

#nyheter a:hover{
color: #c4c4c4;
}

h4{
font-size: 20px;
color: white;

}

#nyheter p{
margin-top: -18px;
font-size: x-small;
}

h3{
font-weight: 800;
font-size: 20px;
}

h2{
color: white;
font-family: "Bebas Neue";
font-weight: 400;
font-size: 50px;
position: absolute;
}

#twitter{
height: 44px;
width: 45px;
margin-top: 510px;
margin-left: 895px;
color: black;
position: absolute;
}

#banner{
height: 180px;
width: 1000px;
background-image: url(banner.png);
background-repeat: no-repeat;
border: thin ridge #3a3a3a;
text-align: left;
margin: auto;
}

#content1{
width: 1000px;
height: 610px;
color: white;
font-family: Makisupa;
z-index: 1;
border: thin ridge #3a3a3a;
background-color: black;
text-align: left;
margin: auto;
}

#content2{
width: 1000px;
height: 100px;
color: #a8a8a8;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
border: thin ridge #3a3a3a;
background-color: black;
text-align: left;
margin-top: 5px;
}

#textcontent{
margin-left: 10px;
margin-top: 10px;
font-size: x-small;

}

#copy{
margin-left: 850px;
margin-top: 70px;
position: absolute;
font-size: x-small;
}

#kodad{
margin-left: 320px;
position: absolute;
margin-top: 75px;
font-size: xx-small;
}

a{
text-decoration: none;
color: #a8a8a8;
}

a:hover{
color: white;
}

#textoperation{
margin-top: 15px;
margin-left: 20px;
}

#nyhet{
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #bfbfbf;
margin-left: 10px;
margin-top: 40px;
}

#huvudtext{
margin-top: -10px;
}

#rubrik h3{
font-size: 15px;
font-weight: 400;
}

#textinled{
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #bfbfbf;
font-size: x-small;
margin-left: 20px;
margin-top: 130px;
}

#textinled a{
color: white;
}

#textinled a:hover{
color: #bfbfbf;
}

#video{
position: absolute;
margin-left: 20px;
margin-top: 290px;
}

h2{
color: white;
font-family: "Bebas Neue";
font-weight: 400;
font-size: 40px;
position: absolute;
}

#nyhettext{
position: absolute;
margin-top: -23px;
margin-left: 10px;
}

#huvudtext{

}

#underline{
background-color: #3a3a3a;
position: absolute;
margin-top: 20px;
margin-left: 10px;
/* position: absolute; */
width: 450px;
height: 3px;
font-size: 1px;
}

#mitten{
position: absolute;
height: 560px;
width: 3;
background-color: #3a3a3a;
margin-top: 10px;
margin-left: 470px;
text-align: center;
}

h1{
color: white;
font-family: "Bebas Neue";
font-weight: 400;
font-size: 50px;
position: absolute;
}

#cssmenu{
margin-top: 170px;
}

#cssmenu ul
{
margin: 0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(images/nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}

#cssmenu li
{
display:block;
float:left;
margin:0;
padding:0;
}

#cssmenu li a
{
display:block;
float:left;
color: white;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}

#cssmenu li a:hover
{
color: #c4c4c4;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
}

#cssmenu li.active a
{
display:inline;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Kollade igenom koderna lite, och vill bara påpeka att allt är kaos, du har gjort det svårare än vad det behöver vara, många regler krockar med varandra.
Du använder även Internet Explorer, djävulen själv när det kommer till webbdesign, håll dig till någon annan webbläsare, sen anpassar du till Internet explorer.

Du har massor med DIVar i HTML koden som är tomma och oanvända, elementen är inte ens definierade via CSS.
Jag fixade ditt största problem genom att faktiskt definiera din wrapper, dvs #main

Genom att sätta en brädd och margin: 0 auto på #main så centreras HELA din sida och du slipper strula.

#main {
    width: 1000px;
    margin: 0 auto;
}

Rekommenderar även att ändra body:

body {
    background-image: url(images/bakgrund.png);
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    padding: 0;
    text-align: center;
}

Du använder margin för att positionera alla element, vilket jag ej rekommenderar, det blir massor med problem senare.
Du borde använda float på DIVar innanför wrappern, och låta boxarna lägga sig bredvid varandra automatiskt.
Läs på mer om float
http://html.net/tutorials/css/lesson13.php

Jag tänkte hjälpa dig lite med CSSen, men det va lite mycket att bita i här tyvärr.

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av FlorrpaN:

Kollade igenom koderna lite, och vill bara påpeka att allt är kaos, du har gjort det svårare än vad det behöver vara, många regler krockar med varandra.
Du använder även Internet Explorer, djävulen själv när det kommer till webbdesign, håll dig till någon annan webbläsare, sen anpassar du till Internet explorer.

Du har massor med DIVar i HTML koden som är tomma och oanvända, elementen är inte ens definierade via CSS.
Jag fixade ditt största problem genom att faktiskt definiera din wrapper, dvs #main

Genom att sätta en brädd och margin: 0 auto på #main så centreras HELA din sida och du slipper strula.

#main {
    width: 1000px;
    margin: 0 auto;
}

Rekommenderar även att ändra body:

body {
    background-image: url(images/bakgrund.png);
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    padding: 0;
    text-align: center;
}

Du använder margin för att positionera alla element, vilket jag ej rekommenderar, det blir massor med problem senare.
Du borde använda float på DIVar innanför wrappern, och låta boxarna lägga sig bredvid varandra automatiskt.
Läs på mer om float
http://html.net/tutorials/css/lesson13.php

Jag tänkte hjälpa dig lite med CSSen, men det va lite mycket att bita i här tyvärr.

Gå till inlägget

Jag har inte fått det att fungera, fast jag gjorde som du sa :/

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Använder du fortfarande Internet Explorer?

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av FlorrpaN:

Använder du fortfarande Internet Explorer?

Gå till inlägget

Jag har fixat det nu.

För någon konstig anledning var det

<div id="background"></div

som krabbade för en konstig anledning, men inte innan.

Jag har det redan fixat i Firefox och Chrome, jag använder Internet Explorer bara för att hemsidan måste funka på Internet Explorer också.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Adam.E:

Jag har fixat det nu.

För någon konstig anledning var det

<div id="background"></div

som krabbade för en konstig anledning, men inte innan.

Jag har det redan fixat i Firefox och Chrome, jag använder Internet Explorer bara för att hemsidan måste funka på Internet Explorer också.

Gå till inlägget

Ja, den tog jag bort när jag testade.

Som jag sa har du massa tomma DIVar i HTML.

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara