[CSS] horizontaal centreren, top & bottom vast, menu etc var - Softwareontwikkeling

dinsdag 19 juli 2005 21:57

Acties:

Topicstarter

Beste tweakers, kijk eerst even naar dit plaatje:

Afbeeldingslocatie: http://img172.imageshack.us/img172/32/opzet6nn.jpg

Geen woorden, maar code

code:

<html>
<head>
<title>test</title>
<style type="text/css">

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

div {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#container {
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -450px;
  height: 100%;
  width: 900px;
  padding-top: 218px;
  padding-bottom: 20px;
}

#top {
  position: absolute;
  top:0px;
  left:0px;
  height: 218px;
  width: 100%;
  border: 1px solid red;
}

#left {
  position: absolute;
  width: 150px;
  height: 100%;
  border: 1px solid blue;
  overflow: auto;
}

#content {
  position: absolute;
  left: 150px;
  width: 750px;
  height: 100%;
  border: 1px solid blue;
  overflow: auto;
}

#bottom {
  position: absolute;
  bottom:0px;
  left:0px;
  height: 20px;
  width: 100%;
  border: 1px solid red;
}

</style>
<body>
<div id="container">
  <div id="top">top</div>
  <div id="left">left</div>
  <div id="content">
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
    content<br /><br />
  </div>
  <div id="bottom">bottom</div>
</div>
</body>
</html>

[rml][ css] 3 rows, 2 vast, de ander zoekt het maar uit[/rml]

(uiteraard) naar code van crisp.

Het enige probleem, is dat m'n bottom verdwijnt

height: 100%; voor content alleen werkt gewoon, alleen het menu moet er ook nog bij (ook 100%) en dan gaat het fout (dan pakt ie 100% van de portview).

Wie o wie ziet het probleem? $_/-\o_$

[ Voor 45% gewijzigd door _Brake_ op 19-07-2005 22:02 . Reden: sorry voor de beroerde titel, kon er niks beter van maken ]

Dell Vostro 7620 / Intel Core i7 12700H / NVIDIA GeForce RTX 3050 Ti 4GB / 40GB DDR5RAM / Samsung 990 Pro 1TB / Dell WD22TB4 / 2x Dell G2724D / Dell Premier KM900 / Universal Audio Volt 1 / 2x KRK Rokit RP8 G4 / KRK S12.4

dinsdag 19 juli 2005 22:43

Acties:

crisp

Devver

Pixelated

je menu doe je links floaten. mbv een achtergrond in je container wek je vervolgens de illusie dat je menu doorloopt tot aan de bottom; dat heet faux columns en is genoeg over te vinden

Intentionally left blank

dinsdag 19 juli 2005 23:02

Acties:

_Brake_

Topicstarter

crisp schreef op dinsdag 19 juli 2005 @ 22:43:
je menu doe je links floaten. mbv een achtergrond in je container wek je vervolgens de illusie dat je menu doorloopt tot aan de bottom; dat heet faux columns en is genoeg over te vinden

maar onderin die menu/left div komt ook nog een plaatje, en die moet altijd onderaan staan

ik zal es op zoek gaan naar faux colums, maar uit de benaming opgemaakt betwijfel ik of het is wat ik zoek. ben wel blij dat jij dit topic je aandacht ff gunt

Dell Vostro 7620 / Intel Core i7 12700H / NVIDIA GeForce RTX 3050 Ti 4GB / 40GB DDR5RAM / Samsung 990 Pro 1TB / Dell WD22TB4 / 2x Dell G2724D / Dell Premier KM900 / Universal Audio Volt 1 / 2x KRK Rokit RP8 G4 / KRK S12.4

dinsdag 19 juli 2005 23:10

Acties:

Verwijderd

_Brake_ schreef op dinsdag 19 juli 2005 @ 23:02:
[...]
maar onderin die menu/left div komt ook nog een plaatje, en die moet altijd onderaan staan

ik zal es op zoek gaan naar faux colums, maar uit de benaming opgemaakt betwijfel ik of het is wat ik zoek. ben wel blij dat jij dit topic je aandacht ff gunt

dat er een plaatje onder die left div moet komen maakt voor faux columns niets uit.

offtopic:
faux columns roeleren

dinsdag 19 juli 2005 23:14

Acties:

_Brake_

Topicstarter

er moet zeg maar een achtergrond plaatje boven en onder in die left/menu divbox komen (ertussen zit 100% wit) en die witte ruimte moet de 100% height opvullen zeg maar. ben ff aan het zoeken naar dat faux columns, maar kom er nog niet echt uit.

ik heb dus eigenlijk 2 fixed achtergronden nodig (1 boven en 1 onder met variabele witte tussenruimte)

