DIV wil niet werken

**Ruben K** · 04-06-2007, 15:41

Ik ben aan het proberen een layout in DIVs te slicen, het ging redelijk goed maar het wil niet lukken.

Ik heb hem online staan op www.one2apps.com/epalm/div.html

De versie zoals gesliced met PS staat op: www.one2apps.com/epalm/slice.html

Zoals je waarschijnlijk ziet missen de zijbalken bij de div versie, waarschijnlijk omdat ik bij de buitenste container height:100%; doe. Dit is de style:

Code:

body 
{
    background-color: #FFFFFF;
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}

body,td,th 
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #333333;
}

#container-outer
{
    width:798px;
    margin:0 auto;
    height:100%;
}

#container-left
{
    float:left;
    width:18px;
    height:100%;
    background-image:url(images/slice_02.gif);
    background-repeat:repeat-y;
}

#container-middle
{
    float:left;
    width:762px;
    height:100%;
}

    #login-top
    {
        width:100%;
        height:28px;
        background-image:url(images/slice_03.gif)
    }
    
    #header
    {
        width:100%;
        padding-top:110px;
        height:17px;
        background-image:url(images/slice_06.gif);
    }
    
        #menu
        {
            height:13px;
            margin-left:4px;
            width:165px;
            padding-left:5px;
            color:#FFFFFF;
            background-image:url(images/menu-bar.gif);
            word-spacing:10px;
        }
    
        #menu a
        {
            color:#FFFFFF;
            text-decoration:none;
        }

        #menu a:hover
        {
            color:#F9F9F9;
            text-decoration:none;
        }
    
    #content
    {
        background-image:url(images/slice_07.gif);
        background-repeat:no-repeat;
        width:100%;
    
    }
    
    #footer
    {
        background-image:url(images/slice_08.gif);
        height:69px;
        width:100%;
    }
    
    #container-bottom
    {
        height:9px;
        background-color:#252525;
        width:100%;
    }
    
#container-right
{
    float:left;
    width:18px;
    height:100%;
    background-image:url(images/slice_04.gif);
    background-repeat:repeat-y;
}

Als ik container-outer een vaste hoogte meegeef dan komen die zijbalken wel...

De pagina:

Code:

    <div id="container-outer">

        <div id="container-left">
        </div>
        
        <div id="container-middle">
            
            <div id="login-top">
            </div>
            
            <div id="header">
                
                <div id="menu"><a href="#">home</a> <a href="#">contact</a> <a href="#">links</a> <a href="#">portfolio</a></div>
                
            </div>
            
            <div id="content">
            
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc  volutpat, neque vitae fringilla placerat, tortor enim consequat augue,  non porta nisi nibh ac ipsum. Vivamus ac massa. Praesent a sapien eu  ante tempus ullamcorper. Duis cursus suscipit sem. Phasellus eu lectus  at neque rhoncus auctor. Proin condimentum ipsum ac orci. Maecenas  tincidunt elit sed neque. Maecenas eget quam. Donec a urna nec lorem  lacinia viverra. Aliquam dapibus varius neque. Aliquam placerat, justo  ut iaculis lobortis, lectus justo consectetuer velit, lobortis laoreet  ipsum nunc non nisi.
                <p>Fusce neque nibh, tempor sit amet, tempor eu, rhoncus eu, libero.  Sed fringilla, eros et semper fringilla, sem nisl condimentum justo, ut  aliquet quam tellus sed augue. Ut eu quam. Sed a magna. Nunc et odio.  Donec dui dolor, lobortis ut, commodo sit amet, bibendum in, eros. Cras  accumsan, turpis et condimentum blandit, pede erat consectetuer neque,  iaculis tristique justo mauris mollis massa. Vestibulum tempor euismod  turpis. Cras vel ante. Curabitur sapien. Vivamus viverra. Curabitur ut  dui. Aenean et lectus. Vivamus rhoncus enim eu metus. Sed tincidunt est  eget ante porttitor facilisis. Aenean velit nisi, pharetra eu, blandit  aliquam, porta et, erat. </p>
                <p>Maecenas erat massa, rhoncus non, adipiscing eget, congue ut,  tortor. Mauris sem risus, venenatis at, ornare nec, lacinia a, turpis.  Mauris elementum. Maecenas in diam nec tellus semper adipiscing. Morbi  a tortor. Ut consequat rutrum tortor. Cras scelerisque leo ut urna.  Mauris vulputate. Vestibulum ante ipsum primis in faucibus orci luctus  et ultrices posuere cubilia Curae; Phasellus tristique. Quisque dictum  porttitor eros. Nunc feugiat metus quis pede. Sed eu nisl ut mauris  molestie volutpat. </p>
                <p>Nulla et massa. Nam in enim quis enim imperdiet euismod. Suspendisse  potenti. Morbi congue diam ac erat. Fusce ipsum. Donec libero libero,  placerat sed, vestibulum id, blandit eget, mauris. Aliquam porttitor  lorem vel orci. Nunc in sem. Cum sociis natoque penatibus et magnis dis  parturient montes, nascetur ridiculus mus. Sed elementum lectus eu leo.  Nunc scelerisque odio. Nulla mauris. Integer vel dolor eget nisl  faucibus varius. Praesent vulputate luctus tortor. </p>
                <p>Integer posuere euismod metus. Ut mollis. Donec nisi magna,  venenatis at, rhoncus a, molestie id, ligula. Phasellus aliquam lorem  et lorem. Sed dolor orci, viverra non, semper eget, aliquam vitae,  nibh. Pellentesque purus tortor, consectetuer placerat, rhoncus eget,  tempus scelerisque, quam. In nisl. Nam a eros a tellus bibendum mattis.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse  potenti. Quisque arcu erat, porttitor a, pharetra ut, vehicula ut,  velit. Phasellus iaculis mauris. In ac odio. Sed vel urna a purus  nonummy ultrices. </p>
           
            </div>
            
            <div id="footer">
                lol
            </div>
            
            <div id="container-bottom">
            </div>
            
        </div>
        
        <div id="container-right">
        </div>
        
    </div>

Als iemand me kan helpen zou dat erg fijn zijn

**Bram Lodens** · 04-06-2007, 16:20

Deze link werkt niet Ruben, http://www.one2apps.com/epalm/slice.html

**Ruben K** · 04-06-2007, 18:41

Origineel gepost door Bram Lodens

Deze link werkt niet Ruben, http://www.one2apps.com/epalm/slice.html

Aah, vergeten te uploaden, sorry. Hij doet het nu wel

**Cédric Siroux** · 04-06-2007, 22:34

Origineel gepost door Ruben Koeze

Als ik container-outer een vaste hoogte meegeef dan komen die zijbalken wel...

daaruit kan je afleiden dat height:100% niet zo goed gaat... (zowel op body als op div)

wat je moet doen is de div van de zijkanten rond de inhoud laten gaan

dan krijg je dus

Code:

<div id="leftborder">
 <div id="rightborder">
   <div id="content">
    Tralalala
   </div>
  </div>
</div>

Code:

#content{background:url(pics/xxx.jpg);}
#leftborder{background:url(pics/xxx.jpg) repeat-y;}
#rightborder{background:url(pics/xxx.jpg) repeat-y right top;}

no-repeat kan ook

enkelen kleine verbeteringen:

Code:

body 
{
    background-color: #FFFFFF;
    margin:0;
    padding:0;
}

*
{
    font: 11px Arial, Helvetica, sans-serif;
    color: #333333;
}

body is zowiso width:100% en hoogte eigenlijk ook

**Ruben K** · 05-06-2007, 16:20

Wil niet werken...

Code:

    <div id="container-outer">

        <div id="container-left">
        
            <div id="container-right">
            
                <div id="container-middle">
                    
                    <div id="login-top">
                    </div>
                    
                    <div id="header">
                        
                        <div id="menu"><a href="#">home</a> <a href="#">contact</a> <a href="#">links</a> <a href="#">portfolio</a></div>
                        
                    </div>
                    
                    <div id="content">
                    
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc  volutpat, neque vitae fringilla placerat, tortor enim consequat augue,  non porta nisi nibh ac ipsum. Vivamus ac massa. Praesent a sapien eu  ante tempus ullamcorper. Duis cursus suscipit sem. Phasellus eu lectus  at neque rhoncus auctor. Proin condimentum ipsum ac orci. Maecenas  tincidunt elit sed neque. Maecenas eget quam. Donec a urna nec lorem  lacinia viverra. Aliquam dapibus varius neque. Aliquam placerat, justo  ut iaculis lobortis, lectus justo consectetuer velit, lobortis laoreet  ipsum nunc non nisi.
                        <p>Fusce neque nibh, tempor sit amet, tempor eu, rhoncus eu, libero.  Sed fringilla, eros et semper fringilla, sem nisl condimentum justo, ut  aliquet quam tellus sed augue. Ut eu quam. Sed a magna. Nunc et odio.  Donec dui dolor, lobortis ut, commodo sit amet, bibendum in, eros. Cras  accumsan, turpis et condimentum blandit, pede erat consectetuer neque,  iaculis tristique justo mauris mollis massa. Vestibulum tempor euismod  turpis. Cras vel ante. Curabitur sapien. Vivamus viverra. Curabitur ut  dui. Aenean et lectus. Vivamus rhoncus enim eu metus. Sed tincidunt est  eget ante porttitor facilisis. Aenean velit nisi, pharetra eu, blandit  aliquam, porta et, erat. </p>
                        <p>Maecenas erat massa, rhoncus non, adipiscing eget, congue ut,  tortor. Mauris sem risus, venenatis at, ornare nec, lacinia a, turpis.  Mauris elementum. Maecenas in diam nec tellus semper adipiscing. Morbi  a tortor. Ut consequat rutrum tortor. Cras scelerisque leo ut urna.  Mauris vulputate. Vestibulum ante ipsum primis in faucibus orci luctus  et ultrices posuere cubilia Curae; Phasellus tristique. Quisque dictum  porttitor eros. Nunc feugiat metus quis pede. Sed eu nisl ut mauris  molestie volutpat. </p>
                        <p>Nulla et massa. Nam in enim quis enim imperdiet euismod. Suspendisse  potenti. Morbi congue diam ac erat. Fusce ipsum. Donec libero libero,  placerat sed, vestibulum id, blandit eget, mauris. Aliquam porttitor  lorem vel orci. Nunc in sem. Cum sociis natoque penatibus et magnis dis  parturient montes, nascetur ridiculus mus. Sed elementum lectus eu leo.  Nunc scelerisque odio. Nulla mauris. Integer vel dolor eget nisl  faucibus varius. Praesent vulputate luctus tortor. </p>
                        <p>Integer posuere euismod metus. Ut mollis. Donec nisi magna,  venenatis at, rhoncus a, molestie id, ligula. Phasellus aliquam lorem  et lorem. Sed dolor orci, viverra non, semper eget, aliquam vitae,  nibh. Pellentesque purus tortor, consectetuer placerat, rhoncus eget,  tempus scelerisque, quam. In nisl. Nam a eros a tellus bibendum mattis.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse  potenti. Quisque arcu erat, porttitor a, pharetra ut, vehicula ut,  velit. Phasellus iaculis mauris. In ac odio. Sed vel urna a purus  nonummy ultrices. </p>
                   
                    </div>
                    
                    <div id="footer">
                        lol
                    </div>
                    
                    <div id="container-bottom">
                    </div>
                    
                </div>
            
            </div>
            
        </div>
        
    </div>

