Frage stellen
ich habe nur wenig erfahrung mit css layouts. ich bin mir sicher, es gibt intelligentere ansätze, mein layout-problem zu lösen, als meine aktuelle version:
ich versuche, auf der startseite von http://www.alexbrunner.com (die seite ist zum nachprüfen live) das layout so gestalten, dass - zusätzlich zu einem header-div (logo und menü) und einem footer-div (lizenz und kontakt) ein gitter aus fotos mit stets der selben höhe (250px) stabil fotos nebeneinander und untereinander anzeigt, wobei jeweils die gesamtbreite 800px ergibt. im endeffekt würde so ein rechteck entstehen, das alle fotos gleichmäßig - mit einem zwischenrand von jeweils 4px - anordnet.
nachdem ich das in verschiedenen ansätzen nicht durch mein css-coding lösen konnte, habe ich in der aktuellen version jeweils weiße zwischenbilder eingefügt (also etwa: foto-weiß-foto), da mir das stabiler erschien. in firefox 3.6.10 auf mac os 10.5.8 funktioniert das, in chrome jedoch zb nicht (dort werden die bilder unregelmäßig untereinander und ohne zwischenräume angezeigt).
ich suche eigentlich nach einer eleganten css lösung - wahrscheinlich muss auch das markup umgestaltet werden? - dh ich bin auch froh um hinweise, wie ich das layout auch mit dem aktuellen hover-effekt stabil gestalten kann. das hauptproblem dabei: ich möchte das layout gern flexibel gestalten, also in em angeben, nicht in pixel; gleichzeitig möchte ich die größe der fotos aber nicht vom browser berechnen lassen, sondern durchaus in fixen pixeln beschreiben.
ich freue mich sehr über jeden kommentar!
vielen lieben dank,
alex
HTML:
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-gb">
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/hover.js"></script>
</head>
<body>
<div id="header-left" style="border-bottom: none">...</div>
<div id="header-right" style="border-bottom:none">...</div>
<div id="home" align="center"><div id="innerhome"><p>
<span class='wrapper' >
<img src='images/ecuador.jpg' height="250px" width="300px" />
<span class='description'>
<div class="description_header">...</div>
<div class='description_content'>...</div>
</span>
</span>
<span><img src="images/space.gif" height="1px" width="4px" /></span>
<span class='wrapper'>
<img src='images/lofoten.jpg' height="250px" width="496px" />
<span class='description'>
<div class="description_header">...</div>
<div class='description_content'>...</div>
</span>
</span>
<span><img src="images/space.gif" height="4px" width="800px" /></span>
<span class='wrapper'>
<img src='images/iceland.jpg' height="250px" width="800px" />
<span class='description'>
<div class="description_header">...</div>
<div class='description_content'>...</div>
</span>
</span>
<span><img src="images/space.gif" height="4px" width="800px" /></span>
<span class='wrapper'>
<img src='images/nyc.jpg' height="250px" width="202px" />
<span class='description'>
<div class="description_header">...</div>
<div class='description_content'>...</div>
</span>
</span>
<span><img src="images/space.gif" height="1px" width="4px" /></span>
<span class='wrapper'>
<img src='images/iran.jpg' height="250px" width="350px" />
<span class='description'>
<div class="description_header">...</div>
<div class='description_content'>...</div>
</span>
</span>
<span><img src="images/space.gif" height="1px" width="4px" /></span>
<span class='wrapper'>
<img src='images/uganda.jpg' height="250px" width="240px" />
<span class='description'>
<div class="description_header">...</div>
<div class='description_content'>...</div>
</span>
</span>
<span><img src="images/space.gif" height="4px" width="800px" /></span>
<span class='wrapper'>
<img src='images/scotland.jpg' height="250px" width="496px" />
<span class='description'>
<div class="description_header">...</div>
<div class='description_content'>...</div>
</span>
</span>
<span><img src="images/space.gif" height="1px" width="4px" /></span>
<span class='wrapper' >
<img src='images/burma.jpg' height="250px" width="300px" />
<span class='description'>
<div class="description_header">...</div>
<div class='description_content'>...</div>
</span>
</span></p>
<p> </p>
<p> </p>
</div></div>
<div id="footer-left">...</div>
<div id="footer-right">...</div>
</body>
</html>
CSS:
- Code: Alles auswählen
@charset "UTF-8";
/* CSS Document */
/* layout */
html {
font-size: 100%;
}
body {
font-size: 1em;
font-family: Georgia, "Times New Roman", Times, serif;
color: #333333;
width: 50em;
margin: 0 auto;
padding: 0;
}
#header-left {
height: 4em;
width: 25em;
float: left;
border: 0;
padding: 0;
margin: 0;
border-bottom: 0.05em dotted #333333;
}
#header-right {
height: 4em;
width: 25em;
float: right;
border: 0;
padding: 0;
margin: 0;
border-bottom: 0.05em dotted #333333;
}
#home {
clear: both;
width: 50em;
border: 0;
padding: 0.5em 0 0 0;
margin: 0;
}
#innerhome {
width: 800px;
border: 0;
padding: 0;
margin: 0;
}
#left {
clear: both;
width: 13em;
float: left;
border: 0;
padding: 0;
margin: 0;
}
#content {
width: 21.5em; /* 24 */
float: left;
border: 0;
padding: 1em 2em 1em 0.5em;
margin: 0;
}
#content-large {
width: 36.5em; /* 37 */
float: left;
border: 0;
padding: 1em 0 1em 0.5em;
margin: 0;
}
#right {
width: 13em;
float: right;
border: 0;
padding: 0;
margin: 0;
}
#footer-left {
clear: both;
float: left;
width: 32em;
border: 0;
padding: 1.25em 0;
margin: 0;
border-top: 0.05em dotted #333333;
}
#footer-right {
float: right;
width: 18em;
border: 0;
padding: 1.25em 0;
margin: 0;
border-top: 0.05em dotted #333333;
}
p, li {
font-size: 0.75em;
font-weight: 400;
text-align: justify;
padding: 0;
border: 0;
margin-top: 0;
}
p span {
display: block;
float: left;
border: none;
margin: none;
padding: none;
}
a:link {color: inherit; text-decoration: none; border-bottom:1px dotted;}
a:visited {color: #FF6600; text-decoration: none; border-bottom:1px dotted;}
a:hover {text-decoration: none; color: #FF6600;}
a:active {color: #FF6600; text-decoration: none;}
a.navi:hover {text-decoration: none;}
img {
border: none;
margin: none;
padding: none;
}
/* front hover */
.wrapper {
position: relative;
}
.description {
position: absolute;
bottom: 0;
left: 0;
display: none;
background-color: #00AAFF;
}
.description_header {
padding: 10px 0 2px 20px;
text-align: left;
font-family: 'palatino linotype',baskerville,'times new roman',serif;
font-size: 2.681em;
line-height: 1.733em;
font-weight: 400;
font-style: italic;
color: #FFFFFF;
letter-spacing: -0.039em;
}
.description_content {
padding: 0 20px;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.975em;
font-weight: 400;
color: #FFFFFF;
}