Dell Vostro 7620 / Intel Core i7 12700H / NVIDIA GeForce RTX 3050 Ti 4GB / 40GB DDR5RAM / Samsung 990 Pro 1TB / Dell WD22TB4 / 2x Dell G2724D / Dell Premier KM900 / Universal Audio Volt 1 / 2x KRK Rokit RP8 G4 / KRK S12.4

dinsdag 19 juli 2005 23:31

Acties:

Verwijderd

faux columns zie je bijvoorbeeld op een van mijn sites. Dat komt neer op 1 background plaatje wat je laat herhalen, hier kun je dingen overheen zetten, een soort van bedrog

woensdag 20 juli 2005 00:19

Acties:

_Brake_

Topicstarter

Verwijderd schreef op dinsdag 19 juli 2005 @ 23:31:
faux columns zie je bijvoorbeeld op een van mijn sites. Dat komt neer op 1 background plaatje wat je laat herhalen, hier kun je dingen overheen zetten, een soort van bedrog

Ik kijk er morgen (taal technisch gezien straks) even naar!

Dell Vostro 7620 / Intel Core i7 12700H / NVIDIA GeForce RTX 3050 Ti 4GB / 40GB DDR5RAM / Samsung 990 Pro 1TB / Dell WD22TB4 / 2x Dell G2724D / Dell Premier KM900 / Universal Audio Volt 1 / 2x KRK Rokit RP8 G4 / KRK S12.4

woensdag 20 juli 2005 21:32

Acties:

Verwijderd

Ik ben ook met zoiets bezig, ben er bijna uit

http://www.ruineravesteyn.nl

Ik moet er nog een paar bugs uithalen (misschien met enige hulp van jullie):
- In IE: de content(middelste) div staat soms een paar pixels teveel naar links (ik zelf heb hier geen last van, maar een paar vrienden van mij die de layout getest hebben wel) dit gebeurd als de browser gemaximaliseerd staat. Bij een refresh staat de div wel goed.

- In IE: zodra je het venster verkleind en er een scrollbar zichtbaar wordt, verschuifd de div ook iets te ver naar links.

In Firefox werkt deze layout perfect...

Misschien heb je er wat aan, en kunnen andere mij misschien helpen met deze 2 bugjes

code:

body{
    margin:0;
    padding:127px 0 48px 0;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
}

div#header{
    position:absolute;
    top:0;
    left:50%;
    width:800px;
    height:127px;
    margin-left: -400px;
    z-index: 50;
}

div#innerheader{
    width:800px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #95A6A8;
}

div#innercontent{
    width: 800px;
    margin-left: -400px;
    padding-bottom: 48px;
    position: absolute;
    left: 50%;
    background-color: #FFFFFF;
    z-index: 5;
    min-height: 75%;
}

div#actualcontent{
    width: 780px;
    padding: 5px 10px;
}

div#footer{
    position:absolute;
    bottom:0;
    left:50%;
    width:100%;
    height:48px;
    margin-left: -400px;
    z-index: 50;
}

div#innerfooter{
    width:800px;
    background-color: #FFFFFF;
    text-align: center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:9px;
    border-top: 1px solid #95A6A8;
}

* html body{
    overflow:hidden;
} 
* html div#content{
    height:100%;
    overflow: auto;
}

* html div#innercontent{
    height:100%;
}

code:

<!--  IE in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Beeldentuin Ravesteyn Heenvliet</title>
        <meta http-equiv="Content-Type" content="text/html; encoding=iso-8859-1; charset=iso-8859-1" />
        <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="expires" content="Mon, 26 Jul 1997 05:00:00 GMT" />
        <meta name="author" content="Justin Verweel" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="robots" content="none" />
        <style type="text/css">
            @media screen{
                body>div#header{
                    position:fixed;
                }
                body>div#footer{
                    position:fixed;
                }
            }
        </style>
        <style type="text/css" media="screen">
         @import "stylesheets/layout1.css";
        </style>
    </head>
    <body style="background-color: <?php echo $_SESSION['config']['backgroundcolor'];?>;">
        <script type="text/javascript" src="scripts/common.js"></script>
        <div id="header">
            <div id="innerheader">
            [img]"images/ruine_logo.png"[/img]
            <div>
                <ul id="navbar">
                    <li><a href="index.php">Home</a></li>
                    <li><a href="index.php">Kunstenaars</a></li>
                    <li><a href="index.php">Openingstijden</a></li>
                    <li><a href="index.php?pageID=4">Info</a></li>
                    <li><a href="index.php">Foto's</a></li>
                    <li><a href="index.php?pageID=6">Links</a></li>
                    <li><a href="index.php?pageID=7">Gastenboek</a></li>
                    <li><a href="index.php?pageID=8">Contact</a></li>
                </ul>
            </div>
            </div>
        </div>
        <div id="footer">
            <div id="innerfooter">
            <a href="http://www.ssvh.nl" onclick="return linkNewWindow(this);">[img]"images/ssvh_bottom.png"[/img]</a><br/>
            This website is copyrighted by Justin Verweel 2005 --- All rights reserved
            </div>
        </div>
        <div id="content">
            <div id="innercontent">
                <div id="actualcontent">
                    <?php
                    showRightContentPage();
                    ?>
                </div>
            </div>
        </div>
    </body>
