Centrera med wrapper/container?

19 oktober, 2008

Vill att innehållet på min sida ska centreras efter upplösning, har tänkt att ha en container/wrapper runt mitt innehåll med vet inte hur jag ska lägga in den eller finns det andra sätt?

HTML FILEN

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
 var i,img,nbArr,args=MM_nbGroup.arguments;
 if (event == "init" && args.length > 2) {
   if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
     img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
     if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
     nbArr[nbArr.length] = img;
     for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
       if (!img.MM_up) img.MM_up = img.src;
       img.src = img.MM_dn = args[i+1];
       nbArr[nbArr.length] = img;
   } }
 } else if (event == "over") {
   document.MM_nbOver = nbArr = new Array();
   for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
     if (!img.MM_up) img.MM_up = img.src;
     img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
     nbArr[nbArr.length] = img;
   }
 } else if (event == "out" ) {
   for (i=0; i < document.MM_nbOver.length; i++) {
     img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
 } else if (event == "down") {
   nbArr = document[grpName];
   if (nbArr)
     for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
   document[grpName] = nbArr = new Array();
   for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
     if (!img.MM_up) img.MM_up = img.src;
     img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
     nbArr[nbArr.length] = img;
 } }
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/kurs-down.png','images/kurs-over.png','images/video-down.png','images/videos-over.png','images/flash-sida-over.png','images/flash-sida-over copy.png','images/om-mig-over.png','images/om-mig-overkorrekt.png','images/kontakt-down.png','images/kontakt-over.png')">

<div class="bakgrund"><img src="images/bakgrund.gif" width="727" height="768" /></div>


<div class="videoportfolio-logo"><img src="images/videoportfolio-logo.png" width="138" height="34" /></div>


<div class="logptyp"><img src="images/logotyp-vanster.png" width="212" height="82" /></div>

<div class="stjarnaover"><img src="images/stjarnaover.png" width="547" height="174" /></div>

<div class="rander"><img src="images/rander.png" width="650" height="107" /></div>

<div class="stjarnunder"><img src="images/stjarna-under.png" width="599" height="60" /></div>

<div class="rander-under"><img src="images/rander-under.png" width="650" height="58" /></div>



<div class="contentarrea"><img src="images/content-area.png" width="590" height="456" /></div>


<div class="vanster-meny-del"><img src="images/vanster-meny.png" width="79" height="35" /></div>



<div class="menyn"> <a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','kursnormal','images/kurs-down.png',1)" onmouseover="MM_nbGroup('over','kursnormal','images/kurs-over.png','images/kurs-down.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/kurs-normal.png" alt="" name="kursnormal" width="81" height="40" border="0" id="kursnormal" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','videosnormal','images/video-down.png',1)" onmouseover="MM_nbGroup('over','videosnormal','images/videos-over.png','images/video-down.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/videos-normal.png" alt="" name="videosnormal" width="81" height="40" border="0" id="videosnormal" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','flashsidanormal','images/flash-sida-over copy.png',1)" onmouseover="MM_nbGroup('over','flashsidanormal','images/flash-sida-over.png','images/flash-sida-over copy.png',1)" onmouseout="MM_nbGroup('out')"><img src="images/flash-sida-normal.png" alt="" name="flashsidanormal" width="101" height="40" border="0" id="flashsidanormal" onload="" /></a><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','ommignormal','images/om-mig-over.png',1)" onMouseOver="MM_nbGroup('over','ommignormal','images/om-mig-overkorrekt.png','images/om-mig-over.png',1)" onMouseOut="MM_nbGroup('out')"><img name="ommignormal" src="images/om-mig-normal.png" border="0" alt="" onLoad="" /></a><a href="#" target="_top" onClick="MM_nbGroup('down','group1','kontaktnormal','images/kontakt-down.png',1)" onMouseOver="MM_nbGroup('over','kontaktnormal','images/kontakt-over.png','images/kontakt-down.png',1)" onMouseOut="MM_nbGroup('out')"><img name="kontaktnormal" src="images/kontakt-normal.png" border="0" alt="" onLoad="" /></a></div>


<div class="hoger-meny"><img src="images/hoger-meny.png" width="77" height="35" /></div>

<p>&nbsp;</p>
</body>
</html>

CSS FILEN

@charset "iso-8859-1";
.bakgrund {
position: absolute;
left: 138px;
top: 14px;

}
.logptyp {
position: absolute;
left: 231px;
top: 97px;


}
.stjarntop {
position: absolute;
left: 201px;
top: 35px;
height: 196px;


}
.rander {
position: absolute;
left: 173px;
top: 46px;


}
.videoportfolio-logo {
position: absolute;
left: 590px;
top: 106px;


}
.stjarnunder {
position: absolute;
left: 207px;
top: 684px;


}
.rander-under {
position: absolute;
left: 175px;
top: 695px;
width: 628px;


}
.contentarrea {
position: absolute;
left: 207px;
top: 243px;


}
.vanster-meny-del {
position: absolute;
left: 211px;
top: 208px;


}
.menyn {
position: absolute;
left: 288px;
top: 209px;
list-style-type: none;
display: inline;

}
.stjarnaover {
position: absolute;
left: 235px;
top: 37px;
width: 69px;
height: 82px;


}
body {
background-color: #161616;
margin: 0px;
padding: 0px;


}
.menyn {
position: absolute;
margin-right: auto;
margin-left: auto;

}
.hoger-meny {
position: absolute;
left: 713px;
top: 208px;
}

19 oktober, 2008

ja det låter ju bra

lägg en wrapper runt om allt med idt: "wrapper"

i css skrive/(ändrar du:

body {text-align:center;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left;}

edit: fast å andra sidan, använder du position: absolute ändrar det helt klart saker och ting...

[inlägget ändrat 2008-10-19 19:59:17 av Jonas_Bo]

19 oktober, 2008

okej ska inte objekten ha absolut positionering och wrappern relative? eller hur ska det vara?

19 oktober, 2008

min åsikt är att alla element skall vara relativa (man behöver inte definiera position) förutom när man absolut måste använda absolute.

19 oktober, 2008

okej så om jag ändrar alla till relativa och placerar dem och sen lägger in wrappen så ska det troligtvis fixa sig? hmm var ska jag lägga koden (wrapper) i html filen förresten?

Logga in

Centrera med wrapper/container?

Rekommendera Poster

heffnek

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

heffnek

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

heffnek

Länk till kommentar

Dela på andra webbplatser

Arkiverat

Vem är online 0 Medlemmar, 0 anonym, 34 gäster (Visa hela listan)

Populära medlemmar

Publika meddelanden

Senaste som Tittar

Senaste inlägg

Forum

Aktivitet

pcforalla.se