erste Seite mit positioning

Liz · 24. Feb. 2007

Halloo ihr Lieben

Hab mal hierfür eine Frage.
Diese Seite hab ich das erste Mal mit position erstellt.

Jetzt meine Frage: Auf der Seite "eigene Bilder" möchte ich eine Bildergalerie einbauen. Ich hab sie jetzt mal mit Divklassen gemacht die aber gefloatet sind.

Ich bin mir nicht sicher, ob das sauberer Code ist, wenn ich in positionierte Elemente Floats einbaue.

Auch bin ich am Überlegen - ob sich das nicht mit Listen besser regeln lässt.

Das Design der Galerie gefällt mir zwar nicht so - aber für das Gesamtlayout sicher besser.

Ich hab auch mal gemoppst - wegen der unterschiedlichen Stylesheets - wegen dem IE. Ist es besser einen Styleswitcher einzubauen??

Danke schon mal für eure Hilfe.

liebe Grüße
Liz

hier mal die Codes:

Code:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Bildergalerie</title>
<link rel="stylesheet" type="text/css" href="style001.css">

</head>
<body>
<div id="layout">
<div id="content">
<div class="thumbnail">
	<a href="aquarius.jpg" class="thumbnail">

	<img src="aquarius_thumb.jpg" width="150" height="106" alt=""> </a>
	<div class="bildtitel">Fische in der Unterwelt</div>
</div>
<div class="thumbnail">
	<a href="aquarius.jpg" class="thumbnail">
	<img src="aquarius_thumb.jpg" width="150" height="106" alt=""> </a>
	<div class="bildtitel">Fische in der Unterwelt</div>
</div>

<div class="thumbnail">
	<a href="aquarius.jpg" class="thumbnail">
	<img src="aquarius_thumb.jpg" width="150" height="106" alt=""> </a>
	<div class="bildtitel">Fische in der Unterwelt</div>
</div>

<div class="thumbnail">
	<a href="aquarius.jpg" class="thumbnail">
	<img src="aquarius_thumb.jpg" width="150" height="106" alt=""> </a>

	<div class="bildtitel">Fische in der Unterwelt</div>
</div>

<div class="thumbnail">
	<a href="aquarius.jpg" class="thumbnail">
	<img src="aquarius_thumb.jpg" width="150" height="106" alt=""> </a>
	<div class="bildtitel">Fische in der Unterwelt</div>
</div>

<div class="thumbnail">

	<a href="aquarius.jpg" class="thumbnail">
	<img src="aquarius_thumb.jpg" width="150" height="106" alt=""> </a>
	<div class="bildtitel">Fische in der Unterwelt</div>
</div>

<div class="thumbnail">
	<a href="aquarius.jpg" class="thumbnail">
	<img src="aquarius_thumb.jpg" width="150" height="106" alt=""> </a>
	<div class="bildtitel">Fische in der Unterwelt</div>

</div>

<div class="thumbnail">
	<a href="aquarius.jpg" class="thumbnail">
	<img src="aquarius_thumb.jpg" width="150" height="106" alt=""> </a>
	<div class="bildtitel">Fische in der Unterwelt</div>
</div>

<div class="thumbnail">
	<a href="aquarius.jpg" class="thumbnail">
	<img src="aquarius_thumb.jpg" width="150" height="106" alt=""> </a>

	<div class="bildtitel">Fische in der Unterwelt</div>
</div>


</div>
</div>

<div id="menu">
<ul>
<li><a href="">Home </a></li>
<li><a href="">Meine Intention </a></li>
<li><a href="">Malerei als Ausdruck </a></li>

<li><a href="">Geschichten </a></li>
<li><a href="">eigene Bilder </a></li>
</ul>
</div>
</div>
</body>
</html>

und die CSS

Code:

* html #content {
        position: absolute;
	top: 142px;
	left: 142px;
	background: #e0f0ff;
        width: 590px;
        height: 40em;
	border: 1px solid #7990B2;
	text-align: left;
        font-size: .9em;
        padding: 2em;
}
* html #menu {
	position: absolute;
	top: 240px;
        right: 0;
	text-align: left;
        width: 180px;
        font-size: .9em;
}

* {
	margin: 0;
	padding:0;
}
body {
	background: #E7EfFC url(univers14.jpg) top left fixed no-repeat;
	color:	#000;
	font: 100.01%/1.4 arial, helvetica, sans-serif;
	text-align: center;
	height: 100%;
}
html>body {
	height: auto;
	min-height: 100%;
}
#content {
	position: absolute;
	top: 142px;
        left: 142px;
        right: 170px;
	background: #e0f0ff url(background_content11_b.jpg) 110px 0 no-repeat fixed;
	border: 1px solid #7990B2;
	text-align: left;
        padding: 2em;
}
#menu {
	position: absolute;
	top: 230px;
        right: 20px;
	text-align: left;
        width: 10em;
        max-width: 150px;
}
#menu ul {
	list-style-type: none;
}
#menu a, #menu a:link, #menu a:visited {
        display: block;
        width: 100%;
        padding-top: .4em;
        padding-left: .3em;
        text-decoration: none;
        border-bottom: 1px solid #7990B2;
        color: #000;
}
#menu a:hover, #menu a:focus, #menu a:active {
        background: #BECFDF;
}

/* ======================gallerie========================== */

div.thumbnail {
        float: left;
        height: auto;
        margin: 0em 1em 1em 0;
}
div.thumbnail .bildtitel {
        width: 167px;
        max-width: 170px;
}
div.thumbnail a {
        text-decoration: none;
}
div.thumbnail img {
}

planet4 · 25. Feb. 2007

Hallo Liz,

es spricht nix dagegen, floats in positionierten divs zu benutzen.

zu deiner Frage mit den Listen:
wenn du viele Bilder hast, würde es sich vielleicht besser machen, eine Definitionsliste zu benutzen, die kannst du ja genauso mit floats layouten wie deine bisherigen divs. Der Vorteil wäre, dass man als nicht-sehender Bild und Text eindeutig einander zuordnen kann.

Im IE6 rutscht die Navigation zu weit nach rechts, weil du für den IE den #content auf eine bestimmte Pixelzahl begrenzt hast, siehe Anhang.

[edit] hier noch ein Link zu den Definitionslisten mit weiterführenden Links [/edit]

Schöne Grüße
planet4.

erste Seite mit positioning

Liz

Lounge-Member

planet4

New member

Anhänge