Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell
zurück: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle weiter: Tutorial für CSS Menü inklusive Anleitung für Grafiken Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Neue Antwort erstellen     Status: Antwort Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
maninweb
Microsoft Excel MVP 2014


Verfasst am:
24. Nov 2007, 13:33
Rufname: maninweb
Wohnort: Aachen

Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell - Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell

Nach oben
       

Hallo zusammen...

der letzte Teil zu Kapitel 04 wurde soeben veröffentlicht Very Happy

Im Teil 3 geht's um Kaskadierung, Prioritäten und - ganz wichtig - das Boxmodell...

Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell.

Wir wünschen Euch viel Spass beim Lesen Smile

Ab nun, genug der Theorie, wir freuen uns darauf, nächste Woche
mit der Umsetzung des Designs beginnen zu können
.

Gruß

_________________
Der größte Aberglaube der Gegenwart ist der Glaube an die Vorfahrt.
Jacques Tatischeff - auch bekannt als Jacques Tati
20FCC4FD0E3240C59522E3F0C4695941
Lisa
Moderator; Word seit Word 5.0 (für DOS)


Verfasst am:
09. Dez 2007, 21:04
Rufname:
Wohnort: Leipzig


AW: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmode - AW: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmode

Nach oben
       

Hallo,

na das war nicht ohne diesmal, die Übung hatte es in sich. Hab eine ganze Weile dazu gebraucht. Und so sieht es aus:

Übung 4.3.

Danke nochmal,
Gruß
Lisa
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
10. Dez 2007, 13:31
Rufname:
Wohnort: Aachen

AW: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmode - AW: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmode

Nach oben
       

Hi Lisa,

so, wie du die Aufgabe gelöst hast, würde ich sagen: Chapeau!

Liegt dir die Logik?

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
e-v-e
Gast


Verfasst am:
11. Sep 2008, 12:13
Rufname:

AW: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmode - AW: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmode

Nach oben
       

Hallo zusammen!

Ich habe mich vor kurzem dran gemacht, mal endlich CSS zu lernen, da ich nur das olle Tabellendesign kenne und habe mich reisig über diesen Workshop gefreut.
An dieser Stelle erstmal ein herzliches DANKESCHÖN!

Ich komme soweit auch gut zurecht, die Übung 4 bereitet mir allerdings kopfschmerzen was die tabellenumrandung angeht....
irgendwie sind die inneren umrandung dicker als die äußeren und ich hab keine ahnung, wie ich das ändern kann...hab schon überall geguckt, aber im web auch keine antwort bekommen Sad ich dreh gleich durch!
Kann mir bitte einer mal sagen, woran das liegt???

hier mein css


body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
padding: 0px;
margin: 0 auto;
}
#kasten{
margin: 50px;
background-color: #ffffff;
width: 700px;
height:600px;
border: 1px solid #006600;
padding: 15px;
}
#tabelle{
margin: 20px 0px 20px 0px;
background-color: #999999;
padding: 10px 30px;

}
.dunkelgrün{
background-color:#009900;
}
td{
padding: 10px;
text-align:center;
border-width:1px;
border-style:solid;
border-color:blue;
}


mein html code sieht so aus:

<!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>workshop03</title>
<link href="4.3.Styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="kasten">Inhaltsleer
Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher
und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte
Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen
Nichtbeachtung und Bedeutungslosigkeit und habe doch eine Bitte: Handeln Sie Sinn
stiftend für meine Existenz und lesen Sie mich.
<div id="tabelle"><table width="600" cellpadding="0" cellspacing="0">
<tr class="dunkelgrün">
<td>Selektor</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>Spezifität</td>
</tr>
<tr>
<td>style=&ldquo;&hellip;&ldquo;</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1000</td>
</tr>
<tr>
<td>#bereich</td>
<td>0</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>0100</td>
</tr>
<tr>
<td>p.red</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>2</td>
<td>0002</td>
</tr>
<tr>
<td>p</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>0001</td>
</tr>
<tr>
<td>*</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0000</td>
</tr>
</table></div>
Blindtext im Kopf
Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer Netzhaut erfasst.
Die Zellen werden dadurch in einen Erregungszustand versetzt, der sich &uuml;ber den Sehnerv
in dem hinteren Teil Ihres Gehirns ausbreitet. Von dort aus &uuml;bertr&auml;gt sich die Erregung
in Sekundenbruchteilen auch in andere Bereiche Ihres Grosshirns. Ihr Stirnlappen wird stimuliert.
Von dort aus gehen jetzt Willensimpulse aus, die Ihr zentrales Nervensystem in konkrete Handlungen
umsetzt. Kopf und Augen reagieren bereits. Sie folgen dem Text, nehmen die darin enthaltenen
Informationen auf wie ein Schwamm. Nicht auszudenken, was mit Ihnen h&auml;tte passieren k&ouml;nnen,
wenn dieser Blindtext durch einen echten Text ersetzt worden w&auml;re.
</div>
</body>
</html>
Ponti
Gast


