Efter at have rodet med min side i et par uger nu uden at kunne se en logisk løsning på mit problem er det på tide at spørge jer
Jeg har set jeres Html-Html5-CSS og CSS3 videoer og føler mig egentigt rimeligt godt klædt på til selv at kunne løse det her men nej.
Min side er kun bygget op i Divs faktisk. Er det forresten en forkert måde at gøre det på..? Vil jo gerne gøre det rigtige her.
Som i kan se på billedet nedenunder har jeg et problem med at få placeret en boks3. Og footer faktisk.
Jeg er kommet frem til at problemet må være rækkefølgen på mine divs/bokse men syntes jeg har prøvet samtlige jeg kan komme i tanke om.
F.eks at indsætte Divs i den her rækkefølge :Boks 1 - Content - Boks 2 - Boks 3 - Boks 4 eller Boks 1 - Boks 3 - Content - Boks 2 - Boks 4 osv.
Uanset hvad jeg prøver kan jeg ikke få boks 3 og 4 til at være der på samme tid. Sætter jeg boks 3 ind nu bliver Content og boks 2 og boks 4 rykket ned under boks 1. Lige som om at boks 1 optager pladsen hele vejen over.
Jeg kan simpelthen ikke regne den her ud selv.
Jeg ved godt en side bliver læst fra over og har kigget på jeres model af hvordan en side er opbygget og det ville heller ikke være et problem hvis jeg bare skulle bruge boks 1 og boks 2 men nu vil jeg nu engang gerne have alle 4. Så hvordan er en side korrekt opbygget i mit tilfælde..?
Da jeg bruger Dreamweaver er det her de muligheder jeg har for at sætte Divs ind:
Og her er hvor de kan blive sat ind:
Nogle der sidder med en logisk løsning til mig da jeg har stirret mig blind på det tror jeg
Alle boksene er en kopi at boks 1 hvor jeg kun har ændret om de skal være til højre eller venstre men her er hele min kode både Html og CSS da Dreamweaver skriver det hele selv.:
Kode: Vælg alt
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>PtcThatPays.com</title>
<style type="text/css">
#outerwrapper {
height: 800px;
width: 964px;
margin-right: auto;
margin-top: 10px;
margin-bottom: 0px;
margin-left: auto;
}
#header {
height: 132px;
width: 960px;
border: 2px solid rgb(255,0,0);
background-image: url(images/logo2.jpg);
}
#adhitz {
height: 60px;
width: 468px;
margin-top: 36px;
margin-right: auto;
margin-bottom: 36px;
margin-left: 475px;
border: thin solid rgb(0,0,0);
}
#navBar {
height: 30px;
width: 960px;
border: 2px solid rgb(255,0,0);
margin-top: 10px;
}
#Boks1 {
float: left;
height: 275px;
width: 100px;
margin-top: 10px;
border: 2px solid rgb(255,0,0);
background-color: rgb(255,255,255);
}
#content {
height: 564px;
width: 732px;
margin-top: 10px;
margin-left: 10px;
border: 2px solid rgb(255,0,0);
float: left;
background-color: rgb(255,255,255);
}
#Boks2 {
float: right;
height: 275px;
width: 100px;
margin-top: 10px;
border: 2px solid rgb(255,0,0);
background-color: rgb(255,255,255);
}
#Boks3 {
float: left;
height: 275px;
width: 100px;
margin-top: 10px;
border: 2px solid rgb(255,0,0);
background-color: rgb(255,255,255);
}
#Boks4 {
float: right;
height: 275px;
width: 100px;
margin-top: 10px;
border: 2px solid rgb(255,0,0);
background-color: rgb(255,255,255);
}
</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_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
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_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onLoad="MM_preloadImages('images/NavBarHover_01.jpg','images/NavBarHover_02.jpg','images/NavBarHover_03.jpg','images/NavBarHover_04.jpg','images/NavBarHover_05.jpg','images/NavBarHover_06.jpg','images/NavBarHover_07.jpg','images/NavBarHover_08.jpg')">
<div id="outerwrapper">
<div id="header">
<div id="adhitz">
<script type="text/javascript" src="http://refban.com/js/banner.php?b=41e1cdaefc"></script><p></p>
</div>
</div>
<div id="navBar"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','images/NavBarHover_01.jpg',1)"><img src="images/NavBar_01.jpg" name="Home" width="120" height="30" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('The Sites','','images/NavBarHover_02.jpg',1)"><img src="images/NavBar_02.jpg" name="The Sites" width="120" height="30" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('The Other Sites','','images/NavBarHover_03.jpg',1)"><img src="images/NavBar_03.jpg" name="The Other Sites" width="120" height="30" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Suggest A Site','','images/NavBarHover_04.jpg',1)"><img src="images/NavBar_04.jpg" name="Suggest A Site" width="120" height="30" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('BEP Calculator','','images/NavBarHover_05.jpg',1)"><img src="images/NavBar_05.jpg" name="BEP Calculator" width="120" height="30" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('How To','','images/NavBarHover_06.jpg',1)"><img src="images/NavBar_06.jpg" name="How To" width="120" height="30" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About Me','','images/NavBarHover_07.jpg',1)"><img src="images/NavBar_07.jpg" name="About Me" width="120" height="30" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','images/NavBarHover_08.jpg',1)"><img src="images/NavBar_08.jpg" name="Contact" width="120" height="30" border="0"></a></div>
<div id="Boks1">Content for id "Boks1" Goes Here</div>
<div id="content">Content for id "content" Goes Here</div>
<div id="Boks2">Content for id "Boks2" Goes Here</div>
<div id="Boks4">Content for id "Boks4" Goes Here</div>
</div>
</body>
</html>
