✔ CSS Design Umsetzungsfrage

Status
Nicht offen für weitere Antworten.
T

tequila slammer

Erfahrenes Mitglied
wie schon in einem anderen Thread mitgeteilt arbeite ich gerade daran, meine Seite auf css umzustellen. Nun habe ich ein neues Design entworfen und frage mich die ganze Zeit schon, wie ich das in CSS umsetzen kann.

Ausgangssituation ist folgende: Ich habe meine Grunddatei in mehrere <div>s aufgeteilt, die da wären:
header, menue, submenue, content

Der header hat runde Ecken und besteht hauptsächlich aus einer Grafik. Ist es da nun sinnvoll dem div header einfach das hintergrundbild des headers zu geben? Das ist mir nämlich etwas unklar. Überhaupt habe ich keinen richtigen Ansatz um ein Design in CSS umzusetzen.

Wie sieht es eigentlich bei Produktpräsentationen aus? Beispielsweise die eines Pizzalieferanten.

Mfg Sebastian
 
Ich habe nun begonnen mein neues Design umzusetzen und dabei ergebt sich auch schon die erste Frage. Die untere Bogengrafik ist ein gif, dass 900px breit und 34px hoch ist. So habe ich es auch in meinem StyleSheet stehen aber der IE nimmt es nur so, dass die untern Rundungen nochmal zusehen sind. Was läuft da falsch?
Der Link: http://www.symetrics.info/test/cayas/

Mein css:
Code: 
body, html { 
   background-image: url(hint.gif);
   background-repeat: repeat-x;
   background-color: #FFFFFF;
   
   color: #E1E1E1;
   width: 100.01%
}

#container {
   width: 900px;
   padding-top: 2%;
   padding-left: 12.5%;
   padding-right: 12.5%;
}

#header {
   height: 227px;
   background-image: url(header.gif);
   
   /*
   border-right: 1px solid #696969;
   border-left: 1px solid #696969;
   */
}

#header div {
   padding: 65px 0px 0px 1px;
}

/* Menü Formatierungen */

#menue {
   width: 900px;
   height: 34px;
   background-image: url(menue_hint.gif);
   
   color: #696969;
}

#menue ul {
   margin: 6px 0 0 20px;
	padding: 0;
	list-style-type: none;
}

#menue li {
   display: inline;
   padding: 0 10px;
}

#menue a {
   text-decoration: none;
   color : #696969;
}


#submenue {
   background-color: #E1E1E1;

}

#content {
   height: 200px;
   width: 900px;
   padding: 10px 5px 0px 10px;
   
   color: #696969;
   
   border-right: 1px solid #696969;
   border-left: 1px solid #696969;
}

#footer {
   background-image: url(footer.gif);
   width: 900px;
   height: 5px;  
}
 
Die Wiederholung des Hintergrundbildes lässt sich mit background-repeat:no-repeat abstellen:

Code: 
#footer {
   background-image: url(footer.gif);
   background-repeat: no-repeat;
   width: 900px;
   height: 5px;  
}

/* oder in Kurzform ;) */

#footer {
   background: url(footer.gif) no-repeat;
   width: 900px;
   height: 5px;
}

[editpost]

Die untere "Bogen"-Grafik footer.gif ist aber nicht, wie von dir beschrieben, 34 Pixel, sondern lediglich 10 Pixel, und somit doppelt so hoch, wie du die Höhe für das Footer-DIV definiert hast. ;)

In dem CSS-Code stecken aber noch weitere Ungereimtheiten, weshalb das Layout in den übrigen "nicht-IE"-Browsern (Firefox, Mozilla, Netscape, Opera) fehlerhaft / verschoben dargestellt wird, Stichwort: Abmessungen der Box im Boxmodell.

Daher hab ich das Stylesheet etwas überarbeitet und anschliessend die Darstellung des Seitenlayouts in allen mir zur Verfügung stehenden Browsern erfolgreich getestet.

Code: 
* {
   margin: 0;
   padding: 0;
} 

body, html {
   background-image: url(http://www.symetrics.info/test/cayas/hint.gif);
   background-repeat: repeat-x;
   background-color: #FFFFFF;
   color: #E1E1E1;
}

#container {
  width: 900px;
  margin: 0 auto;
  padding-top: 2%;
}

#header {
   height: 227px;
   background-image: url(http://www.symetrics.info/test/cayas/header.gif);
}

#header div {
   padding: 65px 0px 0px 1px;
}

/* Menü Formatierungen */

#menue {
   width: 900px;
   height: 34px;
   background-image: url(http://www.symetrics.info/test/cayas/menue_hint.gif);
   color: #696969;
}

#menue ul {
   margin: 0 0 0 20px;
   padding: 0;
   list-style-type: none;
}

