[CSS] layout waar ik niet uit geraak... - Softwareontwikkeling

maandag 9 januari 2006 11:35

Acties:

Verwijderd

Topicstarter

Ter verduidelijk onderstaande afbeelding:

Afbeeldingslocatie: http://www.hanscappelle.be/fora/reviewcss.gif

vereisten
#layout komt gecentreerd in beeld met vaste afmetingen (margin:auto;). De elementen daarin hebben ook allen vaste afmetingen met uitzondering van de hoogte van #submenu en #content.

Wat me nu niet meteen lukt is de div #submenu naast de andere divs te krijgen. position:absolute kan ik niet gebruiken omdat alles gecentreerd moet zijn en dus binnen die layout zit. Verder heb ik met float:left voor die #submenu al geprobeerd maar dan blijven de #menu en #content divs telkens pas helemaal onderaan te verschijnen. Ik dacht dit op te lossen met clear:none wat niet ging. Iemand enig idee?

nog wa css die ik al heb:

code:

body{
padding:0px;
margin:0px;
}
#layout {
margin-top:0px;
margin-right:auto;
margin-left:auto;
width: 824px;
padding:0px 100px 0px 100px;
background-image:url('background.gif');
background-repeat:y-repeat;
color: #f60;
}
#content {
margin:0px 0px 0px 224px;
padding:20px;
color: #f60;
}
#header{
background-image:url('header.jpg');
height:250px;
width:600px;
margin:0px 0px 0px 224px;
}
#menu{
border-top:solid 1px #f60;
border-bottom:solid 1px #f60;
text-align:center;
margin:0px 0px 0px 224px;
}
#submenu{
margin:0px 600px 0px 0px;
padding:20px;
//...
}

[ Voor 14% gewijzigd door Verwijderd op 09-01-2006 11:50 ]

maandag 9 januari 2006 11:50

Acties:

Verwijderd

Je kunt misschien het beste zoeken op "faux colums"
Zoals hier: http://www.alistapart.com/articles/fauxcolumns/

En ik ben ook geen held in CSS, maar misschien kun je iets doen met "float:left"?

maandag 9 januari 2006 11:56

Acties:

crisp

Devver

Pixelated

Je kan #submenu prima absoluut positioneren als je #layout position:relative geeft.
Mijn voorkeur zou echter uitgaan naar een float-oplossing en het faux-columns idee; hiertoe zou ik #header, #menu en #content samen in 1 division zetten en die division left floaten naast #submenu (ook left float). Let daarbij op dat het totaal niet te breed wordt of kan worden.

Ik zie overigens dat je padding samen met width/height opgeeft voor bepaalde elementen - probeer dat te vermijden aangezien niet alle browsers (IE < 6 bijvoorbeeld) hetzelfde boxmodel gebruiken...

Intentionally left blank

maandag 9 januari 2006 11:58

Acties:

Verwijderd

Topicstarter

thx voor de tips, kzal dat allemaal eens bekijken. Als ik er nog niet uitgeraak zie je me terug, iig bedankt.

maandag 9 januari 2006 12:44

Acties:

Sappie

De Parasitaire Capaciteit!

crisp schreef op maandag 09 januari 2006 @ 11:56:
Mijn voorkeur zou echter uitgaan naar een float-oplossing en het faux-columns idee; hiertoe zou ik #header, #menu en #content samen in 1 division zetten en die division left floaten naast #submenu (ook left float). Let daarbij op dat het totaal niet te breed wordt of kan worden.

Let dan wel op het feit dat in IE div's (waarvoor de hasLayout property true is) naast floating elementen 3px marge krijgen: http://www.satzansatz.de/cssd/onhavinglayout.html#nextfloat (als je test in IE verklaart dit wss ook het naar onder springen van je divs)

Ook wordt de floating #submenu div niet gecleared in andere browsers dan IE op deze manier; dat wil zeggen dat als je submenu div hoger wordt dan de rechterdiv's de layout div niet wordt opgerekt.

Hier een voorbeeldje (geëdit na post van crisp):

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>test</title>
    <style type="text/css">      
        html, body {
          margin: 0; 
          padding: 0; 
          background: white;
        } 
               
        #container {
            overflow: auto;
            margin: 10px auto;
            width: 750px;
            min-height: 600px;
            background: gray;
        }
        
        #header {
            float: right;
            width: 550px;
            height: 100px;
            background: blue;
        }
               
        #submenu {
            float: left;
            width: 200px;
            background: green;
        }
        
        #content {
                    float: right;
            width: 550px;
            background: #EEEEEE;
        }
        
        #menu {
            background: red;
            width: 550px;
            float: right;
            height: 30px;
        }
  </style>
  <!--[if lt IE 7]>
      <style type="text/css">
          #container { 
            overflow: visible;
                        height: 600px;
                    }
      </style>
    <![endif]-->
