div naast het forum

pieter91 · Bericht door **pieter91** » 25 aug 2009, 09:35

Hallo,

Ik ben bezig met om het forum aan te passen naar mijn wensen, nu wilde ik links van het forum een div balk met daarin de advertenties voor de site. Dit is me wel gelukt, in Opera werkt het goed. Alleen in Internet Explorer verdwijnt de balk achter het forum ipv ernaast.

Om dit te maken had ik het forum versmald zoals op de wiki pagina staat en heb ik onderstaande code gebruikt:

Code: Selecteer alles

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<div float="left" style="margin-left:50px;margin-right:50px; position: absolute;">
	<center>
	<img src="images/-.gif" border="0" name="-" /></a> <br /><br />
    	<img src="images/-.gif" border="0" name="-" margin-left="25px" /></a>
    </center>
    
    <font face="Arial, Helvetica, sans-serif" color="#000000" size="1pt">(advertenties)</font>
</div>
<div id="wrap" float="left" style="position: relative;">

Waarschijnlijk reageert IE verkeerd op de position tag. Weet iemand wat ik wel moet invullen zodat het er wel goed uit komt te zien?
Hier bij een afbeelding van hoe het is in IE en in Opera:

Ger · Bericht door **Ger** » 25 aug 2009, 09:50

Sorry dat ik het zeg, maar er klopt héél weinig van je code... En dan is het ook niet zo gek dat de browsers het niet snappen.

Wil je een kolom links van het forum, dan is het gemakkelijkst om onderaan ./styles/prosilver/tmeplate/overall_header.html dit toe te voegen:

Code: Selecteer alles

<div id="linkerkolom">
     inhoud linkerkolom
</div>

En vervolgens in ./styles/prosilver/theme/common.css dit toe te voegen:

Code: Selecteer alles

#linkerkolom {
   float: left; 
   width: 100px;
   position: relative;
   left: -100px;
}

Waarbij je met de breedte natuurlijk naar wens kunt spelen.

pieter91 · Bericht door **pieter91** » 25 aug 2009, 10:26

Hey,

Ik heb deels gedaan wat je zei, maar ipv onderaan overall_header moest ik hem onderaan de overall_footer template plaatsen want anders kwam de div midden tussen in het forum te staan en niet er langs.

Hij zit nu ook in IE goed links, alleen staat die dan onderaan het forum er links onder en sluit hij niet boven aan. Hoe moet ik dit dan doen?

Ger · Bericht door **Ger** » 25 aug 2009, 10:32

Dan moeten we het ff anders proberen... Haal uit de CSS dit eens weg:

Code: Selecteer alles

   position: relative;
   left: -100px;

en vervang eens door:

Code: Selecteer alles

   margin: -100px 10px 0 0;

Dat is de marge die je inbouwd, achtereenvolgens boven (-100px, dus negatieve marge, dus omhoog trekken), rechts (10px tussen de kolom en het forum), onder en links. Ofwel: vanaf boven met de klok mee. Zelf even mee spelen, in principe moet je daar wel uitkomen verwacht ik.

Heb je ook ff een linkje, dat ik naar de broncode kan kijken?

pieter91 · Bericht door **pieter91** » 25 aug 2009, 10:50

Het staat nu eindelijk goed, maar nog 2 kleine probleempjes:

- In IE zit er een groot gaat tussen de linker div en het forum zelf, wat ik met margin zo niet weggewerkt krijg. Ik heb een Margin-left er in gezet van 50px en Opera pakt deze wel. IE dus niet.
- In Opera trekt de titelbalk (blauwe kader met forumtitel/logo) mee met de linkerdiv. Ik weet wel hoe ik het zou moeten oplossen als het andersom was, maar de een korter maken dan de ander weer niet.

Alvast bedankt voor de oplossingen.

Ger · Bericht door **Ger** » 25 aug 2009, 10:53

Ger schreef:Heb je ook ff een linkje, dat ik naar de broncode kan kijken?

pieter91 · Bericht door **pieter91** » 25 aug 2009, 11:07

Nee helaas,

