nicht angemeldet
Positionierung von Elementen II
Hallo,
dank eurer Hilfe http://forum.de.selfhtml.org/archiv/2004/9/88693/ habe ich nun mein ursprüngliches Problem behoben. Dafür habe ich jetzte in anderes Problem *freu* Seht's euch mal an: http://www.8ung.at/thea/startseite.jpg
Wie euch vielleicht auffällt, fehlt der dünne Rahmen links und rechts und der untere Bereich ist nicht weiß ausgefüllt, so wie er es sien sollte. Das kommt daher, weil das übergeordnete Element, nicht mehr funzt *krisekrieg*
Also, es sieht wie folgt aus:
-------------------------------------------------
| A |
-------------------------------------------------
-------------------------------------------------
| B |
| ------------------- ---------------------- |
| | float: C | | float:left | |
| | left | | D | |
| ------------------- ---------------------- |
| |
-------------------------------------------------
-------------------------------------------------
| E clear:left |
-------------------------------------------------
Das Element B ist dazu gedacht, dass der gesamte Bereich, den C und D abdeckt, weiß hinterlegt ist, sowie eine graue Linie rechts und links zu sehen ist. Die Höhe von B passt sich aber nicht mehr automatisch an, sprich die Elemente C und D sind nicht mehr eingebettet.
Fragliche Stelle im Quelltext:
<div class="haupt">
<div style="margin:0;" class="linkeseite">
Mailgroup
</div>
<div class="textfeld">Herzlich Willkommen...</div>
</div>
div.haupt {
border-left:solid 1px #6F6F6F; border-right:solid 1px #6F6F6F;
width:778px;
background-color:#FFFFFF; }
div.linkeseite {
width:131px;
float:left; }
div.textfeld {
width:634px;
border-left:solid 1px #7F7F7F;
padding-left:4px; padding-right:8px;
text-align:justify;
float:left; }
Bitte Hilfe!!!
Gruß Thea
-
Ach ja, das Original: [url:http://www.wollingster-see.de] - aber die Seite wird hier eh schon jede/r kennen :7
-
Hallo Thea
Hallo,
dank eurer Hilfe http://forum.de.selfhtml.org/archiv/2004/9/88693/ habe ich nun mein ursprüngliches Problem behoben. Dafür habe ich jetzte in anderes Problem *freu* Seht's euch mal an: http://www.8ung.at/thea/startseite.jpg
du bist echt hartnäckig - im postiven Sinne ;-)
Aber beim durchsehen deines Quelltextes - ich hab mir sogar alles runtergeladen - ist mir es doch zuviel geworden, dir gezielt zu helfen. Dass du versuchst mit CSS deine Seiten zu gestalten ist sicher ein guter weg, aber dein Ansatz ist etwas - wie soll ich es sagen? mhhh? - stümperhaft.
Das Problem ist, dass du versucht statt einer Tablle alles mit DIV's zu erreichen, das ist eine sogennante DIV Suppe und deine ist besonders fett. Da sind unzählige leere DIV Elemente auf deiner Seite das ist schonmal schlecht. Auch leere DIV's die dann 'linie' heißen deuten darauf hin, dass du die Möglichkeiten von CSS nicht nutzt.
Wie es besser gehen könnte versuch ich mal exemplarisch an Aktionen leiste zu demonstrieren.
Die Kunst mit CSS zu gestalten ist die, dass du erst eine HTML Seite baust, wo der Inhalt entsprechend seiner Stellung im Text einem HTML Element zugeordnet wird. Wenn du dir diese Leiste anschaust siehst du eine Aufzählung, erst ein Titel, dann ein Text. dies passt optimal zu dem HTML Element Beschreibnungs (s. selfhtml). Ich hab dann noch ein Verbesserungsvorschlag bezüglich der Zugänglichkeit eingebaut und die 'pt' angaben für die Schriftgröße in % umgewandelt (pt ist keine geeignete Größe für die Darstellung am Monitor) und der HTML Code sieht, dann so aus:
<body>
<div id="linkeseite">
<dl>
<dt>
<a href="http://www.wollingster-see.de/news/show_news.php?subaction=showfull&id=1093491225&archive=&template=wosee"
onclick="window.open(this.href, '_News', 'HEIGHT=500,WIDTH=545,resizable=yes,scrollbars=yes');return false;"
>26.08.2004</a>
</dt>
<dd>
Heute Bericht in der Nordsee-Zeitung über unsere Homepage.</dt><dt>
<a href="http://www.wollingster-see.de/news/show_news.php?subaction=showfull&id=1093386410&archive=&template=wosee" onclick="window.open(this.href, '_News', 'HEIGHT=500,WIDTH=545,resizable=yes,scrollbars=yes');return false;"
>24.08.2004</a>
</dt>
<dd>Gästebuch wieder freigegeben</dd><dt>
<a href="http://www.wollingster-see.de/news/show_news.php?subaction=showfull&id=1093377511&archive=&template=wosee"
onclick="window.open(this.href, '_News', 'HEIGHT=500,WIDTH=545,resizable=yes,scrollbars=yes');return false;"
>24.08.2004</a>
</dt>
<dd>Galerie wieder online!</dd><dt>
<a href="http://www.wollingster-see.de/news/show_news.php?subaction=showfull&id=1093211557&archive=&template=wosee"
onclick="window.open(this.href, '_News', 'HEIGHT=500,WIDTH=545,resizable=yes,scrollbars=yes');return false;"
>23.08.2004</a>
</dt>
<dd>Auftrieb der Schafe</dd>
</dl>
</body>und der CSS Code so:
<style type="text/css">
body
{
font-family:Verdana;
font-size:80%;
color:#000;
background-color:#fff;
}
a:link { color:#000000; text-decoration:none; }
a:visited { color:#000000; text-decoration:none; }
a:active { color:#000000; text-decoration:none; }
a:hover { color:#FF9933; text-decoration:none; }#linkeseite
{
width:131px;
background-color: rgb(239, 239, 239);
border-right:solid 1px #7F7F7F;
border-left:solid 1px #7F7F7F;
}
#linkeseite dl
{
text-align:center;
background-color:#fff;
}
#linkeseite dt
{
font-weight:bold;
background-color:#fff;
border-top:solid 1px #7F7F7F;
margin-top:10px;
}
#linkeseite dd
{
margin:0;
border-bottom:solid 1px #7F7F7F;}
</style>
Das ganze könnte man sicher noch optimieren in Bezug auf den Rest der Seite, aber wie gesagt, das ist mir zu Zeitaufwendig, da der komplette code umgebaut werden müßte.
Ich hab keine Ahnung wie du deinen Stil verbessert könntest, aber mein Eindruck ist dass du zuviel willst. wie gesagt eine Seite fängt mit der HTML Struktur an, dann kommt das Design, dann lassen sich auch sehr flexibel Änderungen vornehmen. Deine Methode mit den unzähligen ineinander geschachtelten DIV's, CSS Klassen (die man in der Regel vermeiden kann und sollte), inline Styles ist nicht besonders flexibel und führt immer wieder zu Mißerfolg.
Struppi.
-
Hi,
A <div class="haupt"> <div style="margin:0;" class="linkeseite"> Mailgroup </div> <div class="textfeld">Herzlich Willkommen...</div> </div> Wie schon gesagt: es gibt auch passendere Elemente als DIV, z.B. wäre
<p class="linkeseite">
<h1 class="textfeld">Herzlich Willkommen...</div>
u.U. angebracht und den inline-Style, wenn er überhaupt nötig werden sollte (bis jetzt nicht der Fall) wäre dann im CSS über .haupt p {} anzusprechen. Da "haupt" wohl einmalig sein wird, wäre eine ID auch sinnvoller als eine Klasse.
| B |
| ------------------- ---------------------- |
| | float: C | | float:left | |
| | left | | D | |
| ------------------- ---------------------- |
E clear:left Das Element B ist dazu gedacht, dass der gesamte Bereich, den C und D abdeckt, weiß hinterlegt ist, sowie eine graue Linie rechts und links zu sehen ist. Die Höhe von B passt sich aber nicht mehr automatisch an, sprich die Elemente C und D sind nicht mehr eingebettet.
Logisch, wenn das clearende Element erst außerhalb von B kommt. Du wirst nicht umhin kommen, ein zusätzliches Element mit clear:left innrhalb von B zu setzen.
width:778px;
finde ich äußerst ungünstig gewählt. Ein paar px weniger, umd Du hast die Chance, daß auch in 800px breiten Fenstern kein Scrollbalken erscheint.
div.textfeld {
width:634px;
float:left; }Du solltest nicht "pixelgenaue" Angaben machen, wenn dies vermeidbar ist. In diesem Fall könntest Du auf float verzichten (genauso in D) und lediglich margin-left und ggfls. margin-right angeben. Das hat den Vorteil, daß es unabhängig vom Box-Modell den zur Verfügung stehenden Platz ausnutzt.
freundliche Grüße
Ingo-
Hallo Ingo
Wie schon gesagt: es gibt auch passendere Elemente als DIV, z.B. wäre
<p class="linkeseite">
<h1 class="textfeld">Herzlich Willkommen...</div>Würdest du das wirklich so machen (ich meine jetzt nicht das falsche schliessende DIV)?
Um Bereiche zu gruppieren halte ich ein DIV für durchaus das einzige sinnvolle HTML Tag, oder?
Letztlich geht es auch darum, die Seite zu strukturieren und eine Überschrift gehört IMHO nicht in einen Absatz, sondern steht darüber.
Struppi.
-
Hi,
Würdest du das wirklich so machen (ich meine jetzt nicht das falsche schliessende DIV)?
oops - kopiert und unvollständig geändert, danke für die Richtigstellung. Und zur Antwort: Ja.
Um Bereiche zu gruppieren halte ich ein DIV für durchaus das einzige sinnvolle HTML Tag, oder?
natürlich. Nur daß das hier offensichtlich nicht der Fall ist.
<div style="margin:0;" class="linkeseite">
Mailgroup
</div>sieht mir zunächst mal nicht nach einer Gruppierung aus. Wenn doch, hast Du freilich Recht.
Und
<div class="textfeld">Herzlich Willkommen...</div>
in Verbindung mit
A sieht mir sehr starl nach einer Überschrift aus.
und eine Überschrift gehört IMHO nicht in einen Absatz, sondern steht darüber.
schon klar - wie oben gesagt leider unvollständig ersetzt und das </p> verschlammt. Aber daß sie neben einem Absatz (oder z.B. einer Navigastion) steht, halte ich schon für vertretbar.
freundliche Grüße
Ingo
-
-