kostenloser Webspace werbefrei: lima-city


Header Programmierung Webseite

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    wakeboarder

    wakeboarder hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. horstexplorer

    horstexplorer hat kostenlosen Webspace.

    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
  4. Autor dieses Themas

    wakeboarder

    wakeboarder hat kostenlosen Webspace.

    Irgendwie bekomm ich das gar nicht auf die Reihe...
  5. horstexplorer

    horstexplorer hat kostenlosen Webspace.

    Na wie sieht denn deine css Datei aus?
    http://prntscr.com/ol1r0z

    Beitrag zuletzt geändert: 28.7.2019 13:06:12 von horstexplorer
  6. 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.
  7. Also, ich wuerde das Logo in einer separaten Navigationsleiste einfuegen. Ich habe ganz spontan die Navigation meiner webseite genommen, etwas angepasst und dein Logo eingefuegt. Ich habe die Farben mal so gelassen, damit du die verschiedenen Bereiche erkennen kannst und falls du diese Farblich gesalten moechtest. Ansonsten mach einfach alles weiss.

    Hier der Link zu codpen mit der Navigation und dem code:
    https://codepen.io/Knossos/pen/zgEENz

    Vollbildmodus:
    https://codepen.io/Knossos/full/zgEENz

    Ich verlinke dir auch eine alternative, falls du dich dazu entscheiden solltest, dass die Navigationsleiste ueber die gesamte Bildschirmbreite gehen soll. Dieses mal zentriert:
    https://codepen.io/Knossos/pen/JgrzqP

    Vollbildmodus:
    https://codepen.io/Knossos/full/JgrzqP

    Navigationsleiste ohne Logo:
    https://codepen.io/Knossos/pen/mNqZbo

    Vollbildmodus:
    https://codepen.io/Knossos/full/mNqZbo

    Auf codepen hast du die Moeglichkeit in Echtzeit etwas mit dem Code rumzuspielen und deinen Beduerfnissen anzupassen.
    Spiel einfach etwas mit margin, padding, width und height rum.

    Edit:
    So, genug gespielt. :lol:

    Beitrag zuletzt geändert: 5.8.2019 18:01:08 von terrafertile
  8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!