[css] layout probleem - Softwareontwikkeling

vrijdag 17 september 2004 20:06

Acties:

Topicstarter

Ik heb een simpele layout, die ik netjes met css wil maken, maar ik heb een klein probleempje. De layout staat hier (klik), opzich lukt alles wel, alleen die zwarte lijn rechts lukt niet helemaal.

Ik heb dus een div#container gemaakt, en die wou ik eigenlijk height: 100% geven en vervolgens een border-right: 1px solid #000, maar dit werkt niet (hij wordt te hoog). De linker-balk wordt niet echt zichtbaar, dat is alleen een scheiding van de kolommen. Heeft iemand een idee hoe dit op te lossen is? Wat sowieso een mogelijkheid is is om de body een background-image te geven (1 bij 1 zwart gifje) en die op 850px van links te positioneren en 230px van boven, maar eigenlijk vindt ik dat een beetje vies.

vrijdag 17 september 2004 20:08

Acties:

disjfa

be

chris schreef op 17 september 2004 @ 20:06:
Ik heb een simpele layout, die ik netjes met css wil maken, maar ik heb een klein Wat sowieso een mogelijkheid is is om de body een background-image te geven (1 bij 1 zwart gifje) en die op 850px van links te positioneren en 230px van boven, maar eigenlijk vindt ik dat een beetje vies.

Dat is zowizo een plan.

In html tot nu geeft het een probleem in de verschillende browsers als je met borders ism width`s gaat werken imho, Je kent het boxmodel wel.

Een optie is wat jij zegt met een plaatje, wat je ook kan is een div in een div. buitenste een width en binnenste een 1px border. Zo hak je niet tegen de moeilijkheden van het boxmodel tegen de verschillende browsers aan.

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 17 september 2004 20:13

Acties:

chris

Topicstarter

disjfa schreef op 17 september 2004 @ 20:08:
[...]

Dat is sowieso een plan.

In html tot nu geeft het een probleem in de verschillende browsers als je met borders ism width`s gaat werken imho, Je kent het boxmodel wel.

Een optie is wat jij zegt met een plaatje, wat je ook kan is een div in een div. buitenste een width en binnenste een 1px border. Zo hak je niet tegen de moeilijkheden van het boxmodel tegen de verschillende browsers aan.

Nou, wat daar dus het probleem is: die div moet wel de hele pagina vullen qua height. Maar pas vanaf 230px hoog. Dus hij moet top: 230px en height: 100%-230px als het ware.

vrijdag 17 september 2004 20:23

Acties:

disjfa

be

[rml]crisp in "[ css] 3 rows, 2 vast, de ander zoekt het..."[/rml]

Dat is dé link om al dit soort problemen op te lossen

Die zou je leeg moeten strippen en dan kom je op:

HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

html, body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}

#container {
  height: 100%;
  padding-top: 80px;
  -moz-box-sizing: padding-box;
}

#top {
  position: absolute;
  top:0px;
  left:0px;
  height: 80px;
  width: 100%;
  background-color: red;
}

#middlecontainer {
  position: relative;
  height: 100%;
}

#middle {
  position: relative;
  height: 100%;
  background-color: yellow;
  overflow: auto;
}

</style>
<body>
<div id="container">
  <div id="top">top</div>
  <div id="middlecontainer">
    <div id="middle">middle<br /><br />
      a lot of content here a lot of content here a lot of content here
      a lot of content here a lot of content here a lot of content here
      a lot of content here a lot of content here a lot of content here
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
    </div>
  </div>
</div>
</body>
</html>

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 17 september 2004 20:38

Acties:

chris

Topicstarter

Ja, maar dat is niet wat ik wil. Ik wil niet het overflow: scroll er in. Dan werkt ie al heel anders. Ik zal het nog een keer uitleggen:

bovenaan een stuk witruimte. Daaronder een header, met width: 100%. Daaronder 2 kolommen, een van 230px en een van 600px. Daar rechts naast moet een 1px border. Die/dat border moet de rest van het scherm vullen qua hoogte, en als er meer content in staat dan moet de hele pagina een scrollbar krijgen, dus het min-height effect. D

vrijdag 17 september 2004 23:04

Acties:

AkaXakA

Just Kidding...

En laat er nou net een artikel op Mezzoblue vandaag voorbijkomen genaamd:
min-height: fixed;

http://www.akaxaka.tk/ - "Knowledge is power. Power corrupts. Study hard, be evil." - 4 Jaar GoT en nog steeds niet evil: er moet een verband zijn...

zaterdag 18 september 2004 00:28

Acties:

chris

Topicstarter

Hm, ook niet wat ik zoek. Wat ik heb gedaan is een gif gemaakt van 1 bij 5000 pixels (lijkt me genoeg voor de eerste 2 jaar), bovenste 150 pixels wit, en deze als background gezet in de body

. Het is een beetje vies, maar lang niet zo vies als tables

zaterdag 18 september 2004 01:25

Acties:

T-MOB

Als ik je goed begrepen heb is de layout die je zoekt. Wil je ook nog een lijntje tussen de linker en rechter-kolom dan kun je aan de #container een 1px zwart plaatje toevoegen als achtergrond:

Cascading Stylesheet:

#container
{
  background: #FFF url('zwartpixel.png') 230px 0 repeat-y
}

Regeren is vooruitschuiven

zaterdag 18 september 2004 09:49

Acties:

chris

Topicstarter

Dat is inderdaad precies wat ik zoek! Helaas had ik het net opgelost, maar ik zal eens goed kijken hoe dit in elkaar zit...

zaterdag 18 september 2004 18:15

Acties:

Verwijderd

disjfa, je weet dat dat voorbeeld van crisp aan geen enkele standaard voldoet?