mijn div groeit niet mee

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mark moes

mark moes

15/09/2011 18:00:35
Quote Anchor link
Hoi!
Ik zit er al twee avonden op te stoeien, dus schakel ik nu jullie hulp in.

even voor de beeldvorming hieronder twee afbeeldingen, van zoals het moet zijn, en zoals het wordt als ik er veel tekst in pomp:

http://www.dumpyourphoto.com/files3/72769/qbnIAyz.gif

http://www.dumpyourphoto.com/files3/72770/thumbnail/F8KiNa.gif

Uitleg: ik heb een menu links (left_menu), een content (middle) en een menu rechts (menu_right). Dit staat weer in een container 'main'.

Het probleem is dat ik om de content een soort gradient wil, zodat de div als het ware opgloeit. Deze gradient wordt gecreerd met een 2px hoge afbeelding, telkens herhaald als background van de div left_gradient en right_gradient.
De menu's moeten gewoon over de gradient heenlopen.

De gradient lukt wel, en ik kan er ook wel een hoogte aangeven etc, maar zodra de content groeit, moet dus de gradient meegroeien. Dus zoals de eerste afbeelding is het goed, maar als ik m dan vol tekst pomp, dan groeit de gradient div niet meer mee.

CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
body, html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-color: #E9E9E9;
    height: 100%;
}

#page {
    width: 1000px;
    
    margin-right: auto;
    margin-left: auto;
    margin-top: 5px;
    margin-bottom: 0px;
    text-align: left;
    background-color: transparent;
}

#logo {
    position: absolute;
    width: auto;
    height: auto;
    
    top: 75px;
    
    margin-left: 50px;
}

#b-1 {
     position: relative;

     border-bottom-width: 10px;
     border-bottom-style: solid;
     border-bottom-color: #E9E9E9;
    
    width: auto;
    height: 350px;
    background: url('../img/100_0319.JPG') no-repeat center center;
}

#b-2 {
    position: absolute;
    
    width: 1000px;
    height: 200px;
    
    top: 75px;
    bottom: auto;
    
    opacity:0.5;
    filter:alpha(opacity=50);
    
    background-color: #E9E9E9;
}

#main {
    width: auto;
    overflow: hidden;
}

#middle {
    
    float: left;

    right: auto;
   left: auto;
  
   width: 660px;
    min-height: 400px;
  
   padding: 0 10px 0 10px;
    
   background-color: #E9E9E9;
}

#left_menu {
    
    width: 150px;
    height: 100px;
    
    padding: 0 5px 0 5px;
    
    color: #E9E9E9;
    background-color: #0b6a0b;
    
    border-top: solid 1px #d60000;
    
    margin-top: 10px;
}

#right_menu {
    
    width: 150px;
    height: 225px;
    
    padding: 0 5px 0 5px;
    
    color: #E9E9E9;
    background-color: #0b6a0b;
    
    border-top: solid 1px #d60000;
    
    margin-top: 10px;
}

#left_menu ul, #right_menu ul {
    list-style: none;
    margin: 5pxs 0 0 0;
    padding: 0;
}

#left_menu li, #right_menu li {

    
}
#left_menu a:link, #right_menu a:link {
    width: auto;
    height: 20px;
    line-height: 20px;
    display: block;
    color: #e9e9e9;
    text-decoration: none;
}
#left_menu a:visited, #right_menu a:visited {
    text-decoration: none;
}
#left_menu a:hover, #right_menu a:hover {
    text-decoration: none;
    font-weight: bold;
}
#left_menu a:active, #right_menu a:active {
    text-decoration: none;
}

#right_gradient {
    float: right;
    
    width: 160px;
    min-height: 400px;
    background: url('../img/gradient-r.png') repeat-y #9e9e9e;
}

#left_gradient {
    float: left;
    
    width: 160px;
    min-height: 400px;
    background: url('../img/gradient-l.png') repeat-y right  #9e9e9e;

}

