Floating (?) probleem

[Ronnyrr]

Hallo allemaal,

De laatste tijd ben ik druk bezig met website's maken en het lukt me aardig al zeg ik het zelf. Vooral het html en css gedeelte kom ik goed uit.

Echter loop ik nu tegen een probleem aan.
Ik heb mijn website draaien op wordpress en maak gebruik van footer-widgets. Hieraan heb ik een text widget toegevoegd zodat de gebruiker van de website de tekst en afbeelding zelf kan aanpassen.

Lukt allemaal goed, maar ik loop tegen het voglende probleem aan.
Ik heb de afbeelding rechts geprobeerd te floaten en de tekst links. Echter is de afbeelding hoogte afhankelijk van de lengte van de tekst. Als de tekst 2 regels is staat de afbeelding hoger als dat ik 3 regels gebruik (zie afbeelding)



Zo ziet het er dus uit als ik 2 regels tekst gebruik (niet goed), en als ik 3 regels tekst gebruik zit de afbeelding dus lager en staat die wel goed.

Hierbij gebruik ik de volgende html code:

HTML:

            <div id="footer-widget-area" role="complementary"> 
 
                <div id="first" class="widget-area"> 
                    <ul class="xoxo"> 
                        <li id="text-3" class="widget-container widget_text"><h3 class="widget-title">Augustus aanbieding</h3>          <div class="textwidget">Airbrush-Tanning!

Lekker bruin in 10 minuten voor 27,50
<img src="http://www.slenderstudiodronten.nl/images/half-tanning.jpg" width="65" height="65" /></div> 
        </li>                   </ul> 
                </div><!-- #first .widget-area --> 
 
                <div id="second" class="widget-area"> 
                    <ul class="xoxo"> 
                        <li id="text-4" class="widget-container widget_text"><h3 class="widget-title">September aanbieding!</h3>            <div class="textwidget">Actie geldig van 5 tot en met 16 september
20-rittenkaart geen 189,= maar slecht 175,= .
<img src="http://www.valkengoedmassage.nl/euro_teken_cm300.gif" width="65" height="65" /></div> 
        </li>                   </ul> 
                </div><!-- #second .widget-area --> 
 
                <div id="third" class="widget-area"> 
                    <ul class="xoxo"> 
                        <li id="text-5" class="widget-container widget_text"><h3 class="widget-title">Oktober aanbieding</h3>           <div class="textwidget">Deze maand kost een 10-ritten (10 minuten) zonnebank kaart slechts 70,= euro
<img src="http://www.fitklik.nl/fileshan/images/Mijn_aanbod_Zonnebank_A64515_zonnebank.bmp" width="65" height="65" />
</div> 
        </li>                   </ul> 
                </div><!-- #third .widget-area --> 
 
 
            </div><!-- #footer-widget-area -->

en de volgende css code:

Cascading Stylesheet:

    #footer-widget-area .widget-area {float:left; margin-right:5px;}#footer-widget-area #fourth {display:none;}
        #footer-widget-area { width:945px; height:75px; margin-top:5px; margin-bottom:10px;}

#first { float:left; width:300px; height:75px; background-color:#81014b; padding:5px;}
#second { float:left; width:300px; height:75px; background-color:#ac0264; padding:5px;}
#third { float:left; width:300px; height:75px; background-color:#81014b; padding:5px;}
    #first img, #second img, #third img { width:65px; height:70px; float:right; margin-top:-42px; margin-right:-78px;}
    #first span, #second span, #third span { position:relative; top:41px; left:0; margin-left:25px; text-decoration:underline;}
        .textwidget { float:left; width:220px; height:60px;}

of zie *snip* (gelieve naam niet te noemen ivm google).

Ik snap niet wat ik moet doen om de afbeelding goed en op een vaste plaats aan de rechter kant te krijgen.

Weet iemand hoe ik dit wel moet doen?

Bij voorbaat dank!

[ Voor 0% gewijzigd door RobIII op 29-07-2011 01:26 ]

[returnWT]

Plaats de img voor de tekst en pas dan de margin-top aan zodat ze weer goed staan

[Barleone]

Ronnyrr schreef op vrijdag 29 juli 2011 @ 00:38:
(gelieve naam niet te noemen ivm google)

offtopic:
Tweakers.net heeft een mooie feature, die zoekt even snel het echte websiteadres op en zet die als title-attribuut op je bit.ly hyperlink. (ga maar eens met je muis over de bit.ly link in je startpost) Als je dat wilt voorkomen kun je die bit.ly link beter weghalen, want nu leest Google het alsnog.(al snap ik je waarom eigenlijk niet, maar dat terzijde)