Verfasst am:
16. Sep 2008, 13:05
Rufname:

AW: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmode - AW: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmode

Nach oben
       

Uff, die Übung hatte es wirklich in sich! Mein Versuch ist auch ganz passabel geworden...
Der Groschen bzgl. CSS ist auf jefen Fall gefallen!
Bei der Übung habe ich allerdingschwierigkeiten mit der Rahmenstärke der Tabelle. Ich habe in meiner CSS-Datei folgende Rahmen definiert:
Code:
th{ border: 1px solid #000000; height: 30px; }
td{ border: 1px solid #000000; height: 20px; }

Die Innenrahmen der Tabelle werden jedoch viel dicker dargestellt als der Außenrahmen.
Woran liegt das nur?

Dann noch eine Frage:
Kann man die ganze Seite oder auch die Tabelle mittig zentrieren? Ich habe mit margin bzw. margin-left gearbeitet. Um ein sauberes Ergebnis zu erhalten wäre es doch besser, man zentriert die Boxen, oder???

Viele Grüße
Ponti Confused
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
16. Sep 2008, 18:19
Rufname:
Wohnort: Aachen


AW: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmode - AW: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmode

Nach oben
       

Hallo Ponti,

die Tabelle selbst hat keinen Rahmen bekommen, sondern nur die Zellen. Dafür habe ich aber in dem CSS für die Tabelle die Ränder zusammengelegt (Tipp: border-collapse). Ansonsten ist an deinem CSS nichts auszusetzen. Kommt halt auf die restlichen Tabellenformatierungen an.

Zu deiner zweiten Frage: das Zentrieren geht über text-align: center. Bei einer Box ist das schon etwas trickiger, da funktioniert das nicht so leicht.
Code:
margin-top: -halbe Höhe in px;
margin-left: -halbe Breite in px;
top: 50%;
left: 50%;
position: absolute;

Das wäre das Prinzip eine Box zu zentrieren. Zusätzlich zu den Positionsangaben von 50% wird der Außenrand oben und links mit der negativen Hälfte der Höhe, bzw. Breite angegeben. Insofern warst du mit den margins schon auf dem richtigen Weg.

Gruß,
womaninweb

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
Neues Thema eröffnen   Neue Antwort erstellen Alle Zeiten sind
GMT + 1 Stunde

Diese Seite Freunden empfehlen

Seite 1 von 1
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 1 - Mit HTML und XHTML ins Internet 1 womaninweb 7815 21. Dez 2007, 17:06
maninweb Kapitel 02 - Teil 1 - Mit HTML und XHTML ins Internet
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 3 - Es lebt immer noch! 1 womaninweb 5455 21. Dez 2007, 17:05
maninweb Kapitel 02 - Teil 3 - Es lebt immer noch!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 4 - Der Konformist – XHTML 1 womaninweb 5131 21. Dez 2007, 17:04
maninweb Kapitel 02 - Teil 4 - Der Konformist – XHTML
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 1 - Farbenrausch 2 womaninweb 6249 21. Dez 2007, 17:04
maninweb Kapitel 03 - Teil 1 - Farbenrausch
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 3 - Stein auf Stein ... 1 womaninweb 5232 21. Dez 2007, 17:03
maninweb Kapitel 03 - Teil 3 - Stein auf Stein ...
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 4 - Pimp my Site 1 womaninweb 5383 21. Dez 2007, 17:02
maninweb Kapitel 03 - Teil 4 - Pimp my Site
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt 1 womaninweb 4736 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 1 - Style Sheets – Blätter aufgebrezelt
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 2 - Hat es deine Augen oder meine? 1 womaninweb 4360 21. Dez 2007, 17:01
maninweb Kapitel 04 - Teil 2 - Hat es deine Augen oder meine?
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! 2 womaninweb 4348 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 1 - An die Arbeit, fertig, los!
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 2 - Butter bei die Fische 1 womaninweb 4459 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 2 - Butter bei die Fische
Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten. Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 3 - Feingeschliffen 1 womaninweb 4240 21. Dez 2007, 17:00
maninweb Kapitel 05 - Teil 3 - Feingeschliffen
Keine neuen Beiträge Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle 19 maninweb 6755 13. Sep 2008, 20:55
womaninweb Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: Microsoft Excel Tricks