nicht angemeldet
Objekte innerhalb einer Scrollbar mit <div frei positionieren
Hallo zusammen,
ich habe auf einer Seite ein Scrollfeld integriert, in dem ich jetzt gerne Bilder und Text per "div" frei positionieren können möchte, sofern dies möglich ist. Falls dem nicht so ist, hat vielleicht jemand hier in dem Forum eine Idee, wie man es sonst noch lösen könnte?
Der Code (nicht lachen, ich bin noch absoluter Anfänger) sieht so aus:
<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="Bild.jpg" width="250" height="250" alt="Bild"></img><img style="margin-left:18px;margin-right:-268px"src="Bild.jpg" width="250" height="250" alt="Text"></img></p>
<p style="text-align:left;color:#455063;font-family:Century Gothic;font-size:11px;margin-left:20px;margin-right:10px">Text
<br>
Text
<p style="text-align:left;color:#455063;font-family:Century Gothic;font-size:11px;margin-left:20px;margin-right:10px">Text
<br>
Text</p>
Auf dem folgenden Bild sieht man das Problem sehr gut, der zweite Text unter dem linken Bild, sollte auf die rechte Seite unter das zweite Bild, auf Höhe des linken Textes.
http://www.bilder-upload.eu/show.php?file=utYAgQeNVWB0Fv7.jpg
Vielen Dank schon mal im Voraus.
Charly2010
-
Hi,
ich habe auf einer Seite ein Scrollfeld integriert, in dem ich jetzt gerne Bilder und Text per "div" frei positionieren können möchte, sofern dies möglich ist.
Und welches Problem hast du dabei?
Für welche Art von Positionierung/Ausrichtung hast du dich entschieden?Falls dem nicht so ist, hat vielleicht jemand hier in dem Forum eine Idee, wie man es sonst noch lösen könnte?
Nur, wenn du "es" erst mal nachvollziehbar beschreibst.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Hi,
Hi ChrisB,
ich habe auf einer Seite ein Scrollfeld integriert, in dem ich jetzt gerne Bilder und Text per "div" frei positionieren können möchte, sofern dies möglich ist.
Und welches Problem hast du dabei?
Für welche Art von Positionierung/Ausrichtung hast du dich entschieden?Was meinst Du für Welche Art? Ich würde es gerne mit div ausrichten, aber eben innerhalb des Scrollfeldes.
Falls dem nicht so ist, hat vielleicht jemand hier in dem Forum eine Idee, wie man es sonst noch lösen könnte?
»»
Nur, wenn du "es" erst mal nachvollziehbar beschreibst.
Ja es ist für mich nicht ganz einfach es zu beschreiben, da ich mich bisher noch zu wenig auskenne. Du siehst ja unten den Link zu dem Bild. Auf dem sieht man die Seite mit dem Scrollfeld, in der sich bereits Bilder und Text befinden. Ich würde nun gerne die Bilder und auch den dazugehörigen Text (das Kleingedruckte) innerhalb des Scollfeldes frei bewegen können. Ich hatte mal versucht es mit div zu realisieren, dabei hat es mir dann den Text lediglich über das Scrollfeld gelegt, sprich er war nicht integriert und scrollte somit nicht mit. Ich habe keinen Plan wie ich es anstellen kann, dass die "div-Objekte" (Bilder und Text) im Scrollfeld integriert werden.
Ich weiß auch gar nicht auf was ich mich beziehen soll, es gibt bei mir in CSS #head, #boddy, #content und #content2. Und #content2 ist es eigentlich, wenn ich da die Werte ändere, verschiebt sich das Scrollfeld wohin ich will. Doch wenn ich nun schreibe:
<div id="Content2"> <div id="content2"> <div style="position:absolute; bottom:50px; left:360px;"> <img style="margin-left:-268px;margin-right:0px"src="Bilder/Betonschutzplatten nach WHG.jpg" width="250" height="250" alt="Betonschutzplatten nach WHG"></img> </div>so landet es auch wieder außerhalb des Scrollfeldes. Was mache ich bloß falsch?
MfG ChrisB
Mfg.
Chraly2010
-
Hallo Chraly2010
Ich weiß auch gar nicht auf was ich mich beziehen soll, es gibt bei mir in CSS #head, #boddy, #content und #content2. Und #content2 ist es eigentlich, wenn ich da die Werte ändere, verschiebt sich das Scrollfeld wohin ich will. Doch wenn ich nun schreibe:
<div id="Content2">
<div id="content2">
Ob das so günstig ist, zwei Ids, die sich lediglich durch Groß-/Kleinschreibung unterscheiden? > > `<div style="position:absolute; bottom:50px; left:360px;">`{:.language-html} > Ist das Div wirklich nötig? Bilder lassen sich auch ausrichten oder positionieren, ohne sie extra in ein Div zu packen. Außerdem solltest du zur Ausrichtung besser mit [margin](http://de.selfhtml.org/css/eigenschaften/randabstand.htm), [padding](http://de.selfhtml.org/css/eigenschaften/innenabstand.htm), [float](http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float) und [clear](http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear) arbeiten und mit [position](http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position) nur wenn es nicht anders möglich ist. > ~~~html <img style="margin-left:-268px;margin-right:0px"src="Bilder/Betonschutzplatten nach WHG.jpg" width="250" height="250" alt="Betonschutzplatten nach WHG"></img> > > </div>so landet es auch wieder außerhalb des Scrollfeldes. Was mache ich bloß falsch?
Lies mal in der Erläuterung zu position:absolute, worauf sich die Positionierung bezieht.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Chraly2010
Hi Detlef,
<div id="Content2">
<div id="content2">
> > Ob das so günstig ist, zwei Ids, die sich lediglich durch Groß-/Kleinschreibung unterscheiden? > Ups! Mein Fehler! > > Ist das Div wirklich nötig? > Bilder lassen sich auch ausrichten oder positionieren, ohne sie extra in ein Div zu packen. 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. > Außerdem solltest du zur Ausrichtung besser mit [margin](http://de.selfhtml.org/css/eigenschaften/randabstand.htm), [padding](http://de.selfhtml.org/css/eigenschaften/innenabstand.htm), [float](http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float) und [clear](http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear) arbeiten und mit [position](http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position) nur wenn es nicht anders möglich ist. > > > ~~~html <img style="margin-left:-268px;margin-right:0px"src="Bilder/Betonschutzplatten nach WHG.jpg" width="250" height="250" alt="Betonschutzplatten nach WHG"></img> > > > > </div>so landet es auch wieder außerhalb des Scrollfeldes. Was mache ich bloß falsch?
Lies mal in der Erläuterung zu position:absolute, worauf sich die Positionierung bezieht.
Ich habe es nun auch mit position:fixed versucht. Es bringt leider gar nichts, weil es so nach wie vor nicht in dem Scrollfeld eingebunden ist, sondern darüber zu liegen scheint. 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.
<div id="Table1"> <DIV style="OVERFLOW: auto; WIDTH: 580px; HEIGHT: 609px;"> <div style="position:absolute; bottom:358px; left:628px;"> <img style="margin-left:-268px;margin-right:0px"src="Bilder/Betonschutzplatten nach WHG.jpg" width="250" height="250" alt="Betonschutzplatten nach WHG"></img> </div> <p style="text-align:left;color:#455063;font-family:Century Gothic;font-size:15px;margin-left:20px;margin-right:10px">Text</p>Auf Wiederlesen
Detlef
Mfg.
Charly2010
-
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?
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.
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.… 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>Dann versuche zu verstehen, welche CSS-Regeln was bewirken und melde dich wieder hier.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
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
DetlefMfg.
Charly2010
-
Hi Detlef,
hier noch mal ein besseres Bild, hier habe ich mal eingezeichnet, was genau geändert werden soll:
http://www.bilder-upload.eu/show.php?file=Fj3b6qXJO3pqWRs.jpg
Mfg.
Charly2010
-
Hallo Charly2010
Was wäre z.B. ein gruppierendes Element?
Ein Element, welches das Bild mit dem ihm zugehörigen Text zu einer Einheit verbindet. Das kann ein div-Element sein, oder jedes andere, das die zu gruppierenden enthalten darf. Da es sich in deinem Fall jeweils um ein Bild und dem diesem Bild zugeordneten Text handelt, bietet es sich an, aus Bild und Text jeweils einen Absatz zu machen.
Genau das bringt mir ja eben gar nichts, denn genau so hatte ich es auch bisher gelöst. …
Nein, das hast du nicht, wie ich an deinem Quelltext unten sehe.
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?), …
Ja, ich verstehe, wie es aussehen soll, ich kann aber nicht verstehen, wie du dazu kommst solch ein unlogisches HTML-Kauderwelsch zu schreiben.
HTML ist eine Auszeichnungssprache, die die logische Struktur abbilden soll. CSS dient dann dazu, diese Struktur mit der gewünschten Darstellung zu versehen.meine bisheriger Code sieht nämlich momentan so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Also HTML, \_nicht\_ XHTML. > `<div style="position:absolute; bottom: 530px; left:320px;">`{:.language-html} Wozu position:absolute? > `<div style="position:absolute; bottom:-160px; left:350px;">`{:.language-html} Wozu position:absolute? > ~~~html <u><b style="text-align:left;font-family:Arial;font- size:14px">Was ist das? Schau mal nach, in welcher HTML-Version das Element u erlaubt ist. Außerdem ist CSS fürs Aussehen zuständig.
<DIV style="OVERFLOW: auto; WIDTH: 580px; HEIGHT: 609px;">Warum sind die CSS-Eigenschaften plötzlich groß geschrieben?
<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>
Dies hat keine Ähnlichkeit mit dem Code, den ich dir gepostet habe. Übrigens, das hatte ich auch übersehen: [img ist ein Leeres Element](http://de.selfhtml.org/html/referenz/elemente.htm#img), also kein Endtag in HTML. Und was soll die seltsame Anordnung im Quelltext? Gehört der erste Text zum ersten Bild, der zweite Text zum zweiten Bild, oder hast du eine Reihe Bilder und eine Reihe Texte, die überhaupt nichts miteinander zu tun haben? HTML + CSS ist nicht dafür gedacht, irgendwelche Bilder und irgendwelche Texte einfach irgendwo ins HTML zu klatschen und dann mittels position:absolute wild über die Seite zu schieben, bis das \_optische\_ Ergebnis dann endlich etwas Sinnvolles ergibt. Du hast \_ein\_ Bild und dazu \_einen\_ Text, die gehören zusammen, nicht nur optisch sondern auch in der HTML-Struktur. Dann hast du ein zweites Bild und dazu wieder einen Text, auch die gehören zusammen. usw. Also nimmst du einen Absatz, packst dort das erste Bild und den ersten Text rein. Dann nimmst du einen neuen Absatz mit dem zweiten Bild und dem zweiten Text. usw. ~~~html <div style="overflow: auto; width: 580px; height: 609px;"> <p style="float:left; padding:15px; margin:0; width:250px;"> <img style="display:block;" src="Erstes_Bild.jpg" width="250" height="250" alt="Erstes Bild"> Erster Text </p> <p style="float:left; padding:15px; margin:0; width:250px;"> <img style="display:block;" src="Zweites_Bild.jpg" width="250" height="250" alt="Zweites Bild"> Zweiter Text </p> <p style="float:left; padding:15px; margin:0; width:250px;"> <img style="display:block;" src="Drittes_Bild.jpg" width="250" height="250" alt="Drittes Bild"> Dritter Text </p> … </div>Dazu sollten dann alle CSS-Angaben ins zentrale CSS.
Kleiner Tipp: Wenn du das HTML einer Seite baust, dann vergesse dabei das gewünschte Aussehen. Schau dir alles ohne CSS an, so wie der Browser es anzeigt, wenn du ihm keinerlei Anweisungen zum Aussehen gegeben hast. Wenn die Seite dann übersichtlich und logisch aufgebaut erscheint und benutzbar ist, dann, erst dann ist es sinnvoll, mittels CSS das gewünscht Aussehen zu definieren.
Es wäre daher eben cool, wenn es sich doch per div lösen ließe, …
Was willst du immer mit deinem div?
Ein div-Element ist ein bedeutungsloses Element zum gruppieren anderer Elemente. Alles, was CSS mit einem div-Element kann, kann es auch mit (fast) jedem anderen Element.… 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. …
p-Elemente könnten genauso per position wild auf der Seite herumgeschoben werden.
Aber willst du das wirklich?
Willst du wirklich:- jedes Bild, jeden Textabsatz einzeln dorthin positionieren, wo sie angezeigt werden sollen?
- bei jeder Änderung einer Textlänge oder Bildgröße wieder neu damit anfangen?
- das Risiko eingehen, dass sich Texte oder und Bilder bei einem Seitenbesucher plötzlich überlagern, weil sein Browser die von dir gewählte Schriftart nicht kennt und eine etwas größere nimmt, oder wenn er sich die Schrift etwas vergrößert?
… 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.
Eine Tabelle wäre dafür wirklich nicht sinnvoll, dazu aber meine Frage:
Würdest du bei der Tabelle auch erst alle Bilder in die ersten Zellen klatschen und dann in die letzten die Texte?Statt einer Tabelle oder eines scrollbaren div und darin Absätzen würde ich dafür eine Liste verwenden, es ist doch eine Liste der Referenzen.
#referenzliste { overflow: auto; width: 580px; height: 509px; list-style: none; margin: 0; padding: 0; } #referenzliste li { float:left; margin: 0; padding:15px 0 15px 20px; width: 250px; text-align: left; } #referenzliste img { display: block; margin-bottom: 10px; width: 250px; height: 250px; }<ul id="referenzliste"> <li> <img src="Erstes_Bild.jpg" alt="Erstes Bild"> Erster Text </li> <li> <img src="Zweites_Bild.jpg" alt="Zweites Bild"> Zweiter Text </li> <li> <img src="Drittes_Bild.jpg" alt="Drittes Bild"> Dritter Text </li> </ul>Generell nochmal zu deinem Quelltext:
Es gibt noch andere Elemente außer div, p und img (u vergessen wir mal ganz schnell).
Es gibt z.B. h1 bis h6 für Überschriften und ich könnte mir vorstellen, das „Referenzen” wohl so etwas wie die Seitenüberschrift sein soll. Also verwende auch ein h1. Das gewünschte Aussehen kannst du dann beliebig gestalten. z.B.:h1 { font-family: Century Gothic; /* [link:http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family@title=möglichst noch eine generische Schriftfamilie angeben] */ color: #455063; font-size: 30px; font-weight: normal; }Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Charly2010
Hallo Detlef,
Was wäre z.B. ein gruppierendes Element?
Ein Element, welches das Bild mit dem ihm zugehörigen Text zu einer Einheit verbindet. Das kann ein div-Element sein, oder jedes andere, das die zu gruppierenden enthalten darf. Da es sich in deinem Fall jeweils um ein Bild und dem diesem Bild zugeordneten Text handelt, bietet es sich an, aus Bild und Text jeweils einen Absatz zu machen.
O.k.
Genau das bringt mir ja eben gar nichts, denn genau so hatte ich es auch bisher gelöst. …
Nein, das hast du nicht, wie ich an deinem Quelltext unten sehe.
Ich hatte es versucht, doch dann waren die Bilder unter einander, dass bringt mir nix, die sollen nebeneinander. Und ja ich hätte gerne für mein Layout den Text auf selber Höhe wie der Nachbartext und die Bilder nebeneinander, längere Bilder kommen dann mittig untereinander.
Ja, ich verstehe, wie es aussehen soll, ich kann aber nicht verstehen, wie du dazu kommst solch ein unlogisches HTML-Kauderwelsch zu schreiben.
Weil ich noch Anfänger bin.
HTML ist eine Auszeichnungssprache, die die logische Struktur abbilden soll. CSS dient dann dazu, diese Struktur mit der gewünschten Darstellung zu versehen.
Das mag schon sein, da will ich ja auch hinterher noch mit meinem Quellcode hin, dass sieht jetzt halt noch etwas schlimm aus. Ich möchte jetzt halt erst mal das Layout irgendwie hinbekommen, dass es mir gefällt und anschließend werde ich versuchen das mit dem Quellcode noch etwas besse zu lösen, ich will dann später auch Stylesheets verwenden, so dass nur noch das Nötigste auf der jeweiligen Seite steht.
`<div style="position:absolute; bottom: 530px; left:320px;">`Wozu position:absolute?
Why not?
Ist vielleicht nicht immer passend, aber manchmal braucht man es wohl. Ich habe zudem nämlich auch noch das Problem, dass sich auf meiner Hauptseite alles, was ich mit div positioniert habe, je nach Browser und Bildschirmauflösung verschiebt. Das lässt mir nämlich auch keine Ruhe.
`<div style="position:absolute; bottom:-160px; left:350px;">`<u><b style="text-align:left;font-family:Arial;font- > size:14px"> >Was ist das? Schau mal nach, in welcher HTML-Version das Element u erlaubt ist. Außerdem ist CSS fürs Aussehen zuständig.
hier verstehe ich nicht was Du meinst. Ja ich nehme CSS ja auch fürs Aussehen.
<DIV style="OVERFLOW: auto; WIDTH: 580px; HEIGHT: 609px;">Warum sind die CSS-Eigenschaften plötzlich groß geschrieben?
<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>Dies hat keine Ähnlichkeit mit dem Code, den ich dir gepostet habe.
Ja schon, ich wollte ja auch nur sagen, dass ich bisher auch mit <p></p> gearbeiete habe bei den Bildern, mir dass allerdings nicht weiterhilft, wenn ich den unteren Text auf selbe Höhe des ersten Textes, linksbündig unter das zweite Bild haben möchte.
Übrigens, das hatte ich auch übersehen: img ist ein Leeres Element, also kein Endtag in HTML.
Oh danke, dann werde ich das rausnehmen.
Und was soll die seltsame Anordnung im Quelltext? Gehört der erste Text zum ersten Bild, der zweite Text zum zweiten Bild, oder hast du eine Reihe Bilder und eine Reihe Texte, die überhaupt nichts miteinander zu tun haben?
Ja genau so soll es sein, erster Text zu erstem Bild, zweiter Text zu zweitem Bild, aber bitte nebeneinander, siehe Link: http://www.bilder-upload.eu/show.php?file=Fj3b6qXJO3pqWRs.jpg
HTML + CSS ist nicht dafür gedacht, irgendwelche Bilder und irgendwelche Texte einfach irgendwo ins HTML zu klatschen und dann mittels position:absolute wild über die Seite zu schieben, bis das optische Ergebnis dann endlich etwas Sinnvolles ergibt.
Ist ja letztendlich egal wie sich's bewerkstelligen lässt, Hauptsache das Layout stimmt nachher. Natürlich will ich auch einen regelkonformen Quellcode, darum frage ich ja wie man das am elegantesten lösen könnte.
Du hast ein Bild und dazu einen Text, die gehören zusammen, nicht nur optisch sondern auch in der HTML-Struktur. Dann hast du ein zweites Bild und dazu wieder einen Text, auch die gehören zusammen. usw. Also nimmst du einen Absatz, packst dort das erste Bild und den ersten Text rein. Dann nimmst du einen neuen Absatz mit dem zweiten Bild und dem zweiten Text. usw.
Äh die Bilder müssen aber in den ersten Absatz, sonst sind sie untereinander, die sollen aber doch nebeneinander und der Text jeweils darunter, das kann doch nicht so schwer umzusetzen sein?
<div style="overflow: auto; width: 580px; height: 609px;"> > > <p style="float:left; padding:15px; margin:0; width:250px;"> > <img style="display:block;" src="Erstes_Bild.jpg" width="250" height="250" alt="Erstes Bild"> > Erster Text > </p> > > <p style="float:left; padding:15px; margin:0; width:250px;"> > <img style="display:block;" src="Zweites_Bild.jpg" width="250" height="250" alt="Zweites Bild"> > Zweiter Text > </p> > > <p style="float:left; padding:15px; margin:0; width:250px;"> > <img style="display:block;" src="Drittes_Bild.jpg" width="250" height="250" alt="Drittes Bild"> > Dritter Text > </p> > > … > > </div>Dazu sollten dann alle CSS-Angaben ins zentrale CSS.
Kleiner Tipp: Wenn du das HTML einer Seite baust, dann vergesse dabei das gewünschte Aussehen. Schau dir alles ohne CSS an, so wie der Browser es anzeigt, wenn du ihm keinerlei Anweisungen zum Aussehen gegeben hast. Wenn die Seite dann übersichtlich und logisch aufgebaut erscheint und benutzbar ist, dann, erst dann ist es sinnvoll, mittels CSS das gewünscht Aussehen zu definieren.
Die war ja auch ursprünglich in reinem HTML, erst durch das CSS wurde sie zudem was sie jetzt ist, dazu hat man CSS ja. In reinem HTML sieht die Seite sch****e aus. Zumal da ja dann auch die Boxen fehlen würden. Nur in HTML, wäre ja dann lediglich der Hintergrund und die paar Tabellen, die nur auf der Hauptseite sind. Also sprich in HTML wäre es praktisch eine leere Seite.
Es wäre daher eben cool, wenn es sich doch per div lösen ließe, …
Was willst du immer mit deinem div? Ein div-Element ist ein bedeutungsloses Element zum gruppieren anderer Elemente. Alles, was CSS mit einem div-Element kann, kann es auch mit (fast) jedem anderen Element.
… 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. …
p-Elemente könnten genauso per position wild auf der Seite herumgeschoben werden.
ah, schau dass wusste ich nicht, dann könnte ich es ja mal damit versuchen.
Aber willst du das wirklich?
Ja will ich!
Willst du wirklich:
- jedes Bild, jeden Textabsatz einzeln dorthin positionieren, wo sie angezeigt werden sollen?
In dem Fall ja!
- bei jeder Änderung einer Textlänge oder Bildgröße wieder neu damit anfangen?
Äh nein, da ich da keine Texte ändern werde, wenn ich sie erst einmal drin habe.
- das Risiko eingehen, dass sich Texte oder und Bilder bei einem Seitenbesucher plötzlich überlagern, weil sein Browser die von dir gewählte Schriftart nicht kennt und eine etwas größere nimmt, oder wenn er sich die Schrift etwas vergrößert?
Firefox kommt damit bisher klar, jedoch habe ich ja bereits oben erwähnt, dass ich zudem auch noch mit dem Problem kämpfe, dass die positionierten Elemente trotz position:absolute offenbar nicht auf der Seite fixiert sind, und sich somit je nach Auflösung des Monitors und des gewählten Browsers verschieben. Im Internet-Explorer kann man die Seite bisher gar nicht betrachten. Diesem Problem muss ich natürlich auch noch irgendwie Herr werden.
… 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.
Eine Tabelle wäre dafür wirklich nicht sinnvoll, ...
sage ich ja.
... dazu aber meine Frage: Würdest du bei der Tabelle auch erst alle Bilder in die ersten Zellen klatschen und dann in die letzten die Texte?
äh ja, denn so will ich es ja haben. Ich will rechts nen Bild, links nen Bild und unter das jeweilige Bild, den dazugehörigen Text linksbündig darunter.
Statt einer Tabelle oder eines scrollbaren div und darin Absätzen würde ich dafür eine Liste verwenden, es ist doch eine Liste der Referenzen.
Ich weiß wie eine Aufzählung geht, die ist anschließend sogar noch drin, hat da aber nix zu suchen, da die in die Unternehmensvorsellung gehört. Ich hatte davor die Seite kopiert, daher ist der Inhalt noch darunter, fliegt aber raus, sobald ich weiß wie ich die Bilder darin mit dem entsprechenden Text so einbinden kann, dass es meiner Vorstellung entspricht.
#referenzliste { > overflow: auto; > width: 580px; > height: 509px; > list-style: none; > margin: 0; > padding: 0; > } > #referenzliste li { > float:left; > margin: 0; > padding:15px 0 15px 20px; > width: 250px; > text-align: left; > } > #referenzliste img { > display: block; > margin-bottom: 10px; > width: 250px; > height: 250px; > } ><ul id="referenzliste"> > > <li> > <img src="Erstes_Bild.jpg" alt="Erstes Bild"> > Erster Text > </li> > > <li> > <img src="Zweites_Bild.jpg" alt="Zweites Bild"> > Zweiter Text > </li> > <li> > <img src="Drittes_Bild.jpg" alt="Drittes Bild"> > Dritter Text > </li> > > </ul> >Generell nochmal zu deinem Quelltext: Es gibt noch andere Elemente außer div, p und img (u vergessen wir mal ganz schnell). Es gibt z.B. h1 bis h6 für Überschriften und ich könnte mir vorstellen, das „Referenzen” wohl so etwas wie die Seitenüberschrift sein soll.
Ja schon, aber die ist doch groß genug und mit px kann ich die Größe genauer bestimmen.
Also verwende auch ein h1. Das gewünschte Aussehen kannst du dann beliebig gestalten. z.B.:
h1 { > font-family: Century Gothic; /* [möglichst noch eine generische Schriftfamilie angeben](http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family) */ > color: #455063; > font-size: 30px; > font-weight: normal; > }Ja gut, wie gesagt ich bin ja noch am Anfang was HTML und CSS anbelangt. Das kann ich ja dann auch noch ändern.
Allerdings schade, dass ich hinsichtlich der Bilder nun immer noch so schlau bin wie zuvor. Dann muss ich es halt wirklich mit der Tabelle machen, oder ich versuche mal das <p> per CSS zu verschieben, vielleicht gelingt es mir ja.
Trotzdem danke für Deine Hilfe.
Auf Wiederlesen Detlef
Gruß
Charly2010
-
Hallo Charly2010
Allerdings schade, dass ich hinsichtlich der Bilder nun immer noch so schlau bin wie zuvor.
Willst du mich verklapsen?
Ich habe dir zwei funktionierende HTML- und CSS-Auszüge gepostet. Wenn du die nicht einmal ausprobierst, dann kann dir wirklich niemand helfen!Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Charly2010
Hi Detlef,
Allerdings schade, dass ich hinsichtlich der Bilder nun immer noch so schlau bin wie zuvor.
Willst du mich verklapsen?
Ich habe dir zwei funktionierende HTML- und CSS-Auszüge gepostet. Wenn du die nicht einmal ausprobierst, dann kann dir wirklich niemand helfen!Nein ich will Dich natürlich nicht verklapsen, und ich muss mich bei Dir entschuldigen, vielen Dank noch mal, es hat nun genau so geklappt wie Du es beschrieben hattest. Eine Frage hätte ich allerdings noch, und zwar wie kann ich das linke Bild noch etwas einrücken, so dass es ca. 1 mm unter dem "v" von "vorstellen" steht?
http://www.bilder-upload.eu/show.php?file=ZJojzH1Ye8FARE2.jpg
Ansonsten hätte ich nur noch das Problem auf der Hauptseite, dass sich sämtliche Objekte je nach Bildschirmauflösung verschieben. Die müssen sich doch irgendwie fixieren lassen? Daher habe ich auch so oft das "position:absolute" verwendet, weil ich dachte, dass ich sie damit fixieren würde. Doch dem war wohl nicht so?
Auch hatte ich bereits von einem Kumpel erfahren, dass ich "em" satt "px" verwenden solle, was ich dann auch versucht habe. Dann hat sich zumindest mal mein einer Contentbereich nicht mehr mitverschoben, während die restlichen Objekte sich dennoch verschoben haben. Zudem musste ich feststellen, dass "em" wohl weniger genau ist, als "px". Da man mit "em" leider nicht mehr hundertprozent die vorherige Position trifft, weil man damit zu große Sprünge macht. Wenn ich Kommawerte angeben könnte, so würde es vielleicht gehen, doch auch das geht leider nicht.
Auf Wiederlesen
DetlefAlso noch mal vielen Dank für alles!
Gruß
Charly2010
-
Hallo Charly2010
… Eine Frage hätte ich allerdings noch, und zwar wie kann ich das linke Bild noch etwas einrücken, so dass es ca. 1 mm unter dem "v" von "vorstellen" steht?
Schau dir an, bei welchem Element welcher Abstand (margin bzw. padding) vergrößert oder verkleinert werden muss, damit der von dir gewünschte entsteht.
http://www.bilder-upload.eu/show.php?file=ZJojzH1Ye8FARE2.jpg
An einer Grafik kann man das schlecht sehen.
Übrigens: Millimeter ist in dem Fall eine der unsinnigsten Maßeinheiten.Ansonsten hätte ich nur noch das Problem auf der Hauptseite, dass sich sämtliche Objekte je nach Bildschirmauflösung verschieben.
Da wir deine Hauptseite nicht kennen, können wir das weder beurteilen noch dabei helfen eine Lösung zu finden. Die beste Hilfe ist möglich, wenn ein Link auf die problematische Seite gepostet wird.
Auch hatte ich bereits von einem Kumpel erfahren, dass ich "em" satt "px" verwenden solle, was ich dann auch versucht habe.
Einfach em statt px verwenden bringt meist keinen Nutzen. Bei der Auswahl der verwendeten Maßeinheiten ist ein wenig Überlegung erforderlich. Oft empfiehlt es sich em für Schriftgrößen und für die Elemente zu verwenden, die direkt von der Schriftgröße abhängen sollen oder müssen, px für Grafiken und andere Elemente, deren Größe von diesen abhängen sollen.
… weil man damit zu große Sprünge macht. Wenn ich Kommawerte angeben könnte, so würde es vielleicht gehen, doch auch das geht leider nicht.
Selbstverständlich sind nicht nur ganze Zahlen möglich (Numerische Angaben).
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Charly2010
Hi Detlef,
… Eine Frage hätte ich allerdings noch, und zwar wie kann ich das linke Bild noch etwas einrücken, so dass es ca. 1 mm unter dem "v" von "vorstellen" steht?
Schau dir an, bei welchem Element welcher Abstand (margin bzw. padding) vergrößert oder verkleinert werden muss, damit der von dir gewünschte entsteht.
Ja da hatte ich zwar dran rumgespielt, aber irgendwie hat sich da nich wirklich was bewegt, vermutlich wegen dem "float-left", was aber natürlich wichtig ist.
An einer Grafik kann man das schlecht sehen. Übrigens: Millimeter ist in dem Fall eine der unsinnigsten Maßeinheiten.
ich meinte jetzt halt etwas einrücken, 1 mm war vielleicht etwas übertrieben, aber so ca. 0,5 cm oder so.
Selbstverständlich sind nicht nur ganze Zahlen möglich (Numerische Angaben).
Cool, dass das geht, hatte es mit einem normalen Komma, statt mit einem Punkt versucht - wie dämlich von mir. ;-)
Ansonsten hätte ich nur noch das Problem auf der Hauptseite, dass sich sämtliche Objekte je nach Bildschirmauflösung verschieben.
Da wir deine Hauptseite nicht kennen, können wir das weder beurteilen noch dabei helfen eine Lösung zu finden. Die beste Hilfe ist möglich, wenn ein Link auf die problematische Seite gepostet wird.
Die Seite ist (zum Glück) noch nicht oben, aber hier wäre mal der Code (da sind natürlich noch genug andere Bugs drin, diese mal bitte ignorieren, auch pos. absolute etc., sofern das nicht für diesen unerwünschten Effekt mit verantwortlich ist):
<!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: #head { width: 100%; text-align: center; } navikasten { position: } .navi { font-weight: bold; font-family: arial; line-height: 2em; text-align:left; color:white; font-size:12px } #Table1 { font-family: Century Gothic; color: darkblue; font-size: 80%; font-weight: bold; } #content { border: black px inset; width: 690px; background-color: #DCDCDC; font-family: Arial; padding: 30px; padding-top: 620px; margin: 0px auto; filter: alpha(opacity=80); /** MS IE only **/ -moz-opacity: 0.8; /** Gecko only **/ } #content p { color: black; font-family: Arial; font-size: 108%; font-weight: ; } body { background-color: #455063; background-position: ; background-repeat: ; margin: 0px; padding: 0px; } #Div { height: 0px; 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:500px; left:25px;"> <br> <p style="text-align:center;font-family:Arial;font-size:12px;color:white;margin-left:0;margin-right:50px;"> <b>Firmenname<br>Strasse<br>PLZ Ort<br> <br>Firmensitz<br>Strasse<br>PLZ Ort</b></p> </div> <div style="position:absolute; bottom:100px;left:288px;"><br> <img src="Bilder\CIMG6818.JPG" width="690" height="500" alt="Background"></div> <div class="shadow5"><div class="shadow4"><div class="shadow3"><div class="shadow2"><div class="shadow"> <a class="color3" href="Max Mustermann"><img src="" width="120" height="130" alt="Max Mustermann"></a></div> </div></div></div></div> <div style="position:absolute; bottom:232px; left:36px;"> <Table border="0" bgcolor="" cellspacing="0" cellpadding="4" face="Arial"> <colgroup> <col width="5"> <col width="140"> </colgroup> <td style="text-align:left;font-family:Arial;font-size:12px;color:lightgrey">Inhaber: <td style="text-align:left;font-family:Arial;font-size:12px;color:lightgrey">Dr. Max Mustermann <td> </td> </tr> <tr> <td style="text-align:left;font-family:Arial;font-size:12px;color:lightgrey"> Phone:<br>Mobile:<br>Fax:</td> <td style="text-align:left;font-family:Arial;font-size:12px;color:lightgrey">+49 (0) 711 - <br>+49 (0) 170 - <br>+49 (0) 711 - </td> </tr> <td style="text-align:left;font-family:Arial;font-size:12px;color:lightgrey">e-mail: <td style="text-align:left;font-family:Arial;font-size:12px;color:lightgrey">info@max-mustermann.de </td> </tr> </table> </div> <div style="position:absolute; bottom:82px; left:14px;"> <div class="navikasten"> <ul style="text-align:left;"> <li class="navi"> <a class="color1"href="Firmenprofil.html">Das Unternehmen</a> </li> <li class="navi"> <a class="color1"href="Referenzen.html">Referenzen</a> </li> <li class="navi"> <a class="color1"href="Anfahrt.html">So finden Sie uns </a> </li> <li class="navi"> <a class="color1" href="Kontakt.html">Kontakt </a> </li> <li class="navi"> <a class="color1" href="Impressum.html">Impressum </a> </li> </div> </div> <div id="#Table1"> <div style="position:absolute; bottom: 10px; left:1022px;"> <Table border="0"; bgcolor="#DCDCDC"; cellspacing="0"; cellpadding="2"; face="Arial> <thead> </thead> <tfoot> <col width="230"> <td><p style="text-align:left;font-family:Century Gothic;font-size:20px;color:#455063"><u>Leistungen</u></p></td> <tr></tr> <td valign="top" align="left"><ul style="text-align:left;font-family:Arial;font-size:12px;color:#455063"> <b><li><a class="color3" href="">Bodenabdichtung (Tiefbau)</a></p></li></b><br> <ul> <li>Schwimmbäder</li> <li>Teiche</li> <li>Deponien</li> <li>Chemielagerflächen</li> <li>Werkhallen</li> <li>Hofflächen</li> <li>Sprinklerbehälter</li> <li>Trinkwasserbehälter etc.</li> </ul> </td> <tr></tr> <td valign="top" align="left"><ul style="text-align:left;font-family:Arial;font-size:12px;color:#455063"><b><li> <a class="color3" href="">Dach- und Gebäudeabdichtung</a></li></b><br> <ul> <li>Flachdächer</li> <li>Dachbegrünung</li> <li>Membranbau etc.</li> </ul> </td> <tr></tr> <td valign="top" align="left"><ul style="text-align:left;font-family:Arial;font-size:12px;color:#455063"><b><li> <a class="color3" href="">Fensterbau</a></li></b><br> <ul> <li>Aluminiumfenster</li> <li>Aluminiumtüren</li> <li>Wintergärten</li> <li>Fassaden etc.</li> </ul> <tr></tr> <td valign="top" align="left"><ul style="text-align:left;font-family:Arial;font-size:12px;color:#455063"><b><li> <a class="color3" href="">Alternative Energie- <br> u. Wärmetechnik</a></li></b><br> <ul> <li>Photovoltaik</li> <li>Solarthermikanlagen</li> <li>Energieberatung</li> </ul> <tr></tr> </Table> </div> <div id="content"> </div> </div> </div> </div> </div> </div> </body> </html>So sollte die Seite nach möglichkeit auf allen Monitoren und sämtlichen Browsern dargestellt werden:
Firefox Normal:
http://www.bilder-upload.eu/show.php?file=0lBY4BoVLiFVyM5.jpg
So sieht sie beim Firefox leider im Vollbild aus:
http://www.bilder-upload.eu/show.php?file=49TrmSUXvKGqAHg.jpg
Und so sieht sie im IE 7.0 aus:
http://www.bilder-upload.eu/show.php?file=rwKo4Kg6BKzjTSX.jpg
Die rechte Tabelle werde ich vermutlich auch noch per Navikasten lösen, doch das sind ja Details die hier jetzt erst mal nebensächlich sind.
Ich wäre Dir sowas von dankbar, wenn Du mir sagen kannst woran das liegt, denn das ist wirklich noch mein Hauptproblem.
Auf Wiederlesen Detlef
Bis dann.
Gruß
Charly2010
-
-
-
-
Hallo Charly2010,
nun noch eine ausführlichere Antwort:
Ich hatte es versucht, doch dann waren die Bilder unter einander, …
Dann hattest du entweder das float:left vergessen oder die Summe aller Breiten (width) und Abstände (margin und padding) war so groß, dass sie nicht mehr nebeneinander passten.
Weil ich noch Anfänger bin.
Dann empfehle ich dir ganz besonders, dir _erst_ Gedanken über die sinnvolle Struktur deines HTML zu machen, nachlesen, eventuell nachfragen, und dich erst dann um das schicke Aussehen zu kümmern.
Lies dazu mal meine Herangehensweise und nochmal meine Herangehensweise.Das mag schon sein, da will ich ja auch hinterher noch mit meinem Quellcode hin, …
Genau falsch herum!
Das CSS setzt auf das HTML-Grundgerüst auf.
Du kannst das HTML nicht beliebig ändern, ohne das CSS anpassen oder gar komplett neu schreiben zu müssen. Dagegen kannst du bei einem guten HTML-Grundgerüst mittels CSS fast jedes Aussehen erreichen, ohne das HTML ändern zu müssen (oder selbst im Extremfall nur minimal).Ich möchte jetzt halt erst mal das Layout irgendwie hinbekommen, dass es mir gefällt und anschließend werde ich versuchen das mit dem Quellcode noch etwas besse zu lösen, …
Wenn du nachträglich das HTML änderst, kann es dir passieren, dass du noch einmal von vorn anfängst, das Layout zu basteln.
Wozu position:absolute?
Why not?
Ist vielleicht nicht immer passend, aber manchmal braucht man es wohl.
Fast alle notwendigen Ausrichtungen, Abstände usw. lassen sich durch den Einsatz von margin, padding, width, min-width, max-width, height, min-height, max-height, float und clear erreichen. Dabei kann meist auf den Einsatz von height verzichtet werden. Wenn dabei keine grundsätzlichen Fehler oder Ungeschicklichkeiten passieren, passt sich alles wunderschön der Größe der Inhalte an, so dass es auch bei einer Änderung der Schriftgröße nicht zu einer Überlagerung von Inhalten kommt, die eine Webseite unbenutzbar machen können. Im Extremfall wird zwar das Aussehen der Seite unter der Schriftgrößenänderung leiden, die Seite bleibt aber immer les- und benutzbar.
Position wird nur im Ausnahmefall benötigt, z.B. wenn ein Element absichtlich andere (teilweise) überdecken soll.
hier verstehe ich nicht was Du meinst. Ja ich nehme CSS ja auch fürs Aussehen.
Das u-Element, wie auch das b-Element bestimmt lediglich das Aussehen (u = Text unterstreichen, b = Text fett darstellen), außerdem ist u in der von dir verwendeten HTML-Version nicht zulässig.
Dein HTML-/CSS-Schnipsel:~~~html
<u><b style="text-align:left;font-family:Arial;font-
size:14px">
<a class="color3" href="index.html">Home</a></u></b>bei dem außerdem die Verschachtelung falsch ist (b wird \_innerhalb\_ von u geöffnet aber nicht wieder geschlossen), könnte einfacher so aussehen: `<a class="color3" style="text-align:left;font-family:Arial;font-size:14px; font-weight:bold;" href="index.html">Home</a>`{:.language-html} (Die Inlinestyles erstmal drin gelassen, die gehören dann selbstverständlich auch noch ins zentrale CSS.) > Ist ja letztendlich egal wie sich's bewerkstelligen lässt, Hauptsache das Layout stimmt nachher. Ist dein Browser, der mit dem du deine Seite betrachtest, der einzige mögliche Userclient? Was ist mit einem Sehbehinderten, der einen Browser mit übergroßer Schrift oder gar eine Braillezeile oder einen Screenreader verwendet? Was ist mit einer Suchmaschine? Sie können den Inhalt nicht richtig erfassen, wenn das optische Layout auf deinem Monitor zwar stimmt, die HTML-Struktur aber unsinnig ist. > … Die war ja auch ursprünglich in reinem HTML, erst durch das CSS wurde sie zudem was sie jetzt ist, dazu hat man CSS ja. In reinem HTML sieht die Seite sch\*\*\*\*e aus. Wie? Sieht sie nur sch\*\*\*\*e aus oder ist sie auch Sch\*\*\*\*e? Erst wenn sie in reinem HTML gut benutzbar ist, sich die Inhalte gut so erfassen lassen, wie sie gemeint sind, dann ist es sinnvoll, ihr mittels CSS das gewünscht Aussehen zu geben. > … Nur in HTML, wäre ja dann lediglich der Hintergrund und die paar Tabellen, die nur auf der Hauptseite sind. Also sprich in HTML wäre es praktisch eine leere Seite. Wenn es in reinem HTML eine leere Seite ist, dann \_ist\_ es eine \_leere\_ Seite, egal wie du sie stylst. > Äh nein, da ich da keine Texte ändern werde, wenn ich sie erst einmal drin habe. Sag niemals nie. ;-) > Ich weiß wie eine Aufzählung geht, die ist anschließend sogar noch drin, hat da aber nix zu suchen, da die in die Unternehmensvorsellung gehört. Ob die Referenzen eine Aufzählung darstellen (also eine Liste), hat doch überhaupt nichts damit zu tun, ob es woanders bereits eine Liste gibt. > Ja schon, aber die ist doch groß genug und mit px kann ich die Größe genauer bestimmen. Nein, das kannst du nicht! Dein Seitenbesucher kann immer die Schriftgröße in seinem Browser ändern, wenn er das will. Es ist meist besser, die Schriftgröße in em anzugeben, weil man sich dessen dann eher bewusst ist. Genauso kann man dann auch Breiten, Höhen oder Abstände, die von der Schriftgröße abhängen müssen, in em angeben, damit sich diese der Schriftgröße anpassen. Auf Wiederlesen Detlef -- - Wissen ist gut - Können ist besser - aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-
-
-