HTML Ads

Status
Niet open voor verdere reacties.
R

Rood412

Gebruiker
Lid geworden
2 mrt 2010
Berichten
399
Hallo!

Ik ben met alleen html een website aan het maken, maar wanneer ik de Google Ads script in mijn body plak, komt de bannner links boven in beeld te staan. Hoe zorg ik ervoor dat hij ergens anders in mijn beeld verschijn; recht in het midden.

Is hier en html code voor wat ik er bij kan plakken?
 
weet niet precies omdat ik het script niet zie maar dan moet je ergens align center inplementeren...google dat maar ff
 
#banner { position:absolute;
width:800px;
margin-left:600px;

<div id="banner">code</div>


ja past de margin left aan bij width geef je de breedte op van je document
 
Hoi Rood412,
... dan moet je ergens align center inplementeren
Klik om te vergroten...
Dat gaat niet werken:
  • <div align="center">...</div> zou achterhaalde/afgekeurde html zijn: align = opmaak, en doe je met css.
  • <div style="text-align: center">...</div> werkt ook niet, want dat geeft alleen horizontale centrering.
=====
#banner {
position:absolute;
width:800px;
margin-left:600px;
}
Klik om te vergroten...
Dit zie ik ook niet werken, want dan is de linkerkant vastgepind op 600px vanaf de linkerrand van het beeldscherm, en komt de banner niet altijd rechts: waar ie wel komt, is dan afhankelijk van de resolutie.
=========
Ik dacht aan de volgende css:
Code: 
#banner {
   position: absolute;
   width: 150px; 
   height: 300px;
   float: right;
   right: 15px; /* iets vanaf de rechterzijkant */
   margin-top: 50px; /* niet helemaal bovenaan */
   background: yellow;
   }
... en dan in de html meteen onder de <body> zetten:
HTML: 
<body>
<div id="banner">
   Inhoud van de Ads
</div>

<div id="DesktopIcons">
... enz.
=====
Maar nu staat de banner nog niet verticaal in het midden van het scherm. Dat kan ook, maar gaat iets ingewikkelder. Om geen html-tabel te hoeven gebruiken, wordt bv. met css een "fake-tabel" gebouwd:
Code: 
#bannercontainer { /* dit is de kolom van de banner */
   position: absolute;
   width: 150px; 
   height: 100%;
   float: right;
   right: 15px;
   display: table;
   }
#bannertop, #bannerbottom { /* dit zijn "rekbare lege cellen" onder en boven de banner */
   display: table-row;
   }
#banner {
   height: 300px;
   display: table-row;
   background: yellow;
   }
... en nu in de html direct onder de <body>:
HTML: 
<body>
<div id="bannercontainer">
   <div id="bannertop"><!-- ! --></div>
   <div id="banner">
      Inhoud van de Ads
   </div>
   <div id="bannerbottom"><!-- ! --></div>
</div>

<div id="DesktopIcons">
... enz.
  • Test: www.bliksekaters.nl/tests/test-banner.htm
  • Als je nu het browser-venster in hoogte verandert, blijft de banner verticaal in het midden staan.
  • Dit werkt in elk geval in Firefox, Chrome, Opera en Safari. :)
  • De Internet Explorers laten de iconen links boven niet zien, maar dat zou misschien kunnen komen door de ingewikkelde jQuery-scripts die niet via mijn server werken.
  • De banner komt volgens de NetRenderer goed door in IE8 en IE9.
  • De banner komt in IE7 niet verticaal in het midden; met een Conditional Comment voor IE7 en eerdere versies de top-afstand van de banner op 50px gezet. ~Zie broncode.
Met vriendelijke groet,
CSShunter
 
Hartelijk dank voor de hulp!

