I have a navigation bar that floats the buttons on the left. I no want to add 4 social media icons but I want them to align on the right. However we i add the social media icon they are aligned on the right but not inline with the navigation bar, but just below it. adding top:-50px;doesnt help.
<body>
<div class="menu">
<ul>
<li>TL Custom Printing</li>
<li class="active">Home</li>
<li>Custom Printing</li>
<li>Products</li>
<li>Gallery</li>
<li>About</li>
<li>Contact Us</li>
<div class="clearFloat"></div>
</ul>
</div>
<div class="social">
<img src="images/twitter.png" />
<img src="images/fb.png" />
<img src="images/flickr.png" />
<img src="images/pinterest.png" />
</div>
</body>
The CSS:
/* Navigation Bar
----------------------------------------------- */
.menu{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
width:100%;
}
.menu ul{
list-style:none;
background:#2d2d2d;
margin:0;
padding:0;
}
.menu li{
display:inline-block;
float:left;
}
.menu li:first-child{
margin-left:20px;
margin-right:20px;
display:block;
padding:10px;
text-decoration:none;
color:#ff4800;
font-weight:bold;
font-size:14px;
border-top:2px solid transparent;
}
.menu a{
display:block;
padding:10px;
text-decoration:none;
color:#bbbbbb;
border-top:2px solid transparent;
}
.menu a:hover,
.menu li.active a{
background:#3d3d3d;
color:#dddddd;
border-top:2px solid #ff4800;
}
.clearFloat{
clear:both;
}
/* Social Media Icons
----------------------------------------------- */
#social {
float:right;
}
JSFIDDLE
You are clearing your floats in the .menu div so .menu and .social will never sit on the same line. Here is one solution (of which there are many):
DEMO
<div class="menu_wrap"> <!-- ADD A WRAPPER -->
<div class="menu">
<ul>
<!-- REMOVE THE CLEARFIX FROM HERE -->
</ul>
</div>
<div class="social">
...
</div>
<div class="clearFloat"></div> <!-- ADD CLEARFIX HERE -->
</div>
CSS
.menu_wrap {
background: #000;
}
Also, #social { should be .social { (class not ID)
Do You need this
Explanation:
1. Set width 100% to your header/footer.
.header
{
background: #333;
width: 100%;
height: 10%;
overflow: hidden;
}
2. Set width to menu and social and float properties..
.social
{
float:right;
width: 100%;
height: 100%;
overflow: hidden;
width: 28%;
}
.social a img
{
margin-top: 10px;
}
There is no social id in your code.
I have made a few changes in your mark up.I had put the div social inside the parent and had corrected the #social to .social in your css.
WORKING CODE
Related
I am new to css so I thought I'd try to make a website with a navbar. I want to put my navigation bar on the same line as the header(logo). I have been trying to use float left and right to position the header and navbar on the same line but the navbar text never centers with the header.
I have tried to adjust the margin and padding to no avail. As well, tried to move the container class around. I inspected my website using the chrome dev tools and found is contained in a which doesn't show up in my text editor. P.s. I changed the links to #
body{
background-color:#fff;
color:#00f;
font-family:"Raleway", Helvetica, sans-serif;
margin:0;
}
.container{
width:80%;
margin: auto;
overflow: hidden;
}
.clr{
clear:none;
}
#logo{
border:3px solid #00f;
padding-left: 10px;
padding-right: 10px;
float:left
}
#navbar{
margin:0;
float:right;
}
#navbar ul{
padding:0;
list-style:none;
}
#navbar li{
display:inline-block;
}
#navbar a{
color:#00f;
text-decoration:none;
font-size:18px;
padding-right:15px;
}
<body>
<div id="main-header">
<div class="container">
<h1 id="logo">HM<h1>
<nav id="navbar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Github</li>
<li>Twitter</li>
</ul>
</nav>
<div class="clr"></div>
</div>
</div>
Use flexbox
add this style to your style
.container {
display:flex;
justify-content:space-between;
align-items:center;
}
body{
background-color:#fff;
color:#00f;
font-family:"Raleway", Helvetica, sans-serif;
margin:0;
}
.container {
display:flex;
justify-content:space-between;
align-items:center;
}
#logo{
border:3px solid;
padding:0 10px;
}
#navbar li{
display:inline-block;
}
#navbar a{
text-decoration:none;
font-size:18px;
padding-right:15px;
}
<div id="main-header">
<div class="container">
<h1 id="logo">HM</h1>
<nav id="navbar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Github</li>
<li>Twitter</li>
</ul>
</nav>
</div>
</div>
Add margin:0 to #nav-bar ul, and the issue will be solved.
I am new to css my dropdown menu is hiding behind the div please help me to find out the problem. my HTML and CSS code is:
<style>
*
{
margin:0px;
padding:0px;
}
body
{
background-color:mintcream;
}
#header
{
height:260px;
width:auto;
margin:5px;
}
#headerimg
{
height: 260px;
width:100%;
}
#wrap #menu
{
width:550px;
margin:0 auto;
padding:10px;
}
#wrap
{
height:50px;
background-color:lightsalmon;
border:1px solid white;
border-radius:5px;
}
#wrap #menu ul li
{
background-color:black;
border-radius:5px;
width: 120px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
list-style-type:none;
margin-left: 3px;
}
#wrap #menu ul li a{
color:white;
text-decoration:none;
display:block;
}
#wrap #menu ul li a:hover
{
background-color:mistyrose;
color:orangered;
border-radius:5px;
}
#wrap #menu ul li ul li
{
display:none;
}
#wrap #menu ul li:hover ul li
{
display:block;
}
#content
{
width:100%;
height:500px;
background-color: teal;
margin:5px;
}
#content1
{
width:50%;
height:500px;
background-color: yellow;
float:left;
}
#content2
{
width:50%;
height:500px;
background-color:red;
float:left;
}
</style>
<body>
<div id="header">
<img id="headerimg" src="doc.jpg" />
</div>
<div id="wrap">
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Services
<ul>
<li>Food</li>
<li>Hospital</li>
<li>Medical</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
<div id="content1"> </div>
<div id="content2"> </div>
</div>
</body>
I am new to css. My dropdown menu is hiding behind the div. Please help me to find the problem.
Please add below css
ul {position: relative; z-index: 99999; }
Just add position:relative in "#wrap #menu ul li" . I think your problem was solved. If you have any other problem then put it here.
Thanks for asking.
I'm trying to vertically align the shopping cart image and have it change on hover as well. I checked the other answers but they all seem involve changing the height.
JSFIDDLE http://jsfiddle.net/omarel/8agvv15s/
.navlogo, .navlogo_strip {
z-index:99;
}
.navlogo img {
width:120px;
margin:10px 10px 10px 10px;
}
.navlogo_strip img {
width:50px;
margin:10px 10px 10px 10px;
}
.floatleft {
float:none;
}
.floatright {
float:none;
}
.nav_container ul li {
display: inline-block;
text-align: center;
line-height:90px;
}
.nav_container ul li a {
padding:50px 30px 50px 30px;
margin:0px;
cursor:pointer;
}
.nav_container ul {
/* margin-top:15px; */
margin-left:30px;
margin-top:0px;
}
.nav_container {
text-align: center;
width:100%;
font-size:16px;
letter-spacing: -1px;
}
.nav_container ul li:hover {
/* not needed background-color:#08298A; */
}
.nav_container ul li:hover a {
color:#fff;
background-color:#08298A;
}
header {
width:100%;
margin: auto;
min-width:420px;
/* 0 0 8px rgba(0,0,0,0.1)*/
}
HTML
<div class="navlogo floatleft">
<img src="logo.png" />
</div>
<div class="desktopnav">
<div class="floatleft">
<div class="nav_container">
<ul>
<li>Browse</li><li>Sell</li>
</ul>
</div>
</div>
<div class="floatright">
<div class="nav_container">
<ul>
<li><img src="http://s10.postimg.org/s09rtjls5/cart.png?noCache=1430871415" /></li><!-- <li>Profile</li> --><li>Sign out</li>
</ul>
</div>
</div>
</div>
<div style="clear:both;"></div>
</header>
Use background-position property in CSS allows you to move background image in main element.
Source: Link
There is a good explanation and solution of this here: http://css.maxdesign.com.au/listutorial/master.htm
It says that using list-style-image results in inconsistent placement of the image with different browsers. Then it explains how to use background images for the bullets for a better result.
Source: CSS ul li image to align with text
Hi there i had a nav bar which was working perfectly. Then i added a lightbox effect. Both work perfectly however in my css they are messing up. When i added some css to lightbox effects to the div it messes up my navigation bar. I think its something to do with the a tag. My code is below
Html:
<div id="nav">
<ul>
<li>Home</li>
<li>Regsiter</li>
<li>Rules</li>
<li>Photo's</li>
<li>Contact Us</li>
</ul>
</div>
<div class = "lightbox">
<img src="images/image1t.jpg" />
<img src="images/image2t.jpg" />
<img src="images/image3t.jpg" />
<img src="images/image4t.jpg" />
<img src="images/image5t.jpg" />
<img src="images/image6t.jpg" />
</div>
CSS:
#nav ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
#nav ul li
{
float:left;
}
#nav a:link,a:visited
{
display:block;
width:163.2px;
height: 35px;
font-weight:bold;
color:#FFFFFF;
background-color:#181818;
text-align:center;
text-decoration:none;
text-transform:uppercase;
line-height: 35px;
}
#nav ul li a:hover
{
background-color:#989898;
}
//Below is the lightbox CSS
a
{
border:3px solid #ccc;
display:block;
float:left;
margin:10px;
}
a img
{
margin:3px;
}
a:hover
{
border:3px solid #666;
}
img
{
display:block;
}
Like i said. If i delete the light box CSS the nav bar works fine. When i add it, the border on the nav bar and everything changes. I think it something to do with them both having the a tag but not sure. Thanks for the help.
Apply the lightbox CSS only to elements inside the lightbox:
.lightbox a{
border:3px solid #ccc;
display:block;
float:left;
margin:10px;
}
.lightbox a img{
margin:3px;
}
.lightbox a:hover{
border:3px solid #666;
}
.lightbox img{
display:block;
}
Demo: http://jsfiddle.net/42BjW/ (I don't have the lightbox JS, so obviously the lightbox itself is not working)
just add .lightbox in front of your later classes , the lightbox css
Hi I have a dropdown button that when you hover it, it drops down some links to pages. I want those links to be the same size as the width of the button.
The button size is 100% width of the content, so it varies. How do I make the size of the drop down items the same size as the button with CSS?
<style type="text/css">
#button { /* Box in the button */
display: block;
width: 190px;
}
#button a {
text-decoration: none; /* Remove the underline from the links. */
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
list-style-type: none;
}
#button ul {
list-style-type: none; /* Remove the bullets from the list */
}
#button .top {
display:block;
width:100%;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase; /* The button background */
}
#button ul li.item {
display: none; /* By default, do not display the items (which contains the links) */
}
#button ul:hover .item { /* When the user hovers over the button (or any of the links) */
display: block;
border: 1px solid black;
background-color: #6CC417;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
.container
{
text-align:center;
}
.center_div
{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:90%;
background-color:#d0f0f6;
text-align:left;
padding:8px;
}
</style>
</head>
<body bgcolor="#FFFFFF">
<p><img src="Screen%20shot%202010-07-11%20at%204.07.59%20PM.png" width="211" height="86" alt="idc">
<ul>
<li>
<div id="button">
<ul>
<li class="top">OtherOverflow Sites</li>
<li class="item">Visit serverfault</li>
<li class="item">Visit superuser</li>
<li class="item">Visit doctype</li>
</ul>
</div>
</li>
<li>
<div id="button">
<ul>
<li class="top">OtherOverflow Sites</li>
<li class="item">Visit serverfault</li>
<li class="item">Visit superuser</li>
<li class="item">Visit doctype</li>
</ul>
</div>
</li>
</ul></p>
<div class="container">
<div class="center_div">
<h1>Hello World!</h1>
<p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p>
</div>
</div>
</body>
Three things:
#button ul:hover .item needs width set to 100%.
#button ul:hover .item {any of the links) */
display: block;
width:100%;
border: 1px solid black;
background-color: #6CC417;
}
.
All links are set to 120px!
a:link,a:visited {
display:block;
width:120px;
...
Delete the width:120px;
As meder said, Do not use an id, use a class. And the code has the same id multiple times -- which is illegal.
So: <div id="button"> becomes: <div class="DropDwnMenuBtn">.
You have multiple button ids. Use classes for multiple elements.
Shouldn't you just need #button a { display:block; }? It's hard to tell when you don't have a visual.