#menue li {
   display: inline;
   padding: 0 10px;
}

#menue a {
   text-decoration: none;
   color : #696969;
}

#submenue {
   background-color: #E1E1E1;
}

#content {
   min-height: 200px;
   height: auto !important;
   height: 200px;
   width: 898px;
   color: #696969;
   border-right: 1px solid #696969;
   border-left: 1px solid #696969;
}

#content p {
   margin: 0;
   padding: 10px 5px 0px 10px;
}

#footer {
   background: url(http://www.symetrics.info/test/cayas/footer.gif) no-repeat;
   width: 900px;
   height: 10px;
}

Die Ergänzungen im HTML-Code sind fett markiert:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Cayas - individuelle Software</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body>
<div id="container">
<div id="header"><div><img src="http://www.symetrics.info/test/cayas/header_splash.jpg" alt="header_splash" border="0"></div></div>
<div id="menue"><ul><li><a href="index.html">Start</a></li><li>Unternehmen</li><li>Dienstleistungen</li><li>Kontakt</li></ul></div>
<div id="content">
<p>hasdhkashdkahdkashdkahd kashdkjahsdjkhaskdjahs kdjhakjdhadhhakdhk ashdkjshdkashdkjah djkshjahskdjhkadhdhjkdaksd
<br />akjdshfkjdshfjasldfhkasf hkdsfdasfadsf
<br />dasfasdf</p>
<p>adsfasdfasdf</p>
<p>adfasdfa</p>
<p>asdfasd</p>
<p>
hasdhkashdkahdkashdkah dkashdkjahsdjkhaskdjahskdjhakj dhadhhakdhkashdkjshdkashdkja hdjkshjahskdjhkadhdhjkdaksd
<br />akjdshfkjdshfjasldfhkasfhkdsfdasfadsf
<br />dasfasdf</p>
<p>adsfasdfasdf</p>
<p>adfasdfa</p>
<p>asdf</p>
</div>
<div id="submenue"></div>
<div id="footer"></div>
</div>
</body>
</html>
 
danke für die überarbeitung des css.
Nun habe ich allerdings ein Problem.

Der Text klebt nur direkt am linken Rand. Versuche ich das mit dem Innenabstand (padding) 10px zu ändern dann wird automatisch der rechte Rand auch verschoben.

Änderung:

Code: 
#content {
   min-height: 200px;
   height: auto !important;
   width: 898px;
   color: #696969;
   border-right: 1px solid #696969;
   border-left: 1px solid #696969;
   
   padding: 10px 5px 0px 10px;
}

Und die anderen Fragen:
Was macht !important?
Warum 2px kleiner?
 
Wenn die Box 900 Pixel breit dargestellt werden soll, dann müssen die horizontalen Innenabstände, sowie der linke und rechte Rahmen von der ürsprünglichen width-Angabe abgezogen werden.

Code: 
#content {
   min-height: 200px; /* Mindesthöhe für moderne Browser */
   height: auto !important;  /* !important-Regel für moderne Browser */
   height: 200px;  /* Mindesthöhe für IE */
   width: 883px; /* 883px + 2*1px (linker + rechter Rahmen) + 15px (linker + rechter Innenabstand)  = 900px */
   color: #696969;
   border-right: 1px solid #696969;
   border-left: 1px solid #696969;
   
   padding: 10px 5px 0px 10px; /* Innenabstand oben - rechts - unten - links */
}
Lies dir hierzu einfach den von mir verlinkten Artikel zu den Abmessungen im Boxmodell durch.
 
Achso ist. Width gibt ja die Gesamtbreite des Inhalts (außer ie, da ist es die Gesamtbreite des Elements) an. Ich hatte das so verstanden, dass sich padding dann selbst abzieht von der Contentbreite. Aber da habe ich wohl was mißverstanden.

Je mehr ich damit mache, um so mehr Spaß macht es. Man muss einfach nicht so viel nachdenken wie bei Tabellenlayouts. Und dank deiner Unterstützung und dem Buch das ich gerade lese bin ich doch schon recht schnell zu einem brauchbaren Ergebnis gekommen.

Gibt es eine Website in der man die Seite eingibt und man bekommt als Output das Erscheinungsbild mehrerer Browser? Ich möchte halt nur ungerne x Browser installieren.

mfg Sebastian
 
tequila slammer hat gesagt.:
Gibt es eine Website in der man die Seite eingibt und man bekommt als Output das Erscheinungsbild mehrerer Browser? Ich möchte halt nur ungerne x Browser installieren.
Zum Vergrößern anklicken....
Hm, ich meine mich ganz dunkel an solch einen Dienst erinnern zu können, nur leider habe ich ihn nicht in meinen Lesezeichen gespeichert, da ich die gängigsten Browser auf meinem System installiert habe. ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück