navi zu lang

[csstester]

warum hängt meine navi am rand über?

es ist zum aus der Haut fahren, was hab ich übersehen?

hab sie doch 100% breit gemacht und den #wrapper in em angegeben, eigentlich sollte die Navi dann doch innerhalb desselbigen bleiben.. oder mach ich nen denkfehler?

startseite

 

[neuroleptika]

boxmodel

warum hängt meine navi am rand über?
..

Du hast #navi eine Breite von 100% gegeben.
In Deinem Fall ist das <ul>. Listen haben je nach Browser unterschiedlich voreingestellte padding-Werte. Nach dem Boxmodel ergeben padding+border+width die Breite eines Elementes. Bei dir also width:100% plus padding.
Setze Padding für #navi mal auf 0:

#navi{
    float:left;
    width: 100%;
    margin:0;    
        padding: 0;
    list-style:none;
    background:  #fdba01 url(../image/bg.png) repeat-x bottom left;
}

Der Einzige Browser der border und padding nicht der breite hinzuadiert ist der Internet Explorer 5.

 

[csstester]

oh oh, ja vielen dank, hätt man ja auch drauf kommen können, nur liegt jetzt natürlich mein erster reiter der navi am linken rand, aber da find ich noch was.... schon erledigt..

weiß zwar nit obs elegant ist, aber habe nen extra div um die ul gelegt und diesem ein margin-left zugewiesen

erstmal Klasse wie schnell hier reagiert wird!!

 

[koslowski]

Hi,

warum hängt meine navi am rand über?

es ist zum aus der Haut fahren, was hab ich übersehen?
hab sie doch 100% breit gemacht und den #wrapper in em angegeben, eigentlich sollte die Navi dann doch innerhalb desselbigen bleiben.. oder mach ich nen denkfehler?
startseite

sach mal, in wieviel Foren hast du die Frage eigentlich noch gestellt?

In einem anderen ist sie dir doch schon beantwortet worden.:-|

 

[neuroleptika]

weiß zwar nit obs elegant ist, aber habe nen extra div um die ul gelegt und diesem ein margin-left zugewiesen

Das Div brauchst du nicht.
Gebe einfach dem ersten <li> eine klasse und der gibst du margin-left: xxem;

 

[csstester]

Hi,



sach mal, in wieviel Foren hast du die Frage eigentlich noch gestellt?

In einem anderen ist sie dir doch schon beantwortet worden.:-|

Schön das du aufpasst in wie viel Foren ich so nachfrage, dann aber bitte recherchier korrekt, denn im Xhtml forum, in welchem ich auch gepostet hatte kam die erste Antwort um 19uhr.. hier um 18.59, und zudem war die Antwort hier von neuroleptiker korrekt.

denn drüben wurde mir erzählt ich sollte 50.5em einsetzen, was aber zur folge hätte das wenn jemand die schriftgröße ändert sich auch die navie anders ändert als der Rest.

und nachdem Du oder jemand anders der sich zum aufpasser erklärt hatte drüben denselben post wie du hier brachte, (kam eh nix gescheites mehr.).. doch es kam noch ne gute Lösung die ich in meinem "angemachtseinfühlen" dann völlig überlesen hatte bevor ich dies hier postete... werde mich demnächst mal ein wenig mehr zurücknehmen und erstmal ATMEN

Und wo ist das Problem wenn ich eine Frage in 2 Foren Poste?

LG
HF

 

[koslowski]

Schön das du aufpasst in wie viel Foren ich so nachfrage, dann aber bitte recherchier korrekt, denn im Xhtml forum, in welchem ich auch gepostet hatte kam die erste Antwort um 19uhr.. hier um 18.59, und zudem war die Antwort hier von neuroleptiker korrekt.

denn drüben wurde mir erzählt ich sollte 50.5em einsetzen, was aber zur folge hätte das wenn jemand die schriftgröße ändert sich auch die navie anders ändert als der Rest.

und nachdem Du oder jemand anders der sich zum aufpasser erklärt hatte drüben denselben post wie du hier brachte, kam eh nix gescheites mehr.

Und wo ist das Problem wenn ich eine Frage in 2 Foren Poste?

LG
HF

du hast hier um 18.10 Uhr gepostet und drüben um 18.22 Uhr.

Die Antwort hier war korrekt und die drüben genauso, hättest ja px oder % statt em nehmen können.
Deine Begründung warum man kein em nehmen soll, ist vorsichtig ausgedrückt ziemlicher Blödsinn.

Außerdem hattest du dein default-padding noch drin. Informier dich mal über einen vernünftigen CSS-Prolog.

