[CSS]Holey Grail schermvullend & Netjes. - Softwareontwikkeling

maandag 9 oktober 2006 11:41

Acties:

Topicstarter

Hallo medetweakers,

ik ben bezig met het "holey grail" design in css, maar dan met de header, en daaronder nog een header balk (2 headers dus).

Het zit zo. Je hebt een header, vrij duidelijk. Moet allemaal "schermvullend" zonder horizontale scrollbalks, dus de bovenste header is width=100% en een hoogte in px.

Onder de header zit een balkje waar een image moet komen. Dat is een divje met een background-image van die afmetingen.

Daaronder komt een left menu, daarnaast content, en daarnaast een rightmenu.

oke, even op een rij:

left menu heeft een static width: 125px en moet gewoon netjes schermvullend naar beneden lopen
right menu heeft een static width: 200px en moet ook gewoon netjes naar beneden lopen
Content heeft GEEN static width, die moet gewoon "groter" worden als het browserscherm groter/kleiner word. Dit is dus al een problem
Geen horizontale scrollbars
Bij browser resize: Alleen content in hoogte+breedte en de 2 menu's alleen in hoogte resizen.
Alleen als noodzakelijk verticale scrollbars. Alleen als noodzakelijk!

voorbeeld staat op http://www.maryk.nl/css.html

Vooronderzoek:
Ik heb met google gezocht op dit soort templates. Allemaal met static width's (ze komen dus los van de background, en dit moet juist schermvullend zijn)

Heb veel met %-en gekloot als width's maar dan nog komt hij niet lekker met resizen e.d.

Heb CSS school tuts door gelopen, op w3c gekeken, maar kan het antwoord gewoon niet vinden. Ik ben er gewoon ZEKER van dat het er staat.

[ Voor 5% gewijzigd door RedHat op 09-10-2006 11:43 ]

maandag 9 oktober 2006 11:59

Acties:

Verwijderd

misschien dat hier wat staat voor je: http://www.intensivstation.ch/en/templates/

maandag 9 oktober 2006 12:18

Acties:

RedHat

Topicstarter

zoals ik hierboven al zei,dit zijn allemaal static templates. Een static template bouwen is niet heel moeilijk en kan elke nieuweling met css die wat tuts doorleest.

Het gaat hier om de content box "dynamisch" te maken kwa vorm etc. Die site hierboven heb ik al doorgenomen alleeen daar staat niets over dynamische architectuur

maandag 9 oktober 2006 12:29

Acties:

Verwijderd

da's gewoon deze toch?
http://www.intensivstation.ch/files/en_templates/temp05.html

maandag 9 oktober 2006 12:29

Acties:

TafkaT

http://www.xs4all.nl/~awi...3kol/grail_eenv/index.htm

maandag 9 oktober 2006 12:37

Acties:

RedHat

Topicstarter

http://www.maryk.nl/css.html

tot zover ben ik gekomen, iemand nog tips om e.e.a. te verbeteren? (content is nog steeds niet dynamisch vandaar)

maandag 9 oktober 2006 12:40

Acties:

DaRKie

de width van je content is 500px, moet je niet met % werken als je wilt dat het dynamisch aangepast wordt?

maandag 9 oktober 2006 12:44

Acties:

RedHat

Topicstarter

ctrl+f5
staat w.s.. nog een oude in je cache. width staat op 100%

maandag 9 oktober 2006 12:48

Acties:

DaRKie

Het was de eerste keer dat ik die pagina opendeed

Het probleem dat ik nog zie is dat je linker div je content div tegenhoud maar je rechterdiv komt over je content heen te staan als je het scherm kleiner maakt (is dus geen collision tussen die 2)

Kan misschien opgelost worden met ze dezelfde layer te geven ofzo?

maandag 9 oktober 2006 13:01

Acties:

Verwijderd

code:

<html>
<head>
<title>Title</title>

<style type=text/css>
    HTML { padding: 0px; margin: 0px; }
    BODY { font-family: Verdana; font-size : 1em; text-align: center; padding: 0px; margin: 0px; }
    .header { width: 500px; height: 50px; border-style: solid; padding: 0px; margin: 0px; }
    .header2 { width: 500px; height: 50px; border-style: solid; padding: 0px; margin: 0px; }
    
    .menul { position: absolute; width: 125px; border-style: solid; padding: 0px; margin: 0px; }
    .menur { position: absolute; right: 0px; width: 200px; border-style: solid; padding: 0px; margin: 0px; }
    .content { margin: 0px 200px 0px 125px; border-style: solid; padding: 0px; }
</style>
</head>
</html>

<body>

<div class="header">Header</div>
<div class="header2">Header2</div>

<div class="menul">Menu left</div>
<div class="menur">Menu right</div>
<div class="content">Content</div>

</body>
</html>

maandag 9 oktober 2006 14:08

Acties:

JJvG

Een van mijn persoonlijke favorieten die volgens mij doet wat jij wilt:
http://www.oswd.org/design/preview/id/2493

