Mehr spaltiges Layout
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
antwort
auto
bild
code
copyright
datei
design
freuen
header
hintergrund
http
impressum
inhalt
layout
letter
problem
quatsch
separate datei
text
url
-
Sehr geehrte Community,
seit einigen Tagen widme ich mich wieder verstärkt dem Thema HTML und CSS wo mit ich mein Layout erstellen möchte
auf folgender Seite habe ich dieses online gestellt das unter folgender Adresse pierre-verley.lima-city.de/layout.htm zu finden ist.
Meine Frage ist jetzt ist dies ein 1. Spaltiges oder ein 2 spaltiges Layout, des weiteren würde ich wissen wollen mit welchen HTML Tags und CSS ich dafür verwenden muss um das gewünschte Layout erstellen zu können.
Würde mich sehr auf Antwort freuen. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Also der obere Kasten hat kein mehrspaltiges Layout.
Im unteren könnte man 1. die Links (1-6) als ein 6 spaltiges
und 2. die Sidebar (7-12) mit den Inhalt als zweispaltiges ansehen.
Wie man das in css umsetzten gibt es verschiedene Möglichkeiten. Das währen so die einfachsten:
1. Du hast sowas aufgezeichnetfloat: left; width: 150px;
aber man kann es auch so machenwidth:16.6%; min-width: 100px; /*damit es bei einer kleinen Breite nicht über das Kästchen hinausgeht, vll besser mit media queries gelößt*/
2..sidebar{ width:200px; } @media (max-width: 500px) {/*Bei kleinen Breiten wird die Sidebar die volle Breite einnehmen, damit auch genug platz für den Inhalt bleibt*/ width:100%; } .main{ float: left; }
Und noch ein paar zusätzliche Tips :)
Als Grundgerüst solltest du so etwas in der art benutzen<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Dein Titel</title> </head> <body> Dein Inhalt </body> </html>
und vll auch für 1-6 <nav> für den Inhalt <article> für 7-12 <aside> für die Überschrift <header> und für den Copyright <footer> verwenden damit sich Suchmachinen ... besser zurechtfinden
und eine ande Farbwahl währe vll auch nicht schlecht :)
bgcolor="#FF9900" text="#0000CC" solltest du genauso wie width="780" height="480 durch css ersetzten. -
Ok, also muss der folgende HTML Code so lauten
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Mein Titel</title>
</head>
<body>
<div id="navigation">
</div>
<div id="menue">
</div>
</body>
</html>
wäre das richtig ?
-
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Mein Titel</title> </head> <body> <header>Logo <nav> </nav> </header> <aside>Seitenmenü</aside> <article>Eigentlicher Inhalt</article> <footer>Eben ganz unten</footer> </body> </html>
So war es gemeint. Es gibt da noch einige Tags mehr die neu in HTML5 sind. -
Ok, ich habe das jetzt genauso angeordnet wie mir vorgegeben wurde
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Pierre Verley | Home</title>
</head>
<body>
<header>
<nav>
</nav>
</header
<aside>Seitenmenue</aside>
<article>Inhalt</article>
<footer>.....</footer>
</body>
</html>
und jetzt muss ich sicherlich mit den Tags <ul></ul> und <li></li> bei navigation weiter machen um die Aufzählung der Seitenlinks (1 bis 5) zu erstellen. -
Ganz so schwer kann das doch eigendlich gar nicht sein :)
vll soltest du erstmal ein aktuelleres html und css tut machen um dein Kentnisse ein wenig aufzufrischen
<style> .nav div{ float: left; width: 150px; height: 22px; background: blue; color: white; margin: 2px; text-align: center; } </style> <div class="nav"> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div> </div> -
Hallo ich bin es wieder, ich komme nicht weiter, ich habe hin und her probiert aber es will einfach nicht wie ich will.
Hier der Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Pierre Verley</title>
</head>
<body bgcolor="#FF9900" text="#0000CC">
<div id="seitenbereich">
<style type="text/css">
<!--
#inhalte {
margin: 22;
border: 50;
padding: 35px;
withe: 100;
height: 150;
background-color:yellow;
}
.nav div{
float: left;
width: 150px;
height: 22px;
background: orange;
color: white;
margin: 2px;
text-align: center;
}
-->
</style>
<div id="inhalte">
<div class="nav">
<h1>Pierre Verley</h1>
<h2>Meine persoenliche Homepge</h2>
<header>
<img src="pierre.jpg">
</header>
<div><a href="pierre.htm">Pierre Verley</a></div> <div><a href="beruflich.html">Beruflich</a></div><div><a href="fernsehen.htm">Fernsehen</a></div><div><a href="sturm.html">Sturm der Liebe</a></div><div><a href="kontakt.htm">Kontakt</a></div><div><a href="impressum.html">Impressum</a></div>
</div>
</div>
</div>
<div id="menue">
</div>
</body>
</html>
<h2>Home</h2>
<header>
<img src="pierre.jpg">
</header>
<div><a href="pierre.htm">Pierre Verley</a></div><div><a href="dienstleistung.html">D & M</a></div><div><a href="thetribe.htm">The Tribe</a></div><div><a href="sturm.html">Sturm der Liebe</a></div><div><a href="kontakt.htm">Kontakt</a></div><div><a href="impressum.html">Impressum</a></div>
</div>
</body
</html>
Wie muss ich jetzt weiter machen ? es gibt ja noch 7 bis 12 Menüpunkte, das Bild zwischen Überschrift und Seitenmenü oder ?
Ich habe dies gerade aus probiert nur die Links des Seitenmenüs verschwinden dabei wenn ich den Code <img src="bild.jpg"> und auf aktualisieren gehe was mach ich falsch?
Beitrag zuletzt geändert: 30.8.2015 14:28:53 von pierre-verley -
Wie muss ich jetzt weiter machen ? es gibt ja noch 7 bis 12 Menüpunkte, das Bild zwischen Überschrift und Seitenmenü oder ?
Was auf deiner Seite zu sehen sein soll kann dir keiner sagen, das musst du schon selber entscheiden.
Ich habe dies gerade aus probiert nur die Links des Seitenmenüs verschwinden dabei wenn ich den Code <img src="bild.jpg"> und auf aktualisieren gehe was mach ich falsch?
Wo verschwindet da was? Beschreibe dein Problem mal genauer oder mache einen Screenshot davon.
Ein Tipp für dich ist auch getbootstrap.com. Da kann man sehr einfach und gutaussehend seine Webseite mit gestalten und braucht dafür keine css kentnisse (es gibt sogar schon drag&drop dienste, aber was die Taugen ...).
Den HTML Code bitte das nächste mal in einem [code=html][/code] Tag posten und formatieren und am Besten auf deinen Webspace über einen klickbaren [url][/url] Link, damit Fotos ... da sind.
(Und wenn du dein Problem schon im Forum gepostet hast keine PN und nicht ins Gästebuch
:) )
-
Dein Code ist auch nicht valide.
entweder hast du mit Paste und Copy ein Problem gehabt oder einieges doppelt.
Dann:
<style type="text/css"> <!-- #inhalte { margin: 22; border: 50; padding: 35px; withe: 100; height: 150; background-color:yellow; } .nav div{ float: left; width: 150px; height: 22px; background: orange; color: white; margin: 2px; text-align: center; } --> </style>
gehört zwischen <head> und </head>
Ein Tippfehler:
withe: 100;
Dann hat ID Inhalte eine Breite von 100 px aber die Klasse nav, die in Inhalte liegt, eine Breite von 150 px. Das kann nicht gehen.
Und logischerweise kann dir in <nav> nicht alles angezeigt werden, wenn du nur eine Höhe von 22px hast. Da passen sicherlich nicht einmal alle Menüpunkte hinein. Lass die Angabe height einfach weg. -
Vielen Dank für die Antwort
hier mein bisheriger Code wo ich hoffe das dieser jetzt richtig ist, wenn die 100; ein Tipp fehler ist was muss dann dort stehen.
Nun hier der Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Pierre Verley</title>
<style type="text/css">
<!--
#inhalte {
margin: 22;
border: 50;
padding: 35px;
withe: 100;
height: 150;
background-color:yellow;
}
.nav div{
float: left;
width: 150px;
height: 22px;
background: orange;
color: white;
margin: 2px;
text-align: center;
}
-->
</style>
</head>
<body bgcolor="#FF9900" text="#0000CC">
<div id="seitenbereich">
<div id="inhalte">
<div class="nav">
<h1>Pierre Verley</h1>
<h2>Meine persoenliche Homepge</h2>
<header>
<img src="ilm.jpg" height="145" width="1220">
</header>
<div><a href="pierre.htm">Pierre Verley</a></div> <div><a href="beruflich.html">Beruflich</a></div><div><a href="fernsehen.htm">Fernsehen</a></div><div><a href="sturm.html">Sturm der Liebe</a></div><div><a href="kontakt.htm">Kontakt</a></div><div><a href="impressum.html">Impressum</a></div>
</div>
</div>
</div>
<div id="menue">
</div>
</body>
</html>
kann man auch den CSS Code auslagern in eine separate Datei Datei oder muss dieser mit in der HTML Datei stehen?
Ich habe die Seite jetzt online zum ansehen unter folgenden Link http://pierre-verley.lima-city.de/beginn2.html
Das Problem ist im Moment der Gelbe Hintergrund dieser ist der Inhalt und dieser soll der Grafik angelichen werden so das Links und Rechts ein Rand entsteht der obere Randabstand ist ok nur der andere der ist der, der nicht will wie ich
Beitrag zuletzt geändert: 30.8.2015 18:49:41 von pierre-verley -
Du kannst das CSS natürlich in eine separate Datei auslagern. Ist auch eine bessere Lösung.
Willst du es so haben?
#inhalte { margin: 0 auto; border: 50; padding: 35px; width: 1220px; height: 150; background-color:yellow; } .nav div{ float: left; width: 150px; height: 22px; background: orange; color: white; margin: 2px; text-align: center; } -
Zum auslagern in eine separate Datei, gehst du so vor:
Kopiere den Code aus dem Style-tag in eine neue txt-Datei (bspw. style.txt) in den gleichen Ordner wie deine HTML. So, wie du es auch gemacht hast, das aus ein Text-datei eine .html wird, benennst du diese in style.css um. Danach löschst du die Style-tags samt Inhalt in der HTML und fügst folgendes ein:
<link rel="stylesheet" type="text/css" href="style.css" />
Achtung: Hier stand ursprünglich src anstatt href.
Wenn du die Datei in einen anderen Ordner schieben möchtest, geht das, dementsprechend musst du aber das src-Attribut ändern (src="unterordner/style.css")
mfg
Jonas
Beitrag zuletzt geändert: 1.9.2015 23:40:59 von jonas-bayer -
all-in1 schrieb:
Du kannst das CSS natürlich in eine separate Datei auslagern. Ist auch eine bessere Lösung.
Willst du es so haben?
#inhalte { margin: 0 auto; border: 50; padding: 35px; width: 1220px; height: 150; background-color:yellow; } .nav div{ float: left; width: 150px; height: 22px; background: orange; color: white; margin: 2px; text-align: center; }
Ich habe den CSS Code ausgelagert aber das neue Ergebnis ist alles andere erfreulich der gelbe Hintergrund der vor her da war ist verschwnunden und alle Versuche diesen wieder her zu stellen scheidern bis her ob wohl nichts groß am Code geändert ist den wenn ich alles so einfüge wie vorher ist alles wie es sein muss
HTML Code
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Pierre Verley</title> <link rel="stylesheet" type="text/css" src="layout.css"> </style></head> <body bgcolor="#FF9900" text="#0000CC"> <div id="seitenbereich"> <div id="kopf"> <div class id="navi"> <h1>Pierre Verley</h1> <h2>Meine persoenliche Homepge</h2> <header> <img src="ilm.jpg" height="145" width="1220"> </header> <div><a href="pierre.htm">Pierre Verley</a></div> <div><a href="beruflich.html">Beruflich</a></div><div><a href="fernsehen.htm">Fernsehen</a></div><div><a href="sturm.html">Sturm der Liebe</a></div><div><a href="kontakt.htm">Kontakt</a></div><div><a href="impressum.html">Impressum</a></div> </div> </div> </div> </div> </body> </html>
CSS Code
.kopf div{ margin: 0 auto; border: 50px; padding: 135px; width: 1220px; height: 150; background-color: yellow; } .navi div{ float: left; width: 150px; height: 22px; background: orange; color: white; margin: 2px; text-align: center; }
-
Ich habe es auch mal ausprobiert bei mir geht alles
Hast du auch die Datei Format ".CSS abgespeichert"?
Beitrag zuletzt geändert: 31.8.2015 9:02:46 von schul-game -
schul-game schrieb:
Ich habe es auch mal ausprobiert bei mir geht alles
Hast du auch die Datei Format ".CSS abgespeichert"?
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Pierre Verley</title> <link rel="stylesheet" type="text/css" src="layout.css"> </style></head> <body bgcolor="#FF9900" text="#0000CC"> <div id="seitenbereich"> <div id="kopf"> <div class id="navi"> <h1>Pierre Verley</h1> <h2>Meine persoenliche Homepge</h2> <header> <img src="ilm.jpg" height="145" width="1220"> </header> <div><a href="pierre.htm">Pierre Verley</a></div> <div><a href="beruflich.html">Beruflich</a></div><div><a href="fernsehen.htm">Fernsehen</a></div><div><a href="sturm.html">Sturm der Liebe</a></div><div><a href="kontakt.htm">Kontakt</a></div><div><a href="impressum.html">Impressum</a></div> </div> </div> </div> </div> </body> </html>
Ja, trozdem funktioniert es nicht ich kann die Seite ja mal hochladen wie sie aussieht
-
Ok! Jetzt geht es eigentlich!!
http://schul-game.lima-city.de/hallo/
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Pierre Verley</title> <link rel="stylesheet" href="layout.css" type="text/css"/> </head> <body bgcolor="#FF9900" text="#0000CC"> <div id="seitenbereich"> <div id="inhalte"> <div class="nav"> <h1>Pierre Verley</h1> <h2>Meine persoenliche Homepge</h2> <header> <img src="ilm.jpg" height="145" width="1220"> </header> <div><a href="pierre.htm">Pierre Verley</a></div> <div><a href="beruflich.html">Beruflich</a></div><div><a href="fernsehen.htm">Fernsehen</a></div><div><a href="sturm.html">Sturm der Liebe</a></div><div><a href="kontakt.htm">Kontakt</a></div><div><a href="impressum.html">Impressum</a></div> </div> </div> </div> <div id="menue"> </div> </body> </html>
#inhalte { margin: 22; border: 50; padding: 35px; withe: 100; height: 150; background-color:yellow; } .nav div{ float: left; width: 150px; height: 22px; background: orange; color: white; margin: 2px; text-align: center; }
Beitrag zuletzt geändert: 31.8.2015 9:10:56 von schul-game -
Durch das das Einfügen eines CSS Codes für die meine Überschrift und dem was darunter steht lässt sich der Hintergrund nicht wieder herstellen das einzige was ich wieder hinbekommen habe war das mit dem Menü 1 bis 6 aber nicht die Wiederherstellung des Hintergrunds.
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Pierre Verley</title> <style type="text/css"> <!-- #kopf { margin: 22; border: 50; padding: 35px; withe: 100; height: 150; background-color:yellow; } .nav div{ float: left; width: 150px; height: 22px; background: orange; color: black; margin: 2px; text-align: center; } #sitetitle { float:left; text-align:left; } #sitetitle h1 { font-weight:700; font-size:2.4em; color:blue; letter-spacing:-2px; line-height:1.3em; margin:0; padding:15;} #top { width:95%; margin:15px auto 15px auto;} #sitetitle h1 a { font-weight:700; letter-spacing:-1px; color: blue; } #sitetitle h1 a:hover {color: blue; } #sitetitle p { margin:5px 0 ; padding:0; letter-spacing:-0px; font-size:1.3em; color:red;} --> </style> </head> <body bgcolor="#FF9900" text="#0000CC"> <div id="seitenbereich"> <div id="top"> <div id="sitetitle"> <h1>Pierre Verley</a></h1> <p>Meine persoenliche Homepage</p> <header> <img src="ilm.jpg" height="145" width="1220"> </header> </div> <div class="nav"> <div><a href="pierre.htm">Pierre Verley</a></div> <div><a href="beruflich.html">Beruflich</a></div><div><a href="fernsehen.htm">Fernsehen</a></div><div><a href="sturm.html">Sturm der Liebe</a></div><div><a href="kontakt.htm">Kontakt</a></div><div><a href="impressum.html">Impressum</a></div> </div> </div> </div> </div> </div> </body> </html>
Ich bin fast am verzweifeln aber ich habe auch noch einen anderen Code von einer anderen Seite auf der ich schon ein wenig weiter bin
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Pierre Verley</title> <style type="text/css"> <!-- #kopf { float: :0 auto; border: 45px; padding: 35px; withe: 100; height: 150; background-color:yellow; } .nav div{ float: left; width: 150px; height: 22px; background: orange; color: black; margin: 2px; text-align: center; } #inhalt { float: 0 auto ; border: 20px; padding: 150px; width: 950px; height: 150; background: orange; color: black; margin: 14px; text-align: center; background-color:yellow; --> --> </style> </head> <body bgcolor="#FF9900" text="#0000CC"> <div id="seitenbereich"> <div id="kopf"> <h1>Pierre Verley</h1> <h2>Meine persoenliche Homepge</h2> <div class="nav"> <header> <img src="ilm.jpg" height="145" width="1220"> </header> <div><a href="pierre.htm">Pierre Verley</a></div> <div><a href="beruflich.html">Beruflich</a></div><div><a href="fernsehen.htm">Fernsehen</a></div><div><a href="sturm.html">Sturm der Liebe</a></div><div><a href="kontakt.htm">Kontakt</a></div><div><a href="impressum.html">Impressum</a></div> <div class="fenster"> <div id="menue"> <div><a href="link7.htm">Link7</a></div><div><a href="Link8.html">Link8</a></div><div><a href="link9.htm">Link9</a></div><div><a href="link10.html">Link10</a></div><div><a href="link11.htm">Link11</a></div><div><a href="link12.html">Link12</a></div> </div> <div id="inhalt"> </div> </div> </div> </div> </div> </body> </html>
Da will es auch nicht so wie ich, mir mach imm noch der Gelbe Hintergrund probleme der soll genauso breit seit wie das Bild.
-
was fällt dir an deinem Code auf?
withe: 100;
Ja richtig, die Breite ist falsch geschrieben.
Und wenn dein Bild schon 1200px breit ist, wie breit muss dann der Gelbe Bereich sein? Mindestens 1200px plus die beiden Aussenabstände. Ist also einfache Mathematik.
Und hochladen ist immer gut, so können wir besser erkennen wo der Fehler liegen könnte. Natürlich auch nur dann, wenn du uns dann auch einen Link gibst. -
Hallo,
Wie man unter folgenden Link http://pierre-verley.lima-city.de/home2.html ein sehen kann ist der Hintergrund auf der anderen Seite mit dem Bild im einklang aber auf der anderen Seite immer noch so wie vorher.
Dieser soll jetzt auch noch bündig sein, hier der bisherige Code meines Layouts
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Pierre Verley</title> <style type="text/css"> <!-- #kopf { float: left; margin-top: 19; border: 45px; padding: 32px; widthe: 1200px; height: 246px; background-color:yellow; } .nav div{ float: left; width: 150px; height: 22px; background: orange; color: black; margin: 2px; text-align: center; } #sitetitle { float:left; text-align:left; } #sitetitle h1 { font-weight:700; font-size:2.4em; color:blue; letter-spacing:-2px; line-height:1.3em; margin:0; padding:15;} #top { width:95%; margin:15px auto 15px auto;} #sitetitle h1 a { font-weight:700; letter-spacing:-1px; color: blue; } #sitetitle h1 a:hover {color: blue; } #sitetitle p { margin:5px 0 ; padding:0; letter-spacing:-0px; font-size:1.3em; color:green;} #footer { clear:left; margin-top:2em; background:yellow; text-align:left; padding:10px; --> </style> </head> <body bgcolor="#FF9900" text="#0000CC"> <div id="seitenbereich"> <div id="kopf"> <div id="top"> <div id="sitetitle"> <i><h1>Pierre Verley</a></h1></i> <p>Meine persoenliche Homepage</p> <div class="nav"> <header> <img src="ilm.jpg" height="145" width="1220"> </header> <div><a href="pierre.htm">Pierre Verley</a></div> <div><a href="beruflich.html">Beruflich</a></div><div><a href="fernsehen.htm">Fernsehen</a></div><div><a href="sturm.html">Sturm der Liebe</a></div><div><a href="kontakt.htm">Kontakt</a></div><div><a href="impressum.html">Impressum</a></div> </div> <div id="footer"> <div class="left"> <b><p>Copyright© 2015 <a href="index.html">Pierre Verley</a> | Design by Pierre Verley<br></p> <p> Impressum <a href="impressum.html">Impressum</a></b> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
Die Überschrift ist auch noch nicht ganz zu meiner Zufriedenheit diese soll noch weiter nach oben rutschen.
Lg
Pierre
Beitrag zuletzt geändert: 1.9.2015 15:15:50 von pierre-verley -
1)
ganz wichtig: keine Feste Höhenangabe damit das Bild nicht verzehrt!! (Und keine festen Breiten verwenden damit es auf jedem Bildschirm gut aussieht
du must da bild relativ machen, damit es sich anpasst.
2)
Du hast border: 45px; definiert. Wenn du es oben und unten kleiner haben möchtest kannst du z.B. 20px 45px oder nur ober 20px 45px 45px 45px. Mit margin und padding musst du das gleiche machen (Und border am besten ganz weglassen)
Also insgesammt ungefahr so:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Pierre Verley</title> <style type="text/css"> html, body { margin: 0; padding: 0; background: #FF9900; color: #0000CC; width: 100%; } header { margin-top: 19; border: 5px 45px; padding: 5px 32px; /*widthe: 1200px;*/ height: 246px; background-color: yellow; } nav a { float: left; width: 150px; height: 22px; background: #FFD700; color: black; margin: 2px; text-align: center; } header .sitetitle { float: left; text-align: left; } header .sitetitle h1 { font-weight: 700; font-size: 2.4em; color: blue; letter-spacing: -2px; line-height: 1.3em; margin: 0; padding: 15; } header .top { width: 95%; margin: 15px auto 15px auto; } header .sitetitle h1 a { font-weight: 700; letter-spacing: -1px; color: blue; } header .sitetitle h1 a:hover { color: blue; } header .sitetitle p { margin: 5px 0; padding: 0; letter-spacing: -0px; font-size: 1.3em; color: green; } footer { clear: left; margin-top: 2em; background: yellow; text-align: left; padding: 10px; } header .headerbild { width: 100%; } </style> </head> <body> <header> <div class="top"> <div class="sitetitle"> <i> <h1>Pierre Verley</h1> </i> <p>Meine persoenliche Homepage</p> </div> </div> <img src="ilm.jpg" class="headerbild"> </header> <nav> <a href="pierre.htm">Pierre Verley</a> <a href="beruflich.html">Beruflich</a> <a href="fernsehen.htm">Fernsehen</a> <a href="sturm.html">Sturm der Liebe</a> <a href="kontakt.htm">Kontakt</a> <a href="impressum.html">Impressum</a> </nav> <footer> <b> <p>Copyright© 2015 <a href="index.html">Pierre Verley</a> | Design by Pierre Verley<br></p> <p> Impressum <a href="impressum.html">Impressum</a> </b> </footer> </div> </div> </div> </body> </html>
Erklährung im css Code:
html, body { margin: 0; /*Damit der stöhrende rahmen weg ist*/ padding: 0; background: #FF9900; /*Nicht style und html vermischen (war früher in <body bgcolor="#FF9900" text="#0000CC">)*/ color: #0000CC; width: 100%; } header { margin-top: 19; border: 5px 45px; padding: 5px 32px; /*widthe: 1200px;*/ /*falsch geschriebn und deshalb keine wirkung, und wenn richtig die fasche*/ height: 246px; background-color: yellow; } nav/*html5 elemente*/ a { float: left; width: 150px; height: 22px; background: #FFD700; color: black; margin: 2px; text-align: center; } header /* aus #sitetitle */.sitetitle/* gemacht, wir wollen class stat id*/ { float: left; text-align: left; } header .sitetitle h1 { font-weight: 700; /* quatsch, aber naja*/ font-size: 2.4em; color: blue; letter-spacing: -2px; /* quatsch, aber naja*/ line-height: 1.3em; /* quatsch, aber naja*/ margin: 0; padding: 15; } header .top { width: 95%; margin: 15px auto 15px auto; } header .sitetitle h1 a { font-weight: 700; /* quatsch, aber naja*/ letter-spacing: -1px; color: blue; } header .sitetitle h1 a:hover { color: blue; } header .sitetitle p { margin: 5px 0; padding: 0; letter-spacing: -0px; font-size: 1.3em; color: green; } footer { clear: left; margin-top: 2em; background: yellow; text-align: left; padding: 10px; } header .headerbild { width: 100%; /*ganze breite, höhe automatisch*/ }
Da gibt es noch einiges besser zu machen aber schau erstaml ob du es so haben möchtest / was du noch verändern möchtest -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
