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
-
Hallo,
Heute habe ich den CSS Code in eine separate CSS Datei ausgelagert, nun besteht immer noch das mit dem anpassen des Gelben Hintergrund mit dem Headerbild das funktioniert immer noch nicht so wie es soll.
Ich habe dies bezüglich schon alles ausprobiert aber keine Anzeichen von anpassung ich verlier langsam die Nerven und des weiteren habe ich durch das trennen von HTML & CSS Code zwei unterschiedliche Ansichten offline sowie online
Online sieht es aus wie unter folgenden Linkhttp://pierre-verley.lima-city.de/anders.html und offline da ist das ganze etwas nach unten gerutscht.
Zwischen dem footer und dem Header kommt noch der Inhalt der auch noch Menüs enthält und dann direkt daneben der eigentliche Inhalt mit Überschrift und Text, hier meine Frage muss ich hier mit zwei DIV Container arbeiten oder genügt auch einer?. Siehe meine Skizze. die unter http://pierre-verley.lima-city.de/layout.htm zu finden ist.
Würde mich über Antwort freuen.
HTML Code
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>.:Pierre Verley | Meine persoenliche Homepage :.</title> <link rel="stylesheet" type="text/css" href="design.css" /> </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"> <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> </header> <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>
CSS Code
html, body { margin: 40; padding: 20; background: #FF9900; color: #0000CC; width: 100%; } header { margin-top: 19; border: 5px 45px; padding: 5px 32px; /*widthe: 1200px;*/ height: 290px; background-color: yellow; position: relativ: } nav a { float: left; width: 150px; height: 22px; background: orange; color: blue; 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: 1em; background: yellow; text-align: left; padding: 2px; } header .headerbild { width: 1200px; height: 150px; margin 20px; padding: 2px; position: relativ: }
Beitrag zuletzt geändert: 2.9.2015 10:10:09 von pierre-verley -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich würde dir empfehlen, mehr divs zu benutzen. Zum einen ist deine Seite dann besser durchstrukturiert, was es allgemein Suchmaschinen erleichert und auch dir, wenn du das CSS dazu erstellst.
-
an was liegt das sich der Hintergund sich dem Bild nicht anpassen will gestern hatte ich es auf einer Seite gehabt und heute sind alle beide Seiten wieder so was muss ich machen damit sich der Hintergrund (gelb) dem Bild anpasst
Ich wollte mich auch mal für die bsherige Hilfe bedanken, ich bin echt erstaunt wie man in dieser Community anderen mit Rat und Tat zur Seite steht was man aus einem anderen Forum nicht behaupten kann.
Beitrag zuletzt geändert: 4.9.2015 13:34:32 von pierre-verley -
Mehrspaltige Layouts auf SelfHTML: http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/mehrspaltige_Layouts
Ein Anfängertutorial zur Positionierung, vielleicht hilft dir das, vielleicht nicht, vielleicht habe ich etwas überlesen, vielleicht aber auch nicht :D
Und zu guter Letzt: Navigationsleisten auf SelfHTML: http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Men%C3%BCs
Natürlich sind die Beispiele sehr einfach gehalten, jedoch mit ein bisschen Ausprobieren wird das schon (Eigene Erfahrung mit Navigationsleisten, hat ca. 24h gedauert :) ) -
Guten Morgen liebe Community
Wie man unter folgenden Link http://pierre-verley.lima-city.de/index.html sehen kann ist es mir gelungen die Seite aus dem Video nach zubauen.
Nun komme ich aber nicht weiter was die Navigation, Menue und dem Headerbild betrifft.
Bei der Betrachtung meiner Vorlage ist mir aufgefallen das der Außenabstand von links und rechts noch smaller werden könnte sowie auf meiner Skizze. Was muss ich dazu werden um zu diesem Ergebniss zu kommen?
Beitrag zuletzt geändert: 8.9.2015 9:37:38 von pierre-verley -
Für deine Navileiste solltest du mal nach display:block Ausschau halten. Einen Beitrag über deinem sollte dies aber auch beschrieben sein.
Abstände kannst du mit margin definieren. Als Anfänger nutzt du eventuell auch margin-left, margin-right. Bzw. Oben und unten margin-top und margin-bottom.
Und noch etwas ist mir bei deinen Codes aufgefallen. Achte doch mal auf die richtige Schreibweise. widthe gibt es nicht und wird dann vom Browser ignoriert, heisst width
Edit: Hier findest du das was du brauchst und ausführlich erklärt für deine Navigation http://www.html-seminar.de/3-spalten-layout-steuerung-buttons.htm
Beitrag zuletzt geändert: 8.9.2015 19:24:12 von all-in1 -
Vielen Dank für die weiteren Hilfreichen Tipps, ich konnte das Problem Frame/irframe klären nur verbleibt jetzt das Problem mit dem Navileiste wie unter folgenden Link http://pierre-verley.lima-city.de/home2.html wenn dies behoben ist dann bin ich glücklich
Damit würde dann das CSS Layout stehen und ich kann mich dann weiter an die weiteren Seiten machen. Naja eines habe ich noch vergessen und zwar die Schrifft die ich aber dann noch später machen kann hauptsache das CSS Style steht.
Würde mich auf eine Antwort freuen.
Beitrag zuletzt geändert: 9.9.2015 10:29:11 von pierre-verley -
Und wo liegt da jetzt das Problem?
Was ich sehe ist eventuell noch die Schriftfarbe.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
