I am trying to edit this slide show, but I don't know how to take the space out of the images, I want minimum space.
Here is the slider:
http://littleladyenterprises.com/wp-content/themes/blackchic/FullWidthImageSlider/
and here is the CSS:
http://littleladyenterprises.com/wp-content/themes/blackchic/FullWidthImageSlider/css/component.css
How do I get the images to align next to each other without the space?
Change <li style="width:20%"> to just <li> for every listitem, what is happening currently is that you have set the width of the ul to 500%, and the width of the li's inside it to 20% of that 500%. This means that every li will be 20% of 500%, this ends up looking similar to setting the width of both the ul and the li's inside it to 100%. The difference with a setup like that is that currently there is enough space inside the 500% wide ul for all the li's to float left, instead of having them all display under each other, which will happen if you set the width of both the ul and the li's inside it to 100%
It is not entirely clear what you are trying to achieve, but getting rid of the width set on the li's will definitely get rid of the extra white space to the right of the image.
Setting display: block; on the image, as you mentioned in the comments to your question, is a good idea, but it is unrelated to the white space currently visible to the right of your image. It does get rid of some white space which is added by the browser around inline elements, for images this usually means a few pixels of white space under the image.
Just add width and text-align property to container class like this,
.container{
margin: 0 auto; /* for center align*/
text-align: center;
width: 686px;
}
Related
Okay I am a newbie regarding CSS and while during a tutorial I got completely lost.
As far as I know a block element takes up a whole line. And an inline element only takes up the width and height of the element and an inline-block works like an inline element but here you can set width and height.
Okay and now the question. In the tutorial it makes an unordered list:
header nav ul li {
display: inline-block;
padding: 0;
}
There are 5 elements in the list. Now 4 of the elements is text like "Menu", "Contact us" etc. but one element in the list should be the logo image. Now to add the logo I need to do this:
header nav ul li#logo a:link {
display: block;
width: 300px;
height: 260px;
background: url('images/logo.png') center center no-repeat;
}
But what I don't get is that I first make the elements in the list to inline-block elements (which makes sense cause I want them next to each other and one of them is an image.) But why in the world do I have to turn the element in the list that I want to contain the logo image into a block element? First of all I thought it would take up the whole line (but the elements are still next to each other) and second, I already turned the elements in the list into inline-block elements? Anybody who know the answer?
Considering the few points below you should get it why the anchor has display: block
1- The display:block is set to the anchor which is inside the li... not directly to the li itself.
Thats why its still showing all li next to each other because you changed one of the inner elements inside it to block not the li itself.
2- The default display property of anchor is inline ... this means that you don't have control on width and height.
3- To be able to show background-image inside anchor you will have to set a specific width and height and thats why the display is changed from inline to block to be able to control width and height
BTW you can also use inline-block with the anchor and it will work
I need to create something like this:
And I created this html
<li>
<strong>Version 2.0</strong>
<span>Text</span> -
<i>December 29, 2013</i>
</li>
But I can't make version to fit the whole height when it have float, I need to have float because version can have different size.
I've try to set height: 100%, position: relative and margin-bottom: auto also top:0; bottom: 0 but it only work with position: absolute but then it don't float.
Anybody know how can I make my html to be like on the screen?
You should place your date inside your text container, because that will presumably always immediately follow your text.
You could display your elements as blocks and float your header to the left. If you then give your text overflow:hidden property, it will clear the floated element and take up any remaining space:
The margin and list-style-type are to look prettier
li{list-style-type:none}
li strong{display:block; float:left; margin-right:5px;}
li span{display:block; overflow:hidden;}
JSFiddle
Another way would be to display your list item as a table, and it's children elements as table-cells. You'd probably want to set a width for your strong element if you were going to choose this way:
li{display:table;}
li strong{display:table-cell; width:100px;}
li span{display:table-cell}
JSFiddle
There are a lot of "fill available space" questions on this site, but my issue is a bit particular in that I've already gotten a solution, but it doesn't work for buttons. I'd like to understand why this doesn't work for buttons, and how I can make it work. I imagine it's just some browser-style for the button element that I need to override.
I have two floating elements within a (fixed-width, if that matters) wrapping div. The right element has fixed width, and the left element should take up whatever width remains.
I can accomplish that by setting the right element to have fixed width and float: right, and leaving the left element without any special styling. This works perfectly for divs. It also works for spans, but only if I set display: block on them. For buttons, I can't get it to work at all. I tried block, inline-block, and every obscure width value I could find on the MDN.
http://jsfiddle.net/wjFbD/2/
I don't know why I didn't think of just wrapping the buttons in divs earlier. Here's what I've come up with:
http://jsfiddle.net/SkczB/2/
This involves the overflow: hidden box formatting context trick (which I suspected was going to make an appearance here, but couldn't quite see where to fit it in). Highlights:
The two buttons are wrapped in divs with class buttonWrapper.
Those divs are formatted according to the trick I outlined in the third paragraph, above. The right div has float: right and a fixed width, the left div has no special styling.
We now apply the box formatting context trick. The left div is given overflow: hidden, which causes it to make space for the right-floated div.
We can now apply a left margin to the right div, and change its width, and the left div will always be the right size.
The divs create the desired "fill available width" effect for us, now we just have to put the buttons inside the divs and give them a height and width of 100%.
If it's the left button you wanted to have a fixed width, then basically repeat the above steps with left and right swapped.
This may not be exactly what you're looking for here, but here's an option that seems to have worked out for me with your fiddle.
If you've got a fixed width div that the elements are contained in, you could split get the remaining width of the div after button A has been set to fill up, say, 100 pixels and then set button 2 to be the remaining size.
Alternatively, another option would be to run it as percentages 20%/80%, 30%/70%, that kind of thing. Here's a fiddle that achieves what you're looking for on just the button wrapper at the bottom. I've applied specific classes for it and added divs around each button for a bit more control. The button wrapper divs are set to 20% and 80% respectively, while the button is set to fill 100% of the containing space.
Here's the modified fiddle and the modfied HTML/CSS. Hope it helps for what you're looking for...
http://jsfiddle.net/wjFbD/7/
HTML
<div class="btnWrapper">
<div class="buttonWrapperB">
<button class="left">
button Left
</button>
</div>
<div class="buttonWrapperA">
<button class="right">
button Right
</button>
</div>
</div>
CSS
.btnWrapper
{
width: 100%;
background-color: #FEE;
border: 2px solid black;
margin-bottom: 10px;
height: 50px;
}
.buttonWrapperB{
float: left;
width: 20%;
}
.buttonWrapperB button{
width: 100%;
height: 50px;
}
.buttonWrapperA{
float:left;
width: 80%;
}
.buttonWrapperA button{
width: 100%;
height: 50px;
}
I adjusted the background opacity of your .right elements to see what was going on below them. It looks like the .left elements are not only taking up the remaining space-- they're also taking up the entire row. Weirdly, the text inside these elements is centered as if it were only taking up the remaining space.
If you want the same to work for the buttons, it seems like the only solution involves a little hack. Buttons are quite complex indeed.
button.left {
margin: 0;
position: absolute; /*this seems to be the only way to get the button to stay on the same row - floating it left won't even work*/
z-index: -1; /*hides the "overflowing" part below the right button*/
width: 100%; /*make the button stretch to the full width of the row*/
padding-right: 400px; /*add a padding-right hack so that text will be centered correctly - should be same size as fixed width .right element*/
padding-left: 0;
display: block;
}
See updated fiddle: http://jsfiddle.net/wjFbD/6/
starting with
One element has fixed width, and the other element should take up
whatever width remains.
here is my general solution:
<div class="container">
<div class="two">125 €</div>
<div class="one">my favorite provider</div>
</div>
(stylus syntax, in your mind just add {,},;)
.one // red
border none
height auto
overflow hidden
white-space nowrap
text-overflow ellipsis
.two // green
float left
white-space nowrap
text-overflow ellipsis
You can set the one green thing to a fixed width, but indeed, you do not even have to! Things full up nicely. And String get's truncated with an ellipsis, if it gets too long.
Things get a bit more complicated, when one of them is a <button> rather than a <div> (and I can't figure out, which style property differenciates them, so I would need to style away), but anyway, with a wrapper, that also works:
→ See full codepen here. (Feedback appreciated.)
I've been struggling with this for a day or so now and I've gone back and started from square one a couple of times but I'm trying to get a horizontal css flyout header to work as I want.
The dropdown bit I want to expand as wide as needs be (it'd be great if the category names were forced to be on one line) while the container expands to accommodate them. A fiddle will explain better.
http://jsfiddle.net/HyuLy/
Any ideas?
You have a few width: 100%'s that are ruining your layout because of your padding's. width is the inside width of the element, so when you combine width:100% with, let's say, padding:20px your element is now 100% + 40px.
Also, you have a few float: left's that shouldn't be there as well. If you're stacking the elements vertically still, there's no need to float: left.
Take a look at this: http://jsfiddle.net/scrimothy/mxW4y/
Since there's so much going on here, you may want to copy this css back into your text editor to see it better. I've removed a few widths and floats
To make all the <li> elements inside the <ul> container the same width add this:
div#dropMenu ul.level2 li {width: 100px;}
change code to the following to fill the <li> element inside the <ul> but this will not re-size the container <ul> to get wider to accommodate the <li>.
.subCatodd{
background-color:#7b631d;
padding:10px 0;}
.subCateven {
background-color:#665011;
padding:10px 0;}
Check this
http://jsfiddle.net/XUj5S/
When you start adding padding to 100% width it will be doing exactly that, that's why your li objects start to overlay their parents they are not 100% they are like 110% cuz of the padding you're adding, here's an example of what I'm saying...
http://jsfiddle.net/EcENF/
You have to define width on px if you start to add padding based on px, using % will just mess up things
I've got the layout of my site mostly done. On the domain I'm testing this layout on - http://networkgenius.org/ - there is a vertical space separating the content-wrapper div and the menu div. I have the margins set to 0px for the vertical spacing, and this is the only area that is separated like it is.
I'd like the white content area to be pressed up right against the bottom of the menu, so that none of the body's background shows between them.
What am I doing wrong?
Your navigation bar (#nav, #nav ul) has a height of 35px on it, but it seems like the background image isn't actually that tall, and since you seem to have set it to only repeat-x with a transparent color, you'll get that space.
Set it to 27px or smaller and you'll be fine (in Chrome, at least).
Jeff is right. Your #nav ul has a height larger than your navbar (and background image). Also, there is vertical padding on the nav ul as well that adds to the discrepancy.