css blok uitlijnen op achtergrond probleem
Ik heb een gecentreerde tabel gemaakt met hierin een achtergrondfoto voor een site, deze is bewust 1990 px breed omdat er een gedeelte niet altijd zichtbaar hoeft te zijn( de buitenzijden is een balk die dan alleen zichtbaar is bij bepaalde monitor resolutie's. Tot zover Prima geen probleem, dit werkt. op deze achtergrond is op een bepaalde plaats een link gestuurd css block geplaatst die qua uitlijning precies moet kloppen met de achtergrond. Hier begint het probleem.
ik kan deze css blok uitlijnen voor internet explorer of mozilla maar als ik hem in de ene uitlijn staat hij in de ander fout. Het verschil is boven 1 px en rechts 3 px.(zeer weinig dus)Wie helpt mij verder ?
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
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="page">
<tr>
<td height="820"><div id="example2">
<ul id="menu2">
<a href="#">test1<span class="text"><br /> dit is een testbericht</span>
</a><br />
<a href="#">test2<span class="text"><br /> More about our team</span>
</a><br />
<a href="#">test3<span class="text"><br /> See what are we good at</span>
</a>
</ul></div> </td>
</tr>
</table>
<tr>
<td height="820"><div id="example2">
<ul id="menu2">
<a href="#">test1<span class="text"><br /> dit is een testbericht</span>
</a><br />
<a href="#">test2<span class="text"><br /> More about our team</span>
</a><br />
<a href="#">test3<span class="text"><br /> See what are we good at</span>
</a>
</ul></div> </td>
</tr>
</table>
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
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
body {
margin-top: 0px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 0px;
}
.page {
background-image: url(../achtergrond/achtergrond1.jpg);
background-repeat: no-repeat;
background-position: center -9px;
overflow: hidden;
}
#example2 {
position:relative;
width: 100%;
left: 980px;
top: -149px;
}
#menu2 li {
display:inline;
}
#menu2 a .text{
display:none;
}
#menu2 a:hover .text {
display:block;
position:absolute;
top:-44px;
color:#000;
font-size:12px;
background-color: #FFFC80;
height:196px;
width: 197px;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
left: -168px;
}
margin-top: 0px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 0px;
}
.page {
background-image: url(../achtergrond/achtergrond1.jpg);
background-repeat: no-repeat;
background-position: center -9px;
overflow: hidden;
}
#example2 {
position:relative;
width: 100%;
left: 980px;
top: -149px;
}
#menu2 li {
display:inline;
}
#menu2 a .text{
display:none;
}
#menu2 a:hover .text {
display:block;
position:absolute;
top:-44px;
color:#000;
font-size:12px;
background-color: #FFFC80;
height:196px;
width: 197px;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
left: -168px;
}
Gewijzigd op 17/12/2010 22:57:55 door Michel D
En even antwoord op je vraag:
IE hanteert andere standaard margin/paddings dan andere browsers. Het is dus altijd goed om bovenin je CSS een margin/padding reset te doen:
Code (php)
1
2
3
4
2
3
4
* { /* Sterretje betekend alle elementen */
margin: 0;
padding: 0;
}
margin: 0;
padding: 0;
}
Daarnaast is het niet de bedoeling om tabellen voor je design/lay-out te gebruiken. Je kan beter divs gebruiken.
Gewijzigd op 17/12/2010 22:53:43 door Wouter J
En ik heb ook geprobeerd om mijn design in een div layer te zetten maar omdat deze 1990px breed is krijg ik deze niet niet gecentreerd, tevens mag de achtergrond wel verticaal maar niet horizontaal scrollen en dat lukt met bovenstaande code wel.
gebruikte code voor: div layer
Code (php)
1
2
3
4
2
3
4
<body>
<div id="laag1">
</div>
</body>
<div id="laag1">
</div>
</body>
css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body {
text-align: center; /* for IE */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#laag1 {
height: 820px;
width: 1990px;
background-image: url(../achtergrond/achtergrond1.jpg);
background-position: center top;
position: relative;
z-index: 1; /* align for good browsers */
text-align: center; /* counter the body center */
padding: 0px;
background-repeat: no-repeat;
}
text-align: center; /* for IE */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#laag1 {
height: 820px;
width: 1990px;
background-image: url(../achtergrond/achtergrond1.jpg);
background-position: center top;
position: relative;
z-index: 1; /* align for good browsers */
text-align: center; /* counter the body center */
padding: 0px;
background-repeat: no-repeat;
}
zoals jullie zien heb ik al vanalles geprobeerd.
Toevoeging op 18/12/2010 11:31:28:
even overnieuw:
Ik heb een achtergrond van 1990x820 px breed deze wil ik gecentreerd weergeven afhankelijk van de gebruikte resolutie mogen de zijkanten wegvallen (hoeft dus niet te scrollen)tot een bepaalde breedte en dan moeten er wel scrolbalken komen.
Ik heb al verschillende manieren geprobeerd maar als een gecentreerde div container breder word dan de schermresolutie dan gaat hij toch van links uit scrollen.
wie o wie.
alvast bedankt!
Gewijzigd op 17/12/2010 23:18:27 door Michel D