[CSS] Gecentreerd, alleen niet helemaal correct.

[Angeloonie]

Ik heb een layout via css gemaakt, en als je de window resized, dan gaat de inhoud mee, wat ook moet. Maar zodra de window kleiner wordt dan de layout, wordt de layout er aan de linker kant buiten geduwt, zodat alles wat links staat niet meer zichtbaar is.

test het zelf: http://home.wanadoo.nl/dinkela/portfolio/index.htm


IK denk dat het door de absolute positioning in m'n css komt, maar ik weet het niet zeker, alles wat ik geprobeerd heb resulteerde in een mislukking.


Hier mijn CSS:

code:

/* IMPORTANT */
/* This design is not a template. You may not reproduce it elsewhere without the 
   designer's written permission. However, feel free to study the CSS and use 
   techniques you learn from it elsewhere. */


/* basic elements */
html {
    margin: 0px;
    padding: 0px;
}

body {
    background: #9F9282 url(img/bg_container.gif) repeat-y center;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 0px; 
    padding: 0px;
}

p { 
    color: #575757;
    font-size: 10px;
    margin-top: 0px; 
    text-align: justify;
}

h3 {
    background: White url(img/puce02.gif) no-repeat left;
    margin-top: 70px; 
    margin-bottom: 8px;
    font-weight: bold;
    margin-left: 5px;
}

h3 span {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    /*color: #514A42;*/
    color: Black;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 5px;
    margin-left: 32px;
}

a:link, a:visited {
    color: #000; 
    text-decoration: none;
    text-transform: uppercase;
}
    
a:hover, a:active { 
    text-decoration: underline; 
    color: #000;
}

/* specific divs */
#container { 
    position: absolute;
    width: 460px;
    left: 50%;
    margin-left: -370px;
    margin-top: 260px;
}
    
.resources {
    display: none;
}

#pageHeader {   display:none    }

/*#quickSummary {
    background: #9F9282;
    border-color: #666;
    border-style: dashed;
    border-width: thin;
    margin: 20px 10px 5px 10px;
    padding: 5px 5px 2px 5px;
    width: 440px;
}*/

#quickSummary {
    background: White;
    margin: 20px 10px 5px 10px;
    padding: 10px 10px 10px 10px;
    width: 440px;
}

#quickSummary p {
    color: Black;
}

.p5 {
    margin: 50px 0px 30px 40px;
    color: Black;
    font-size: 11px;
    text-transform: uppercase;
}

#preamble {
    padding-left: 10px;
}

#update {
    padding-left: 10px; 
    margin-bottom: 40px;
}

#linkList {
    position: absolute;
    top: 0px; 
    width: 700px;
}

#linkList2 {
    position: absolute; 
    top: 0px; 
    width: 700px;
}

#lselect {
    position: absolute;
    padding: 0;
    width: 270px;
    margin: 20px 10px 5px 460px;
    font-size: 10px;
}

#lselect li a:link, #lresources li a:visited {
    color: #000;
    font-size: 10px;
    /*text-transform: uppercase;*/
    text-decoration: underline;
}

#lselect li a:hover, #lresources li a:active {
    color: #000;
    text-decoration: none;
    background-color: White;
}

#lselect a:link.c, #lselect a:visited.c {
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
}

#lselect a:active.c, #lselect a:hover.c {
    text-transform: uppercase;
    text-decoration: underline;
}

#lselect ul {
    margin: 0px;
    padding: 0px;
}

#lselect li {
    background-image: url(img/bglist01.gif) ;
    list-style-type: none;
    margin-left: 20px;
    padding: 4px 4px 0px 5px;
    height: 35px;
}

.select {
    display: none;
}


#lmenu {
    position: absolute;
    top: -15px;
    width: 690px;
}

#lmenu ul {
    display: inline;
}

#lmenu li {
    background: transparent url(img/ico01.gif) no-repeat left;
    display: inline;
    margin: 0px 5px 0px 5px; 
}

