|
Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell
|
| Autor |
Nachricht |
maninweb
VBA Professional & More
Verfasst am:
24. Nov 2007, 12:33
Rufname: maninweb
Wohnort: Herzogenrath
|
|
| |
|
Hallo zusammen...
der letzte Teil zu Kapitel 04 wurde soeben veröffentlicht 
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 
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
|
|
Lisa
Moderator; Word seit Word 5.0 (für DOS)
Verfasst am:
09. Dez 2007, 20:04
Rufname:
Wohnort: Leipzig
|
| |
| |
|
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, 12:31
Rufname:
Wohnort: Herzogenrath
|
|
| |
|
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, 11:13
Rufname:
|
|
| |
|
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  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=“…“</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 über den Sehnerv
in dem hinteren Teil Ihres Gehirns ausbreitet. Von dort aus überträ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ätte passieren können,
wenn dieser Blindtext durch einen echten Text ersetzt worden wäre.
</div>
</body>
</html>
|
|
Ponti
Gast
Verfasst am:
16. Sep 2008, 12:05
Rufname:
|
|
| |
|
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 
|
|
womaninweb
(X)HTML und CSS Junkie
Verfasst am:
16. Sep 2008, 17:19
Rufname:
Wohnort: Herzogenrath
|
| |
| |
|
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
|
|
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 |
 |
Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 01 - Zielgruppendefinition |
1 |
womaninweb |
3985 |
21. Dez 2007, 16:06
maninweb  |
|
Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 2 - Es lebt! |
1 |
womaninweb |
3277 |
21. Dez 2007, 16:05
maninweb |
|
Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 4 - Der Konformist – XHTML |
1 |
womaninweb |
2440 |
21. Dez 2007, 16:04
maninweb |
|
Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 3 - Stein auf Stein ... |
1 |
womaninweb |
2225 |
21. Dez 2007, 16:03
maninweb |
|
Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 4 - Pimp my Site |
1 |
womaninweb |
2664 |
21. Dez 2007, 16:02
maninweb |
|
Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 2 - Hat es deine Augen oder meine? |
1 |
womaninweb |
2031 |
21. Dez 2007, 16:01
maninweb |
|
Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 04 - Teil 3 - Kaskadierung, Prioritäten, Boxmodell |
1 |
womaninweb |
2146 |
21. Dez 2007, 16:01
maninweb |
|
Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! |
2 |
womaninweb |
1865 |
21. Dez 2007, 16:00
maninweb |
|
Wichtig: Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 3 - Feingeschliffen |
1 |
womaninweb |
1834 |
21. Dez 2007, 16:00
maninweb |
 |
Workshop: Webdesign für Einsteiger: Kapitel 03 - Teil 2 - Schaffe, schaffe, Seite bastle |
19 |
maninweb |
2671 |
13. Sep 2008, 19:55
womaninweb |
|
Workshop: Webdesign für Einsteiger: Kapitel 05 - Teil 1 - An die Arbeit, fertig, los! |
5 |
maninweb |
1435 |
03. Apr 2008, 11:05
voler |
|
Workshop: Webdesign für Einsteiger: Kapitel 02 - Teil 3 - Es lebt immer noch! |
50 |
maninweb |
5038 |
11. Feb 2008, 21:54
Nicki007 |
| |
|
