CODEWITHSUNDEEP
htmlcssnavigationbar
Ben
Ben

Reputation: 305

CSS logo, links, profile alignment issue

I am trying to code a basic HTML navigation header for fun and teach myself some CSS/HTML but I cannot get things to arrange in the way I had intended.

I would like to have a logo on the far left, some links to pages in the middle and a user icon on the right, here is a moc idea: idea This is the result of butchering code together :( result

I think for my idea to work I need to create 3 element locations inside one overall container. Something like this but I can't seem to find a efficient way of doing so: container

This is my current CSS code:

html {
height:100%;
background-color: #f8f8ff;
min-width: 800px;
max-width: 1000px;
margin: auto;
}

body {
background-color: #FFF;
}

.topnav-logo{
float:left;
background-color: #f8f8ff;
margin: 0;
padding: 0;
}

.topnav-profile{
float:right;
background-color: #f8f8ff;
}

.topnav{
background-color: #f8f8ff;
margin: 0;
padding: 0;
width: auto;
}

ul.topnav {
list-style-type: none;
overflow: hidden;
}

/* Float the list items side by side */
ul.topnav li {
float: left;
line-height: 110px;
}

/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: RGB(120,200,250);
padding: 0px 10px;
text-decoration: none;
transition: 0.3s;
font-size: 30px;
}

and the HMTL to go with it currently looks like this:

<html>
<head>
    <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
    <title> </title>
</head>
<body>
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
<ul class="topnav" id="Topnav">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a>
</ul>
body content
</body>

Thanks for the length read and any help is appreciated :)

Edit: So many great replies, thanks all! Sorry for the late feed-back, NYE distractions :(

Just for clarification, I am not looking to put physical visable lines between the logo, links and the profile. I am only using those images as a demonstration as to where I would like each element container. I am looking to align the link text and the profile image as follows:

Links: vertical middle, horizontal middle

Profile img: vertical middle, horizontal right.

Upvotes: 2

Views: 1575

Answers (6)

Mahaveer
Mahaveer

Reputation: 435

Since you're doing for fun i think this is simplest as it gets :)
I didnt do all the tweaking for perfect layout but here is what i think you wanted.
Simply make 3 inline blocks give them text-align:left , center and right and width 33% approx ( including Borders and stuffs) so they take nett 33% each block.

UPDATE for vertical alignment . 

		div{
			display: inline-block;
			width:32%;
			height: 50px;
            line-height:50px;

			background-color: pink;
		}

		.left{
			text-align: left;
		}

		.middle{
			text-align: center;
		}
		.right{
			text-align: right;
		}
<div class="left">
	<span>Logo here on far left</span>
</div>
<div class="middle">
	<span>link1</span>
	<span>link2</span>
	<span>link3</span>
</div>
<div class="right">
	<span>User Icon on far right</span>
</div>

Upvotes: 1

amaiafilo
amaiafilo

Reputation: 1

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html {
  height:100%;
  background-color: gold;
  min-width: 800px;
  max-width: 1000px;
  margin: auto;}

body {
  background-color: #ddd;}

.topnav-logo{
  float:left;
  background-color: red;
  margin: 0;
  padding: 0;
  width:calc(10% - 2*1px);height:110px;
  border:1px solid}

.topnav-profile{
  float:right;
  background-color: pink;
  width:calc(10% - 2*1px);height:110px;
  border:1px solid}

.topnav{
  margin: 0;
  padding: 0;
  width: 80%;}

ul {
  list-style-type: none;
  overflow: hidden;}

/* Float the list items side by side */

.topnav li {
  float: left;border:1px solid;
  margin-right:.5em;
  line-height: 110px;
  width:calc(100% /3 - 1*.5em - 2*1px)}

/* Style the links inside the list items */

.topnav li a {
  color: RGB(120,200,250);
  text-decoration: none;
  transition: 0.3s;
  font-size: 30px;}

</style>
</head>   

<body>

<header>
<div class="topnav-profile">
  <a href="index.html"><img src="images/profile.png" alt="user profile"></a></div>
<div class="topnav-logo">
  <a href="index.html"><img src="images/logo.jpg" alt="site-logo"></a></div>
<nav>
  <ul class="topnav" id="Topnav">
   <li><a href="">Link</a></li>
   <li><a href="">Link</a></li>
   <li><a href="">Link</a></li>
  </ul>
</nav>
</header>
<div>2 logos: user profile must be first to float right . Each logo has width:calc(10% - 2*1px)*2, and the nav element:width:calc(100% / the number of links you want - 1*.5em -margin-- -2*1px --border--). <a href="http://codepen.io/amaiafilo/pen/ZLzOEE?editors=1100">See in codepen </a></div>
</body>

Upvotes: 0

Abk
Abk

Reputation: 2233

Check this out, similar to what you want. It is based on the moc idea image you provided. Use it as a guide.

#main{
  width: 99%
  height: 700px;
  border: 1px solid grey;
  
 

}
#content{
  width: 90%;
  height: inherit;
  border-right: 1px solid grey;
  border-left: 1px solid grey;

  margin:  0 auto ;

}

#header{
  width: 100%;
  border-bottom: 1px solid grey;
  height: 80px;
}

.logo{
  width: 20%;
  height: inherit;
  float: left;
  border-right: 1px solid grey;
  
}
.logo img{
  max-width: 80px;
  max-height: 80px;
  padding: 5px;
}


.nav{
  width: 50%;
  float: left;
  margin-right: 5px;
  padding: 5px;
}
.icon{
  width: 20%;
  float: left;
  margin-left: 5px;
  padding: 5px;
}

.icon img{
  max-width: 60px;
  max-height: 60px;
  
}

