[HTML/CSS] Voorkomen dat layout wordt weggedrukt - Softwareontwikkeling

woensdag 30 november 2005 17:32

Acties:

Topicstarter

Hallo,
Ik beheer de website van het Stedelijk Gymnasium Breda. Pasgeleden heb ik deze website van een nieuwe, volledig HTML 4.01 Transitional-compliant layout voorzien. (De oude bevatte > 130 fouten).

Vlak na de introductie kwam ik al een aantal fouten tegen, die ik heb kunnen verhelpen.
Zo heb ik de layout flink kunnen versnellen door de CSS meer specifiek te maken (denk aan div#maincontent i.p.v. #maincontent etc.)

Ik heb echter nog steeds één probleem: wanneer #maincontent breder is dan een aantal pixels, wordt het rechtermenu een heel eind omlaag gedrukt.

Ik heb geen idee hoe ik dat kan verhelpen. Met tables is het zo gedaan, maar ik heb die juist afgezworen voor het maken van een layout, het moet ook met CSS mogelijk zijn.

Kijk maar eens op deze fotopagina. Bij de eerste foto wordt het rechterblok weggedrukt, bij de laatste foto staat hij er gewoon.

In Mozilla Firefox (1.5) heb ik geen problemen, het probleem doet zich alleen voor in IE.
In Firefox wordt de foto gewoon 'achter' het rechtermenu geplakt.

Kan iemand me helpen met dit probleem? Ik weet het zo onderhand echt niet meer...

De algemene CSS en de IE-CSS voor de uitklapmenu's.

We are shaping the future

woensdag 30 november 2005 21:32

Acties:

Verwijderd

Het probleem kan worden teruggebracht tot de onderstaande code. Als je dit vervolgens bekijkt met IE, FF en OP op verschillende afmetingen, dan valt inderdaad op dat IE anders omgaat dan FF en OP ten aanzien van de overflow.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html>
  <head>
    <title>GOT 1091558 - Test OZ01</title>
    <style type="text/css">
div#container {
  width: 100%;
  float: left;
  margin-left: 0px;
  margin-right: -250px;
  background-color: red;
}

div#content {
  margin-right: 250px;
  background-color: yellow;
}

div#sidebar {
  width: 230px;
  height: 300px;
  float: right;
  padding: 4px;
  background-color: green;
}
    </style>
  </head>

  <body>
    <div id="container">
      <div id="content">
        <p>
          hello
        </p>
        <p>
          [img]"http://www.gymnasiumbreda.nl/fotos/hchqpnai/hchqpnai1.jpg"[/img]
        </p>
      </div>
    </div>
    <div id="sidebar">
      world
    </div>
  </body>
</html>

Mijn eerste idee is om de eigenschap overflow de waarde hidden te geven voor #container, maar -zoals je kan zien wanneer je dat doet- dan heb je nog niet het gewenste effect voor IE. Echter, dat heeft alles te maken met de margin-right oplossing. Vervang deze voor #container en #content door margin-left, dan heb je met onderstaande CSS volgens mij wat je wilt.

code:

div#container {
  width: 100%;
  float: left;
  margin-left: -250px;
  background-color: red;
  overflow: hidden;
}

div#content {
  margin-left: 250px;
  background-color: yellow;
}

woensdag 30 november 2005 22:04

Acties:

Alex)

Topicstarter

Hey, alvast bedankt, hiermee kan ik al een stuk op weg

Ik heb 't nu hier weggezet: http://www.gymnasiumbreda.nl/Beta/layout.html.
Zoals je ziet wordt de foto nu gewoon bedekt door het rechtervlak, dat is al netjes. Is er geen mogelijkheid om 'm naar rechts te duwen zoals bij een table gebeurt?

We are shaping the future

woensdag 30 november 2005 22:14

Acties:

André

Analytics dude

Alex schreef op woensdag 30 november 2005 @ 17:32:

Zo heb ik de layout flink kunnen versnellen door de CSS meer specifiek te maken (denk aan div#maincontent i.p.v. #maincontent etc.)

Dat is nieuw voor mij, jij beweert dat door dit soort zaken een pagina sneller gerenderd word?

En misschien kun je hier wat mee:
http://www.glish.com/css/

[ Voor 9% gewijzigd door André op 30-11-2005 22:15 ]

woensdag 30 november 2005 22:43

Acties:

Verwijderd

Alex schreef op woensdag 30 november 2005 @ 22:04:
... Is er geen mogelijkheid om 'm naar rechts te duwen zoals bij een table gebeurt?

De opzet van je stijl is dat het de browserruimte 100% vult (zie css voor #container). "Naar rechts duwen" is dan geen optie, omdat de layout dan ineens over de 100% browserruimte gaat, wat in strijdt is met de regel in je css van 100%. (Derhalve zette IE voorheen het blok onder en niet naast het andere blok.) Alternatief is misschien om de eigenschap overflow bijvoorbeeld de waarde auto te geven, zodat bij te brede content scrollbalken verschijnen.

donderdag 1 december 2005 17:59

Acties:

Alex)

Topicstarter

André schreef op woensdag 30 november 2005 @ 22:14:
[...]

Dat is nieuw voor mij, jij beweert dat door dit soort zaken een pagina sneller gerenderd word?

En misschien kun je hier wat mee:
http://www.glish.com/css/

Er draait een script mee dat de uitklapmenu's verzorgt. Dat draait als een behaviour, als tip op de website stond het specificeren van div#maincontent i.p.v. #maincontent, etc.

We are shaping the future