Das gleiche Problem in mehreren Foren zu posten ist egoistisch und rücksichtslos den Helfenden gegenüber.
Du verschwendest die Zeit der Leute in einem Foren wo sie sich netterweise mit deinem Problem rumschlagen, während woanders dein Problem vielleicht schon gelöst wurde.

Oder hättest du direkt bescheidgesagt wenn dein woanders gelöst worden wäre.

So wurde dein Problem in mehreren Foren gleichzeitig gelöst.

Glaubst du die Welt dreht sich nur um dich und deine Probleme?:twisted:

 

[csstester]

ich hab ja nun geatmet und mich entspannt, es eingesehen, meine Post korrigiert, mich entschuldigt... schade das du es wohl nicht mehr gesehen hast das ich 8 minuten bevor du gepostet hast meinen post geändert hatte.

Aber auch hier nochmal

Sorry, hab ich nicht drüber nachgedacht das mehrfachpostings in verschiedenen foren mehrarbeit verursachen.. bin da leider noch nicht so erfahren, kann sich aber ändern.

 

[neuroleptika]

Boha,
jetzt bekommst du es aber auch von allen Seiten.

Was ich wirklich nicht so nett fand ist das hier:

...(kam eh nix gescheites mehr.).. ..

.
Wenn ich im xhtmlforum einer der Antwortenden gewesen währe, würde ich mir auch komisch vorkommen.

Wird dir vielleicht so schnell nicht wieder passieren.

 

[koslowski]

Hi,

ich hab ja nun geatmet und mich entspannt, es eingesehen, meine Post korrigiert, mich entschuldigt... schade das du es wohl nicht mehr gesehen hast das ich 8 minuten bevor du gepostet hast meinen post geändert hatte.

Aber auch hier nochmal

Sorry, hab ich nicht drüber nachgedacht das mehrfachpostings in verschiedenen foren mehrarbeit verursachen.. bin da leider noch nicht so erfahren, kann sich aber ändern.

na, is ja schon gut.:)

Ich kann mich schnell aufregen aber ich rege mich auch schnell wieder ab.

Da ich prinzipiell keine negativen Bewertungen verteile, blaff ich manchmal etwas rum.
Finde ich einfach ehrlicher und man kann sich ja da auch schneller wieder zusammenraufen.

koslowski

 

[Efchen]

Nahmt,

Der Einzige Browser der border und padding nicht der breite hinzuadiert ist der Internet Explorer 5.

auch der IE6 und der IE7 machen das so im Quirks Mode.

weiß zwar nit obs elegant ist, aber habe nen extra div um die ul gelegt und diesem ein margin-left zugewiesen

Eigentlich ist es nicht nur nicht elegant, sondern es ist völlig sinnfrei. Warum legst Du ein Element um ein anderes Element, und weist dem Element drumrum eine Eigenschaft zu, anstatt gleich dem ersten Element (hier: <ul>) die Eigenschaft zu geben? Beißt Dich die Liste, wenn Du ihr einen Abstand gibst? Diese verdrehte Denkweise haben noch viele andere außer Dir und ich verstehe gar nicht warum? Zumal ul und div beides Block-Elemente sind, sich also auch völlig gleich verhalten.
Das ist so, wie wenn Du mit zwei Personen A und B zusammen stehst, B etwas sagen willst, Du es aber Person A sagst, damit sie es Person B sagt. :-)

Und warum überhaupt ein <div>? Könntest ja auch 2 <p>, 7 <address> und 13 <blockquote> um Deine <ul> legen, und dem äußersten Element dann den Abstand geben :-D

Gruß,
-Efchen

P.S.: Nein, ich lach Dich nicht aus, ich versuche Dir und anderen Mitlesenden die Sinnlosigkeit dieses Unterfangens und die Unwichtigkeit eines <div>-Tags zu verdeutlichen.

 

[neuroleptika]

Quirks Mode

..
auch der IE6 und der IE7 machen das so im Quirks Mode.

Naja, dann verwenden sie das fehlerhaft Boxmodel des IE5.

....Zumal ul und div beides Block-Elemente sind,..

ul ist hier aber gefloatet und braucht deswegen trotzdem eine Breitenangabe.

 

[csstester]

P.S.: Nein, ich lach Dich nicht aus, ich versuche Dir und anderen Mitlesenden die Sinnlosigkeit dieses Unterfangens und die Unwichtigkeit eines <div>-Tags zu verdeutlichen.

Fühle mich nicht ausgelacht, keine bange, hab einige deiner Posts hier gelesen und denke nicht das du dich über "unwissende" lustig machst.

