Just nu i M3-nätverket
Jump to content

Centrera med wrapper/container?


heffnek

Recommended Posts

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;
}

 

Link to comment
Share on other sites

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]

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...