Overigens acht ik Google ook wel zo slim, dat ze die bit.ly link zelf even checken naar welke website die gaat.

Verder heb ik niets toe te voegen aan de gegeven oplossing ^hierboven.

[ Voor 5% gewijzigd door Barleone op 29-07-2011 01:22 ]

[RobIII]

^ Met hen.

Maar verder: als je een probleem ergens mee hebt dan maak je een (uitgeklede!) testcase met enkel-en-alleen de hoognodige CSS/HTML/whatever om je probleem te illustreren (en reproduceren). Daar help je in eerste instantie jezelf mee (want je creëert een omgeving met weinig variabelen waardoor je makkelijk kunt uitsluiten waaraan iets wel/niet kan liggen) en in de tweede plaats ons: wij hoeven ons niet door allerlei "vreemde" (als in: niet eigen) CSS/HTML/whatever heen te worstelen om je probleem te bekijken (in jouw geval: 211 regels "rommelige" HTML, 871 regels "rommelige" CSS en dan heb ik de (minified dus onleesbaar) JS scripts nog buiten beschouwing gelaten, waar potentieel, theoretisch, ook een oorzaak in zou kunnen liggen).

Zo'n testcase plaats je dan op een testserver, een testdomein, een (sub)map op je eigenlijke domein of I-don't-care maar het linken naar een website die zo-goed-als-af is neigt al heel snel, bit.ly of niet, naar spam.

Als je code plaatst in een topic is 't ook fijn als je die beperkt tot de noodzakelijke delen en een boel tierlantijntjes dus achterwege te laten maar vooral is 't fijn als je even de zooi netjes indent (inspringt) zodat 't een leesbaar geheel is en niet een enorme brei aan in/uitgesprongen tekst.
Zie:

Cascading Stylesheet:

    #footer-widget-area .widget-area {float:left; margin-right:5px;}#footer-widget-area #fourth {display:none;}
        #footer-widget-area { width:945px; height:75px; margin-top:5px; margin-bottom:10px;}
...

vs:

Cascading Stylesheet:

#footer-widget-area .widget-area {
    float:left;
    margin-right:5px;
}

#footer-widget-area #fourth {
    display:none;
}

#footer-widget-area {
    width:945px;
    height:75px;
    margin-top:5px;
    margin-bottom:10px;
}

...

en:

HTML:

            <div id="footer-widget-area" role="complementary">  
  
                <div id="first" class="widget-area">  
                    <ul class="xoxo">  
                        <li id="text-3" class="widget-container widget_text"><h3 class="widget-title">Augustus aanbieding</h3>            <div class="textwidget">Airbrush-Tanning! 

Lekker bruin in 10 minuten voor 27,50 
<img src="http://www.slenderstudiodronten.nl/images/half-tanning.jpg" width="65" height="65" /></div>  
        </li>                    </ul>  
                </div><!-- #first .widget-area -->  
  
                <div id="second" class="widget-area">  
                    <ul class="xoxo">  
                        <li id="text-4" class="widget-container widget_text"><h3 class="widget-title">September aanbieding!</h3>            <div class="textwidget">Actie geldig van 5 tot en met 16 september 
20-rittenkaart geen 189,= maar slecht 175,= . 
<img src="http://www.valkengoedmassage.nl/euro_teken_cm300.gif" width="65" height="65" /></div>  
        </li>                    </ul>  
                </div><!-- #second .widget-area -->  
  
                <div id="third" class="widget-area">  
                    <ul class="xoxo">  
                        <li id="text-5" class="widget-container widget_text"><h3 class="widget-title">Oktober aanbieding</h3>            <div class="textwidget">Deze maand kost een 10-ritten (10 minuten) zonnebank kaart slechts 70,= euro 
<img src="http://www.fitklik.nl/fileshan/images/Mijn_aanbod_Zonnebank_A64515_zonnebank.bmp" width="65" height="65" /> 
</div>  
        </li>                    </ul>  
                </div><!-- #third .widget-area -->  
  
  
            </div><!-- #footer-widget-area -->

vs:

HTML:

