[GastForen Web allgemein HTML und CSS / Stylesheets Tiefe Geheimnisse des CSS

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Tiefe Geheimnisse des CSS

Dynamic35de
Beiträge gesamt:

24. Nov 2006, 00:21
Beitrag # 1 von 13
Bewertung:
(3607 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Also, ich bin ein Anfänger in Sachen CSS. Ich habe mir die DVD von Helge Maus geholt und versucht gewisse Inhalte nachzuvollziehen. Leider klappt das nicht.

Ein einfache Aufgabe, schlechtes Ergebnis. Ich möchte via CSS einen grundsätzlichen Div definieren, der eine Breite mit 800 px hat und je nach Monitor eine Höhe von 100% hat. Mein CSS sieht demzufolge so aus:

body {
background-image:url(../Bilder/2.gif);
background-repeat: repeat;
margin:0px;
padding:0px;
text-align:center;
}

#div1{
position:absolute:
top: 0px;
width:70%;
height:100%;
background-color:#b5b5b5;
padding:0;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align:left;
}

Es wird das div nur als Zeile dargestellt, jedoch nicht als Container von oben bis unten. Was habe ich hier falsch gemacht????

Bitte um Eure Hilfe.

Vielen Dank
X

Tiefe Geheimnisse des CSS

SabineP
Beiträge gesamt: 7586

24. Nov 2006, 09:00
Beitrag # 2 von 13
Beitrag ID: #263574
Bewertung:
(3594 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dynamic,

>> Was habe ich hier falsch gemacht????

Wie sieht denn Dein HTML-Code aus?


als Antwort auf: [#263557]

Tiefe Geheimnisse des CSS

FSt
  
Beiträge gesamt: 1965

24. Nov 2006, 09:26
Beitrag # 3 von 13
Beitrag ID: #263580
Bewertung:
(3590 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo

Antwort auf [ Dynamic35de ] position:absolute:


Hinter "absolute" hast Du einen Doppelpunkt, da gehört aber ein Semikolon hin ...

Gruss
Martin


als Antwort auf: [#263557]

Tiefe Geheimnisse des CSS

Dynamic35de
Beiträge gesamt:

24. Nov 2006, 11:17
Beitrag # 4 von 13
Beitrag ID: #263622
Bewertung:
(3573 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo vielen Dank für die schnellen Antworten,

hier ist die (Einfache) html Struktur:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="kassensystem">Raum für den Inhalt von id "kassensystem"</div>
</body>
</html>


als Antwort auf: [#263580]

Tiefe Geheimnisse des CSS

Dynamic35de
Beiträge gesamt:

24. Nov 2006, 11:24
Beitrag # 5 von 13
Beitrag ID: #263626
Bewertung:
(3572 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Antwort auf [ FSt ] Hallo

Antwort auf [ Dynamic35de ] position:absolute:


Hinter "absolute" hast Du einen Doppelpunkt, da gehört aber ein Semikolon hin ...

Gruss
Martin


Hallo Martin

super, danke für den Hinweis. Jetzt habe ich den div auf voller Höhe. Nur ,wenn ich jetzt das in Opera, NC 6, Firefox und IE 6 anschaue, krieg ich die Krise.

Im IE 6 rutscht nun das ganze div nach links über die Monitoransicht hinaus. Im firefox liegt das div an der rechten Seite.

ich hab doch alles im body auf center gesetzt. warum geht das div jetzt in alle Richtungen???


als Antwort auf: [#263580]

Tiefe Geheimnisse des CSS

SabineP
Beiträge gesamt: 7586

24. Nov 2006, 11:55
Beitrag # 6 von 13
Beitrag ID: #263638
Bewertung:
(3568 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Gibt es eine URL dazu?
Wie sehen die css-Angaben zur ID kassensystem aus?

Gruß Sabine


als Antwort auf: [#263626]

Tiefe Geheimnisse des CSS

Dynamic35de
Beiträge gesamt:

24. Nov 2006, 12:08
Beitrag # 7 von 13
Beitrag ID: #263639
Bewertung:
(3563 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

also, eine URL ab ich, steht aber noch nichts drauf. Ist momentan alles bei mir im Rechner.

Was ich brauche, ist ein div, das flexibel zentriert steht. perfekt wäre es, wenn z.B.

1. bei hoher Monitorauflösung das div ca. 900 px groß und zentriert ist
2. bei geringer Auflösung sich jedoch mitverkleinert, so das das div immer optimal an der Monitorauflösung angepasst ist.
3. diese Breite jedoch 700 px nicht unterschreitet.

Als Alternative kann ich jedoch auch eine feste div-Breite von 800 nehmen. Somit dürften aktuelle Monitorauflösungen mit 800x600 die HP richtig darstellen.

hier noch einmal erst die html Struktur und dann das CSS


<body>

<div id="center">Raum für den Inhalt von id "center"

</div>
<!--center_ende-->

</body>
</html>


body {
background-image:url(../Bilder/b1.gif);
background-repeat: repeat;
margin:0px;
padding:0px;
text-align:center;
}

#center {
position:absolute;
top: 0px;
width:800px;
height:100%;
background-color:#b5b5b5;
padding:0;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}


Gruß Dy


als Antwort auf: [#263638]
(Dieser Beitrag wurde von Dynamic35de am 24. Nov 2006, 12:09 geändert)

Tiefe Geheimnisse des CSS

SabineP
Beiträge gesamt: 7586

24. Nov 2006, 12:53
Beitrag # 8 von 13
Beitrag ID: #263649
Bewertung:
(3555 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dy,

hier ein zentriertes DIV:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> New Document </title>
<style type="text/css">
body {text-align:center}
#zentriert{margin:0px auto;width:80%;min-width:700px;
border:1px solid red; /*roter Rahmen nur zum Testen der Breite*/
}
</style>
</head>

<body>
<div id="zentriert">zentriertes DIV</div>
</body>
</html>

min-width:700px; sorgt für die Mindestbreite, wird aber nicht in allen Browsern unterstützt:
http://www.css4you.de/min-width.html

Die Mindestbreite ergibt sich dann aus dem Inhalt des DIVs.

Gruß Sabine


als Antwort auf: [#263639]

Tiefe Geheimnisse des CSS

Dynamic35de
Beiträge gesamt:

24. Nov 2006, 13:40
Beitrag # 9 von 13
Beitrag ID: #263662
Bewertung:
(3551 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

super, danke. Jetzt habe ich also das mit dem center und der min-/flexiblen Breite geregelt. Jetzt fehlt mir in diesem Zusammenhang noch, wie ich dieses div noch auf 100% Höhe bekomme. mit hight: 100%; funktioniert es nicht. Sobald ich das div auf position: absolute; setze, verrutscht wieder alles. Ich hab mit der postion alles durchgetestet, als relative, static und absolute.

könntest du mir hier auch noch ein Tipp geben? in diesem div soll dann ein drei Spaltenlayout rein.


als Antwort auf: [#263649]

Tiefe Geheimnisse des CSS

SabineP
Beiträge gesamt: 7586

24. Nov 2006, 13:54
Beitrag # 10 von 13
Beitrag ID: #263670
Bewertung:
(3548 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
>> wie ich dieses div noch auf 100% Höhe bekomme.

Da sich die Höhe immer auf das übergeordnete Element bezieht,
mußt Du die Höhe auch für alle übergeordneten Elemente angeben.

html, body, #zentriert{height:100%}


>> Sobald ich das div auf position: absolute; setze ...

Was hat die Position mit der Höhe zu tun?

>> in diesem div soll dann ein drei Spaltenlayout rein.

Dann schau mal hier nach:
http://sperner.googlepages.com/...g-fix-zentriert.html


als Antwort auf: [#263662]

Tiefe Geheimnisse des CSS

Dynamic35de
Beiträge gesamt:

24. Nov 2006, 14:07
Beitrag # 11 von 13
Beitrag ID: #263673
Bewertung:
(3545 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

irgendwie steh ich auf dem Schlauch :--((

mit dem hight:100%; hab ich gemacht, wird jedoch vom Browser ignoriert.

hier das aktuelle css, das ich von Dir übernommen habe:

#zentriert{
top: 0px;
background-color:#b5b5b5;
margin:0px auto;width:80%;min-width:700px;
height:100%;
}

das Beispiel mit dem Link ist richtig, nur das die rosa Hintergrundfläche von oben nach unten reichen soll.

Das mit position absolute deshalb, weil damit dasdiv tatsächlich von oben bis unten recht. da allerdings wird es zu den Seiten verschoben. Mache ich die position weg, ist alles wieder toll zentriert, jedoch wird es nur als zeile dargestellt.


als Antwort auf: [#263670]
(Dieser Beitrag wurde von Dynamic35de am 24. Nov 2006, 14:12 geändert)

Tiefe Geheimnisse des CSS

SabineP
Beiträge gesamt: 7586

24. Nov 2006, 14:18
Beitrag # 12 von 13
Beitrag ID: #263681
Bewertung:
(3539 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Antwort auf [ Dynamic35de ]
hier das aktuelle css, das ich von Dir übernommen habe:

#zentriert{
top: 0px;
background-color:#b5b5b5;
margin:0px auto;width:80%;min-width:700px;
height:100%;
}


Das ist nicht von mir.

Ich hatte geschrieben:

html, body, #zentriert{height:100%}

und

body {text-align:center}
#zentriert{margin:0px auto;width:80%;min-width:700px;
border:1px solid red; /*roter Rahmen nur zum Testen der Breite*/
}


als Antwort auf: [#263673]

Tiefe Geheimnisse des CSS

Dynamic35de
Beiträge gesamt:

24. Nov 2006, 14:29
Beitrag # 13 von 13
Beitrag ID: #263685
Bewertung:
(3533 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine

sorry, sorry sorry

hab erst die Anweisung : html, body, #zentriert{height:100%}
nicht kapiert, jetzt eingefügt klappt es SUPER!!! Merci, danke

Du hast mir echt geholfen. Mühsam lernt das Eichhörnchen ;-))

Gruß Dy, bis zum nächsten mal (problem)


als Antwort auf: [#263681]
X