Code: 
	        <!-- Begin Motigo Webstats counter code -->
		<a id="mws4860165" href="http://webstats.motigo.com/">
		<img width="80" height="15" border="0" alt="Free counter and web stats" src="http://m1.webstats.motigo.com/n80x15.gif?id=AEopBQbynB2q7V/WUUPRvpylDCbA" /></a>
					
		<script src="http://m1.webstats.motigo.com/c.js?id=4860165&amp;lang=NL&amp;i=3" type="text/javascript"></script>
		<!-- End Motigo Webstats counter code -->

De bovenste code is de html code van mijn webstate bijhouder (hoeveel bezoekers mijn website bezoeken).

Kan ik nu precies de zelfde code gebruiken op deze webstate bijhouder in het midden te krijgen?

P.S Ik heb jouw opgegeven code even getest en met succes in Internet Explorer en Mozilla FireFox, maar helaas niet Google Chrome

http://yourcontrol.t15.org/
 
Laatst bewerkt:
Holadieola! - svp NIET de webstats-teller van Motigo gebruiken!
Deze teller is verbonden met allerlei ongevraagde popup-scripts voor de bezoekers van je site en houdt er nogal ongeoorloofde praktijken op na.
=====
... maar helaas niet Google Chrome
Klik om te vergroten...
Da's merkwaardig, in Chrome krijg ik keurig deze:

ycontrol-chrome.png

PS:
Er zitten nog wat html-errors in.
 
Laatst bewerkt:
Bedankt voor de tip, ik zal de teller zo spoedig mogelijk verwijderen.

=====

Da's ook vreemd dat hij bij jouw wel werkt, ik krijg namelijk dit te zien bij mij:

​

=====

Nog even terug op die css + html code die je me voorschotelde, kan ik die op de zelfde manier gebruiken als ik eventueel weer zo'n soort van Motigo (maar dan van een anders service) afbeeldinkje krijg? Die ik op mijn site als html code moet plaatsen?
 
Laatst bewerkt:
Over Chrome: misschien als je de html-errors er uit haalt, dat ie het dan bij jou ook doet? Er staat o.a. op regel 83 een <div id="DesktopIcons"> teveel in.
Bij mij heeft Chrome dus geen afwijkingen: niet op 1024*768px en ook niet op 1280*1024px.
Doet mijn testpagina van reactie nr. #5 het trouwens bij jou in Chrome wel goed, of ook niet?
=====
Een nieuwe teller-code moet je maar even uitproberen met een {position:absolute;}. Als het niet lukt, weet je de weg naar helpmij.nl! :)

Met vriendelijke groet,
CSShunter
 
De test versie doet het inderdaad wel goed bij Google Chrome, dan zal het wellicht aan de foutjes liggen.

=====

De teller gaat wel lukken hoor!

Bedankt voor de hulp en tijd!
 
Nog een paar opmerkingen:

In het stylesheet yourcontrol.t15.org/css/AeroWindow.css mist onderaan de laatste }.

Verder komt een banner-hoogte van 600px ( google_ad_height = 600; ) er niet compleet op bij lagere resoluties. Daarvoor moet de body{overflow:hidden;} omgezet worden in body{overflow:auto;}. Dan kan men zo nodig scrollen om de hele banner te zien.

Met vriendelijke groet,
CSShunter
 
Hoi CSSHunter,

Bij mij is het ondertussen ook opgelost in Google Chrome:

​
 
ik raad je aan om je pagina gewoon in een container te zetten daar geef je de breedte op van je document met de css die ik schreef werk het dan perfect
In de container geef je op.


div#container
{
margin-left: auto;
margin-right: auto;
width:800px;

In de div container zet je de banner div.
#banner { position:absolute;
width:800px;
margin-left:600px;

Zo heb je zelf een content container gemaakt die je links of rechts of midden kan zetten op je scherm.
Zo weet je ook zeker dat iederen (vanaf 800px breedt scherm) je pagina goed kan bekijken zonder te hoeven scrollen.

Als je een background wilt gebruiken zet je deze voor de container in css.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan