De paginaindeling wil niet lukken.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Dalando De Zuil

Dalando De Zuil

30/06/2010 09:38:04
Quote Anchor link
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#header{
  position: relative;
  margin: 0px auto;
  width: 600px;
  top: 0;
  border-style:solid;
  border-color:red;
  border-width:2px;
  background-color: #001331;
  color:white;
  
}

#menu{
  border-style:solid;
  border-color:green;
  border-width:2px;
  aglin:left;
}
Zopa{
  border-style:solid;
  border-color:green;
  border-width:2px;
  aglin:right;
}

body{
font: 10px verdana, tahoma, arial, sans-serif;
color: white;
background-color: #001331;
text-align:center;

}
</style>

<body>
<div id="header">Header</div>
<div id="menu">
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
<a href="#">LINK</a><br>
</div><div id="Zopa">main</div>

</body>
</html>


Met deze code wil ik deze indeling maken:
Afbeelding

Maar als ik de body naast het menu wil zetten loop ik al vast. De header verdwijnt als het ware en het menu komt ipv de header. nu vraag ik jullie dus mij te helpen met het creeeren van de juiste css code voor mijn pagina. Alvast bedankt!
Gewijzigd op 30/06/2010 09:39:56 door Dalando De Zuil
 
PHP hulp

PHP hulp

29/03/2024 02:12:58
 
Chris -

Chris -

30/06/2010 10:16:08
Quote Anchor link
Je CSS (zopa) is niet goed ;-)
 
Arjan -

Arjan -

30/06/2010 10:17:15
Quote Anchor link
Chris Horeweg op 30/06/2010 10:16:08:
Je CSS (zopa) is niet goed ;-)


Toch? Maar gebruik in plaats van align het float attribuut: http://www.w3schools.com/css/pr_class_float.asp

En gebruik overflow: hidden; op de parent holder van de floated element.

Ik raad je aan om voor het linker menu en advertentieruimte een aparte div omheen te zetten die je een float: left; mee geeft. De body geef je dan een float: right mee. Hierdoor hoef je het linker menu en de advertentie holder geen float meer mee te geven.
Gewijzigd op 30/06/2010 10:19:15 door Arjan -
 
Dalando De Zuil

Dalando De Zuil

30/06/2010 10:18:06
Quote Anchor link
Wat is er dan fout aan?
 
Chris -

Chris -

30/06/2010 10:18:53
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
Zopa{
  border-style:solid;
  border-color:green;
  border-width:2px;
  aglin:right;
}


Zopa is niet gedefinieerd; geen . of # te vinden
Border style/color/width kan in één tag:
border: 2px solid green;

Aglin moet zijn align
 
Dalando De Zuil

Dalando De Zuil

30/06/2010 10:21:49
Quote Anchor link
#menu{
border: 2px solid orange;
align:left;
}

#zopa{
border: 2px solid green;
align:right;
}


Met deze CSS code, blijft het nogsteeds hetzelfde.
 
Chris -

Chris -

30/06/2010 10:22:50
Quote Anchor link
Arjen - op 30/06/2010 10:17:15:

Toch? Maar gebruik in plaats van align het float attribuut: http://www.w3schools.com/css/pr_class_float.asp

En gebruik overflow: hidden; op de parent holder van de floated element.

Ik raad je aan om voor het linker menu en advertentieruimte een aparte div omheen te zetten die je een float: left; mee geeft. De body geef je dan een float: right mee. Hierdoor hoef je het linker menu en de advertentie holder geen float meer mee te geven.


Hier al naar gekeken?
 
Dalando De Zuil

Dalando De Zuil

30/06/2010 10:28:34
Quote Anchor link
EDIT-----

Ik heb nu een nieuwe code:
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
#header{
  position: relative;
  margin: 0px auto;
  width: 500px;
  top: 0;
}

#page{
width: 900px;
border: 1px solid black;

#bmain{
float:right;
 
}

#left{
float: left;
width:200px;
}

#menu{
width:198px;
}

#ad{
width:198px;
}

body{
font-family: Arial,Helvetica,sans-serif;
color: black;
text-align:center;
background-color: white;
}


en

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<body>
<div id="page">
<div id="header">header</div>
<div id="left">
<div id="menu">menu</div>
<div id="ad">ad</div>
</div>
<div id="bmain">main</div>
</div>