#lmenu li a:link, #lmenu li a:visited {
    margin-left: 12px;
    color: #000;
    font-size: 9px;
    text-transform: uppercase;
    text-decoration: none;
}

#lmenu li a:hover, #lmenu li a:active {
    color: #06F;
    text-decoration:underline;
    background-color: White;
}

#extraDiv1 {
    background: url(img/top.jpg) no-repeat; 
    position: absolute;
    width: 748px; 
    height: 241px;
    left: 50%;
    top: 0px;
    margin-left: -374px;
    }
.accesskey {
    text-decoration: underline;
}

en m'n html

code:

<!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" xml:lang="en" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Vincent Dinkela" />
    <meta name="keywords" content="design, angeloonie, art, vincent, dinkela, graphic design, photoshop, visual, display" />
    <meta name="description" content="An online album displaying the artwork I have done" />
    <meta name="robots" content="all" />
    <title>Angeloonie: Portfolio</title>

    
    <style type="text/css">
        @import "css.css";
    </style>
</head>

<body id="portfolio">

<div id="container">
    <div id="intro">
        <div id="pageHeader">
            <h1>Angeloonie: Portfolio</h1>
            <h2>The artist inside</h2>
        </div>

        <div id="quickSummary">
            <p class="p1">Over the past years I have loved working on images, giving them new looks, creating my own or whatever I liked. I never had a place to show them, untill now. In my portfolio you can find all the pieces I made, wallpapers, layouts. avatars, you name it, it's here. Unfortunately I've lost my first creations, but the ones from this year are available. All images are created/edited in Adobe Photoshop 7.0 and Adobe ImageReady 7.0. A few images are created with the help of tutorials, but most of them are by my own inspiration. I hope you'll enjoy viewing my works.</p>
            </div>
    </div>
  <div id="update">
        <div id="nov262004">
            <h3><span>Update: 26-11-2004</span></h3>
            <p class="p1">Things are starting to take shape now, I can see this site getting more and more to my liking. It's not finished yet, I'm still working on the index page, let alone the content pages.</p>
            <p class="p2">Meanwhile, feel free to check my <a href="http://www.angeloonie.tk">personal site</a> for more nonsense.></p>
        </div>
        <div id="nov242004">
            <h3><span>Update: 24-11-2004</span></h3>
            <p class="p1">I recently finished my first design for a portfolio, but I didn't feel satisfied with the result. To begin with it was too standard, a bit dull and not very attractive to look at. So here I am, making an entirely new version. I'm coding the pages with valid XHTML 1.0 Strict and valid CSS 1.0.</p>
            <p class="p2"><a href="http://validator.w3.org/">[img]"http://www.w3.org/Icons/valid-xhtml10"[/img]</a><a href="http://jigsaw.w3.org/css-validator/">[img]"http://www.w3.org/Icons/valid-css"[/img]</a></p>
            <p class="p3">CSS allows complete and total control over the style of a hypertext document. In my previous websites I have mainly used tables for layouts, and I know now: tables are bad!! bad I tell you! I think I've moved over to CSS layouts permanently.</p>
        </div>
  </div>
  <div id="linkList">
        <div id="linkList2">
            <div id="lselect">
                <h3 class="select">Check the latest.</h3>
                <ul>
                   <li>Latest Additions:</li>
                   <li><a href="images/digital%20art/art7.jpg">[img]"images/digital%20art/shot7.jpg"[/img]</a></li> 
                   <li><a href="images/digital%20art/art6.jpg">[img]"images/digital%20art/shot6.jpg"[/img]</a></li> 
                   <li><a href="images/digital%20art/art5.jpg">[img]"images/digital%20art/shot5.jpg"[/img]</a></li> 
                   <li><a href="images/digital%20art/art4.jpg">[img]"images/digital%20art/shot4.jpg"[/img]</a></li> 
                   <li><a href="images/digital%20art/art3.jpg">[img]"images/digital%20art/shot3.jpg"[/img]</a></li> 
                </ul>
            </div>
            <div id="lmenu">
                <ul>
                    <li><a href="index.htm">Home</a></li>
                    <li><a href="avatars.htm">Avatars</a></li>
                    <li><a href="art.htm">Digital Art</a></li>
                    <li><a href="layouts.htm">Layouts</a></li>
                    <li><a href="manipulations.htm">Manipulations</a></li>
                    <li><a href="signatures.htm">Signatures</a></li>
                    <li><a href="wallpapers.htm">Wallpapers</a></li>
                </ul>
            </div>
        </div>
    </div>