<div id="footer-widget-area">   
    <div id="first" class="widget-area">   
        <ul class="xoxo">   
            <li id="text-3" class="widget-container widget_text"> 
                <h3 class="widget-title">Augustus aanbieding</h3>      
                <div class="textwidget">
                    Airbrush-Tanning! Lekker bruin in 10 minuten voor 27,50  
                    <img src="http://www.slenderstudiodronten.nl/images/half-tanning.jpg" width="65" height="65" /> 
                </div>   
            </li>                    
        </ul>   
    </div><!-- #first .widget-area -->   
     
    <div id="second" class="widget-area">   
        <ul class="xoxo">   
            <li id="text-4" class="widget-container widget_text"> 
                <h3 class="widget-title">September aanbieding!</h3> 
                <div class="textwidget">
                    Actie geldig van 5 tot en met 16 september 20-rittenkaart geen 189,= maar slecht 175,= .  
                    <img src="http://www.valkengoedmassage.nl/euro_teken_cm300.gif" width="65" height="65" /> 
                </div>   
            </li>                     
        </ul>   
    </div><!-- #second .widget-area -->   
     
    <div id="third" class="widget-area">   
        <ul class="xoxo">   
            <li id="text-5" class="widget-container widget_text"> 
                <h3 class="widget-title">Oktober aanbieding</h3>
                <div class="textwidget">
                    Deze maand kost een 10-ritten (10 minuten) zonnebank kaart slechts 70,= euro  
                    <img src="http://www.fitklik.nl/fileshan/images/Mijn_aanbod_Zonnebank_A64515_zonnebank.bmp" width="65" height="65" />  
                </div>   
            </li>                    
        </ul>   
    </div><!-- #third .widget-area -->   
</div><!-- #footer-widget-area -->

Dan zien we, per onze Quickstart, ook graag wat je zelf al geprobeerd hebt (om je probleem op te lossen), wat je gezocht/gevonden hebt, waarom je denkt dat dat niet werkt etc. Ik zie eigenlijk niet heel veel meer in dit topic, en vergeef me als ik bot klink, als een "dit is m'n code *dump*, het doet niet wat ik wil, wat nu?". Dat is niet heel veel meer dan een Kan iemand even...?-topic.

Tot slot nog even:
Ik zie de volgende images:

HTML:

<img src="http://www.slenderstudiodronten.nl/images/half-tanning.jpg" width="65" height="65" />
<img src="http://www.valkengoedmassage.nl/euro_teken_cm300.gif" width="65" height="65" />
<img src="http://www.fitklik.nl/fileshan/images/Mijn_aanbod_Zonnebank_A64515_zonnebank.bmp" width="65" height="65" />

Daaraan mankeert (o.a.) het volgende:
1) De eerste bestaat niet en redirect naar de homepage
2) De tweede is een image van 300x300 die je in de browser schaalt naar 65x65 (zonde van de bandbreedte en daarbij is browser-scaling lang niet zo mooi als een fatsoenlijke image-editor voor je doet)
3) De derde is een bmp Los van 't feit dat browsers 't prima ondersteunen en weergeven: waarom geen jpg?
4) Voor de derde image geldt ook nog eens punt 2
5) Je haalt de images van 3 verschillende domeinen en ik geloof eerlijk gezegd niet dat ze daar blij mee zullen zijn (bandwidth leeching) los van evt. auteursrechten. _{Je kunt niet zomaar andermans sites als CDN gebruiken} . Als je in een testfase zit, zorg dan even voor je eigen "dummy" images. En wat als men bij die andere sites eens besluit er een ranzige pornoplaat voor in de plaats te zetten? Zit jij mooi die plaatjes aan je bezoekers te tonen zonder dat je er erg in hebt. Daarbij ben je "bang" dat wij je site noemen maar alle sites die je op deze manier "misbruikt" zien jouw site als referers
6) De alt attributen ontbreken maar dat is een minor probleempje imho

P.s. En als allerlaatste: gebruik noooooooit comic-sans als je ooit nog serieus genomen wil worden als webdevver/designer!

[ Voor 122% gewijzigd door RobIII op 29-07-2011 02:03 ]

[Barleone]

RobIII schreef op vrijdag 29 juli 2011 @ 01:28:
Tot slot nog even:
Ik zie de volgende images:

HTML:

<img src="x" width="65" height="65" />

Daaraan mankeert (o.a.) het volgende:
2) De tweede is een image van 300x300 die je in de browser schaalt naar 65x65 (zonde van de bandbreedte en daarbij is browser-scaling lang niet zo mooi als een fatsoenlijke image-editor voor je doet)

Daarbij van mijn kant nog het volgende:
je zet 65x65 op het plaatje, maar via CSS doe je nog eens (extra=dubbel) 65x70 en dat strookt niet.