basically i have a ul list
<ul>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
<li style="background-image:url(images/thumbs/spaceinvader.jpg);"></li>
</ul>
now the styles for the list is:
li {
display:inline-block;
margin:5px 0 0 8px;
width:73px;
overflow:hidden;
}
li a {
display:block;
background:url(../images/gtborder.png);
width:73px;
height:55px;
}
li:hover {
background-position:0px -55px;
}
Ok now, the gap between each list should be exactly 8px but when i view it in a browser... its mroe then 8px. Its because of the newline.
If i had all the li tags on one line, it would be fine but i dont really want to do that.
Is there a way i can keep my html as it is and just edit the css so this space isnt there anymore?
Well, since you set the list items to be inline-block the whitespace between these items in your markup (i.e. the indentation) is what is causing trouble here. Two list items are therefore seperated by a whitespace and the margin on the left of each list item.
Solution: Try to float the list items or get rid of the whitespace in between the list tags.
Good luck.
Got it
There is a space between each li tag - I removed it:
http://jsfiddle.net/j5yDd/1/
original answer::
You also have a top margin of 5px so the space will be 13, you need to remove the 5px top margin.
er. are you sure this is the exact css - as written you have a top margin of 5px and a left margin of 8. I don't see any bottom margin at all.
http://jsfiddle.net/j5yDd/
Related
I have a div and a ul that I'm trying to float to create two columns. The items within the ul are also floated so they will expand horizontally before wrapping vertically:
http://jsfiddle.net/3dhHe/7/
<style type="text/css">
ul {list-style-type: none;}
li {float:left; width:275px; min-height: 50px; padding: 12px; border-radius: 4px; border: 2px outset #eee;}
.float-right {width: 300px; float: right; margin-left: 25px;}
.float-left {float: left;}
</style>
<div class="float-right">
This content should float to the right
</div>
<ul class="float-left">
<li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>
<li>Item 5</li><li>Item 6</li><li>Item 7</li><li>Item 8</li>
</ul>
If I remove the float from the list items, then everything works as expected, however, when the li elements have a float applied, the ul element seems to 'lose' it's float.
Is there a way to force the ul to float to the left of the div, while allowing the contents of the ul to float?
Note: I need the width of the ul to be dynamic, so I can't set an explicit width to it.
Thanks!!!
Update
I'm trying to achieve something like this:
The text on the right can have a static width, but the ul containing the boxes should not have an explicit width (so that if the width of the browser is increased, then the "Test 3" box will move to the first row).
The problem I'm having is that if I don't set a width on the ul, then the text content is moved above the ul:
Is there a way to position the div first, then restrict the ul to only use the remaining space?
To Achieve your goal:
1. All li inside the ul must be floated horizontally on 1 line.
When this is achieved:
2. The ul must find enough space beside the div to float beside it.
You must give the ul a max-width, to force it not to expand and take space as much as it wants, make sure its enough so that all of its children li are floated beside one another.
If the max-width isn't enough, then the li will have no strength to say NO!, and they will simply take new lines below each other.
Check it out : http://jsfiddle.net/AliBassam/3EmdM/
Why is this happening?
When you are telling the li to float:left; it is as if you're telling them : Try your best to float left, take every space you can so you can float left, cry and complain to your Mum (ul) and tell her that you MUST float left! All of us on the same line!.
When the ul noticed that not all its children li have floated on the same line, it takes a new line below the div so it can achieve that.
Here's another example, notice that when the 2 li have floated beside each other (1), and when there's enough space for the whole ul to be beside the div(2), it will float beside it.
Here's another example with 2 divs, same result, the second div will not float until all its children div have floated inside of it (1), and enough space have been found beside the other div(2).
UPDATE
What you need is to have both the div and the ul inside a Parent Div, this div will have a position:relatve; and min-width, giving it a minimum width will allow it to expand when you maximize the browser, and it will allow it to become smaller but only to a limit.
Then give the child div the static width, let's say, 250px, and give the ul a position:absolute; with right:250px or a little bit more (consider it as a margin-right).
<div style="position:relative; min-width:600px;">
<ul style="position:absolute; right:250px; left:0px; ">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
</ul>
<div style="float:right; width:250px;">
This content should float to the right
<br />
This content should float to the right
<br />
This content should float to the right
<br />
This content should float to the right
</div>
</div>
Check it out : http://jsfiddle.net/AliBassam/FFrev/
I think the best way to describe my problem is to show you.
http://yourinternship.hailstormcommerce.com/?page_id=21
On the sidebar on the left there is a widget that uses ul, a the moment I have a bottom-border applied to the first li and then the border turned off for any child li after that.
My issue is , the border for "Your Internship" at the very top of the widget doesnt appear until its submenu is finished, ie above "Accomodation". But I want it straight underneath "Your Internship" , like the rest of the menu pages. So basically its bordering the entire li. I understand why this is happening, and the only way I was able to get around it was by putting a border underneath ul li a but the problem is this ends up being very messy, for controlling the width of the border etc. (using padding etc).
Has anyone any suggestions on how I could apply a border to the first link?
Also, on the same note , is it possible to remove the last border under "Contact Us"?
Im asking the second question here as well as I guess my overall problem has to do with styling particular parts of a widget from wordpress.
Thanks in advance for any help. Any questions let me know, because I may have made that sound confusing.
Cheers
It's possible. I made a simplified example that you can learn from:
<ul class="widget">
<li class="active">Your Internship
<ul>
<li>Benefit of our program</li>
<li>Students</li>
<li>University</li>
<li>Why Choose Us</li>
<li>Your Internship Process</li>
<li>Your Language Course</li>
</ul>
</li>
<li>Your Accomodation</li>
<li>Your Employers</li>
<li>Information for Interns</li>
<li>Apply Now</li>
<li>Contact Us</li>
</ul>
To get rid of the border on the active and last item use this pseudo selectors:
.widget > li:last-child, .active {
border: none;
}
To re-add a border on the "active" class, I used a pseudo element:
.active:before {
content: "";
width: 100%;
position: absolute;
top: 25px;
border-bottom: 2px solid salmon;
}
Demo
It might be a bit messier than you want to, but here is a suggestion.
To get the line directly underneath "Your Internship" (but still keeping it above "Your Accomdation") you can do the following:
#menu-your-internship-sidebar .current_page_parent > a {
display: block
border-bottom: solid 1px #DDD;
}
For removing the last border under "Contact Us" you just set the li:last-child bottom border to 0, like this:
#menu-your-internship-sidebar li:last-child {
border: none
}
EDIT:
If you want to remove the border above "Your Accomdation":
#menu-your-internship-sidebar > li.current-page-parent {
border: none;
}
Considering this code:
<div class="menu">
<ul>
<li class="active">I'm active!</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
My .menu div has a 1px black border, and my .active list element has a white background. Now, I want my .active list element to be "outside" of the div, and overlap with the border, hiding it partially with the white background. How is this achievable?
To illustrate what I want;
This is what I have at the moment, coded up;
http://i.stack.imgur.com/cVZHt.png
And this is what it should look like;
http://i.stack.imgur.com/gp2k2.png
Use relative positioning.
.menu li {
position: relative;
top: 1px;
}
Couple of things to note to make sure that this works:
The fact that this is on all li elements is intentional. If I only put it on the selected one then the selected one would appear shifted down.
This will only work if the blue background is a part of the ul tag and the li tag has a transparent background (other than the image of course). Otherwise you might cover up all of the border from the ul element.
And one more thing (just 'cause). You have this:
<div class="menu">
<ul>
...
</ul>
</div>
The ul tag is perfectly capable of having a class by itself. Unless you have a very good reason not to, just do this:
<ul class="menu">
...
</ul>
Some CSS black magic for you.
Working example below which should work cross browser. Please ask if you would like an explanation how it works.
JSFiddle
Enjoy.
Is it the z-index you're looking for?
div.menu li.active { z-index: 99; ... }
then you could use negative margins to position it "outside", or better yet nest another element that you can position relatively.
I have searched through the forums and good old google and have found many answers but non seem to work on my page.
Anyway here is the question,
I have 2 divs that are positioned side by side, and I wish to get rid of the whitespace
www.blisshair.com.au/test.html :(http://www.blisshair.com.au/test.html)
I want to the black from the "link 1" to join to the main content in the center,
Any help would be greatly appreciated,
Thank you.
EDIT: Tried opening in Internet explorer 8 and it seems top exactly how I want it, besides the 2 bottom divs not lining up,
Is it possible to do this with an UL and SPAN tags ? I am aiming for a tabbed look, for example, when you click on link 2, the background around link 2 goes black and the black color "flows" into the main content page, sorry if this doesnt make sense, early AM here :D
Thanks again
For starters: don't use tables in a non-semantic manner, and don't use inline styles when you can avoid it.
You've got a list of links, so put your links in a list:
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
...
</ul>
The problem you're having is that you only put the class that produces the background color (menu1) on the first item in your table.
You should give your parent item a class or id instead:
<ul id="nav">...
And then give the entire nav a background color (You'll also have to remember to get rid of the default padding and margin on the nav):
#nav
{
background-color: #000000;
margin: 0;
padding: 0;
}
You might check into css resets like here: http://meyerweb.com/eric/tools/css/reset/
Basically, browsers will default to have margins or padding between div elements or elements that have their own 'block' (h1, h2, and several others).
You'll need to set margin and padding levels to zero, as a starter.
Zounds!
Is this a solution? Certainly seems so!
Quick and dirty:
Float the menu left and give it 100px width;
Use a left margin for the content, do not float it;
Use background color on a container of both the menu and the content;
Realize how much trouble you're going to have if this was a problem already;
Persevere, that is to say DO NOT GIVE UP, no one was born knowing it! :)
The harder it is, the more you'll learn. Expect a lot of learning. :)
The HTML:
<h1 id="header"><img src="FancyHairLogo.png" alt="ZOMG PURTY HAIR" /></h1>
<div id="textContainer">
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<div id="content">
<h2>WELCOME TO BLISS HAIR EXTENSIONS!</h2>
<p>
this is the homepage of bliss hair extebnsions, please check back soon as we are contionously updating the content on this page!
</p>
<p> etc ... </p>
</div>
</div>
And the CSS:
body {
background-color: #666;
}
#header {
text-align: center;
margin-bottom: 20px;
}
#header a img {
border: dashed 1px gray;
}
#textContainer, #header * {
background-color: black;
color: white;
}
#menu {
float: left;
width: 100px;
}
#content {
margin-left: 100px;
}
Issues
"The title's top will not line with the menu's top!"
Yes, because adjoining borders collapse and the bigger applies.
Use a css rule like content>h2:first-child { margin-top: 0px; } to quickly hack it away, but make sure to understand what is happening, it will save you braincells and time in the future.
I've used list item background images for customized bullets hundreds of times in the past, and somehow never came across this issue.
Essentially, I have an IMG floated left of the Unordered List. The bullet background images are set to top-left of each LI. However, the floated image is covering the bullets, as the browser is treating the list as if it's still full width (as if the floated image almost isn't there).
It's a bit hard to explain. So here is a screenshot with notes.
http://img695.imageshack.us/img695/1328/cssquestion.jpg
Here are some code snippets (sorry, can't upload to a server at the moment):
<h2>About Us</h2>
<img src="image.jpg" class="img-left" />
<h3>Heading</h3>
<p>Text</p>
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
</ul>
ul {
padding: 0;
margin: 0;
}
ul li {
background: url(../images/bg-main-bullet.gif) top left no-repeat;
list-style: none;
padding: 0;
margin: 0;
}
.img-left {float: left; margin: 0 19px 0 0;}
Does anyone have any ideas how to achieve my desired result?
Any tips or input is greatly appreciated!
Thanks
The default style position for lists is "outside" meaning that they appear outside of the related padding or margin. Presumably you have some margin or padding on the list or list items, pushing them past the right side of that graphic.
The fix is to set your list style position to "inside". Try adding this to your stylesheet (customize the specificity of ul to fit your needs):
ul{ list-style-position: inside; }
You need to also float the unordered list itself or set it's padding to accommodate the floated image.
So if you're floated image is 300px wide then you will want to do:
ul { float: left; }
or...
ul { padding-left: 300px; }
What currently happens is your li's bounding box begins behind the floated element. So we need to have it's parent element contain these bounding boxes. Floating the list will do this but setting the padding will do this as well.
Caveats of floating the list are obvious. Caveats of setting the padding is that if you wanted the list to flow beneath the image they will not. They will always be indented. However, for a bulleted list I would think it's best that the bullet points always be left aligned. So the padding solution is the one I would recommend!