Lengte linkerkolom niet gedefinieerd

[Gunneweg]

Hallo,

Op mijn website www.aspartaam.nl staan in een linkerkolom eigen links.
Ik kan in de CSS niet ontdekken waar de lengte van die kolom staat vermeld.
Nu valt er op het einde van de voorgedefinieerde kolom een stukje weg van een image.
Ik kan de kolom niet langer te maken.

 

[csshunter]

Hoi Ed,
De linkerkolom is ge-float, en heeft inderdaad geen eigen opgegeven hoogte; die valt dus niet te ontdekken.
Er onder staat keurig een clear-div, en geen van de omvattende elementen heeft een vaste opgegeven hoogte.
Het zou dus niet mis mogen gaan.

En als ik de homepage (met langere content dan de linkerkolom) of de pagina "Over de webmaster" (met kortere content dan de linkerkolom) bekijk, dan zie ik niets onregelmatigs.

• Op welke pagina gaat het precies mis, welk image valt gedeeltelijk weg, en in welke browser?

 

[Gunneweg]

Hoi csshunter,

Op de homepage staat onderaan de linkerkolom "Partners leesbewust enz" daaronder zou nog een image moeten staan en dat is zo op alle pagina's. Ik werk zelf nog steeds met FireFox heb het niet in andere browsers geprobeerd.

Onder "partners enz" zou de image moeten staan http://www.aspartaam.nl/images/aspartaam-leesbewust.png

Hieronder gedeelte van aspartaam-fragment-linkerkolom.php=

<p id="advPartners"><strong>Partners</strong><br>
<a href="http://www.leesbewust.com/" target="_blank" rel="nofollow" title="Lees Bewust">
<img src="http://www.aspartaam.nl/images/aspartaam-leesbewust.png" width="100" height="100" alt="lees bewust verzameling onafhankelijke nieuwswebsites"/><span class="hiddenText">Lees Bewust</span></a>
</p>

In de CSS heb ik in het gedeelte "TOEBEHOREN #linkerkolom" het volgende toegevoegd

#linkerkolom p#advPartners {
margin-top: 10px;
padding-top: 15px;
border-top: 1px solid #A1BBA1; /* grijsgroen */
}
#advPartners a {
width: 100px;
height: 100px;
display: inline-block;
background: url(../images/aspartaam-leesbewust.png);
border-top: 1px solid #A1BBA1; /* grijsgroen */
}
#advPartners a:hover,
#advPartners a:focus {
background-position: -120px 0;
}

Het geheel dus tekst "partners enz" plus de image was wel aanwezig, maar toen ik de link toevoegde naar "Website Grip op Koolhydraten" viel de image van "leefbewust" weg.

Ik hoop dat je hier wat mee kan.

 

[Gunneweg]

Csshunter,

Als je kijkt op de website www.smaakversterkers.com dan zie je daar wel het logo, zonder de reclame voor Grip op Koolhydraten.

 

[csshunter]

Ja, nu zie ik het.
Op de aspartaam-site kan het image niet gevonden worden, omdat er een foutje in de bestandsnaam zit. Er staat in de linkerkolom:

...
<img height="100" width="100" alt="lees bewust verzameling onafhankelijke nieuwswebsites" 
    src="http://www.aspartaam.nl/images/[COLOR="#B22222"][B]aspartaam-leesbewust.png[/B][/COLOR]">

Dat moet zijn:

...
<img height="100" width="100" alt="lees bewust verzameling onafhankelijke nieuwswebsites" 
    src="http://www.aspartaam.nl/images/[COLOR="#B22222"][B]leesbewust.png[/B][/COLOR]">

Zo staat het ook in de smaakversterkers-linkerkolom, en dan kan het plaatje wel gevonden worden.

PS: Het hoeft niet ook nog in de css als background-image.

 

[Gunneweg]

Waar een klein foutje toe kan leiden. Maar fijn dat het opgelost is. Bedankt

Dacht ik toch dat ik het goed deed omdat er in de andere images wel een background: url is gedefinieerd.
Dan zijn die:
aspartaam-zino-logo.png
aspartaam-doneren.png
opgewicht.jpg en
aspartaam-leesbewust.png dus eigenlijk ook niet nodig in de CSS?

 

[csshunter]

Dat is ook gedeeltelijk prima!
Sommige kunnen in de html staan, en andere mogen juist alleen in de css. Dat zit als volgt:

• De aspartaam-zino-logo.png (klik) is een dubbelplaatje: links de gewone toestand, en rechts de hover-variant met een groen randje met ronde hoekjes. De afbeelding staat alléén in de css, want dan kan bij een hover het rechterplaatje getoond worden. Zou de afbeelding óók in de html-staan als voorgrond-afbeelding, dan zou deze in een laag boven de background-afbeelding komen, en zou de hover-variant nooit getoond kunnen worden. Dat moet dus niet > dus niet in de html-code.
• Voor de aspartaam-doneren.png knop geldt hetzelfde: ook deze staat in de css vanwege een hover-variant, en niet in de html.
  
  
• De afbeelding opgewicht.jpg heeft echter géén hover-variant, en staat gewoon als image in de html-code. Hier is niet dezelfde afbeelding als background-image nodig.
• Ook de aspartaam-leesbewust.png is solo: dus in de html en hoeft niet in de css.

 

[Gunneweg]

Bedankt, duidelijk.

Is er op bliksekaters soms uitleg te vinden hoe een hover-variant te maken.
Ik ben er de afgelopen tijd wel naar op zoek geweest maar niet iets kunnen vinden.

 

[csshunter]

Hoe hover-variant maken: gebruiksaanwijzing!

Zo'n gebruiksaanwijzing was er inderdaad niet.
Nu wel: bliksekaters.nl/tests/css-hover-image-maken.htm

 

[Gunneweg]

Ik denk dat heel veel beginners er mee vooruit kunnen
Bedankt.