Toon posts:

Bars rond de website, probleempje!

Pagina: 1
Acties:

zaterdag 19 september 2009 12:08

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Hey mensen, ik heb wat zitten zoeken en proberen maar kom er vooralsnog niet uit.
Ik heb een simpele index, een style.css en wat plaatjes.

Het geheel was een container waarin zat: een header, en onder die header zaten 3 kolommen.
Nu heb ik om die container een nieuwe div gemaakt die ik holder noem. in de holder zit (van rechts naar links)
Een bar (voor rechts)... container (voor het midden).. 2e bar (voor links).

Hoop dat jullie het nog snappen :9
Nu heb ik wat problemen met de rechter bar.
Ook wil ik graag het content gedeelte / container 100% laten doorlopen.

Hier heb ik even alles online gezet: http://hungrygamers.com/div_dex/index.htm

De codes:

index.htm

code:
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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

    <html>
<head>

    <title>Hungrygamers COM</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>

<div id="holder">

    <div id="leftbar"></div>

            <div id="container">

                <div id="top">

                </div>

<div id="leftnav">

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>

</div>

<div id="rightnav">

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>

</div>

<div id="content">

<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

</div>

            </div>

    <div id="rightbar"></div>

</div>

</body>
    </html>


Style.css
code:
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

html, body 
{
height: 100%;
background:#3b3b3b;
margin:0px auto;
padding:0;  
}

#holder
{
height: 100%;
width: 1064px;
margin: 0px auto;

color: #333;
border: 0px solid gray;
line-height: 130%;
}

#container
{
width: 1000px;
margin: 0px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;

}

#leftbar
{
height: 100%;
background-image: url(l-bar.png);
background-position: top center;
background-repeat: repeat-y;

float: left;
width: 34px;
margin: 0px auto;
padding: 0px;
}

#rightbar
{
height: 100%;
background-image: url(r-bar.png);
background-position: top center;
background-repeat: repeat-y;

float: right;
width: 34px;
margin: 0px auto;
padding: 0px;
}

#top
{
width: 1000px;
height: 68px;
padding: .0em;
background-color: #ddd;
border-bottom: 0px solid gray;
background-image: url(header.jpg);
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 145px;
margin: 0;
padding: 5px;
}

#rightnav
{
float: right;
width: 250px;
margin: 0;
padding: 5px;
}

#content
{

margin-height:0 0  -300px;
margin-left: 150px;
border-left: 1px solid gray;
margin-right: 250px;
border-right: 1px solid gray;
padding: 5px;
max-width: 36em;
}



#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }


Ik verwacht zelf dat ik gewoon een dom klein foutje heb gemaakt of iets ben vergeten.
En zal blij zijn als iemand het hier wel ziet :*)

Bedankt :)
Groeten,
Wilbert van Assen.

zaterdag 19 september 2009 12:46

Acties:
  • 0 Henk 'm!
  • MoietyMe
  • Registratie: Juli 2003
  • Laatst online: 26-05 08:10

MoietyMe

zij/haar

Als jer nou een doorlopend plaatje van maakt (dus gewoon een balk met links en rechts die schaduw). En je zet hem als achtergrond van je body dan loopt hij 100% door :)

zaterdag 19 september 2009 12:51

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Bedankt, het is inderdaad een optie om een door lopend plaatje te maken.
Niet dat ik eigenwijs wil zijn, maar is er misschien ook een manier om het wel met 2 bars te doen?
Ik ga in ieder geval even kijken als het met 1 plaatje gewoon mooi wil.

Maar dan zit ik nog wel met de vraag als ik het content gedeelte kan laten doorlopen tot het einde (100%).
Ik dacht; dat moet simpel zijn.. ( content- height: 100%; ) maar dat gaat dus niet helemaal op, haha.

Bedankt in ieder geval

zaterdag 19 september 2009 13:00

Acties:
  • 0 Henk 'm!
  • macciez
  • Registratie: Maart 2008
  • Laatst online: 05-09 20:31

macciez

Wat is precies je probleem? Ik bekijk je voorbeeld en zie 2 dingen die niet helemaal kloppen.
Je balk links loopt slechts tot einde viewport en je 2e balk heeft dezelfde hoogte maar begint pas onder de andere divs.
Als je die rechter balk iets minder breed maakt, dan past ie denk ik wel naast je container en zou het 2e probleem moeten zijn opgelost.
Dat die beide balken slechts de viewport (heet dat eigenlijk zo?) hoog zijn, is een vaak gemaakte fout. 100% betekend namelijk (jammergenoeg) niet automatisch 100% van je pagina, maar van wat je monitor laat zien.
Je zou eens kunnen zoeken op "faux columns", daar wordt het 1 en adner uitgelegd

[ Voor 3% gewijzigd door macciez op 19-09-2009 13:00 ]

Do what you love, do it often

zaterdag 19 september 2009 13:03

Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Hey kijk daar heb ik wat aan :D bedankt!
Ga gelijk even kijken en lezen.

Jullie horen van me ^^
Groeten.

_____________________________________________________________________

Edit: Alles is gelukt danzij jullie hulp! Bedankt _/-\o_

de divs: leftbar en rightbar zijn weg. de div: holder zorgt nu voor de bars.
de div: holder zorgt ook het doortrekken van de Background tot het einde.
Bedankt jongens!

Omdat er vast meer mensen zijn die problemen hebben met zulk soort dingen, dit is de nieuwe..

Index.htm
code:
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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

    <html>
<head>

    <title>Hungrygamers COM</title>
    <link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>

<div id="holder">

    

            <div id="container">

                <div id="top">

                </div>

<div id="leftnav">

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>

</div>

<div id="rightnav">

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>

</div>

<div id="content">

<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>




</div>

            </div>

    

</div>

</body>
    </html>


Style.css
code:
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

html, body 
{
height: 100%;
background:#3b3b3b;
margin:0px auto;
padding:0;
}

#holder
{
background-image: url(bar.png);
background-position: top center;
background-repeat: repeat-y;

position: relative;
min-height: 100%;


width: 1064px;
margin: 0px auto;

padding:0;


color: #333;
border: 0px solid gray;
line-height: 130%;
}

#container
{
height: 100%;
width: 1000px;
margin: 0px auto;
background-image: url(sp.png);

color: #333;
border: 0px solid gray;

}



#top
{
width: 1000px;
height: 68px;
padding: .0em;
background-color: #ddd;
border-bottom: 0px solid gray;
background-image: url(header.jpg);
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 145px;
margin: 0;
padding: 5px;
}

#rightnav
{
float: right;
width: 250px;
margin: 0;
padding: 5px;
}

#content
{

margin-height:0 0  -300px;
margin-left: 150px;
border-left: 1px solid gray;
margin-right: 250px;
border-right: 1px solid gray;
padding: 5px;
max-width: 36em;
}



#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }


Er zitten misschien nog wat schoonheidsfoutjes in, maar het werkt. dus ik ben blij :*)

[ Voor 96% gewijzigd door Verwijderd op 19-09-2009 15:48 ]

Reageer

Apple iPhone 16e LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq