nicht angemeldet
Probleme mit Darstellung in CSS
Hallo alle,
ich habe mich bisher noch nicht so mit CSS beschäftigt und möchte ein komplettes Layout ohne Tabellen aufbauen.
Ich habe einen Kopfbereich:
<div id="header">
<a href="#" title="Zurück zur Startseite" target="_self"><img src="images/logo.jpg" alt="Zurück zur Startseite" class="headerlogo"></a>
<div class="headernavi">Navi1</div>
<div class="headerschrift">Überschrift</div>
</div>
Jetzt soll links ein Logo stehen und rechts daneben eine horizontale Navi und unter der Navi die Überschrift.
Wie muss ich bloß die Formatierungen angeben, damit ich sowas erhalte?
In Tabellen würde ich es so machen:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" rowspan="2"> <td>
<td> </td>
</tr>
<tr>
<td width="50%"> </td>
</tr>
</table>
Wie kann ich sowas in CSS machen? Viele Dank für die Hilfe.
Flo
-
<style type="text/css">
.sp01 {width:50%; float:left; background:#fcc}
.sp02 {width:50%; float:left; background:#ccf}
.clear{clear:both; font-size:1px; height:1px}
</style>
</head><body>
<p>NEU:</p>
<div class=row>
<div class=sp01>Zeile 1, Spalte 1</div>
<div class=sp02>Zeile 1, Spalte 2</div>
<div class=clear>.</div>
</div>
<div class=row>
<div class=sp01>Zeile 2, Spalte 1</div>
<div class=sp02>Zeile 2, Spalte 2</div>
<div class=clear>.</div>
</div><p>ALT:</p>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" rowspan="2"> <td>
<td> </td>
</tr>
<tr>
<td width="50%"> </td>
</tr>
</table>Kalle
-
Hallo Kalle,
du hast dir ja viel Mühe gegeben, mittels Divs die Tabelle nachzubauen.
Meinst du, dass Flo wirklich eine Möglichkeit braucht, Tabellen durch Divs zu ersetzen?
Das geht doch voll "von hinten durch die Brust ins Auge". Erst wird überlegt, wie sich eine bestimmte Anordnung mit Tabellenzellen realisieren lässt, dann werden diese mit Divs nachgebastelt. Das ist nicht der Sinn von CSS-Layout.
Die einzelnen Elemente sollten erstmal sinnvoll ausgezeichnet werden (Überschriften, Listen, Absätze), und dann soweit wie möglich ohne zusätzliche bedeutungsleere Elemente mittels CSS so formatiert werden, dass sich das gewünschte Layout ergibt.
Je weniger dabei an eine Tabellenstruktur gedacht wird, um so besser.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
du hast dir ja viel Mühe gegeben, mittels Divs die Tabelle nachzubauen.
Nöö, das wende ich in einigen Programmen an. Bei mir haben die Spalten eine Breite in em.
Vorteil:
Bei kleinen Displays (Handhelds) schieben sich die Spalten wunderbar untereinander wg. float. Wenn man die Texte nach Spalten farbig macht, ergibt sich trotzdem ein guter Überblick.Nachteil:
Per Cut and Paste kann so eine Konstruktion nicht in Excel übernommen werden zur weiteren Bearbeitung. Da bin ich reumütig zur Tabelle zurück.... dann werden diese mit Divs nachgebastelt. Das ist nicht der Sinn von CSS-Layout.
Kann trotzdem sein, siehe oben.
Je weniger dabei an eine Tabellenstruktur gedacht wird, um so besser.
Bei einem Seitenlayout okay, das sind keine Tabellen. Bei mir ist es z.B. eine Adressliste.
Kalle
-
-
-
Hallo Flo
<div id="header">
<a href="#" title="Zurück zur Startseite" target="_self"><img src="images/logo.jpg" alt="Zurück zur Startseite" class="headerlogo"></a>
<div class="headernavi">Navi1</div>
<div class="headerschrift">Überschrift</div>
</div>Das ergibt kein CSS-Layout sondern eher eine unbekömmliche Div-Suppe!
Jetzt soll links ein Logo stehen und rechts daneben eine horizontale Navi und unter der Navi die Überschrift.
Mal ein einfaches Beispiel:
HTML:<div id="header"> <a href="#" title="Zurück zur Startseite"><img src="images/logo.jpg" alt="Zurück zur Startseite"></a> <ul> <li><a href="#">Linktext</a></li> <li><a href="#">Linktext</a></li> <li><a href="#">Linktext</a></li> </ul> <h1>Überschrift</h1> </div>CSS:
#header ul, #header li { display: inline; padding:0 0 0 1em; margin:0; list-style:none; }Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hi,
danke schon mal, aber leider komme ich halt noch nicht ganz wegen der Darstellung zurecht. Habe jetzt genau dein Beispiel genommen und folgende CSS-Anweisung angegeben:
#header {
width: 980px;
height: 110px;
line-height: 110px;
background-color: #95b2dd;
}#header ul, #header li {
display: inline;
padding:0 0 0 1em;
margin:0;
list-style:none;
vertical-align: top;
}#header h1 {
font-size: 36pt;
font-weight: normal;
color: #ffffff;
margin: 0px;
}Leier passt die Darstellung gar nicht. Was mache ich nur falsch?
Vielen Dank
-
Hallo Flo
#header {
width: 980px;
height: 110px;Der gesamte #header also genau 110ox hoch, nicht mehr und nicht weniger!
line-height: 110px;
Eine Textzeile in #header ist genau 110px hoch, damit hat dort genau eine Zeile Platz. Wo soll jetzt die Überschrift angezeigt werden?
Lass beide Angaben weg! Die benötigte Höhe ergibt sich aus der Höhe der Grafik und der Höhe der Überschrift von ganz allein.
#header h1 {
font-size: 36pt;Soll das ein Druckstylesheet werden?
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-