Aaaaber, ich habs ja auch versucht der ul das margin zuzuweisen das nun wieder das div drumherum hat, ist bis jetzt der einzige weg den ich gefunden hab damit es tatsächlich so aussieht wie es soll.

aber vieleicht hab ich ja schon weiter oben in der hierachie nen fehler eingebaut der mich zu diesem "sinnfreien" weg zwingt.

aber entweder ich, oder einer hier wird schon irgendwann das Problem dann endlich elegant lösen.
Gruß
HF

 

[neuroleptika]

html:

<ul id="navi">
<li id="home" class="rand">
<a href="index.html">home</a>
</li>
<li id="about">
<a href="about.html">Mitarbeiter</a>
</li>
<li id="refer">
<a href="refer.html">Referenzen</a>
</li>
<li id="preis">
<a href="preis.html">Preise</a>
</li>
<li id="imp">
<a href="imp.html">Impressum</a>
</li>
<li id="kontakt">
<a href="kontakt.html">Kontakt</a>
</li>    
</ul>

css:

#navi .rand {
margin-left: xxem; /* oder px */
}

Das sollte den Zweck erfüllen.

 

[csstester]

merkwürdig, das hatte ich doch schon, sogar die class stand noch, hatte ich hier vergessen wieder zu entfernen.. nur hats da nicht geklappt.. werd mir das alles nochmal durch den Kopf gehen lassen müssen zu besseren verständnis was ich vorhin falsch gemacht hatte.

aber erstmal danke für eure Mühen.

guts nächtle nu aber, ich bin müde..

 

[koslowski]

Moin,

noch eine Kleinigkeit zur CSS-Systematik:

die wichtigen wiederkehrenden Sachen sollten eine id bekommen, dazu zählen die seitenunterteilenden div-Container und die Navigation.
Bei der Navi sollte ul und jeder Listenpunkt eine id bekommen:

<ul id="navi">
   <li id="navi01"><a href="irgendwas">Startseite</a></li>
     .......
</ul>

Außerdem sollte body einer jeden Seite eine id bekommen <body id="startseite">

Damit kann man erreichen das durch entspr. Formatierung der Menüpunkt der aktuellen Seite immer durch den :hover-Zustand hervorgehoben ist.

Man braucht dann auch kaum noch Klassen weil man fast alles über Nachfahrenselektoren ansprechen kann:

#startseite #navi #navi01  {...}

auch für jede Unterseite extra.

Viele Klassen erschweren die Übersicht über die CSS ein wenig.

Bei reger Nutzung von Nachfahrenselektoren unterteilt man die CSS von oben nach unten durch Kommentierung so wie sie im Quelltext erscheinen.
Formatierungen für die Unterseiten stehen kommentiert auch untereinander in der CSS.
Man findet alles sehr schnell wieder, d.h. Fehlersuche wird einfacher.

Wenn man sehr viele Klassen und id's benutzt kann das ein ziemlich uneffektives Gesuche werden.

Das nur am Rande.:)

koslowski

 

[Efchen]

Moin,

Viele Klassen erschweren die Übersicht über die CSS ein wenig.

Das kommt wohl auf die Anwendung an. Wenn man seine Klassen sinnvoll wählt, und nur dann eine Klasse einsetzt, wenn die zugehörige Formatierung öfters vorkommt, ist eine Klasse besser, als ein Nachfahrenselektor.

Formatierungen für die Unterseiten stehen kommentiert auch untereinander in der CSS.

Viele Formatierungen, gerade Klassen, gelten aber für mehrere Seiten. Da kommst Du dann mit Deinem Vorschlag etwas durcheinander.

Man findet alles sehr schnell wieder, d.h. Fehlersuche wird einfacher.

Ich versuche mir derzeit anzugewöhnen, thematisch zusammengehörige Formatierungen in eigene Stylesheets zu packen, z.B. ein eigenes fürs Menü, eines für globale Angaben für Text, Überschriften, Links usw.

Wenn man sehr viele Klassen und id's benutzt kann das ein ziemlich uneffektives Gesuche werden.

Genauso mit Nachfahrenselektoren.

Klar, ich schreibe lieber "ul li" anstatt jedem Listenpunkt eine eigene ID zu geben und dann "ul li#nav1, ul li#nav2, ul li#nav3" zu schreiben. Aber wenn ich bestimmten Textabsätzen einen bestimmten Font zuweise, mach ich da auf jeden Fall eine Klasse: "p.bestimmterAbsatz" anstelle von "div#menu p#absatz1, div#content p#absatz13, div#footer p#absatz1:first-line".

Es gibt für alles eine Methode, es möglichst kurz zu schreiben. Mal mit Selektoren, mal mit Klassen.

