6 Replies - 2092 Views - Last Post: 18 July 2013 - 01:59 PM

#1 JordanSimps  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 21-May 13

Header Title, Slogan, Logo, and Navigation Parallel

Posted 21 May 2013 - 12:17 AM

How do I make my header title and slogan parallel to my logo and all those parallel to my navigation? A example picture is below:
Example Picture

jsFiddle Example:
http://jsfiddle.net/JordanSimps/hgwyS/

CSS:
<body class="body">
	<header class="mainHeader">
    
    	<nav><ul>
        	<li class="active"><a href="#">Home</a></li>
            <li><a cass="active" href="#">Menu</a></li>
            <li><a href="#">Location</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Specials</a></li>
            <li><a href="#">Contact</a></li>
        </ul></nav>
        
        	<h1><a href="#" class="title" title="Index">Mario’s Luigis<br /> Downtown</a></h1>
        <footer>
        	<p class="slogan">
        Fine Italian dining & old world charm.
        	</p>
        </footer>
      <img src="http://dubdown.web44.net/mariosluigis/images/liberty.png" />
    </header>


CSS:
@charset "UTF-8";
/* CSS Document */

body {
	color: #000305;
	font-size: 87.5%;
	font-family: Arial, 'Lucida Sans Unicode';
	line-height: 1.5;
	text-align: left;
}

a {
	text-decoration: none;
}

a:link, a:visited {
	
}

a:hover, a:active {
	
}

.body {
	margin: 0 auto;
	width: 90%;
	clear: both;
}

.title {
	color: #000;
}

.mainHeader h1 {
	font-family: "Existence Light";
	line-height: 1.4em;
	font-weight: lighter;
	font-size: 48px;
}

.mainHeader h1 a:hover {
	color: #DC9101;
}

.slogan {
	color: #DC9101;
	font-family: "Adobe Devanagari";
	font-size: 18px;
}

.mainHeader img {
	position: ;
	width: 10%;
	height: auto;
}

.mainHeader nav {
	width: 100%;
	height: 143px;
}

.mainHeader nav a {
	color: #000;
	font-family: "Adobe Devanagari";
	font-size: 18px;
}

.mainHeader nav ul {
	list-style: none;
	margin: 5% auto;
	float: right;
}

.mainHeader nav a:link, mainHeader nav a:visited {
	display: inline-block;
	padding: 0.4em;
	height: 0.15em;
}

.mainHeader nav a:hover, .mainHeader a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited {
	color: #DC9101;
	text-shadow: none;
}


Is This A Good Question/Topic? 0
  • +

Replies To: Header Title, Slogan, Logo, and Navigation Parallel

#2 UnknownCoder  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 5
  • View blog
  • Posts: 137
  • Joined: 22-February 09

Re: Header Title, Slogan, Logo, and Navigation Parallel

Posted 08 June 2013 - 05:43 AM

Make these changes in your css and your good to go:

.mainHeader nav {
	float:right;
}

.mainHeader nav ul {
	list-style: none;
	margin: 5% auto;
	padding: 0;
}


Happy coding!
Was This Post Helpful? 0
  • +
  • -

#3 Leticia Wren  Icon User is offline

  • New D.I.C Head

Reputation: -4
  • View blog
  • Posts: 18
  • Joined: 05-July 13

Re: Header Title, Slogan, Logo, and Navigation Parallel

Posted 16 July 2013 - 10:54 PM

i do agree with UnknownCoder. use divs and tables for the header title and slogan to bring them parallel to your logo and all those parallel to your navigation. keep on trying this method, you will surely achieve your desired results.
Was This Post Helpful? -2
  • +
  • -

#4 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Header Title, Slogan, Logo, and Navigation Parallel

Posted 17 July 2013 - 08:10 AM

I like to put the image as the div background.

<div class="wrap">
	<div class="left">
    	<h1><a href="#" class="title" title="Index">Mario’s Luigis<br /> Downtown</a></h1>
		<p>Fine italian dining and old world culture</p>
    </div>
    <div class="right">
    	<ul> 
        	<li>Menu</li>
            <li>Blah</li>
            <li>Blah</li>
            <li>Blah</li>
        </ul>  
    </div>
</div>


CSS:
.wrap {
	width: 960px;
	margin: 0 auto;
}

.left {
	width: 300px;
	height: 200px;
	background: #333;
	position: relative;
	float: left;
	overflow: hidden;
}

.right {
	width: 660px;
	height: 200px;
	background: #eee url("http://dubdown.web44.net/mariosluigis/images/liberty.png") no-repeat;
	background-position: left center;
	position: relative;
	float: right;
}
.right>ul {
	list-style-type: none;
	float: right;
	padding-right: 15px;
}


Was This Post Helpful? 1
  • +
  • -

#5 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1383
  • View blog
  • Posts: 3,515
  • Joined: 28-November 09

Re: Header Title, Slogan, Logo, and Navigation Parallel

Posted 17 July 2013 - 03:12 PM

View PostLeticia Wren, on 17 July 2013 - 12:54 AM, said:

i do agree with UnknownCoder. use divs and tables for the header title and slogan to bring them parallel to your logo and all those parallel to your navigation. keep on trying this method, you will surely achieve your desired results.


Tables are bad for anything design related.

Look into positioning and floats and read up, those should carry you well to getting that to work. I would probably anchor the nav to the right side of the page so it collapses a bit better if you shrink the page or go to a different resolution.
Was This Post Helpful? 0
  • +
  • -

#6 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Header Title, Slogan, Logo, and Navigation Parallel

Posted 18 July 2013 - 09:59 AM

View PostLemur, on 17 July 2013 - 05:12 PM, said:

View PostLeticia Wren, on 17 July 2013 - 12:54 AM, said:

i do agree with UnknownCoder. use divs and tables for the header title and slogan to bring them parallel to your logo and all those parallel to your navigation. keep on trying this method, you will surely achieve your desired results.


Tables are bad for anything design related.

Look into positioning and floats and read up, those should carry you well to getting that to work. I would probably anchor the nav to the right side of the page so it collapses a bit better if you shrink the page or go to a different resolution.


Didn't want to get into the beast of responsive design to someone who is new or beginning html/css.
Was This Post Helpful? 0
  • +
  • -

#7 DblAAssassin  Icon User is offline

  • D.I.C Regular

Reputation: 34
  • View blog
  • Posts: 261
  • Joined: 11-May 13

Re: Header Title, Slogan, Logo, and Navigation Parallel

Posted 18 July 2013 - 01:59 PM

I like it.
Happy Coding! :)/>

Besides the Grammar Errors in your Menu <li> element. You misspelled class. You also labeled the HTML as CSS :)

This post has been edited by DblAAssassin: 18 July 2013 - 02:01 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1