CSS - subcontent inzetten
Edit:
De code is aangepast op 20:21 7-09-2006
De code is aangepast op 20:21 7-09-2006
#css code
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
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
* {
padding : 0;
margin : 0;
}
html {
height : 100%;
width : 100%;
}
body {
height : 100%;
width : 100%;
background-color : #f00;
color : #000;
}
#container {
position : relative;
min-height : 100%; //IE wil graag height zien en geen min-height
margin : 0 10%;
background-color : #fff;
background-image : url(images/background.jpg);
background-repeat : repeat-y;
background-position : right;
}
#header {
position : relative;
width : 100%;
height : 50px;
background-color : #00f;
}
#menu {
position : relative;
width : 100%;
height : 35.6px;
background-color : #0f0;
}
#content {
padding : 5px;
padding-right : 220px;
padding-bottom : 35px;
}
#subcontent {
float: right;
width: 215px;
margin-top : -40px;
}
#footer {
position : absolute;
bottom : 0;
height : 30px;
width : 100%;
background-color : #0ff ;
}
padding : 0;
margin : 0;
}
html {
height : 100%;
width : 100%;
}
body {
height : 100%;
width : 100%;
background-color : #f00;
color : #000;
}
#container {
position : relative;
min-height : 100%; //IE wil graag height zien en geen min-height
margin : 0 10%;
background-color : #fff;
background-image : url(images/background.jpg);
background-repeat : repeat-y;
background-position : right;
}
#header {
position : relative;
width : 100%;
height : 50px;
background-color : #00f;
}
#menu {
position : relative;
width : 100%;
height : 35.6px;
background-color : #0f0;
}
#content {
padding : 5px;
padding-right : 220px;
padding-bottom : 35px;
}
#subcontent {
float: right;
width: 215px;
margin-top : -40px;
}
#footer {
position : absolute;
bottom : 0;
height : 30px;
width : 100%;
background-color : #0ff ;
}
De menu etc is even weggehaald anders moest ik het er inplanten, maar ik weet zeker dat dat goed is.
#html code
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
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
<!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="nl" lang="nl">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<title>EHV Dames 1 +++ PHP(parse)Titel +++ </title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iestyle.css" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
//Voor probleem 1, voor 2 moet je de text tussen content naar subcontent plakken.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vitae lectus quis sapien facilisis nonummy. Nulla massa libero, congue eu, ultricies vitae, commodo sit amet, justo. Suspendisse odio. Morbi ullamcorper. Nulla facilisi. Fusce rhoncus, ipsum sed laoreet sagittis, enim augue pellentesque eros, eget euismod nisl quam a leo. Ut nunc. Duis quis metus. Cras vitae pede. Nulla eu tellus. Mauris placerat semper pede. Aenean elementum convallis ligula. Proin facilisis metus a ligula. Aenean nisi tortor, posuere id, ullamcorper sed, placerat ac, massa. Vivamus leo risus, ornare in, mollis nec, tincidunt at, mi. In gravida dolor eget odio.
Quisque a lectus. In tempor elit non dui. Donec varius, augue in scelerisque rhoncus, nibh urna malesuada libero, ac laoreet augue urna sed nibh. Sed nec urna sit amet augue auctor pellentesque. Duis pharetra. Sed viverra lacinia risus. Sed leo. Nam id nibh. Morbi id turpis id diam hendrerit blandit. Sed urna sem, lobortis in, venenatis id, venenatis ut, tellus. Aliquam iaculis, tellus quis vestibulum sodales, dolor mi fermentum tortor, et viverra leo velit eu nunc. Aenean et dui nec metus iaculis lobortis. Nullam sit amet urna sit amet turpis venenatis euismod. Aliquam mauris. Curabitur sollicitudin aliquet mauris.
Sed nulla risus, vehicula eget, rutrum non, tempus nec, nisl. Etiam pulvinar. Nullam venenatis sollicitudin ligula. Sed dui turpis, eleifend ut, iaculis id, vehicula vel, orci. Sed ante arcu, volutpat non, egestas ac, elementum eu, justo. Phasellus sit amet magna ac lacus sodales ultrices. Nullam fermentum sodales urna. Donec venenatis, nulla eu venenatis cursus, massa elit sagittis urna, a sollicitudin arcu nunc nec est. Vivamus accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum non nisi. Donec euismod magna vel libero. Nam fermentum luctus magna. Etiam pede. Pellentesque vulputate lobortis magna. Sed tincidunt urna quis justo. Ut blandit, nisl porta blandit consequat, urna pede rutrum velit, sed placerat ante tortor a ligula. Donec vel nibh. Maecenas eleifend. Fusce pretium purus at nisi vulputate pellentesque.
Curabitur nulla pede, interdum non, porta sed, tempor vel, lectus. Donec eu nunc. Nam id elit. Integer iaculis consectetuer dolor. Vivamus blandit rhoncus nunc. Pellentesque fringilla est et magna. Ut hendrerit ligula. Aenean fringilla justo eget nulla. Nulla dignissim tellus eget risus. Nunc viverra vestibulum nulla.
Praesent lacinia. Maecenas non enim. Phasellus vel elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc nisi nisl, ultrices vitae, sollicitudin at, auctor id, sapien. Morbi fermentum leo a enim. Donec sagittis. Nulla facilisi. Donec pellentesque magna at mi. Maecenas magna nunc, laoreet eu, sagittis vel, mollis vel, sem. Cras feugiat libero. Vivamus tincidunt, nibh nec congue adipiscing, velit ipsum luctus libero, semper euismod orci nunc sed sapien. Ut porttitor. Vestibulum consequat lectus pretium leo. Praesent ac nisi non arcu dignissim tincidunt. Mauris tellus magna, aliquam id, accumsan eu, consectetuer a, urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div id="subcontent">
hi
</div>
<div id="footer">
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>EHV Dames 1 +++ PHP(parse)Titel +++ </title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iestyle.css" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
//Voor probleem 1, voor 2 moet je de text tussen content naar subcontent plakken.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vitae lectus quis sapien facilisis nonummy. Nulla massa libero, congue eu, ultricies vitae, commodo sit amet, justo. Suspendisse odio. Morbi ullamcorper. Nulla facilisi. Fusce rhoncus, ipsum sed laoreet sagittis, enim augue pellentesque eros, eget euismod nisl quam a leo. Ut nunc. Duis quis metus. Cras vitae pede. Nulla eu tellus. Mauris placerat semper pede. Aenean elementum convallis ligula. Proin facilisis metus a ligula. Aenean nisi tortor, posuere id, ullamcorper sed, placerat ac, massa. Vivamus leo risus, ornare in, mollis nec, tincidunt at, mi. In gravida dolor eget odio.
Quisque a lectus. In tempor elit non dui. Donec varius, augue in scelerisque rhoncus, nibh urna malesuada libero, ac laoreet augue urna sed nibh. Sed nec urna sit amet augue auctor pellentesque. Duis pharetra. Sed viverra lacinia risus. Sed leo. Nam id nibh. Morbi id turpis id diam hendrerit blandit. Sed urna sem, lobortis in, venenatis id, venenatis ut, tellus. Aliquam iaculis, tellus quis vestibulum sodales, dolor mi fermentum tortor, et viverra leo velit eu nunc. Aenean et dui nec metus iaculis lobortis. Nullam sit amet urna sit amet turpis venenatis euismod. Aliquam mauris. Curabitur sollicitudin aliquet mauris.
Sed nulla risus, vehicula eget, rutrum non, tempus nec, nisl. Etiam pulvinar. Nullam venenatis sollicitudin ligula. Sed dui turpis, eleifend ut, iaculis id, vehicula vel, orci. Sed ante arcu, volutpat non, egestas ac, elementum eu, justo. Phasellus sit amet magna ac lacus sodales ultrices. Nullam fermentum sodales urna. Donec venenatis, nulla eu venenatis cursus, massa elit sagittis urna, a sollicitudin arcu nunc nec est. Vivamus accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum non nisi. Donec euismod magna vel libero. Nam fermentum luctus magna. Etiam pede. Pellentesque vulputate lobortis magna. Sed tincidunt urna quis justo. Ut blandit, nisl porta blandit consequat, urna pede rutrum velit, sed placerat ante tortor a ligula. Donec vel nibh. Maecenas eleifend. Fusce pretium purus at nisi vulputate pellentesque.
Curabitur nulla pede, interdum non, porta sed, tempor vel, lectus. Donec eu nunc. Nam id elit. Integer iaculis consectetuer dolor. Vivamus blandit rhoncus nunc. Pellentesque fringilla est et magna. Ut hendrerit ligula. Aenean fringilla justo eget nulla. Nulla dignissim tellus eget risus. Nunc viverra vestibulum nulla.
Praesent lacinia. Maecenas non enim. Phasellus vel elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc nisi nisl, ultrices vitae, sollicitudin at, auctor id, sapien. Morbi fermentum leo a enim. Donec sagittis. Nulla facilisi. Donec pellentesque magna at mi. Maecenas magna nunc, laoreet eu, sagittis vel, mollis vel, sem. Cras feugiat libero. Vivamus tincidunt, nibh nec congue adipiscing, velit ipsum luctus libero, semper euismod orci nunc sed sapien. Ut porttitor. Vestibulum consequat lectus pretium leo. Praesent ac nisi non arcu dignissim tincidunt. Mauris tellus magna, aliquam id, accumsan eu, consectetuer a, urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div id="subcontent">
hi
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Hier is de website waar ik de design heb staan
(AUB geen commentaar over de kleur het is voor mij makkelijker, want ben deelskleurenblind.)
http://misthafalls.no-ip.org/ehvdames1/
Het is tot nu toe nog crossbrowser(getest in FF1.5 en IE6)
hb,
christian bolster
Gewijzigd op 01/01/1970 01:00:00 door CB2thephp
Gesponsorde koppelingen:
sorry voor de vroege bump*
Gewijzigd op 01/01/1970 01:00:00 door CB2thephp
ps. klok van phphulp loopt weer fijn in de toekomst
Gewijzigd op 01/01/1970 01:00:00 door CB2thephp
Edit:
Wegens kleine problemen met mijn vraag heb ik mijn css code aangepast als je nu kijkt bij mijn link wou ik graag de height aanpassen op vol scherm alleen dat doet hij niet in FF. Want ik check eerst in FF en dan in IE(Aangeleerd hehe).
Wegens kleine problemen met mijn vraag heb ik mijn css code aangepast als je nu kijkt bij mijn link wou ik graag de height aanpassen op vol scherm alleen dat doet hij niet in FF. Want ik check eerst in FF en dan in IE(Aangeleerd hehe).
Gewijzigd op 01/01/1970 01:00:00 door CB2thephp
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div id="content">
Content
</div>
<div id="tussen">
tussen
</div>
<div id="subcontent">
Subcontent
</div>
Content
</div>
<div id="tussen">
tussen
</div>
<div id="subcontent">
Subcontent
</div>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
#content {
height: 100px;
background-color: #fff;
}
#tussen{
height: 10px;
}
#subcontent {
height:100px;
background-color:#000;
}
height: 100px;
background-color: #fff;
}
#tussen{
height: 10px;
}
#subcontent {
height:100px;
background-color:#000;
}
Dat kan misschien nog een probleem worden denk ik.
ik heb redelijk een css site inmekaar gezet alleen als ik dus text in het content gedeelte zet en de text is langer dan de breedte van die "kolom" dan loopt de tekst gewoon door maar niet zichtbaar. Ik wil dat net zoals met tabellen de tekst word onderbreken en verder gaat op de volgende regel.
Is dit mogelijk alvast bedankt voor de reactie.
doet beetje pijn aan me ogen :'(
heb helaas geen oplossing
He jonges 3X scheepsrecht he :D
Gewijzigd op 01/01/1970 01:00:00 door CB2thephp
devon:
jezus mina wat een kleuren!
doet beetje pijn aan me ogen :'(
heb helaas geen oplossing
doet beetje pijn aan me ogen :'(
heb helaas geen oplossing
Quote:
(AUB geen commentaar over de kleur het is voor mij makkelijker, want ben deelskleurenblind.)
Lees a.u.b. ;-)
Kleurenblindheid is al lastig genoeg ;-)
devon:
jezus mina wat een kleuren!
doet beetje pijn aan me ogen :'(
heb helaas geen oplossing
doet beetje pijn aan me ogen :'(
heb helaas geen oplossing
Ik quote even:
(AUB geen commentaar over de kleur het is voor mij makkelijker, want ben deelskleurenblind.)
Dus een beetje jammer he, had het hele topic gelezen, dan had je geweten waarom die kleurencombinatie wordt gebruikt!
Uiterest jammer had het leuker gevonden het in totaal met css te doen.
Als je toch een oplossing hebt kun je die dan met me delen en andere natuurlijk.
Gewijzigd op 01/01/1970 01:00:00 door CB2thephp
Dit kan je gewoon met CSS doen hoor.
gebruik float om 2 divs naast elkaar te gebruiken.
Kijk een hier:
http://css.maxdesign.com.au/floatutorial/index.htm
Hartstikke bedankt Kalle.
Edit:
Heb net het hele website gelezen jemig wat veel. Ik geloof dat ik misschien nu het probleem kan gaan oplossen. Ik ga natuurlijk later het antwoord ook laten zien hoe het is geworden met de divs etc.
Heb net het hele website gelezen jemig wat veel. Ik geloof dat ik misschien nu het probleem kan gaan oplossen. Ik ga natuurlijk later het antwoord ook laten zien hoe het is geworden met de divs etc.
Gewijzigd op 01/01/1970 01:00:00 door CB2thephp
Maar wat jij wilt is erg simpel, dat kan je zo ergens vinden. Maar kijk maar rond wat je leert er veel van.
doen?
GR. mebus
Ik ga morgen bezig met de website, maar nu ga ik na bed, want morge tja school he. Het is mijn laatste jaar middelbaar dus.
Allemaal nog een fijne avond
