What I'm trying to do to design a vertical CSS menu like this one . on the right of this site
. I've two problems .
How can I add an image in the menu item .
How can I MAKE the BORDER RADIUS of all the item on the top and on the bottom NOT for each one .
That's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Buttons</title>
<style>
.button {
width: 400px;
height: 100px;
line-height: 100px;
color: #C0C0C0;
text-decoration: none;
font-size: 50px;
font-family: helvetica, arial;
font-weight: bold;
display: block;
text-align: center;
position: relative;
padding-bottom:1px;
/* BACKGROUND GRADIENTS */
background: #F5F3F4;
/* BORDER RADIUS */
/* -moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; */
/* TEXT SHADOW */
text-shadow: 1px 1px 1px black;
/* BOX SHADOW */
-moz-box-shadow: 0 1px 3px black;
-webkit-box-shadow: 0 1px 3px black;
box-shadow: 0 1px 3px black;
}
/* WHILE HOVERED */
.button:hover {
color: #A8A8A8;
-moz-box-shadow: 0 2px 6px black;
-webkit-box-shadow: 0 2px 6px black;
}
/* WHILE BEING CLICKED */
.button:active {
-moz-box-shadow: 0 2px 6px black;
-webkit-box-shadow: 0 2px 6px black;
}
</style>
</head>
<body>
Profile
Privacy
Services
Avatar
Language
</body>
</html>
First, you should adjust your html to include a list as follows (notice I also added id attributes):
<ul>
<li> Profile </li>
<li> Privacy </li>
<li> Services </li>
<li> Avatar </li>
<li> Language </li>
</ul>
Then, to add the image use the following css:
a#profile-btn {
background-image:url(/image_path/profile.png);
}
a#privacy-btn {
background-image:url(/image_path/privacy.png);
}
a#services-btn {
background-image:url(/image_path/services.png);
}
a#avatar-btn {
background-image:url(/image_path/avatar.png);
}
a#language-btn {
background-image:url(/image_path/language.png);
}
And finally the rounded borders:
ul {list-style:none;}
ul li:first-child a {
-moz-border-radius-topleft: 25px;
-moz-border-radius-topright: 25px;
-webkit-border-radius-topleft:25px;
-webkit-border-radius-topright:25px;
border-top-right-radius:25px;
border-top-left-radius:25px;
}
ul li:last-child a {
-moz-border-radius-bottomleft: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-radius-bottomleft:25px;
-webkit-border-radius-bottomright:25px;
border-bottom-right-radius:25px;
border-bottom-left-radius:25px;
}
EDIT: This code is intended to work with all your other provided css, as long as you replace the HTML as shown.
Using pseudo classes like so:
(If your nav is a list and the button class is on the list element)
li.button:first-child {
-moz-border-radius: 4em 4em 0 0;
border-radius: 4em 4em 0 0;
}
li.button:last-child {
-moz-border-radius: 0 0 4em 4em;
border-radius: 0 0 4em 4em;
}
Use lists for that:
<ul id="main-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
And the CSS:
ul li {
float: left;
display: inline;
text-decoration: none;
font-size: 20px;
font-family: helvetica, arial;
font-weight: bold;
display: block;
text-align: center;
position: relative;
margin: 0 0 0 30px;
background: #F5F3F4;
-moz-border-radius: 10px 10px 0 0; /* 10 top left, 10 top right. 0 for the rest */
-webkit-border-top-radius: 10px; /* This will select only the top part */
border-radius: 10px 10px 0 0;
text-shadow: 1px 1px 1px black;
-moz-box-shadow: 0 1px 3px black;
-webkit-box-shadow: 0 1px 3px black;
box-shadow: 0 1px 3px black;
padding: 15px 30px;
}
ul li a { color: #C0C0C0; text-decoration: none; }
Hope you get the point. You can have a preview here: http://www.jsfiddle.net/UtNA8/
You could use a containing element for the links, ideally one that can apply a semantic relationship to its contents, I've used a ul (since it's basically a non-ordered list) and style that, rather than trying to style specific instances of an otherwise non-grouped set of elements:
html
<ul>
<li> Profile </li>
<li> Privacy </li>
<li> Services </li>
<li> Avatar </li>
<li> Language </li>
</ul>
css
ul {
width: 12em;
border-radius: 1em;
overflow: hidden;
}
ul li {
padding: 0.5em;
background-color: #eee;
}
JS Fiddle demo.
If you're targeting browsers with reliable implementations of last-child you could also use the :first-child and :last-child pseudo elements:
css:
ul li {
width: 12em;
padding: 0.5em;
background-color: #eee;
}
ul li:first-child {
-webkit-border-top-radius: 1em;
-moz-border-radius: 1em 1em 0 0;
border-radius: 1em 1em 0 0;
}
ul li:last-child {
-webkit-border-bottom-radius: 1em;
-moz-border-radius: 0 0 1em 1em;
border-radius: 0 0 1em 1em;
}
JS Fiddle demo
I'd be wary of first-child, last-child pseudo selectors. Obviously they are great ideas, and you should use them because they're a part of the standard, but at the same time you'll need to make some allowances for browsers that don't properly adhere to standards - ahem MS. Same goes for the border-radius properties obviously. Oh and finally, you might want to include your icon graphics as tags inside of your links (that is, if you want them to show up on any browser that doesn't support css properly, and you feel their content is of particular note).
Related
Whatever I do I can't get the navigation to center.
I have a wrapper and the navigation bar has an underline across this div. The top of the buttons are rounded of so it just looks like they are coming out of the bottom border.
I've tried searching for a good way to center them. A lot of people use margin auto or margin 0 auto. Other people also use this in combination with display inline-block but then the border gets cut off from the nav buttons.
This is my HTML:
<div id="nav">
<ul>
<li>Home</li>
<li>About me</li>
<li>Portfolio</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
The CSS:
#nav {
margin: auto;
color: #FFFFFF;
width: 100%;
border-bottom: 1px solid #000000;
}
#nav ul {
margin: auto;
padding-top: 6px;
padding-bottom: 8px;
padding-left: 5px;
list-style:none;
}
#nav li {
display: inline;
width: 120px;
margin:0;
padding: 10px 5px;
border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(100,100,100)), to(rgb(132,132,132)));
background : -moz-linear-gradient(top, rgb(200,200,200), rgb(232,232,232));
}
#nav li:last-child {
border-right: none;
}
#nav a {
text-decoration: none;
color: #383838;
font-weight: bold;
font-size: 20px;
padding-right: 10px;
padding-left: 5px;
}
For the ease for you i've also put it in a js fiddle http://jsfiddle.net/ge702rna/
Really hope someone can help me out because i've got my hands tied up in my hair right now.
Probally i'm just doing something simple wrong.
Simply add text-align:center;
#nav {
color: #FFFFFF;
width: 100%;
border-bottom: 1px solid #000000;
text-align:center; /* <-- ADD THIS LINE */
}
I just change the width in
#nav {
margin: auto;
color: #FFFFFF;
width: 77%; //changed
border-bottom: 1px solid #000000;
}
Are you looking for this..DEMO
I have an issue with extra padding in chrome.
Everything works fine on Firefox and IE, but chrome adds a 2px padding on the bottom between the "ul" tag and the "nav" tag.
Here's the HTML code :
<nav id="mainMenu">
<ul id="menuLinks">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
And the css :
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 1.3em;
}
nav#mainMenu {
height: 35px;
background-color: #F5F5F5;
margin-bottom: 10px;
border-bottom: 1px solid #C2C2C2;
border-radius: 5px 5px 0px 0px;
}
nav#mainMenu ul {
float: left;
padding-top: 15px;
list-style-type: none;
}
nav#mainMenu ul li {
padding-left: 5px;
display: inline;
}
nav#mainMenu ul li a {
color: black;
font-size: 0.9em;
font-weight: bold;
background-color: #FFFFFF;
padding: 5px 15px 4px 15px;
border-top: 1px solid #C2C2C2;
border-left: 1px solid #C2C2C2;
border-right: 1px solid #C2C2C2;
border-radius: 4px 4px 0px 0px;
}
This is how it seems :
Chrome :
Firefox :
You can also test it here : http://jsfiddle.net/ozpofj6o/
As you can see, firefox renders correctly, but not chrome.
Any ideas ?
Your problem is related to using font-size:0.9em in the anchors. This leaves you dependent on font rendering mechanisms on how high they exactly become, which happens to be 2 pixels shorter in Chrome with its current text rendering engine. You should specify an exact height for the anchors if you put exact height (35px) on the container and still want to get predictable results.
You're now counting on 0.9em and 9 pixels of padding on the a to 'accidentally' add up to 35 pixels, which it may or may not. It may even break in the next version of Firefox, or on a different platform.
I have been having trouble with one of my divs for some reason, even though the nav tags are nested within it when I inspect element with firefox or in chrome the div seems to be completely on its own.
<div class="nav">
<nav class="social">
<ul>
<li><img class="icon" src="assets/facebook.png" alt=""></li>
<li><img class="icon" src="assets/google.png" alt=""></li>
<li><img class="icon" src="assets/linkedin.png" alt=""></li>
<li><img class="icon" src="assets/twitter.png" alt=""></li>
<li><img class="icon" src="assets/wordpress.png" alt=""></li>
</ul>
</nav>
<!-- #include _nav -->
</div>
Maybe this is something to do with the css styling for it so here is the css too. I have a feeling it might be something to do with hammer for mac but it seems to work in other respects.
.head {
padding-top: 25px;
overflow: hidden;
padding-bottom: 10px;
// background-color: yellow;
}
h1 {
margin: auto;
text-align: center;
color:white;
font-family: sans-serif;
font-size: 35px;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
padding-bottom: 10px
}
.banner {
height: 200px;
background-color: red;
float: left;
margin: 0px;
}
.callout {
height: 200px;
background-color: green;
float: right;
margin-left: 5px;
margin-right: 0px;
}
.nav {
padding-bottom: 10px;
}
.headnav {
padding-top: 10px;
float: left;
overflow: hidden;
}
nav li {
display: inline;
padding-right: 15px;
}
nav li:last-child {
padding-right: 0px;
}
nav li a {
text-decoration: none;
color: white;
clear: both;
font-size: 20px;
padding-bottom: 4px;
}
nav li a:hover {
color: gray;
}
.icon {
width: 45px;
height: auto;
}
.social {
float: right;
overflow: hidden;
}
.social li {
display: inline;
}
Thanks in advance.
As both your nav elements (social/headnav) contained within the div element (confusingly named "nav") are floated to the right and the left these are removed from the normal document flow (see Mozilla Developer Network for more), and thus the div won't appear to "wrap around" or contain the elements when inspected in developer tools.
These elements are however still children of the div on the Document Object Model (DOM).
Normally an element that only contains floated children would have a height of 1px but in this case it is 10px due to the padding you have applied. This behaviour can cause a problem in terms of defining layout, for example margin below the parent, or styling like background pattern, colour or borders.
It is however entirely normal behaviour and not something you have done wrong.
There are several solutions to clearing floats so that the parent element area is affected by the floated children.
Adding another element after the floated elements with style="clear: both";
<br style="clear: both;" />
Adding the style overflow: hidden to the parent container.
Using one of the clearfix methods listed on CSS tricks
I have made a navigation bar using <ul> and <li>
I would like to customize each tab with border, gradient etc.
Where should it be applied?
My CSS styling tend to affect only the letters, not anything else.
CSS
#nav {
width: 100%;
margin: 20px 0px 20px 0px;
}
#nav ul {
padding: 12px 0px 12px 0px;
border-top: solid black 1px;
border-bottom: solid black 1px;
}
#nav ul li {
display: inline;
margin-left: 50px;
font-weight: bold;
background-color: grey;
}
HTML
<div id="nav">
<ul>
<li>Home</li>
<li>Files</li>
<li>Info</li>
<li>About</li>
</ul>
</div>
'a' tags inside of a styled tag (such as an 'li' tag) will not pick up any of the styles you set. They want their own styles. You will need to move all the 'li' styles to the 'a' tag and then put a display:block; on the 'a' tag.
#nav {
width: 100%;
margin: 20px 0px 20px 0px;
}
#nav ul {
padding: 12px 0px 12px 0px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#nav ul li {
display: inline;
margin-left: 10px;
width:50px;
height:20px;
line-height:20px;
font-weight: bold;
background-color: grey;
}
a {
display: block;
// then whatever other rules you want to apply: width, height, border, pink flowers, etc
}
Please help me cut the following navigation bar using CSS2.1, with shadow, rounded borders and without spoiling the layout if you zoom-in/zoom-out:
Already two days I have been working on it, and could not find any way which will look the same look while zooming...
EDIT:
need to be done with CSS2.1
right and left borders are rounded + have shadow (right left correspondingly)
there is a shadow on bottom as well
Should be simple enough.
<div id="navbar">
NewsBusiness......Deals
</div>
CSS:
#navbar > a {
padding: 10px;
box-shadow: 4px 4px 16px black;
color: white;
}
#navbar > a:first-child { border-radius: 8px 0px 0px 8px; }
#navbar > a:last-child { border-radius: 0px 8px 8px 0px; }
It's a pretty simple solution. You can use just css. I used jQuery to assing the colors but it's a straightforward process...
http://jsfiddle.net/elclanrs/QtLv5/2/
html
<ul>
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
<li>Option4</li>
<li>Option5</li>
</ul>
css
li { float: left; }
a {
display: block;
padding: .5em 1em;
text-decoration: none;
color: black;
font: bold 15px Arial;
}
/* If you assign unique ids to your menu items you can do */
#item { background: red; }