Reply to thread

Message

<blockquote data-quote="Mastah" data-source="post: 371246" data-attributes="member: 1520">So I wanted to have a header with a navigator bar as well as a logo but they need to align together.Here's a little example.<img src="http://image.prntscr.com/image/4cf81f208f3f4bc2a595073502cef47a.png" alt="" class="fr-fic fr-dii fr-draggable " style="" />Here's all the code I haz.[HTML]&lt;!DOCTYPE html&gt;&lt;html&gt;&nbsp; &nbsp; &lt;head&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta charset=&quot;utf-8&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta itemprop=&quot;image&quot; content=&quot;/images/192x192.png&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta name=&quot;mobile-web-app-capable&quot; content=&quot;yes&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta name=&quot;robots&quot; content=&quot;index,follow&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt; Lel: Home &lt;/title&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!--- De website icoon niet kopieren alstublieft! ---&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/icon.ico&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!--- Al de stylesheets kunt u hier vinden ---&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot; href=&quot;/css/global.css&quot; /&gt;&nbsp; &nbsp; &lt;/head&gt;&nbsp; &nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;header&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;header_logo&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Fucken Logo m8&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!--- Einde van header ---&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/body&gt;&lt;/html&gt;[/HTML]Here's the css[CODE]/* Tabel van content- Body- Header- Logo- Navigator*/body {&nbsp;&nbsp; margin: 0 auto;&nbsp;&nbsp; background-color: #F5F5F5;&nbsp;&nbsp; font-family: Arial;}#header {&nbsp; &nbsp; background-color :#77A6B5;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 45px;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; z-index: 500;&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; border-bottom: 1px solid #5E838F;}#header_logo {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; padding: 15px 0px 15px 5px;&nbsp; &nbsp; float: right;&nbsp; &nbsp; width: calc(100% - 56px);&nbsp; &nbsp; color: #fff;}[/CODE]Whoever is able to do this for me thank you in advance you're great!</blockquote>

[QUOTE="Mastah, post: 371246, member: 1520"] So I wanted to have a header with a navigator bar as well as a logo but they need to align together. Here's a little example. [IMG]http://image.prntscr.com/image/4cf81f208f3f4bc2a595073502cef47a.png[/IMG] Here's all the code I haz. [HTML]<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta itemprop="image" content="/images/192x192.png"> <meta name="mobile-web-app-capable" content="yes"> <meta name="robots" content="index,follow"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> Lel: Home </title>  <link rel="shortcut icon" href="/images/icon.ico">  <link rel="stylesheet" type="text/css" media="all" href="/css/global.css" /> </head> <body> <div id="header"> <div id="header_logo"> Fucken Logo m8 </div> </div>  </body> </html>[/HTML] Here's the css [CODE]/* Tabel van content - Body - Header - Logo - Navigator */ body { margin: 0 auto; background-color: #F5F5F5; font-family: Arial; } #header { background-color :#77A6B5; width: 100%; height: 45px; top: 0; z-index: 500; position: fixed; border-bottom: 1px solid #5E838F; } #header_logo { position: relative; padding: 15px 0px 15px 5px; float: right; width: calc(100% - 56px); color: #fff; } [/CODE] Whoever is able to do this for me thank you in advance you're great! [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members