snowboarder1994
Jul 27, 2019
view4257
view16
0
Goto Top

Header Programmierung Webseite

GermanQuestionPHPDevelopment
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
comment-contentCommentShareShare
Share on Facebook Share on Twitter Share on Reddit Share on Linkedin

Content-Key: 478428

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

Printed on: April 19, 2024 at 08:04 o'clock

16 Comments
Latest comment
Goto Top
Mitglied: 140447
140447 Jul 27, 2019 updated at 14:11:58 (UTC)
Goto Top
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.👍
Member: Snowboarder1994
Snowboarder1994 Jul 27, 2019 at 14:34:34 (UTC)
Goto Top
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.
Mitglied: 140447
140447 Jul 27, 2019 updated at 14:42:39 (UTC)
Goto Top
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
heart1
Member: Snowboarder1994
Snowboarder1994 Jul 27, 2019 at 14:42:32 (UTC)
Goto Top
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/>
Mitglied: 140447
140447 Jul 27, 2019 updated at 14:44:45 (UTC)
Goto Top
S. Beispiel und den Link im letzten Beitrag und du bist im Bilde! Fertig.
Member: Snowboarder1994
Snowboarder1994 Jul 27, 2019 at 14:44:51 (UTC)
Goto Top
Ok danke muss ich die bilder also headerbild und das logo auch in ein div packen?
Mitglied: 140447
140447 Jul 27, 2019 updated at 14:49:57 (UTC)
Goto Top
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.
Member: Snowboarder1994
Snowboarder1994 Jul 27, 2019 updated at 14:56:40 (UTC)
Goto Top
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
Mitglied: 140447
140447 Jul 27, 2019 updated at 14:59:05 (UTC)
Goto Top
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 😁.
heart1
Member: Snowboarder1994
Snowboarder1994 Jul 27, 2019 at 15:02:27 (UTC)
Goto Top
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.
Mitglied: 140447
140447 Jul 27, 2019 updated at 15:40:04 (UTC)
Goto Top
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/
Member: NordicMike
NordicMike Jul 28, 2019 updated at 04:32:32 (UTC)
Goto Top
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.
Member: Snowboarder1994
Snowboarder1994 Jul 28, 2019 at 11:14:24 (UTC)
Goto Top
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.
Member: NordicMike
NordicMike Jul 28, 2019 at 11:31:50 (UTC)
Goto Top
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.
Member: Snowboarder1994
Snowboarder1994 Jul 28, 2019 at 12:36:19 (UTC)
Goto Top
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/
Member: NordicMike
NordicMike Jul 28, 2019 at 15:24:46 (UTC)
Goto Top
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
heart1
GermanQuestionPHPDevelopment
Hotly discussed
AlexWishaHow to set up and configure a Linux GRE tunnelAlexWisha - 3 CommentsjstrickerWIREGUARD VPN ON UDM PRO BEHIND FRITZBOX - HANDSHAKE DID NOT COMPLETEjstricker - 2 CommentsgleixnerdCheck of ZFW Firewallgleixnerd - 1 CommentDaniEnd of Support dates for Office 2016, 2019 Apps und Productivity ServersDani - 1 Comment