Maar nu komt de css maar half door. De tekst CSS werkt niet (ik krijg nogsteeds times new roman terwijl ik toch echt om arial vraag) en de float right werkt niet.
Gewijzigd op 30/06/2010 11:32:24 door Dalando De Zuil
 
Kitty N

kitty N

30/06/2010 11:42:30
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
#page{
width: 900px;
border: 1px solid black;


Je sluit je #page niet af.
 
Dalando De Zuil

Dalando De Zuil

30/06/2010 12:05:14
Quote Anchor link
Het werkt, bedankt allemaal!
 
Dalando De Zuil

Dalando De Zuil

30/06/2010 13:19:25
Quote Anchor link
Ik heb nu weer een probleem:
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
#header{
  position: relative;
  margin: 0px auto;
  width: 500px;
  top: 0;
}

#page{
width: 900px;
border: 1px solid black;
}

#bmain{
float:right;
}

#left{
float: left;
width:200px;
}

#menu{
width:198px;
}

#ad{
width:198px;
}

body{
font-family: Arial,Helvetica,sans-serif;
color: black;
text-align:center;
background-color: white;
}



Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<div id="page">
<div id="header">header</div>
<div id="left">
<div id="menu">mmenu</div>
<div id="ad">adspace</div>
</div>
<div id="bmain">hoofdpagina
</div>
</div>


Nu zou het moeten werken: niet dus. De border (van page) stopt waar de header stopt. wat is hier aan de hand en wat kan ik er aan doen?
 
Joakim Broden

Joakim Broden

30/06/2010 13:43:06
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
#page{
  width: 900px;
  border: 1px solid black;
  overflow: hidden;
}


De page rekt niet met de content mee ivm de floating delen. Zet dus een overflow: hidden; in je css bij #pagina.

EDIT: Voortaan beetje beter de reacties lezen, antwoord was allang gegeven...
Arjen - op 30/06/2010 10:17:15:
En gebruik overflow: hidden; op de parent holder van de floated element.
Gewijzigd op 30/06/2010 13:46:15 door Joakim Broden
 
Dalando De Zuil

Dalando De Zuil

30/06/2010 14:58:01
Quote Anchor link
Oetzie en mijn achternaam op 30/06/2010 13:43:06:
EDIT: Voortaan beetje beter de reacties lezen, antwoord was allang gegeven...
Arjen - op 30/06/2010 10:17:15:
En gebruik overflow: hidden; op de parent holder van de floated element.


Sorry, had ik over het hoofd gelezen!
 
Dalando De Zuil

Dalando De Zuil

02/07/2010 14:44:03
Quote Anchor link
css code
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
#header{
  position: relative;
  margin: 0px auto;
  width: 900px;
  top: 0;
  background-color:white;
}

#page{
width: 900px;
border:1px solid black;
overflow: hidden;
  background-color:white;
}

#bmain{
float:right;
width:700px;
   background-color:white;
}

#left{
float: left;
width:200px;
  background-color:white;
}

#menu{
width:198px;
  background-color:white;
}

#ad{
width:198px;
  background-color:white;
}

body{
font-family: Arial,Helvetica,sans-serif;
color: black;
text-align:center;
background-color:#99D9EA;
}


html-codes
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
<div id="page">
 <div id="header"><!--header + logo--></div>
 <div id="left">
  <div id="menu"><!-- hier zit het menu--></div>
  <div id="ad">
    <!-- hier zit een advertentie -->
  </div>
 </div>
 <div id="bmain">

       <!-- main pagina-->

 </div>
</div>
</body>
</html>


Nu heb ik weer een probleem: nou wil ik er nog een Footer bij, die in 'page' moet zitten. maar nu heb ik 'bottom: 0px;' wel geprobeert, maar die komt nu onder bmain. kijk maar naar het plaatje:

Afbeelding

Hoe krijg ik dit in CSS voor elkaar?
edit:(note: bmain verandert van grootte, hangt er vanaf hoe groot de inhoud van de pagina is.)
Gewijzigd op 02/07/2010 14:48:12 door Dalando De Zuil
 

02/07/2010 14:47:25
Quote Anchor link
Volgens mij moet je aan de footer clear:both css mee geven, maar ik heb je code niet bekeken, dus kan het mis hebben.
 
Dalando De Zuil

Dalando De Zuil

02/07/2010 14:52:46
Quote Anchor link
ik heb het net even snel getest in de w3schools tryit editor (waar het werkte), ga het nu op mijn FTP checken.
ik edit wel met resultaten!
 



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.