Header Programmierung Webseite
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
-
Hallo,
wollte einen Header programmieren bei www.Domainagentur.de, aber irgendwas stimmt hier mit den DIVs nicht möchte das genau mittig auf der Webseite positionieren.
Wollte das so machen wie auf dem Screen: http://domainagentur.de/test/Unbenannt.png
Wer kann mir da bitte weiterhelfen? Muss das HeaderLogo und Headerbild auch in einen DIV?
Und wie positioniere ich welchen Div? Das ist das Hauptproblem...
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Domainagentur Markus Kein</title> <link rel="stylesheet" href="/css/stylesheet.css"> </head> <body> <div id="header"> <img id="logo" src="/images/logo.png"> <br> <img id="headerbild" src="https://cdn.pixabay.com/photo/2015/06/24/15/45/ipad-820272_960_720.jpg"> </div>
<Div id="complete"> <Div id="header"> </Div> <Div id="content"> </Div> <Div id="footer"> </Div> </Div>
Danke
Gruß Markus
Beitrag zuletzt geändert: 27.7.2019 17:39:23 von wakeboarder -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
So ganz auf die schnelle würde ich sagen wenn das so aussehen soll wie auf dem Bild richtest du das Logo nach links und dein Menü nach rechts aus, bei dem Bild darunter in die Mitte.
Bei dem Menü, die Felder alle einzeln neben einander zu positionieren muss halt jedes einzelne sich nach rechts orientieren (oder alle einem div unterordnen, dann geht auch nach links etc) . Alternativ kann man da mit ner Tabelle schummeln.
css>float/margin
Beitrag zuletzt geändert: 27.7.2019 19:57:50 von horstexplorer -
Irgendwie bekomm ich das gar nicht auf die Reihe...
-
Na wie sieht denn deine css Datei aus?
http://prntscr.com/ol1r0z
Beitrag zuletzt geändert: 28.7.2019 13:06:12 von horstexplorer -
So auf die Schnelle, würde ich sagen:
html-Datei:<html lang="de"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Domainagentur Markus Kein</title> <link rel="stylesheet" href="./stylesheet.css"> </head> <body> <img src="/images/logo.png" alt="Logo" class="logo"> <nav class="navigation"> <ul> <li><a href="#">Dies</a></li> <li><a href="#">sind</a></li> <li><a href="#">Navigations</a></li> <li><a href="#">Items</a></li> </ul> </nav> <div class="content"> Hier kommt der Content hin. </div> <div class="footer"> Dies könnte der Footer sein. </div> </body> </html>
CSS-Datei:
body{ margin: 0; height: 100%; display: grid; grid-template-rows: 100px auto 1em; grid-template-columns: 200px 200px auto 200px; } .logo{ grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; background-color: #ff0000; } .navigation{ grid-column-start: 3; grid-column-end: 4; grid-row-start:1; grid-row-end: 2; background-color: #00ff00; } .navigation>ul{ list-style-type: none; margin: 0; padding: 0; text-align: right; } .navigation>ul>li{ display: inline-block; } .content{ grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; background-color: #0000ff; } .footer{ grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; line-height: 1em; background-color: #ffff00; }
Natürlich nur als ausbau fähiges, einfaches Beispiel. Für mehr Informationen: Grid-Layouts
Zudem sei darauf hingewiesen, dass ältere Browser (IE6&Co) damit Probleme haben könnten. Ich persönlich würde Leuten die IE6 benutzen nur ein "Holt euch nen modernen Browser"-Vor's Gesicht knallen, aber naja - gibt Leute, die legen wert auf solche Abwärtskompatibilitäten. Dafür hat man so diesen ganzen Wrapper-Crap nicht mit drin und HTML kann endlich das tun, worin es gut ist.(Design gehört nicht dazu.)
Die Einfärbung ist nur zur verdeutlichung. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage