Gleich mehrere CSS Probleme

[joha]

Hallo zusammen!

nach langer Zeit versuche ich mich mal wieder mit css, habe mir mal eine Vorlage gemacht, an der ich übe
nun habe ich paar Probleme, und komme einfach nicht dahinter

1. bei der Layout2

im IE zeigt es mir den orangen Balken unten links an, der eigentlich in der rechten Spalte unten stehen soll, im Opera ist es korrekt


2. das blaue Textfeld soll neben einer Grafik stehen, ich möchte gerne , dass die Breite bis Ende lila Balken ausfüllt,
ich habe schon eine Pixelbreite angegeben, das ändert aber nix, wenn ich mehr text eingeben, rutscht alles weg


wenn ich die Kopfgrafik nicht über die ganze breite machen will, sondern soll links eine grafik und daneben text stehen,

haut es mir den Text beim IE drunter und beim Opera überlagert es die menü…

siehe Layout3

in der css Vorlage vorlagehabe ich als Beginn ein Sternchen drin, war mehr aus Versehen *gg
ich dachte, das muss raus, wen ich das raus nehme, ändern sich Abstände in den Sidebarleisten?

Wie kommt das ?


Vielleicht kann mir ja jemand auf die Sprünge helfen wäre toll.

Gruß

Joha

 

[Efchen]

das blaue Textfeld soll neben einer Grafik stehen, ich möchte gerne , dass die Breite bis Ende lila Balken ausfüllt

Lass den Text nicht floaten und gib ihm keine Breite.

wenn ich die Kopfgrafik nicht über die ganze breite machen will, sondern soll links eine grafik und daneben text stehen, ...

Entferne div#tabbild (ist eh überflüssig) und lass das <img> floaten.

in der css Vorlage habe ich als Beginn ein Sternchen drin, war mehr aus Versehen *gg
ich dachte, das muss raus, wen ich das raus nehme, ändern sich Abstände in den Sidebarleisten?
Wie kommt das ?

Das Sternchen steht für "alle Tags" und entfernt in allen Elementen sämtliche margins und paddings.

Vielleicht kann mir ja jemand auf die Sprünge helfen wäre toll.

Ja, ich weiß da nochwas: Guck Dir mal Dein HTML an - da fehlt fast jegliche Semantik und Du hast die divitis. Jedes zweite div (oder mehr) ist überflüssig. Deine Gewichtung der Überschriften stimmt auch nicht, Du hast ein <h2> aber kein <h1> - das ist unlogisch.

 

[joha]

danke für die Antwort

ich habe nun geändert und es haben sich die Probleme fast gelöst....

die Überschrift habe ich ganz raus genommen da ich diese gerne separat formatieren möchte

divitis *g

ok, aber ich habe versucht paar raus zu nehmen da zerschießt es mir wieder so einiges

hier die Änderung


Joha

@ efchen

der divsalat lässt mir ja nun keine ruhe *g

wie kann man als relativer Anfänger einen besseren html code hin bekommen mit der richtigen Semantik?

Ich will mir eine Vorlage basteln die ich dann sollte sie mal gut funktioniren für mehrere Sachen anwenden kann deswegen erst einmal nur Farbenspiel dient für mich auch zum besseren Verständnis

Gibt es gut verständliche Beispiele dazu?

Ich meine jetzt nicht selfhtml und so sondern etwas, was man einfach gut nachvollziehen kann

Ich hoffe, hier ist mal als Anfänger nicht gerade verkehrt

danke
Joha

 

[Efchen]

divitis *g
ok, aber ich habe versucht paar raus zu nehmen da zerschießt es mir wieder so einiges

Ja, das ist eine gefährliche Krankheit. Und sie ist ansteckend und verbreitet sich rasend schnell.
Mittlerweile glauben 80% der Webmaster dieser Welt, <div> wäre etwas besonderes und für CSS-Layout unbedingt notwendig - was natürlich horrender Blödsinn ist.

Dass es Dir alles zerschießt, liegt daran, dass Du das Feld von hinten aufrollst. Du versuchst zuerst Layout zu machen, ohne Inhalt zu haben. Dann bist Du natürlich gar nicht in der Lage, semantisch sinnvolle Tags zu verwenden und musst auf <div> zurück greifen. Wenn Du die dann natürlich wahllos entfernst, klappt Dein Layout zusammen wie ein Kartenhaus.

Eigentlich musst Du anfangen mit Deinem Inhalt. Diesen dann semantisch sinnvoll auszeichnen. Dabei wirst Du vermutlich kein oder nur sehr wenig <div>s brauchen.

Dein Layout baust Du dann auf Deinem HTML-Code auf.

wie kann man als relativer Anfänger einen besseren html code hin bekommen mit der richtigen Semantik?

Indem Du mit dem Inhalt anfängst. Semantik kannst Du nur machen, wenn Du Inhalt hast. Wenn Du keinen Inhalt hast, wie willst Du dann beurteilen, ob der nicht vorhandene Inhalt eine Überschrift, ein Textabsatz oder eine Adresse ist?

Gibt es gut verständliche Beispiele dazu?

IMHO ist eine HTML-Referenz alles, was man braucht. HTML und Semantik ist eigentlich in einer Stunde gelernt.

Ich meine jetzt nicht selfhtml und so sondern etwas, was man einfach gut nachvollziehen kann

SelfHTML hat den Anschluss leider verpasst. Die HTML-Referenz dort ist gut. Leider stehen dort auch Tags für die physische Textauszeichnung, die ja mit CSS gemacht wird. Nutzt man SelfHTML, muss man wissen, welche Tags man benutzen kann und welche nicht. Dazu brauchts eigentlich keine besonderen Computerkenntnisse, Semantik ist eigentlich etwas, das mehr ins Fach Deutsch fällt.

Ich hoffe, hier ist mal als Anfänger nicht gerade verkehrt

Sicher nicht! Wir helfen ja! Aber es fliegen einem vielleicht nicht gerade die gebratenen HTML-Tags in den Mund :-)

Und die "versprochene" Stunde, in der man HTML lernen kann, klappt natürlich nicht bei der Kommunikation über ein Forum.

 

[joha]

danke Efchen für die Antwort

Ansatzweise verstehe ich dich ja ;-), aber die Sache von hinten aufrollen stimmt nicht so ganz.

Ich möchte genau so, wie oben im Link die Seite aufbauen

da ist es doch vorerst egal, ob da im menü Link steht, oder was anderes,
im Inhalt möchte ich es so, dass jeweils links ein Bild steht, rechts der Text, und das soll dann mehrmals untereinander sein.

Da ergibt sich für mich die Frage, sollte ich diesen Inhalt doch als Tabelle machen?

Mir ist schon klar, dass mir hier keine fertigen HTML Seiten in den Mund fliegen,

aber es wäre schon ineressant zu wissen, wo genau in meinem Fall divs überflüssig sind, ich weiß, ob ich das raus finde?? naja ich versuche es schon...aber ob es klappt, mal schauen

Danke nochmal

Joha

 

[_Thor_]

Also ein Menü ist eine unsortierte Liste (<ul>) von Verweisen, Text wird als Paragraph (<p>) ausgezeichnet, Überschriften als Headlines einer bestimmten Ebene (<h1> bis <h6>). Dies alles sind Blockelemente wie ein <div>, können also auch dementsprechend Formatiert werden und müssen nicht durch ein <div> ersetzt, oder von einem umgeben sein.

Tabellen sind nur für tabellarische Daten, ein Menü fällt nicht in diese Kategorie, wäre also falsch.

Für deine Bilder und Texte kannst du ein <div> verwenden, das jeweils das <img> und den dazugehörigen Paragraph umschließt.

<div>
  <img src="" alt="" title="" />
  <p>Text</p>
</div>

In diesem Fall wäre ein <div> richtig eingesetzt.

 

[Efchen]

Ansatzweise verstehe ich dich ja ;-), aber die Sache von hinten aufrollen stimmt nicht so ganz.

Weil Du mich eben nur ansatzweise verstehst.

da ist es doch vorerst egal, ob da im menü Link steht, oder was anderes,

Ich rede ja nicht davon, dass dort falscher Inhalt steht, ich rede davon, dass Du keinen sinnvollen HTML-Code schreiben kannst, wenn Du noch gar keinen Inhalt hast.

Da ergibt sich für mich die Frage, sollte ich diesen Inhalt doch als Tabelle machen?

So eine Frage stellt sich Dir nur, weil Du das Feld von hinten aufrollst. Würdest Du vorne, beim Inhalt und dann bei HTML, anfangen, würdest Du nie auf die Idee kommen, eine Tabelle für Layoutzwecke zu missbrauchen.

Wie hat neulich mal ein Pfarrer gesagt:

Warum fangen die Menschen beim Schiffsbau in der Mitte an?
Weil sie sich hinten und vorne nicht auskennen.

Ich musste sofort an so Leute wie Dich denken, die immer zuerst mit dem Layout anfangen. Der Grund ist immer der selbe. Diese Leute kennen sich hinten und vorn nicht aus mit dem Erstellen von Websites, daher fangen sie an der ungünstigsten Stelle an.

aber es wäre schon ineressant zu wissen, wo genau in meinem Fall divs überflüssig sind

Fast überall.
Du kannst sicher 90% Deiner divs rauswerfen.
<div> wird nur verwendet, um mehrere Elemente zu gruppieren.

ich weiß, ob ich das raus finde?? naja ich versuche es schon...aber ob es klappt, mal schauen

Fang nicht hinten an, indem Du versuchst, überflüssige divs zu finden, fang vorne an und schreib Deinen Inhalt in eine leere Datei. Dann zeichnest Du diesen semantisch sinnvoll aus, wie _Thor_ das schon angerissen hat. Und wenn Du es dabei schaffst, NICHT an Dein Layout zu denken, dann bist Du auf dem richtigen Weg. Auf der sechsspurigen, frisch geteerten Autobahn. Im Moment gehst Du den steinigen Waldweg mit vielen Schlaglöchern, aber nicht den, der durch einen schönen Wald führt, wo Du die Seele baumeln lassen kannst, sondern der führt durch einen Wald, wo alle Bäume ausgebrannt sind und nichts mehr wächst.

Danke nochmal

Gerne, jederzeit, wenn Du willst, kriegen wir Dich schon wieder zurück auf die Autobahn! :-)

 

[joha]

so, ich habe von vorne angefangen *g

die konkrete Aussage von Thor hat mir schon ein ganzes Stück weiter geholfen,

hier ist es neu

Layout

Ich möchte rechts und links je 2 Menüboxen habe, die Conten-boxen sollen sich aber dann mehrmals wiederholen, ich habe nun dies mit content2 benannt, und mit margin-left versehen, im IE kann man sich mit Pixelangaben dahin bringen, aber Opera zeigt es dann völlig anders an

2. Sache

ich möchte gerne die Hintergrundfarbe zwischen den Menüboxen in einer anderen Farbe haben, das würde also bedeuten, ich mache um die gesamte Sache wieder einen div???

oder gibt es da auch eine andere Lösung

Danke
Joha

( bin aber schon froh, dass paar solcher kranken Dinger weg sind *g)