Forums

oespinozai

Hi guys, english is not my natal tongue so I'm gonna try to explain myself in the best of ways.

I am designing my business website from scratch, gaining experience through every trial and error.
My webpage will have a central logo, surrounded on both its left and right sides by the nav. Each nav consists of 2 elements (Home and about in nav1, contact and blog in nav2)
Here´s the html and css of that part of the site, I just can´t get it to work right! I really hope you can help me understand how to do it right.

Thank you!

HTML

<div id="container-top">
		<div id="header">
        			
        			<div class="nav">
        				<ul>
            				<li class="firstnav">
            				  <ul>
                    			<li class="home"><a href="#">Home</a></li>
               					<li class="agencia"><a href="#">Agencia</a></li>
                   			  </ul>
               			  </li>
              				<div id="logo">
                				<h1>Savoir-Faire</h1>
                				<p>Agencia de Comunicación</p>
               	 			</div>
            				<li class="secondnav">
                				<ul>
                    			<li class="contacto"><a href="#">Contacto</a></li>
                				<li class="blog"><a href="#">Blog</a></li>
                   	 			</ul>
                			</li>
            			</ul>  
        			</div>
        	</div>

CSS



#container {
	margin:0 auto;
	width:75%;
	
}

#container-top{
	background-image:url(images/top_container_bakground_02.png);
	width:100%;
	position:relative;
}

#header {
	width: 100%;
	background-color:#ececec;
	position:relative;
	font-family:"Century Gothic";
	text-transform:uppercase;
	text-shadow: 1px 1px 1px #111;
	margin-bottom:20px;
	
}

#logo {
	position:absolute;
	background-image:url(images/logo_03.png);
	background-repeat:no-repeat;
	background-position:center;
	margin: 10px auto;
	text-indent:-9999px;
	float:left;
	width:50%;
	height:117px;
}

li {
	 display:inline;
}

.firstnav {
	float:left;
	width:25%;
	position:absolute;
	margin-left:10px;
	
}

.secondnav{
	float:right;
	width:25%;
}

oespinozai

?

jackcutting

Hi, I've worked out two possible solutions. See below:
Solution 1:
CSS:

#container {
	margin:0 auto;
	width:75%;
	
}

#container-top{
	background-image:url(images/top_container_bakground_02.png);
	width:100%;
	position:relative;
}

#header {
	width: 100%;
	background-color:#ececec;
	position:relative;
	font-family:"Century Gothic";
	text-transform:uppercase;
	text-shadow: 1px 1px 1px #111;
	margin-bottom:20px;
	
}

#logo {
	/*position:absolute;*/
	background-image:url(images/logo_03.png);
	background-repeat:no-repeat;
	background-position:center;
	margin: 10px auto;
	text-indent:-9999px;
	/*float:left;*/
	width:50%;
	height:117px;
	/*Additions*/
	border: 1px solid black;
	text-indent: 0px;
	text-align: center;
}

li {
	 display:inline;
}

.firstnav {
	float:left;
	width:25%;
	position:absolute;
	margin-left:10px;
	
}

.secondnav{
	float:right;
	width:25%;
}
.clear{
	clear: both;
}

HTML:

<div id="container-top">
	<div id="header">
		<div class="nav">
			<ul>
				<li class="secondnav">
					<ul>
						<li class="contacto"><a href="#">Contacto</a></li>
						<li class="blog"><a href="#">Blog</a></li>
					</ul>
				</li>
				<li class="firstnav">
					<ul>
						<li class="home"><a href="#">Home</a></li>
						<li class="agencia"><a href="#">Agencia</a></li>
					</ul>
				</li>
				<div id="logo">
					<h1>Savoir-Faire</h1>
					<p>Agencia de Comunicación</p>
				</div>
			</ul>
			<div class="clear"></div>  
		</div>
	</div>
</div>

Solution 2:
CSS:

#container {
	margin:0 auto;
	width:75%;
	
}

#container-top{
	background-image:url(images/top_container_bakground_02.png);
	width:100%;
	position:relative;
}

#header {
	width: 100%;
	background-color:#ececec;
	position:relative;
	font-family:"Century Gothic";
	text-transform:uppercase;
	text-shadow: 1px 1px 1px #111;
	margin-bottom:20px;
	
}

#logo {
	/*position:absolute;*/
	background-image:url(images/logo_03.png);
	background-repeat:no-repeat;
	background-position:center;
	margin: 10px auto;
	text-indent:-9999px;
	float:left;
	width:50%;
	height:117px;
	/*Additions*/
	border: 1px solid black;
	text-indent: 0px;
	text-align: center;
	margin-left: 25%;
	margin-top: -10px
}

li {
	 display:inline;
}

.firstnav {
	float:left;
	width:25%;
	position:absolute;
	margin-left:10px;
	
}

.secondnav{
	float:right;
	width:25%;
}
.clear{
	clear: both;
}

HTML:

<div id="container-top">
	<div id="header">
		<div class="nav">
			<ul>
				<li class="firstnav">
					<ul>
						<li class="home"><a href="#">Home</a></li>
						<li class="agencia"><a href="#">Agencia</a></li>
					</ul>
				</li>
				<li class="secondnav">					<ul>
						<li class="contacto"><a href="#">Contacto</a></li>
						<li class="blog"><a href="#">Blog</a></li>
					</ul>
				</li>	
				<div id="logo">
					<h1>Savoir-Faire</h1>
					<p>Agencia de Comunicación</p>
				</div>
			</ul>
			<div class="clear"></div>  
		</div>
	</div>
</div>

Hope this helps. :)

jackcutting

Ps. I change the text indent and added a border just so I could see some content.

Paulie_D

This seems all a bit unnecessary.

Why not do


<div id="container-top">
	<div id="header">
		<div class="nav-1">
			<ul>
				 <li class="home"><a href="#">Home</a></li>
				 <li class="agencia"><a href="#">Agencia</a></li>
			</ul>
	 	</div>

		<div id="logo">
			<h1>Savoir-Faire</h1>
			<p>Agencia de Comunicación</p>
		</div>
	 	 
		<div class="nav-2">
			<ul>
				<li class="contacto"><a href="#">Contacto</a></li>
				<li class="blog"><a href="#">Blog</a></li>
			</ul>
		</div>

	</div>
</div>

Doesn't that make more sense?

I'm sure you can work the CSS from that.

treehouse : what would you like to learn today?

Forums

[Solved] How to make Header Nav divided by Logo