I have a question from my last post.
How to center the floating element?
and I found out my problem is from the <header> tag before my #menu tag.
If I remove everything in the header tag, it seems I can center my item1 to item3 links.
However, if I add them back, my items menu will be a bit left instead of the center.
Here is my jsfiddle.
//I want to center item 1 to item 3 links in my page...
http://jsfiddle.net/yZ4va/14/
Thanks for the help!
Like this
DEMO
CSS
body{
background-color: green;
width: 500px;
margin: 0 auto;
color: #000305;
}
a{
text-decoration: none;
color:white;
}
/* Headings */
h2 {font-size: 1.8em} /* 22px */
h2 {font-size: 1.5em} /* 22px */
h3 {font-size: 1.5em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
header#link{
text-align:center;
margin:0 auto;
}
header {
margin:.8em;
height:50px;
}
header ul{
margin:0;
padding:0;
text-align:center;
}
header li{
list-style: none;
font:bold .6em arial;
display:inline;
margin: .3em;
padding: 1.3em;
background-color: #A8A8A8;
}
section#menu{
text-align:center;
margin:0 auto;
}
nav ul{
display: inline-block;
background-color: red;
margin:0;
padding:0;
}
nav ul li{
list-style: none;
font:bold .6em arial;
float: left;
margin: .3em;
padding: 1.3em;
background-color: #A8A8A8;
}
Related
My code is the following:
wrapper, wrapper2, content, footer, nav {
display: block;
}
html {
width: 100%;
height:100%;
margin:0;
padding:0;
background-image:url('../images/gdmm.jpg');
font-family: 'TitilliumWeb-ExtraLight';
font-weight:900;
}
body{
margin:0;
}
#font-face {
font-family: 'TitilliumWeb-SemiBold';
src: url('../TTfont/TitilliumWeb-SemiBold.eot');
src: local("Grandesign Regular"), url("../TTfont/TitilliumWeb-SemiBold.ttf") format("truetype"); /* non-IE */
font-family: 'TitilliumWeb-ExtraLight';
src: url('../TTfont/TitilliumWeb-ExtraLight.eot');
src: local("Grandesign Regular"), url("../TTfont/TitilliumWeb-ExtraLight.ttf") format("truetype"); /* non-IE */
}
h1 {
font-weight: bold;
font-size: 32px;
margin-left:auto;
border-bottom: 1px dashed rgb(221, 221, 221);
font-weight: 300;
line-height: 1.4;
padding: 2px 25px;
font-family: 'TitilliumWeb-SemiBold';
}
h1, h2, h3, h4, h5, h6 {
font-family: "Titillium Web","Source Sans Pro",Helvetica,Arial,serif;
}
#pagewrap{
width: 100%;
margin: 0 auto;
}
#content{
width:1024px;
height:768px;
border-width:5px;
margin-top:100px;
margin-left:auto;
margin-right:auto;
word-wrap:break-word;
background: rgba(252, 252, 255, 0.8);
overflow:hidden;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
word-wrap:break-word;
}
#contentinner{
width:980px;
height: 600px;
background-color: rgb(252, 252, 255);
margin-top:30px;
margin-left:auto;
margin-right:auto;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
word-wrap:break-word;
}
#text{
font-size: 1.2rem;
font-weight: 300;
line-height: 1.6;
padding: 5px 10px;
word-wrap:break-word;
}
#navwrapper{
width: 100%;
height:50px;
background-color:#005b96;
padding:0;
text-align: center;
float:none;
margin:0;
text-decoration: none;
}
#navonderwrap{
width: 100%;
height:30px;
background-color:#FFFFFF;
padding:0;
text-align: center;
float:none;
margin:auto;
}
nav{
display: inline-block;
overflow: hidden;
word-spacing: 1em;
text-align: center;
margin:auto;
}
#navonder{
display: inline-block;
overflow: hidden;
word-spacing: 1em;
text-align: center;
margin:auto;
}
nav ul{
margin-right:20px;
padding:0;
width:auto;
}
nav ul li{
display:table-cell;
margin-right:20px;
}
nav li
{
display:inline;
}
nav li a
{
font-family:Arial;
font-size:14px;
float:left;
padding:0px;
border-bottom:1px;
text-decoration: none;
}
nav li a:hover {
display: block;
float: left;
background-color:#FFF;
padding-bottom:10px;
}
My issue is that when you hover on the menu it pushes the entire thing down all I want is it to look as if it has the same color as the one below, I can't figure out why.
Thanks in advance!
this comes from the padding-bottom:10px you apply.
In addition to that you say display the link as a block and you make it float... so you can remove the display:block; it is useless in that case.
In it's default state the <a> has no padding, but in it's hover state it has padding-bottom: 10px;.
In order to make it look like it joins the white bar below, you'll need to add:
nav ul {
margin-bottom: 0; /* to reset the default */
}
nav li a {
font-family: Arial;
font-size: 14px;
float: left;
/* padding: 0px; REMOVE */
padding-bottom: 10px; /* ADD */
border-bottom: 1px;
text-decoration: none;
}
nav li a:hover {
/*display: block; REMOVE (unnecessary) */
/* float: left; REMOVE (because it's already set on default state) */
background-color: #FFF;
/* padding-bottom: 10px; REMOVE (because it's already set on default state */
}
nav li a {
padding: 10px; //Add
}
nav li a:hover {
background-color: #FFFFFF;
display: block;
float: left;
padding-bottom: 10px; /// Remove this
}
Remove padding bottom
I have an header with 100% width, and a nav inside header with 980px
Now i want to give the position as fixed for both header and nav.
I have tried with the following code but could'nt get what i wanted to
Please help me,
my header.css
width:100%;
height:60px;
background: #ffffff;
position:fixed;
z-index:999;`
and my nav.css
background: #ffffff;
height: 60px;
text-align:center;
position:fixed;
z-index:99;
.nav ul
margin:0;
padding:0;
.nav li
display: inline-block;
list-style-type: none;
vertical-align:middle;`
.nav li a
font-size: 16px;
color: black;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
If the nav is inside the header you don't need position:fixed in your nav.css, you should also remove the z-index. A clearer description of the problem and the html you're using would be helpful if that doesn't help.
#Fastnto, it's something like this that you want?
http://jsfiddle.net/alexandrecanijo/NBp8F/
I've changed some parts of your original CSS in order to show the header (#ccccccc) and nav (#000000) and added the .content with enough lorem ipsum so that you are able to see the nav.
But, the CSS might be cleaned and refactored in some parts... Didn't had a change to do this...
Hope this helps.
html,body, p {
margin: 0;
padding: 0;
border: 0;
font: 14px arial;
}
.header {
width: 100%;
height: 80px;
background: #cccccc;
position: fixed;
z-index:999;
margin: 0;
clear: both;
top: 0;
}
.nav {
background: #000000;
height: 60px;
text-align:center;
z-index:99;
}
.nav ul {
margin:0;
padding:0;
}
.nav li {
float: left;
list-style-type: none;
}
.nav li a {
font-size: 16px;
color: #fe6700;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
}
.nav li a:hover {
color: #000000;
background: #fe6700;
}
.content {
margin-top: 80px;
}
I have navigation links on my home page that I want black text on a pink background. I want the text to be black in all link variations, but the default color of blue still appears on a link in its normal state. It is black when the link is visited. I have tried different remedies (adding !important, changing the order of the css, using the hexidecimal code for black instead of the word black) but nothing has solved the problem. This is the code right now. What am I doing wrong?
body{background-color:#CC6699}
#header { border: medium dotted #000000;
padding: 20px 0px 20px 0px;
color: black;
font-family: Broadway;
background-color: aqua;
text-align: center;
height: 250px; }
#logo { padding-left: 30px; float:left;}
#wrapper {width:900px; margin:0 auto; background-color:#ffffff; color:black;}
#bar {
background-color: #000000;
height: 200px;}
#content {
margin: 0px;
padding: 10px 0px 10px 0px;
font-family: Verdana;
font-size: large;
text-align: center;
background-color: #ffffff;}
#nav {
width: 900 px;
margin: 0 0px 0 0px;
overflow: hidden;}
#nav ul li {
display: inline;}
#nav ul {
width:100%;}
#nav li {
border-style: solid;
border-width: thick;
border-color: #00FFFF;
margin: 40px 10px 40px 10px;
font-family: "Arial Rounded MT Bold";
font-size: large;
padding: 10px 30px 10px 30px;
background-color: #CC6699;
text-align: center;}
#nav a:{
color: #000000; margin: 10px;}
#nav a: link { color:black;}
#nav a:visited {color:black}
#nav a:focus { color:black;}
#nav a: hover {color:black;}
#nav a:active {color:black;}
img {
padding: 20px 30px 20px 30px;}
Please change the wrong code:
#nav a:{
color: #000000; margin: 10px;}
#nav a: link { color:black;}
#nav a: hover {color:black;}
To:
#nav a{ /* remove : after a */
color: #000000; margin: 10px;}
#nav a:link { color:black;} /* remove space after a: */
#nav a:hover {color:black;} /* remove space after a: */
I've created a drop down hover list in the UL tags using CSS, but before I can get the mouse down over the links, they disappear. How can I stop this?
This is my code:
#header {
margin: 0px;
padding: 0px;
width: 100%;
background-color: red;
height: 30px;
box-shadow:inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
text-align: center;
}
#header ul {
margin: 0px;
padding: 0px;
}
#header ul li {
display: inline;
text-align: center;
position: relative;
}
#header ul li a {
text-decoration: none;
font-size: 22px;
color: white;
font-weight: bold;
line-height: 30px;
margin-left: 10px;
}
#header ul ul {
position: absolute;
visibility: hidden;
top: 31px;
}
#header ul li:hover ul {
visibility: visible;
}
#header ul li a:hover {
text-decoration: underline;
font-size: 22px;
color: black;
}
Try adding height
#header ul li a{
text-decoration:none;
font-size:22px;
color:white;
font-weight:bold;
height:30px;
line-height:30px;
margin-left:10px;
}
Since your main menu is positioned at the very top of the page, it goes from 0 pixels to 30 pixels and you've left a 1 pixel gap before starting the submenu at 31 pixels. Either changing the main menu height to 31px or the top of the submenu to 30px should fix your problem.
I'm making a mobile website and having some difficulty with making a few changes to my menu bar. I'm not an expert on this field so your help would be greatly appreciated.
Below is the codes to the menu bar.
CSS
<style type="text/css">
* { padding: 0; margin: 3; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
ul { list-style: none; }
ul li {
float: left;
padding: 1.5px;
position: relative;
margin: auto;}
ul a { display: table-cell; vertical-align: middle; width: 75%; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
ul a:hover {background-color:#5A87B4; }
HTML
<div>
<ul>
<li>
<div align="center"><a href="../Software.html" >Software</a>
</div>
</li>
<li>
<div align="center">Products</div>
</li>
<li>
FAQ</li>
</ul>
This is a basic menu bar and i want to adjust this to the center and also have horozontal lines to break each button apart while all this is centered and fits a 100% on a mobile screen. All your help is greatly appreciated
EDIT: Its like having some space after each button but instead theres a horizontal line
EDIT: Changed the width from 75% to 80px. Note that i also changed the div ID of my code because i was having some other problems with identification. :) Hope this wont confuse you
#menubar * { padding: 0; margin: 2; }
body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
#menubar ul{text-align:center;}
#menubar ul li { display:inline-block; padding: 2px; position: relative; }
#menubar ul a { display: table-cell; vertical-align: middle; width: 80px; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
I added below lines in your css code. I hope this is what you want.
ul{
display:inline-block;
overflow:hidden;
}
div{
text-align:center;
}
li:after{
border-right:50px solid black;
content:"";
position:relative;
left:10px;
top:-27px;
z-index:-1;
display:block;
height:1px;
}
li:last-child{
margin-right:-14px
}
Working Fiddle
Now just remove float:left in your li and add display:inline-block; and add text-align center in your ul tag
as like this
ul{
text-align:center;
}
ul li{
display:inline-block;
vertical-align:top;
float:left; // remove this line
}
Demo
from your current css remove float:left; on li's and add text-align:center; and it should work:
ul li {
text-align: center;
padding: 1.5px;
position: relative;
margin: auto;
}
here is a working JSFiddle.
Update
In that case you can change the CSS to.
ul li{
text-align:center;
display:inline-block;
}
ul li:before {
content: " - ";
}
ul li:first-child:before {
content: none;
}
Here is a working JSFiddle