[ Voor 15% gewijzigd door JJvG op 09-10-2006 14:08 ]

maandag 9 oktober 2006 16:48

Acties:

Juup

Te makkelijk:

code:

<html>
<body>
<div style="width: 125px;">left</div>
<div style="position: absolute; left: 0; top: 0; margin: 0 200px 0 125px;">
content
</div>
<div style="position: absolute; top: 0; right: 0; width: 200px;">right</div>
</body>
</html>

Een wappie is iemand die gevallen is voor de (jarenlange) Russische desinformatiecampagnes.
Wantrouwen en confirmation bias doen de rest.

maandag 9 oktober 2006 17:49

Acties:

moozzuzz

Je kan hetgene je wil ook met een variante op de faux-columns doen denk ik, met name met de borders te setten. Borders hebben het voordeel dat ze écht fixed zijn (zover ik me herinner).

HTML:

<div id="content"></div>
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>

JavaScript:

#header1 {position: absolute; top: 0; left: 0; width: 100%; height: 150px; 
          background-position: bottom;}
#content {position: relative; width: 100%; border: 150px 200px 0 125px; etc}
#left    {position: absolute; top: 0; left: 0; width: 125px; etc}
#right   {position: absolute; top: 0; right: 0; width: 200px; etc}

Code natuurlijk een beetje uit 't hoofd ;-)

maandag 9 oktober 2006 18:26

Acties:

RedHat

Topicstarter

Ik heb wat "creaties" hierboven in Editplus gegooit en dan geviewd.

Nu zet ik m'n vraagtekens bij sommige creaties.
Alles staat scheef en er klopt helemaal niets van bij Frivolink Henkie. Frivolink: maak n's een pagina aan met jouw css. Ook totaal geen argumentatie, jammer.

Ik ben dus niet op zoek naar een kant en klare oplossing, ik heb liever een argumentatie _wat_ ik fout doe en een "kickje" de goede richting op oid.

Mijn dank is groot.

PS: Jaap, maak er wat grotere vlakken van, ff bgcolortje+border en je zal ook zien dat jouw ontwerp niet is wat ik bedoel

Moozuss

Toch wel een van de betere reakties. De borders zijn op dit moment even om goed in beeld te brengen hoe de lijnen+vlakken zich gedragen mbt resizen etc.

Ik ga kijken of het faux systeem wat is. Totzover heb ik hem nog niet kunnen "tunen" tot een werkbaar iets maar zeker een goede tip.

Dit is zeker geen aanval naar de mensen hier die willen "helpen". Maar wat ik héél vaak tegenkom in W&G dat mensen "zomaar" reageren zonder de hele zaak geïnspecteerd hebben, en dan met een stukje code die nog kant nog wel slaat, zonder beargumentatie e.d.

[ Voor 33% gewijzigd door RedHat op 09-10-2006 18:31 ]

maandag 9 oktober 2006 18:31

Acties:

Verwijderd

In firefox is je pagina nu onnodig lang (hoogte van de border te lang).

dinsdag 10 oktober 2006 00:11

Acties:

moozzuzz

Mss inderdaad wat meer uitleg:

header: aangezien die 2de header wellicht (?) enkel als plaatje dient, kan je em in een achtergrond duwen en die onderaan de eerste header plaatsen. Op die manier heb je dus maar één header, met artificieel (vaste hoogte) veel plaats.

3-columns: Ik ben ooit es een blog tegen gekomen waar men zot was van zeer brede borders die er voor zorgden dat je ongeveer het zelfde effect als het voorbeeld van Jaaap kreeg. Ben vergeten of het voordelen had of niet, gewoon eerder als leuk alternatief.
m.a.w.: border: 150px 200px 0 125px solid #000; ipv border:1px solid #000;

Jouw webpag: denk es aan verbeteringen voor je <body>, <DOCTYPE> (ik heb een hekel aan xhtml als het geen nut heeft om xhtml te gebruiken) en een container div.

[ Voor 5% gewijzigd door moozzuzz op 10-10-2006 00:14 ]

dinsdag 10 oktober 2006 02:16

Acties:

Boelie-Boelie

Ik snap niet wat RedHat verkeerd vindt aan het voorbeeld van TafkaT, dat overigens afkomstig is van A List Aparts artikel In search of the holy grail (al vergt het ALA-voorbeeld nog wel aanpassingen voor IE5.x).

In ieder geval is het niet makkelijk om een goede holy grail te maken en het lijkt me sterk dat iemand je aan het handje wil nemen, terwijl er genoeg over te vinden is:
- TJKdesign: 3 columns fluid layout;
- Position is Everything: One true layout;
- CSS-discuss: Three column layouts.

Het gaat iig niet lukken met hoe je nu bezig bent. Probeer eerst eens fatsoenlijke HTML 4.01 strict te produceren, 'XHTML is not for beginners'. Lees ook eens over floats om te positioneren, bijv. het Floatutorial.

Cogito ergo dubito

dinsdag 10 oktober 2006 08:51

Acties:

Victor

Heb 'm hier al eens in een ander topic gepost: mijn implementatie van de holy grail

Getest in IE5.5, IE6, IE7, Firefox 1.5, Opera 9.01 en Safari 2.0.4. Met footer die altijd onderaan blijft, tenzij de content 'm omlaag duwt.

Wellicht bruikbaar

edit:
Dubbelklikken op de koppen om de content te verbergen

[ Voor 9% gewijzigd door Victor op 10-10-2006 08:52 ]

dinsdag 10 oktober 2006 09:32

Acties:

Verwijderd

heb je ook zoiets met een vaste breedte en dan gecentreerd? heb zelf iets gepuzzeld, maar dan valt af en toe (??) bij IE6 de linker kolom weg...

dit is me html

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Footer altijd onderaan CSS Layout</title>
        <style type="text/css">
        
            *   {
                margin: 0;
                padding: 0;
            }
            
            html, body {
                height: 100%;
                font: 1em Verdana;
                background: black;
                margin: 0 auto;
                text-align: center;
            }

            #wrapper {
                min-height: 100%;
                margin: 0 auto;
                margin-top: -50px; /* aanpassen naar de hoogte van de footer. let op, dit is een negatieve waarde! */
                overflow: hidden;
                width: 700px; /* breedte van de pagina */
            }

            #header {
                height: 100px;
                padding-top: 50px; /* aanpassen naar de hoogte van de footer */
                background-color: #ffae00;
            }

            #center_wrapper {
                width: 100%;
                float: left;
                background-color: #cccccc;
            }

            #center {
                margin: 0 200px 0 160px; /* aanpassen naar de breedte van de linker en rechter kolom */
                background: #00cccc;
            }

            #left {
                width: 160px;   /* pas deze aan voor de breedte van de linker kolom */
                margin-left: -100%;
                float: left;
                background: #cc0000;
            }

            #right {
                width: 200px;   /* pas deze aan voor de breedte van de rechter kolom */
                margin-left: -100%;
                float: right;
                background: #00cc00;
            }

            #footer {
                height: 50px;   /* pas deze aan voor de hoogte van de footer */
                width: 700px; /* breedte van de pagina */
                margin: 0 auto;
                color: #fff;
                background-color: #353a51;
                clear: both;
            }
            
            
            /* deze twee zijn enkel voor de voorbeeld layout */
            p.hidden {
                display: none;
            }
            
            p, h2   {
                margin-bottom: 20px;
            }

        </style>
        <!--[if IE]>
            <style type="text/css">
                #wrapper {
                    overflow: visible;
                }

                #center_wrapper {
                    overflow: hidden;
                }

                #right {
                    margin-left: -200px; /* pas deze aan naar de breedte van de rechter kolom. let op, dit is een negatieve waarde! */
                }
            </style>
        <![endif]-->
        <!--[if lt IE 7]>
            <style type="text/css">
                #wrapper {
                    height: 100%;
                }
            </style>
        <![endif]-->
        
        <script type="text/javascript">
            function content(heading) {
                var _paragraph,
                    _i = 0;

                while ((_paragraph = heading.parentNode.getElementsByTagName("p")[_i++])) 
                {
                    _paragraph.className = (_paragraph.className == "" ? "hidden" : "");
                }
            }
        </script>
    </head>

    <body>
        <div id="wrapper">
            <div id="header">
                <h1>Header</h1>
            </div>
            
            <div id="center_wrapper">
                <div id="center">
                    <h2 onclick="content(this)">Center</h2>
                    
                    <p>Lorem ipsum...</p>
                </div>
            </div>
            
            <div id="left">
                <h2 onclick="content(this)">Left</h2>
                <p>Lorem ipsum...</p>           
            </div>
            
            <div id="right">
                <h2 onclick="content(this)">Right</h2>
                <p>Lorem ipsum...</p>
            </div>
        </div>
        
        <div id="footer">
            <h2>Footer</h2>
        </div>
        
    </body>
    
</html>

dinsdag 10 oktober 2006 09:58

Acties:

Victor

Cascading Stylesheet:

#wrapper,
#footer {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

dinsdag 10 oktober 2006 10:26

Acties:

RedHat

Topicstarter

King_Louie schreef op dinsdag 10 oktober 2006 @ 08:51:
Heb 'm hier al eens in een ander topic gepost: mijn implementatie van de holy grail

Getest in IE5.5, IE6, IE7, Firefox 1.5, Opera 9.01 en Safari 2.0.4. Met footer die altijd onderaan blijft, tenzij de content 'm omlaag duwt.

Wellicht bruikbaar

edit:
Dubbelklikken op de koppen om de content te verbergen

Dit is precies wat ik bedoelde. Nu zie ik ook adhv de source wat ik fout gedaan heb. Bedankt hiervoor.

Iedereen hierboven ook bedankt. Ik testte alles met IE+FF maar op de één of andere manier renderde beiden de heirbovengenoemde voorbeelden niet goed. Daarom kreeg ik mislukte voorbeelden. Maar toch bedankt.

De gequote "holey-grail" is precies wat ik bedoelde.