I am having trouble with aligning jQuery tags, I've used a bit of a code and changed it and styled it myself, however the align seems to be leaving a space on the left, which I don't want, and I'm not sure how to get rid of it. Here's what I mean...
http://postimage.org/image/8k5rcz941/
This is the CSS code:
.usual {
color:#111;
padding:15px 20px;
margin:8px auto;
}
.usual li { list-style:none; float:left; }
.usual ul a {
display:block;
padding:6px 10px;
text-decoration:none!important;
margin:1px;
margin-left:0;
font:10pt Verdana;
color:#FFF;
background:#444;
}
.usual ul a:hover {
color:#FFF;
background:#111;
}
.usual ul a.selected {
margin-bottom:0;
color:#fff;
background:#003663;
border-bottom:1px solid snow;
cursor:default;
}
.usual div {
padding:10px 10px 8px 10px;
*padding-top:3px;
*margin-top:-15px;
clear:left;
background:snow;
font:8pt Verdana;
border: 1px solid #d0d0d0;
}
.usual div a { color:#000; font-weight:bold; }
Hope you can help me shift this to the left, I've been trying to figure out what it is, and just can't :(
Thanks and regards.
I'm guessing that the ul has a margin or padding applied. Remove it:
.usual > ul {
margin: 0;
padding: 0;
}
.usual has a left padding of 20px. Is that what you're trying to get rid of?
Inspect your elements in either Google Chrome or using the Web Developer add-on for FireFox. Find the element and check all it's inherited styles; chances are likely, like icktoofay says, you probably have inheritance somewhere. If doing like he said, adding margin & padding = 0 for the UL, you can try the hack !important
.usual ul {
margin: 0 !important;
padding: 0 !important;
}
But note that if you have any other margin/padding that is used on the UL element, you will lose those, either using !important or not because margin: 0 sets all 4 sides. To target just the left side:
.usual ul {
margin-left: 0 !important;
padding-left: 0 !important;
}
Sometimes the hack won't work, that's why it's important to check your inheritance by inspecting the elements in the browser first.
Related
I'm trying to achieve the separator effect using border-right on my menu.
Here's my css code
ul.navigation li a {
text-decoration:none;
float:left;
width:252px;
height:50px;
display:block;
background-color:#ccc;
text-align:center;
line-height:45px;
color:#000;
position:relative;
border-right:1px solid #333;
}
ul.navigation li a:last-child {
border:none;
}
What am I doing wrong? I tried border-left and :first-child too.
I am thinking you mean to do this
ul.navigation li:first-child a
Because every a is the first child of its parent li. You mean the a inside the first li item. :)
Your CSS snippet is full of bad practices.
Below is an example of how you should style it and how you can add a separator between each list item.
.navigation { overflow: hidden; } /* Explanation 1 */
.navigation li { float: left; }
.navigation li + li { /* Explanation 2 */
border-left: 1px solid #333;
}
.navigation li a {
display: block;
width: 252px; /* Explanation 3 */
padding: 5px 0; /* Explanation 4 */
background-color:#ccc;
color:#000;
text-align:center;
}
Float containment: read this article.
Here I answer your question: applies a border left from the 2nd li to the last one, using the adiacent sibling selector +.
Are you sure you want to have a fixed width?
No fixed height and line-height to vertically align the text. line-height doen't need a unit by the way. Read this article.
Here is a live example: http://dabblet.com/gist/4968063
I have created a horizontal nav menu in css, floated left. It works fine.
When I change the float to right (and reverse the order of top level li's), everything is fine except that the sub-menus are shifted left a bit (and so don't align vertically with the top-level menu items).
I tried changing the left command in li:hover > .nav, but that didn't help. Can anyone see what needs to change to get vertical alignment of the top level nav items and the items in the sub-menus?
Thanks.
My CSS is:
#nav, .nav, #nav .nav li {
margin:0px;
padding:0px;
}
#nav li {
float:right;
display:inline;
cursor:pointer;
list-style:none;
padding:10px 30px 10px 30px;
border:1px #000 solid;
position:relative;
background: #990000;
}
#nav li ul.first {
left:-1px;
top:100%;
}
li, li a {
color:#fff;
text-decoration:none;
}
#nav .nav li {
width:100%;
text-indent:10px;
line-height:30px;
margin-right:10px;
border-top:1px #000 solid;
border-bottom:1px #000 solid;
border-left:none;
border-right:none;
background:#990000;
}
#nav li a {
display:block;
width:inherit;
height:inherit;
}
ul.nav {
display:none;
}
#nav li:hover > a, #nav li:hover {
color:#990000;
background:#fff;
}
li:hover > .nav {
display:block;
position:absolute;
width:200px;
top:-2px;
left:50%;
z-index:1000;
border:1px #000 solid;
}
li:hover {
position:relative;
z-index:2000;
}
#basic li {
color:#000;
}
When switching from float: left to float: right, did you exchange all left-related properties to right and right to left?
Examples:
replacing margin-left by margin-right
exchanging values. margin 1px 2px 3px 4px becomes margin 1px 4px 3px 2px
In addition to trying the answer above, you could bump the sub menus over using position:relative and either the right or left properties. They will move the menus however many pixels you specify relative to the position they are falling naturally.
I am trying to make a list of links, 6 links in a row.
The problem is I do not know how many links there will be. It could be only 2 or 25.
Please take a look at this fiddle.
I must be doing something wrong with the css because:
If for example there are just 3 links, the border of the .toplist div is not covering the whole length of the wrap div.
Also, I can't get more then two divs aligning before a new row appears.
This is not that important, but In IE6, even if I use overlow:auto I don't see a background for my ul (if I set one), and also, if I set margin-bottom for the ul I don't see it.
Any ideas on whats wrong with the css?
Ty
I made a few changes to your original fiddle to my fiddle. Check this out:
.wrap {
width:960px;
margin:0 auto;
border:1px solid #000
}
.toplist {
border:1px solid #0f6;
padding:0 0 0.5em 1em
}
.toplist ul {
list-style:none;
overflow:hidden;
margin:0;
padding:0;
}
.toplist ul li {
float:left;
width:15%;
margin-right:1em;
line-height:1.4em;
border-bottom:solid 1px #222;
}
.toplist ul li a, .toplist ul li .cat {
display:block;
font-size:0.7em;
}
.content{
background-color:#FF2E2E;
color:#FFF;
margin-top:100px;
heyight:40px
}
Hope this works. :) It works in IE 6 too! :)
My following code is not working.Means border and background color is not working
#navigation ul
{
background-color: #85A157;
border:3px solid white;
}
here is my fiddle http://tinkerbin.com/ooJNXsdD
i want like this
please help in correcting my fiddle.
try setting a height on the element like so:
#navigation ul
{
background-color: #85A157;
border:3px solid white;
height: 20px;/*added height*/
}
i hope this helps. i added the change to tinkerbin, not sure if it took :)
Use overflow: hidden on your <ul>, like this : http://tinkerbin.com/AMBfS3MY
After testing this on your Tinkerbin, this worked for me. You need a clearfix. In your CSS:
.clear {
clear: both;
}
Then in your HTML:
<ul>
...
<li class="clear"></li>
</ul>
And if you want the navigation bar to flush against the top image, add the following margin-top in your CSS:
#navigation ul
{
margin-top: 0;
...
}
I have just updated your fiddle, I hope you can see where your problems where.
http://tinkerbin.com/g63CbYYZ
For example:
ul has usually a margin. So you need to reset it.
Better define styles on div not on ul.
And a lot more...
This should do it for you.
#navigation ul
{
background-color: #85A157;
border:3px solid white;
margin:0px;
height:22px;
}
#navigation ul li
{
list-style:none;
float:left;
}
#navigation ul li a
{
color:white;
text-decoration:none;
margin:0px 37px 0px 0px;
}
I'm pretty new to CSS but I'm hoping this is just something obvious I'm missing.
On www.sonogenics.co.uk, the Twitter block appears to be floated to the right or have 40px left margin. I have explicity set the margins to be 0px and cleared the floats etc but there has been no effect. From the Firefox WebDeveloper addon, it appears to be a problem with the .tweet ul but I can't seem to fix it. Can someone explain to me what is going on?
Cheers
Chris
It actually has left-padding and not margin. This is the default styling of a ul element. To cancel it, you should put padding:0; in the #tweet ul style declaration.
A couple of suggestions:
Use Firebug for development, it is far superior to the WebDeveloper add-on. I was able to immediately spot the problem using it
Use a CSS reset stylesheet, to remove those default style declarations and normalize it across browsers (the defaults are not consistent between browsers). The best known is the CSS reset by Eric Meyer, which I personally use on every site I develop.
#chris robinson; i checked your twitter/style.css your main problem is that you declare css wrongly that why the properties are not working.
wrong css declaration :
.twitter #tweets {
background: #111;
padding: 0 0px;
padding-bottom:20px;
text-align:left;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:2px;
margin:0px;
}
.twitter ul, li {
list-style-type: none;
background: #222;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:1px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
margin:0px;
-webkit-padding-start:10x;
}
.twitter #tweets a {
color: #AAA;
text-decoration:none;
}
.twitter #tweets a:hover {
color: #AAA;
}
if you check your html your twitter class is inside #tweets not outside of it . So, first correct your css .
Correct css:
#tweets .twitter {
background: #111;
padding: 0 0px;
padding-bottom:20px;
text-align:left;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:2px;
margin:0px;
}
#tweets ul.twitter li {
list-style-type: none;
background: #222;
-moz-border-radius: 5px;
border-radius: 5px;
border-color:#AAA;
border-style:solid;
border-width:1px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
margin:0px;
-webkit-padding-start:10x;
}
#tweets .twitter a {
color: #AAA;
text-decoration:none;
}
#tweets .twitter a:hover {
color: #AAA;
}
This should fix it
#tweets ul { padding: 0px; }
uls have a left padding by default in most browsers (i.e. WebKit 40px).
Your styling isn't being applied because of your css selector. Your selector is
.twitter ul, li {}
while your html for the elements are
<div id="tweets">
<ul class="twitter">...</ul>
</div>
Your css selector says "style all ul and li that are descendents of any element with the 'twitter' class". Since the ul isn't contained in an ancestor element with the "twitter" class, it isn't being styled with that rule.
If you want the rule to actually apply, you can either just use the selector
.twitter {...}
or you can re-class the parent div with "twitter",
<div id="tweets" class="twitter">
<ul class="twitter">...</ul>
</div>
or you can use this selector instead,
#tweets ul, li {...}
which more closely matches your original selector.