[img] wordt niet goed geplaatst
Ik wil in mijn layout waar ik weer mee verder ben gegaan onderin van die plaatjes zetten, zoals php-powered en dergelijke.
hoe dan ook, in de footer van mijn layout wil ik alle tekst en plaatjes ongeveer op dezelfde lijn, zie dit plaatje.
Mijn vraag dus, moet ik dit nou via css doen? (zoja, zal ik hier dan wat code plaatsen?)
Ik hoop dat jullie me kunnen/willen helpen..
Alvast bedankt,
Chris
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Plaatje hier
tekst hier
en anders
Tekst hier
plaatje hier
of hier :S
tekst hier
en anders
Tekst hier
plaatje hier
of hier :S
Edit:
in code tags gezet
Gewijzigd op 01/01/1970 01:00:00 door Chris
Je kan de tekst ook in een span stoppen, dat werkt misschien makkelijker?
Hoe heb je de code nu, incl. css?
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div id="footer">
<div id="copyleft"><p>© 2007 <a href="http://hosting.scriptersdomein.nl/">Zeeuwse-Hosting</a></div>
<div id="copyright"><p><a href="?p=5">Disclaimer</a> <img src="images/php.png" width="80" height="15" alt="PHP-Powered"></div>
</div>
<div id="copyleft"><p>© 2007 <a href="http://hosting.scriptersdomein.nl/">Zeeuwse-Hosting</a></div>
<div id="copyright"><p><a href="?p=5">Disclaimer</a> <img src="images/php.png" width="80" height="15" alt="PHP-Powered"></div>
</div>
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
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
#copyright {
float:right;
width:278px;
background-color:#2D65FF;
height:27px;
padding-top:5px;
}
#copyright p{
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:none;
text-align:right;
padding-right:35px;
}
#copyright a{
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:underline;
}
#copyright a:hover{
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:none;
}
#copyright img{
padding-top:5px;
}
float:right;
width:278px;
background-color:#2D65FF;
height:27px;
padding-top:5px;
}
#copyright p{
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:none;
text-align:right;
padding-right:35px;
}
#copyright a{
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:underline;
}
#copyright a:hover{
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:none;
}
#copyright img{
padding-top:5px;
}
Het kan heel goed dat ik iets fouts doe, ik ben geen css expert :P
Bedankt voor je hulp Kasper!
font-family:"Trebuchet MS";
font-size:11px;
color:#fff;
font-weight:normal;
text-decoration:none;
text-align:right;
padding-right:35px;
height:20px;
Probeer het zo eens..
Pas dan ook overal in die balk die height aan..
(Stel het af op gewenste hoogte)
MVG
Edit:
(en ??)
(en ??)
Gewijzigd op 01/01/1970 01:00:00 door Wouter K
Laatste gok voeg dit toe..
aan de copyright p.
als het toch aan de tekst ligt..
Anders ga ik een gok wagen op de plaatjes maar zet mss beter je tekst gelijk met img en niet de img met tekst
heb je al met deze padding en margin gespeelt
daar bedoel ik mee..als je er mee speelt geef dan eens een overdreven px op
#copyright img{
padding-top:150px;
}
Gewijzigd op 01/01/1970 01:00:00 door Wouter K
Misschien nog gebruik maken van text-align.
Code (php)
1
2
3
2
3
img #footerimg{
margin-top:2px;
}
margin-top:2px;
}
beetje met de margin-top spelen (1px, 3px enz.) en je moet hem goed kunnen krijgen.
Code (php)
1
2
3
2
3
#copyleft {
float: left;
}
float: left;
}
Groet, Barry
Gewijzigd op 01/01/1970 01:00:00 door Hein van der Wal
Heb je hier wat aan?
CSS:
#footer {
width: 750px;
height: 40px;
border: solid 3px;
border-color: #FF0000;
background-color: #2D65FF;
}
#color {
height: 10px;
background-color: #FFFFFF
}
#copyleft{
width: 415px;
height: 20px;
border: solid 0px; border-color: #FFCC00;
padding-top: 20px;
padding-left:35px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
font-weight:normal;
}
#copymiddle {
position: relative;
top: -43px;
left: 450px;
width: 100px;
height: 20px;
border: solid 0px; border-color: #000000;
padding-top: 22px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
font-weight:normal;
}
#copyright {
position: relative;
top: -86px;
left: 550px;
width: 100px;
height: 20px;
border: solid 0px; border-color: #33CC00;
padding-top: 23px;
padding-left:35px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
font-weight:normal;
}
a:link {
padding-left: 35px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
font-weight:normal;
text-decoration: underline;
}
a:visited {
padding-left: 35px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
font-weight:normal;
text-decoration: underline;
}
a:active{
padding-left: 35px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
font-weight:normal;
text-decoration: underline;
}
a:hover {
padding-left: 35px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
font-weight:normal;
text-decoration: underline;
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>PHP forum</title>
<link href="chris.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="footer">
<div id="color">
<div id="copyleft">© 2007<a href="http://hosting.scriptersdomein.nl/">Zeeuwse-Hosting</a></div>
<div id="copymiddle"><a href="">Disclaimer</a></div>
<div id="copyright"><img src="php.png" width="80" height="15" alt="PHP-Powered"></div>
</div>
</div>
</body>
</html>
Werkt goed in IE. FF en Opera. Bij vergroten van het beeld geeft IE problemen. Is het daarom niet handiger zo'n footer in Phtoshop te maken?