I'm trying to figure out how I can position two elements under the same main div underneath each other efficiently with CSS (rather than writing individual CSS for each element). Essentially, I'm trying to make the search results page that google shows.
EDIT: I followed the suggestions in the comments, but the issue is without the float left, it seems as if the first 'article' is to the right of the search results, rather than actually being aligned underneath it.
.logo img {
margin: 15px;
float: left;
}
::-webkit-input-placeholder {
color: gray;
}
.searchbar .search {
height: 30px;
width: 650px;
border-radius: 15px;
margin-top: 15px;
}
.searchbar .mic {
position: absolute;
left: 725px;
margin-top: 20px;
}
.searchbar .tool {
position: absolute;
left: 760px;
margin-top: 20px;
}
#menu {
list-style-type: none;
margin: 0;
padding: 0;
height: 30px;
}
#menu li {
float:left;
height: 30px;
line-height: 30px;
}
#menu li a {
display: block;
padding: 0 20px;
color: #696969;
text-decoration: none;
}
.articles {
margin-bottom: 20px;
}
.articles .article {
list-style-type: none;
padding: 5px;
float: left;
}
.articles .article .heading a {
text-decoration: none;
font-size: 18px;
}
.articles .article .weblink a {
color: green;
text-decoration: none;
font-size: 14px;
}
.articles .article .description {
color: #696969;
font-size: 13px;
}
.footer {
position: fixed;
bottom: 0;
margin-left: 150px;
}
.footer a {
text-decoration: none;
color: #696969;
display: inline;
}
.footer .feedback,
.footer .privacy,
.footer .terms {
padding-right: 20px;
padding-left: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
<title>Search Results</title>
</head>
<body>
<div class='logo'>
<a href='www.google.com'><img src='https://www.edigitalagency.com.au/wp-content/uploads/small-google-logo-png-transparent-background-600x200.png'
alt='Google logo' height='35'></a>
</div>
<div class='searchbar'>
<form>
<input class='search' type='text' placeholder="Sample Google search results page">
<img class='mic' src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png'
alt='Google microphone' height='25'>
<img class='tool' src='https://static.thenounproject.com/png/105498-200.png' alt='Google search tool'
height='25'>
</form>
</div>
<ul id='menu'>
<li><a href='www.google.com/#'>All</a></li>
<li><a href='www.google.com/#'>News</a></li>
<li><a href='www.google.com/#'>Videos</a></li>
<li><a href='www.google.com/#'>Shopping</a></li>
<li><a href='www.google.com/#'>Maps</a></li>
<li><a href='www.google.com/#'>More</a></li>
<li><a href='www.google.com/#'>Settings</a></li>
<li><a href='www.google.com/#'>Tools</a></li>
</ul>
<div class='results'>
<p style='color: #696969; float: left; padding-left: 150px;'> About 127,000,000 results (0.64 seconds) </p>
</div>
<div class='articles'>
<ul class='article'>
<li class='heading'><a href='www.google.com'>With zero coding experience, artist building 180 webpages ...
</a></li>
<li class='weblink'><a href='www.google.com'>arstechnica.com/.../with-zero-coding-experience-artis... </a></li>
<li class='description'>Jul 26, 2013 - 117 days ago, having never done any programming in her life,
Jennifer Dewalt built her first webpage. The next day, she built another, and she ... </li>
</ul>
<ul class='article'>
<li class='heading'><a href='www.google.com'>With zero coding experience, artist building 180 webpages ...
</a></li>
<li class='weblink'><a href='www.google.com'>arstechnica.com/.../with-zero-coding-experience-artis... </a></li>
<li class='description'>Jul 26, 2013 - 117 days ago, having never done any programming in her life,
Jennifer Dewalt built her first webpage. The next day, she built another, and she ... </li>
</ul>
</div>
<div class='logodown'>
</div>
<div class='footer'>
<a class='help' href='www.google.com/#'>Help</a>
<a class='feedback' href=www.google.com/#>Send feedback</a> <a class='privacy' href='www.google.com/#'>Prviacy</a>
<a class='terms' href='www.google.com/#'>Terms</a>
</div>
</body>
</html>
There's no need to use a class per article, just use a class article.
Also, the float & position were the problematic properties.
.logo img {
margin: 15px;
float: left;
}
::-webkit-input-placeholder {
color: gray;
}
.searchbar .search {
height: 30px;
width: 650px;
border-radius: 15px;
margin-top: 15px;
}
.searchbar .mic {
position: absolute;
left: 725px;
margin-top: 20px;
}
.searchbar .tool {
position: absolute;
left: 760px;
margin-top: 20px;
}
#menu {
list-style-type: none;
margin: 0;
padding: 0;
height: 30px;
}
#menu li {
float:left;
height: 30px;
line-height: 30px;
}
#menu li a {
display: block;
padding: 0 20px;
color: #696969;
text-decoration: none;
}
.articles {
margin-bottom: 20px;
}
.articles .article {
list-style-type: none;
padding: 5px;
float: left;
}
.articles .article .heading a {
text-decoration: none;
font-size: 18px;
}
.articles .article .weblink a {
color: green;
text-decoration: none;
font-size: 14px;
}
.articles .article .description {
color: #696969;
font-size: 13px;
}
.footer {
position: fixed;
bottom: 0;
margin-left: 150px;
}
.footer a {
text-decoration: none;
color: #696969;
display: inline;
}
.footer .feedback,
.footer .privacy,
.footer .terms {
padding-right: 20px;
padding-left: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
<title>Search Results</title>
</head>
<body>
<div class='logo'>
<a href='www.google.com'><img src='https://www.edigitalagency.com.au/wp-content/uploads/small-google-logo-png-transparent-background-600x200.png'
alt='Google logo' height='35'></a>
</div>
<div class='searchbar'>
<form>
<input class='search' type='text' placeholder="Sample Google search results page">
<img class='mic' src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png'
alt='Google microphone' height='25'>
<img class='tool' src='https://static.thenounproject.com/png/105498-200.png' alt='Google search tool'
height='25'>
</form>
</div>
<ul id='menu'>
<li><a href='www.google.com/#'>All</a></li>
<li><a href='www.google.com/#'>News</a></li>
<li><a href='www.google.com/#'>Videos</a></li>
<li><a href='www.google.com/#'>Shopping</a></li>
<li><a href='www.google.com/#'>Maps</a></li>
<li><a href='www.google.com/#'>More</a></li>
<li><a href='www.google.com/#'>Settings</a></li>
<li><a href='www.google.com/#'>Tools</a></li>
</ul>
<div class='results'>
<p style='color: #696969; float: left; padding-left: 150px;'> About 127,000,000 results (0.64 seconds) </p>
</div>
<div class='articles'>
<ul class='article'>
<li class='heading'><a href='www.google.com'>With zero coding experience, artist building 180 webpages ...
</a></li>
<li class='weblink'><a href='www.google.com'>arstechnica.com/.../with-zero-coding-experience-artis... </a></li>
<li class='description'>Jul 26, 2013 - 117 days ago, having never done any programming in her life,
Jennifer Dewalt built her first webpage. The next day, she built another, and she ... </li>
</ul>
<ul class='article'>
<li class='heading'><a href='www.google.com'>With zero coding experience, artist building 180 webpages ...
</a></li>
<li class='weblink'><a href='www.google.com'>arstechnica.com/.../with-zero-coding-experience-artis... </a></li>
<li class='description'>Jul 26, 2013 - 117 days ago, having never done any programming in her life,
Jennifer Dewalt built her first webpage. The next day, she built another, and she ... </li>
</ul>
</div>
<div class='logodown'>
</div>
<div class='footer'>
<a class='help' href='www.google.com/#'>Help</a>
<a class='feedback' href=www.google.com/#>Send feedback</a> <a class='privacy' href='www.google.com/#'>Prviacy</a>
<a class='terms' href='www.google.com/#'>Terms</a>
</div>
</body>
</html>
Edit: I added a small input and it is clearly not next to the first article.
Edit 2: You need to remove the float in the inline-style applied to the result paragraph:
<p style='color: #696969; float: left; padding-left: 150px;'> About 127,000,000 results (0.64 seconds) </p>
Must become:
<p style='color: #696969;'> About 127,000,000 results (0.64 seconds) </p>
Related
Trying to make this drop down menu appear, but I'm not sure what is wrong.
Here is my codepen: https://codepen.io/JBeezy3/pen/PooQwZr
<body>
<div class="container">
<!-- will add in later -->
<div class="header" <img>
</div>
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="Home">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
Above all, the text of your sub-menu is displayed black (which is the default color), that's why you don't see it on the black background. Add color: #fff to ul.sub-menu li to make those visible. Then you can fix the rest.
Replace this css
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
body {
font-family: verdana;
font-size: 14px;
font-weight: normal;
height: 100%;
background: url(../img) no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
.header{
padding: 15px 35px;
display: inline-block;
width: 100%;
}
a{
color: white;
text-decoration: none;
}
.menu {
float: right;
}
.menu ul li {
display: inline-block;
float: left;
line-height: 24px;
margin: 15px;
}
.menu ul li a{
text-decoration: none;
color: #ffffff;
font-size: 24px;
padding: 5px 10px;
}
.menu ul li a:hover{
color: red;
}
.name{
width: 350px;
margin-top: 300px;
margin-right: 500px;
}
.name h5{
color: red;
font-size: 24.5px;
text-align: left;
}
.name h1{
color: white;
font-size: 90px;
line-height: 75px;
}
.sub-menu{
position: absolute;
display: none;
background-color: white;
}
.menu li:hover a + .sub-menu { display: block;}
.sub-menu li{
position: relative;
display: block;
}
.column-left {
float: left;
width: 33.333%;
}
.column-right {
float: right;
width: 33.333%;
padding-left: 0px;
}
.column-center {
display: inline-block;
width: 33.333%;
padding-top: 80px;
}
.row {
color: white;
font-size: 24px;
margin: 150px;
text-align: center;
}
.preview {
width: 90%;
}
.preview2 {
width: 75%;
}
.preview3 {
width: 70%
}
.hero{
max-width: 500px;
margin-left: 500px;
padding-bottom: 1000px;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>John Blair Graphic Designer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- will add in later -->
<div class="header">
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="index.html">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
</li>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
<div class="name">
<h5>Graphic Designer</h5>
<h1> John Blair </h1>
</div>
<img class="hero" src="images/hero.jpg">
<footer>
<!-- nav menu when working-->
</footer>
I have a question in which I can't find answer or don't know how to search for answer.
I don't know how to position text above image in a way that I want them to align. The following image will clarify what I am asking.
Next is my HTML and CSS code, I only provided the HTML for about page, but CSS is for the whole website. This isn't anything professional, I am just trying to learn by doing. My idea is to use those images as links ( I know how to do that ). If there is similar question already asked, I apologize, I tried searching here and on YouTube, but could not find solution for this problem. If nothing I will edit pictures in GIMP with text in them.
body {
background: #e5fcf4;
font-family: Arial;
}
header {
text-align: center;
}
header nav {
display: inline-block;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
header ul li {
float: left;
color: white;
width: 200px;
height: 40px;
background-color: #0d3801;
opacity: .9;
line-height: 40px;
text-align: center;
font-size: 20px;
}
header ul li a {
text-decoration: none;
color: white;
display: block;
}
header ul li a:hover {
background-color: green;
color: black;
}
header ul li ul li {
display: none;
}
header ul li:hover ul li {
display: block;
}
div.maincontent {
width: 70%;
padding: 2px;
margin: 2px;
float: left;
}
div.sidecontent {
width: 23%;
float: right;
padding: 2px;
margin: 2px;
margin-top: 10px;
}
div.maincontent img {
width: 900px;
height: 400px;
}
.clear {
clear: both;
}
footer {
background-color: #0d3801;
text-align: center;
}
footer img {
width: 200px;
height: 200px;
margin: 5px;
}
footer h2 {
font-size: 2rem;
color: white;
}
img.aboutimage {
width: 450px;
height: 400px;
float: left;
padding: 5px;
margin-left: 125px;
margin-top: 100px;
}
<header>
<nav>
<ul>
<li> Home </li>
<li> About
<ul>
<li><a> Our team </a></li>
<li><a> Camp sites </a></li>
<li><a> Mission & Vision </a></li>
</ul>
</li>
<li> Things to do
<ul>
<li><a> Activities </a></li>
<li><a> Parks </a></li>
<li><a> Coffee bars </a></li>
</ul>
</li>
<li> Contact
<ul>
<li><a> Map </a></li>
<li><a> Directions </a></li>
</ul>
</li>
<li> News </li>
</ul>
</nav>
</header>
<div>
<a href="">
<img class="aboutimage" src="https://images.pexels.com/photos/7097/people-coffee-tea-meeting.jpg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
<a href="">
<img class="aboutimage" src="https://images.pexels.com/photos/803226/pexels-photo-803226.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
<a href="">
<img class="aboutimage" src="https://images.pexels.com/photos/462353/pexels-photo-462353.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
</div>
wrap each image in div and before that add your text
<div >
<div style="width: 33%; float: left">
<h3>sample title</h3>
<a href="">
<img class="aboutimage">
</a>
</div>
...
</div>
Position your "a" depending on intended result. Now it only makes image to be link
Please check with this snippet
body {
background: #e5fcf4;
font-family: Arial;
}
header {
text-align: center;
}
header nav {
display: inline-block;
}
/* PRVI KORAK*/
header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/*DRUGI KORAK*/
header ul li {
float: left;
color: white;
width: 200px;
height: 40px;
background-color: #0d3801;
opacity: .9;
line-height: 40px;
text-align: center;
font-size: 20px;
}
/*TREĆI KORAK*/
header ul li a {
text-decoration: none;
color: white;
display: block;
}
/*ČETVRTI KORAK*/
header ul li a:hover {
background-color: green;
color: black;
}
/*PETI KORAK*/
header ul li ul li {
display: none;
}
header ul li:hover ul li {
display: block;
}
div.maincontent {
width: 70%;
padding: 2px;
margin: 2px;
float: left;
}
div.sidecontent {
width: 23%;
float: right;
padding: 2px;
margin: 2px;
margin-top: 10px;
}
div.maincontent img {
width: 900px;
height: 400px;
}
.clear {
clear: both;
}
footer {
background-color: #0d3801;
text-align: center;
}
footer img {
width: 200px;
height: 200px;
margin: 5px;
}
footer h2 {
font-size: 2rem;
color: white;
}
img.aboutimage {
width: 450px;
height: 400px;
float: left;
padding: 5px;
margin-left: 125px;
margin-top: 100px;
}
.img-block a{
position:relative;
}
.img-block a span{
position:absolute;
width:100%;
top:0;
left:0;
background:rgba(0,0,0,0.5);
padding:5px;
font-size:14px;
color:#fff;
font-weight:700;
text-align:center;
}
.img-block img{
padding:0;
width:100%;
margin:0;
height:auto;
}
.img-block a{
overflow:hidden;
float:left;
width:calc( 33.33% - 20px );
margin:0 10px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li> Home </li>
<li> About
<ul>
<li><a> Our team </a></li>
<li><a> Camp sites </a></li>
<li><a> Mission & Vision </a></li>
</ul>
</li>
<li> Things to do
<ul>
<li><a> Activities </a></li>
<li><a> Parks </a></li>
<li><a> Coffee bars </a></li>
</ul>
</li>
<li> Contact
<ul>
<li><a> Map </a></li>
<li><a> Directions </a></li>
</ul>
</li>
<li> News </li>
</ul>
</nav>
</header>
<div class="img-block">
<a href="">
<span>Text1</span>
<img class="aboutimage" src="https://images.pexels.com/photos/7097/people-coffee-tea-meeting.jpg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
<a href="">
<span>Text2</span>
<img class="aboutimage" src="https://images.pexels.com/photos/803226/pexels-photo-803226.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
<a href="">
<span>Text3</span>
<img class="aboutimage" src="https://images.pexels.com/photos/462353/pexels-photo-462353.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</a>
</div>
</body>
</html>
You can use figure and figcaption to have text and an image aligned with each other.
I've used flex to make sure everything lines up how it should.
.imageblock {
display: flex;
justify-content: space-between;
}
.imageblock figure {
display: inline-flex;
flex-direction: column;
text-align: center;
width: 30vw;
margin: 0;
}
.imageblock figure * {
width: 100%;
}
<div class="imageblock">
<figure class="aboutimage">
<figcaption>How to add text here?</figcaption>
<img src="https://images.pexels.com/photos/7097/people-coffee-tea-meeting.jpg?w=1260&h=750&auto=compress&cs=tinysrgb">
</figure>
<figure class="aboutimage">
<figcaption>How to add text here?</figcaption>
<img src="https://images.pexels.com/photos/803226/pexels-photo-803226.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</figure>
<figure class="aboutimage">
<figcaption>How to add text here?</figcaption>
<img src="https://images.pexels.com/photos/462353/pexels-photo-462353.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
</figure>
</div>
First you should wrap image with div and add following style for that div
Example:
<div style="width:33%; float:left">Sample Text</div>
Try this.
W3Schools
Hello,
I've been trying to integrate a drop down menu based upon the hover over function of an image. I've gone to the above website which gives an example, but I cannot figure it out. Below is my current HTML. The image I would like to have the hover over function work on and from that have a drop down menu is the Logo.png file. I simply cannot figure out how to integrate this into my code. Any direction or help would be appreciated.
::-webkit-scrollbar {
display: none;
}
body {
margin: 0;
background-color: #808080;
}
#menu {
position: fixed;
width: 100%;
height: 140px;
background-color: #555555;
}
#logopic {
height: 100px;
width: 140px;
}
#logo {
float: left;
margin: 1%;
width: 160px;
}
.menuoptions {
border: 1px solid white;
border-radius: 50px;
padding: 14px;
float: left;
letter-spacing: 2px;
list-style-type: none;
color: #FFFFFF;
margin-top: 30px;
margin-left: 45px;
font-size: 125%;
font-weight: bold;
}
.menuoptions:hover {
color: #00b9f1;
background-color: #FFFFFF;
}
#topsection {
padding-top: 150px;
}
ul li {
list-style-position: inside;
}
<div id="menu">
<div id="logodiv">
<a href="index.html">
<img id="logo" src="images/Logo.png">
</a>
</div>
<div id="menulinks">
<ul id="options">
<a href="#income">
<li class="menuoptions">INCOME</li>
</a>
<a href="#expenses">
<li class="menuoptions">EXPENSES</li>
</a>
<a href="#incomedistribution">
<li class="menuoptions">INCOME DISTRIBUTION</li>
</a>
<a href="#spending">
<li class="menuoptions">SPENDING</li>
</a>
<a href="#sidemenu">
<li class="menuoptions">SIDE MENU</li>
</a>
</ul>
</div>
</div>
Use the sibligns selector "+"
::-webkit-scrollbar {
display: none;
}
body {
margin: 0;
background-color: #808080;
}
#menu {
position: fixed;
width: 100%;
height: 140px;
background-color: #555555;
}
#logopic {
height: 100px;
width: 140px;
}
#logo {
float: left;
margin: 1%;
width: 160px;
}
.menuoptions {
border: 1px solid white;
border-radius: 50px;
padding: 14px;
float: left;
letter-spacing: 2px;
list-style-type: none;
color: #FFFFFF;
margin-top: 30px;
margin-left: 45px;
font-size: 125%;
font-weight: bold;
}
.menuoptions:hover {
color: #00b9f1;
background-color: #FFFFFF;
}
#topsection {
padding-top: 150px;
}
ul li {
list-style-position: inside;
}
#menulinks {
display: none;
}
#logodiv:hover + #menulinks {
display: block
}
<div id="menu">
<div id="logodiv">
<a href="index.html">
<img id="logo" src="images/Logo.png">
</a>
</div>
<div id="menulinks">
<ul id="options">
<a href="#income">
<li class="menuoptions">INCOME</li>
</a>
<a href="#expenses">
<li class="menuoptions">EXPENSES</li>
</a>
<a href="#incomedistribution">
<li class="menuoptions">INCOME DISTRIBUTION</li>
</a>
<a href="#spending">
<li class="menuoptions">SPENDING</li>
</a>
<a href="#sidemenu">
<li class="menuoptions">SIDE MENU</li>
</a>
</ul>
</div>
</div>
Germano Plebani > I believe it won't work, because when you stop hovering the logo, the menu will disappear again.
I changed your code a bit to make it a bit more simple (at least, in my opinion) :
<div id="menu">
<ul>
<li id="logo"><img src="your_path"></li>
<li class="menuoptions">INCOME</li>
<li class="menuoptions">EXPENSES</li>
<li class="menuoptions">INCOME DISTRIBUTION</li>
<li class="menuoptions">SPENDING</li>
<li class="menuoptions">SIDE MENU</li>
</ul>
::-webkit-scrollbar {
display: none;
}
body {
margin: 0;
background-color: #808080;
}
#menu {
position: fixed;
width: 100%;
height: 140px;
background-color: #555555;
}
#logo {
height:140px;
}
#logo img{
width:160px;
}
ul{
height:inherit;
width:160px; /* Your menu has the size of your logo */
}
ul:hover {
width:auto; /* when you hover your menu, it will take 100% of the width of it's container */
}
ul li {
float: left;
list-style:none;
}
ul:hover .menuoptions {
display:block;
}
.menuoptions {
border: 1px solid white;
border-radius: 50px;
padding: 14px;
letter-spacing: 2px;
list-style-type: none;
color: #FFFFFF;
margin-top: 30px;
margin-left: 45px;
font-size: 125%;
font-weight: bold;
display:none;
}
.menuoptions:hover {
color: #00b9f1;
background-color: #FFFFFF;
}
I didn't go for optimization neither, but it works fine.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I need my links to appear on top of each other like this:
First link
Second link
Third link
My links are appearing next to each other like this:
First link Second link Third link.
* {
margin: 0;
padding: 0;
}
h2 {
float: left;
font-size: 17px;
font-weight: 500;
}
a {
color: #15c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body {
background: #fff;
font: 12px Arial, Helvetica, Verdana, sans-serif;
color:#000;
margin:0;
}
header {
width: auto;
height: 60px;
min-width: 980px;
padding: 0 30px 0 15px;
background-color: #fafafa;
}
header ul {
float: right;
list-style: none;
}
header ul li {
float: left;
color: #8c8989;
line-height: 60px;
margin-left: 20px;
}
header ul li a {
color: #8c8989;
}
.logo {
float: left;
width: 125px;
height: 36px;
margin: 12px 30px 0 0;
background-color: #fff;
}
.add-product {
color: #fff;
width: 70px;
height: 28px;
font-size: 15px;
margin-top: 14px;
line-height: 28px;
border-radius: 2px;
text-align: center;
cursor: pointer;
background-color: #EA4335;
}
.add-product:hover {
background-color: #32ba55;
}
.add-product a {
color: #fff;
text-decoration: none;
}
.add-product a:visited {
color: #fff;
}
.search-box {
float: left;
width: 450px;
height: 32px;
border: 1px solid #d7d7d7;
margin-top: 12px;
padding-left: 15px;
border-right: none;
border-radius: none;
}
.inner-header {
width: 100%;
height: 60px;
border-bottom: 1px solid #ebebeb;
}
.side-panel {
float: left;
width: 188px;
height: auto;
background-color: red;
}
.side-panel ul {
float: left;
}
.side-panel ul li {
margin: 5px 0 5px 0;
}
.side-panel ul li a {
color: #fff;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Project | Seller Central</title>
<link rel="stylesheet" type="text/css" href="styles/seller-central.css">
</head>
<body>
<header>
<a href="?q=home">
<div class="logo"></div>
</a>
<ul>
<li>
Hi, Guest
</li>
<li>
<div class="add-product">Add +</div>
</li>
</ul>
</header>
<div class="inner-header"></div>
<div class="side-panel">
<ul>
<li>
My Products
Sold Items
Messages
</li>
</ul>
</div>
</body>
</html>
I'm working on the links located inside the div labeled "side-panel".
Thanks a lot!
See this fiddle
That behaviour was because all the menu items were inside just one <li>. Split them into 3 <li>s and you'll get what you want..
See the updated HTML below
HTML
<header>
<a href="?q=home">
<div class="logo"></div>
</a>
<ul>
<li>
Hi, Guest
</li>
<li>
<div class="add-product">Add +</div>
</li>
</ul>
</header>
<div class="inner-header"></div>
<div class="side-panel">
<ul>
<li>
My Products
</li>
<li>
Sold Items
</li>
<li>
Messages
</li>
</ul>
</div>
Use Instead
<ul style="list-style:none">
<li>My Products</li>
<li>Sold Items</li>
<li> Messages</li>
</ul>
it will make it
Or if you dont want to use li then you can make<a href="#" style="display:list-item">
I'm making a navigation bar for my website.
The last element of the nav should be on the right side of the parent div. (It's the login button).
But as you can see the login button sinks a little bid into the body. It should be on the same line as the other buttons. I tried doing position relative on the parent div (navUl), and position absolute + right:0 in the element. I also tried float right on the element but they both gave me the same result.
My code so far:
html
<body>
<div class="header">
<div class="nav">
<img class="logo" src="images/WEBSHOPlogo.png">
<div class="lining">
<ul class="navUl">
<li class="currentNavLiHome"> <img class="homeButton" src="images/home-icon.png" alt="home"></li>
<li class="navLi">producten</li>
<li class="navLi">informatie</li>
<li class="navLiLogin"> <img class="adminButton" src="images/icon-user.png" alt="admin"></li>
</ul>
</div>
</div>
</div>
</body>
css
body {
margin: 0px;
}
.header {
background-color: #594f4f;
}
.nav {
height: 170px;
width: 1100px;
margin-left: auto;
margin-right: auto;
}
.logo {
width: 300px;
margin-top: 50px;
}
.lining {
}
.navUl {
margin: 0px;
padding: 0px;
margin-top: 61px;
position: relative;
}
.navLi {
padding-top: 10px;
padding-bottom: 1px;
padding-left: 25px;
padding-right: 25px;
margin-left: 10px;
margin-right: 10px;
font-size: 1em;
text-transform: uppercase;
color: #594f4f;
display: inline;
background-color: #45ada8;
font-family:sans-serif;
clear: both;
}
.currentNavLiHome {
padding-top: 10px;
padding-bottom: 2px;
padding-left: 15px;
padding-right: 15px;
background-color: white;
margin-right: 5px;
display: inline;
clear: both;
}
.homeButton{
width: 20px;
}
.adminButton{
width: 20px;
}
.navLiLogin {
padding-top: 10px;
padding-bottom: 2px;
padding-left: 15px;
padding-right: 15px;
background-color: white;
display: inline;
float: right;
}
.navUl a {
list-style-type: none;
text-decoration: none;
}
.loginPosition {
}
Thanks for reading.
It's a little tough without a working fiddle, but give this a shot.
Updated HTML to put anchor tags inside <li> as that is better syntax:
HTML:
<body>
<div class="header">
<div class="nav">
<img class="logo" src="images/WEBSHOPlogo.png">
<div class="lining">
<ul class="navUl">
<li class="currentNavLiHome"><img class="homeButton" src="images/home-icon.png" alt="home"></li>
<li class="navLi"> producten</li>
<li class="navLi"> informatie</li>
<li class="navLiLogin"><img class="adminButton" src="images/icon-user.png" alt="admin"></li>
</ul>
</div>
</div>
</div>
</body>
Updated CSS. Basically we float the <ul> and give it a 100% width, then float the <li> left, except float the li:last-child to the right. Also, remove the clear:both from the <li> so they stay inline.
CSS:
.nav ul {
float: left;
width: 100%;
}
.nav ul li {
float: left;
}
.nav ul li:last-child {
float: right;
}
.navLi {
padding-top: 10px;
padding-bottom: 1px;
padding-left: 25px;
padding-right: 25px;
margin-left: 10px;
margin-right: 10px;
font-size: 1em;
text-transform: uppercase;
color: #594f4f;
display: inline;
background-color: #45ada8;
font-family:sans-serif;
}
.currentNavLiHome {
padding-top: 10px;
padding-bottom: 2px;
padding-left: 15px;
padding-right: 15px;
background-color: white;
margin-right: 5px;
display: inline;
}
Try using float:right; in the CSS code.
Also I think it would be a god solution if you gave the div which contains links (you may create it) a width of 90% and give the div which contains the login a width of 10% for example.
<body>
<div class="header">
<div class="nav">
<img class="logo" src="images/WEBSHOPlogo.png">
<div class="lining" class="login" <!-- give it width="90%" -->>
<ul class="navUl">
<li class="currentNavLiHome"> <img class="homeButton" src="images/home-icon.png" alt="home"></li>
<li class="navLi">producten</li>
<li class="navLi">informatie</li></ul>
<div class="login" <!-- give it width="10%" --> > <img class="adminButton" src="images/icon-user.png" alt="admin"></li></div>
</div>
</div>
</div>
</body>