Tekst blijft niet gecentreerd
bekijk ik hem echter op mijn 15.4 inch breedbeeld scherm schiet alle tekst te ver naar links..
hoe kan dit en wat is daar aan te doen??
Bassment
bassment schreef op 12.04.2007 19:23:
als het goed is staat het op een normaal scherm nu recht..
Klopt. Dus nu even wachten totdat er phphulpers met een groot scherm langskomen. Heb ik niet helaas.
Ik zal even kijken..
PS: Ik gebruik Firefox!
Het makkelijkste is om een container te gebruiken..
Deze in het midden te zetten.. en dan alles hierin te plaatsen!
Let op: je naamgeving is nou niet echt duidelijk.. Dus misschien heb je dit al wel? Maar is het gewoon onduidelijk..
Nu heb je dus waarschijnlijk alles "perfect" gemaakt voor jou beeldscherm..
Opzetje voor je container:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
body {
text-align: center;
margin: 0;
padding: 0;
}
#container {
margin: 0 auto;
width: 800px;
text-align: left;
}
text-align: center;
margin: 0;
padding: 0;
}
#container {
margin: 0 auto;
width: 800px;
text-align: left;
}
Je moet dan gewoon een divje met id="container" gebruiken!
Ik denk dat je probleem dan al verholpen is.. Als je tenminste die rotzooi met "position : absolute" weg gedaan hebt
nu heb ik het over gezet maar.. nu vallen alle div-tjes onder elkaar terwijl het juist de bedoeling was er 1 over de header te laten lopen..
is hier ook een oplossing voor?
en tevens is de tekst nu net te ver naar links en ziet er ook raar uit omdat de eerste letter door de border loopt..
bassment schreef op 12.04.2007 19:31:
ja ik heb gewoon ie7 en dan staat het ook te ver naar links maar op mij 17 inch klopt het gewoon..
nee wat we bedoelden is scherm resolutie,
ik heb 1400X1050 en alles is gecentreerd
en krijg ik de div layer met het menu niet over de logo div layer heen..
is er een mogelijkheid deze over elkaar te krijgen.
wat de tekst betreft heb ik alle tekst ook gecentreerd dan valt het niet op ;)
Danny Koppel schreef op 12.04.2007 19:38:
Waarom gebruikt iedereen "position: absolute" terwijl het helemaal niet nodig is..
Alsof ik mezelf hoor praten ;-)
ik heb nu beide layers een z-index nummer gegeven maar krijg ze niet over elkaar iemand een tip??
Wat je wilt is echt niet zo vreselijk ingewikkeld, maar ik zou de raad van Danny opvolgen en met zijn eenvoudige opzetje beginnen en dat uitbouwen.
daar komt het op neer..
daar was ik al bang voor..
ik ga eens opnieuw beginnen misschien dat dat wil helpen..
bedankt en tot snel vermoed ik haha
Een goede opzet is deze:
#container {
margin: 0px auto;
width: 800px;
}
div.wrapper {
padding: 10px;
}
en dan in je HTML:
Code (php)
1
2
3
4
5
2
3
4
5
<div id="container">
<div class="wrapper">
// hier je pagina, dus #header, #menu, #content, #footer enz
</div>
</div>
<div class="wrapper">
// hier je pagina, dus #header, #menu, #content, #footer enz
</div>
</div>
netjes alle css aangepast zodat het mijn styl word.
alles lijkt er goed uit te zien en is dus gelukt.
maar... als ik een rolover image maak en deze als link gebruik komt er een achtergrond vulling achter in het blauw terwijl ik deze groen wil hebben of helemaal niet
ik kom er niet achter wat ik nu aan moet passen.. laat ik de link weg blijft het blauw dus daar zit het hem niet in..dus bij deze vraag ik weer jullie hulp..
Edit: OPGELOST!!
dit is de code van mijn rolover link..
Code (php)
1
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contactrolover','','../design107/style/contact2.png',1)"><img src="../design107/style/contact1.png" alt="contact" width="81" height="24" border="0" id="contactrolover" /></a>
en hier mijn color css
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
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
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
body
{ background: #FFFFFF url(back.png) repeat;
color: #57696F;
}
blockquote
{ background: #FFFFFF;
color: #57696F;
border-color: ccff00;
}
#main
{ background: #FFFFFF url(main.png) repeat-y;
color: #57696F;
}
#links, #footer
{ background: #1798E9 url(linkfoot.png);
color: #FFFFFF;
border-color: #57696F;
}
#links a, #footer a, #links a:hover, #footer a:hover
{ background: transparent;
color: #FFFFFF;
}
#logo
{ background: #FFFFFF url(logo.jpg) no-repeat;
color: #57696F;
border-top-color: #57696F;
border-bottom-color: ccff00;
}
#logo h2
{ background: transparent;
color: #CCC;
}
h1
{ background: transparent;
color: ccff00;
border-color: #E1E1E1;
}
#menu
{ background: transparent;
color: #57696F;
}
#menu li a
{ background: #76C9F8;
color: #57696F;
border-color: ccff00;
}
#menu li a:hover, #menu li a#selected, #menu li a#selected:hover
{ background: #ccff00;
color: #FFFFFF;
}
#content, #column2, #column2 a
{ background: #FFFFFF;
color: #57696F;
border-color: #57696F;
}
#column2 a:hover
{ background: #FFFFFF;
color: ccff00;
border-color: ccff00;
}
.sidebaritem
{ background: #F9F9F9;
color: #57696F;
border-color: #E1E1E1;
}
.sbilinks li a, .sidebaritem a
{ background: transparent url(link_arrow.png) no-repeat left center;
color: #57696F;
}
.sbilinks li a:hover, .sidebaritem a:hover
{ background: transparent url(link_arrow_sel.png) no-repeat left center;
color: ccff00;
}
input, textarea
{ background: #FFFFFF;
color: #57696F;
border-color: #E1E1E1;
}
{ background: #FFFFFF url(back.png) repeat;
color: #57696F;
}
blockquote
{ background: #FFFFFF;
color: #57696F;
border-color: ccff00;
}
#main
{ background: #FFFFFF url(main.png) repeat-y;
color: #57696F;
}
#links, #footer
{ background: #1798E9 url(linkfoot.png);
color: #FFFFFF;
border-color: #57696F;
}
#links a, #footer a, #links a:hover, #footer a:hover
{ background: transparent;
color: #FFFFFF;
}
#logo
{ background: #FFFFFF url(logo.jpg) no-repeat;
color: #57696F;
border-top-color: #57696F;
border-bottom-color: ccff00;
}
#logo h2
{ background: transparent;
color: #CCC;
}
h1
{ background: transparent;
color: ccff00;
border-color: #E1E1E1;
}
#menu
{ background: transparent;
color: #57696F;
}
#menu li a
{ background: #76C9F8;
color: #57696F;
border-color: ccff00;
}
#menu li a:hover, #menu li a#selected, #menu li a#selected:hover
{ background: #ccff00;
color: #FFFFFF;
}
#content, #column2, #column2 a
{ background: #FFFFFF;
color: #57696F;
border-color: #57696F;
}
#column2 a:hover
{ background: #FFFFFF;
color: ccff00;
border-color: ccff00;
}
.sidebaritem
{ background: #F9F9F9;
color: #57696F;
border-color: #E1E1E1;
}
.sbilinks li a, .sidebaritem a
{ background: transparent url(link_arrow.png) no-repeat left center;
color: #57696F;
}
.sbilinks li a:hover, .sidebaritem a:hover
{ background: transparent url(link_arrow_sel.png) no-repeat left center;
color: ccff00;
}
input, textarea
{ background: #FFFFFF;
color: #57696F;
border-color: #E1E1E1;
}
Gewijzigd op 01/01/1970 01:00:00 door bassment Rossen