Code:

body 
{
    background-color: #FFFFFF;
    margin:0;
    padding:0;
}

*
{
    font: 11px Arial, Helvetica, sans-serif;
    color: #333333;
}
#container-outer
{
    width:798px;
    margin:0 auto;
}

#container-left
{
    float:left;
    width:18px;
    background-image:url(images/slice_02.gif);
    background-repeat:repeat-y;
}

#container-middle
{
    width:762px;
    margin-left:18px;
}

    #login-top
    {
        width:100%;
        height:28px;
        background-image:url(images/slice_03.gif)
    }
    
    #header
    {
        width:100%;
        padding-top:110px;
        height:17px;
        background-image:url(images/slice_06.gif);
    }
    
        #menu
        {
            height:13px;
            margin-left:4px;
            width:165px;
            padding-left:5px;
            color:#FFFFFF;
            background-image:url(images/menu-bar.gif);
            word-spacing:10px;
        }
    
        #menu a
        {
            color:#FFFFFF;
            text-decoration:none;
        }

        #menu a:hover
        {
            color:#F9F9F9;
            text-decoration:none;
        }
    
    #content
    {
        background-image:url(images/slice_07.gif);
        background-repeat:no-repeat;
        width:100%;
    
    }
    
    #footer
    {
        background-image:url(images/slice_08.gif);
        height:69px;
        width:100%;
    }
    
    #container-bottom
    {
        height:9px;
        background-color:#252525;
        width:100%;
    }
    
#container-right
{
    width:18px;
    float:right;
    background-image:url(images/slice_04.gif) repeat-y right top;
}

**Ruben K** · 10-06-2007, 09:26

Ik bump em toch maar even, want het wil niet lukken. Ik heb de link geupdate voor zover ik nu ben

**Joeri P** · 11-06-2007, 07:18

Als ik even vlug kijk naar je code, zie ik al dat je afmetingen niet kloppen.

buitenste container : 798px
container-left = 18px
container-middle = 762 + 18 px = 780px

Dus nu zijn je totale pixels al opgebruikt.

En dat zal dan waarschijnlijk wle de reden zijn waarom hij die rechtse container niet toont.

Fix dat eerst es even. En haal ook eens die width:100% weg, en zet daar eens de echt aantal pixels in de plaats. Ik zie geen reden waarom je daar 100% moet gebruiken.

Ook versta ik niet goed hoedat je je divs hebt genesteld. Maar tkan gerust zijn dat het perfect werkt zoals jij het hebt gedaan hoor. Maar ik vind het toch wat bizar, en eigenlijk ingewikkeld.

**Cédric Siroux** · 11-06-2007, 20:41

sorry, ik heb het nu even druk,

Code:

#container-left
{
    float:left;
    width:18px;
    background-image:url(images/slice_02.gif);
    background-repeat:repeat-y;
}

jij zegt dus dat je een div maakt die 18 px breed is, links zweeft en de background zet je in 2 stukken ipv 1

alles wat in deze div staat zal ook maar 18px breed zijn, dus eigenlijk je hele site...
de bedoeling van dit linkse stuk is dat het de achtergrond die jij knipt laat zien, zet dan padding (links) op 18 px en de volgende div zal niet over de achtergrond komen.
de float:left is absoluut niet nodig, stond niet in mijn voorbeeld.

Code:

    background:url(images/slice_02.gif) repeat-y;

werkt ook en is beter

**Ruben K** · 12-06-2007, 15:43

http://www.one2apps.com/epalm/div.html

Het is gelukt ;)

Heel erg bedankt.

DIV wil niet werken