html - List Item, Two Hyperlinks CSS Design -
Write me a single & lt; Li & gt;
element is required, with two buttons inside it as follows:
& lt; Li & gt; & Lt; A href = "#" class = "left" & gt; Title & lt; / A & gt; & Lt; A href = "#" square = "true"> & Lt; / A & gt; & Lt; / Li & gt;
With a layout of buttons similar to the following:
____________ | _________ | __ |
The entire button will expand in the background, on the left & lt; A & gt;
The tag will be filled with text, with the alpha transparent on the right & lt; Li & gt;
Button to overlay the background of the element This is the CSS I got.
# left ul #main-menu li.li- 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; Swim 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; 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-double center right; }
I am doing the same with all other list items, except that they do not have the "add" button on the right side. The problem I am facing is that a second pixel difference is found in other and lt; Li & gt;
Elements are being pushed down I'm not sure what I'm doing wrong actually I can do margin-down: -2px
but whatever it does 2 A field of pixels is created which is not clickable in the element below.
edit
this was actually float
# left ul # main menu li.li- add a. Right {float: left; Text-align: center; Font-size: 16px; Padding: 4px 0 0; Margin: 0; Height: 21px; Width: 27px; font-weight: bold; }
float: left
should not contain it, due to some reason the additional difference can be made shrug .
I think your problem is a red herring, I can add good list Was:
height: 14px; / * Add # left ul # to the main-menu. Li.li- Add a.left '* /
You did not specify the height for any tag, this auto height was long
Good luck!
Comments
Post a Comment