[HTML] Problemen met inbouwen 600 * 120 advertentie

[Joppiesaus2]

Hallo,

Momenteel heb ik een website met vaste afmetingen (1000 px breed).

Wat ik wil doen is een ruimte inbouwen voor skyscraper advertenties van 600 hoog en 120 breed. Momenteel heb ik deze div die niet werkt:

code:

<div id="adDiv" style="width: 120px; height: 600px; position: absolute; top: 58px;  
right: 7px; border: 1px solid #FFCC00">  
hello  
<br />  
this  
<br />  
is  
<br />  
ad.  
</div>

de hoogte is prima, het probleem is alleen dat de advertentie helemaal rechts van de "content" van de website moet staan en nu komt hij aan de rand van het scherm te staan, dus afhankelijk van de schermafmeting komt de banner ergens anders. De css hiervan:

code:

body  { 
    font: 12px Arial, Helvetica, Verdana, Sans-Serif; 
    font-size:12px; 
    background: #666666; 
    margin: 0; 
    padding: 0; 
    color: #666666; 
    background-color: #FFFFFF; 
    position: relative; 
} 
#container { 
    width: 1000px; 
    font: 12px Arial, Helvetica, Verdana, Sans-Serif; 
    font-size:12px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 0px solid #000000; 
    text-align: left; 
    height: auto; 
}  
#header { 
    font: 12px Arial, Helvetica, Verdana, Sans-Serif; 
    height: 98px; 
    font-size:12px; 
    padding: 0; 
    background-color: #FFFFFF; 
    background-repeat:no-repeat; 
    background-position:top right; 
    margin: 0; 
}  
#sidebar1 { 
    font: 12px Arial, Helvetica, Verdana, Sans-Serif; 
    font-size:12px; 
    float: left; 
    width: 205px; 
    background: #FFFFFF; 
    margin-top:15px; 
    margin-right:10px; 
    margin-bottom:15px; 
    min-height:200px; 
} 
  
#mainContent { 
    font: 12px Arial, Helvetica, Verdana, Sans-Serif; 
    font-size:12px; 
    float:left; 
    width: 785px; 
    margin-bottom: 15px; 
    margin-top:15px; 
    padding: 0 0px 0 0px; 
    overflow:hidden; 
    text-align:left; 
}  
#footer { 
    font: 12px Arial, Helvetica, Verdana, Sans-Serif; 
    font-size:12px; 
    clear:both; 
    padding: 0 0px 0 0px; 
    background: #666666; 
}  
#footer p { 
    font: 12px Arial, Helvetica, Verdana, Sans-Serif; 
    font-size:12px; 
    margin: 0; 
    padding: 10px 0; 
    background-color: #666666; 
    width: 1000px; 
    height: 55px; 
    background-image:url(/Images/Site/bottom.jpg); 
    background-repeat: no-repeat; 
    background-position:bottom;

Wat ik eigenlijk zoek (denk ik) is iets als dit: "start 500px rechts van het midden van het scherm". Maar hoe schrijf ik dit in html?

Groet.

Edit: ter illustratie, het moet er ongeveer zo uit komen te zien: http://www.kieskeurig.nl/tv_video (skyscraper rechts)

[Keeper]

Logisch, je probeert hem ook absoluut te positioneren, dus komt hij altijd op een vaste plek (namelijk 7px links van de rechterrand van je browserscherm en 58px onder de bovenrand). Probeer het eens met een float.

[Cartman!]

Pak een relatief element in je echte content en zet deze code daarin en positioneer de banner tov. dat element. Er zijn natuurlijk meerdere manieren om dit te doen

[Joppiesaus2]

Cartman! schreef op woensdag 26 augustus 2009 @ 09:06:
Pak een relatief element in je echte content en zet deze code daarin en positioneer de banner tov. dat element. Er zijn natuurlijk meerdere manieren om dit te doen

Klink heel logisch! ik weet alleen niet hoe ik dit in html voor elkaar moetkrijgen (ik heb ermaar weinig ervaring mee). Zouden jullie hiermee kunnen helpen? Zo ja, als jullie nog meer info nodig hebben dan hoor ik het graag...

[Cartman!]

Wat heb je allemaal al geprobeerd?

[Grote Schurk]

Lees dit eens: http://www.barelyfitz.com...training/css/positioning/ , dan begrijp je wat Cartman! bedoeld.
Tip: de huidige situatie van jouw html is stap 3, stap 4 is wat je wil.

[ Voor 23% gewijzigd door Grote Schurk op 26-08-2009 15:20 ]

[Joppiesaus2]

Ik wil graag dat de skyscraper naar voren komt net rechts van "online kopen" en begint onder de blauwe topbar. geimproviseerd visueel voorbeeld:


Waar die rose browser staat moet zegmaar de skyscraper komen.

@ Frits, ik heb wat van die code geprobeerd (lijkt op wat ik al eerder deed), maar dan komt hij of ergens in de body zelf terecht, of hij veranderd van positie afhankelijk van de grootte hoe je je browser hebt...

Hij moet dus altijd op dezelfde plek komen te staan op de aangegeven positie...

[ Voor 21% gewijzigd door Joppiesaus2 op 03-09-2009 16:54 ]

[Little Penguin]

Als je nu gewoon rond je code een extra div plaatst met wat extra stylen moet je een aardig eind komen.

iets in de geest van:

code:

<div style="width:1000px;margin:0 auto;position:relative;">
hier komt jouw div
</div>

De margin:0 auto betekend dat de top en bottom marges op 0 komen te staan en dat de linker en de rechter marges op auto komen - effectief wordt de div dan gecentreerd als deze ook een breedte heeft.

Let op dat dit alleen goed werkt in browsers die CSS(2) correct ondersteunen, voor oudere browsers zou het wel eens fout kunnen gaan...

[Joppiesaus2]

Dit werkt helaas niet. Als ik deze code bijvoorbeeld onder de main content div zet dan komt de tekst hier ook onder. Ik heb het op verschillende plekken geprobeerd, maar nergens beland de tekst waar het zou moeten zoals op bovenstaande plaatje.

(ik ben overigens ook echt een beginner hierin, wat wellicht al duidelijk was )