Frage stellen
Ich habe folgendes Problem: ich habe ein Grundgerüst erstellt, in dem zwei image captions bisweilen noch mit Hilfe von float links des contents-divs ausgerichtet sind. Die besagten image captions möchte ich jedoch mittig im contents-div positionieren. Leider stecken meine CSS-Kenntnisse noch zu sehr in den Kinderschuhen, als das sie mir hier eine Lösung aufzeigen könnten.
HTML-Code
- Code: Alles auswählen
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Startseite</title>
<link rel="stylesheet" type="text/css" href="Stil1.css"></link>
</head>
<body>
<div id="container">
<div id="header">Kopf</div>
<div id="mainnav">Navleiste</div>
<div id="menu">Seitenleiste</div>
<div id="contents">Inhalt: dies ist ein Test, um zu prüfen, wie der Text umbricht.<br>
<p>Dies ist ein Test, um zu prüfen, wie der Text umbricht. Dies ist ein Test, um zu prüfen, wie der Text umbricht. Dies ist ein Test, um zu prüfen, wie der Text umbricht. Dies ist ein Test, um zu prüfen, wie der Text umbricht. Dies ist ein Test, um zu prüfen, wie der Text umbricht.</p>
<div style="float: left;">
<p class="image-caption">
<img src="images/testimage.jpg" alt="Test Image" />
Hier steht der Bilduntertitel und ein <a href="#">link</a>.
</p>
<p class="image-caption">
<img src="images/testimage.jpg" alt="Test Image" />
Hier steht der Bilduntertitel und ein <a href="#">link</a>.
</p>
</div>
Dies ist ein Test, um zu prüfen, wie der Text umbricht.
</div>
<div id="footer">Fußleiste</div>
</div>
</body>
</html>
CSS-Datei
- Code: Alles auswählen
body
{
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #505367;
background-color: #D6D6D6;
}
#container
{
margin: 1em auto;
width: 800px;
text-align: left;
background-color: red;
border: 1px solid black;
}
#header
{
height: 45px;
background-color: fuchsia;
}
#mainnav
{
height: 25px;
background-color: green;
}
#menu
{
float: left;
width: 180px;
height: 880px;
background-color: yellow;
}
#contents
{
height: 880px;
background-color: aqua;
}
#footer
{
clear: both;
height: 20px;
background-color: lime;
}
.image-caption {
width: 167px;
background: #fff;
padding: 3px;
border: 1px dotted #aaa; }
.image-caption img {
border: 1px solid #aaa; }
.image-caption p {
clear: both;
font: normal 9px/1.45em arial, hevetica, sans-serif;
color: #444; }
.image-caption a {
color: #444;
text-decoration: underline; }
.image-caption a:hover {
font-style: italic; }
. Die image captions sind zwar jetzt zentriert, aber nur im Bezug auf die Bildschirmmitte; meine Absicht war es jedoch, die image captions im Bezug zu dem contents-div (sichtbare blaue Fläche) mittig zu zentrieren.