I have a page design with a menu as follows:
Cat1 | Cat2 | Cat 3 | Cat 4
When I hover the word Cat2, The bgcolor of the whole box of Cat2 changes to blue color. Also, whole cell needs to be clickable and linked to other page.
I can do that without having the symbol "|" by changing the bgcolor of the table cell and making width of the "a tag" to 100% and height of "a tag" to 30px. But I can't figure the way to add the delimiter symbol "|" in it.
Does anyone have any ideas about that?
Put a border-left in CSS? Or does it need to be a literal bar character?
You can use adjacent sibling selectors in CSS, by applying styles to elements based on the elements which immediately precede them you can create the menu dividers.
.menu a {
text-decoration: none;
padding: 10px;
}
.menu a + a {
border-left:solid 1px black;
}
By using this approach you can easily apply this styling to any of your menus by assigning class="menu".
<div class="menu">
Questions
Tags
Users
Badges
Unanswered
</div>
This meets all the requirements sans one; That the vertical bar must be shorter than the height of the link.
It may be easiest to achieve this with a background image on the < a > rather than using borders or pipes (|).
I did try something with spans inside the links, which would be shorter than the full height of the A, but I couldnt get it rendering cleanly.
You could also add pipes into the HTML itself, inside a span, and hide them on hover.
I know this wont work properly in all browsers, but hacks and workarounds are extra. :P
EDIT:: I added #Fistandantilus' adjacent selectors to this. makes for cleaner HTML.
<html>
<head>
<title>Menu Test</title>
<style type="text/css" media="screen">
ul.menu {
display:block;
margin:0;
padding:0;
height:30px;
}
ul.menu li {
display:block;
width:100px;
height:30px;
float:left;
}
ul.menu li a{
width:100%;
height:30px;
line-height:30px;
display:block;
text-align:center;
border-left:1px solid transparent;
}
ul.menu li + li a {
border-left:1px solid #000;
}
ul.menu li a:hover {
background-color:#0f0;
border-left:1px solid transparent;
}
ul.menu li:hover + li>a {
border-left:1px solid transparent;
}
</style>
</head>
<body>
<ul class="menu">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</body>
</html>
Navigation menus should be semantically marked up as lists. Using an unordered list is a very common practice for a menu such as this. See this example on Listamatic for a foundation to biuld from. To get the background color to be larger than the text you will simply need to add padding around the <a> tag.
You don't need to use tables, CSS is your friend for this kind of thing!
I am not a web designer and my html/css skills are a little rusty, but is something like this what you want?
<html>
<head>
<style type="text/css">
#menu {
text-align: center;
}
#menu a {
text-decoration: none;
padding: 5px 40px;
}
#menu a:hover {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div id="menu">
Cat 1 |
Cat 2 |
Cat 3 |
Cat 4
</div>
</body>
</html>
Related
so I was beginning work on an html/css document and can't find out exactly why the text isn't positioned correctly in my menu bar. I've tried to put the text align: left; and margin: 0 auto and padding: 0 and none of these seem to work. I've also looked through a good amount of the questions and run my html/css through validator.w3.org. If anyone is able to help me out that would be great!
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title!</title>
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site_title">
<h2><span>the problem</span></h2>
</div>
<div id="menu">
<ul>
<li>is </li>|
<li>that </li>|
<li>my </li>|
<li>text </li>|
<li>isn't centered</li>
</ul>
</div>
</body>
</html>
css:
body
{
font-family: "Arial", "Helvetica", "Avant-Garde";
font-size: 14px;
color:black;
text-align: left;
background-image: white;
margin: 50px 40px 20px 100px ;
}
div#site_title
{
font-size: 21px;
letter-spacing: 1.5px;
}
div#menu ul a
{
color:gray;
font-size: 16px;
text-decoration: none;
}
div#menu ul a:hover
{
color:black;
}
div#menu li
{
display: inline;
}
j fiddle so you can see!
EDIT: I should explain that the menu with the smaller text is the one I want to move a few spaces to the left so it doesn't look tabbed. I also fixed the title so it shows what the actual problem is.
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
* {
margin: 0;
padding: 0;
}
or
import
http://meyerweb.com/eric/tools/css/reset/
http://necolas.github.io/normalize.css/
You haven't set fixed width to your containers, so they are 100% width, you have set for display: inline for <li>, so you can simply center it using text-align:center to <ul>.
btw. as #putvande said in comment, you can't directly inside <ul> you can put only <li>. To avoid putting |, use this css:
div#menu li:after {
content:'|';
}
Have you tried add this?
div#menu ul {
text-align: center;
}
http://jsfiddle.net/XaQbr/6/
remove the margin on the body and padding on the ul to see it better centered http://jsfiddle.net/XaQbr/8/
Also the pipes outside of the li's, those are invalid
try this:
div#menu ul{padding:0;}
right-click the element in your browser and click "inspect element". there you can see dimension, margins and paddings in color. (for chrome at least...)
Your markup is invalid. You cannot have the | or any other tags or content in between the li. The separator should be done using border-left or right. You can control height of the separator using line height on the li and spacing using left/right padding on the a not using space.
<div id="menu">
<ul>
<li>is</li>
<li>that</li>
<li>my</li>
<li>text</li>
<li>now centered</li>
</ul>
</div>
CSS:
div#menu ul a
{
color:gray;
font-size: 16px;
text-decoration: none;
padding:0 10px;
}
div#menu ul a:hover
{
color:black;
}
div#menu li
{
display: inline;
line-height:14px;
border-left:1px solid gray;
}
div#menu li:first-child{
border-left:none;
}
http://jsfiddle.net/XaQbr/10/
As shown in image below their is little gap between two red regions..
I have set all the margins and paddings to zero but it is still giving that 4px(i think) margin in between.. I want to know why that is appearing there...
two red regions are given floating to left and displayed as inline-block.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>learning...</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="_body">
<div id="_header">
<img src="images/header_index.jpg"/>
<br />
<h3> this is just a view of uttrakhand from a camera come here and explore the whole beauty...</h3>
</div>
<div id="_navigation">
<ul>
<li>Destinations</li>
<li>Culture</li>
<li>Adventure</li>
<li>Hotels</li>
<li>Wild Life</li>
<li>History</li>
<li>About</li>
</ul>
</div>
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
<p id="background-viewer">..</p>
</div>
<pre>this is something written inside pre<a></a></pre>
<script src="JavaScript.js"></script>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
#_left , #_content , #_navigation > ul {
display:inline-block;
}
#_body {
width:1200px;
background:-webkit-linear-gradient(top,#0000CC,#3999FF);
margin:0px auto;
padding:0px;
}
/*Here comes all the stylin gog header*/
#_header {
}
#_header > img {
width:1200px;
}
#_header > h3 {
border-bottom:3px solid black;
font-weight:normal;
text-align:center;
text-transform:capitalize;
padding:10px;
}
/*Here ends styling of header*/
/*here comes styling of navigatin bar*/
#_navigation {
margin:20px 20px 10px 20px;
}
/*here remains 960px for navigation bar*/
#_navigation > ul {
list-style-type:none;
}
#_navigation ul > li {
width:135px;
display: inline-block;
padding: 5px 15px 5px 0px;
font-family: Verdana;
font-size: 22px;
vertical-align: middle;
background:-webkit-linear-gradient(top,blue,aqua);
border-bottom-right-radius:5px;
border-top-left-radius:5px;
}
#_navigation ul > li:active {
background:-webkit-linear-gradient(bottom,blue,aqua);
}
#_navigation a {
text-decoration: none;
}
#_navigation a:visited {
color:black;
}
#_navigation a:active {
color:black;
}
#_navigation a:focus {
color:black;
}
/*here ends styling of _navigation*/
/*this part is for _left and _content*/
#_left {
width:400px;
padding:0px;
background-color:red;
min-height:100px;
}
#_content {
width:795px;
background-color:red;
min-height:100px;
}
/*here ends all the styling of mid region*/
Here is all of my code..
javascript file has nothing so i didn't put that here...
Your divs are incorporated in a inline formating context and a whitespace is generated by the new line in the html document
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
You may avoid that by putting together the closing and ending tag of those divs as so
<div id="_left">
this is left region of the page..
</div><div id="_content">
this is content region of the page
</div>
A good idea is to use google chrome or firefox to inspect the elements you want to understand more. Just right click on your red block, inspect element. This then shows you the css applicable to the elements, including any inherited from other elements. You can live test alternatives by either editing the css code in the inspector or by editing the style sheet also presented by the inspector.
Ok, try
#_content {
float:left
}
here's fiddle: http://jsfiddle.net/cfgXX/
I have a traditional nav created. between each li I put one div with 1px width and slightly smaller height than nav bar.
Basically I was going for this look:
http://subalee.com/nav.jpg
HTML:
<nav>
<ul>
<div></div>
<li>Domov</li>
<div></div>
<li>Služby</li>
<div></div>
<li>O nás</li>
<div></div>
<li>Kontakt</li>
<div></div>
</ul>
</nav>
CSS:
nav ul div {
height:31px;
width:1px;
background-color:#34b9ff;
display:inline-block;
}
nav ul li {
display:inline;
}
nav ul li a {
display:inline-block;
padding:10px;
When I change div to display:inline; text works properly but those visible spaces somehow dissapear.
Problem 1:
You are not allowed to place ANYTHING else into a ul except li.
I'd consider another approach to skip the syntactically useless styling-divs:
JS-Fiddle Example
nav ul li {
font-size: 16px;
display:inline;
padding: 2px 0px;
border-right: 1px solid blue;
}
You can avoid spaces between inline elements by setting font-size to 0 and resetting it on the li.
I don't think you can have a DIV within UL.
I'm sure you could achieve the same results with LIs only, by adding the appropriate style.
if you do not want any change in the way the elements are declared in your html then
use
border-left:1px solid #34b9ff;
instead of background-color:
and use display:inline;
Full css would look like
nav ul div {
height:31px;
width:1px;
border-left:1px solid #34b9ff;
display:inline;
}
Here's the fiddle
The main problem in these cases is that you can't have ANY whitespace between li's as this will show up.
Following jsFiddle show exactly your code with space removed results in what I think is what you want.
http://jsfiddle.net/jPF2p/
I am trying to make the last category have no bottom border, is there is any trick to done it without programming?
HTML & CSS:
<style>
#menu {
border:1px red solid;padding:10px
}
#menu a {
display:block;
border-bottom:1px #000 dotted
}
</style>
<div id="menu">
<p>MAIN MENU</p>
<a>Computers</a>
<a>Design</a>
<a>Programming</a>
</div>
EXAMPLE:
http://jsfiddle.net/GLJWp/
You may try this, because last-child doesn't work in IE
HTML
<div id="menu">
<p>MAIN MENU</p>
<a>Computers</a>
<a>Design</a>
<a>Programming</a>
</div>
CSS
#menu{
border:1px red solid;padding:10px
}
#menu a{
display:block;
border-top:1px #000 dotted
}
The following would effect the first a after the p, a:first-child won't work in IE because p is the first child element
#menu p + a{
border-top: none;
}
DEMO.
Have a look at the :last-child pseudo class, which will apply the css rules only to the last item: http://www.quirksmode.org/css/firstchild.html
In this case you'd style the last link by:
#menu a:last-child {border-bottom:none}
For supporting IE <9, have a look at this beautifully horrible conditional stylesheet hack.
Done here: http://jsfiddle.net/GLJWp/2/
I have a sort of menu like this one, but how you can see the code is not so "well".
I'd like that margin between word and border is always 5px for example, for every word.
I know I should use List for this kind of stuff, but I don't know how to apply css style with cross-browser compatibility.
Can you give to me an example of that menu with List?
This is how I'd do it:
See: http://jsfiddle.net/thirtydot/554BT/3/
<ul class="menu">
<li>Home</li>
<li>Incredible</li>
<li>One</li>
</ul>
.menu {
width:545px;
float:left;
margin: 0;
padding: 0;
list-style: none
}
.menu li {
float: left;
text-align: center;
padding: 0 15px;
border-left: 2px solid red
}
.menu li:first-child {
border: 0
}
This is the way I would do it, keeping it as easy (simple) as possible. It probably doesn't get any less complex than this:
HTML
<ul id="menu">
<li>Home</li>
<li>Incredible</li>
<li>One</li>
</ul>
CSS
#menu {
list-style-type: none;
}
#menu li {
display: inline-block;
padding: 0 10px;
border-left: 2px solid red;
}
#menu li:first-child {
border-left: none;
}
DEMO: jsfiddle
Check out Listmatic for examples of all the basic list layouts.
Looks like you want something like this one.
Try this...
fiddle:http://jsfiddle.net/anish/Laqqn/
<style type="text/css">
.menu
{
width:500px;
}
.menu li
{
width:100px;
text-align:center;
float:left;
border-right:1px solid red;
}
</style>
<ul class="menu">
<li>Home</li>
<li>Incredible</li>
<li>One</li>
</ul>
A CSS3 example, not really cross browser as it uses CSS3 pseudo-selectors
CSS3 List menu
This other example uses a pipe character to separate the links and is cross browser safe:
CSS2 List menu
Space between the borders do this =
Put a border on the right side of the li and the second button put a border on the left side of the li.
Now add margin-left (or margin-right) and see it expand.
This worked in my case.
Good luck.