[xhtml/css] float problemen.

[Verwijderd]

Ik kom niet uit het volgende probleem. Ik heb in een div een img en een div genest. De img heb ik clear: right gegeven, div wordt niet onder img geposioneerd. tevens werkt clear: left ook niet bij div. Wat ik dus wil is de content div gedeeltelijk over de img laten verschijnen. Ik dacht dit dan met een negatieve margin-top bij de content div te doen. ik wil tevens de onderste L-vormige img en de footer echt aan de onderkant van de pagina laten plakken. Wanneer ik met fixed ga werken loopt de hele float in de soep. URL; http://raymond.dynalias.net


html;

HTML:

<div id="main">
  <img src="images/arrowUM.gif" height="90" width="85" alt="upper arrow image2" />
  <div id="content">
     <h1>adipiscing</h1>
     <p> bla</p>
     <p> bla</p>
     <p> bla</p>
   </div>
</div>

css;

Cascading Stylesheet:

#main   {
    float: left;
    width: 50%;
    height: 100%;
    margin: 0;
    background-image: url(../images/arrowD.gif);
    background-position: right bottom;
    background-repeat: no-repeat;}
    
#main img   {
    float: left;
    clear: right;}

#content{
    /* margin: -80px; */
    width:  auto;
    overflow: auto;
    padding: 1em 3em 3em 2.5em;}

Ik zal wel ergens een denkfout maken, maar waar?

Kan iemand mij de bizarre eigenschappen van Firefox uitleggen als men over de linkjes gaat?!

Wat is de meeste veilige oplossing voor verschillende sites om block-elements op de pagina te zetten met xhtml1.0-Strict declaratie?

[ Voor 9% gewijzigd door crisp op 28-01-2005 22:47 . Reden: code-tags(!) ]

[Rowanov]

Ik heb eens gekeken, als je bij #content die margin zo aanzet doet hij het gewoon in Firefox.

code:

#content{
margin: -10px;
overflow: auto;
padding: 1em 3em 3em 2.5em;
}

Er viel mij wel op dat je een aantal dubbele dingen in je css had; als je bij je "a" al de text decoration hebt gedefineerd en hij is bij a:hover hetzelfde, dan kan je dat bij a:hover weglaten.

edit:
In IE dus niet

[ Voor 14% gewijzigd door Rowanov op 27-01-2005 21:10 ]

[Verwijderd]

Het werkt gedeeltelijk! Bij margin: -10px gaat de div idd over het plaatje staan, echter margin: 0 verspringt de div weer richting originele positie. de negatieve marge van 10px is niet 10px omhoog en naar links, maar veel meer. IE6 trekt helemaal niets van de nagieve marge aan, de tekst flowt nog steeds om het plaatje.

Ik heb nu het plaatje absoluut gepositioneerd met een z-index van 1 een de content div z-index: 100. De div valt toch achter het plaatje hoe kan dat nou in godsnaam???!!!!

Zie http://raymond.dynalias.net

Wanneer ik over links in linker div ga krijg je echt een raar effect in FF ook onder IE6 werkt het niet vlekkenloos.

[ Voor 43% gewijzigd door Verwijderd op 28-01-2005 22:03 ]