AP Div positioneren probleem

Status
Niet open voor verdere reacties.
P

pietprobleem

Gebruiker
Lid geworden
6 jan 2003
Berichten
279
In een in aanbouw zijnde website (met css) wil ik een extra laagje plaatsen (Ap Div).
Wanneer ik deze in Dreamweaver CS3 een absolute positie meegeef staat het goed in het werkscherm maar zodra ik met F12 de browser ga bekijken is de positie verlopen van deze laag en staat het op een andere plek op de pagina.
Ik kan dat zien als ik enkele letters in deze laag intype en ga bekijken met F12.
Hoe kan dat.
Ik heb voor zover ik het weet alles al geprobeerd maar het wil niet lukken.

Wie kan mij helpen ?
 
Hoi pietprobleem,
Ja, die AP div's zijn lastige dingen, en Dreamweaver is er geloof ik nogal gul mee. :rolleyes:
Zelf maak ik pas gebruik van absoluut gepositioneerde elementen alléén als het echt niet anders kan. Want voordat je het weet staan die dingen op een andere plaats dan je bedoelt (al dan niet bij een verschillende vensterbreedte, resolutie, enz.). En meestal kan het net zo goed, of beter, met een relatief geplaatste <div>.
Nu de vraag:
Hoe kan dat.
Klik om te vergroten...
Daar is geen algemeen antwoord op te geven, want waarom het in jouw geval zo uitpakt is afhankelijk van de rest van de html en css.

Oftewel:
Heb je een link naar een pagina waar je aanbouw-werk te zien is?
Uit de gebruikte html en css valt dan waarschijnlijk wel een suggestie te halen.

Met vriendelijke groet,
CSShunter
 
Hallo csshunter,

Je kunt het vinden op:

www.pieteralbada.nl/jpw

Het is mijn bedoeling om in het rechter grijze vlak een kleine afbeelding te plaatsen die op elke pagina anders is.
Ik kan dat dus niet met doen zoals het nu in de css staat aangegeven.
Ik heb geprobeerd met een fotoprogramma een foto in het grijze vlak te zetten en daarna in DW te gebruiken.
Dat kan natuurlijk wel maar dan is het gelijk op alle pagina's zo en ik wil juist verschillende afbeeldingen op verschillende pagina's.
Kan het ook anders dan met css ?
Kan je het uitleggen in begrijpelijke taal, ik ben ook weer geen expert.

Mvg,
 
Voor het geval de webruimte niet bereikbaar is (begeurd wel eens) hieronder de code, ook voor de css (onderaan):

Pagina:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welkom bij JPW Handelsonderneming</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:75px;
height:75px;
z-index:1;
left: 817px;
top: 119px;
}
.stijl1 {
font-size: 14px
}
.stijl2 {
color: #FFFFFF;
font-style: italic;
font-weight: bold;
}
.stijl3 {font-size: 12px}
#apDiv2 {
position:absolute;
width:222px;
height:381px;
z-index:1;
left: 754px;
top: 134px;
overflow: visible;
}
#apDiv3 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 769px;
top: 128px;
}
#apDiv4 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 772px;
top: 132px;
}
#apDiv5 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 771px;
top: 134px;
}
#apDiv6 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 766px;
top: 125px;
}
#apDiv7 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 763px;
top: 124px;
float: right;
}
#apDiv8 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 768px;
top: 127px;
padding-top: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#apDiv9 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 760px;
top: 120px;
}
#apDiv10 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 764px;
top: 123px;
}
#body_wrapper #apDiv10 {
position: absolute;
height: 400px;
width: 200px;
left: 768px;
top: 120px;
}
-->
</style>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="body_wrapper">
<!-- Start of Body Container -->
<div id="body_container">
<div id="body_container_b">
<div id="body_container_c">
<!-- Start of Page Header -->
<div id="page_header">
<!-- Website Title -->
<h1><span class="hidethis"> JPW </span></h1>
</div>
<!-- End of Page Header -->
<!-- Start of Page Content -->
<div id="page_content">
<p align="left" class="stijl1"><span class="stijl2">WELKOM</span><br />
<br />
<span class="stijl3">...bij JPW Handelsonderneming.</span></p>
<p class="stijl3">JPW Handelsonderneming is een jong bedrijf gevestigd in het friese Witmarsum.<br />
<br />
Eigenaar Jeen Piersma is als lasspecialist bekend met de meest uiteenlopende lasprocessen.</p>
<p class="stijl3">Middels deze website en nevenstaand menu kunt u een informatie opvragen van de nieuwste technologie van (las)machines en aanverwante artikelen.</p>
<p class="stijl3">U wordt doorgelinkt naar de website van onze leveranciers.</p>
<p class="stijl3">Op deze manier beschikt u altijd over de nieuwste informatie van machines welke door JPW leverbaar zijn.</p>
<p class="stijl3"><br />
</p>
<div class="tb_center"> <img src="images/welder.jpg" width="425" height="230" alt="" /></div>
<p class="stijl3">Tevens kunt u bekijken welke diensten en reparaties door ons uit te voeren zijn.</p>
<p class="stijl3">Heeft u naderhand vragen ?</p>
<p class="stijl3">Schroom dan niet <a href="contact.html">contact</a> met ons op te nemen.</p>
<p class="stijl3">JPW help u graag verder !</p>
<p class="stijl3">&nbsp;</p>
</div>
<!-- End of Page Content -->
</div>
</div>
</div>
<!-- End of Body Container -->
<!-- Start of Navigation Menu -->
<div id="navmenu">
<div id="navmenu_b">
<div id="navmenu_c">
<h3><span class="hidethis">Site Menu:</span></h3>
<ul>
<li class="list_first">
<div align="right"><a href="index.html">Home</a></div>
</li>
<li><a href="machines.html">Machines</a></li>
<li><a href="gebruikt.html">Gebruikt</a></li>
<li><a href="reparatie.html">reparatie</a></li>
<li><a href="http://www.airliquidewelding.nl/">SAF OERLIKON</a></li>
<li><a href="http://www.arcweld.nl/index.php/products2.html">arcweld</a></li>
<li><a href="http://www.parweldltd.com/">PARWELD</a></li>
<li><a href="links.html">Links</a></li>
<li>
<div align="center"><a href="contact.html">CONTACT</a></div>
</li>
<li><a href="route.html">ROUTE</a></li>
<li><a href="bestellen.html">BESTELLEN</a></li>
<li><a href="aktie.html">Aktie</a></li>
<li></li>
</ul>
<p>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','160','height','40','src','images/flashvortex','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','images/flashvortex' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="160" height="40">
<param name="movie" value="images/flashvortex.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="images/flashvortex.swf" width="160" height="40" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</noscript>
</p>
</div>
</div>
</div>
<!-- End of Navigation Menu -->
<div class="clearthis">&nbsp;</div>
<!-- Start of Page Footer -->
<div id="page_footer"> &copy; JPW 2010</div>
<!-- End of Page Footer -->
</div>
</body>
</html>

