3 replies [Last post]
LaReIne45
LaReIne45's picture
Offline
newbie
Rotterdam
Last seen: 4 years 27 weeks ago
Rotterdam
Timezone: GMT+2
Joined: 2015-04-09
Posts: 4
Points: 9

What I want is clear enough. An image of an Egyptian god on the left side of the page. Next to it a description of the god. Then underneath it another god with a description next to it. And so on.

But the code is not doing what I want it to do. I use the class "plaats" to move the pictures to the left of the page. I try to use the class "image" to clear the float.
What happens instead is that the images which should be underneath each other pictures float too! What you get is a page with gods floating from left to right with the text next to it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Egyptische Goden</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
h1 {
        text-align: center;
}
 
.plaats {
	float:left;
	margin-left:8px;
	}
 
.image {
	clear:right;
}
</style>
 
</head>
<body>
<h1>Egyptische Goden</h1>
 
<img class="plaats" src="afbeeldingen/Horus_standing.svg" alt="God Horus" height="300px" >
<p>Horus is de Egyptische valkgod. Hij is de hemelgod die zijn vleugels over de aarde uitspreidt. In de onderwereld leidt Horus de doden naar Osiris, de god van de onderwereld. Horus is de zoon van Osiris en Isis, en een broer van Bastet.
Horus werd geboren na zelfbevruchting door zijn moeder Isis. Isis kon de penis van Osiris niet terugvinden toen zijn lichaam in 14 stukken was gesneden en in de Nijl geworpen door hun broer, Seth. Maar door magie kon ze zichzelf bevruchten.</p>
 
<img class="plaats image" src="afbeeldingen/Nefertum.svg" alt="God Nefertum" height="300px" >
<p class="image">Nefertem wordt meestal in verband gebracht als god van de parfums vanwege de lotusbloem boven zijn hoofd, tevens zijn kenmerk, maar dit is maar het tweede deel van zijn aard. De werkelijke reden waarom hij werd vereerd was omdat hij dichtbij Ra zat. Al in de piramideteksten wordt er melding van de god gemaakt, daar wordt hij genoemd "de bloesem die voor de neus van Ra is". In latere tijden werd de god geassocieerd met Horus, in Memphis was de god onderdeel van een triade. Daar werd hij afgebeeld als de zoon van Ptah en Sechmet. Andere steden claimden ook de god, in Boeto was hij de zoon van Wadjet en in Boebastis was hij de zoon van Bastet.</p>
 
<img class="plaats image" src="afbeeldingen/Nepthys.svg" alt="Godin Nepthys" height="300px" >
 
<p class="image">Nephthys (Grieks), Nebthet of Nebet-het (Egyptisch wat wil zeggen 'vrouwe van het huis') is in de Egyptische mythologie de godin van de onderwereld en de geboorte. Ze is de dochter van de hemel en aarde, en de zuster van Isis. Met deze laatste wordt ze vaak afgebeeld. Nephthys werd weergegeven in een gewaad dat veel op een dodenkleed lijkt, en haar attribuut is de valk. Ze trouwde met haar broer, Seth, met wie zij haar zoon Anubis kreeg.
 
Hoewel Nephthys getrouwd was met de vijand van zowel haar zuster als haar andere broer - Isis en Osiris - hielp zij Isis toen Seth Osiris vermoordde en in stukken over heel Egypte verspreidde. Samen met haar man en andere goden behoorde ze tot de Enneade van Heliopolis.</p>

LaReIne45
LaReIne45's picture
Offline
newbie
Rotterdam
Last seen: 4 years 27 weeks ago
Rotterdam
Timezone: GMT+2
Joined: 2015-04-09
Posts: 4
Points: 9

Solved it myself:<style

Solved it myself:

<style type="text/css">
h1 {
	text-align: center;
}
 
.plaats {
	float:left;
	margin:8px;
 
	}
 
p.image {
	clear:both;
}
</style>
 
</head>
<body>
<h1>Egyptische Goden</h1>
 
<img class="plaats" src="afbeeldingen/Horus_standing.svg" alt="God Horus" height="300px" >
<p>Horus is de Egyptische valkgod. Hij is de hemelgod die zijn vleugels over de aarde uitspreidt. In de onderwereld leidt Horus de doden naar Osiris, de god van de onderwereld. Horus is de zoon van Osiris en Isis, en een broer van Bastet.
Horus werd geboren na zelfbevruchting door zijn moeder Isis. Isis kon de penis van Osiris niet terugvinden toen zijn lichaam in 14 stukken was gesneden en in de Nijl geworpen door hun broer, Seth. Maar door magie kon ze zichzelf bevruchten.</p>
<p class="image"></p>

An empty p-tag did the trick.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 9 hours 38 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Not a robust way

Your solution has side effects that may surprise you; not to mention it is non-semantic.

Try this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8">
    <title>
      Test document
    </title>
    <style type="text/css">
/*<![CDATA[*/
 
    body {
      font:  100%/1.25 san-serif;
      max-width: 500px;  /*limiting width to show wrap under*/
      }
 
    p {
      font-size:  1em;
      }
 
    .desc {
      overflow: hidden;
      }
 
    .desc h2 {
      text-align: center;
      }
 
    .desc img {
      border: 1px solid black; /*for clarity*/
      margin-right: 1em;
      float: left;
      }
 
    /*]]>*/
    </style>
  </head>
  <body>
    <h1>
      Egyptian Gods
    </h1>
 
    <div class="desc">
      <h2>
        Horus
      </h2>
 
      <p>
        <img src="/images/horus.jpg"
           alt="image of Horus"
           width="125"
           height="150">Nulla mattis consequat condimentum.
           Pellentesque rhoncus gravida dui, sit amet faucibus
           mauris vehicula non! Class aptent taciti sociosqu ad
           litora.
      </p>
 
      <p>
        Nulla mattis consequat condimentum. Pellentesque rhoncus
        gravida dui, sit amet faucibus mauris vehicula non! Class
        aptent taciti sociosqu ad litora.
      </p>
 
      <p>
        Nulla mattis consequat condimentum. Pellentesque rhoncus
        gravida dui, sit amet faucibus mauris vehicula non! Class
        aptent taciti sociosqu ad litora.
      </p>
    </div>
 
    <div class="desc">
      <h2>
        Osiris
      </h2>
 
      <p>
        <img src="/images/osiris.jpg"
           alt="image of Osiris"
           width="125"
           height="150">Nulla mattis consequat condimentum.
           Pellentesque rhoncus gravida dui, sit amet faucibus
           mauris vehicula non! Class aptent taciti sociosqu ad
           litora.
      </p>
 
      <p>
        Nulla mattis consequat condimentum. Pellentesque rhoncus
        gravida dui, sit amet faucibus mauris vehicula non! Class
        aptent taciti sociosqu ad litora.
      </p>
 
      <p>
        Nulla mattis consequat condimentum. Pellentesque rhoncus
        gravida dui, sit amet faucibus mauris vehicula non! Class
        aptent taciti sociosqu ad litora.
      </p>
    </div>
  </body>
</html>

See Enclosing Float Elements

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

LaReIne45
LaReIne45's picture
Offline
newbie
Rotterdam
Last seen: 4 years 27 weeks ago
Rotterdam
Timezone: GMT+2
Joined: 2015-04-09
Posts: 4
Points: 9

Thank you, Gary Turner. That

Thank you, Gary Turner. That is indeed better code than mine. Smile