✔ Anfängerfragen

Status
Nicht offen für weitere Antworten.
Ich hänge diese Lösungsvariante als ZIP-Datei an, in der ich für das DIV #content-container eine Hintergrundgrafik erstellt habe, die die einzelnen Rahmenelemente (zwischen Figur und Footer) enthält, sich somit über die gesamte Layoutbreite erstreckt und mittels background-repeat:repeat-y senkrecht wiederholt wird.

Desweiteren habe ich die feste Höhenangabe für das DIV #content-container in eine Mindesthöhe umgewandelt und die feste Höhenangabe für das DIV #content komplett entfernt, damit auch die nicht-IE-Browsers die Box bei zunehmenden Inhalt nach unten ausdehnen.

Für den IE habe ich alle erforderlichen Korrekturen gegen den 3px-Bug bei floatenden Elementen vorgenommen.

Das Layout wird in allen (mir zur Verfügung stehenden) Browsern einheitlich und fehlerfrei dargestellt.

Testumgebung: Win2000, Firefox 1.5, IE 6.0, Mozilla 1.7, Netscape 7.0, Opera 8.5
 

Anhänge

  • demo_dadom110.zip
    46,2 KB · Aufrufe: 17
Moin...

ja.. *sprachlosSei* weisst du eigentlich das du mich fertig machst :) ? Ich verzweifel hier und du schüttelst das aus dem Ärmel... bei meinem nächsten Design komm ich dann gerne auf Dich zurück. Also noch mal zur generellen Zusammenfassung:

Ich mache erst mein Design für Nicht-IE (ich hab Opera, passt das bei den anderen dann auch, oder ist das auch so kompliziert wie bei IE vs. Andere?) und dann passe ich für IE an ? Das heisst Sachen die nur in den "anderen" Browsern kommen sollen mit " !important " ? Oder wie gehe ich da am besten vor?

Code: 
* html content-container { /* Für IE */
height: 257px;}

Oder alle IE - Comments so machen ?

Und noch eine Frage die mir gerade beim Basteln auftritt: Verlinkung...verlinke ich wie sonst auch immer auf eine komplett neue Seite (der ich dann dasselbe CSS zuweise nur mit anderem HTML Inhalt) oder kann man auch nur mein einen DIV austauschen?

Und noch mehr: Wenn ich einem DIV eine Hintergrundgrafik zuweise und die mit Textfüllen will, gebe ich ja mit padding den Innenabstand an. Ist es normal wenn ich eine Grafik 20x20 habe, und ich einen Padding-Top: 10px mache, das die Grafik sich um 10px vergrößert, bzw er vergrößert den Container und wiederholt die Grafik dann darunter (sieht nur "normal" aus, wenn ich dann die Größe auch anpasse (auf 20x10))


Danke (mal wieder) für die (eindeutig über) Hilfe (hinausgehende Tatkräftige Unterstützung).

Mfg
Dom
 
Zuletzt bearbeitet:
Die !important-Regel, der Star-HTML-Hack (* html) und der Conditional Comment sind Techniken, um für den IE seine "spezifischen" CSS-Formatierungen zu notieren, sprich Korrekturen vorzunehmen.

Deine zweite Frage bzgl. der Verlinkung habe ich leider nicht so ganz verstanden, aber soviel sei dazu schon mal gesagt:

Wenn alle Projektseiten das gleiche HTML-Gerüst (Layout) besitzen, ist nur eine CSS-Datei erforderlich. Wenn dem nicht so ist, benötigt jede Seite ihr eigenes Stylesheet.

Zur letzten Frage bzgl. der Hintergrundgrafik: die padding-Angaben werden laut dem Boxmodell zur Elementbreite bzw. -höhe hinzuaddiert.

Code: 
div.box {
width: 20px;
height: 20px;
padding: 10px;
}
In diesem Beispiel beträgt die tatsächliche Elementbreite und -höhe 40 Pixel (20px + 2*10px).

Wenn das Element eine Hintergrundgrafik mit den Dimensionen 20*20px besitzt, wird sie wiederholt. Dies lässt sich aber mit der CSS-Eigenschaft background-repeat:no-repeat unterbinden.
 
michaelsinterface hat gesagt.:
Die !important-Regel, der Star-HTML-Hack (* html) und der Conditional Comment sind Techniken, um für den IE seine "spezifischen" CSS-Formatierungen zu notieren, sprich Korrekturen vorzunehmen.
Zum Vergrößern anklicken....

Also
* html content-container = nur IE
!important = nur Nicht-IE ?

michaelsinterface hat gesagt.:
Deine zweite Frage bzgl. der Verlinkung habe ich leider nicht so ganz verstanden, aber soviel sei dazu schon mal gesagt:
Zum Vergrößern anklicken....

Sorry, noch mal genauer: Die Inhalte meiner Seite spielen sich quasi nur in einem DIV ab, das heisst alle Texte die ich schreiben werden in dem "content" DIV dargestellt. Jetzt würde ich gerne wissen ob ich "ganz normal" 4,5,6,7 ... HTML Seiten bastel und die CSS Datei zuweisen (die selbe klar, soll ja das gleiche Design haben) und den Content-Bereich im HTML Text befülle, oder ob es auch eine möglichkeit gibt im mit nem Link nicht auf eine neue HTML Seite zu springen, sondern nur diesen entpsprechenden DIV mit anderem Text zu "befüllen"

Grüße
Dom
 
(nein du wirst mich nicht mehr los :) )

Ich sollte lieber was einfacheres machen, jetzt zerhaut es mir mein Layout schon wieder, wenn ich <h1> Elemente einbinde: (bei Zeilenumbrüchen (<br> und <p>) derselbe Spass :( )

http://bierkriegers2.bi.funpic.de/HTML2/test.htm

*edit* wenn ich vor meinem eigentlichen Content ein Leerzeichen (&nbsp; ) einfüge klappt es, aber dann ist mein Inhalt so weit unten, gibt es da noch eine andere Variante ?
 
Zuletzt bearbeitet:
Erweitere den CSS-Code mit folgender margin-Regel für alle verwendeten Elemente zur Textstrukturierung:

Code: 
h1, h2, h3, p {
margin: 0;
}
Damit die Textabsätze nicht direkt untereinander "kleben", kann ihnen der gewünschte Innenabstand nach oben und/oder unten zugewiesen werden:

Code: 
p {
padding: 5px 0 5px 0; /* oben rechts unten links */
}
Auf diese Weise wird das Layout nicht mehr zerrissen.
 
HiHi,

dank dir, hätte ich auch mal selber drauf kommen können :D Was würde ich nur ohne Dich tuen ? Bei meinem nächsten Design werde ich sicher wieder auf Dich zurück kommen :) Danke bis hierhin und darüber hinau

Grüße
Dom
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück