Lektion 10 - Globale Formatierungen

Benutzeravatar
Kerberos
Beiträge: 30
Registriert: Mo 2. Mai 2016, 18:07

Re: Lektion 10 - Globale Formatierungen

Beitrag von Kerberos » So 15. Mai 2016, 11:13

Habe ein kleines Problem, im Kompozer schaut es so aus:

http://polska1919.de/WEB/kompozer.PNG

nach dem Hochladen so:

http://polska1919.de/WEB/lektion10.html

was ist da schief gelaufen?

camouflage1984
Beiträge: 255
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 10 - Globale Formatierungen

Beitrag von camouflage1984 » So 15. Mai 2016, 11:18

Hallo Kerberos

Die styles.css fehlt online!
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
Kerberos
Beiträge: 30
Registriert: Mo 2. Mai 2016, 18:07

Re: Lektion 10 - Globale Formatierungen

Beitrag von Kerberos » So 15. Mai 2016, 11:23

Oh :oops: habe es nachgeholt, jetzt funz es. Hatte gedacht, dass dies auch "Automatisch" geht wie bei den Lektionen vorher. Danke für die schnelle Hilfe! Ihr seit Super!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 10 - Globale Formatierungen

Beitrag von anke » Mi 18. Mai 2016, 07:01

Hallo Keberos

dann wollen wir jetzt einmal deine CSS aufräumen :)

#body {
background-color: #cccccc;
}
bitte nimm die Raute vor body weg. body ist genauso wie h1 oder h2 bereits eine Klasse, die du nicht in eine ID umwandeln solltest.
Dann gehört hier die generelle Schriftgröße und Schriftart hinein. Die Standardschriftart ist unter Windows Times New Roman. Das ist eine Windows-Schriftart. Bei Mac ist das glaube ich Helvetica und unter Linux ist das Liberation Sans. Also drei ganz unterschiedliche Schriftarten. Bei der Schriftgröße interpretiert hat jeder Browser eine andere. Deshalb ist es wichtig hier eine Standardschriftgröße zu vergeben, sodass die Browser gezwungen sind diese Schriftgröße zu verwenden. Dann läuft auch nichts mehr über die Ränder ;)

#seite {
width: 90%;
margin-right: auto;
margin-left: auto;
}
#kopf {
background-position: left top;
height: 100px;
background-color: #333300;
background-repeat: repeat;
background-image: url(grafiken/uebung/images/stein-mauer.png);
font-family: "Courier New",Courier,monospace;
color: #330000;
font-size: 1.6em;
line-height: 1.9em;
font-weight: bolder;
font-style: normal;
text-align: right;
margin-top: 30px;
padding-top: 30px;
}
Verwendest du eine füllende Hintergrundgrafik, brauchst du keine Hintergrundfarbe mehr einfügen. Den Font-Style brauchst du hier auch nicht auf normal setzen.
#navi {
background-color: #ffff66;
width: 170px;
float: left;
}
#navi ul {
list-style-type: none;
margin-left: 5px;
margin-right: 5px;
}
#navi li {
width: 75px;
font-size: 1em;
}
font-size: 1em ist wie 100% und ändert nichts an der Schriftgröße.
#navi a {
display: block;
text-decoration: none;
font-weight: inherit;
color: #cc0000;
padding-top: 5px;
padding-bottom: 5px;
text-align: left;
}
inheritet bedeutet: vererbt. Das kannst du weglassen, das immer die Formatierungen des übergeordneten Elemente in das verschachtelte Element übergeben wird.

#navi a:focus {
}
#navi a:hover {
color: #993300;
font-style: italic;
}
#navi a:visited {
}
#inhalt {
height: 300px;
padding-right: 1cm;
padding-left: 6cm;
}
Die Höhe musst du hier heraus nehmen, da sonst dein Inhalt nicht ausreichend Platz in der Seite hat und läuft dann über den footer hinweg. Sieht nicht so schön aus ;)
Die Innenabstände padding-right und padding left hast du hier in cm angegeben. Du solltest dir angewöhnen bei fix-Angaben immer bei der gleichen Einheit zu bleiben. Verwende hier lieber px.

#footer {
background-color: #999900;
}

Das wars schon. So viel war es gar nicht. Bearbeite deine CSS entsprechend, dann guck ich noch einmal drüber.

Gruß Anke

Benutzeravatar
Kerberos
Beiträge: 30
Registriert: Mo 2. Mai 2016, 18:07

Re: Lektion 10 - Globale Formatierungen

Beitrag von Kerberos » Fr 20. Mai 2016, 20:17

Hallo Anke,

hier die verbesserte Version:

http://polska1919.de/WEB/lektion10.html


Ich Danke Dir für Deine Mühe, die Du Dir mit mir gibst!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 10 - Globale Formatierungen

Beitrag von anke » Sa 21. Mai 2016, 08:36

Hallo keberos
Schau einmal, wie deine Seite bei mir unter Linux aussieht
keberos.jpg
keberos.jpg (298.73 KiB) 545 mal betrachtet
Bitte lege eine Schriftart (font-familiy) und eine Schriftgröße für deinen normalen Text im body fest.

Viele Grüße
Anke ;)

Benutzeravatar
Kerberos
Beiträge: 30
Registriert: Mo 2. Mai 2016, 18:07

Re: Lektion 10 - Globale Formatierungen

Beitrag von Kerberos » Sa 21. Mai 2016, 10:41

Danke, für die Info, bei mir schaut es im Browser so aus
http://polska1919.de/WEB/Unbenannt.PNG

Habe es geändert, hoffe es passt so
http://polska1919.de/WEB/lektion10.html

Auf was man alles achten muss :shock:

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 10 - Globale Formatierungen

Beitrag von anke » Sa 21. Mai 2016, 10:50

Hallo Kerberos
Bei der Schriftfamilie wählt man immer eine Windows, eine Mac und eine Linux-Schriftart. Wenn du zwei Windows-Schriftarten (Verdana und Arial) wählst, wird immer die erste der beiden Verwendet. Du kannst die Arial also wieder streichen ;)

Damit hast du dieses Übung aus super ausgearbeitet und kannst zur nächsten weitergehen.

Viele Grüße
Anke

Antworten