Midtstille i Dreamweaver CS4

big_glasses · 24. januar 2012

Jeg skulle gjerne hatt noe hjelp i å midtstille siden jeg og en kompis holder på å lage i Dreamweaver som et skoleprosjekt.

Det er template'en for siden vi prøver å midtstille. VI har prøvd å legge en div tag rundt det vi allerede har laget, og sentrere den, men det funker ikke.

Håper på noe hjelp fra de gode sjeler i forumet

weebl · 24. januar 2012

benytt deg av kodeboksen på forumet her og legg ut koden din så skal jeg ta en titt

big_glasses · 24. januar 2012

Dette er kodene for apDiv'ene. Har prøvd å sette en #wrapper rundt men ingenting skjer.

#apDiv1 {
position:absolute;
width:960px;
height:135px;
z-index:1;
left: 15px;
top: 10px;
}
#apDiv2 {
position:absolute;
width:960px;
height:50px;
z-index:2;
left: 15px;
top: 160px;

}
#apDiv3 {
position:absolute;
width:960px;
height:460px;
z-index:3;
left: 15px;
top: 225px;

}
-->
</style>
<link href="../body.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv4 {
position:absolute;
width:586px;
height:125px;
z-index:1;
left: 370px;
top: 10px;

}
#apDiv5 {
position:absolute;
width:940px;
height:440px;
z-index:4;
left: 25px;
top: 235px;

}
#apDiv6 {
position:absolute;
width:225px;
height:40px;
z-index:5;
left: 12px;
top: 5px;

}
#apDiv7 {
position:absolute;
width:225px;
height:40px;
z-index:5;
left: 264px;
top: 165px;

}
#apDiv8 {
position:absolute;
width:225px;
height:40px;
z-index:5;
left: 502px;
top: 165px;

}
#apDiv9 {
position:absolute;
width:225px;
height:40px;
z-index:5;
left: 724px;
top: 5px;

}

weebl · 24. januar 2012

nå er jeg litt rusten på dette men mener at dette har noe å gjøre med at du bruker absolutt posisjonering hvor du allerede posisjonerer ved å bruke left: og top:

big_glasses · 25. januar 2012

har prøvd å skifte fra absolute til relativ, men da var ikke ap Div'ene oppå hverandre

weebl · 25. januar 2012

kanskje en litt "skitten" måte å gjøre det på men prøv å sett left: 50% på "hovedboksen" og så tar du å setter margin-right: minus halvparten av bredden på hovedboksen da mener jeg at den skal flytte seg til midten.

kan ikke prøve dette selv da jeg ikke har hele kildekoden din

Howard_ · 25. januar 2012

Prøv dette på #wrapper eller det som er den ytterste diven

#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}

Du må sette width når du skal midstille en div.

H

big_glasses · 26. januar 2012

Ingen av de to funket for meg

Å legge en #wrapper rundt hele og funket ikke eller det med 50%, med mindre jeg tok 50% på feil sted.

Jeg la med alt av kode fra template'en.

<!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=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:960px;
height:135px;
z-index:1;
left: 15px;
top: 10px;
}
#apDiv2 {
position:absolute;
width:960px;
height:50px;
z-index:2;
left: 15px;
top: 160px;

}
#apDiv3 {
position:absolute;
width:960px;
height:460px;
z-index:3;
left: 15px;
top: 225px;

}
-->
</style>
<link href="../body.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv4 {
position:absolute;
width:586px;
height:125px;
z-index:1;
left: 370px;
top: 10px;

}
#apDiv5 {
position:absolute;
width:940px;
height:440px;
z-index:4;
left: 25px;
top: 235px;

}
#apDiv6 {
position:absolute;
width:225px;
height:40px;
z-index:5;
left: 12px;
top: 5px;

}
#apDiv7 {
position:absolute;
width:225px;
height:40px;
z-index:5;
left: 264px;
top: 165px;

}
#apDiv8 {
position:absolute;
width:225px;
height:40px;
z-index:5;
left: 502px;
top: 165px;

}
#apDiv9 {
position:absolute;
width:225px;
height:40px;
z-index:5;
left: 724px;
top: 5px;

}

-->
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
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_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_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>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
}
-->
</style>
</head>

<body leftmargin="auto " onload="MM_preloadImages('../Bilder/Knapp om oss trykket inn med tekst.jpg','../Bilder/Knapp hjem trykket inn med tekst.jpg')">

<div id="apDiv1"><a href="../Sider/Index.html"><img src="../Bilder/Header---bare-logo.gif" width="960" height="135" alt="Island 2012 logo" /></a>
 <div id="apDiv4"><!-- TemplateBeginEditable name="Bilde i header" -->Bilde i header<!-- TemplateEndEditable --></div>
</div>
<div id="apDiv2"><img src="../Bilder/Knappmeny.gif" width="960" height="50" />
 <div id="apDiv9"><a href="../Sider/Om Oss.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('om_oss_knapp','','../Bilder/Knapp om oss trykket inn med tekst.jpg',1)"><img src="../Bilder/Knapp om oss med tekst.jpg" alt="Gå til om oss" name="om_oss_knapp" width="224" height="40" border="0" id="om_oss_knapp" /></a></div>


<div id="apDiv6"><a href="../Sider/Index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('hjem_knapp','','../Bilder/Knapp hjem trykket inn med tekst.jpg',1)"><img src="../Bilder/Knapp hjem.jpg" alt="Gå hjem" name="hjem_knapp" width="224" height="40" border="0" id="hjem_knapp" /></a></div>
</div>
<!-- TemplateBeginEditable name="Innhold" -->
<div id="apDiv3"><img src="../Bilder/Innhold-hvit.gif" width="960" height="460" /></div>
<!-- TemplateEndEditable -->
<p> </p>
<div id="apDiv5"><!-- TemplateBeginEditable name="Innhold (Dra den hvite etter behov)" -->Innhold (Dra den hvite etter behov)<!-- TemplateEndEditable -->	</div>
<div id="apDiv7">
 <ul id="MenuBar1" class="MenuBarHorizontal">
   <li><a href="../Sider/Island.html" target="_self" class="MenuBarItemSubmenu">Island</a>
     <ul>
       <li><a href="../Sider/Reykjavik.html">Reykjavik</a></li>
       <li><a href="../Sider/Geysir.html">Geysirer</a></li>
       <li><a href="../Sider/varmekilder.html">Varme kilder</a></li>
     </ul>
   </li>
</ul>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<div id="apDiv8">
 <ul id="MenuBar2" class="MenuBarHorizontal">
   <li><a href="../Sider/Golden route.html" target="_self" class="MenuBarItemSubmenu">Golden Route</a>
     <ul>
       <li><a href="../Sider/Þingvellir.html" target="_self">Þingvellir</a></li>
       <li><a href="../Sider/Gullfoss.html" target="_self">Gullfoss</a></li>
       <li><a href="../Sider/Haukadlur.html" target="_self">Haukadalur</a></li>
     </ul>
   </li>
</ul>
</div>
<script type="text/javascript">
<!--
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>

</html>

Howard_ · 26. januar 2012

Hei, jeg fikk litt dårlig tid til å se på dette, men det var position:absolute; som tullet det for deg.

Prøv koden under

Dessuten kan det være like greit med det samme å droppe dreamweaver sin visual editor.

Bruk kodefeltet, da blir alt rett med en gang.

<!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=iso-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
#wrapper {
margin-left:auto;
margin-right:auto;
width:960px;
}
#apDiv1 {
       /*	 position:absolute;*/
       width:960px;
       height:135px;
       z-index:1;
       left: 15px;
       top: 10px;
}
#apDiv2 {
       /*	 position:absolute;*/
       width:960px;
       height:50px;
       z-index:2;
       left: 15px;
       top: 160px;

}
#apDiv3 {
       /*	 position:absolute;*/
       width:960px;
       height:460px;
       z-index:3;
       left: 15px;
       top: 225px;

}
-->
</style>
<link href="../body.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv4 {
       /*	 position:absolute;*/
       width:586px;
       height:125px;
       z-index:1;
       left: 370px;
       top: 10px;

}
#apDiv5 {
       /*	 position:absolute;*/
       width:940px;
       height:440px;
       z-index:4;
       left: 25px;
       top: 235px;

}
#apDiv6 {
       /*	 position:absolute;*/
       width:225px;
       height:40px;
       z-index:5;
       left: 12px;
       top: 5px;

}
#apDiv7 {
       /*	 position:absolute;*/
       width:225px;
       height:40px;
       z-index:5;
       left: 264px;
       top: 165px;

}
#apDiv8 {
       /*	 position:absolute;*/
       width:225px;
       height:40px;
       z-index:5;
       left: 502px;
       top: 165px;

}
#apDiv9 {
       /*	 position:absolute;*/
       width:225px;
       height:40px;
       z-index:5;
       left: 724px;
       top: 5px;

}

-->
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
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_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_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>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
}
-->
</style>
</head>
<div id="wrapper">
<body leftmargin="auto " onload="MM_preloadImages('../Bilder/Knapp om oss trykket inn med tekst.jpg','../Bilder/Knapp hjem trykket inn med tekst.jpg')">

<div id="apDiv1"><a href="../Sider/Index.html"><img src="../Bilder/Header---bare-logo.gif" width="960" height="135" alt="Island 2012 logo" /></a>
 <div id="apDiv4"><!-- TemplateBeginEditable name="Bilde i header" -->Bilde i header<!-- TemplateEndEditable --></div>