ik doe het dmv USBWebserver dus ik heb niets online staan.
Dit is eigenlijk de enigste code die ik heb aangepast:

Overall_header template:

Code: Selecteer alles

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
       <div id="linkerkolom">
     <center>
		<img src="images/-.gif" border="0" name="-" /></a> <br /><br />
    	<img src="images/-.gif" border="0" name="-"  /></a>
    </center>
    
    <font face="Arial, Helvetica, sans-serif" color="#000000" size="1pt">(advertenties)</font>
</div>  
<div id="wrap" >

En dit in de common stylesheet:

Code: Selecteer alles

#linkerkolom {
   float: left; 
   width: 170px;
   margin: -100px 10 0 50;
   margin-left: 50px;
   
}
#wrap {
	padding: 0 20px;
	min-width: 650px;
	width: 65%;
    margin: 0 auto;	
	left: -100;
}

pieter91 · Bericht door **pieter91** » 25 aug 2009, 11:10

Dit bedoel ik met het probleem in Opera, misschien duidelijker:
Afbeelding

Ger · Bericht door **Ger** » 25 aug 2009, 11:19

Paar dingen in je HTML die al niet kloppen.
Allereerst: als je alles in een div wil centreren, moet je geen center gebruiken. Da's depricated in HTML, en volgens mij ook niet meer valid in XHTML. Dat kun je beter in de CSS regelen. Dito met de font-tags die je toepast. En wat doet die </a> daar, zonder een start-tag?

In je CSS klopt ook het een en ander niet, er moet altijd een eenheid (bijv. px) bij staan, tenzij je 0 hebt (want het maakt niet uit of het 0px of 0em of 0 wat dan ook is).

Maak dit er eens van:

Overall_header template:

Code: Selecteer alles

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
       <div id="linkerkolom">
	<a href="link_naar_wat_dan_ook"><img src="images/-.gif" name="-" /></a> 
    	<a href="link_naar_wat_dan_ook"><img src="images/-.gif" name="-"  /></a>
   
                (advertenties)
</div>  
<div id="wrap" >

En dit in de common stylesheet:

Code: Selecteer alles

#linkerkolom {
   float: left; 
   width: 170px;
   margin: -100px 10px 0 50px;
   font-family: Arial, Helvetica, sans-serif;
   color: #000000;
   font-size: 1pt;
   text-align: center;
}
#linkerkolom img {
   display: block;
   margin-bottom: 20px;
   border: 0;
}

En herstel de wrap even naar het origneel. De left die daar staat slaat sowieso nergens op, want je geeft niet aan wát er left is.

pieter91 · Bericht door **pieter91** » 25 aug 2009, 11:24

Oke, bedankt. Zo schoner is idd wat duidelijker. Maar jammer genoeg doet het niets van het resultaat af. Ik blijf met hetzelfde probleem zitten.

Ger · Bericht door **Ger** » 25 aug 2009, 11:31

Had nog een klein foutje in de vorige CSS staan (puntkomma vergeten), inmiddels bijgewerkt.

En verplaats het HTML gedeelte even naar net boven dit:

Code: Selecteer alles

<div class="navbar">

pieter91 · Bericht door **pieter91** » 25 aug 2009, 11:47

Net boven de navbar zetten is niet echt bevorderend, in beide webbrowsers krijg je dit:
Afbeelding

pieter91 · Bericht door **pieter91** » 25 aug 2009, 15:54

Het is mezelf inmiddels gelukt, heb er een outer div omheen gebouwd en toen die 2 div's gefloat en vaste breedtewaarde gegeven. Is goed genoeg zo, alleen jammer dat het forum per se een vaste breedtewaarde moet hebben dan.

Toch bedankt voor de hulp.

div naast het forum

div naast het forum

Re: div naast het forum

Re: div naast het forum

Re: div naast het forum

Re: div naast het forum

Re: div naast het forum

Re: div naast het forum

Re: div naast het forum

Re: div naast het forum

Re: div naast het forum

Re: div naast het forum

Re: div naast het forum

Re: div naast het forum