I have a Div bar with a white background in which my breadcrumb lives.
Here you can see a screenshot:
How can i align the text vertically?
Here is my CSS:
/* Breadcrumb */
#breadcrumb {
position: relative;
background: white;
padding: 4px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
behavior: url(/scripts/PIE.htc);
font-size: .9em;
color: #526472;
}
#breadcrumb ul {
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumb li {
float: left;
padding-left: 5px;
}
#breadcrumb a {
padding-right: 10px;
background: url(../images/div_breadcrumb.gif) no-repeat right center;
color: #526472;
margin-right: 5px;
}
And my HTML:
<div id="breadcrumb" class="clearfix">
<ul>
<li style="white-space: nowrap;">
<a style="white-space: nowrap;" href="">Home</a>
</li>
<li style="white-space: nowrap;">
Visual collaboration solutions
</li>
</ul>
<div id="shareThis" class="fl_right"> Share: </div>
</div>
Due to incomplete code, it's a bit hard to tell, but I'm guessing that you're either missing some markup, or that there are other styles messing with your breadcrumbs.
The following works just fine to display items in a horizontal row (your styles, my HTML).
<html>
<head>
<style>
#breadcrumb { position: relative; background: white; padding: 4px; border-radius:2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; behavior: url(/scripts/PIE.htc); font-size: .9em; color: #526472;}
#breadcrumb ul { margin: 0; padding: 0; list-style: none; }
#breadcrumb li { float: left; padding-left: 25px;}
#breadcrumb a { padding-right: 10px; background: url(../images/div_breadcrumb.gif) no-repeat right center; color: #526472; margin-right: 5px;}
</style>
</head>
<body>
<div id="breadcrumb" class="clearfix">
<ul>
<li>Home Visual collaboration solutions</li>
<li>La</li>
<li>Ti</li>
<li>Da</li>
</ul>
</div>
</body>
</html>
If you are using ul and li tags properly, you might try using Firebug or the Chrome developer tools to detect whether or not other styles are being applied.
Try:
li{display: inline}
You could also use
li{display:inline-block}
That way your li elements wont lose their block properties
Here's the example :
http://jsfiddle.net/bFe35/1/
Try to edit your CSS file, by adding vertical-align:middle; to your #breadcrumb ID, like this:
#breadcrumb {
position: relative;
background: white;
padding: 4px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
behavior: url(/scripts/PIE.htc);
font-size: .9em;
color: #526472;
vertical-align:middle;
}
Related
I have a little problem, there is a little problem on my menu, there is a little space between the ul border and the li background, here's my code:
Menu code:
.menu_base {
margin-left: auto;
margin-right: auto;
margin-top: 0;
list-style-type: none;
padding: 0;
overflow: hidden;
width: 75%;
border: 3px solid;
border-top: 0px solid;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-color: #ff6eff;
}
.button {
float: left;
}
.button a {
padding: 15px 15px;
display: block;
text-align: center;
text-decoration: none;
color: #ff6eff;
font-family: sans-serif;
}
.button a:hover {
background-color: #ff6eff;
color: white;
}
<ul class="menu_base">
<li class="button">Accueil</li>
<li class="button" style="float: right">Inscription</li>
<li class="button" style="float: right">Connexion</li>
</ul>
Excepted result: (From Firefox)
https://i.stack.imgur.com/e62BM.png
Actual result: (From Chrome)
https://i.stack.imgur.com/x3wYU.png
Did you add the normalize CSS to the top op your CSS file?
All browsers sort of add their own style which can cause problems when adding CSS to your site. By normalizing the CSS you get the same margin, padding etc for all browsers. You can use Eric Meyers normalize CSS. Just copy the CSS from the link below and add it to the top of your CSS file.
You can find it here: https://meyerweb.com/eric/tools/css/reset/
I am still an extreme beginner to web development and i am trying to create this navigation bar.
The issue i have come across is that the element i have floated to the right side is not on the same level as the other stuff.
This is probably due to something i have done with the css and i can't pin it.
Also what i actually want to do is to change the background of the right floated element to pink and have a padding around it to make it look like a button. I dont know if i have gone about to do so in the right way . I did try to find it out on my own but havent had any luck so far.
This is my html.
<html>
<head>
<title>WatchIT -Your one stop destination for all your movie tickets</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="navbar" class ="navbar-collapse">
<ul>
<li> <a class="active" href="" title="Home">HOME </a> </li>
<li> MOVIES </li>
<li> THEATERS </li>
<li> BUY TICKETS ONLINE </li>
<li style="float:right"><a class="btn btn-scope1 navbar-btn" href="">TEST YOUR KNOWLEDGE </a> </li>
</ul>
</div>
</body>
</html>
and this is my css.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00004d;
font-size:15px
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #000080;
}
a:active {
text-decoration: none;
color: #00abbd;
outline: none;
}
.btn-scope1 {
text-transform:uppercase;
padding:4px 15px;
font-weight:600;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
font-size: 12px;
min-width: 100px;
}
.btn-scope:hover {
color: #fff;
opacity: 0.9;
background-color: rgba(238, 12, 110, 0.8);
}
Please be kind enough to ignore my ignorance on certain things that i may have put on.What i honestly want is to have a padding in pink like the "Post your question button" on stackoverflow on the buytickets and test your knowledge button. Thank you in advance
The solution to your issue is twofold: One, using margins and two, using a background to style your button. The simplest change is as follows:
In your css, change:
.btn-scope1 {
text-transform:uppercase;
padding:10px 1px;
margin-right: 30px;
margin-top: 5px;
background: red;
font-weight:600;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
font-size: 10px;
min-width: 100px;
}
The background will give you the required button background effect. What's important to note is the margin you set. This will enable you to move around the concerned element with respect to the div it is placed in.
Here's a link. (Codepen to show desired result.)
Congrats on starting web development.
A simple fix for this issue is to give the elements you want to style an ID like Link Text and then style it with the ID-selector in CSS like #link1 { backgroundcolor: red; }, ideally you should give a class in the HTML selector, like Class and then style it with .link {backgroundcolor: red}.
Please check again whether this is what you need
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #00004d;
font-size:15px
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #000080;
}
a:active {
text-decoration: none;
color: #00abbd;
outline: none;
}
.btn-scope1 {
text-transform:uppercase;
padding:4px 15px;
font-weight:600;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
font-size: 12px;
min-width: 100px;
}
.btn-scope:hover {
color: #fff;
opacity: 0.9;
background-color: rgba(238, 12, 110, 0.8); }
<html>
<head>
<title>WatchIT -Your one stop destination for all your movie tickets</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<div id="navbar" class ="navbar-collapse">
<ul>
<li> <a class="active" href="" title="Home">HOME </a> </li>
<li> MOVIES </li>
<li> THEATERS </li>
<li> BUY TICKETS ONLINE </li>
<li style="float:right;padding:15px;"><a class="btn btn-scope1 navbar-btn" href="" style="background-color:pink !important;">TEST YOUR KNOWLEDGE </a> </li>
</ul>
</div>
</body>
</html>
That is happening becuase you are providing separate padding values through btn-scope1. Remove that part, et voila!
Here's the css after removing that part.
.btn-scope1 {
text-transform:uppercase;
/*padding:4px 15px;*/
font-weight:600;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
font-size: 12px;
min-width: 100px;
}
I am facing a problem with CSS menu. I want the parent li not to be disturbed by the sub menu. I want the parent list to have widths equal to the text contents they have itself but not the inner ul. I don't want to give the parent list specific width. Here is the image.
CSS
ul {
list-style: none;
}
.nav{
padding-left: 70px;
line-height: 60px;
overflow: hidden;
}
.nav > li{
float: left;
font-size: 20px;
margin-right: 18px;
cursor: pointer;
background: yellow;
}
.subm{
overflow: hidden;
width: 200px;
list-style: none;
line-height: normal;
outline: 1px solid black;
padding: 0;
background: #252525;
padding: 0 10px 10px 10px;
}
.subm > li{
color: #ffde00;
margin: 0;
margin-top: 4px;
padding-left: 6px;
font-family: decker;
}
HTML
<ul class="nav">
<li>Home</li>
<li>Languages
<ul class="subm">
<li>C</li>
<li>C++</li>
<li>java</li>
<li>c#</li>
</ul>
</li>
<li>About</li>
</ul>
Add position:absolute to .subm
Fiddle: http://jsfiddle.net/eryo2kjg/
I checked in your jsfiddle #Hanzallah Afgan. Try this
Remove overflow:hidden css property for .nav, then the sub menu will display
So I'm working on a personal project and I'd like to add icon images to the left of each nav menu item. 3 things are bugging me;
I can't get the icons to sit left of the menu items
I can't get the icons to resize using the max-width property
I also need the icons to remain in place on hovering.
http://www.toastcafebar.com/nav/
<nav role="navigation">
<ul>
<a class="cinema" href="cinema.html">Movies</a>
<a class="tv" href="tv.html">T.V Shows</a>
</ul>
</nav>
...and the CSS
nav[role="navigation"] ul {
display: inline-block;
text-align: center;
margin-top: 50px;
}
nav[role="navigation"] ul a {
width: auto;
margin: 0 50px;
font-size: 2em;
padding: .5em;
width: auto;
}
a.cinema {
display: block;
background: url(images/pop.png) no-repeat left center;
padding-left: 75px;
}
.tv {
display: block;
background: url(images/tv.png) no-repeat;
padding-left: 100px;
}
nav a:link, a:visited {
font-weight: normal;
text-decoration: none;
outline: none;
color: #000;
}
nav a:hover {
color: #999;
background: #666;
-moz-border-radius: .5em;
border-radius: .55em;
padding: .25em;
}
Any suggestions?
Cheers in advance
Your markup is a bit funky. If you have a <ul> element, you should only have <li> children.
HTML:
<nav role="navigation">
<ul>
<li><a class="cinema" href="cinema.html">Movies</a></li>
<li><a class="tv" href="tv.html">T.V Shows</a></li>
</ul>
</nav>
CSS:
nav[role="navigation"] ul {
display: inline-block;
text-align: center;
margin-top: 50px; }
nav[role="navigation"] ul li {
font-size: 2em;
margin: 0 50px;
display: inline-block; }
nav[role="navigation"] ul a {
background-position: .5em 50%;
background-repeat: no-repeat;
text-decoration: none;
outline: none;
color: #000;
padding: .5em .5em .5em 75px;
display: block; }
nav[role="navigation"] ul li a.cinema { background-image: url(http://www.toastcafebar.com/nav/images/pop.png); }
nav[role="navigation"] ul li a.tv { background-image: url(http://www.toastcafebar.com/nav/images/tv.png); }
nav[role="navigation"] ul li a:hover {
color: #999;
background-color: #666;
-moz-border-radius: .5em;
border-radius: .55em; }
Preview: http://jsfiddle.net/Wexcode/bGNgr/
What you need to do is the <a> tags to display:block;, and have the icon as a background image, aligned left with no-repeat. Then make sure you apply padding-left on the <a>so the text doesn't overlap the image. For example:
a.cinema {
display: block;
background: url(/path/to/img.png) no-repeat left center;
padding-left: 90px;
}
Use that as a base! No need for max-width...
To get the icon to autoresize to fit the "button size" you could use the CSS3 property "background-size". But I think the best way is to resize the icons manually, some browsers does not support CSS3 properties correct yet.
http://www.css3.info/preview/background-size/
Use both classes as follows, you may reach to answer,
nav a:hover {
-moz-border-radius: 0.5em 0.5em 0.5em 0.5em;
background: url(images/pop.png) no-repeat scroll left center #666666;
color: #999999;
}
a.cinema {
display: block;
background: url(/path/to/img.png) no-repeat left center;
text-indent: 35px;
}
Using CSS Style Sheet
In my web page, i have two class like menu and leftside. In menu i have the ul, li classes. i want to use a ul, li in left side also, but the problem is if i used the ul, li, it was matching with menu ul, li
ul -underlist, li - list
I tried to change the code of sheet,
my css code.
#leftside{
float: left;
width: 230px;
margin-left: 5px;
margin-top: 15px;
overflow: hidden;
font: 13px Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: maroon;
}
ul {
padding: 10px 10px 2px 0;
margin: 0px;
list-style: none;
}
li li {
margin-left: 10px;
margin-right: 10px;
line-height: 30px;
padding-left: 15px;
border-bottom: 1px dashed #BDBDBD;
background: url(images/img04.jpg) no-repeat left 50%;
}
Html Code
<li>
<ul>
<li>Company Profile</li>
<li>Enquiry</li>
<li>Career</li>
<li>Location Map</li>
</ul>
</li>
ul, list are matching with the menu ul, li
How to solve this issue. Please.
To reduse the amount of space above the inner list change the padding for the ul so that it is 0 or negative.
For Example:
ul {
padding: 0 10px 2px 0;
margin: 0px;
list-style: none;
}
You can also use a special style sheet to correct the problem in Internet Explorer by doing something like this:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
You would then need a second CSS file named iespecific.css which has the above ul styling in it.
Use an id to distinguish between the two.
For example the HTML would be:
<ul id="outter">
<li>The Outter List</li>
<li>More Outter List
<ul id="inner">
<li>This is the inner list</li>
<li>Company Profile</li>
<li>Enquiry</li>
<li>Career</li>
<li>Location Map</li>
</ul>
</li>
<li>Still The Outter</li>
</ul>
In the CSS you would have something like this:
#outter ul {
padding: 10px 10px 2px 0;
list-style: none;
}
#outter li {
margin-left: 10px;
line-height: 30px;
padding-left: 15px;
}
#inner ul {
padding: 10px 10px 2px 15px;
list-style: none;
}
#inner li {
margin-left: 10px;
margin-right: 10px;
line-height: 30px;
padding-left: 15px;
border-bottom: 1px dashed #BDBDBD;
background: url(images/img04.jpg) no-repeat left 50%;
}
This looks something like this:
alt text http://img16.imageshack.us/img16/2376/examplesg.png