Aufgabe Rahmen... aber kriege es nicht so hin

Aaron · 12. November 2008

Hallo
So nun bin ich bei dieser Aufgabe:
<a class="postlink" href="http://www.html-seminar.de/css-einsetzen.htm">http://www.html-seminar.de/css-einsetzen.htm</a>

Zwar beim Rahmen. Ich habe eigentlich alles gemacht. Aber bei mir zeigt es nur der hellgraue Rahmen oben an. Dabei soll er ja links auch noch anzeigen. Ich habe schon einiges versucht.... ohne Erfolg. Vielleicht kann mir jemand das verraten wie das genau geht?

Danke sehr.

Hier mal mein Code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>




<head>
    <title>Titel</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="style.css" type="text/css" rel="stylesheet" />
</head>




<body>
    <style  type="text/css">
<!--




/*  folgende  Definition  bezieht  sich  auf  TAG  h1  */
h1  {
   color:#000000;    /*  Farbe  orange  */
   font-size:28pt;   /*  Größe  28pt    */
   font-family:arial,  "lucida  console",  sans-serif;  /*  Schriftart  */
   border-color:#FF00FF;
   border-width:1px;
   border-style:Solid;
}
h2 {
   border-top-color:#C0C0C0;
   border-top-width:10px;
   border-top-style:solid;
}
p {
   border-bottom-color:#FF7F2A;
   border-bottom-style:dotted;
}
-->
</style>







<h1>wichtigste  Überschrift  h1</h1>




<h2>Und nun ein normaler Absatz mit mehreren Zeilen, damit die
Texteinr&uuml;ckung in der ersten Zeile gut zur Geltung kommt.</h2>




<p>Und  nun  ein  normaler  Absatz</p>




<h2>Überschrift  h2</h2>




<p>Noch  ein  normaler  Absatz</p>
</body>
</html>[quote][/quote]

Alles anzeigen

Peter Gedamke · 13. November 2008

der Style <style type="text/css"> muss im Headbereich stehen

YetiZwerg · 13. November 2008

er meint so:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>




<head>
    <title>Titel</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="style.css" type="text/css" rel="stylesheet" />




<style  type="text/css">
<!--




/*  folgende  Definition  bezieht  sich  auf  TAG  h1  */
h1  {
   color:#000000;    /*  Farbe  orange  */
   font-size:28pt;   /*  Größe  28pt    */
   font-family:arial,  "lucida  console",  sans-serif;  /*  Schriftart  */
   border-color:#FF00FF;
   border-width:1px;
   border-style:Solid;
}
h2 {
   border-top-color:#C0C0C0;
   border-top-width:10px;
   border-top-style:solid;
}
p {
   border-bottom-color:#FF7F2A;
   border-bottom-style:dotted;
}
-->
</style>




</head>




<body>








<h1>wichtigste  Überschrift  h1</h1>




<h2>Und nun ein normaler Absatz mit mehreren Zeilen, damit die
Texteinr&uuml;ckung in der ersten Zeile gut zur Geltung kommt.</h2>




<p>Und  nun  ein  normaler  Absatz</p>




<h2>Überschrift  h2</h2>




<p>Noch  ein  normaler  Absatz</p>
</body>
</html>

Alles anzeigen

Aaron · 15. November 2008

Danke sehr für die Antworten und gut zu wissen das dies im Tag <head> geschrieben wird. Nun aber der graue Rahmen ist immer noch nur oben zu sehen. Dabei sollte er doch auf der linke Seite auch sein.
Mehr als diese vier Code für Rahmen weiss ich auch nicht mehr:

- border-top-width
- border-right-width
- border-bottom-width
- border-left-width

Ich muss bei der Aufgabe dies tun:
h2 - hellgrau, nur links und oben mit Rahmenstärke von 10px und solid

Aaron · 15. November 2008

So nun habe ich es seblst heraus gefunden!

Zwar so sieht es dann aus:

Code

