[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:
(3384 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:
(3371 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Dynamic,

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

Wie sieht denn Dein HTML-Code aus?
Gruß Sabine


als Antwort auf: [#263557]

Tiefe Geheimnisse des CSS

FSt
  
Beiträge gesamt: 1961

24. Nov 2006, 09:26
Beitrag # 3 von 13
Beitrag ID: #263580
Bewertung:
(3367 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


Wer noch mehr HDS will – PremiumMember wissen wieso
https://www.hilfdirselbst.ch/...m.cgi?do=membership;
http://www.wpms.ch


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:
(3350 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:
(3349 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:
(3345 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:
(3340 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:
(3332 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:
(3328 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:
(3325 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
Gruß Sabine


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:
(3322 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:
(3316 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*/
}
Gruß Sabine


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:
(3310 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

Aktuell

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
05.02.2021 - 05.11.2021

Digicomp Academy AG, Limmatstrasse 50, 8005 Zürich
Freitag, 05. Feb. 2021, 13.00 Uhr - Freitag, 05. Nov. 2021, 17.00 Uhr

Lehrgang

Bilden Sie sich zum zertifizierten Publishing-Multimedia-Profi aus. Neben Fotografie und Video befassen Sie sich mit der Medienproduktion, digitalen Publikationen und dem Webdesign für Desktop- und mobile Endgeräte.

Preis: CHF 10'500.-
Dauer: 30 Tage (ca. 210 Lektionen) – Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PM

Veranstaltungen
05.03.2021 - 30.04.2021

Digicomp Academy AG, Zürich oder virtuell
Freitag, 05. März 2021, 13.00 Uhr - Freitag, 30. Apr. 2021, 17.00 Uhr

Lehrgang

Im berufsbegleitenden Web Publisher Lehrgang vertiefen Sie Ihr Wissen rund um das Thema Screendesign und die Umsetzung von Websites. Wir befähigen Sie dazu selbständig und professionell Ihren Webauftritt zu planen und in die Realität umzusetzen.

Preis: CHF 3'250.–
Dauer: 8.5 Tage - Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt.

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PWEB

Neuste Foreneinträge


Langsamer MacMini

Serien-Dateinamenänderung (mit Automator?) "nur die ersten 7 Schreibstellen"

Abschnitt mit Absatzformat beginnen?

Scriptphänomen alle 16 Steps

Fotobuch mit gleicher längster Bildseite

Schwarz überdruckt nicht

Von Quark nach Indesign konvertieren

Illustrator 2021 Stapelverarbeitung

Startvolum

Barrierefreies PDF> keine klickbaren Fußnoten im PDF (Tagbaum)
medienjobs