#footer {
   margin-left: auto;
   margin-right: auto;
    
   line-height: 50px;
    
   width: 1000px;
   height: 50px;
  
   color: #E9E9E9;
   background-color: #1e1e1e;
}


html:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    
    <title>Mark Moes Hoveniers en Dienstverlening</title>

    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>

<!-- container with all containers -->
<div id="page">
    
    <div id="b-1"><!-- background is header --></div>    
    <div id="b-2"><!-- opacity --></div>    
    <div id="logo">
        <!-- logo -->
        <img src="img/logo.png" name="Mark Moes.nl" title="Welkom bij Mark Moes.nl!" height="200px" width="330px" />
    </div>
        <!-- #0b6a0b -->
   <div id="main">
        <div id="left_gradient">
            <div id="left_menu">
                <ul>
                    <li><a href="#" >Menu</a></li>
                    <li>Nog wat</li>
                </ul>
            </div>
        </div>
        
        <div id="middle">
            
            <div id="1">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, lorem at iaculis tempus, orci nibh ultrices nisi, ac sodales dolor justo eget ante. Integer nec ante id turpis molestie fermentum. Nulla dictum lacus ac neque malesuada adipiscing. Sed luctus arcu eget felis imperdiet laoreet et eu dolor. Mauris lorem sem, euismod vel scelerisque non, congue non tortor. Curabitur ut enim urna. Pellentesque vehicula, quam non dictum blandit, nunc diam tristique tellus, varius scelerisque turpis nibh at turpis. Nam fermentum, augue quis aliquam aliquet, diam ligula congue nunc, ac rutrum urna nisi eget elit. Vestibulum condimentum convallis molestie. Nam eleifend arcu laoreet massa suscipit vel posuere diam condimentum. Praesent aliquam faucibus dolor a fermentum.

Nam lacus nulla, tincidunt quis tincidunt et, pellentesque nec elit. Donec vulputate vehicula aliquet. Cras consequat erat sit amet elit feugiat laoreet. Donec semper, lorem vel lobortis consectetur, nunc est convallis orci, non fermentum ligula justo vestibulum urna. Vestibulum semper condimentum urna, quis porta dolor adipiscing vitae. Ut ornare, metus non euismod dapibus, orci arcu ultrices erat, vel condimentum nisl nulla consectetur metus. Praesent porta laoreet tortor, eget ultricies metus ullamcorper faucibus. Quisque dapibus, ante volutpat ultrices congue, nulla ante vulputate nibh, sed tincidunt risus lectus nec nulla. Proin a lorem sit amet quam mattis faucibus. Curabitur tempor condimentum sapien et hendrerit. Suspendisse ut pulvinar nibh.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vehicula ultrices convallis. Nam id pretium mi. Vivamus placerat tempus augue, vel consequat magna volutpat consectetur. Aenean aliquet vestibulum vestibulum. Aenean hendrerit, ipsum nec tincidunt imperdiet, risus ipsum tempus velit, in blandit nisi libero sed est. Curabitur id turpis orci. Duis luctus mattis consectetur. Duis tellus augue, condimentum id convallis nec, pellentesque eu massa. Integer bibendum placerat commodo.

Sed semper nibh lectus, et tristique elit. Sed libero ligula, vulputate quis facilisis a, egestas eu leo. Duis sagittis egestas massa non adipiscing. Fusce fermentum blandit elit vel lacinia. Nulla consequat varius tortor nec faucibus. Proin elementum metus ultricies lectus auctor consequat pharetra massa tempor. Cras luctus, tortor in gravida tincidunt, quam nunc consectetur enim, vel hendrerit ligula dolor non ante. Aenean mollis venenatis tortor, ut congue dolor bibendum eget. Curabitur vehicula orci sed metus elementum pellentesque.