.nav ul li{
  display: inline;
  text-decoration: none;
  padding: 5px;
  border: 1px dashed orangered;
  margin: 5px;
}

.text p{
  padding: 10px 10px 0;
}
<body>
  <div id="main">  
    <div id="content">
      <div id="header">
        <div class="logo">
          <img src="http://res.cloudinary.com/wisdomabioye/image/upload/v1462961781/about_vbxvdi.jpg" alt="Image" />
          </div>
        <div class="nav">
          <ul>
            <li> link 1 </li>
            <li> link 2 </li>
            <li> link 3 </li>
            
            
            </ul>
          </div>
        <div class="icon">
          <img src="http://res.cloudinary.com/wisdomabioye/image/upload/v1477218723/images_a0xbmx.png" alt="icon" />
          </div>
        
        </div>
        <div class="text">
          <p>
What is Stick Checking?

The act of using the hockey stick to knock the puck off of the puck carrier's stick or to clear it away from their vicinity. 
Sporting Charts explains Stick Checking

Stick checking is a defensive move where a player will stop the puck carrier's progression by knocking the puck off of their stick and out of their possession. It's often done when the defender isn't in a position to stop the attacker by using their body. Stick checking has been used in hockey since day one. There are several variations of the move, such as the poke, tap, sweep, and press check. Another common stick check is lifting the opponent's stick while they're in possession of the puck and then taking it away from them. A good stick check will result in the defending player gaining possession of the puck which will then allow them to start an offensive play. Stick checking can also be considered an offensive play when it's performed in the opponent's zone by a fore checker. A successful stick check in the offensive zone can often lead to a scoring chance. 
 </p>
          <p>
What is Stick Checking?

The act of using the hockey stick to knock the puck off of the puck carrier's stick or to clear it away from their vicinity. 
Sporting Charts explains Stick Checking

Stick checking is a defensive move where a player will stop ion of the puck and then taking it away from them. A good stick check will result in the defending player gaining possession of the puck which will then allow them to start an offensive play. Stick checking can also be considered an offensive play when it's performed in the opponent's zone by a fore checker. A successful stick check in the offensive zone can often lead to a scoring chance. 
 </p>
          </div>
      </div>
    
    </div>
  
  </body>

Upvotes: 0

William Fish
William Fish

Reputation: 1

the your super close to the way I usually handle that. If you put your entire nav-bar in a div tag or even better a nav tag and give it an appropriate class name, then you can style it much easier.

<html>
<head>
    <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
    <title> </title>
</head>
<body>
<nav class="primaryNav">
 <a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
  <ul class="topnav" id="Topnav">
      <li><a href="">Link</a></li>
      <li><a href="">Link</a></li>
      <li><a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a></li>
  </ul>
</nav>
body content
</body>

CSS

.primaryNav{
height: whatever;
width: whatever:
}
.primaryNav ul{
list-style:none;
width: whatever;
float: right
}
.primaryNav li{
display:inline-block;
margin:I usually give a margin here;
}
.primaryNav a{
padding:10px;
}

something like this. I also closed your a tag in an li if you want to control just that one you can also use .primaryNav li:nth-last-child(1)

also about that image you have there, check out Font Awesome, they have tons of easy to use icons, you can use their cdn, or get the whole css file. It can be deff be fun to play with.

Upvotes: 0

Rehban Khatri
Rehban Khatri

Reputation: 954

Try this -

Make a container like structure with 3 divs aligned in the same line for Top navigation. You have 2 options to align - (i) use display:inline-block or (ii) float

<div class="container">

    <div class="nav-container">
    <div class="left">
    <a>
    <img width="100" height="100"     src="https://cdn2.iconfinder.com/data/icons/social-media-8/512/image3.png"     alt="site-logo"></a>
    </div>
    <div class="mid">

    <ul class="topnav" id="Topnav">
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
    </ul>
    </div>
    <div class="right">
    <a class="topnav-profile" href="index.html"><img width="100" height="100"     src="http://www.aspirehire.co.uk/aspirehire-co-uk/_img/profile.svg" alt="user     profile"></a>
    </div>
    </div>
</div>

CSS -

.container {
  position:relative;
  width:80%;
  margin:0 auto;
  border:1px solid #cccccc;
}
.nav-container {
  border:1px solid #cccccc;
  height:100px;
}
.left {
  float:left;
  border:1px solid #cccccc;
  width:20%;
  height:100%;
}
.mid {
  float:left;
  border:1px solid #cccccc;
  width:59%;
  height:100%;
}
.right {
  float:right;
  width:20%;
  height:100%;
  border:1px solid #cccccc;
}

See Fiddle

Upvotes: 0

Mohit Yadav
Mohit Yadav

Reputation: 471

Please try this:

    <html>
        <head>
            <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
            <title> </title>
        </head>
        <body>
  <div class="header">
        <a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
        <ul class="topnav" id="Topnav">
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a></li>
        </ul>
</div>
        body content
        </body>
    </html>

Here is css:

    html {
    height:100%;
    background-color: #f8f8ff;
    min-width: 800px;
    max-width: 1000px;
    margin: auto;
    }

    body {
    background-color: #FFF;
    }
   .header{
     display:inline-block;
    }    
    .topnav-logo{

    background-color: #f8f8ff;
    margin: 0;
    padding: 0;
    }

    .topnav-profile{

    background-color: #f8f8ff;
    }

    .topnav{
    background-color: #f8f8ff;
    margin: 0;
    padding: 0;
    width: auto;
    }

    ul.topnav {
    list-style-type: none;
    overflow: hidden;
    }

    ul.topnav li a {
    color: RGB(120,200,250);
    padding: 0px 10px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 30px;
    }

Give necessary padding and margin.

Upvotes: 0

Related Questions