I am trying to create tabs using CSS instead of images. I want the tabs to automatically adjust to the content within them, however I want them to have a max-width of 200px. I would like for the tab width to adjust to the content automatically so that the tabs will have variable widths but maintain the 20px left/right padding. Can anyone explain how to go about this?
Here's my HTML so far:
<div class="tab">
TEST
</div>
And my CSS:
.tab {
text-align:center;
background:#000;
padding:0 20px;
max-width:200px;
border-radius: 10px 10px 0 0;
color:#fff;
}
And a JSFiddle!
Thanks!
Use the display:inline css or make the div a span:
<span class="tab">
TEST
</span>
add display: inline-block to make it collapse to the width of the content.
Related
I have 5 images that I want to put next to each other, these images is going to become a slider that's going to slide left or right. No matter what I try nothing seems to make it go next to each other. I have tried float:left, position:absolute, display: inline.
here is my html
<div class="slider-wrapper">
<div class="slider">
<div class="portfolio-overlay">
<div id="portfolio_0" class="portfolio-active portfolio-single"><img src="images/image1.jpg"></div>
<div id="portfolio_1" class="portfolio-inactive portfolio-single"><img src="images/image2.jpg"></div>
<div id="portfolio_2" class="portfolio-inactive portfolio-single"><img src="images/image3.jpg"></div>
<div id="portfolio_3" class="portfolio-inactive portfolio-single"><img src="images/image4.jpg"></div>
<div id="portfolio_4" class="portfolio-inactive portfolio-single"><img src="images/image5.jpg"></div>
<div id="portfolio_5" class="portfolio-inactive portfolio-single"><img src="images/image6.jpg"></div>
</div>
</div>
and this is my css
.slider-wrapper {
padding: 25px 0 0;
}
.portfolio-single {
float: left;
width: 70%;
}
DEMO WITH ANIMATION
DEMO
.slider-wrapper {
overflow:hidden; /* to remove page scrollbars */
padding: 25px 0 0;
white-space:nowrap;
font-size:0; /* to remove ~4px whitespace */
}
.portfolio-single {
/*reset fontsize if needed*/
display:inline-block;
width:70%;
}
.portfolio-single img{
vertical-align:top;
width:100%;
}
Without using align-left we can use on a parent element white-space as nowrap, this will make sure to prevent wrap on inner inline or inline-block elements.
As said above we than need to respectively set the slides to inline-block.
using inline-block on elements they'll be in an inline flow, which means that if in your HTML you have every slide in a new line, a 4px (it's a whitespace!) gap will appear next to each slide.
to remove it use on the parent element font-size:0;
If you plan to have text inside your slides than you'll need to set font-size:16px back to your children slides.
vertical-align:top or any other align value makes sure to place your images at the right vertical place inside their parent containers.
It's because you gave each image a width of 70%. So each image was taking up a new line.
If you have 5 images, then the max width to have them all on the same line would be 20%. But with any padding/border/margin will add to that, so you might need to put under 20%.
http://jsfiddle.net/rNa9v/1/
.portfolio-single {
float: left;
width: 10%; /* changed to 10% instead of 70% */
}
Your img are in divs so they each take the full width of the page.
You can change this behavior by making the divs "inline":
.portfolio-single {display: inline-block;}
http://jsfiddle.net/9377D/2/
.portfolio-single {
float: left;
width: 16%; /* 100/6 */
}
You can calculate it ;-)
Here you can change the div option.It could solve the problem.
for further assistance follow the link.. : http://www.w3schools.com/css/css_align.asp
Using a CMS, users of my site create posts containing images of various sizes. I'd like to wrap a container div around each image, but only with say 10px of padding on the left and right. That is, collapse the outer div's width to the width of the image + 20px. Is there an easy way to do this using css?
try this:
DEMO
HTML
<div class="image-wrapper">
<img src="http://placehold.it/500/500" />
</div>
CSS
img{
max-width: 100%;
}
.image-wrapper{
padding: 10px;
background-color: gray;
float:left; /* or instead display:inline-block; */
}
I'm trying to get some nested div tags to auto grow in height depending on the content inside them. A sample code is given here. The middle for example has some more content, but the height doesn't seem to grow. What is the trick to make it auto grow? I took out all the floating elements from inside the parents thinking it might be the CSS clear rule. But that didn't help either. Appreciate any help.
<div id="editmain">
<div class="ticker">
some content here
</div>
<div class="ticker">
some longer content content here
</div>
<div class="ticker">
some content here
</div>
</div>
#editmain
{
position:relative;
min-height:480px;
background-color:#84d;
overflow:hidden;
padding: 20px 0px 30px 0px;
}
.ticker
{
position:relative;
border-bottom: solid 2px #ddd;
margin:10px;
background-color:white;
overflow:hidden;
height:auto;
min-height:100px;
}
In the absolute positioning model, a box is removed from the normal
flow entirely (it has no impact on later siblings) and assigned a
position with respect to a containing block.
w3.org
Remove the absolute positioning and find another way to format your labels and inputs using width and margin. Fiddle
.tickertxtlabel
{
display:inline-block;
margin: 10px 10px 10px 10px;
width:90px;
}
I have a content div where all the content is located. this div has a border. I would like to place things inside this div so that this div expands if the content inside is too big. Should the items inside the content div be a "div" or a "p" and what css position should they have?
CSS:
#content{
position: relative;
margin-left: auto;
margin-right: auto;
border: 1px solid #E0E0E0;
min-height: 200px;
width: 1000px;
padding: 0px 0px 80px 0px;
background-color: #fff;
}
When you set width: 1000px; it will prevent the content div from being any wider. I suspect you want min-width: 1000px; instead.
For internal content use p tags if you are creating paragraphs that only use inline html elements. If you are using block level elements then use div tags.
I can't say how you should style your internal elements because I know nothing about your design specs.
Contents of the #content div can be either p or div elements its up to you. The #content div will expand to the height of its content either way unless you have elements inside #content with a float property.
If that is that case you can do something like below to make the #content div expand its height.
<div id="content">
<div style="float:right; border:1px solid red; height:500px;"></div>
<div style="clear:both;"></div>
</div>
The important part here is the latest div with clear:both property which fixes the height of the parent element.
You should still be able to use a DIV. If you use height:auto; that should make it expand based on your content. Also I think you can use min-height:200px; and height:auto; together; With that said. I also agree with mrtsherman, if you set a width or height to a specific pixel it is going to limit you to those constraints.
My problem is best outlined with this schematic/image which outlines how I want it to look:
!
I have a background image and 2 divs for text over the top of it (headline, and intro-text). I also have 2 divs on either side of the headline - these are for the white horizontal stripes.
My issue is that the headline is changeable in a CMS, and I want the horizontal white stripes to automatically fill up the space to the left and to the right of it, regardless of the headline's width.
I can't figure out how to make those 2 horizontal white stripes resize automatically.
Here's my HTML:
<div id="masthead">
<div id="headline-container">
<div id="left-stripe"> </div><div id="headline">{headline}</div><div id="right-stripe"> </div>
</div>
<div class="clear-both"> </div>
<div id="intro-text">{intro_text}</div>
</div>
And here's my CSS - ignore the widths specified for the left-stripe and right-stripe - they're just placeholders:
#masthead {
height: 260px;
}
div#headline-container {
width:960px;
padding:none;
}
div#left-stripe{
float: left;
background-color:#fff;
height: 3px;
width:500px;
display: inline;
}
div#right-stripe{
float: right;
background-color:#fff;
height: 3px;
width:100px;
display: inline;
}
div#headline {
text-align:right;
color: #fff;
font-size: 200%;
float: left;
display: inline;
}
div#intro-text {
text-align: left;
float: right;
width: 300px;
color: #fff;
}
Ideas? Please let me know if I can provide more detail.
I'm a bit too busy to actually test this, but this might give you some direction. i'm not sure the exact effect you're trying to achieve (see comment about finding a live demo someone made).
Regardless, this kind of fluid layout is a bit difficult to achieve reliably with straight CSS. To make it easier I would suggest making the right-stripe a static width.
This CSS solution MIGHT work... no promises.
markup
<div class="container">
<div class="headline-container">
<div class="left-stripe"></div>
<div class="headline">Headline goes here</div>
<div class="right-stripe></div>
</div>
<div class="content"></div>
</div>
CSS
//static width for right stripe
.right-stripe { width: 20px; }
.headline { width: auto; }
.left-stripe { width: auto; }
Using javascript would make it really easy though... here's how i would do it with jQuery. Again, I would make the right-stripe a static width to achieve this effect.
(same markup...)
..
js
var totalWidth = $("#container").width();
var leftWidth = totalWidth - ($("headline").width() + $("right-stripe").width());
$("left-stripe").width(leftWidth);
You can do this dynamically, with jQuery, for example. You take the full width of the 3 div's, drop the size of the inner div and assign dynamically the widths of the 2 outer div's in which the bar should repeat horizontally.
Basically, you will need:
$("#whole-div").width() - $("#inner-div").width() for the outer div's total width. Then, depending on your positioning of the inner-div, you assign values for the outer div's.
For example: whole div has 1000px, inner div has 200px and inner div is positioned 600px left. You will then assign 600px to the left div ($("#whole-div").width() - $("#inner-div").css('left')) and 200px for the right div ($("#whole-div").width() - $("#inner-div").css('left') - $("#inner-div").width()). Of course, you will then set a background-repeat property on the outer div so that the image repeats.
Hope that helps!
UPDATE CSS only fluid solution: http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/1/
it uses the same background image twice, on #masthead and on #headline-container. except ton headline container the background is offset to match its left position relative to its parent element. then we only need one div.line behind it, which gets covered by the background image under the headline and copy, giving the illusion of a seamless image.
do you mean like this?: http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/