dizign.de SEO und Webdesign Forum > HTML, CSS

CSS Problem

1 Cypress (Gast)

Ersteinmal Hallo an alle,

bin NEU hier und komme direkt mit folgendem Problem:

Ich habe eine Aufgabe bekommen mit der ich absolut nicht zurecht komme, da meine Kenntnisse in CSS sehr klein sind.
Es geht um folgendes:
http://www.pictureupload.de/pictures/011206122000_CSS.JPG

Diese Bild soll folgendes beinhalten:

Zeileninhalte: werden oben bündig ausgerichtet, Hintergrund #CCDAEA

Überschrift: zentriert; Hintergrund #0080C0; Schrift weiß; Schriftart Arial, Helvetica, sans-serif; Schriftgröße 24 Punk; Schriftstärke dicker.

Sternzeichen: Schrift Arial, Helvetica, sans-serif; unterstrichen; Schriftgröße 16 Punkt; Schrift fett.

Zwischentitel: Schrifgröße 10 Punkt; Hintergrund #0080C0; Schriftart Verdana.

Lauftext: Schriftgröße 8 Üunkt, Schriftart Verdana.

Dies soll in eine Externe *.css Datei erfasst werden.
So soll z.b. nur die CSS-Datei in einer HTML Datei geladen werden und alles erscheien. Ich habe allerdings keine Ahnung wie ich das alles hinbekomme das es so aussieht.

Kann mir da bitte einer Helfen?