h2 {
   border-left-color:#C0C0C0;
   border-left-width:10px;
   border-left-style:solid;
   border-top-color:#C0C0C0;
   border-top-width:10px;
   border-top-style:solid;

Hätte ja nie gedacht das man dies alles schreiben muss. Also auf jeder Seite. Aber probieren geht über studieren :wink:

Peter Gedamke · 15. November 2008

nun wollen wir das Ding doch noch einmal völlig neu schreiben,
so wie es auch in Kurzform eingegeben werden kann, wenn alle 4 Seiten gleich ausfallen sollten -

alles in einem Satz, mit Borderbreite, Stil und Color

style="border:2px solid #C0C0C0;"

Probier's mal so aus, "und dann klappt's auch mit dem Nachbarn" :lol: :lol: :lol:

Aaron · 15. November 2008

Nun ich schreibe noch nichts in Kurzform. Aber wie ich recht verstehe wenn ich dieser Code einschreibe, so sollte es einen kompletten Rahmen erscheinen? Anstatt alles Seite zu schreiben eben nur diesen Befehl.

Ok ich bin zwar schon bei der nächsten Aufgabe, aber ich schreibe es dennoch ein. Aha nichts passiert. :?

Code

<style  type="text/css">
<!--




/*  folgende  Definition  bezieht  sich  auf  TAG  h1  */
h1  {
   color:#000000;    /*  Farbe  orange  */
   font-size:28pt;   /*  Größe  28pt    */
   font-family:arial,  "lucida  console",  sans-serif;  /*  Schriftart  */
   text-align:right;
   background-color:lightskyblue;




}
h2 {
   text-align:center;
   color:#FFFFFF;
   background-color:limegreen;
   style="border:2px solid #C0C0C0;"




}
p {




}
-->
</style>

Alles anzeigen

Ich glaube jetzt bekomme ich ärger mit dem Nachbar :lol:

Peter Gedamke · 15. November 2008

wenn du eben nicht in Kurzform schreiben willst (warum eigentlich nicht??? auf einer Webseite zählt jedes eingesparte kb) musste eben die Einzelform wählen, und die würde dann für alle 4 Seiten eingefügt so aussehen...

Code

style="border-left-width:2px;border-style:solid;border-color:#C0C0C0;
border-top-width:2px;border-style:solid;border-color:#C0C0C0;
border-right-width:2px;border-style:solid;border-color:#C0C0C0;
border-bottom-width:2px;border-style:solid;border-color:#C0C0C0;"

wäre mir zu umständlich :wink:

Peter Gedamke · 15. November 2008

sofern du dieses Geschreibsel nicht jedem Objekt, dem du diese Border hinzufügen willst, erneut eigeben möchtest, erstelle dir daraus eine "class"

Code

.border
{
border-width:3px;
border-style:solid;
border-color:#CFCFCF;
}

die du dann wie folgt bei einer Image zum Beispiel eingibst:

<img class="border" style="" src="deineTatei.jpg" width="?" height="?" alt="">

YetiZwerg · 16. November 2008

da tut sich eine Frage für mich auf, warum macht man bei CSS ab und zu mal ne #, nen ., nichts oder etwas, was man vorher mit einer # definiert hat vor die Bezeuchnung??

Beispiele:

Code

#header {
position: fixed;
margin: 0 auto;
...
}




.border
{
border-width:3px;
border-style:solid;
border-color:#CFCFCF;
} 




h2.section {
margin-top: 10px;
font-size: 13px;
...
}

Alles anzeigen

was bewirkt das im einzelnen???

mkG YetiZwerg

Peter Gedamke · 16. November 2008

ein # setzt man für eine sog. ID
diese werden für Haupteile deiner Seite erstellt... also die Formatierung des Headers, der Navi usw.
Gleiche ID's dürfen auf jeder Seite nur einmal genutzt werden.

Einen . (< Punkt) vergebe ich bei einer "class", die Formatierungen für spezielle Objekte beinhaltet.

Zum Beispiel:

Code

#haupt
{
width:780px;
padding:10px;
border:1px solid #c9c9c9;
}




.abstand
{
padding:5px;
}




.grauton
{color:#6F6F6F;}




td.aktiv
{
font-family:  Verdana, Helvetica, sans-serif;
width:10%;
background:#dfdfdf;
padding:2px;
text-align:center;
font-weight:bold;
font-size:9pt;
border-top:1px solid #9F9F9F;
border-right:1px solid #9F9F9F;
border-left:1px solid #9F9F9F;
}




td.passiv
{
font-family:  Verdana, Helvetica, sans-serif;
width:10%;
background:#cfcfcf;
padding:2px;
text-align:center;
font-weight:bold;
font-size:8pt;
border-top:1px solid #dfdfdf;
border-right:1px solid #dfdfdf;
border-left:1px solid #dfdfdf;
}

Alles anzeigen

Dieses classes kannst du beliebig oft in einer Seite vergeben !

Dadurch werden umfangreiche Formatierungen innerhalb der Seite vermieden, und hilft ganz erheblich beim Einsparen 'wertvoller' kb's

YetiZwerg · 16. November 2008

ahh k danke

Peter Gedamke · 17. November 2008

oki -
wenn noch etws unklar ist, oder nicht klappt, musst du nochmals zurückfragen

[Blockierte Grafik: http://www.mcusers.de/images/smily_winken-muetze.gif]

Aaron · 19. November 2008

So ich bedanke noch für die Antworten und für die Hilfe... Ich habe mal so alles durch gelesen und auch einiges gemacht. Bin gerade an einer Homepage basteln.

Peter Gedamke · 20. November 2008

na, vielleicht bekommen wir dann ja auch mal was Tolles zu sehen ?? :lol:

Aufgabe Rahmen... aber kriege es nicht so hin

Jetzt mitmachen!

Teilen