</html>

edit: type foutje in de link

[ Voor 18% gewijzigd door Verwijderd op 20-07-2005 21:36 ]

woensdag 20 juli 2005 22:52

Acties:

crisp

Devver

Pixelated

Je copyright-blok zou je altijd nog absoluut kunnen positioneren binnen je container. mbv min-height op container2 kan je voorkomen dat je overlap krijgt met je menu (in het geval dat mensen een viewport minder dan 638 pixels hoog hebben). Alleen IE ondersteunt geen min-width; daar heb je dus een stukje JS voor nodig.
Overigens is de term 100% hier natuurlijk fout; je bedoelt 100% minus 238 pixels.

Als het echter niet zo van belang is dat de header en footer altijd in beeld staan dan zou ik overwegen om gewoon voor een variabele hoogte te gaan waarbij het hele scherm scrollbaar is ipv alleen de content...

[ Voor 5% gewijzigd door crisp op 20-07-2005 22:53 ]

Intentionally left blank

woensdag 20 juli 2005 23:56

Acties:

_Brake_

Topicstarter

crisp schreef op woensdag 20 juli 2005 @ 22:52:
Je copyright-blok zou je altijd nog absoluut kunnen positioneren binnen je container. mbv min-height op container2 kan je voorkomen dat je overlap krijgt met je menu (in het geval dat mensen een viewport minder dan 638 pixels hoog hebben). Alleen IE ondersteunt geen min-width; daar heb je dus een stukje JS voor nodig.
Overigens is de term 100% hier natuurlijk fout; je bedoelt 100% minus 238 pixels.

Als het echter niet zo van belang is dat de header en footer altijd in beeld staan dan zou ik overwegen om gewoon voor een variabele hoogte te gaan waarbij het hele scherm scrollbaar is ipv alleen de content...

JavaScript wil ik eigenlijk vermijden, maar is haast wel verplicht omdat 100% niet 100% is toch?

Header en footer moeten in beeld op 1024x768, en ook altijd boven en onderaan (en dus alleen de content scrollbaar).

min-height werkt wel, maar min-width niet in IE?

Dell Vostro 7620 / Intel Core i7 12700H / NVIDIA GeForce RTX 3050 Ti 4GB / 40GB DDR5RAM / Samsung 990 Pro 1TB / Dell WD22TB4 / 2x Dell G2724D / Dell Premier KM900 / Universal Audio Volt 1 / 2x KRK Rokit RP8 G4 / KRK S12.4

donderdag 21 juli 2005 00:13

Acties:

crisp

Devver

Pixelated

IE ondersteund geen min-height, trust me

een expression in CSS is voor dat soort gevallen wellicht wel handig

[ Voor 34% gewijzigd door crisp op 21-07-2005 00:13 ]

Intentionally left blank

donderdag 21 juli 2005 01:30

Acties:

_Brake_

Topicstarter

crisp schreef op donderdag 21 juli 2005 @ 00:13:
IE ondersteund geen min-height, trust me een expression in CSS is voor dat soort gevallen wellicht wel handig

Nee ok, dan lag het aan je verwoording.

Maar ik zit in mijn geval dus vast aan JavaScript?! Daar baal ik van

Dell Vostro 7620 / Intel Core i7 12700H / NVIDIA GeForce RTX 3050 Ti 4GB / 40GB DDR5RAM / Samsung 990 Pro 1TB / Dell WD22TB4 / 2x Dell G2724D / Dell Premier KM900 / Universal Audio Volt 1 / 2x KRK Rokit RP8 G4 / KRK S12.4

donderdag 21 juli 2005 09:18

Acties:

crisp

Devver

Pixelated

_Brake_ schreef op donderdag 21 juli 2005 @ 01:30:
[...]

Nee ok, dan lag het aan je verwoording.

Maar ik zit in mijn geval dus vast aan JavaScript?! Daar baal ik van

Alleen voor IE, en zoals ik al zei kan je dat in de vorm van een expression doen - da's sowieso IE-only, dus andere browsers hebben daar geen last van.
Een ander alternatief is het gebruik van IE7 van Dean Edwards; daarmee implementeer je ook diverse CSS properties die IE normaliter niet ondersteund.
Ik vraag me af of Dean de naam gaat veranderen als straks blijkt dat IE7 die zaken native ook niet ondersteund

Intentionally left blank

donderdag 21 juli 2005 11:19

Acties:

klokop

swiekie swoeng

http://www.stunicholls.myby.co.uk/boxes/minheight.html

"Passing silhouettes of strange illuminated mannequins"