here is my css code for a horizontal menu, it's cross browser and it works great, well it has 1 glitch. :)
The #menu which wraps everything has to have width of 100%, but when I put a border on it, the border adds to the width making it larger and screws up my layout.
What I do is use jquery to substract the 2 pixel border. Is there a way to do this with css?
here is the menu's css:
#menu {
width: 100%;
margin: 0 0 1em 0;
padding: 0.5em 0 0 0;
border-right: solid 1px #555;
border-left: solid 1px #555;
border-bottom: solid 1px #555;
}
#menu ul {
margin: 0 0 0 0.5em;
padding: 0;
list-style-type: none;
}
#menu li {
margin: 0;
padding: 0;
float: left;
width: 20%;
line-height: 1.5em;
margin-right: 1em;
margin-bottom: 0.5em;
background: url(images/headline.jpg) top repeat-x;
border: solid 1px #555;
text-align: center;
}
#menu a {
display: block;
width: 100%;
font-size: 70%;
text-decoration: none;
}
#menu a:hover {
background: #000 none;
}
Some notes:
The menu has to be wrapped by a div that is used for styling background color, left margin/padding, etc. I've found no way to style the UL itself, because I can't clear the float inside it. Thus the height of the OL always equals zero.
Ty very much!
Use outline instead of border. It creates "borders" in the same way, only it places them on the inside of the frame, rather than the outside as border does.
If you can ignore IE7 and below, you can use box-sizing.
Related
The h1 with the border:
h1 {
font-size: 2.125em;
border-bottom: 1px solid #aaa;
width: 100%;
display: block;
}
The float-right "Contents":
div {
float: right;
clear: right;
margin-bottom: .5em;
padding: .5em 0 .8em 1.4em;
background: transparent;
max-width: 20em;
}
How do I remove the lines piercing the Contents section to the right?
If you want to remove the lines where the contents begin you can just add background: #fff; to contents div style.
And if border-bottom must be only under "The Rules" and "Character Setup" you can use text-decoration: underline; instead of border-bottom: 1px solid #aaa; or wrap every h1 in div and add to wrapped h1 display: inline-block;
I have a subnav that has a border-bottom under each of the sub menu items, when I was checking to see if it was ok in all the browsers I noticed that the border-bottom stopped where the text ended in IE7.
Here is my css
.subnav_wrapper_ul {
background: none repeat scroll 0 0 #00AEEF;
font-size: 13px !important;
position: absolute;
top: 34px;
z-index: 1000;
}
.header-wrapper .main-nav li {
float: left;
list-style: none outside none;
position: relative;
white-space: nowrap;
z-index: 1000;
}
.subnav_wrapper_ul li {
border-bottom: 1px dotted #FFFFFF;
float: none !important;
padding: 0;
width: 100%;
}
if there is anything else that you need from me please let me know
Give the border-bottom css property to the ul element , instead of the individual li items.
.subnav_wrapper_ul {
background: none repeat scroll 0 0 #00AEEF;
font-size: 13px !important;
position: absolute;
top: 34px;
z-index: 1000;
border-bottom: 1px dotted #FFFFFF;
}
We don't have any link or any image for reference, so in this case we all have to guess.
anyway you are talking about submenu section. can we use a IE7 specific hack here..
*:first-child+html .subnav_wrapper_ul li {
border-bottom: 1px dotted #FFFFFF;
float: none !important;
padding: 0;
width: 100%;
}
Another way to target IE7 is:
*border-bottom: 1px dotted #FFFFFF;
I'm having difficulty getting a div containing text to reduce it's width in order to wrap nicely next to an image that's floated right. The text inside the div is behaving as I would like it to but the grey div is stretching behind the image.
The div/box is part of a wordpress shortcode plugin. I don't know whether that is complicating matters
Here is the css for the elements in question
Image:
.circular-image-right img {
border-radius: 50%;
clear: both;
display: inline;
float: right;
height: 300px;
margin: 0 30px 60px;
width: 300px;
}
Div:
element.style {
text-align: left;
width: 100%;
}
.symple-box.gray {
background: none repeat scroll 0 0 #F9F9F9;
border: 1px solid #DDDDDD;
color: #666666;
}
.symple-box {
-moz-box-sizing: border-box;
border-radius: 2px;
display: block;
font-size: 1em;
margin: 10px 0;
padding: 30px 15px 5px;
}
The page in question can be seen here:
http://c3927181.myzen.co.uk/
http://jsbin.com/iLAMuXoc/5/edit?css,output
.symple-box.gray {
padding: 16px 30px;
margin: 0 360px 0 0;
background: none repeat scroll 0 0 #F9F9F9;
border: 1px solid #DDDDDD;
color: #666666;
}
Including the "float: left" at the place labeled "here!!!" made the padding of the "a" element independent of the padding of the ancestor "ul" element. Also the space between the "a" elements disappeared, as shown in picture A (before including "float: left") and picture B (after).
Could someone explain why this happens for me?
#top-menu {
width: 470px;
height: 200px;
position: absolute;
right: 0;
border: solid;
}
#top-menu ul {
width: 400px;
float: left;
padding: 20px;
position: absolute;
right: 0;
bottom: 0;
border: solid;
}
#top-menu li {
display: inline;
position: relative;
}
#top-menu li a {
border: 1px solid transparent;
border-radius: 4px 4px 4px 4px;
color: #5A6770;
float: left; /* <----- HERE!!! -----*/
padding: 15px 20px;
position: relative;
text-decoration: none;
}
#top-menu li a:hover {
background-color: #ECEFF2;
border-color: #D1D6D9;
}
#top-menu li a:active {
background-color: #E4E7EB;
border-color: #BAC1C6;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) inset;
}
That's because the <a> element is inline element. And when you add it float:left it starts acting like block element.
You can only have margin and padding on inline elements which affects only the "line" .. i.e left and right. But you can't top and bottom because for example. Imagine that you have long paragraph, about 10 lines. And somewhere you have span or a - inline elements. There is no logic to give them top and bottom margin and padding, cause the all paragraph will brake, but you can add left and right.
Very good explanation you can find HERE.
I want to underline my navigation menu but the problem is that I need it to be thicker so I am using bottom border instead so that I can set the width to 6px.
I can seem to figure out how to get the border to appear closer to the text. There seems to about a 10px gap between the text and the bottom-border at the moment and I don't want to have any.
I have tried to position another div and position it relative to each {li} with {bottom: 10px} but I can't seem to get it to work.
Here's what I have so
CODE
<div id="menu">
<ul>
<li>home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS
#menu {
position: fixed;
left: 25%;
clear: both;
float: left;
font-size: 80px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}
#menu ul{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 90px;
}
#menu ul li{
text-decoration: none;
list-style-type: none;
margin: 0;
}
#menu ul li a{
border-bottom: 6px solid #000;
text-decoration: none;
list-style-type: none;
color: #000;
}
#menu ul li a:hover{
}
You can use a mixture of line-height and margin to garner such an effect, like so:
#menu ul li a {
border-bottom: 6px solid #000000;
color: #000000;
display: block;
line-height: 50px;
list-style-type: none;
margin: 20px 0;
text-decoration: none;
}
Using display: inline-block; in combination with border-bottom could cause some weird behavior line breaks if longer links contain a line-break, see http://jsfiddle.net/PQZ9H/. Alternatively, you could use a combination of background-image and background-position which has the advantage of not touching the display value.
a {
text-decoration: none;
position: relative;
background-repeat: repeat-x;
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
background-position: left 15px;
}
a:hover { background: none; }
A disadvantage is that you might have to define a background-position for every font-size you use.
Using this technique you could also remove the border from descenders like g or y adding
a span.descender { text-shadow: -1px 0px 0px white, 1px 0px 0px white, -2px 0px 0px white, 2px 0px 0px white, -3px 0px 0px white, 3px 0px 0px white; }
and
<span class="descender">A link with descenders like g or y</span>
See http://jsfiddle.net/25XNY/1
Try to this (origin russian http://artgorbunov.ru/bb/soviet/20120510/) article methods (background gradient and http://jsfiddle.net/d3WG6/)
<p>Зигварт считал <a><span>критерием истинности необходимость и общезначимость, для которых нет никакой опоры</span></a> в объективном мире.</p>
a { font-size: 50%; border-bottom: 1px dashed red; }
a > span { font-size: 200%; line-height: normal; }
Margin property can't change the border-bottom position, so
The height of the <a> element will define the position of the your border-bottom.
#menu > ul > li > a {
height: ;
}