I am just a beginner and I am learning. So I would like to know the correct way of achieving this.I have created three buttons and added it to the header. I want equal spaces between them. What is the best way or correct way to do it? Is margin a good way to do it?
My CSS Style
.MainHeader{
height:100px;
width:688px;
padding:inherit;
border:1px solid blue;
background-color:black;
}
.BodyContainer{
height:788px;
width:688px;
padding:inherit;
border: 1px solid blue;
background-color:white;
}
.MainFooter{
height: 100px;
width: 688px;
padding:inherit;
border: 1px solid blue;
background-color:black;
}
.Button{
display:block;
height:30px;
width:150px;
padding :0px 5px;
background:darkorange;
border:1px solid black;
color:white;
text-align:center;
font:bold 14px/30px arial;
background: linear-gradient(white, blue);
border-radius: 5px;
}
a.Button{
text-decoration: none;
}
a.Button:hover{
background: grey;
}
ul{
padding: 0;
}
li{
list-style:none;
display:inline-block;
margin-right: 8.6px;
margin-left: 8.6px;
}
My HTML code
<div class="MainHeader">
<div>
<div>
<ul>
<li><a class="Button" href="http://www.google.com">Homepage</a></li>
<li><a class="Button" href="http://www.google.com">Search</a></li>
<li><a class="Button" href="http://www.google.com">Contact Us</a></li>
</ul>
</div>
</div>
</div>
there is many ways to do that.
one is - making some margin:
li{
list-style:none;
display:inline-block;
margin-right:10px;
}
there is no such thing like "correct way" of doing such thing - but usual way is setting a margin
Related
This question already has answers here:
div get shrinked when using postion: fixed
(3 answers)
Closed 5 years ago.
I'm new to HTML and CSS. I'm trying to do a website, and I'm starting by the navbar, but whenever I try to do position:fixed; my navbar shrinks.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webhosting</title>
<link rel="stylesheet" type="text/css" href="cssone.css"/>
</head>
<body>
<div class="body_div">
<!--NAVBAR-->
<div class="navbardiv">
<ul class="navbar_ul">
<li class="navbar_li_Contact">Contact</li>
<li class="navbar_li_WebHosting"><a class="active" href="#index.html">Webhosting</a></li>
<li class="navbar_li_About">About</li>
</ul>
</div>
<div>
</body>
</html>
CSS
body{
background-image:url(imgs/background3.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}
.navbardiv{
font-family:Rockwell;
font-size: 30px;
}
.navbar_ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
border-radius:5px;
border-left:2px solid white;
border-right:2px solid white;
border-top:2px solid white;
border-bottom:2px solid white;
margin: -8px;
width: auto;
min-width:416px;
height:80px;
display: flex;
justify-content: space-between;
/*position:fixed;*/
}
li {
float:left;
padding:15px 100px;
}
li a{
display:block;
color:white;
text-align:center;
padding:8px 16px;
text-decoration: none;
border:2px solid white;
/*border-bottom:2px solid white;*/
border-radius:5px;
}
li a:hover{
background-color:gray;
}
try width: 100%; in .navbar_ul in css... that'll work.. ;)
You can use width: 100% or left: 0; right: 0;, depending on which works better for you.
body{
background-image:url(imgs/background3.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}
.navbardiv{
font-family:Rockwell;
font-size: 30px;
}
.navbar_ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
border-radius:5px;
border-left:2px solid white;
border-right:2px solid white;
border-top:2px solid white;
border-bottom:2px solid white;
margin: -8px;
left: 0; right: 0;
min-width:416px;
height:80px;
display: flex;
justify-content: space-between;
position:fixed;
}
li {
float:left;
padding:15px 100px;
}
li a{
display:block;
color:white;
text-align:center;
padding:8px 16px;
text-decoration: none;
border:2px solid white;
/*border-bottom:2px solid white;*/
border-radius:5px;
}
li a:hover{
background-color:gray;
}
<!DOCTYPE html>
<html>
<head>
<title>Webhosting</title>
<link rel="stylesheet" type="text/css" href="cssone.css"/>
</head>
<body>
<div class="body_div">
<!--NAVBAR-->
<div class="navbardiv">
<ul class="navbar_ul">
<li class="navbar_li_Contact">Contact</li>
<li class="navbar_li_WebHosting"><a class="active" href="#index.html">Webhosting</a></li>
<li class="navbar_li_About">About</li>
</ul>
</div>
<div>
</body>
</html>
Just add this css to your #navbardiv
.navbardiv{
position: fixed;
top: 0;
}
It should work
http://liveweave.com/BNM1Jj
I try to put both li element in same line occupying 50% of width but i could not get them in same line
i do not want to use table structure .
unable to put both li in same line why so ??
ul.primary_nav{
background-color:#494949;
}
ul.primary_nav li.selected{
background-color:#942F99;
color:#494949; float:left;
}
ul.primary_nav li{
display:inline-block;
padding-top:5px;padding-bottom:5px;
width:50%;
}
ul.primary_nav li a{
display:block;
height:36px;
text-align:center;
color:#c5c5c5;
font-size:13px;
text-shadow:0px 1px 0px #2a2a2a;
text-decoration:none;
font-weight:bold;
}
ul.primary_nav li a span.icon{
display:block;
margin:auto;
width:22px;
height:22px;
}
please tell what i am missing
Make the following change:
ul.primary_nav li.selected{
background-color:#942F99;
color:#494949;
float:left;
}
ul.primary_nav li{
display:inline-block;
padding-top:5px;padding-bottom:5px;
width:50%;
width:50%;
float:left;
}
Notice the float:left; that will get them on the same line.
Remove the whitespace between li elements and add box-sizing: border-box to ul.primary_nav li:
Demo
HTML:
<div class="moby_wrap">
<header>
<a id="logo" href="#">Header</a><br>
<ul class="primary_nav">
<li class="selected"><a><span class="icon about"></span>Rings & Pendants</a></li><li><span class="icon folio"></span>Earrings and Cufflinks</li>
</ul>
</header>
CSS:
ul.primary_nav li{
display:inline-block;
padding-top:5px;
padding-bottom:5px;
width: 50%;
box-sizing: border-box;
box-shadow:inset 0 0 1px #7d7d7d;
-webkit-box-shadow:inset 0 0 1px #7d7d7d;
border:solid 1px #921699;
border-radius:3px;
}
Option 1: (Which you might not want)
Make primary_nav rendered as a table & li as table cells
ul.primary_nav{
background-color:#494949;
border-radius:3px;
width:100%;
display:table;
}
ul.primary_nav li{
display:table-cell;
padding-top:5px;padding-bottom:5px;
width:50%;
width:50%;
box-shadow:inset 0px 0px 1px #7d7d7d;
-webkit-box-shadow:inset 0px 0px 1px #7d7d7d;
border:solid 1px #921699;
border-radius:3px;
}
Option 2:
Make li as float left with border none.
Then use another inside for styling.
ul.primary_nav li{
display:inline-block;
padding-top:5px;padding-bottom:5px;
width:50%;
border:none;
float: left;
}
I think that you could have a better result using divs elements instead a ul.
Take a look a this code:
HTML
<header>
<div>
Header
</div>
<div class="menuitem">
Link 1
</div>
<div class="menuitem">
Link 2
</div>
</header>
CSS
header {
width: 100%;
text-align: center;
background-color: red;
}
div.menuitem {
width: 50%;
float: left;
text-align: center;
background-color: orange;
height: 50px;
}
It's an easy html structure, less css to write and a code more readable (and also fluid content).
Check out this codepen.
I'm making a menu structure for mobile but I am not able to align in center my select option menu and my search input.
I'm trying with margin: 0 auto; but its not working, my select option and my search input are not getting to the center of my menu.
The #menu div have 300px of width, and I want that my select option menu and my input search have 226px of width and aligned at center of my #menu div but I'm not having sucess doing this.
Someone sees what is wrong here?
I have my example here:
http://jsfiddle.net/x5pb7mw4/1/
My html:
<section id="menu-container">
<nav id="menu">
<select id="select_menu">
<option value="menu" selected="selected" name="menu">- Menu -</option>
</select>
<ul class="dropDownMenu">
<li id="search_container">
<form id="search" method="post" enctype="multipart/form-data">
<input name="s" type="text" size="40" placeholder="Search..." />
<button type="submit" name="search"></button>
</form>
</li>
</ul>
</nav>
</section>
My css:
*
{
margin:0;
padding:0;
border:0;
outline:none;
}
body
{
min-width:320px;
}
#menu-container{
width:100%;
height:auto;
float:left;
z-index:7;
float:left;
background:brown;
border-bottom: 3px solid #ccc;
}
#menu{
width:300px;
height:auto;
margin:0 auto 0 auto;
}
#menu ul{list-style:none;}
#menu .dropDownMenu .item_menu{display:none;}
#select_menu{
margin:11px auto;
height:30px;
width:226px;
background:#ccc;
color:#2F3083;
}
#search_container{
float:right;
}
#search button[type="submit"] {
background: none;
cursor: pointer;
height: 22px;
position: absolute;
top: 15px;
right: 10px;
}
#search input[type="text"] {
font-size:13px;
background: brown;
border:2px solid #000;
text-indent: 0;
width:226px;
margin:0 auto 10px auto;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
color:#ccc;
}
Demo here
remove below style and add text-align:center to #menu
#search_container{
float:right;
}
Just add display:table to your #select_menu
#select_menu{
margin:11px auto;
height:30px;
width:226px;
background:#ccc;
color:#2F3083;
display: table;
}
And then add width: 100%; text-align: center; to your #search_container
#search_container{
width:100%;
text-align:center;
}
Add text-align: center; to your #menu
I got a menu bar on my website which is consisting of lists. The html looks like this:
<div id="menu">
<ul class="menu">
<li class="menu"><a class="menu" href="#">HOME</a></li>
<li class="menu"><a class="menu" href="#">MOSAIC</a></li>
<li class="menu"><a class="menu" href="#">SUCCESS</a></li>
<li class="menu"><a class="menu" href="#">MEMBERS</a></li>
<li class="menu"><a class="menu" href="#">CONTACT</a></li>
</ul>
</div>
And the css looks like this:
#menu {
margin-left: 10%;
border-top:1px solid white;
border-bottom:1px solid white;
left:0;
width:80%;
height:2.2em;
background:#576361;
overflow:hidden;
position:absolute;
}
ul.menu {
float:middle;
width:100%;
padding:0;
margin:0 auto;
list-style-type:none;
}
a.menu {
text-align:center;
float:left;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}
And my menubar looks like following at the moment:
It just takes 80% of the sites width, but the 5 elements doesn't take 20% of the 80% as expected. How can I fix my issue ? It would be also pretty awesome if you could explain to me how the correct answer is working if it is not obvious and self explaining.
My opinion is to use table-cell and apply the style in li element not in children ones like this:
#menu {
border-top:1px solid white;
border-bottom:1px solid white;
left:0;
width:80%;
height:2.2em;
background:#576361;
position:relative;
margin: 0 auto;
}
ul.menu {
width:100%;
padding:0;
margin: 0 auto;
list-style-type:none;
}
ul{
display:table;
}
li{
display:table-cell;
text-align:center;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-left:1px solid white;
vertical-align: middle;
}
fiddle
Any borders or padding will add to the width of the elements until you tell them not to with
box-sizing: border-box;
JSFiddle Demo
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#menu {
margin: 0 auto;
border-top:1px solid white;
border-bottom:1px solid white;
width:80%;
height:2.2em;
background:#576361;
overflow:hidden;}
ul.menu {
width:100%;
padding:0;
margin:0 auto;
list-style-type:none;
}
a.menu {
text-align:center;
float:left;
width:20%;
height:1.8em;
text-decoration:none;
color:white;
background-color:#576361;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}
You are using borders.
Borders add 2px to every element.
box-sizing: border-box;
Is the solution
http://jsfiddle.net/Hc3au/
You need to change the position of #menu to relative or add an wrapper containing the list. I'm also pretty sure there is no float: middle, just right and left ( and none and inherit ).
Also I do prefer the following:
ul.menu > li
{
width: 20%;
}
ul.menu > li > a
{
width: 100%;
}
Why do you use the menu class on every element?
<div id="header">
<div id="logo">
<h1>Look Around You</h1>
</div>
<div id="horNav">
<ul class="horNav">
<li class="horNav">HOME</li>
<li class="horNav">SUBMIT-CONTACT</li>
</ul>
<ul class="horNav-last">
<li class="horNav">TAGS</li>
</ul>
<ul class="advertisment">
<li>ABOUT</li>
<li>ADVERTISEMENT</li>
</ul>
</div>
</div>
css is:
#wrapper{
width:80%;
margin:0 auto;
min-width:920px;
}
#header, #logo{
width: 100%;
float:left;
}
#horNav{
background:black;
width: 80%;
color:white;
margin: 0 auto;
}
#horNav a{
background: black;
}
.horNav li{
float:left;
border-right:1px solid #828282;
}
.horNav-last li{
float:left;
}
.advertisment li{
float:right;
border-left:1px solid #828282;
}
#horNav a{
display:block;
padding:5px 10px;
color:white;
font-size: 13px;
}
#horNav a:hover{
background:#828282;
}
what happens is that unordered lists are colored black in separate corners and middle of #horNav is white as you can see it HERE but of course it needs to be all black. how to fix this?
#horNav {
overflow: hidden;
display: block;
width: 100%;
}
#horNav can be whatever width you want e.g. 80% as it is now, and if you want it to be centred you can reintroduce the margin: 0 auto;.