Das nur am Rande ;-)

-Efchen

 

[csstester]

erstmal vorweg, klingt alles sehr vernünftig was ihr beiden da schreibt!

Versuche auch grad meinen code so übersichtlich wie möglich zu gestalten, muß aber halt noch herausfinden was für mich wirklich Übersichtlichkeit heist.

Hab nun erstmal meinen code ein wenig aufgeräumt und versucht ihn in eine für mich logische reihenfolge zu bringen.

Efchen, deine Idee, verschiedene CSS dateien zu benutzen finde ich ganz gut, nur lohnt es sich immo wohl noch nicht für mich;), werde ich aber mal im Auge behalten falls sich mein kleines projekt doch als noch umfangreicher herausstellen sollte.

würde mich freuen wenn ihr einfach noch mal im laufe des WE (ja ich habs plötzlich gar nicht mehr eilig) drauf schauen könntet ob ich noch die eine oder andere sache abkürzen, vereinfachen oder übersichtlicher darstellen könnte.

Fühle mich echt gut aufgehoben hier!

gruß
csstester

 

[Efchen]

Efchen, deine Idee, verschiedene CSS dateien zu benutzen finde ich ganz gut, nur lohnt es sich immo wohl noch nicht für mich

Ich hab die Erfahrung gemacht, dass so ein Stylesheet sehr schnell wächst, auch bei relativ kleinen Projekten (also natürlich schon mehr als 1-3 Seiten ;-)). Wenn man dann irgendwann anfängt, eine bestehende Datei in mehrere aufzuteilen, nervt das gewaltig. Meine Erfahrung.

würde mich freuen wenn ihr einfach noch mal drauf schauen könntet ob ich noch die eine oder andere sache abkürzen, vereinfachen oder übersichtlicher darstellen könnte.

Wie gesagt, um das endgültig zu bewerten, fehlt der Inhalt, denn derzeit geht das alles sehr in Richtung div-Suppe.

Fühle mich echt gut aufgehoben hier!

Freut mich :-) Ich helfe gerne. Nur glauben muss man mir ;-)

Schönes Wochenende,
-Efchen

 

[koslowski]

Mahlzeit,

Zitat von Efchen:
Es gibt für alles eine Methode, es möglichst kurz zu schreiben. Mal mit Selektoren, mal mit Klassen.

jau, jeder muss seine eigene Methode finden um seine CSS für sich selber übersichtlich zu machen.
Sowas ist völlig individuell .

Diskussionen in Foren darüber finde ich imho sehr nützlich, da sich die nicht so Versierten das Beste aus allem rausklauben können.

Zitat von Efchen:
Klar, ich schreibe lieber "ul li" anstatt jedem Listenpunkt eine eigene ID zu geben und dann "ul li#nav1, ul li#nav2, ul li#nav3" zu schreiben

Das mache ich um wie schon beschrieben den aktuellen Menüpunkt hervorzuheben und es hat sich auch sonst bei Menüformatierungen als sehr nützlich für mich persönlich erwiesen.

Zitat von Efchen:
Ich versuche mir derzeit anzugewöhnen, thematisch zusammengehörige Formatierungen in eigene Stylesheets zu packen, z.B. ein eigenes fürs Menü, eines für globale Angaben für Text, Überschriften, Links usw.

Wieviel CSS-Dateien man verwendet ist auch eine Frage des persönlichen Geschmacks. Da muss jeder schauen mit welcher Methode er am Besten zurechtkommt.

Persönlich nehme ich immer nur vier CSS-Dateien, eine für den Bildschirm und eine für den Druck und je eine für den IE6 und den IE7.

Die beiden letzteren werden über Conditionell Comment im <head> eingebunden, damit sie auch nur von der entsprechenden IE-Version gelesen werden. Sie enthalten dann die notwendigen IE-Hacks.

Meine bildschirm.css kann ruhig 1000 Zeilen lang sein, mit entsprechenden Kommentierungen und Strukturierung finde ich im Handumdrehen alles.

@csstester Das du Ordnung reinbringen willst ist imho eine gute Idee, du willst ja in einem Jahr oder so, wenn du da nochmal ranmußt ,wissen warum du was wie gemacht hast.
Deshalb auch auf keinen Fall mit Kommentaren sparsam umgehen, die Arbeit lohnt sich.

Was bei dir auch noch fehlt, wenn ich das richtig deute, ist ein vernünftiger CSS-Prolog.
Ich geb dir mal beispielhaft einen, vielleicht kannst du da was Nützliches für dich rausziehen.

dafür mach ich noch ein Posting damit das hier nicht zu lang wird

koslowski