Hi in the below code right end of the logo text want to display and all the three option in a single line.
expected output:
Logo Welcome Guest Free Register Login
can anyone help me
.logo {
float: left;
}
.logo a {
display: block;
}
.header {
margin: 10px 0;
}
.header-right ul li {
width: 52%;
float: right;
}
<div class="header">
<div class="container">
<div class="logo">
<a href="index.html">
<img src="images/logo.gif" alt="" />
</a>
</div>
<div class="header-right">
<ul>
<li>Welcome Guest</li>
<li>Free Register</li>
<li>Login</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
The problem is that you are giving float and width to every single li.
You want to do that to the ul and give display: inline-block to the li.
Something like this..
.logo {
float: left;
}
.logo a {
display: block;
}
.header {
margin: 10px 0;
}
.header-right ul {
float: right;
width: 52%;
}
.header-right ul li {
display: inline-block;
margin-right: 30px;
}
<div class="header">
<div class="container">
<div class="logo">
<a href="index.html">
<img src="images/logo.gif" alt="" />
</a>
</div>
<div class="header-right">
<ul>
<li>Welcome Guest</li>
<li>Free Register</li>
<li>Login</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
Try like this: Demo
.header-right{
width: 52%;
float: right;
}
.header-right ul li {
margin:0 20px;
display:inline-block;
}
Update your styles like this:
.header-right ul {
width: 52%;
float: right;
}
.header-right ul li
{display:inline;
margin-right:15px;
}
Related
I know lot of questions has already been asked about centering an <ul> element inside a Bootstrap column but what I would like is to center the <ul>but not centering the text (I want every <li> to be vertically align).
Here's my code:
<div class="content-menu">
<h1 class="content-header">Information</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ul class="content-menu-menu">
<li> <img src="images/info.png">Information</li>
<li> <img src="images/dollar.png">Pricing</li>
<li> <img src="images/more.png">Supplements</li>
<li> <img src="images/placeholder.png">Map</li>
</ul>
</div>
</div>
And my css:
.content-menu-menu {
float: none;
text-align: center;
list-style-type: none;
padding:0;
}
.content-menu-menu > li {
color:white;
padding-top: 10px;
}
.content-menu-menu > li > a > img {
width: 32px;
height:32px;
margin-right: 10px;
}
But here's what I got:
What I would like is that the list is on the center of the screen but every items are left aligned.
Any help would be appreciated !
Please see below. content-menu (center) and content-menu-menu > li (left) adjusted.
.content-menu {
text-align: center;
}
.content-menu-menu {
float: none;
padding:0;
display: inline-block;
}
.content-menu-menu > li {
color:white;
padding-top: 10px;
text-align: left;
}
.content-menu-menu > li > a > img {
width: 32px;
height:32px;
margin-right: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content-menu">
<h1 class="content-header">Information</h1>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ul class="content-menu-menu">
<li> <img src="images/info.png">Information</li>
<li> <img src="images/dollar.png">Pricing</li>
<li> <img src="images/more.png">Supplements</li>
<li> <img src="images/placeholder.png">Map</li>
</ul>
</div>
</div>
I'm pulling my hair out trying to get two div tags to align. I've read page after page of solutions on here but I've not been able to get any of them to work. I'm not sure if this is related to this being a Visual Studio project using MVC. It seems unlikely but I thought I'd mention it.
So this is for a header bar on a company website. Logo should be on the left and the menu should be on the right. It must be responsive. Here's what I've got so far:
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
logo {
float: none;
width: 215px;
}
nav {
width: 100%;
height: 100%;
float: left;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
And here is the HTML
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
By changing your CSS like this (note the added dot in .logo)
.logo {
float: left;
width: 215px;
}
nav {
margin-left: 215px;
}
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
.logo {
float: left;
width: 215px;
}
nav {
margin-left: 215px;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</header>
You have many problems in your code:
logo in your css should be .logo to refer to the class of the logo.
The property float:none should be set to float:left; so it should be correctly floated.
And for the nav you shouldn't specify a width:100% because it will be forced to take the whole width of the header, you need to set it to auto for example.
This is a working snippet:
header {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ffffff;
}
.logo {
float: left;
width: 215px;
}
nav {
width: auto;
height: 100%;
float: left;
}
nav ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
nav li {
display: inline;
padding: 20px;
}
nav a {
text-decoration: none;
color: #171581;
padding: 8px 8px 8px 8px;
}
nav a:hover {
color: #D60053;
}
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger"></div>
<nav>
<ul>
<li>About
</li>
<li>Residential & Business
</li>
<li>My Accounts Details
</li>
<li>FAQ
</li>
<li>Contact us
</li>
</ul>
</nav>
</div>
</header>
1.Your code was badly formatted.I have formatted it.
2..logo should be set to "float:left".
3..container should have"overflow:hidden"
I have also made Your li straight.(I have made it in one line )
This contains your html formatted code,Css which You may need to change as well as add
<div style="opacity: 1;" class="wrapper">
<header class="">
<div class="container">
<div class="logo">
<a href="/" class="glyphicon-log-out top-menu">
<img src="~/assets/images/sunwavelogo.png" alt="Sunwave Logo" />
</a>
</div>
<div class="hamburger">
<nav>
<ul>
<li>About</li>
<li>Residential & Business</li>
<li>My Accounts Details</li>
<li>FAQ</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</div>
</header>
</div>
Your css code:
* {
margin: 0px;
padding: 0px;
}
header{
width:700px;
margin:0 auto;
}
.container {
overflow: hidden;
}
.logo {
float: left;
margin-right:100px;
}
.hamburger {
/* float: left; */
overflow: hidden;
}
li {
float: left;
padding: 5px;
list-style-type: none;
}
Hope This Is what You had expected
Hi new to CSS here could anyone help me get the text to move down so it's aligned with my logo image? Also as an extension on that question does anyone know how I can make the text move across so the margins on either side match?
This is what it looks like now:
Here is the html:
<div id="header">
<div class="wrap">
<nav id="topnav"> <!-- This is the top nav bar-->
<ul id="topnavlist">
<li> <!-- Home logo-->
<div class="logo">
<img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto">
</div>
</li>
<div class="navItems"><!-- Nav items-->
<ul>
<li>UK News</li>
<li>Smartphones</li>
<li>Reviews</li>
</ul>
</div>
</ul>
</nav>
</div>
</div>
And the CSS:
#header, #footer {
background-color:#115279;
float:left;
padding:15px 0;
min-width:100%;
}
.wrap {
position:relative;
margin:0 auto;
width:960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color:#D9330F;
list-style-type: none;
float: left;
display:inline;
padding: 10px;
}
.navItems {
height: 20%;
display: inline;
margin-top:30px;
padding-top: 50px;
padding: 50px;
}
Your HTML is invalid, you can't have div inside li. Replace div with li and wrap their children(lis) in a ul.
To vertically center the lis, give .navItems a height: 50px same as the height of your logo and give it a line-height: 50px(height)
#header,
#footer {
background-color: #115279;
float: left;
padding: 15px 0;
min-width: 100%;
}
.wrap {
position: relative;
margin: 0 auto;
width: 960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color: #D9330F;
list-style-type: none;
float: left;
display: inline;
padding: 10px;
}
.navItems {
display: inline;
height: 50px;
line-height: 50px;
}
<div id="header">
<div class="wrap">
<nav id="topnav">
<!-- This is the top nav bar-->
<ul id="topnavlist">
<li>
<!-- Home logo-->
<div class="logo">
<a href="index.html">
<img src="http://dummyimage.com/100x50/000/fff" alt="TechNow Logo" height="70" width="auto">
</a>
</div>
</li>
<li class="navItems">
<!-- Nav items-->
<ul>
<li>UK News
</li>
<li>Smartphones
</li>
<li>Reviews
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
You can't have a div element as a child to a ul element. As for aligning all of your elements. By default, the img and a elements are considered inline elements in css. You can use the vertical-align property on inline elements. So your markup could be a bit more simple like
<nav id="topnav">
<img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto">
UK News
Smartphones
Reviews
</nav>
and then the css
#topnav a {
vertical-align: middle;
}
Since I don't have the exact size of your image, this won't get you exactly what you're looking for, but it should get you on the right track. The main thing is to make sure you have valid HTML markup. This can cause many headaches and issues with your css if it's not.
As mentioned your current HTML is invalid. limust be children (and the only direct children) of a ul.
In fact there is no need to use divs at all.
#header,
#footer {
background-color: #115279;
float: left;
padding: 15px 0;
min-width: 100%;
}
.wrap {
position: relative;
margin: 0 auto;
width: 960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color: #D9330F;
list-style-type: none;
display: inline-block;
vertical-align: middle;
padding: 10px;
}
.NavItem {
color: white;
}
<div id="header">
<div class="wrap">
<nav id="topnav">
<!-- This is the top nav bar-->
<ul id="topnavlist">
<li>
<!-- Home logo-->
<a href="index.html">
<img src="http://placehold.it/70x70" alt="TechNow Logo" height="70" width="auto" />
</a>
</li>
<li>UK News
</li>
<li>Smartphones
</li>
<li>Reviews
</li>
</ul>
</nav>
</div>
</div>
I floated a logo image and the title of the page to the left, but then the nav gets in the way along with some of the main content. I tried to clear the nav but then when I want to display my navs inline it will throw it off. So I can't do that.
Anyone know what to do?
* {
margin: 0px;
padding: 0px;
}
header,nav,section,article,aside,footer {
display: block;
}
.container {
width: 960px;
margin: 0 auto;
}
.main_header img {
float: left;
}
.main_header h1 {
float: left;
}
<header class="main_header">
<img src="logo2.jpg" alt="logo pic">
<h1>Title of header</h1>
</header>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</nav>
Add this to your css:
header{clear:both; overflow:hidden;}
nav ul li {display:inline;}
* {
margin: 0px;
padding: 0px;
}
header,nav,section,article,aside,footer {
display: block;
}
.container {
width: 960px;
margin: 0 auto;
}
.main_header img {
float: left;
}
.main_header h1 {
float: left;
}
header{clear:both; overflow:hidden;}
nav ul li {display:inline;}
<header class="main_header">
<img src="logo2.jpg" alt="logo pic">
<h1>Title of header</h1>
</header>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</nav>
i created a style called "topbar" using css.
The code are as follows:
.topbar:hover ul{ display: inline;}
.topbar {
float: left;
margin-left: 20px;
margin-right: 20px;
font-family:"Georgia";
}
.topbar ul {
display: none;
top:30px;
position: absolute; border-style:solid;
border-width:1px; background-color:white;}
}
.clear {
clear: both;
}
then i went to create a ul "grid" and allows mouse hover enlarge of images
ul.grid, ul.grid > li {
margin: 0;
padding: 0;
}
ul.grid {
}
ul.grid > li {
float: left;
list-style-type: none;
text-align: center;
font-family:"Georgia", serif;
padding-top:50px;
padding-bottom:25px;
padding-right:25px;
padding-left:0px;
}
ul img:hover { width: 200px; height: 250px; }
my html code:
<body>
<div class="topbar">
<p>Title</p>
<ul>
<li>A-Z</li>
<li>Z-A</li>
</ul>
</div>
<div class="topbar">
<p>Genre</p>
<ul>
<li>Action</li>
<li>Comedy</li>
<li>Animation</li>
<li>Horror</li>
<li>Drama</li>
</ul>
</div>
<div class="clear"></div>
<br />
<div id="videos">
<ul class="grid">
<li>
<p class="image"><img src="http://3.bp.blogspot.com/-AGAaic1-yrM/TcWmj77lHzI/AAAAAAAAAkQ/K6zzSk1WgUY/s1600/thor-movie-poster-1.jpg" alt="Thor" width="175" height="200" /></p>
<p class="name">Thor</p>
<p class="genre">Action</p>
<p class="format">DVD</p>
<p class="year">2011</p>
</li>
<li>
<p class="image"><img src="http://www.galacool.com/wp-content/uploads/2010/02/hangover2.jpg" alt="Hangover" width="175" height="200" /></p>
<p class="name">Hangover</p>
<p class="genre">Comedy</p>
<p class="format">DVD</p>
<p class="year">2009</p>
</li>
</ul>
</div>
</body>
Why do i have a left unwanted space beside my "thor" movie image?
The left space must be the indentation of the List where you are putting them. Ideally, to remove this left-indentation, you should set both padding and margins to "0" for the "UL".
This small piece of code works perfectly in this context:
CSS
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
HTML
<div id="navcontainer">
<ul>
<li>Milk
<ul>
<li>Goat</li>
<li>Cow</li>
</ul>
</li>
<li>Eggs
<ul>
<li>Free-range</li>
<li>Other</li>
</ul>
</li>
</ul>
</div>