</div>
<div id="apDiv2"><img src="../Bilder/Knappmeny.gif" width="960" height="50" />
 <div id="apDiv9"><a href="../Sider/Om Oss.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('om_oss_knapp','','../Bilder/Knapp om oss trykket inn med tekst.jpg',1)"><img src="../Bilder/Knapp om oss med tekst.jpg" alt="Gå til om oss" name="om_oss_knapp" width="224" height="40" border="0" id="om_oss_knapp" /></a></div>


<div id="apDiv6"><a href="../Sider/Index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('hjem_knapp','','../Bilder/Knapp hjem trykket inn med tekst.jpg',1)"><img src="../Bilder/Knapp hjem.jpg" alt="Gå hjem" name="hjem_knapp" width="224" height="40" border="0" id="hjem_knapp" /></a></div>
</div>
<!-- TemplateBeginEditable name="Innhold" -->
<div id="apDiv3"><img src="../Bilder/Innhold-hvit.gif" width="960" height="460" /></div>
<!-- TemplateEndEditable -->
<p> </p>
<div id="apDiv5"><!-- TemplateBeginEditable name="Innhold (Dra den hvite etter behov)" -->Innhold (Dra den hvite etter behov)<!-- TemplateEndEditable -->       </div>
<div id="apDiv7">
 <ul id="MenuBar1" class="MenuBarHorizontal">
   <li><a href="../Sider/Island.html" target="_self" class="MenuBarItemSubmenu">Island</a>
     <ul>
       <li><a href="../Sider/Reykjavik.html">Reykjavik</a></li>
       <li><a href="../Sider/Geysir.html">Geysirer</a></li>
       <li><a href="../Sider/varmekilder.html">Varme kilder</a></li>
     </ul>
   </li>
</ul>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<div id="apDiv8">
 <ul id="MenuBar2" class="MenuBarHorizontal">
   <li><a href="../Sider/Golden route.html" target="_self" class="MenuBarItemSubmenu">Golden Route</a>
     <ul>
       <li><a href="../Sider/Þingvellir.html" target="_self">Þingvellir</a></li>
       <li><a href="../Sider/Gullfoss.html" target="_self">Gullfoss</a></li>
       <li><a href="../Sider/Haukadlur.html" target="_self">Haukadalur</a></li>
     </ul>
   </li>
</ul>
</div>
<script type="text/javascript">
<!--
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</div>

</html>

Endret 26. januar 2012 av Howard_

big_glasses · 26. januar 2012

Tusen takk Den ble midtstilt nå... men, og et stort men...

Ingen ting ligger "over" hverandre i z-aksen, men i y-aksen...

(eks. teksten ligger ikke over det hvite tekstområde, etc.)

Howard_ · 27. januar 2012

Vanskelig å skjønne hva du mener nå jeg ikke har bildene ,scriptene o.l

Har du det liggende på ett domene nå?

Jeg vil anbefalle deg å begynne på nytt, ta alt ifra kode editoren.

Da kan du ta en div om gangen, da vet du at ting blir rett.

Selv om ting ser bra ut i dreamweaver, betyr ikke det at det blir bra i nettleseren.

Bruker dreamweaver selv, men kunne like godt brukt notisblokk eller notepad++

big_glasses · 31. januar 2012

Her er hvordan det var uten absolute:

Her er hvordan det ser ut med absolute:

Den skal se slik ut på siste, bare midtstilt...

Edit: der skulle bildene være fikset

Endret 31. januar 2012 av Deadhound

Howard_ · 31. januar 2012

Du har satt inn samme bilde på de 2 øverste.

Har du vurdert wordpress?

Det vil gjøre jobben mye enklere for deg, i tillegg så er standard template (twenty eleven) nesten helt likt ditt.

Trenger du hjelp, så bare si i fra, du finner kontakt info på siden min i signatur.

big_glasses · 31. januar 2012

Blir litt vanskelig å bruke wordpress da oppgaven er å lage en nettside fra bunnen av, med dreamweaver som verktøy. Posten over med bildene burde være fikset nå.

weebl · 31. januar 2012

vær så snill, gjør deg selv en tjeneste å skriv alt fra scratch, å bruke den "tegneren" i dreamweaver blir det bare tull av.

alt du trenger er en wrapper med tre bokser inni seg, en for headeren, en for menyen og en for teksten.

fins masse tutorials på hvordan man lager en enkel nettside der ute så skal ikke være noe stort problem

Howard_ · 31. januar 2012

Lagde en kjapp side til deg, ta en titt i kildekoden så skjønner du kanskje hvordan den er lagt opp.

Har kun brukt html og css, du vil skjønne at det er den eneste måten etterhvert.

link

big_glasses · 31. januar 2012

Tusen takk for svar er som dere sikkert allerede forstått ganske noob på dette, men prøver å holde meg til kode så mye som mulig

Skal få prøvd å bygge det fra scratch med basis i koden du sendte Howard

Midtstille i Dreamweaver CS4

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer