Reply to thread

Message

<blockquote data-quote="IntactDev" data-source="post: 193835" data-attributes="member: 24757">So here is my attempt:&nbsp;<img src="http://img.ctrlv.in.s3.amazonaws.com/img/515cf3646b0e5.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" />&nbsp;I want the logo in the middle of the top navigation bar, and I want the words in the middle of the navigation bar. Here is my CSS:&nbsp;[CODE]body {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; background: url('../images/background.gif') repeat;}&nbsp;a {&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color: #181818;}&nbsp;li {&nbsp; &nbsp; list-style: none;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;}&nbsp;.navigationShell {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 60px;&nbsp; &nbsp; background: #28AE9A;&nbsp; &nbsp; border-bottom: 1px black solid;&nbsp; &nbsp; position: fixed;}&nbsp;.navigation {&nbsp; &nbsp; padding: 18px 7px 5px 15px;}&nbsp;.navigation li {&nbsp; &nbsp; height: 10px;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; display: inline;}&nbsp;.navigationItem {&nbsp; &nbsp; padding-right: 25px;&nbsp; &nbsp; text-transform: capitalize;}&nbsp;.navigationItem #first {&nbsp;&nbsp; }&nbsp;#right {&nbsp; &nbsp; float: right;}[/CODE]&nbsp;Here is my HTML:&nbsp;[HTML]&lt;html&gt;&nbsp; &nbsp; &lt;head&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;TopHostr: Images are Priceless&lt;/title&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;link href='css/style.css' rel='stylesheet' type='text/css'&gt;&nbsp; &nbsp; &lt;/head&gt;&nbsp;&nbsp; &nbsp; &lt;body&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div class='navigationShell'&gt;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class='navigation'&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class='navigationItem'&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href='index' onClick='return false;'&gt;Home&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class='navigationItem'&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href='index' onClick='return false;'&gt;Home&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class='navigationItem'&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href='index' onClick='return false;'&gt;Home&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class='navigationLogo'&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src='images/logo.png' width='450' height='300'&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class='navigationItem'&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href='index' onClick='return false;'&gt;Home&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class='navigationItem'&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href='index' onClick='return false;'&gt;Home&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li class='navigationItem'&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href='index' onClick='return false;'&gt;Home&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class='navigation' id='right'&gt;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &lt;/body&gt;&nbsp;&nbsp; &nbsp; &lt;footer&gt;&nbsp; &nbsp; &lt;/footer&gt;&lt;/html&gt;[/HTML]&nbsp;Thanks for the help... This is my first time attempting this, so thanks for baring with me.&nbsp;- IntactDev</blockquote>

[QUOTE="IntactDev, post: 193835, member: 24757"] So here is my attempt: [IMG]http://img.ctrlv.in.s3.amazonaws.com/img/515cf3646b0e5.jpg[/IMG] I want the logo in the middle of the top navigation bar, and I want the words in the middle of the navigation bar. Here is my CSS: [CODE]body { margin: 0; padding: 0; background: url('../images/background.gif') repeat; } a { text-decoration: none; color: #181818; } li { list-style: none; margin: 0; padding: 0; } .navigationShell { width: 100%; height: 60px; background: #28AE9A; border-bottom: 1px black solid; position: fixed; } .navigation { padding: 18px 7px 5px 15px; } .navigation li { height: 10px; width: 100%; display: inline; } .navigationItem { padding-right: 25px; text-transform: capitalize; } .navigationItem #first { } #right { float: right; }[/CODE] Here is my HTML: [HTML]<html> <head> <title>TopHostr: Images are Priceless</title> <link href='css/style.css' rel='stylesheet' type='text/css'> </head> <body> <div class='navigationShell'> <div class='navigation'> <ul> <li class='navigationItem'> <a href='index' onClick='return false;'>Home</a> </li> <li class='navigationItem'> <a href='index' onClick='return false;'>Home</a> </li> <li class='navigationItem'> <a href='index' onClick='return false;'>Home</a> </li> <li class='navigationLogo'> <img src='images/logo.png' width='450' height='300'> </li> <li class='navigationItem'> <a href='index' onClick='return false;'>Home</a> </li> <li class='navigationItem'> <a href='index' onClick='return false;'>Home</a> </li> <li class='navigationItem'> <a href='index' onClick='return false;'>Home</a> </li> </ul> </div> <div class='navigation' id='right'> </div> </div> </body> <footer> </footer> </html>[/HTML] Thanks for the help... This is my first time attempting this, so thanks for baring with me. - IntactDev [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members