Quisque venenatis elit nec libero tincidunt in sodales neque aliquet. Aenean blandit, urna vel faucibus rutrum, nunc nisi ultrices ipsum, vitae aliquam ligula ligula eu sapien. Pellentesque diam velit, hendrerit a tincidunt dignissim, porta sed nisi. Curabitur luctus cursus tortor, eu tincidunt mi condimentum at. In facilisis mattis sem, nec faucibus dui porttitor sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Vestibulum eros ante, cursus id facilisis non, cursus sed sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ultrices, risus et ornare adipiscing, leo metus accumsan diam, ac commodo magna elit et nunc. Donec faucibus tempor consectetur. Maecenas accumsan orci vitae elit molestie ullamcorper malesuada urna aliquam.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, lorem at iaculis tempus, orci nibh ultrices nisi, ac sodales dolor justo eget ante. Integer nec ante id turpis molestie fermentum. Nulla dictum lacus ac neque malesuada adipiscing. Sed luctus arcu eget felis imperdiet laoreet et eu dolor. Mauris lorem sem, euismod vel scelerisque non, congue non tortor. Curabitur ut enim urna. Pellentesque vehicula, quam non dictum blandit, nunc diam tristique tellus, varius scelerisque turpis nibh at turpis. Nam fermentum, augue quis aliquam aliquet, diam ligula congue nunc, ac rutrum urna nisi eget elit. Vestibulum condimentum convallis molestie. Nam eleifend arcu laoreet massa suscipit vel posuere diam condimentum. Praesent aliquam faucibus dolor a fermentum.

Nam lacus nulla, tincidunt quis tincidunt et, pellentesque nec elit. Donec vulputate vehicula aliquet. Cras consequat erat sit amet elit feugiat laoreet. Donec semper, lorem vel lobortis consectetur, nunc est convallis orci, non fermentum ligula justo vestibulum urna. Vestibulum semper condimentum urna, quis porta dolor adipiscing vitae. Ut ornare, metus non euismod dapibus, orci arcu ultrices erat, vel condimentum nisl nulla consectetur metus. Praesent porta laoreet tortor, eget ultricies metus ullamcorper faucibus. Quisque dapibus, ante volutpat ultrices congue, nulla ante vulputate nibh, sed tincidunt risus lectus nec nulla. Proin a lorem sit amet quam mattis faucibus. Curabitur tempor condimentum sapien et hendrerit. Suspendisse ut pulvinar nibh.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vehicula ultrices convallis. Nam id pretium mi. Vivamus placerat tempus augue, vel consequat magna volutpat consectetur. Aenean aliquet vestibulum vestibulum. Aenean hendrerit, ipsum nec tincidunt imperdiet, risus ipsum tempus velit, in blandit nisi libero sed est. Curabitur id turpis orci. Duis luctus mattis consectetur. Duis tellus augue, condimentum id convallis nec, pellentesque eu massa. Integer bibendum placerat commodo.

Sed semper nibh lectus, et tristique elit. Sed libero ligula, vulputate quis facilisis a, egestas eu leo. Duis sagittis egestas massa non adipiscing. Fusce fermentum blandit elit vel lacinia. Nulla consequat varius tortor nec faucibus. Proin elementum metus ultricies lectus auctor consequat pharetra massa tempor. Cras luctus, tortor in gravida tincidunt, quam nunc consectetur enim, vel hendrerit ligula dolor non ante. Aenean mollis venenatis tortor, ut congue dolor bibendum eget. Curabitur vehicula orci sed metus elementum pellentesque.

Quisque venenatis elit nec libero tincidunt in sodales neque aliquet. Aenean blandit, urna vel faucibus rutrum, nunc nisi ultrices ipsum, vitae aliquam ligula ligula eu sapien. Pellentesque diam velit, hendrerit a tincidunt dignissim, porta sed nisi. Curabitur luctus cursus tortor, eu tincidunt mi condimentum at. In facilisis mattis sem, nec faucibus dui porttitor sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Vestibulum eros ante, cursus id facilisis non, cursus sed sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc ultrices, risus et ornare adipiscing, leo metus accumsan diam, ac commodo magna elit et nunc. Donec faucibus tempor consectetur. Maecenas accumsan orci vitae elit molestie ullamcorper malesuada urna aliquam.</p>
            </div>
            
        </div>
        <div id="right_gradient">
            <div id="right_menu">
                <p></p>
            </div>
        </div>
    </div>
<!-- end of all containers -->
</div>
<div id="footer">
    <p></p>
    
    </div>
</body>
</html>
Gewijzigd op 15/09/2011 18:02:53 door Mark moes
 
PHP hulp

PHP hulp

16/05/2021 23:29:29
 
Ozzie PHP

Ozzie PHP

15/09/2011 18:22:21
Quote Anchor link
Heb je een online voorbeeld?
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

15/09/2011 18:25:31
Quote Anchor link
erg hé stylen.
 
Ozzie PHP

Ozzie PHP

15/09/2011 18:30:52
Quote Anchor link
Ger van Steenderen op 15/09/2011 18:25:31:
erg hé stylen.

Als je weet wat je doet, dan valt het wel mee ;)
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

15/09/2011 18:45:11
Quote Anchor link
dat weet ik dus niet haha
 
Mark moes

mark moes

15/09/2011 19:03:46
Quote Anchor link
dank voor de snelle reactie! ik heb m even online gezet op www.markmoes.nl
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

16/09/2011 19:42:18
Quote Anchor link
gebruik display:table voor de main div dit werkt in alle browsers (IE8+).
wil je het voor IE7 geschikt maken moet je eens googlen op faux columns.
 
Antony Riksen

Antony Riksen

17/09/2011 07:58:02
Quote Anchor link
Goede morgen,

Bij #left_graniet & #right_graniet (vanaf regel 136) heb je alleen min-height,
kun je hier niet een 100% height plaatsen?

Groeten, Antony
 
Bart van der Veen

Bart van der Veen

17/09/2011 12:42:54
Quote Anchor link
ik zou de gradiënt als achtergrond aan de #main toevoegen
 
Ozzie PHP

Ozzie PHP

17/09/2011 13:10:49
Quote Anchor link
Mark, verwijder uit het css bestand de regel "background: url..." bij #right_gradient en #left_gradient. Voeg in het css bestand aan #main toe:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
background-image: url("../img/gradient.png");
background-repeat:repeat-y;


Ga naar dit plaatje: http://i54.tinypic.com/zt7yao.png. Klik met je rechtermuisklik op het plaatje en kies "save picture as" of "afbeelding opslaan als". (Mocht deze optie niet zichtbaar zijn, dan moet je even goed met je muisaanwijzer op het plaatje klikken. Het plaatje is maar 1 pixel hoog dus de kans is groot dat je er naast klikt :-)). Sla het plaatje vervolgens op als "gradient.png" en upload het naar de img map op je server.

Succes...
 
Mark moes

mark moes

17/09/2011 16:55:20
Quote Anchor link
@antony Als ik die hoogte op 100% zet, dan is die hoogte 100% van de div waar die in staat. Maar dan moet die hoogte wel bekend zijn, en dat is die niet, want die is ook auto. Dus de div gradient wordt net zo hoog als het menu, dus het groene vlak.

@ Ozzie, jij hebt van de gradient links en rechts een afbeelding gemaakt, maar als ik dat doe, weet ik zeker dat mijn opmaak vern*t wordt, als ik het scherm kleiner maak. Dus dat is geen oplossing.

@bart, daar ben ik ook al mee bezig geweest, maar dat lukte ook niet zo best. zal daar nu nog eens mee aan het prutsen gaan.
 
Ozzie PHP

Ozzie PHP

17/09/2011 16:57:16
Quote Anchor link
Mark moes op 17/09/2011 16:55:20:
@ Ozzie, jij hebt van de gradient links en rechts een afbeelding gemaakt, maar als ik dat doe, weet ik zeker dat mijn opmaak vern*t wordt, als ik het scherm kleiner maak. Dus dat is geen oplossing.

Heb je het al geprobeerd?
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

17/09/2011 17:17:19
Quote Anchor link
@mark:
je geeft je middelste div ook een vaste breedte dus dan is Ozzie's suggestie best wel een goeie. Maar zoek maar met google op "div same height", dan krijg je genoeg leesvoer.
Overigens blijft voor mij altijd de simpelste oplossing dat in een tabel te regelen.
Gewijzigd op 17/09/2011 17:18:21 door Ger van Steenderen
 
Ozzie PHP

Ozzie PHP

17/09/2011 17:36:07
Quote Anchor link
Ger van Steenderen op 17/09/2011 17:17:19:
Overigens blijft voor mij altijd de simpelste oplossing dat in een tabel te regelen.

Echter, daar zijn tabellen absoluut niet voor bedoeld :)
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

17/09/2011 18:00:02
Quote Anchor link
Ozzie PHP op 17/09/2011 17:36:07:
Echter, daar zijn tabellen absoluut niet voor bedoeld :)


Het doel heiligt de middelen :-P
Gewijzigd op 17/09/2011 18:01:30 door Ger van Steenderen
 
Ozzie PHP

Ozzie PHP

17/09/2011 18:07:45
Quote Anchor link
ja, maar dan moet het wel een GOED middel zijn ;)
 
Mark moes

mark moes

17/09/2011 18:29:31
Quote Anchor link
nou ja, dat is hier gelukkig niet nodig want dat is wel heel vies...
@ozzie, ik heb jou afbeelding een beetje veranderd, etc, en m nu online gezet, kijk maar eens... :D Als ik m weer vol gooi met lorem ipsum dan gaat ie inderdaad gewoon mee, da's logisch. heb m nog niet getest voor op mobiele paginas, zal daar nog een testbrowser voor zoeken. ( heb je een idee voor een mobile testbrowser?)

iig bedankt!
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

17/09/2011 18:30:40
Quote Anchor link
2 minuten of 2 avonden, lijkt mij een heel erg GOED MIDDEL :-P
Gewijzigd op 17/09/2011 18:32:24 door Ger van Steenderen
 
Mark moes

mark moes

17/09/2011 18:32:21
Quote Anchor link
nope, want dan heb je php hulp nog...
 
Ozzie PHP

Ozzie PHP

17/09/2011 18:48:04
Quote Anchor link
Mark moes op 17/09/2011 18:29:31:
nou ja, dat is hier gelukkig niet nodig want dat is wel heel vies...
@ozzie, ik heb jou afbeelding een beetje veranderd, etc, en m nu online gezet, kijk maar eens... :D Als ik m weer vol gooi met lorem ipsum dan gaat ie inderdaad gewoon mee, da's logisch. heb m nog niet getest voor op mobiele paginas, zal daar nog een testbrowser voor zoeken. ( heb je een idee voor een mobile testbrowser?)

iig bedankt!

Graag gedaan... ziet er goed uit. Voor mobiel zal je een aparte versie moeten maken. Ik weet niet of er testbrowsers zijn... als je er een tegenkomt dan hoor ik het ook graag :)



Toevoeging op 17/09/2011 18:48:49:

Ger van Steenderen op 17/09/2011 18:30:40:
2 minuten of 2 avonden, lijkt mij een heel erg GOED MIDDEL :-P

Dat zegt je vriendin zeker ook altijd :-P
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

17/09/2011 19:05:32
Quote Anchor link
Quote:
Dat zegt je vriendin zeker ook altijd :-P


Heef de jouwe geluld hahahha
Gewijzigd op 17/09/2011 19:06:21 door Ger van Steenderen
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.