DIV breedte probleem in Opera

Status
Niet open voor verdere reacties.
P

pieter53

Gebruiker
Lid geworden
1 jan 2007
Berichten
297
Ik heb de navolgende HTML.

HTML: 
bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla 
<br>
<div class="woord">
     <a name="davit"></a>~<b>davit</b>:
         <div class="loadarea" id="davit-1">
             <img src='afbeeldingen/woordenlijst/davit.jpg'  style='border-width: 0' alt='alt'>
             <br>Een ankerdavit.<br>Foto: Han Visser.<br><a href=''link">link</a>
         </div>
     <br>
     stalen constructie waaraan zaken zoals de bijboot en het anker gehesen 
     kunnen worden. 
     <br>
</div>
<br>
bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla

en daarbij de volgende CSS
HTML: 
.loadarea {
position: relative;
float: right;
padding: 0.7em;
margin: 0em 0em 0em 1em;
max-width: 350px;
line-height: 150%;
}

.woord{
width: 43 em;
float: left;
clear: both;
margin: 0em 0em 2em 0em;
clear: both;
}

In FF, IE6, IE7 en Safari gaat alles naar wens. Onder bla bla bla verschijnt netjes een vak met daarin de tekst met rechts de afbeelding+afbeeldingstekst, onder dit alles gaat bla bla bla verder.
In Opera echter, heb ik een vak dat niet breder is dan de afbeelding (+ padding). De tekst staat (op de eerste regel na) onder de afbeelding (en is dus niet breder dan de afbeelding).
De bla bla bla tekst, die na de div 'woord' volgt, staat niet onder maar rechts van de div.

Ik hoop dat het duidelijk is, ik heb al van alles geprobeerd, maar niets geeft het gewenste resultaat.

Alvast bedankt.

Pieter
 
Laatst bewerkt:
Zo moet het werken:



CSS:

HTML: 
body,td,th {
	font-size: 16px;
	color: #939393;
}
body {
	background-color: #FFFF80;
}
#header {
	height: 95px;
	width: 943px;
	margin: 0 auto;
	position: relative;
}
.woord {
	position: absolute;
	width: 623px;
	left: 0px;
	top:2px;
	line-height:20px;
	height: 69px;
}
.loadarea {
	position: relative;
	width: 123px;
	top:0px;
	line-height:20px;
	float: right;
}
#content-wrap {
	width: 943px;
	margin: 0 auto;
	position: relative;
	padding: 0 0 0px;
}
#content {
	width: 943px;
	position: relative;
	height: 250px;
}



HTML:

HTML: 
<body>

<div id="header">

        <div class="woord">stalen constructie waaraan zaken zoals de bijboot en het anker gehesen kunnen worden. </div>
        
        <div class="loadarea" id="davit-1"><img src='afbeeldingen/woordenlijst/davit.jpg'  style='border-width: 0' alt='alt'>
        <br>Een ankerdavit.</div> 
</div>


<div id="content-wrap">
          <div id="content">
                                
            hier komt het content             

          </div>
</div>
                          
                          
                          

</body>
 
Erg bedankt en ik moet me vreselijk schamen, want ondertussen had ik dus ook een oplossing gevonden en ik heb me tijdens het tijdens "testen" laten verleiden het uitgebreid toe te gaan passen en zodoende dit forum vergeten.
Mijn oprechte excusses!

In plaats van:

HTML: 
bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla 
<br>
<div class="woord">
     <a name="davit"></a>~<b>davit</b>:
         <div class="loadarea" id="davit-1">
             <img src='afbeeldingen/woordenlijst/davit.jpg'  style='border-width: 0' alt='alt'>
             <br>Een ankerdavit.<br>Foto: Han Visser.<br><a href=''link">link</a>
         </div>
     <br>
     stalen constructie waaraan zaken zoals de bijboot en het anker gehesen 
     kunnen worden. 
     <br>
</div>
<br>
bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla

gebruik ik nu:
HTML: 
<div class="woord">
bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla 
<br>
</div>
<div class="woord">
     <a name="davit"></a>~<b>davit</b>:
         <div class="loadarea" id="davit-1">
             <img src='afbeeldingen/woordenlijst/davit.jpg'  style='border-width: 0' alt='alt'>
             <br>Een ankerdavit.<br>Foto: Han Visser.<br><a href=''link">link</a>
         </div>
     <br>
     stalen constructie waaraan zaken zoals de bijboot en het anker gehesen 
     kunnen worden. 
     <br>
</div>
<div class="woord">
<br>
bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla 
</div> enz.

De toepassing daarvan is ondermeer HIER te zien.
 
