Tekst positioneren in CSS

Status
Niet open voor verdere reacties.
M

Martin V

Gebruiker
Lid geworden
4 feb 2002
Berichten
20
Beste,

Ik probeer al enige tijd tekst te positioneren in de footer van een template. Het volgende is de bedoeling (alles op 1 regel):

1 - geheel links: link naar email-adres (dit werkt)
2 - midden: link naar website extern (krijg ik niet voor elkaar)
3 - geheel rechts: Copyright tekst (dit werkt)

TEMPLATE
<!-- ##### Footer ##### -->

<div id="footer">
<div class="left">
Info: <a href="mailto:{%@ContactEmail%}">{%@ContactEmail%}</a>
</div>

<div class="center"> Ik weet niet hoe ik dit moet doen?

<div class="right">
&copy; {%@CopyrightYears%} {%@CompanyName%}
</div>
</div>

CSS
/* ##### Footer ##### */

#footer {
color: white;
background-color: rgb(100,135,220);
font-size: 91%;
margin: 0;
padding: 1em 2.5mm 2.5ex 2.5mm;
clear: both;
}

#footer .left {
line-height: 1.45em;
float: left;
clear: left;
}

#footer .center { <div class="center"> Ik weet niet hoe ik dit moet doen?

#footer .right {
text-align: right;
line-height: 1.45em;


Bij voorbaat bedankt!


Bedankt
 
PHP: 
 <style type="text/css" media="screen">
/* ##### Footer ##### */

#footer {
color: white;
background-color: rgb(100,135,220);
font-size: 91%;
margin: 0;
padding: 5px;;

width:100%;

}

#footer .left {
line-height: 1.45em;
float: left;
width:150px;
}

#footer .center { 
border:2px solid #ff0000;
width:150px;
text-align:center;
float:left;
margin: 0 0 0 200px;
}
#footer .right {
text-align: right;
line-height: 1.45em;
width:150px;
float:right;
</style>
</head>

<body >

<div id="footer">
<div class="left">
Info: <a href="mailto:ik@ik.nl">emailadres links</a>
</div>
<div class="center"> in het midden
</div>
<div class="right">
&copy; naam rechts}
</div>
</div>
 
Beste Peter,

Bedankt voor je snelle response!

Het werkt inderdaad. Ik heb nog wel een tweetal vragen:
- Het rechter deel valt net buiten de website waardoor ik een horizontale scrollbalk krijg
- Hoe kan ik het middelste deel bij het verkleinen van het window in het midden mee laten lopen?
 
Deze werkt, denk ik dan toch.

HTML: 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
	<head>
	<title>(Type a title for your page here)</title>
<!--Pagina gemaakt op Thursday, January 03, 2008 13:01:46 -->
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="description"  CONTENT="korte beschrijving van de pagina">
<meta name="keywords"  CONTENT="trefwoorden, die, slaan, op, de, pagina">
<meta name="publisher" CONTENT="Jan Jansen">
<meta name="Author" content="Peter Vazed">
<meta name="robots" content="index, follow">
<meta name="revisit" content="7 days">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css" media="all">
 @import url("zp.css"); 
</style>
		 
<LINK rel="stylesheet" type="text/css" href="zp.css">

 <style type="text/css" media="screen">
 body
{
margin: 0;
padding: 0;
}

/* ##### Footer ##### */

#footer {
color: white;
background-color: rgb(100,135,220);

border:2px solid #ff0000;
}

#footer .left {

position:relative;
top:25px;
width:150px;
left:20px;
border:2px solid #ff0000;
}

#footer .center { 
width:250px;
text-align:center;
margin-left: auto;
margin-right: auto;
border:2px solid #ff0000;

}

#footer .right {
text-align: right;

width:150px;
float:right;

border:2px solid #ff0000;
position:relative;
top:-25px;
right:25px;
}
</style>
</head>

<body >

<div id="footer">
<div class="left">
Info: <a href="mailto:ik@ik.nl">emailadres links</a>
</div>
<div class="center"> in het midden
</div>
<div class="right">
&copy; naam rechts}
</div>
</div>


</body>

</html>

Vermits je met de breedte problemen had dit altijd in je pagina opnemen:
- Het rechter deel valt net buiten de website waardoor ik een horizontale scrollbalk krijg
Klik om te vergroten...
body
{
margin: 0;
padding: 0;
}

:cool:
 
Beste Peter,

Nogmaals bedankt voor je response. Ik ga dit zsm verwerken.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan