Pagina 1 van 1
Helpende hand? Opgelost !!!
Geplaatst: 23 jan 2010, 15:25
door Astralon
Is er iemand die, desnoods tegen betaling, wil helpen om de
deze web pagina werkende te krijgen?
Ik heb de pagina getest met de W3C Markup Validation Service en alles lijkt goed te zijn.
Het probleem is dat het blokje onderaan niet wordt weergegeven zoals verwacht.
Het zou er ongeveer uit moeten zien zoals dit:
...maar dat is duidelijk niet het geval.
Trouwens als er andere dingen zijn die beter/anders kunnen dan hoor ik het graag!
Alle testen zijn gebeurd met Internet Explorer 8.
Alvorens met andere browsers te gaan testen wil ik eerst weten wat ik fout doe.
Alvast bedankt,
Astralon
Re: Helpende hand?
Geplaatst: 23 jan 2010, 18:17
door Astralon
Ondertussen getest met andere browsers (Chrome, Firefox en Safari) en ze tonen allemaal hetzelfde.
"Gelukkig" is het probleem dus consistent.
Re: Helpende hand?
Geplaatst: 23 jan 2010, 19:32
door Astralon
Ik heb een tweede foto toegevoegd om het probleem te verduidelijken.
1) In het topic
Test Image + Text 2 wordt de tekst niet rechts van de foto getoond en het frame rond het topic is te klein.
2) In het topic
Test Image + Text wordt de tekst van het icoon helemaal niet getoond en het frame rond het topic is te klein.
Tevens twee screendumps gemaakt van wat ik verwacht te zien:
Re: Helpende hand?
Geplaatst: 23 jan 2010, 20:07
door cptKangaroo
Quickfix, dus niet volledig getest:
Extra CSS:
Code: Selecteer alles
.TopicContent img {
float: left;
margin-right: 10px;
}
.Pusher {
height: 0px;
width: 100%;
clear: both;
}
HTML veranderingen:
Code: Selecteer alles
<div style="clear: both" class="TopicContent">
<img src="http://content.astralon.be/images/overzicht_2009.jpg" alt="hello world 2"/> Our mission is to deliver high quality, reliable and affordable solutions that help our customers meet and exceed their business objectives. Since inception, our strategy has been to operate using a few full-time employees focused on doing the most important things really well, and on reacting quickly to changing customer needs. The feedback we've received over the years indicates customers appreciate our approach.
<div class="Pusher"></div>
</div>
</div>
<div class="Topic">
<div style="float: left;" class="TopicTitle">
Test Image + Text
</div>
<div style="clear: both" class="TopicContent">
<img src="http://content.cortex.nu/images/home_who_is_cortex.gif" alt="hello world"/> Our mission is to deliver high quality, reliable and affordable solutions that help our customers meet and exceed their business objectives. Since inception, our strategy has been to operate using a few full-time employees focused on doing the most important things really well, and on reacting quickly to changing customer needs. The feedback we've received over the years indicates customers appreciate our approach.
<div class="Pusher"></div>
</div>
Re: Helpende hand? Opgelost !!!
Geplaatst: 23 jan 2010, 21:11
door Astralon
@cptKangaroo ,
Hartelijk bedankt
.
Het werkt, en zelfs onder Internet Explorer 6.0
Ik durf het bijna niet te vragen maar 'k ga het toch doen...
Is er éénvoudige uitleg waarom je die "pusher" nodig hebt?
Ik zou verwachten dat het <div> element even groot is al de grootste inhoud binnen het element maar dat lijkt niet zo te zijn.
Re: Helpende hand? Opgelost !!!
Geplaatst: 23 jan 2010, 21:16
door meon
Dju, ik ben te laat om de oude situatie gezien te hebben
Typisch probleem bij dit soort dingen is dat uw div zich als inline-element gaat gedragen ipv als een box, maar gezien ik de oude situatie niet ken ...
Re: Helpende hand? Opgelost !!!
Geplaatst: 23 jan 2010, 21:31
door Astralon
meon schreef:Dju, ik ben te laat om de oude situatie gezien te hebben
Foute code posten? Dat is geen probleem
Ik kreeg dit soort gedrag:
De bedoeling was om een topic aan te maken met een titel en content.
Binnen de content wou ik dan een plaatje en een stukje tekst tonen en de volledige content zou dan omkaderd moeten zijn.
Zoals je ziet is valt het plaatje buiten het kader en is de tekst zelfs niet zichtbaar.
Ik dacht het plaatje en de tekst elk in een eigen <div> element te stoppen en dat het dan zou werken maar voor een voor mij onverklaarbare reden werkte dit niet zoals verwacht. Maar ja, ik ben dan ook niet echt een kenner
Code:
Code: Selecteer alles
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>
Prolix
</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="prolix.css" type="text/css" rel="stylesheet" />
</head>
<body style="background-color: #386389; margin:0 auto; font-family: Verdana,Sans-Serif,Helvetica; font-size: 10pt;">
<div style="margin:0 auto; width:940px;">
<div id="Header" class="Header">
PROLIX.BE
</div>
<div class="Container">
<div class="Topic">
<div style="background-color:blue; color:white; width:400px; float:left;">
This is my Title
</div>
<div style="float:right;">
New - Edit - Delete
</div>
<div style="background-color:silver; clear:both;">
<div style="float:left; width:80px;">
<img src="home_mission.gif" alt="test" width="48" height="48"/>
</div>
<div>
Our mission is to deliver high quality, reliable and affordable solutions that
help our customers meet and exceed their business objectives. </br>
Since inception, our strategy has been to operate using a few full-time employees
focused on doing the most important things really well, and on reacting quickly
to changing customer needs. The feedback we've received over the years indicates
customers appreciate our approach.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Re: Helpende hand? Opgelost !!!
Geplaatst: 23 jan 2010, 22:02
door meon
http://www.smashingmagazine.com/2009/10 ... -property/
En dan het gedeelte "fixing the collapsed float property"
Ik wist da'k het ooit gebookmarked had
Re: Helpende hand? Opgelost !!!
Geplaatst: 23 jan 2010, 23:27
door cptKangaroo
Astralon schreef:@cptKangaroo ,
Hartelijk bedankt
.
Het werkt, en zelfs onder Internet Explorer 6.0
Ik durf het bijna niet te vragen maar 'k ga het toch doen...
Is er éénvoudige uitleg waarom je die "pusher" nodig hebt?
Ik zou verwachten dat het <div> element even groot is al de grootste inhoud binnen het element maar dat lijkt niet zo te zijn.
No problemo
De link van meon legt uit waarom de pusher nodig is -- ik heb die truk ook ooit ergens gelezen om div kolommen gelijk te trekken. Ik was niet zeker of de width en height ook nodig waren, maar om inherited values te vermijden heb ik ze toch maar bijgevoegd