[CSS] container meerekken met inhoud* - Softwareontwikkeling

donderdag 11 maart 2004 23:07

Acties:

^_^

Topicstarter

Ik heb een pagina gemaakt met css. Ik heb een container met een vaste breedte en die moet een variabele grote hebben. Nu zitten er in die container enkele elementen maar zo gauw als ik 3 elementen plaats dan resized de containter met background niet mee.

Ik heb al verschillende sources van vrienden vergeleken en eens geprobeerd om die container te vervangen door een tabel maar steeds zonder resultaat.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
div#container {
  position: absolute;
  top: 10px;
    left: 10px;
    width: 700px;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border: 2px;
    border-color: #000000;
    border-style: solid;
    background-image: url(include/bgfill.gif);
    background-repeat: repeat;
    z-index: 1;
} 

div#header {
  position: relative;
  top: 0px;
    left: 0px;
    width: 700px;
    z-index: 2;
} 

div#menu {
  position: relative;
  top: 50px;
    left: 10px;
    width: 100px;
    border: 2px;
    border-color: #000000;
    border-style: solid;
    padding: 5px;;
    z-index: 3;
} 

div#ccontent {
  position: absolute;
    top: 100;
    left: 170;
    width: 476px;
    z-index: 4;
}

div#content {
  position: relative;
    top: 0;
    left: 0;
    width: 476px;
    z-index: 5;
}

div#ctop {
  position: relative;
    top: 0;
    left: 0;
    width: 476px;
    height: 41px;
    background-image: url(include/ctop.gif);
    z-index: 6;
}

div#cfill {
  position: relative;
    top: 0;
    left: 0;
    width: 476px;
  background-image: url(include/cfill.gif);
    background-repeat: repeat-y;
    padding: 5px;
    z-index: 7;
}

div#cbottem {
  position: relative;
    top: 0;
    left: 0;
    width: 476px;
    height: 31px;
    background-image: url(include/cbottem.gif);
    z-index: 8;
}

div#fill {
  position: relative;
    top: 0;
    left: 0;
    width: 476px;
    height: 32px;
    background-image: url(include/fill.gif);
    z-index: 9;

-->
</style>
</head>
<body>
<div class="container" id="container">
  <div class="header" id="header">[img]"include/header.gif"></div>
    <div[/img]MENU<br>MENU<br>MENU<br></div>
    <div class="ccontent" id="ccontent">    
      <div class="content" id="content">
          <div class="ctop" id="ctop"></div>
          <div class="cfill" id="cfill">test<br>test<br>test<br></div>
          <div class="cbottem" id="cbottem"></div>
            <div class="fill" id="fill"></div>
        </div>  
      <div class="content" id="content">
          <div class="ctop" id="ctop"></div>
          <div class="cfill" id="cfill">test<br>test<br>test<br></div>
          <div class="cbottem" id="cbottem"></div>
            <div class="fill" id="fill"></div>
        </div>  
      <div class="content" id="content">
          <div class="ctop" id="ctop"></div>
          <div class="cfill" id="cfill">test<br>test<br>test<br></div>
          <div class="cbottem" id="cbottem"></div>
            <div class="fill" id="fill"></div>
        </div>  
    </div>
</div> 
</body>
</html>

waarschijnlijk kijk ik ergens grandioos over heen maar ik zie het echt niet.
Hier staat alles online: http://members.home.nl/graasgast/

edit:
sorry vergeten een duidelijke titel te maken

[ Voor 36% gewijzigd door Zym0tiC op 11-03-2004 23:12 ]

There is no such thing as innocence, only degrees of guilt | Flickr!

donderdag 11 maart 2004 23:15

Acties:

André

Analytics dude

Dat komt omdat je de hoogte van de container op 100% gezet hebt. Maar met een klein browserscherm is de 100% kleiner dan die 3 elementen, wat je nodig hebt is een min-height.

donderdag 11 maart 2004 23:18

Acties:

Zym0tiC

^_^

Topicstarter

