Vertical fixed, horizontal absolute
Ik zit een beetje met een probleem. De website die ik maak heeft aan beide kanten een verticale afbeelding tegen de randen van de browser aan. Ze zijn allebei met een fixed position. Ze zijn fixed, omdat alleen het middelste deel van het scherm (waar de tekst staat) op en neer moet scrollen. Nu is het zo dat ik dit middelste deel wel van een minimun breedte wil voorzien, en dat het dus niet zo is dat deze volledig wordt overlapt door de rechter afbeelding zodra het window kleiner wordt gemaakt. Dit is nu wel het geval omdat door de fixed positie van de rechter afbeelding, deze altijd tegen de rechter kant van het window blijft geplakt.
Als ik de positie naar absolute verander gaat dit wel goed. Dan blijft de afbeelding steken en is het tekstgedeelte in het midden van de juiste minimun breedte. Echter is het nu zo dat de afbeelding mee-scrollt met de tekst in vertical beweging.. En dat wil ik dus weer niet.
Kan ik hem verticaal 'locken' en horizontaal de eigenschap van een absolute element meegeven?
Alvast bedankt!
Gesponsorde koppelingen:
Zo blijft het plaatje dan wel gewoon staan. en moet je geen last hebben als je de browser verkleint.
Als het echt niet kan, dan ga ik inderdaad daar voor.
Kijk eens hier:
http://www.sceneone.nl/positionering/positie.php
(merk op, de rest van de tutorial is ook heel interessant, het is zeer interessant die helemaal te lezen)
Nu, ik denk dat je zoiets wil:
Code (php)
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<style>
#left {
float: left;
}
#right {
float: right;
}
#content {
border: 1px solid #000;
}
#container {
min-width: 400px; /* maar dan zelf aanpassen naar je noden */
}
</style>
</head>
<body>
<div id="container">
<div id="left"><img src="http://sportssmacking.com/wp-content/uploads/2011/10/vertical_banner_advertisement.gif"/></div>
<div id="right"><img src="http://sportssmacking.com/wp-content/uploads/2011/10/vertical_banner_advertisement.gif"/></div>
<div id="content">Hello World</div>
</div>
</body>
</html>
<head>
<style>
#left {
float: left;
}
#right {
float: right;
}
#content {
border: 1px solid #000;
}
#container {
min-width: 400px; /* maar dan zelf aanpassen naar je noden */
}
</style>
</head>
<body>
<div id="container">
<div id="left"><img src="http://sportssmacking.com/wp-content/uploads/2011/10/vertical_banner_advertisement.gif"/></div>
<div id="right"><img src="http://sportssmacking.com/wp-content/uploads/2011/10/vertical_banner_advertisement.gif"/></div>
<div id="content">Hello World</div>
</div>
</body>
</html>
Niet te veel op die image letten; dit was de eerste verticale "banner" die ik tegenkwam.
-----
Ofwel zoiets?
Code (php)
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
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
<html>
<head>
<style>
#left {
float: left;
}
#right {
float: right;
}
#content {
margin: 0 120px 0 120px; /* breedte van de image */
padding: 5px;
overflow: auto;
height: 95%;
}
#container {
min-width: 400px; /* maar dan zelf aanpassen naar je noden */
}
</style>
</head>
<body>
<div id="container">
<div id="left"><img src="http://sportssmacking.com/wp-content/uploads/2011/10/vertical_banner_advertisement.gif"/></div>
<div id="right"><img src="http://sportssmacking.com/wp-content/uploads/2011/10/vertical_banner_advertisement.gif"/></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae aliquam enim. Proin consequat lorem at nibh consectetur sodales. Pellentesque consectetur accumsan augue, in consectetur orci feugiat ut. Etiam ac felis est, in convallis enim. Nullam posuere, libero sit amet feugiat vulputate, lectus dui dictum elit, non euismod sapien eros id massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec lobortis, lacus in ultrices pretium, massa quam luctus turpis, eu consectetur quam urna quis ligula.
<br/>
Quisque eget commodo erat. Quisque urna neque, semper interdum dignissim ac, hendrerit vel urna. Mauris sed leo quis sapien laoreet suscipit ac eu nulla. Aenean imperdiet euismod lorem quis consectetur. Etiam porta imperdiet est, et venenatis sapien congue congue. Suspendisse interdum neque eu nunc varius et gravida arcu scelerisque. Vestibulum congue est ac justo dignissim rhoncus.
<br/>
Cras dolor mauris, sollicitudin eu egestas sit amet, sollicitudin ut quam. Suspendisse potenti. Morbi in enim nec nisi sagittis posuere et vel nunc. Vivamus eu arcu eu neque suscipit commodo. Donec nulla nibh, sollicitudin at commodo a, fermentum non lorem. Suspendisse potenti. Proin hendrerit porta metus, ut suscipit felis vehicula non. Sed at massa nulla, ut bibendum quam. Vestibulum sit amet mi sem. In pellentesque nisi justo. Suspendisse nec mi ligula, gravida tincidunt leo. Nam ut turpis massa, quis pretium felis. Duis nec ipsum eget purus convallis volutpat. Fusce eget elit ac ligula sollicitudin faucibus. Pellentesque vulputate eros id libero pulvinar eget pretium felis fermentum.
<br/>
Maecenas quis sapien eu massa rhoncus rhoncus. Suspendisse non sem ut elit posuere congue. Mauris fermentum eleifend tincidunt. Maecenas et tortor a ligula pellentesque euismod suscipit eget est. Suspendisse potenti. Donec sagittis, nulla at consequat accumsan, libero ante fermentum est, at hendrerit tortor orci vitae nisi. Cras at urna velit, eu ornare felis. Nunc laoreet nunc sed nisi tincidunt porta. Aliquam adipiscing aliquam eleifend.
<br/>
Nullam faucibus lacinia mauris et tincidunt. Vestibulum cursus lectus id lorem dignissim accumsan. Nulla facilisi. Donec suscipit risus ac nulla mollis vitae posuere elit pretium. Donec a varius nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit adipiscing laoreet. Proin volutpat, dui quis tempus cursus, mauris sapien suscipit neque, non mattis dolor odio id orci. </div>
</div>
</body>
</html>
<head>
<style>
#left {
float: left;
}
#right {
float: right;
}
#content {
margin: 0 120px 0 120px; /* breedte van de image */
padding: 5px;
overflow: auto;
height: 95%;
}
#container {
min-width: 400px; /* maar dan zelf aanpassen naar je noden */
}
</style>
</head>
<body>
<div id="container">
<div id="left"><img src="http://sportssmacking.com/wp-content/uploads/2011/10/vertical_banner_advertisement.gif"/></div>
<div id="right"><img src="http://sportssmacking.com/wp-content/uploads/2011/10/vertical_banner_advertisement.gif"/></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae aliquam enim. Proin consequat lorem at nibh consectetur sodales. Pellentesque consectetur accumsan augue, in consectetur orci feugiat ut. Etiam ac felis est, in convallis enim. Nullam posuere, libero sit amet feugiat vulputate, lectus dui dictum elit, non euismod sapien eros id massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec lobortis, lacus in ultrices pretium, massa quam luctus turpis, eu consectetur quam urna quis ligula.
<br/>
Quisque eget commodo erat. Quisque urna neque, semper interdum dignissim ac, hendrerit vel urna. Mauris sed leo quis sapien laoreet suscipit ac eu nulla. Aenean imperdiet euismod lorem quis consectetur. Etiam porta imperdiet est, et venenatis sapien congue congue. Suspendisse interdum neque eu nunc varius et gravida arcu scelerisque. Vestibulum congue est ac justo dignissim rhoncus.
<br/>
Cras dolor mauris, sollicitudin eu egestas sit amet, sollicitudin ut quam. Suspendisse potenti. Morbi in enim nec nisi sagittis posuere et vel nunc. Vivamus eu arcu eu neque suscipit commodo. Donec nulla nibh, sollicitudin at commodo a, fermentum non lorem. Suspendisse potenti. Proin hendrerit porta metus, ut suscipit felis vehicula non. Sed at massa nulla, ut bibendum quam. Vestibulum sit amet mi sem. In pellentesque nisi justo. Suspendisse nec mi ligula, gravida tincidunt leo. Nam ut turpis massa, quis pretium felis. Duis nec ipsum eget purus convallis volutpat. Fusce eget elit ac ligula sollicitudin faucibus. Pellentesque vulputate eros id libero pulvinar eget pretium felis fermentum.
<br/>
Maecenas quis sapien eu massa rhoncus rhoncus. Suspendisse non sem ut elit posuere congue. Mauris fermentum eleifend tincidunt. Maecenas et tortor a ligula pellentesque euismod suscipit eget est. Suspendisse potenti. Donec sagittis, nulla at consequat accumsan, libero ante fermentum est, at hendrerit tortor orci vitae nisi. Cras at urna velit, eu ornare felis. Nunc laoreet nunc sed nisi tincidunt porta. Aliquam adipiscing aliquam eleifend.
<br/>
Nullam faucibus lacinia mauris et tincidunt. Vestibulum cursus lectus id lorem dignissim accumsan. Nulla facilisi. Donec suscipit risus ac nulla mollis vitae posuere elit pretium. Donec a varius nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit adipiscing laoreet. Proin volutpat, dui quis tempus cursus, mauris sapien suscipit neque, non mattis dolor odio id orci. </div>
</div>
</body>
</html>
Gewijzigd op 06/02/2012 16:22:58 door Kris Peeters
Anyway, ik zit met een nieuw probleem. In firefox werkt het uiteraard naar behoren, maar in Chrome en IE niet.
Hierzo het huidige stand van zaken:
wshadows.com/wilbert
In firefox gaat de achtergrondafbeelding mooi mee (hij past zich aan aan de grote van het window). In IE ook. In Chrome niet.
Vervolgens als je het scherm een heel stuk kleiner maakt, zou de afbeelding moeten blijven staan natuurlijk. Maar in Chrome en IE springt hij dan naar beneden!
Wat is hiervoor de oplossing? (Firefox blijft ook altijd beter..)
't is trouwens nog altijd niet helemaal wat het moet zijn, maar zie eens of je dit liever hebt.
min-width durft wel eens lastig doen met IE.
Code (php)
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
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
<html>
<head>
<style>
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
height: 94%;
}
#sidebars {
min-width: 570px; /* = 300px content + 2 x width banner + wat marge */
z-index: 5;
position: absolute;
top: 0;
width: 100%;
height: 0;
}
#left {
float: left;
margin: 2px;
}
#right {
float: right;
margin: 2px;
}
#container {
padding: 0 125px 0 125px; /* breedte van de banner + marge */
height: 95%;
}
#content {
min-width: 300px; /* 300px content */
padding: 5px 15px 0 15px;
overflow: auto;
height: 100%;
text-align: justify;
}
</style>
</head>
<body>
<div id="sidebars">
<div id="right"><img src="http://sportssmacking.com/wp-content/uploads/2011/10/vertical_banner_advertisement.gif"/></div>
<div id="left"><img src="http://sportssmacking.com/wp-content/uploads/2011/10/vertical_banner_advertisement.gif"/></div>
</div>
<div id="container">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae aliquam enim. Proin consequat lorem at nibh consectetur sodales. Pellentesque consectetur accumsan augue, in consectetur orci feugiat ut. Etiam ac felis est, in convallis enim. Nullam posuere, libero sit amet feugiat vulputate, lectus dui dictum elit, non euismod sapien eros id massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec lobortis, lacus in ultrices pretium, massa quam luctus turpis, eu consectetur quam urna quis ligula.
<br/>
Quisque eget commodo erat. Quisque urna neque, semper interdum dignissim ac, hendrerit vel urna. Mauris sed leo quis sapien laoreet suscipit ac eu nulla. Aenean imperdiet euismod lorem quis consectetur. Etiam porta imperdiet est, et venenatis sapien congue congue. Suspendisse interdum neque eu nunc varius et gravida arcu scelerisque. Vestibulum congue est ac justo dignissim rhoncus.
<br/>
Cras dolor mauris, sollicitudin eu egestas sit amet, sollicitudin ut quam. Suspendisse potenti. Morbi in enim nec nisi sagittis posuere et vel nunc. Vivamus eu arcu eu neque suscipit commodo. Donec nulla nibh, sollicitudin at commodo a, fermentum non lorem. Suspendisse potenti. Proin hendrerit porta metus, ut suscipit felis vehicula non. Sed at massa nulla, ut bibendum quam. Vestibulum sit amet mi sem. In pellentesque nisi justo. Suspendisse nec mi ligula, gravida tincidunt leo. Nam ut turpis massa, quis pretium felis. Duis nec ipsum eget purus convallis volutpat. Fusce eget elit ac ligula sollicitudin faucibus. Pellentesque vulputate eros id libero pulvinar eget pretium felis fermentum.
<br/>
Maecenas quis sapien eu massa rhoncus rhoncus. Suspendisse non sem ut elit posuere congue. Mauris fermentum eleifend tincidunt. Maecenas et tortor a ligula pellentesque euismod suscipit eget est. Suspendisse potenti. Donec sagittis, nulla at consequat accumsan, libero ante fermentum est, at hendrerit tortor orci vitae nisi. Cras at urna velit, eu ornare felis. Nunc laoreet nunc sed nisi tincidunt porta. Aliquam adipiscing aliquam eleifend.
<br/>
Nullam faucibus lacinia mauris et tincidunt. Vestibulum cursus lectus id lorem dignissim accumsan. Nulla facilisi. Donec suscipit risus ac nulla mollis vitae posuere elit pretium. Donec a varius nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit adipiscing laoreet. Proin volutpat, dui quis tempus cursus, mauris sapien suscipit neque, non mattis dolor odio id orci.
<br/>
Cras dolor mauris, sollicitudin eu egestas sit amet, sollicitudin ut quam. Suspendisse potenti. Morbi in enim nec nisi sagittis posuere et vel nunc. Vivamus eu arcu eu neque suscipit commodo. Donec nulla nibh, sollicitudin at commodo a, fermentum non lorem. Suspendisse potenti. Proin hendrerit porta metus, ut suscipit felis vehicula non. Sed at massa nulla, ut bibendum quam. Vestibulum sit amet mi sem. In pellentesque nisi justo. Suspendisse nec mi ligula, gravida tincidunt leo. Nam ut turpis massa, quis pretium felis. Duis nec ipsum eget purus convallis volutpat. Fusce eget elit ac ligula sollicitudin faucibus. Pellentesque vulputate eros id libero pulvinar eget pretium felis fermentum.
<br/>
Maecenas quis sapien eu massa rhoncus rhoncus. Suspendisse non sem ut elit posuere congue. Mauris fermentum eleifend tincidunt. Maecenas et tortor a ligula pellentesque euismod suscipit eget est. Suspendisse potenti. Donec sagittis, nulla at consequat accumsan, libero ante fermentum est, at hendrerit tortor orci vitae nisi. Cras at urna velit, eu ornare felis. Nunc laoreet nunc sed nisi tincidunt porta. Aliquam adipiscing aliquam eleifend.
</div>
</div>
</body>
</html>
<head>
<style>
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
height: 94%;
}
#sidebars {
min-width: 570px; /* = 300px content + 2 x width banner + wat marge */
z-index: 5;
position: absolute;
top: 0;
width: 100%;
height: 0;
}
#left {
float: left;
margin: 2px;
}
#right {
float: right;
margin: 2px;
}
#container {
padding: 0 125px 0 125px; /* breedte van de banner + marge */
height: 95%;
}
#content {
min-width: 300px; /* 300px content */
padding: 5px 15px 0 15px;
overflow: auto;
height: 100%;
text-align: justify;
}
</style>
</head>
<body>
<div id="sidebars">
<div id="right"><img src="http://sportssmacking.com/wp-content/uploads/2011/10/vertical_banner_advertisement.gif"/></div>
<div id="left"><img src="http://sportssmacking.com/wp-content/uploads/2011/10/vertical_banner_advertisement.gif"/></div>
</div>
<div id="container">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae aliquam enim. Proin consequat lorem at nibh consectetur sodales. Pellentesque consectetur accumsan augue, in consectetur orci feugiat ut. Etiam ac felis est, in convallis enim. Nullam posuere, libero sit amet feugiat vulputate, lectus dui dictum elit, non euismod sapien eros id massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec lobortis, lacus in ultrices pretium, massa quam luctus turpis, eu consectetur quam urna quis ligula.
<br/>
Quisque eget commodo erat. Quisque urna neque, semper interdum dignissim ac, hendrerit vel urna. Mauris sed leo quis sapien laoreet suscipit ac eu nulla. Aenean imperdiet euismod lorem quis consectetur. Etiam porta imperdiet est, et venenatis sapien congue congue. Suspendisse interdum neque eu nunc varius et gravida arcu scelerisque. Vestibulum congue est ac justo dignissim rhoncus.
<br/>
Cras dolor mauris, sollicitudin eu egestas sit amet, sollicitudin ut quam. Suspendisse potenti. Morbi in enim nec nisi sagittis posuere et vel nunc. Vivamus eu arcu eu neque suscipit commodo. Donec nulla nibh, sollicitudin at commodo a, fermentum non lorem. Suspendisse potenti. Proin hendrerit porta metus, ut suscipit felis vehicula non. Sed at massa nulla, ut bibendum quam. Vestibulum sit amet mi sem. In pellentesque nisi justo. Suspendisse nec mi ligula, gravida tincidunt leo. Nam ut turpis massa, quis pretium felis. Duis nec ipsum eget purus convallis volutpat. Fusce eget elit ac ligula sollicitudin faucibus. Pellentesque vulputate eros id libero pulvinar eget pretium felis fermentum.
<br/>
Maecenas quis sapien eu massa rhoncus rhoncus. Suspendisse non sem ut elit posuere congue. Mauris fermentum eleifend tincidunt. Maecenas et tortor a ligula pellentesque euismod suscipit eget est. Suspendisse potenti. Donec sagittis, nulla at consequat accumsan, libero ante fermentum est, at hendrerit tortor orci vitae nisi. Cras at urna velit, eu ornare felis. Nunc laoreet nunc sed nisi tincidunt porta. Aliquam adipiscing aliquam eleifend.
<br/>
Nullam faucibus lacinia mauris et tincidunt. Vestibulum cursus lectus id lorem dignissim accumsan. Nulla facilisi. Donec suscipit risus ac nulla mollis vitae posuere elit pretium. Donec a varius nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit adipiscing laoreet. Proin volutpat, dui quis tempus cursus, mauris sapien suscipit neque, non mattis dolor odio id orci.
<br/>
Cras dolor mauris, sollicitudin eu egestas sit amet, sollicitudin ut quam. Suspendisse potenti. Morbi in enim nec nisi sagittis posuere et vel nunc. Vivamus eu arcu eu neque suscipit commodo. Donec nulla nibh, sollicitudin at commodo a, fermentum non lorem. Suspendisse potenti. Proin hendrerit porta metus, ut suscipit felis vehicula non. Sed at massa nulla, ut bibendum quam. Vestibulum sit amet mi sem. In pellentesque nisi justo. Suspendisse nec mi ligula, gravida tincidunt leo. Nam ut turpis massa, quis pretium felis. Duis nec ipsum eget purus convallis volutpat. Fusce eget elit ac ligula sollicitudin faucibus. Pellentesque vulputate eros id libero pulvinar eget pretium felis fermentum.
<br/>
Maecenas quis sapien eu massa rhoncus rhoncus. Suspendisse non sem ut elit posuere congue. Mauris fermentum eleifend tincidunt. Maecenas et tortor a ligula pellentesque euismod suscipit eget est. Suspendisse potenti. Donec sagittis, nulla at consequat accumsan, libero ante fermentum est, at hendrerit tortor orci vitae nisi. Cras at urna velit, eu ornare felis. Nunc laoreet nunc sed nisi tincidunt porta. Aliquam adipiscing aliquam eleifend.
</div>
</div>
</body>
</html>
Gewijzigd op 12/02/2012 23:04:28 door Kris Peeters
