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;
}
Related
I've been trying format a new webpage header/nav bar with the html5 mark-up. I'm having difficulties getting my css to format things correctly. Using divs and tables I was able to produce the following:
I want to produce the above image without using divs or tables, the following is a summary of my attempt that didn't work. I believe my understanding of display:table-cell is missing something.
Changing to the html below and using the following css attributes display:table,display:table-row,display:table-cell,ect. is causing an undesired anchor height - I poked around with some dev tools and I'm fairly certain the anchor height is the issue. (complete css is on this JsFiddle):
<header>
<nav>
<img class="logo" src="img.png"/>
<h1>Home</h1>
<h1>Blog</h1>
<h1>About</h1>
<h1>Contact</h1>
</nav>
</header>
trying to set the anchor and header tag max-height:100px didn't work (along with a handful of other attempts), it keeps getting computed to ~130px.
Please see JsFiddle for the code.
replace your CSS with mine
nav h1{
color:lightgray;
font-size: 150%;
border-left:2px solid whitesmoke;
padding:0px;
min-width:50px;
padding-right:30px;
}
nav a{
float:left;
width:20%;
max-height:100px;
}
nav a h1:hover{
color:lime;
}
nav{
height:100px;
background-color:#000000;
box-shadow: 0px 0px 10px #000000;
}
header{
background-color:black;
background-position:-50px 0px;
float:left;
width:100%;
max-height:100px;
}
header img.logo{
background-size:contain;
background-repeat:no-repeat;
width:430px;
float:left;
}
key is to add float:left instead of using display:table,display:table-row,display:table-cell
The extra 30px is coming from the 15px padding on the h1 tags as padding is not included in the max-height
Alternative Solution and explanation using display:table,display:table-row,display:table-cell
Alternatively I figured out what was causing the obscure height. when using table, tr, and td tags the max-height of the table-cell (td) was never overwritten.
When I changed the tags to header,nav elements the anchor tag, even thought it had display:table-cell and max-height:100px was still allowing the height to be overwritten, by it's internal contents, the h1 tag. The h1's margin was causing the height of the anchor tag to be higher than desired. I resolved the issue by setting margin:0px of the h1 tag.
Using float it caused the anchor tags to re-render below the logo. I wanted it to stay in scale in the same line. I didn't specify this is my question, so I'm leaving the previous selected answer selected.
This fiddle shows I can widen/narrow the page and keep the navigation elements scaled and spread out accordingly.
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 menu, based on nested, unordered lists. All styling and display is done via css.
The menu is wrapped in a fixed-width div. For some top-level items, the submenu contains too many items for one line and these wrap onto a second or even third line, expanding the div height. This works fine.
What I am trying to do is to add a horizontal line/divider/border between the rows of submenu items, irrespective of the number of rows, and equal in width to either the row below or above (preferably below). Obviously, no line will be present if there is only one row of items.
I tried to add a background along the top of the entire <ul id="submenu"> and then remove it from just the first line using ul#submenu:first-line{}, then realised that this cannot be done (headslap).
I then altered the structure of the menu to use <p> elements nested in divs, again using div#submenu:first-line{}, but testing this gives me strange results. For example, a background colour will show in the first line, but only half the height of the submenu items; background images appear halfway up the submenu items. Sometimes nothing shows until I click on the current top level menu item.
I even tried replacing the list structure with a single <p> element, containing a series of <a> elements, and got the same results.
The evidence suggests that I am not using the :first-line pseudo-element properly, but reading around the web suggests that this should work.
Any suggestions as to what I am doing wrong and how to get these horizontal lines, preferably with CSS and without JS?
Here's my code:
#subMenuContainer {
width:100%;
margin-top:20px;
}
#subMenu {
width:600px;
margin:0 auto;
text-align:center;
background:#ddd;
}
#sub {
border-top:2px solid green;
padding:0px;
line-height:30px;
}
#sub::first-line {
border-top:2px solid red; /* doesn't work */
background-color:pink; /* works */
color:yellow; /* doesn't work */
}
#sub p {
display:inline-block;
padding:0px;
}
#sub p a {
padding:0px 0px;
line-height:1em;
}
<div id="subMenuContainer">
<div id="subMenu">
<div id="sub" >
<p>MenuItem1</p>
<p>MenuItem2</p>
<p>MenuItem3</p>
<p>MenuItem4</p>
<p>MenuItem5</p>
<p>MenuItem6</p>
<p>MenuItem7</p>
<p>MenuItem8</p>
<p>MenuItem9</p>
<p>MenuItem10</p>
</div>
</div>
</div>
And the same in jsfiddle.
I think you should be using the :first-child rather than the :first-line pseudo class.
:first-line refers to the first line of a text element
:first-child refers to the first child element of a parent. e.g. the first li in your ul.
See http://www.w3schools.com/css/css_pseudo_classes.asp for more details.
If that doesn't sort you out, can you post your markup?
V.
I am attempting to create a visual element using DIV elements and CSS which should display data in the format demonstrated below.
[-----50%-----|--25%--|--25%--]
When using the code and CSS I've specified below, my final element always spills onto the next line and the CSS percentage values I'm specifying don't seem to create the layout properly.
Could anybody suggest a better way to do this?
My HTML
<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
25%</div>
<div class="vi-internal-element" style="width: 50%;">
50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
<li>
<div class="legend-blue">
</div>
Sales</li>
<li><span class="legend-tan"></span>Processed</li>
<li><span class="legend-grey"></span>Pending Processing</li>
</ul>
My CSS
.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}
The reason this happens is that with inline or inline-block, white space in the element will affect the rendering (adds space). Here is your demo working with white space removed, no changes to the CSS: http://jsfiddle.net/fZXnU/
Removing white space is not trivial though, so you'd be better off floating the elements (which triggers display:block). Working demo with plenty of white space: http://jsfiddle.net/fZXnU/1/
You can use float: left, position: relative, and then define width in percentage as you are.
I modified your code to use float here: http://jsfiddle.net/Z3kdP/.
If you remove the white-space between the divs then it works as intended.
http://jsfiddle.net/TeJuU/
EDIT: See this question: How to remove the space between inline-block elements?
You can make font-size: 0 on the parent element if you don't want to edit your html.
http://jsfiddle.net/TeJuU/1/
All of those elements have margin and padding with them as well as the percentages creating rounding errors during calculation. So you need to make sure you set, or take into consideration, what margin is doing to this. For rounding errors, it's typical to let the percentages add up to something less than 100% but then add margin: auto to center the whole thing.
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!