</div>

<div id="extraDiv1"></div>

</body>
</html>

Zou graag wat hulp krijgen, aangezien het voor mensen met lage resoluties niet echt prettig is.

[Rickets]

Dat komt door je manier van centreren. Beter is het om zo te doen:

Cascading Stylesheet:

body { text-align: center; }
#container { margin: 0 auto; text-align: left; }

Eerste regel is voor IE, de tweede manier voor browers die dat snappen (Firefox/Opera/etc)

[Angeloonie]

Dat had ik al eens geprobeerd, maar dan komt alles er nog vreemder uit te zien:

http://home.wanadoo.nl/dinkela/portfolio/t/index.htm


Er is denk ik dan nog iets wat niet lekker werkt

[Rickets]

Als je het op die manier doet heb je geen position absolute meer nodig voor #container.

[Angeloonie]

Rickets schreef op zondag 28 november 2004 @ 14:58:
Als je het op die manier doet heb je geen position absolute meer nodig voor #container.

Ok, heb wat gepuzzeld, en het werkt in principe goed, alleen is de inhoud er van door gegaan naar rechts

Heb wat met margins zitten knoeien, maar dat werkte ook niet.

Zou het de left: 50% kunnen zijn?

http://home.wanadoo.nl/dinkela/portfolio/t/index.htm

[ Voor 7% gewijzigd door Angeloonie op 28-11-2004 15:22 ]

[Genoil]

dit werkt ook op IE (en de rest):

code:

#container {
    position:relative;
    margin 0 auto;
}

[Angeloonie]

Het vreemde is dat hij in IE er nu wel goed uitziet, maar in FireFox niet

[ Voor 196% gewijzigd door Angeloonie op 28-11-2004 19:56 ]

[Angeloonie]

Iemand?

[ Voor 5% gewijzigd door Angeloonie op 28-11-2004 23:42 ]

[Willem]

Kicken "mag" pas na 24 uur
In het vervolg graag rekening mee houden ajb.

[pthn]

je moet denk ik iets doen aan de breedte van je #container-DIV, die is te smal en wordt daardoor wellicht op de verkeerde plek gecentreerd.

[Angeloonie]

pthn schreef op maandag 29 november 2004 @ 08:35:
je moet denk ik iets doen aan de breedte van je #container-DIV, die is te smal en wordt daardoor wellicht op de verkeerde plek gecentreerd.

Ik heb de Header uit de container gehaald, dit zorgde er meteen voor dat de header op de goede plek stond, maar de container nog steeds niet

Ik snap het nu echt niet meer

[FireArrow]

Ik zal je eerlijk bekennen. Mijn website www.xerax.nl doet hetzelfde...
links wordt dus alles onleesbaar... maar wie verkleint z'n beeld nou nog? en voor wat zou je denken? Als het 800/600 nog leesbaar is vind ik het belangrijkst.

[Angeloonie]

FireArrow schreef op maandag 29 november 2004 @ 12:11:
Ik zal je eerlijk bekennen. Mijn website www.xerax.nl doet hetzelfde...
links wordt dus alles onleesbaar... maar wie verkleint z'n beeld nou nog? en voor wat zou je denken? Als het 800/600 nog leesbaar is vind ik het belangrijkst.

Gelukkig ben ik niet de enige


Krijg nu echt de neiging om te zeggen: schijt aan iedereen die zijn browser smaller dan 800 pixels heeft staan!

[The Evil Brain]

Om je gerust te stellen: ik doe het ook Maar ik zoek nog wel een manier om het wat mooier en beter te kunnen doen.