</head>
<body>
    <div id="container">
        <div id="submenu">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla quis nibh. Fusce condimentum diam. Sed ligula. Proin fringilla sem ac risus. Ut ac justo quis risus tempor imperdiet. Aliquam nisl. Sed bibendum. Curabitur sem. Nulla consectetuer nunc eget sapien. Nunc posuere justo. Integer sodales accumsan sem. Cras id nisl eget leo sagittis tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rutrum. Ut orci est, ultrices eu, molestie non, congue id, magna. Aliquam est risus, euismod vel, mollis eu, varius sit amet, quam. Aliquam enim dolor, ornare sed, gravida eu, tempor et, turpis.
        </div>
        <div id="header"></div>
        <div id="menu"></div>
        <div id="content">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla quis nibh. Fusce condimentum diam. Sed ligula. Proin fringilla sem ac risus. Ut ac justo quis risus tempor imperdiet. Aliquam nisl. Sed bibendum. Curabitur sem. Nulla consectetuer nunc eget sapien. Nunc posuere justo. Integer sodales accumsan sem. Cras id nisl eget leo sagittis tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rutrum. Ut orci est, ultrices eu, molestie non, congue id, magna. Aliquam est risus, euismod vel, mollis eu, varius sit amet, quam. Aliquam enim dolor, ornare sed, gravida eu, tempor et, turpis.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla quis nibh. Fusce condimentum diam. Sed ligula. Proin fringilla sem ac risus. Ut ac justo quis risus tempor imperdiet. Aliquam nisl. Sed bibendum. Curabitur sem. Nulla consectetuer nunc eget sapien. Nunc posuere justo. Integer sodales accumsan sem. Cras id nisl eget leo sagittis tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rutrum. Ut orci est, ultrices eu, molestie non, congue id, magna. Aliquam est risus, euismod vel, mollis eu, varius sit amet, quam. Aliquam enim dolor, ornare sed, gravida eu, tempor et, turpis.
        </div>
    </div>
</body>
</html>

[ Voor 32% gewijzigd door Sappie op 09-01-2006 14:12 ]

Specs | Audioscrobbler

maandag 9 januari 2006 14:02

Acties:

crisp

Devver

Pixelated

Sappie schreef op maandag 09 januari 2006 @ 12:44:
[...]

Let dan wel op het feit dat in IE div's (waarvoor de hasLayout property true is) naast floating elementen 3px marge krijgen: http://www.satzansatz.de/cssd/onhavinglayout.html#nextfloat (als je test in IE verklaart dit wss ook het naar onder springen van je divs)

Dat geldt alleen voor non-floated content; als je zowel de linker- als de rechtkolom float heb je dat probleem niet.

Ook wordt de floating #submenu div niet gecleared in andere browsers dan IE op deze manier; dat wil zeggen dat als je submenu div hoger wordt dan de rechterdiv's de layout div niet wordt opgerekt.

Daarvoor kan je je #layout een vorm van overflow geven (hidden of auto)

Intentionally left blank

maandag 9 januari 2006 14:05

Acties:

Sappie

De Parasitaire Capaciteit!

crisp schreef op maandag 09 januari 2006 @ 14:02:
Dat geldt alleen voor non-floated content; als je zowel de linker- als de rechtkolom float heb je dat probleem niet.

Klopt, ik had je post niet goed gelezen.

Daarvoor kan je je #layout een vorm van overflow geven (hidden of auto)

klopt ook

edit: heb de code in mijn vorige post geëdit; was sowieso veel te ingewikkeld aan het denken allemaal.. thnx crisp voor het wakkerschudden

offtopic:
en nu sluit ik GoT maar es even af.. moet eigenlijk GoT maar aanklagen dat het me van mijn studie afhoudt; morgen gvd mn allerlaatste tentamen en heb nog nix gedaan voor het vak

[ Voor 35% gewijzigd door Sappie op 09-01-2006 14:18 ]

Specs | Audioscrobbler

dinsdag 10 januari 2006 19:56

Acties:

Verwijderd

Topicstarter

Sappie schreef op maandag 09 januari 2006 @ 12:44:
[...]

knip

Hier een voorbeeldje (geëdit na post van crisp):
code:
1
knip

Ongelooflijk bedankt voor je code. Ik had het ondertss met de vorige posts van gerben en crisp goed gekregen in Firefox. Tot ik in ging IE ging kijken. Mijn divs stonden plots onder elkaar en de layout was niet meer gecentreerd... Kzou mij eens verder moeten verdiepen in die zever*.

* Met zever bedoel ik dan het ontbreken van een standaard

Enige probleem dat ik nu nog heb is dat de achtergrond breder (ongeveer 100px aan elke zijde) is dan submenu en content naast elkaar.

Als ik dus in de code van Sappie de #container breedte 1024px geef dan krijg ik de achtergrondafbeelding goed te zien. Maar dan staan de divs nog aan de uiterste randen terwijl deze van die rand af moeten staan.

Als ik dat probeer te corrigeren met margin of padding dan krijg ik telkens verschillen in de browsers (verschillend boxmodel).

Afbeelding ter verduidelijking:
Afbeeldingslocatie: http://www.hanscappelle.be/fora/css_probleem.gif