pieter53 zei:
Erg bedankt en ik moet me vreselijk schamen, want ondertussen had ik dus ook een oplossing gevonden en ik heb me tijdens het tijdens "testen" laten verleiden het uitgebreid toe te gaan passen en zodoende dit forum vergeten.
Mijn oprechte excusses!
Klik om te vergroten...

Maakt niet uit, kleine moeite. Succes met je site.
 
Toch is het niet zoals het hoort
Klik om te vergroten...
, sloeg niet op de code, maar op mijn gedrag. Sorry, dat ik daar niet duidelijk in was.

Ik wilde het eigenlijk niet zeggen, maar je kan echt beter mijn css gebruiken.
Klik om te vergroten...
Kan je me daar een reden voorgeven? Ook mijn code valideert voor zover ik weet correct.
Ik maak sites volgens de webstandaarden.
Klik om te vergroten...
GEWELDIG!
Ik zou willen dat iedereen dat deed!
Ook ik tracht me aan de webstandaard te houden. Op het ogenblik zit ik echter met twee probleempjes:
1. een javascript dat een verboden name-attribuut nodig heeft.
2. een conditional statement in verband met IE6!!!!!!!!!!

meer over webstandaarden
Klik om te vergroten...
Ik hoop dat ik het meeste weet.....:o

Bedankt voor de adviezen!
 
pieter53 zei:
, sloeg niet op de code, maar op mijn gedrag. Sorry, dat ik daar niet duidelijk in was
Klik om te vergroten...

Nu snap ik het:rolleyes:

pieter53 zei:
Kan je me daar een reden voorgeven? Ook mijn code valideert voor zover ik weet correct.
Klik om te vergroten...

Een voordeel van een content div is dat je alles insluit ( web content) en de positie kan bepalen. Nu zweeft alles zo'n beetje rond. Je hebt bijvoorbeeld geen header en ook geen content div waar je alles mee insluit. (althans, wat ik heb gezien in je oude bovenstaande code).
En e maakt veel gebruik van div classes terwijl je deze beter kunt insluiten met een content div (div id) en zo netjes kunt positioneren.

pieter53 zei:
1. een javascript dat een verboden name-attribuut nodig heeft.
2. een conditional statement in verband met IE6!!!!!!!!!!.
Klik om te vergroten...

dan zou je het javascript en de html code moeten plaatsen, nu kan ik er niet veel van zeggen.
 
Laatst bewerkt:
Een voordeel van een content div is dat je alles insluit ( web content) en de positie kan bepalen. Nu zweeft alles zo'n beetje rond. Je hebt bijvoorbeeld geen header en ook geen content div waar je alles mee insluit. (althans, wat ik heb gezien in je oude bovenstaande code).
En e maakt veel gebruik van div classes terwijl je deze beter kunt insluiten met een content div (div id) en zo netjes kunt positioneren.
Klik om te vergroten...
Natuurlijk was het voorbeeld niet compleet, daarvoor zijn mijn pagina's te groot.
Ik gebruik momenteel 2 div's voor de hoofdindeling: links het menu, rechts de tekst.
Aangezien ik in een overgansfase zit, is alles nog niet zoals het hoort, maar eigenlijk zou elk onderwerp (lemma) in een eigen div "woord" moeten komen.
De afbeelding binnen die div, zit in een div "loadarea".
Aangezien "woord" en "loadarea" tientallenmalen per pagina voorkomen, zijn het classes en geen IDs.
(Het geheel moet trouwens ook nog eens omgezet worden naar een database systeem, maar, alhoewel ik al ver gevorderd ben, kom ik daar tijd voor te kort.:confused:)

dan zou je het javascript en de html code moeten plaatsen, nu kan ik er niet veel van zeggen.
Klik om te vergroten...
Dat zou dan eigenlijk in een andere rubriek moeten.....
Het javascript is trouwens niet van mij, maar is het "showonlyone" script op deze pagina.

Het HTML probleem bestaat uit het feit dat ik iets wil onderdrukken voor IE6 gebruikers.
Daarvoor gebruik ik:
HTML: 
<![if gt IE 6]>
    CODE
<![endif]>
en dat schijnt niet toegestaan te zijn.
 
Hoi Pieter,

het script zo aanpassen:

Code: 
script language="javascript" type="text/javascript"> 

*****hier komt het script tussen********

</script>
 
Laatst bewerkt:
Ik snap hem niet helemaal, nog eens over nadenken en als ik er niet uitkom, dan plaats ik wel een bericht in de rubrieken javascript en html en stel je op de hoogte. (Dat kan wel even duren, want ik heb het VRESELIJK druk.)

In ieder geval bedankt voor het meedenken.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan