I have following CSS for that
/* Start Submenu */
#submenu {
list-style-type:none;
}
#submenu ul{
border-bottom:3px solid #1c29da;
margin:0px;
padding:0px;
display:table;
}
#submenu li{
width:123px;
height:58px;
background:url(submenu_btn.jpg) no-repeat;
vertical-align:middle;
text-align:center;
display:table-cell;
}
#submenu a {
color:#333333;
font: bold 12px/13px Arial, Helvetica, sans-serif;
cursor:pointer;
}
#submenu a:hover {
color:#2f6535;
font: bold 12px/13px Arial, Helvetica, sans-serif;
cursor:pointer;
}
/* End Submenu */
See this image. What is the solution for IE 6 & 7 for making it inline?
The standard cross-browser implementation is to use floats. Start with something like:
#submenu { overflow: hidden; }
#submenu ul { overflow: hidden; }
#submenu li { float: left; }
and style as required.
That being said, I wouldn't roll your own solution to this. There are lots of exceptions and code required for certain browsers. This is only the beginning of your problems. I'd recommend using a prepackaged tab or menu solution instead.
Related
I am making a simple button in CSS and i need to make 4. I want them to have the same style as the first one i created but with different words in them. Is there a way i can reference nav1 styles into nav2 to save on space?
I hope that makes sense.
Thanks
#nav1
{
background-color:white;
-webkit-transition: all .6s;
width:90px;
line-height:50px;
text-align:center;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
position:relative;
top: 10px;
}
#nav1:hover
{
background-color:black;
color:white;
}
#nav2
{
background-color:white;
-webkit-transition: all .6s;
width:90px;
line-height:50px;
text-align:center;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
position:relative;
top: 20px;
}
#nav2:hover
{
background-color:black;
color:white;
}
Yes. You can add same CSS properties to multiple IDs, Classes, Elements separating them with commas:
#nav1,
#nav2,
..,
#nav100 {
background-color:white;
-webkit-transition: all .6s;
width:90px;
line-height:50px;
text-align:center;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
position:relative;
top: 10px;
}
To change just one property overwrite it:
#nav2 {
top: 20px;
}
But in your case you should use classes:
.nav {
..
}
HTML:
<div class="nav"></div>
<div class="nav"></div>
...
use commas (element1, element2, element3 {}) in order to apply the rule to two or more elements, like this:
#nav1, #nav2
{
background-color:white;
-webkit-transition: all .6s;
width:90px;
line-height:50px;
text-align:center;
font-family: sans-serif;
font-weight: bold;
border-radius: 5px;
position:relative;
top: 10px;
}
#nav2
{
top: 20px;
}
#nav1:hover, #nav2:hover
{
background-color:black;
color:white;
}
Use the class attributes on your buttons.
html:
<a href='#' class='myButton'>some text</a>
css:
.myButton
{
background-color:red;
}
all element with the 'class' attribute set to myButton will now have a red background.
Alternatively you can use Catalin Munteanu first solution and add a list of all the id you want separated by ',' before the css block.
If you use class="nav1" instead of id="nav1", you can use the class on all the buttons you want to style this way.
You have to use .nav1 in your css instead of #nav1
Look here: DEMO
This is my CSS:
/* Navigation Bar */
#linkBar
{
position: relative;
overflow: hidden;
height:24px;
width:999px;
background:#990033;
}
.linkbar ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.linkbar li
{
float:left;
}
.linkbar a:link,a:visited
{
font-size: 14px;
display:block;
width:134px;
font-weight:bold;
color:#FFFFFF;
background-color:#990033;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.linkbar a:hover,a:active
{
background-color:#000000;
}
/* Links */
a:link,a:visited,a:active
{
font-size: 8pt;
font-weight:bold;
color:#990033;
text-decoration:underline;
}
a:hover
{
color:#0000FF;
text-decoration:none;
}
My expected outcome is that links show like:
Which is the case for most of the elements, however the first link on the linkbar ends up like:
Linkbar code:
<div id="linkBar" class="linkbar">
<ul>
<li>Home</li>
<li>Course</li>
<li>Help</li>
</ul>
</div>
I've made a jsfiddle for this
(on jsfiddle i dont get the problem with the first link in the linkbar, so this implies its a problem with the rest of my code?).
I can solve the issue with the navbar if i just change the css around to be:
#linkBar
{
position: relative;
overflow: hidden;
height:24px;
width:999px;
background:#990033;
}
/* Links */
a:link,a:visited,a:active
{
font-size: 8pt;
font-weight:bold;
color:#990033;
text-decoration:underline;
}
a:hover
{
color:#0000FF;
text-decoration:none;
}
/* Navigation Bar */
.linkbar ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.linkbar li
{
float:left;
}
.linkbar a:link,a:visited
{
font-size: 14px;
display:block;
width:134px;
font-weight:bold;
color:#FFFFFF;
background-color:#990033;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.linkbar a:hover,a:active
{
background-color:#000000;
}
But this then means that the visited normal links text color is white - which is not what I want (as some normal links are on light or white backgrounds).
I've made a jsfiddle for this (visited links being white).
Can anyone see what I'm doing wrong / point me in the direction of how to fix it?
Where you have written .linkbar a:link,a:visited you need to repeat the classname before a:visited
Right now you are actually saying '.linkbar link, and then override all a:visited'
So it should be .linkbar a:link, .linkbar a:visited { .. }
I'm using the Yahoo CSS reset, and all of my CSS uses pixel values rather than relative measures like ems. You'll notice that the bottom right corner of the div containing the form is shifted in Chrome from where it is in FireFox.
Check it out:
http://jsfiddle.net/rhewitt/anMmX/
Chrome:
FireFox
/*header style*/
html{
background:url(../Images/textureslice.png) repeat;
}
body {
font-family:Georgia;
color:#93b9bb;
}
/* Links */
li a{
color:#93b9bb;
text-decoration:none;
}
li a:hover {
text-decoration:underline;
color:#6b8f91;
}
/* Navigation Structure */
#nav {
width:920px;
margin:auto;
text-align:center;
padding-top:120px;
list-style-type:none;
}
#outterBox li{
display:inline-block;
padding:0 50px;
position:relative;
}
#linksLeft{
float:left;
border-top:3px solid #93b9bb;
border-bottom:3px solid #93b9bb;
margin:60px 0 0 25px;
padding:5px 0;
}
#linksLeft li ul {
background-color:#93b9bb;
margin-top:10px;
border-radius:6px;
}
#amy {
clear:both;
font-weight:bold;
letter-spacing:6px;
font-size:120%;
}
#talent{
font-size:70%;
}
#logo {
float:left;
background:url(../Images/logocropped.png) no-repeat;
height:134px;
width:160px;
}
#linksRight{
float:left;
border-top:3px solid #93b9bb;
border-bottom:3px solid #93b9bb;
margin-top:60px;
padding:5px 0;
}
/* Subnavigation menu */
#linksLeft li ul li {
display:block;
padding:10px 15px;
text-align:left;
}
#subNav a{
color:#FFF;
}
#subNav {
position:absolute;
left:10px;
top:15px;
z-index:999;
}
#subnavborder {
margin:10px 10px;
border: 6px solid white;
border-radius:6px;
}
#nav ul ul {
display:none;
}
#nav ul li:hover > ul {
display:block;
}
The text size for the browser was set > 100% (not page zoom). This caused the rendering to be wonky on my machine and also explains why it couldn't be replicated by others.
I cant replicate the difference either.
Did you clear cache in chrome? Try reloading by shift+f5.
I assume it should look like the second screenshot.
http://jsfiddle.net/xLTE4/
Adjust the buttons css right propperty and it should be fine in both browsers, at least it works on my end.
Also consider maybe doing this layout without everything being positioned absolutely.
#submitBtn{
position:absolute;
right:45px;
top:430px;
width:80px;
}
I'm getting stumped here...
I'm trying to vertically align text in a top nav that has two different lines on each li.
Normally, I would take the position:relative + position:absolute route, however, that only works if you set the width of the element.
In my navigation, we don't have a standard width, but need all items aligned by the bottom text.
Here's my code
<div id="menu">
<ul>
<li>first line</li>
<li>Second<br />Line</li>
<li>third Line</li>
</ul>
</div>
Here's the CSS I'm using:
#menu {
margin: 40px auto 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #666666;
float: right;
width:600px;
}
#menu ul {
list-style:none;
list-style-type:none;
height:30px;
}
#menu ul li {
float:left;
margin:0 11px;
padding:5px 0;
}
#menu ul li a {
color:#666666;
text-align:center;
font-size:11px;
display:block;
line-height:1em;
height:30px;
}
As you can see in the second li, there is a linebreak.
What I need is all the items to line up on the bottom, however, I can't use the width element.
Any help would be appreciated... javascript, jquery, are acceptable alternatives as well.
See http://jsfiddle.net/HKAn2/1/ for the updated CSS and sample.
Updated fiddle sample with proper IE7 support: http://jsfiddle.net/HKAn2/3/.
I do not recommend using the CSS hacks in this fiddle example. Instead use an IE7 specific stylesheet to add the asterisked properties. This is just a sample.
Note the changes to
#menu ul li {
display:inline-block; /* this */
margin:0 11px;
padding:5px 0;
*display:inline; /* this - IE7 */
*zoom:1; /* this - IE7 */
}
and
#menu ul li a {
color:#666666;
text-align:center;
font-size:11px;
line-height:1em;
vertical-align:bottom; /* this */
}
Hope this helps.
Edit:
I should further explain that the height property on your a element is no longer a requirement. The a will align to the bottom of the li element based on the li with the largest height.
as you appear to know the height (or optimal height) you could use the length value of vertical-align from vertical-align specs:
<length>
Raise (positive value) or lower
(negative value) the box by this
distance. The value '0cm' means the
same as 'baseline'
and if you make your <a> elements into inline blocks you then lower them by half the height, e.g. as below I took your height value of 30px, and made the links have a line height of 15px for each line then lowered it by 15px, which is 15px from the default middle point.
#menu {
margin: 40px auto 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
font-weight: bold;
font-variant: normal;
color: #666666;
float: right;
width:600px;
background: #eee;
}
#menu ul {
list-style:none;
margin: 0;
padding: 0;
}
#menu ul li {
float: left;
margin: 0 11px;
height: 30px;
background: #dad;
}
#menu ul li a {
color:#666666;
text-align:center;
display: inline-block;
vertical-align: -15px;
line-height: 15px;
}
Working Example : HERE
downside is that I don't think you can get the whole 30px height hoverable, ike if the link was display:block, but maybe someone can expand on this if that's required, maybe it could be achieved by adding a span into the mix?
I have an issue regarding style my blog. I want to make the header bar
position:fixed
The header bar looks like this:
.blurbheader {
position:fixed;
padding:4px;
width: 100%;
height: 40px;
margin-bottom:30px;
color:#fff;
background:#cc0000;
font: 12px Helvetica, Arial, sans-serif;
line-height:1.3em;
}
.blurbheader a {color: #fff;}
/* creates the triangle */
.blurbheader:after {
content:"";
position:absolute;
bottom:-40px;
left:210px;
border:20px solid transparent;
border-top-color:#cc0000;
/* reduce the damage in FF3.0 */
display:block; width:0;
}
But as soon and I do that, 2 navigation bars I made, which are shown as
.blurb {
position:relative;
padding:10px;
margin:20px 0 0.5em;
color:#fff;
background:#000;
font: 11px Georgia, Geneva, "Times New Roman", times;
line-height:1.3em;
}
.blurb a {color: #fff;}
/* creates the triangle */
.blurb:after {
content:"";
position:absolute;
top:-30px; left:20px;
border:15px solid transparent;
border-bottom-color:#000;
/* reduce the damage in FF3.0 */
display:block; width:0;
}
When try to make the headerbar (blurbheader) fixed, when I scroll, it looks like this:
The box on the right hand side is the navigation bar, which won't scroll under the header bar. What do I do?
It is a z-index issue.
try adding the following to your .blurbheader
z-index:1;
and whatever is holding the rest of the page, like the wrapper, add a
z-index:0;
that should fix the problem