I need to have a single <li> element which has two buttons inside of it as follows:
<li>
The title
</li>
With a layout of the button similar to the following:
____________
|_________|__|
The background would span the entire button, the <a> tag on the left would be filled with text, the one on the right with an alpha transparent button to overlay the background of the <li> element. This is the CSS I've got.
#left ul#main-menu li.li-add a {
display:block;
padding:4px 6px 6px 6px;
text-decoration:none;
color:#fff;
font-size:12px;
margin:0;
}
#left ul#main-menu li.li-add {
height:25px;
margin:0;
padding:0;
background: url('button_back.gif') no-repeat;
}
#left ul#main-menu li.li-add a.left {
width:106px;
float:left;
padding:5px 6px 6px 6px;
}
#left ul#main-menu li.li-add a.left:hover {
background: url('button_back_hover.gif') no-repeat;
}
#left ul#main-menu li.li-add a.right {
float:left;
text-align:center;
font-size:16px;
padding:4px 0 0 0;
margin:0;
height:21px;
width:27px;
font-weight:bold;
}
#left ul#main-menu li.li-add a.right:hover {
background: url('button_back_hover.gif') no-repeat center right;
}
I'm doing a similar thing with all the other list items, except they don't have the "add" button on the right hand side. The problem I'm having is that a two pixel gap is being introduced pushing the other <li> elements down. I'm not sure what I'm doing wrong really. I can do margin-bottom:-2px but all that does is make an area of 2 pixels which isn't clickable in the element below.
EDIT
It was the float actually.
#left ul#main-menu li.li-add a.right {
float:left;
text-align:center;
font-size:16px;
padding:4px 0 0 0;
margin:0;
height:21px;
width:27px;
font-weight:bold;
}
float:left shouldn't have been in there, for some reason doing this causes an extra gap to be created. shrug.
I think your li problem is a red herring. I was able to have the list layout nice and tight by adding:
height: 14px; /* Add to '#left ul#main-menu li.li-add a.left' */
You never specified a height for the left a tag, it's auto height was taller than the 25px specified for the .right a tag. You are setting a height on the li tags, but they are inline elements, not block elements as you've made the a tags. Only block elements can have specified heights. Hope this helps.
Good luck!
Related
On all the other pages of the website the navigation bar is in normal font but for some reason the font on the home page nav bar is in italics. I've completely forgotten how to make it so it doesn't have italics or where to search to change it so please help
http://surbaisse.com/index.html
#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
text-align: center;
}
#tabsJ li {
display:inline-block;
margin:0;
padding:0;
}
#tabsJ li a:hover {
background color: #111
}
#tabsJ a {
float:left;
background:url(file:///C|/Users/xw4600/Documents/Bugatti Dave/tableftJ.gif) no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url(file:///C|/Users/xw4600/Documents/Bugatti Dave/tabrightJ.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}
#tabsJ #current a {
background-position:0% -42px;
}
#tabsJ #current a span {
background-position:100% -42px;
color:#FFF;
}
After reviewing your site, the reason the text is in italics is because you put it in an <em> tag. As you can see on w3schools, <em> makes any string between it's opening and closing tags emphasized, making them appear as italics.
Remove the 3 em blocks from under #Layer3.
Also, and please, don't take this the wrong way, but your HTML-structure is horrible. Please, consider rebuilding your site's structure so it will be easier to maintain in the future.
For example, em is an inline type element, while div is a block type element. Putting block elements in inline ones, while not impossible, should be avoided. It makes building maintainable structure and sane CSS harder, and only leads to headache, tears and swearing in the future.
You are using <em> it makes your text italic.Your markup structure is not good.
Add in your css on #tabsJ font-style: normal;
my goal is to create a Statistic Bar.
To create this, i use a list which has position:absolute to have a vertical List.
My problem is that - because of the absolut position- i have to give each li tag +50 Pixel, so that they are not overlapped.
Maybe someone has an idea or a better code snipped for this ;)
HTML
<div class="statisticWrapper">
<div class="barWrapper">
<ul>
<li class="element1" style="height:0%"></li>
<li class="element2" style="height:0%"></li>
<li class="element3" style="height:100%;"><span>1056</span></li>
<li class="element4" style="height:30%"></li>
<li class="element5" style="height:0%"></li>
</ul>
</div>
</div>
and here is the CSS Code
.statisticWrapper{float:left; width:494px; height:250px; margin-left:8px;}
.statisticWrapper .barWrapper{float:left; width:494px; height:210px; position:relative;}
.statisticWrapper .barWrapper ul > li {position: absolute; width: 40px; bottom:0px; background-color:#ccc;}
statisticWrapper .barWrapper li.element2{margin-left:50px;}
statisticWrapper .barWrapper li.element3{margin-left:100px;}
statisticWrapper .barWrapper li.element4{margin-left:150px;}
statisticWrapper .barWrapper li.element5{margin-left:200px;}
The code actually works, but when i want to have a responsive site, i have to change the margins in each media query and so.. There have to be a better method to solve my problem :(
This is what i actually have: http://skruffes.bplaced.net/test.html
This is what i want:
Another way would be to use vertical-align and display:inline-block or even inline-table to go a bit further.
gradient and box-shadow can help too to improve styling . example : DEMO
style attribute can be set from class and removed from HTML.
.statisticWrapper {
float:left;
border:solid;
margin-bottom:25px;
}
.barWrapper {
width:494px;
height:250px;
line-height:275px;
text-align:justify;/* spread evenly */
background:lightgray repeating-linear-gradient(to bottom, transparent 0 , transparent 24px, gray 24px, gray 25px);
}
ul {
margin:0;
padding:0 50px 0 0;/* add padding on right, left has got an empty pseudo element using that much space */
list-style-type:none;
height:100%;
line-height:1em;
box-shadow:0 15px 15px gray
}
ul:before {/* handy once you have nothing up to 100% :) */
content:'';
padding-top:275px;
display:inline-block;
vertical-align:bottom;
}
ul:after {/* triggers justify like in flex model by adding a virtual line */
content:'';
display:inline-block;
width:100%;
height:0px;
padding-right:50px;
}
li {
width:40px;
display:inline-table;
vertical-align:bottom;
background:lightgreen;
padding-bottom:25px;
position:relative;
box-shadow:0 0 1px 1px;
}
li span {
display:table-cell;
vertical-align:middle;
text-align:center;
background:green;
}
.h10 {height:10%;}
.h20 {height:20%;}
.h30 {height:30%;}
.h35 {height:35%;}
.h40 {height:40%;}
.h50 {height:50%;}
.h60 {height:60%;}
.h70 {height:70%;}
.h80 {height:80%;}
.h90 {height:90%;}
.h100 {height:100%;}
/* extra , demo purpose to center X,Y body*/
html {
display:flex;
min-height:100%;
}
body {
margin:auto;
}
free interpretation of your chart possible through CSS and static position:
The easiest way would be to float li elements to left and move position: relative; from .barWrapper to li element. Then position span with bar label absolutely from bottom. Then you can forget about any additional classes or anything for individual bar.
Demo on JSFiddle
Note: I've removed unnecessary code and added <em>s to position bar label on the bottom to make it look better.
EDIT: If you want label to be over the bar as in your picture simply change bottom: 0; to bottom: 100% in em styling - JSFiddle
UPDATE:
Or you can do that even better by setting display: inline-block; to li so then you can set height directly on li not on inner span as in my first solution so you don't need additional element. em is used only to get labels over the bar.
Demo on JSFiddle
i've been designing an menu for my website. i've reached an issue with converting in to html/css. The idea is to have an divider line on each side of the text and on mouse over the navigation lines will disappear and show the hover image. but whatever i do the line is still there on one of the sides.
An image of my navigation menu
nav-lnie.png: is just only the line
hover.png is the whole mouseover image
does anybody have a solution or an explanation how to do this?
css looks like this:
.navigation{
width:370px;
float:left;
position: absolute;
left: 300px;
background:url(../images/nav-lnie.png) repeat-y 0 0;
padding:0 0 0 4px; font-size:14px;
font-family:Arial, Helvetica, sans-serif;
color:#fff; text-shadow:1px 1px 1px #333
}
.navigation ul li{background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0;
}
.navigation ul li a{
display:block;
float:left;
width:90px;
height:38px;
padding:70px 0 0 0;
text-align:center;
color:#fff;
text-decoration:none;
}
.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
}
And html like this:
<div class="navigation">
<ul>
<li>Videos</li>
<li>Top Videos</li>
<li>Upload</li>
<li>FAQ</li>
</ul>
</div>
It's most likely due to the margin code you have here:
.navigation ul li{
background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0;
}
Since there's a 2px margin on the right of each menu item, the left margin won't get hidden if you mouse over the next element. If the margin isn't really needed, you can remove it and it should work fine, given that there's enough space. If it's necessary, then on the hover command, you can change the spacing on the element:
.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
margin-left: -2px;
padding-left: 2px;
}
Of course, it's a rough hack to fix the problem. Spacing can be adjusted on both ends as well.
I am making a vertical list of links, but I don't want just plain text, I want a background. I have added this, and have set "padding-right" and added 25px. After this, I noticed that the sizes are different depending on text.
I realize that I could just edit it in HTML, but I also want it to change depending on if its being hovered or not.
Also, I tried setting the width, but that did not work.
Thanks in advance.
HTML
<ul id="sidelinksleft">
<li>Quick Start</li>
<li>Tag Helper</li>
<li>HTML</li>
<li>CSS</li>
<li>Photoshop</li>
</ul>
CSS
#sidelinksleft{
width:90%;
margin-left:auto;
margin-right:auto;;
height:25px;
position:relative;
clear: right;
float:left;
}
#sidelinksleft li{
position:relative;
top:2px;
padding-right:20px;
list-style-type: none;
}
#sidelinksleft li a{
color:#777777;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#B2FF99;
height:17px;
position:relative;
border:1px solid black;
padding-right:25px;
}
#sidelinksleft li a:hover{
color:#a3a3a3;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#sidelinksleft li a:active{
color:#00B2EE;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
If you remove width:90% from #sidelinksleft and then add the following they will end up as the same size:
jsFiddle
#sidelinksleft li a {
width:100%;
display:block;
margin-bottom:2px;
}
So what this is doing is expanding all a elements out to fill 100% of its parent which in turn is width of the largest child.
FYI You need to apply it to the a element (not just li) if you want the entire area to trigger the link.
Currently, your background color and padding are specified for your a elements, which vary in size depending on their contents because they're inline. This is also why you can't change the width on the anchors - they're inline instead of block.
You'd probably be better off moving your background color and border styles to the li elements, and adding a little margin and width to spread them out. Example:
#sidelinksleft li a { /* remove border and bg declarations */ }
#sidelinksleft li {
background-color:#B2FF99;
border:1px solid black;
margin: 5px;
width: 40%;
}
I am trying to create a navigation menu that is evenly spaced regardless if the menu item is 1 line or 2 lines of text. I have this working with 1 line of text but the vertical spacing of the text is off if an item hits more than one line.
My code that I have so far is below. Any help would be awesome. Thanks in advance.
jsfiddle: http://jsfiddle.net/wnfUC/
Style:
#pageNavigation {
background-image: url('../Images/TIBC_Base/nav-bg.png');
background-repeat: repeat-y;
margin:5px 0;
padding:5px 15px 5px;
min-height:125px;
}
#pageNavigation_bottom
{
clear:both;
background-image: url('../Images/TIBC_Base/nav-bg_bottom.png');
background-repeat: no-repeat;
margin:-5px 0 0 -1px;
min-height:8px;
}
#pageNavigation .navContent{ width:240px; margin:0 -10px; }
#pageNavigation ul { list-style-type: none; margin:0; padding:0; }
#pageNavigation ul li { display: block; height:57px; border-top:0px #E1E1E1 solid; border-bottom:1px #E1E1E1 solid; text-align:center; overflow:hidden; }
#pageNavigation a {
color:#485963;
font-size:16px;
text-decoration:none;
text-shadow: 0px -1px #EEEEEE;
display:block;
height:57px;
}
#pageNavigation a:hover
{
background: #FAE2AD;
color: #485963;
}
#pageNavigation a.NavigationSelected
{
color:#F9F9F9;
background: #A5B5BE;
text-shadow: 1px 1px #485963;
font-weight: normal;
}
HTML
<div id="pageNavigation">
<ul class="navContent">
<li>Services</li>
<li>Analysis</li>
<li>Strategic Planning</li>
<li>International Market and Competitor Research</li>
<li>Budgeting and Forecasting</li>
<li>International Cultural Liaison</li>
</ul>
</div>
You can use CSS table layout (not HTML table element, eh!) to achieve this: http://jsfiddle.net/PhilippeVay/ZszJm/
ul is displayed with the same algorithm as a table, links with the same algorithm than cells and here li are displayed as rows as it's vertical. And then you can play with vertical-align as much as you want :) (in your case middle value)
You can add table-layout: fixed to ul and then browsers will use the other algorithm for displaying tables, the one that doesn't try to adapt widths and heights of cells to their content but will stick to what CSS rules say.
Compatibility: IE8 and above. It won't be centered in IE7 and 6, not a big deal.
EDIT: with this method, you don't need to know in advance which items are longer than others. Browsers will figure that.
Vertical alignment of text is generally accomplished using line-height: http://jsfiddle.net/Shmiddty/wnfUC/1/
#pageNavigation a {
...
height:57px;
line-height:57px;
}
#pageNavigation a.two-line{
line-height:20px;
padding-top:10px;
}
Note that I added the class two-line to the anchor element that spanned two lines.
You could use this method: http://css-tricks.com/vertically-center-multi-lined-text/
There are also some other methods you could use, but they require extra HTML markup, which this one does not.