Afbeeldingslocatie: http://www.hanscappelle.be/fora/css_probleem.gif

[ Voor 44% gewijzigd door Verwijderd op 10-01-2006 20:29 ]

dinsdag 10 januari 2006 21:14

Acties:

Sappie

De Parasitaire Capaciteit!

Zou je de html icm css eens kunnen posten?

En over welke browsers heb je het als je te maken krijgt met verschillen in box-model? (als het goed is treden deze verschillen dus alleen op bij IE versies < 6)

Specs | Audioscrobbler

woensdag 11 januari 2006 11:15

Acties:

Verwijderd

Topicstarter

Sappie schreef op dinsdag 10 januari 2006 @ 21:14:
Zou je de html icm css eens kunnen posten?

En over welke browsers heb je het als je te maken krijgt met verschillen in box-model? (als het goed is treden deze verschillen dus alleen op bij IE versies < 6)

tuurlijk (het is die van u die ik aanpaste om tot mijn layout te komen:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>test</title>
    <style type="text/css">
    <!--
        html, body {
          margin: 0;
          background-image: url("img/img_101.gif");
          font-family:serif;
        }
        #container {
            overflow: auto;
            margin: auto;
            width: 1024px;
            min-height: 600px;
            background-image: url("img/background.gif");
        }
        #header {
            float: right;
            width: 600px;
            height: 250px;
            background-image: url("img/header.jpg");
            background-repeat:no-repeat;

        }
        #submenu {
            float: left;
            width: 200px;
            background: green;
        }
        #content {
            float: right;
            width: 600px;
            background: #EEEEEE;
        }
        #menu {
            background: red;
            width: 600px;
            float: right;
            height: 20px;
        }
    -->
    </style>
    <!--[if lt IE 7]>
      <style type="text/css">
          #container {
              overflow: visible;
              height: 600px;
                    }
      </style>
    <![endif]-->
</head>
<body>
    <div id="container">
        <div id="submenu">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla quis nibh. Fusce condimentum diam. Sed ligula. Proin fringilla sem ac risus. Ut ac justo quis risus tempor imperdiet. Aliquam nisl. Sed bibendum. Curabitur sem. Nulla consectetuer nunc eget sapien. Nunc posuere justo. Integer sodales accumsan sem. Cras id nisl eget leo sagittis tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rutrum. Ut orci est, ultrices eu, molestie non, congue id, magna. Aliquam est risus, euismod vel, mollis eu, varius sit amet, quam. Aliquam enim dolor, ornare sed, gravida eu, tempor et, turpis.
        </div>
        <div id="header"></div>
        <div id="menu"></div>
        <div id="content">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla quis nibh. Fusce condimentum diam. Sed ligula. Proin fringilla sem ac risus. Ut ac justo quis risus tempor imperdiet. Aliquam nisl. Sed bibendum. Curabitur sem. Nulla consectetuer nunc eget sapien. Nunc posuere justo. Integer sodales accumsan sem. Cras id nisl eget leo sagittis tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rutrum. Ut orci est, ultrices eu, molestie non, congue id, magna. Aliquam est risus, euismod vel, mollis eu, varius sit amet, quam. Aliquam enim dolor, ornare sed, gravida eu, tempor et, turpis.
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla quis nibh. Fusce condimentum diam. Sed ligula. Proin fringilla sem ac risus. Ut ac justo quis risus tempor imperdiet. Aliquam nisl. Sed bibendum. Curabitur sem. Nulla consectetuer nunc eget sapien. Nunc posuere justo. Integer sodales accumsan sem. Cras id nisl eget leo sagittis tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas rutrum. Ut orci est, ultrices eu, molestie non, congue id, magna. Aliquam est risus, euismod vel, mollis eu, varius sit amet, quam. Aliquam enim dolor, ornare sed, gravida eu, tempor et, turpis.
        </div>
    </div>
</body>
</html>

woensdag 11 januari 2006 12:27

Acties:

Sappie

De Parasitaire Capaciteit!

ahzo ik begrijp hem nu volgens mij.

Je moet daartoe even padding toepassen op de container, zoals je zelf ook al had bedacht

Verschillen in box-model treden alleen op voor IE versies < 6 en daarvoor zou je met behulp van conditional comments een andere breedte voor de container mee kunnen geven zodat de layout ook in deze versies van IE ok is.

[ Voor 6% gewijzigd door Sappie op 11-01-2006 12:27 ]

Specs | Audioscrobbler

woensdag 11 januari 2006 13:34

Acties:

Verwijderd

Topicstarter

Sappie schreef op woensdag 11 januari 2006 @ 12:27:
ahzo ik begrijp hem nu volgens mij.

Je moet daartoe even padding toepassen op de container, zoals je zelf ook al had bedacht

Verschillen in box-model treden alleen op voor IE versies < 6 en daarvoor zou je met behulp van conditional comments een andere breedte voor de container mee kunnen geven zodat de layout ook in deze versies van IE ok is.

Idd zo krijg ik het wel goed. Nogmaals enorm bedankt voor de vele hulp.