Mein bisheriger Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <head>
    <title>Horoskop Website</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
       <style type="text/css">
       
       <!--
          * {margin:0px; padding:0px; position:relative; }
        body {background-color:white; border-style:double; padding-bottom:35.5%; padding-top:     

        -30px;}
          
          #container { width:872px; height:426px;  margin:0px auto; }
          h1 {color:white; font-size:24pt; font-style:normal; font-family:Arial, Helvetica,         

          sans-serif;background-color:#0080c0; }
          h2 {text-decoration:underline; margin-bottom:14pt; font-size:16pt; font-weight:bold;      

          font-family:Arial, Helvetica; sans-serif; }
          h3 {color:white; background-color:#0080c0; display:inline; font-size:10pt;                

          font-family:Veranda;  }
          h4 { font-size:8pt; font-family:Veranda;  }                       
          div {border:double;}
          div.monat {float:left; width:284px; }
          p {}
       -->
       
       </style>

      
    <body>
     <div id="container">
       <center><h1> Horoskop vom 20. bis 26. Oktober</h1></center>
       <div class="monat">
         <h2>L&ouml;we 23.3. - 23.4.</h2>
         <h3 class="beruf">Beruf und Geld</h3>
         <h4>Bei Ihnen sitzt der Euro locker,<br> übertreiben Sie Ihre Einkäufe nicht.</h4>
         <h3 class="liebe">Liebe</h3>
         <h4>Seit Tagen hindert Sie der Stolz an<br> einer Versöhnung. Geben Sie sich<br> gleich
         heute einen Ruck, damit<br> Versöhnung einkehrt.</h4
         <h3 class="gesundheit">Gesundheit</h3>
         <h4>Der URlaub hat Ihnen gut getan,<br> Bemerkenswert, wie fit Sie über die<br> Runden     

       kommen.</h4>   
         <h3 class="besterTag">Bester Tag der Woche</h3>
         <h4>Dienstag</h4>       
       </div>
       <div class="monat">
         <h2>Waage 24.9. - 23.10.</h2>
         <h3 class="beruf">Beruf und Geld</h3>
         <h4>Riskieren Sie nichts, was Sie später<br> bereuen.</h4>
         <h3 class="liebe">Liebe</h3>
         <h4>Schluss mit dem Single-Leben! Die<br> Chancen stehen gut.</h4>
         <h3 class="gesundheit">Gesundheit</h3>
         <h4>Sie müssen seelichen Belsatungen mit<br> der wirklichen entspannendem Ausgleich<br> 

    rechtzeitig begenen.</h4>   
         <h3 class="besterTag">Bester Tag der Woche</h3>
         <h4>Samstag</h4>       
       </div>   
       <div class="monat">
         <h2>Sch&uuml;tze 23.11. - 21.12.</h2>
         <h3 class="beruf">Beruf und Geld</h3>
         <h4>Im Job können Sie sich gut behaupten.</h4>
         <h3 class="liebe">Liebe</h3>
         <h4>Sie sollten sich nicht in Ihre Schneckenhaus<br> zurückziehen. Sprechen Sie am<br> 

    Donnerstag über Ihre Sorgen, dann wird's<br> auch wieder harmonisch.</h4>
         <h3 class="gesundheit">Gesundheit</h3>
         <h4>Sie kommen nicht darum herum, sich in<br> dieser Woche mehr um Ihre Kondition zu<br> 

    kümmern. Das ist die Grundlage für<br> Wohlbefinden.</h4>   
         <h3 class="besterTag">Bester Tag der Woche</h3>
         <h4>Dienstag</h4>       
       </div> 
    </div> 
    </body>

    </html>

Die Formatierung stimmt trozdem nicht. Hmm.

19.12.2006 07:09

2 mark

Moin

Sieht doch gar nicht so schlecht aus.
Gib dem body mal eine

font-family:Arial, Helvetica; sans-serif;

dann sollten auch alle Schriften einheitlich sein.

Ansonsten hilft try and error, so lernt man es am leichtesten.

die-antwort-auf-alle-fragen.de

19.12.2006 11:42

3 Cypress (Gast)

Hi.

kann ich ja ansich nicht machen, da alle schriften eine bestimmte Formatierung haben müssen.... Was kann ich da machen?

20.12.2006 19:52

4 mark

was mir gerade auffäält ist

font-family:Veranda;

das muss

font-family:Verdana;

sein. Veranda ist keine Schrift, zumindest keine Standardschrift.

Um jedem Container eine eigene Schrift zuzuteilen, musst Du dies eben im CSS definieren.

die-antwort-auf-alle-fragen.de

20.12.2006 20:35

5 Cypress (Gast)

Danke für die Info... jetzt passt es schon besser lächel

Aber guckt mal bitte...

Es muss rechts eins kleiner Abstand zum 1 Kästchen sein wir das letzte ganz rechts zum großen Rahmen. und auch unten muss das passen... aber wie?

der editierte code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Horoskop Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <style type="text/css">
   
   <!--
      * {margin:0px; padding:0px; }
	body {background-color:white; border-style:double; padding-bottom:35.5%; padding-top: 	

	-30px;}
      
      #container { width:872px; height:285px;  margin:90px auto; }
      h1 {color:white; font-size:24pt; font-style:normal; font-family:Arial, Helvetica,         

      sans-serif;background-color:#0080c0; }
      h2 {text-decoration:underline; margin-bottom:14pt; font-size:16pt; font-weight:bold;      

      font-family:Arial, Helvetica; sans-serif; }
      h3 {color:white; background-color:#0080c0; display:inline; font-size:10pt;                

      font-family:Verdana;  }
      h4 { font-size:8pt; font-family:Verdana;  }              	     
      div {border:double;}
      div.monat {float:left; width:284px; }
      p {}
   -->
   
   </style>

  
<body>
 <div id="container">
   <center><h1> Horoskop vom 20. bis 26. Oktober</h1></center>
   <div class="monat">
     <h2>L&Ouml;WE 23.3. - 23.4.</h2>
     <h3 class="beruf">Beruf und Geld</h3>
     <h4>Bei Ihnen sitzt der Euro locker,<br> übertreiben Sie Ihre Einkäufe nicht.</h4>
     <h3 class="liebe">Liebe</h3>
     <h4>Seit Tagen hindert Sie der Stolz an<br> einer Versöhnung. Geben Sie sich<br> gleich
     heute einen Ruck, damit<br> Versöhnung einkehrt.</h4
     <h3 class="gesundheit">Gesundheit</h3>
     <h4>Der URlaub hat Ihnen gut getan,<br> Bemerkenswert, wie fit Sie über die<br> Runden     

   kommen.</h4>   
     <h3 class="besterTag">Bester Tag der Woche</h3>
     <h4>Dienstag</h4>       
   </div>
   <div class="monat">
     <h2>WAAGE 24.9. - 23.10.</h2>
     <h3 class="beruf">Beruf und Geld</h3>
     <h4>Riskieren Sie nichts, was Sie später<br> bereuen.</h4>
     <h3 class="liebe">Liebe</h3>
     <h4>Schluss mit dem Single-Leben! Die<br> Chancen stehen gut.</h4>
     <h3 class="gesundheit">Gesundheit</h3>
     <h4>Sie müssen seelichen Belsatungen mit<br> wirklichen entspannendem Ausgleich<br> 

rechtzeitig begenen.</h4>   
     <h3 class="besterTag">Bester Tag der Woche</h3>
     <h4>Samstag</h4><br>
       
   </div>   
   <div class="monat">
     <h2>SCH&Uuml;TZE 23.11. - 21.12.</h2>
     <h3 class="beruf">Beruf und Geld</h3>
     <h4>Im Job können Sie sich gut behaupten.</h4>
     <h3 class="liebe">Liebe</h3>
     <h4>Sie sollten sich nicht in Ihr Schneckenhaus zurückziehen. Sprechen Sie am<br> 

Donnerstag über Ihre Sorgen, dann wird's auch wieder harmonisch.</h4>
     <h3 class="gesundheit">Gesundheit</h3>
     <h4>Sie kommen nicht darum herum, sich in<br> dieser Woche mehr um Ihre Kondition zu<br> 

kümmern. Das ist die Grundlage für<br> Wohlbefinden.</h4>   
     <h3 class="besterTag">Bester Tag der Woche</h3>
     <h4>Dienstag</h4>       
   </div> 
</div> 
</body>

</html>

21.12.2006 20:18

6 mark

Abstand macht man am besten mit padding oder margin.

die-antwort-auf-alle-fragen.de

21.12.2006 20:22

7 Cypress (Gast)

und wie genau? wo muss ich dies einfügen bzw. wir formatieren
?

26.12.2006 13:11

8 mark

Sind die Beispiele nicht deutlich genug?

Um einen Abstand mit padding zu erhalten, definierst Du im stylesheet am einfachsten eine Klasse:

.abstand
{
padding:10px 0 0 10px;

}

Wobei die Werte in der Reihenfolge: 1=oben, 2=rechts, 3=unten, 4=links interpretiert werden.

Im Dokument gibst Du dem Gewünschten Element dann entsprechend die Klasse:

<p class="abstand">Hier kommt der Text der Abstand haben soll</p>

das wärs im Prinzip.

die-antwort-auf-alle-fragen.de

26.12.2006 14:25 | geändert: 26.12.2006 14:25

9 Cypress (Gast)

Soo...
Die HTML Datei:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Horoskop Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="stylesheet" href="Horoskop.css" type="text/css">
</head>

<body>
 <div id="container">
   <center><h1> Horoskop vom 20. bis 26. Oktober</h1></center>
   <div class="monat">
     <h2>L&Ouml;WE 23.3. - 23.4.</h2>
     <h3 class="beruf">Beruf und Geld</h3>
     <h4>Bei Ihnen sitzt der Euro locker,<br> übertreiben Sie Ihre Einkäufe nicht.</h4>
     <h3 class="liebe">Liebe</h3>
     <h4>Seit Tagen hindert Sie der Stolz an<br> einer Versöhnung. Geben Sie sich<br> gleich
         heute einen Ruck, damit<br> Versöhnung einkehrt.</h4
     <h3 class="gesundheit">Gesundheit</h3>
     <h4>Der URlaub hat Ihnen gut getan,<br> Bemerkenswert, wie fit Sie über die<br> Runden              kommen.</h4>   
     <h3 class="besterTag">Bester Tag der Woche</h3>
     <h4>Dienstag</h4>       
   </div>
   <div class="monat">
     <h2>WAAGE 24.9. - 23.10.</h2>
     <h3 class="beruf">Beruf und Geld</h3>
     <h4>Riskieren Sie nichts, was Sie später<br> bereuen.</h4>
     <h3 class="liebe">Liebe</h3>
     <h4>Schluss mit dem Single-Leben! Die<br> Chancen stehen gut.</h4>
     <h3 class="gesundheit">Gesundheit</h3>
     <h4>Sie müssen seelichen Belsatungen mit<br> wirklichen entspannendem Ausgleich<br>          rechtzeitig begenen.</h4>   
     <h3 class="besterTag">Bester Tag der Woche</h3>
     <h4>Samstag</h4>
<br>
       
   </div>   
   <div class="monat">
     <h2>SCH&Uuml;TZE 23.11. - 21.12.</h2>
     <h3 class="beruf">Beruf und Geld</h3>
     <h4>Im Job können Sie sich gut behaupten.</h4>
     <h3 class="liebe">Liebe</h3>
     <h4>Sie sollten sich nicht in Ihr Schneckenhaus zurückziehen. Sprechen Sie am<br>          Donnerstag über Ihre Sorgen, dann wird's auch wieder harmonisch.</h4>
     <h3 class="gesundheit">Gesundheit</h3>
     <h4>Sie kommen nicht darum herum, sich in<br> dieser Woche mehr um Ihre Kondition zu<br>          kümmern. Das ist die Grundlage für<br> Wohlbefinden.</h4>   
     <h3 class="besterTag">Bester Tag der Woche</h3>
     <h4>Dienstag</h4>       
   </div> 
</div> 
</body>
</html>

Die CSS Datei:

  
   <!--
      * {margin:2px; }
	body {background-color:white; }
      
      #container { width:878px; height:307px;  margin:90px auto; }
      h1 {color:white; font-size:24pt; font-style:normal; font-family:Arial, Helvetica,                     sans-serif;background-color:#0080c0; }
      h2 {text-decoration:underline; margin-bottom:14pt; font-size:16pt; font-weight:bold;                   font-family:Arial, Helvetica; sans-serif; }
      h3 {color:white; background-color:#0080c0; display:inline; font-size:10pt;                            font-family:Verdana;  }
      h4 { font-size:8pt; font-family:Verdana;  }              	     
      div {border:1px solid #000;}
      div.monat {float:left; width:284px; margin-left:3px; margin-right:3px; background-color:#CCDAEA;}
     
   -->

Warum stimmt das denn immernoch nicht?

03.01.2007 19:48

10 Forum

Ein Beitrag aus diesem Thread wurde in einen neuen Thread verschoben:

steam team.exe(main exception)

17.01.2007 15:30

nach oben

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.

Verwandte Themen
Thema	Autor	Forum	Beiträge	Letzter Beitrag
steam team.exe(main exception)	hi leute	Sonstiges	12	08.07.2010 20:21
Mein junges Forum...	RehaBill	Vorstellung	31	20.07.2007 13:52
HTML-Dokument ältere Browser	Heiopei	HTML, CSS	8	05.01.2007 10:00
Liste per CSS gestalten	MarieLouise	HTML, CSS	9	09.10.2006 17:58
Anzeige Problem mit Firefox und Internet Explorer	Maike	HTML, CSS	7	21.09.2006 13:55

Forum dizign.de

CSS Problem

Beitrag schreiben (als Gast)

Dein Name:

Text:

menu