timboiscool
Gebruiker
- Lid geworden
- 27 nov 2008
- Berichten
- 205
Hallo lezers.
Ik ben weer een beetje aan het spelen met css en ben op dit probleem gekomen:
Ik heb een ' float: right; ' die zorgt dat de twee Divs naast elkaar staan en dan ' width:460px; '.
Alleen als ik nu ' text-align: center; ' gebruik dan gebeurt er niets.
Hier is de code:
Let niet op het aarts vogel gedoe dat is onzin ik had alleen wat tekst nodig
Het gedeelte waar dikgedrukt staat: "De aarts vogel is terug!" dat hoor in het midden te staan van het rechter gedeelte.
Hier is een screenshot:
Gr, Tim.
Bedankt.
Ik ben weer een beetje aan het spelen met css en ben op dit probleem gekomen:
Ik heb een ' float: right; ' die zorgt dat de twee Divs naast elkaar staan en dan ' width:460px; '.
Alleen als ik nu ' text-align: center; ' gebruik dan gebeurt er niets.
Hier is de code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="css/index_style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/index_style_IE.css" />
<script type="text/javascript">
</script>
<![endif]-->
</head>
<body background="images/background.bmp">
<div id="main">
<!--HEADER-->
<div id="header">
<img src="images/header.bmp" usemap=#example>
<map name=example>
<area shape=Rect Coords=15,5,165,150 Href="index.php">
</map>
</div>
<!--HEADER MENU-->
<div id="header_nav">
<ul id="nav">
<li id="nav-home"><a href="index.php">Start</a></li>
<li id="nav-about"><a href="info.php">Informatie</a></li>
<li id="nav-archive"><a href="archive.php">archief</a></li>
<li id="nav-reviews"><a href="reviews.php">Gastenboek</a></li>
<li id="nav-contact"><a href="contact.php">Contact</a></li>
</ul>
</div>
<!--BODY-->
<div id="body">
<div id="photo">
<img src="albums/test/test.jpg" class="head-pic"/>
<div id="photo-album">
<img src="albums/test/test.jpg" class="album-pic"/>
<img src="albums/test/test.jpg" class="album-pic-sel"/>
<img src="albums/test/test.jpg" class="album-pic"/>
</div>
</div>
<div id="photo-text">
<a class="title">De aarts vogel is terug!</a><br>
Zoals verteld op het nieuws is de aarts vogel terug in Nederland!<br>
Dit gebeurt elk jaar rond herfst maar nu is de vogel iets eerder!<br>
Dit is natuurlijk een grote grap voor 5 juli!<br>
</div>
</div>
<!--FOOTER-->
<div id="footer">
Copyright 2012© Tim van Osch.<br>Whole website has been written by: Tim van Osch.
</div>
</div>
</body>
</html>
Code:
#main {
width: 950px;
margin: 20px auto;
}
#header{
height: 160px;
}
#header_nav{
height: 42px;
background-color: orange;
}
#body{
height: 528px;
background-color: green;
}
#footer{
height: 40px;
color: white;
font-size: 12px;
text-align: center;
background-color: black;
}
#photo{
position: absolute;
text-align: center;
width: 400px;
margin: 20px 20px;
}
#photo img.head-pic{
max-width: 400px;
max-height: 400px;
border: 2px solid #000000
/*height: 250px;*/
}
#photo-album{
/*position: absolute;*/
margin: 20px 30px;
}
#photo-album img.album-pic{
width: 100px;
height: 80px;
border: 2px solid #9a1010
}
#photo-album img.album-pic-sel{
width: 110px;
height: 90px;
border: 2px solid #9a1010
}
#photo-text{
float: right;
width: 460px;
}
#photo-text a.title{
font-weight: bold;
font-size: 24px;
}
/*Deels van mij.*/
#nav {
margin:0;
padding:0;
background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
width:100%;
float:left;
border:1px solid #42432d;
border-width:1px 0;
}
#nav li {
display:inline;
padding:0;
margin:0;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#b2b580;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-shadow: 2px 2px 2px #555;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:#727454;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#home #nav-home a,
#about #nav-about a,
#archive #nav-archive a,
#reviews #nav-reviews a,
#contact #nav-contact a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
#home #nav-home a:hover,
#about #nav-about a:hover,
#archive #nav-archive a:hover,
#reviews #nav-reviews a:hover,
#contact #nav-contact a:hover {
background:#e35a00;
}
#nav a:active {
background:#e35a00;
color:#fff;
}Let niet op het aarts vogel gedoe dat is onzin ik had alleen wat tekst nodig
Het gedeelte waar dikgedrukt staat: "De aarts vogel is terug!" dat hoor in het midden te staan van het rechter gedeelte.
Hier is een screenshot:
Gr, Tim.
Bedankt.