CSS:
/* +++++++++++++++++++++++++++++ Shifting Ground +++++++++++++++++++++++++++++ */


/* ++++++++++++++++++++ Common Styles ++++++++++++++++++++ */


* {
margin: 0px;
padding: 0px;
}

body {
color: #fff;
background-color: #000000;
font-family: 'verdana', 'helvetica', sans-serif;
font-size: 100%;
text-align: center;
}

table {
font-size: 1em;
}

td {
color: #fff;
background-color: inherit;
font-family: 'verdana', 'helvetica', sans-serif;
font-size: 1em;
}

a {
color: #fff;
background-color: inherit;
text-decoration: underline;
}

a:hover {
color: #fff;
background-color: inherit;
text-decoration: none;
}

img {
border: none;
}

ul, ul li {
list-style: none outside;
}

ol, ol li {
list-style: decimal inside;
}

p {
padding: 0.6em 0em 0.6em;
}

fieldset {
border: none;
}

input, textarea, select {
font-family: 'verdana', 'helvetica', sans-serif;
font-size: 13px;
}

.hidethis {
display: none;
}

.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size: 1px;
overflow : hidden;
visibility: hidden;
}


/* ++++++++++++++++++++ Image Thumbnails ++++++++++++++++++++ */

.tb_center {
text-align: center;
}

.tb_center img {
margin: 1.3em auto;
border: 1px #fff solid;
}



/* ++++++++++++++++++++ Body Wrappers ++++++++++++++++++++ */

#body_wrapper {
margin: 35px 10px;
width: 982px;
font-size: 0.71em;
background-image: url(images/rightcol_img.gif);
background-repeat: no-repeat;
background-position: 100% 68px;
}

/* ++++++++++++++++++++ Body Container ++++++++++++++++++++ */

#body_container {
float: right;
position: relative;
left: -243px;
width: 496px;
background: url('images/main_bg_bot.gif') no-repeat 0% 100%;
}

#body_container_b {
padding: 15px 0px;
width: 496px;
background: url('images/main_bg_top.gif') no-repeat 0% 0%;
}

#body_container_c {
color: inherit;
background-color: #484848;
border-left: #fff 6px solid;
border-right: #fff 6px solid;
font-family: Verdana, Arial, Helvetica, sans-serif;
}



/* ++++++++++++++++++++ Page Header ++++++++++++++++++++ */

#page_header {
padding-bottom: 2px;
color: inherit;
background-color: #484848;
}

#page_header h1 {
position: relative;
top: -4px;
width: 100%;
height: 80px;
background: url('images/counterstrike_logo.gif') no-repeat 50% 50%;
background-image: url(images/counterstrike_logo2.gif);
}



/* ++++++++++++++++++++ Page Content ++++++++++++++++++++ */

#page_content {
padding: 15px 17px 10px;
font-weight: normal;
text-align: left;
}

.link_readmore {
padding: 35px 0px 10px;
text-align: right;
}

.link_readmore a {
margin-left: auto;
display: block;
width: 94px;
height: 24px;
background: url('images/button_readmore.gif') no-repeat 0% 0%;
}



/* ++++++++++++++++++++ Navigation Menu ++++++++++++++++++++ */

#navmenu {
float: left;
margin-top: 68px;
position: relative;
left: 77px;
width: 166px;
background: url('images/navmenu_bg_bot.gif') no-repeat 0% 100%;
font-size: 1.15em;
font-weight: bold;
}

#navmenu_b {
padding: 15px 0px;
width: 166px;
background: url('images/navmenu_bg_top.gif') no-repeat 0% 0%;
}

#navmenu_c {
color: inherit;
background-color: #484848;
border-left: #fff 6px solid;
}

#navmenu a {
text-decoration: none;
text-transform: uppercase;
}

#navmenu li {
border-top: #fff 1px solid;
}

#navmenu li a {
display: block;
padding: 5px 0px;
width: 160px;
}

#navmenu li a:hover {
color: #484848;
background-color: #989160
}

#navmenu li.list_first {
border-top: none;
}



/* ++++++++++++++++++++ Page Footer ++++++++++++++++++++ */

#page_footer {
padding: 20px 0px;
font-size: 0.9em;
font-weight: bold;
}
#apDiv9 {
position: absolute;
left: 100px;
top: 100px;
height: 100px;
width: 100px;
}
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan