nicht angemeldet
Hi Detlef,
Hallo Charly2010
Ups! Mein Fehler!
Dass es einmal groß und einmal klein geschrieben ist, oder sollten es einmal id="content1" und einmal id="#content2" sein?
letzteres!
ja ich muss es ja innerhalb des Scrollbereichs bewegen können, sprich auch den Text entsprechend unter das jeweilige Bild. Das geht leider nicht mit margin.
OK, wenn jedes Bild einen ihm zugeordneten Text erhalten soll, dann ist ein gruppierendes Element notwendig. Das hat aber absolut und überhaupt nichts damit zu tun, ob wirklich positon zur passenden Anordnung nötig ist.
Was wäre z.B. ein gruppierendes Element?
Lies mal in der Erläuterung zu position:absolute, worauf sich die Positionierung bezieht.
Ich habe es nun auch mit position:fixed versucht. …
Habe ich irgendwo position:fixed erwähnt?
Lies noch einmal bei den Erläuterung zu position, was dort steht, worauf sich die absolute Positionierung bezieht.
O.k. werde es mir noch einmal durchlesen.
… Es müsste sich in den hellen Bereich fest integrieren lassen, genau so wie wenn man es ohne Div dort platzieren würde, doch genau da liegt der Hase eben im Pfeffer begraben.
Das hat nichts damit zu tun, ob es in ein Div eingebunden ist oder nicht.
Versuche es mal so:
<div style="overflow: auto; width: 580px; height: 609px;">
<p style="float:left; color:#455063;font-family:Century Gothic;font-size:15px;padding:15px;margin:0; width:250px;">
<img style="display:block;" src="Bilder/Betonschutzplatten nach WHG.jpg" width="250" height="250" alt="Betonschutzplatten nach WHG"></img>
Text
</p>
</div>
Genau das bringt mir ja eben gar nichts, denn genau so hatte ich es auch bisher gelöst. Doch wenn ich nun den zweiten Text genau unter dem rechten Bild haben möchte (jeweils text-align:left), auf Höhe des ersten Textes unter dem linken Bild (Du verstehst?), dann kann ich das nicht machen indem ich einfach den Text neben das Bild packe und mit </p> dahinter abschließe, denn dann verschiebt sich nämlich der zweite Text (wie man auch auf dem Bild sieht: http://www.bilder-upload.eu/show.php?file=utYAgQeNVWB0Fv7.jpg), auf die nächste Zeile.
meine bisheriger Code sieht nämlich momentan so aus:
~~~html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<style type="text/css">
a.color1:link, a.color1:visited{text-decoration:none; color:white}
a.color1:hover, a.color1:active{text-decoration:none; color:white}
a.color2:link, a.color2:visited{text-decoration:underline; color: #330033}
a.color2:hover, a.color2:active{text-decoration:underline; color: #330033}
a.color3:link, a.color3:visited{text-decoration:none; color: #455063}
a.color3:hover, a.color3:active{text-decoration:none; color: #455063}
html: {border: 0; padding: 0;}
p.toptext {
text-align: center;
color: black;
font-family: Arial;
font-size: 160%;
margin-left: 50px;
margin-right: 50px;
font-weight: bold;
text-decoration: underline;
}
#head {
width: 100%;
text-align: center;
}
#content {
border: black 0px inset;
width: 690px;
background-color: #DCDCDC;
font-family: Arial;
padding: 30px;
padding-top: 50px;
margin: 0px auto;
background-image: url();
background-position: center;
background-repeat: no-repeat;
}
#content p {
color: black;
font-family: Arial;
font-size: 108%;
font-weight: 0;
}
#content2 {
border: black 0px inset;
width: 580px;
background-color: lightyellow;
font-family: Century Gothic;
padding: 0px;
margin: 80px 60px;
filter: alpha (opacity=80);
-moz-opacity: 0.8;
}
#content p2 {
color: white;
font-family: Century Gothic;
font-size: 109%;
}
body {
background-color: #455063;
background-position: center;
background-repeat: repeat;
margin: 0px;
padding: 0px;
}
#Div {
hight: 50px;
overflow: auto;
}
}
DIV.shadow, DIV.shadow2, DIV.shadow3, DIV.shadow4, DIV.shadow5 {
padding: 1px;
border-radius: 0px;
-moz-border-radius: 0px;
}
DIV.shadow {
background-color: #8e8e8e;
border: 1px solid #959595;
margin: 0px;
}
DIV.shadow2 {
background-color: #aaa;
border: 1px solid #bebebe;
margin: 0;
}
DIV.shadow3 {
background-color: #d1d1d1;
border: 1px solid #e1e1e1;
margin: 0;
}
DIV.shadow4 {
background-color: #ededed;
border: 1px solid #455063;
margin: 0;
}
DIV.shadow5 {
float: left;
background-color: #455063;
border: 1px solid #455063;
margin: 150px 50px;
}
DIV.shadow IMG {
border: 0px solid #666;
margin: 0;
display:block;
position: relative;
top: -3px;
left: -3px;
}
</style>
</head>
<body>
<div id="head">
<div style="position:absolute; bottom: 530px; left:320px;">
<p style="text-align:left;font-family:Century
Gothic;color:#455063;font-size:30px"">Referenzen</p>
</div>
<div style="position:absolute; bottom:-160px; left:350px;">
<u><b style="text-align:left;font-family:Arial;font-
size:14px">
<a class="color3" href="index.html">Home</a></u></b>
</div>
<div id="Content2">
<div id="content">
<DIV style="OVERFLOW: auto; WIDTH: 580px; HEIGHT: 609px;">
<p style="text-align:left;color:#455063;font-family:Century Gothic;font-size:15px;margin-left:20px;margin-right:10px">Text
</p>
<p>
<img style="margin-left:-268px;margin-right:0px"src="Bilder/Betonschutzplatten nach WHG.jpg" width="250" height="250" alt="Betonschutzplatten nach WHG"></img><img style="margin-left:18px;margin-right:-268px"src="Bilder/Sickerwasserbecken Flugplatz Böblingen.jpg" width="250" height="250" alt="Sickerwasserbecken Flugplatz Böblingen"></img></p>
<p style="text-align:left;color:#455063;font-family:Century Gothic;font-size:11px;margin-left:20px;margin-right:10px">Sickerwasserbecken Deponie Nattheim
<br>Bettonschutzplatten nach WHG
<p style="text-align:left;color:#455063;font-family:Century Gothic;font-size:11px;margin-left:20px;margin-right:10px">Sickerwasserbecken Flugplatz Böblingen
<br>Teichauskleidung mit KDB</p>
</div>
</div>
</div>
</body>
</html>
Es wäre daher eben cool, wenn es sich doch per div lösen ließe, da man dann sowohl den Text, als auch die Bilder ohne größeren Aufwand frei positionieren könnte und genau dass wäre es, was ich benötige. Aber wenn es sich auch anders lösen lässt, ist es mir natürlich auch recht. Was ich höchstens noch machen könnte, wäre eine Tabelle erstellen (wäre aber nicht gerade die eleganteste Lösung), in die ich Bild und Text integriere und anschließend in den hellen Bereich einfüge. Das wäre wohl möglich, ist aber wie gesagt nicht die Traumlösung.
Dann versuche zu verstehen, welche CSS-Regeln was bewirken und melde dich wieder hier.
Ja das würde ich ja gerne, denn dass scheint bei mir im Moment noch ein wenig das Problem zu sein.
Auf Wiederlesen
Detlef
Mfg.
Charly2010