73%
22%
19%
11%
6%
Montag, 6. Dezember 2004, 17:45
dein stylesheet
Die Elemente 'td', 'th', 'p' und 'input' mußt du hier nicht mehr formatieren.
Da dein Dokument im Standard-Modus (DOCTYPE + URL) gerendert wird, vererben sich beim IE die Eigenschaften , die du im body gibst, sogar bis in eine Tabelle hinein (was nicht der Fall wäre, wenn du die URL beim DOCTYPE weglassen würdest)
Du kannst also die letzten 4 Selektoren löschen, da sie mit den Angaben im body übereinstimmen.
Dein HTML
das Attribut align=center ist deprecated (mißbilligt), dh: es darf nur noch bei Doctype HTML 4 (Transitional) verwendet werden. Bei der Strict-Variante oder bei XHTML führt es zu einem Fehler.
Du kannst das ganze Div weglassen und dafür der 'hauptbox' noch die Eigenschaften 'margin-left:auto' und 'margin-right:auto' geben.
das div mit class=toprow kannst du auch verschwinden lassen.
Formatiere doch einfach "TNT - The Noob Team" als das, was es ist: nämlich eine Überschrift.
wahrscheinlich willst du h3 oder h4 dafür nehmen.
In der CSS-Datei formatierst du dann eben h3 oder h4 anstatt die Klasse "toprow".
Es wundert mich, daß der Foren-DIV-Wächter
bei dir noch nicht aufgetaucht ist.
Vielleicht kommt er ja noch.
dein stylesheet
'DISPLAY: block;' brauchst du nicht, denn jedes Div ist von Natur aus ein Block-Element.
'TEXT-ALIGN: left' brauchst du auch nicht, denn das ist der Default-Wert, vorausgesetzt, man hat nicht dem Eltern-Element (die umschließende box) um es zu zentrieren, ein "text-align: center" oder derlei Unfug gegeben
dein stylesheet
'DISPLAY: inline' hast du wahrscheinlich benutzt, um content-div und sidebar nebeneinander darzustellen.
Das wäre zwar auch eine Möglichkeit, aber da du schon 'float:right' hast, ist das doppeltgemoppelt, denn mit 'float' kannst du ja auch Elemente nebeneinander platzieren.
------------------------------------------------------------
zu deinem Problem:
Ich habe noch ein graues bg-Bild (bg_sidebord.jpg) erstellt (200px breit 10px hoch)
Dann das content-div und die sidebar nochmal mit einem Div umschlossen mit folgenden Eigenschaften
<div class=gesamt-inhalt style="BACKGROUND-COLOR: #ffc; BACKGROUND-IMAGE: url(bg_sidebord.jpg); background-position: right top ; background-repeat: repeat-y; min-height:200px; BORDER: 5px solid red; ">
dem content-Div habe ich noch 'margin-right:200px' gegeben, damit der Inhalt nicht in den sidebar-Bereich hineinläuft.
Noch'n Tip zum Schluß
Du tust dir selbst (und deinen Helfern) einen Gefallen, wenn du das stylesheet von Hand noch ein bischen nachbearbeitest.
zb kann man hier
die 4 paddings zusammenfassen, und schon wird das Ganze kürzer und übersichtlicher.
Das würde ich mir übrigens auch von anderen wünschen, die hier ihre Probleme posten.
Kannst ja nochmal Bescheid geben, ob du mit meinem Lösungsvorschlag klargekommen bist.
Kann nämlich sein, daß ich noch was vergessen habe.
Grüße
gaby
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
BODY {
FONT-SIZE: 10px;
BACKGROUND-IMAGE: url(../images/design/bg.jpg);
MARGIN: 0px;
BACKGROUND-REPEAT: repeat-x;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
TD {
FONT-SIZE: 10px
}
TH {
FONT-SIZE: 10px
}
P {
FONT-SIZE: 10px
}
INPUT {
FONT-SIZE: 10px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
|
Die Elemente 'td', 'th', 'p' und 'input' mußt du hier nicht mehr formatieren.
Da dein Dokument im Standard-Modus (DOCTYPE + URL) gerendert wird, vererben sich beim IE die Eigenschaften , die du im body gibst, sogar bis in eine Tabelle hinein (was nicht der Fall wäre, wenn du die URL beim DOCTYPE weglassen würdest)
Du kannst also die letzten 4 Selektoren löschen, da sie mit den Angaben im body übereinstimmen.
Dein HTML
|
|
Quellcode |
1 2 3 4 5 |
<BODY> <DIV align=center> <DIV id=hauptbox> <DIV id=header> <DIV class=toprow><STRONG>TNT - The Noob Team</STRONG></DIV> |
das Attribut align=center ist deprecated (mißbilligt), dh: es darf nur noch bei Doctype HTML 4 (Transitional) verwendet werden. Bei der Strict-Variante oder bei XHTML führt es zu einem Fehler.
Du kannst das ganze Div weglassen und dafür der 'hauptbox' noch die Eigenschaften 'margin-left:auto' und 'margin-right:auto' geben.
das div mit class=toprow kannst du auch verschwinden lassen.
Formatiere doch einfach "TNT - The Noob Team" als das, was es ist: nämlich eine Überschrift.
wahrscheinlich willst du h3 oder h4 dafür nehmen.
In der CSS-Datei formatierst du dann eben h3 oder h4 anstatt die Klasse "toprow".
Es wundert mich, daß der Foren-DIV-Wächter
bei dir noch nicht aufgetaucht ist. Vielleicht kommt er ja noch.
dein stylesheet
|
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 |
#content {
BORDER-RIGHT: black 1px solid;
PADDING-RIGHT: 10px;
DISPLAY: block;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
BORDER-LEFT: black 1px solid;
PADDING-TOP: 10px;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: left
}
|
'DISPLAY: block;' brauchst du nicht, denn jedes Div ist von Natur aus ein Block-Element.
'TEXT-ALIGN: left' brauchst du auch nicht, denn das ist der Default-Wert, vorausgesetzt, man hat nicht dem Eltern-Element (die umschließende box) um es zu zentrieren, ein "text-align: center" oder derlei Unfug gegeben
dein stylesheet
|
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#sidebar {
BORDER-RIGHT: black 1px solid;
PADDING-RIGHT: 10px;
DISPLAY: inline;
PADDING-LEFT: 10px;
FLOAT: right;
PADDING-BOTTOM: 10px;
MARGIN-LEFT: 10px;
BORDER-LEFT: black 1px solid;
WIDTH: 150px;
PADDING-TOP: 10px;
BACKGROUND-COLOR: #eeeeee;
TEXT-ALIGN: left
}
|
'DISPLAY: inline' hast du wahrscheinlich benutzt, um content-div und sidebar nebeneinander darzustellen.
Das wäre zwar auch eine Möglichkeit, aber da du schon 'float:right' hast, ist das doppeltgemoppelt, denn mit 'float' kannst du ja auch Elemente nebeneinander platzieren.
------------------------------------------------------------
zu deinem Problem:
Ich habe noch ein graues bg-Bild (bg_sidebord.jpg) erstellt (200px breit 10px hoch)
Dann das content-div und die sidebar nochmal mit einem Div umschlossen mit folgenden Eigenschaften
<div class=gesamt-inhalt style="BACKGROUND-COLOR: #ffc; BACKGROUND-IMAGE: url(bg_sidebord.jpg); background-position: right top ; background-repeat: repeat-y; min-height:200px; BORDER: 5px solid red; ">
dem content-Div habe ich noch 'margin-right:200px' gegeben, damit der Inhalt nicht in den sidebar-Bereich hineinläuft.
Noch'n Tip zum Schluß
Du tust dir selbst (und deinen Helfern) einen Gefallen, wenn du das stylesheet von Hand noch ein bischen nachbearbeitest.
zb kann man hier
|
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 |
#navigation {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
WIDTH: 100%;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}
|
die 4 paddings zusammenfassen, und schon wird das Ganze kürzer und übersichtlicher.
Das würde ich mir übrigens auch von anderen wünschen, die hier ihre Probleme posten.
Kannst ja nochmal Bescheid geben, ob du mit meinem Lösungsvorschlag klargekommen bist.
Kann nämlich sein, daß ich noch was vergessen habe.
Grüße
gaby
Montag, 6. Dezember 2004, 17:58
hm, sieht nicht unbedingt hand geschrieben aus,
und diese div suppe (suche im forum nach div suppe dann findest du einen netten link) hat auch nicht viel sinn,
html als auszeichnungs sprache ist eigentlich anders zu verwenden,
so könntest du noch einige elemente besser machen,
ich hab aber auch schon schlimmeres gesehen
das problem sollte mit der methode von gaby gelöst sein
und diese div suppe (suche im forum nach div suppe dann findest du einen netten link) hat auch nicht viel sinn,
html als auszeichnungs sprache ist eigentlich anders zu verwenden,
so könntest du noch einige elemente besser machen,
ich hab aber auch schon schlimmeres gesehen
das problem sollte mit der methode von gaby gelöst sein
ihre DNS Analyse zeigt eine krankhafte Abneigung gegen jegliche Autorität und einen Charakter der zum Gewaltausbrechen neigt....
Dienstag, 7. Dezember 2004, 14:44
Zitat
Original von Hornet
Danke für die Antworten.
bitte sehr. :-)
Ihr habt mir damit sehr geholfen. Ich mache halt zum ersten mal ein Design mit CSS und deshalb bin ich noch nicht so erfahren.
Das macht ja nix.
Deshalb habe ich ja alles genau beschrieben. *g*
Ich habe vorübergehend mal eine Tabelle gemacht
Oh nein!
Das ist ja ein Rückfall in die Steinzeit und noch dazu doppelte Arbeit.
Eigentlich wollte ich dich mit meinem Beitrag ermutigen, weiterzumachen.
Schade, daß ich jetzt das Gegenteil erreicht habe
Anscheinend habe ich zu viel geschrieben und es hat dich erschlagen ?
Wenn du jetzt wieder unter die Tabellendesigner gehen willst, wäre mein Posting ja ganz umsonst gewesen.
Probiere doch einfach mal, meine Vorschläge umzusetzen.
Es ist weniger Aufwand, als du denkst.
Wenn du etwas nicht verstanden hast oder nicht weiterkommst, kannst du ja gern nochmal fragen.
Grüße
gaby