André schreef op 11 maart 2004 @ 23:15:
Dat komt omdat je de hoogte van de container op 100% gezet hebt. Maar met een klein browserscherm is de 100% kleiner dan die 3 elementen, wat je nodig hebt is een min-height.

maar min-height word toch niet door iedere browser ondersteunt of wel? Iets met een MS IE standaard of was dat ergens anders bij?

There is no such thing as innocence, only degrees of guilt | Flickr!

donderdag 11 maart 2004 23:22

Acties:

André

Analytics dude

Zym0tiC schreef op 11 maart 2004 @ 23:18:
[...]

maar min-height word toch niet door iedere browser ondersteunt of wel? Iets met een MS IE standaard of was dat ergens anders bij?

min-height wordt door veel ondersteund behalve IE, in IE is height de vervanger voor min-heigt. Dus je moet de minimale waarde weten voor de hoogte van die 3 elementen, dan kun je daar de height op zetten.

donderdag 11 maart 2004 23:27

Acties:

Zym0tiC

^_^

Topicstarter

André schreef op 11 maart 2004 @ 23:22:
[...]

min-height wordt door veel ondersteund behalve IE, in IE is height de vervanger voor min-heigt. Dus je moet de minimale waarde weten voor de hoogte van die 3 elementen, dan kun je daar de height op zetten.

maar wat als er nu een 4de of een 5de element bijkomt? dan heb ik weer het zelfde probleem.
Ik zou eventueel met een overflow kunnen werken maar dat is niet hoe ik het wil hebben.

There is no such thing as innocence, only degrees of guilt | Flickr!

donderdag 11 maart 2004 23:28

Acties:

Verwijderd

Hier een beginnetje in je css:

code:

div#container {
  margin-top: 10px;
    margin-left: 10px;
    width: 700px;
    margin: 0px;
    padding: 0px;
    border: 2px;
    border-color: #000000;
    border-style: solid;
    background-image: url(include/bgfill.gif);
    background-repeat: repeat;
} 

div#header {
    width: 700px;
    
} 

div#menu {
  position: absolute;
  top: 150px;
    left: 20px;
    width: 100px;
    border: 2px;
    border-color: #000000;
    border-style: solid;
    padding: 5px;;
} 

div#ccontent {

    top: 100;
    margin-left: 170px;
    width: 476px;
    z-index: 4;
}

Volgens mij kun je voor de rest al die positions, tops en left e.d. allemaal weghalen.
Probeer wat meer met margins en zo te werken.
Ik zou position relative en absolute niet zo vaak gebruiken. Alleen wanneer het nodig is. Het liefst met margins en paddings werken.

donderdag 11 maart 2004 23:31

Acties:

Johnny

ondergewaardeerde internetguru

Er is wel een workaround in MSIE.

Maak gewoon een lege <div> van 400 pixels hoog die in de <div> staat die je een bepaalde hoogte wilt hebben en zet daar je inhoud in.

Trouwens, in je code staan nogal veel <div> tags. Dat is niet de bedoeling van een CSS layout, het is de bedoeling dat je elementen gebruikt waravoor ze bedoeld zijn. Je menu wordt dus een <ul>/<li> lijst, titels <h1>/<h2>/<h3> en tekst staat gewoon binnen een alinea <p>

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

donderdag 11 maart 2004 23:40

Acties:

Zym0tiC

^_^

Topicstarter

die steeds terugkomende divs ctop/cfill/etc zijn steeds artikele die geplaatst worden en die onder elkaar komen te staan. Dat leek dus het makkelijkste. Die ul/il en p tags heb ik al verwerkt

There is no such thing as innocence, only degrees of guilt | Flickr!

vrijdag 12 maart 2004 00:57

Acties:

Zym0tiC

^_^

Topicstarter

Probleem opgelost, ik heb ipv een container die scanlines als achtergrond heeft gewoon de body scanlines meegegeven en het ziet er nu nog beter uit ook

thnx voor de tips

There is no such thing as innocence, only degrees of guilt | Flickr!

Pagina: 1

Reageer