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!
Related
I have four icons I've set to display inline and I'm now trying to center the list they're contained in within a div.
Here's the HTML:
<div id="social_media">
<ul>
<li><img src="../images/social_media_icons/facebook_icon.png"></li>
<li><img src="../images/social_media_icons/wikia_icon.png"></li>
<li><img src="../images/social_media_icons/rss_icon.png"></li>
<li><img src="../images/social_media_icons/mail_icon.png"></li>
</ul>
</div>
And the CSS:
#social_media
{
width:220px;
margin:10px auto;
padding:0 2px;
}
#social_media ul li
{
display:inline;
margin:0 3px;
list-style-type:none;
}
The four icons are 48px square for a total of 192px wide, and each have horizontal margins of 3px for another 24px wide, adding to the whole list being 216px wide. The div they're contained in (social_media) is 220px wide with 2px of horizontal padding for 216px of space in which the list, in theory, should fit perfectly.
However, when I actually do this, the fourth icon gets bumped down to the next row, directly under the first. When I change 3px to auto, they all fit on the same row, but are too close together. And regardless of what I do, the list is aligned to the left instead of the center where it's supposed to be.
Help?
Given the CSS you posted, you may have forgotten about the default padding on the ul element. In most browsers, it is 40px. Resetting this value, however, doesn't solve the entire issue, as the real issue lies in the fact that inline elements respect the whitespace in the markup and generate ~2px spaces when present. This is the root of the issue; i'd therefore suggest taking a look at this answer, which addresses this issue specifically.
Given that there isn't any text involved, you could set font-size:0 on the parent ul element, thus removing this space. Assuming there actually is text, you would simply specify a new font-size on the child elements affected.
EXAMPLE HERE
#social_media ul {
padding:0;
font-size:0;
}
Alternatively, the best approach would be to actually remove the whitespace from the markup. Take a look at the markup in this example.
Try
#social_media ul li img {
padding: 3px;
}
I have this code:
<ul>
<li><img src="foobar.jpg" /></li>
<li><img src="foobar.jpg" /></li>
</ul>
li {
width: 100px;
height: 100px;
background: red;
width: 500px;
}
img {
margin: 0 auto;
display: block;
}
As you can see here, on both sides of the images I can click also..why? I just want to be clickable the images.
As I noted in my comment, because you set the display to block on your image it therefore takes up the full width of its parent. That's what block elements do. One way around that is to remove the rules you set on the image tag, and add a text-align:center rule to your list item rules.
jsFiddle example
Your img tag is displayed block. Turn that off to prevent the entire li from being clickable.
This happens because you are displaying the images as blocks and width will default to the width of the li
On your img, you set the display to block. This means that it will take up the whole line, and nothing else may appear on that line. Because you didn't set a width, this means that the img container will take up the whole line. You wrapped the a around that, so the whole line will be clickable. Either set a width on your img, or take out display:block
The anchor tag fills the list item element from left to right. So it is not the list element you click, but it's content, the anchor. Just as normal...
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 have the basics of my navigation menu set up by floating three divs left within a #nav div that is centered using margin:auto;.
Only one of these nav menu options requires a drop down menu. I'm assuming that I'd have to bring the drop down menu out of normal flow so that it doesn't move the other floated objects.
This is my first project so I'm just trying to conceptually wrap my head around how to position this menu. I'm afraid that if I do a position relative with pixel values the menu might not show up under the original link depending on the user's screen size/resolution.
The red X marks the location of where the drop-down should appear.
Should this un-ordered be nested under the portfolio list item, or should it be a separate un-ordered list that is somehow positioned under the portfolio link? I'm afraid that if it's nested it might knock the bottom-border down with it?
I can post code, but I'm sort of at a loss on where to begin here. Looking for a push in the right direction!
Thanks
This is generally done this way:
<ul class=menu id=leftLinks>
<li>about</li>
<li>portfolio
<ul class=submenu>
<li>Submenu item</li>
</ul>
</li>
</ul>
.menu > li {
position: relative;
}
.submenu {
position: absolute;
left: 0;
top: 100%;
}
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.