Header Programmierung Webseite

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?

<!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>

Gruß Markus

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 478428

Url: https://administrator.de/contentid/478428

Ausgedruckt am: 21.11.2024 um 22:11 Uhr

16 Kommentare

Neuester Kommentar

Wer kann mir da bitte weiterhelfen?

Selbsthilfe ist der Weg zum Erfolg
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Inhalte_zentrieren
Lesen, nachmachen, freuen das man's selbst geschafft hat.👍

Ja mittig hab ich das bekommen aber ich weiß nicht genau wie ich das alles positioniere, also was ich in einen DIV packen muss und wie der HauptDiv also div id="header" reinmuss. Blicke irgendwie überhaupt nicht durch.

Verschachtelte, also einen globalen Container der alles enthält, dann für den Header, Main content und Footer jeweils ein eigener DIV welche im globalen Container enthalten sind. Ist der Header ebenfalls in Sektionen unterteilt dort ebenfalls so verfahren, also die divs im Header-Container platzieren.

<Div id="Global">  
    <Div id="header">  
    </Div>
    <Div id="content">  
    </Div>
   <Div id="footer">  
    </Div>
</Div>

Such das ist schnell nachgeschlagen, wenn man keinen Durchblick hat
https://www.w3schools.com/html/html_layout.asp

Einen HauptContainer wo HeaderDIV MainDIV FooterDIV drin ist und

<div id complete>
<div id header
<div id logo
<div/>
<div id headerbild>
<div>
<div/>
<div/>
<div id main
<div/>
<div id footer
<div/>
<div/>

S. Beispiel und den Link im letzten Beitrag und du bist im Bilde! Fertig.

Ok danke muss ich die bilder also headerbild und das logo auch in ein div packen?

Müssen muss man man gar nichts, kann man, je nachdem welche Verfahren zur Platzierung du nutzt und was in den ein oder anderen Teil kommt, zur eindeutigen Trennung und zum Handeln des Flow ist es aber nützlich.
Schau dir mal das CSS Grid an, damit ist sowas fix zusammengestellt und auch responsive gestaltet.

Den Main-Text will ich ja mit Include Verfahren machen.

Also das wäre:

include header
Impressumstext z.B.
include footer

dann ist es ja besser wenn ich den div main noch im header.php öffne und im footer.php schließe oder

Erst lesen, dann nachdenken, Gedanken sortieren und dann machen
https://blog.kulturbanause.de/2013/12/css-grid-layout-module/
Btw. Als Domainagentur als die ihr euch schimpft solltet ihr das eigentlich alles selbst wissen 😁.

Ok mein Gedanke müsste ja richtig sein, das man in der header.php den DIV für den MAIN-Bereich noch öffnet und im Footer.php schließt weil da schließt man ja auch dann den Container.

Heutzutage macht man sowas gleich mit Templates um Design und Business-Logic zu trennen und dadurch as ganze wartbarer zu gestalten.
https://www.sitepoint.com/the-mvc-pattern-and-php-1/

Du willst später das Menü auch so breit haben? Dann würde ich nicht das Bild kleiner machen, sondern den gesamten Bereich.

Und wenn Du im css die Einheit px verwendest, hast Du bei Geräten mit unterschiedlicher Auflösung unterschiedliche Ergebnisse, falls es sich um diese hier handeln sollte: http://domainagentur.de/css/stylesheet.css

Bei Geräten mit niedrigerer Auflösung passt das Bild dann nicht mehr aufs Display (Handy, Tablet usw). Deswegen macht man das (auch um bei Google ein höheres Ranking zu erhalten) im responsive Design. Und damit wärst Du, wie oben erwähnt, mit einem vorgefertigten Template besser aufgehoben.

Problem ist aber bei einer dynamischen Webseite das sich dann alle Button z.B. im MainBereich nach untenverschieben oder im Header die Menüleiste nur noch Aufklappbar also Art DropDown ist.

Was bei kleinen mobilen Bildschirmen erwünscht wäre. Man kann die Schwellen einstellen, ab welcher Auflösung verschoben, geklappt oder in ein Menü geschoben wird. Mit Bootstrap sogar ein Kinderspiel und Google bestraft es nicht mit Rankingabzügen.

Bootstrap hab ich mir eben angeschaut. Wäre gar nicht so schlecht. Wie sieht es hier mit Copyright aus?

Wo finde ich dieses Template zum download?

https://getbootstrap.com/docs/4.3/examples/blog/

Ich kann es am iPad schlecht nachprüfen, aber hier ist ein Downloadlink, vermutlich auch mit Deinem Example:
https://getbootstrap.com/docs/4.3/examples

Bei Download Source Code

Es ist kostenlos verwendbar. Hier die Lizenzbeschreibung:
https://getbootstrap.com/docs/4.3/about/license

Frage PHP Entwicklung

Mehr von Snowboarder1994

KI - Filtern von BegriffenSnowboarder1994 - 6 Kommentare

Keine Rechnung vom VerkäuferSnowboarder1994 - 34 Kommentare

Problem bei Header verw. v. IncludesSnowboarder1994 - 10 Kommentare

Url anpingenSnowboarder1994 - 27 Kommentare

Heiß diskutiert