I can't seem to figure this out but see the image below:
There are a bunch of different div headers with varying text lengths. Because of the way the template is coded, they can't have individual class names. All of them use the same class. Code example is like this:
<div class="headerText"></div>
<div class="headerDots"></div>
Right now I have the header text inside the "headerText" div and the dots image as a background image on repeat inside "headerDots". I can't seem to figure out how to make the dots image get smaller and wider depending on how wide the header is next to it. Is it possible to code the HTML/CSS in a way that allows for this functionality if I don't have access to give each header its own classname?
.headerText{background:white; display:inline-block; position:relative; z-index:100;}
.headerDots{background:url(dots.gif); height:10px; position:relative; top:-25px; z-index:10;}
Demo (with background color, but principle applies.)
Better Demo
What if you use something like this and just replace the colors with your background image or whatever you like:
<html>
<head>
<style type="text/css">
#container {
height: 100px;
width: 200px;
background: #ccc;
}
.headerText {
padding-right:20px;
background: yellow;
color: black;
float: left;
clear: left;
}
.headerDots {
padding: 10px, 10px;
float: left;
width: 100%;
background: blue;
}
</style>
<body>
<div id="container">
<div class='headerDots'>
<div class='headerText'>My Header Text</div>
<div class='headerText'>small</div>
<div class='headerText'>A little more text than usual</div>
</div>
</div>
</body>
</html>
This is what I would try:
Wrap it in a DIV with a fixed width.
Set the child DIVs to width:100%
Make your vertical dash an image and use "background-repeat:repeat-x" to fill the space.
If you have trouble with the word and the dashes, set the word with a background color equal to that grey on a higher z-index that the vertical dashes. Then the dashes are always filling the same space and the word overlays, giving the appearance of variable dashes.
It's just an idea.
With only jquery and no HTML changes....
Applies the background color to the text itself which will cover the dots.
jQuery(document).ready(function() {
var Texttext = $('.headerText').html();
$('.headerText').html('<span style="background: #ddd; padding: 0 5px 0 0;">' + Texttext + '<span>');
var Dotstext = $('.headerDots').html();
$('.headerDots').html('<span style="background: #ddd; padding: 0 5px 0 0;">' + Dotstext + '<span>');
});
Working example here
Related
Image cover the background color of DIV but text is showing.
My code is
<div id="testing">
<img src="https://images.unsplash.com/uploads/1413142095961484763cf/d141726c?dpr=1&auto=compress,format&fit=crop&w=1350&h=&q=80&cs=tinysrgb&crop=">
<div id="sample">
Text
</div>
</div>
CSS is
#testing {
width: 200px;
height:150px;
}
img {
width:200px;
height:150px;
}
#sample {
margin-top:-15px;
background: black;
color: white;
text-align:center;
}
The result is showing like
You can find the code at
https://jsfiddle.net/cz605rc5/
It can solve with background css for div.
But I prefer to use img and want to cover black background label at the bottom of the image.
You can add a transparento overlay over your image tag since, it will be transparent the image will act as a background..
Fiddle
.overlay{
position:absolute;
top:0px;
left:0px;
width:100%;
min-height:100%;
}
Then you can move the text inside the overlay as you wish..
Since we are in 2017 i think you should first change the HTML code:
<figure>
<figcaption><span lang="en">image title</span></figcaption>
<img src="img.png" alt="Alternative Text" / >
</figure>
Now for CSS:
All you need is to make figcaption size as the image size.
Then make it position absolute, change it's z-index higher than the img, and set it's background to gradient.
Last thing is to place the span in some place: set it's position to "absolute" and place it (for example: left: 5px; bottom: 15px;)
If you want the full css just ask (:
Line height is causing the issue. You can add a line-height: 0; to #sample, or you can change the line height of the body. You could even enclose the text in some tags and apply it to that.
I've created some tiles and want to position them within one . My problem starts already in the header line.
The red parts are "header-left.png" and "header-right.png" the violet part is a repeating tile "header-center.png".
What I already have:
.test {
width: 800px;
height: 200px;
border: dashed 1px #006597;
background-image: url('../images/standard/header-left.gif'),
url('../images/standard/header-center.gif');
background-repeat: no-repeat, repeat-x;
}
But how can I tell the second background, to start after 50px so it starts after the header-left.gif? And how can I position the third background so it is aligned to the right?
This is what I get now:
This is my goal:
red: header-left
violet: repeating header-center
black: header-right
green: repeating background
blue: footer-image
Try something like this:
HTML
<container>
<header>
<div class="red">
<div class="purple">
<div class="black">
</header>
<div class="green">
...
CSS
.header{
width: 800px;
}
.red{
display: inline-block;
width: 50px;
}
.purple{
display: inline-block;
width: 650px;
}
.black{
display: inline-block;
width: 100px;
}
And add your current background info
divide the header in three div and then load the background for the each header divs
Wrap your header within a container and have 3 separate elements that are floated next to each other:
#headerLeft{/*Custom Styles*/}
#headerCenter{/*Custom Styles*/}
#headerRight{/*Custom Styles*/}
Have a body container and a footer container.
Here's a Fiddle
You can swap out the background-color styles with your images and it should be what you're looking for.
I have two divs in my page: leftpart and rightpart which has the following css:
.leftpart{
width:280px;
background:#0054a6;
color:#fff;
padding-top:40px;
height:100%;
min-height:637px;
box-shadow:3px 3px 10px #bebebe;
position:relative;
}
.rightpart{
width:75%;
padding-left:10px;
}
I want this sidebar(leftpart) till the end of my page(till the bottom). I've set the height to 100% but when I minimize the browser it shows the white space below the bar instead of showing blue background. I mean it does not take its height as 100%. How can I get that?
For a full length sidebar your best bet is probably the old faux columns method. You could do this in CSS but this is probably easier for you.
Put basically you want an image with your column background's in a thin long strip. You then add this as a background image to your parent div and it acts as pretend full height columns.
eg.
.container {
background: url(your_image) repeat-y left top;
}
<div class="container">
<div class="sidebar">SIDEBAR</div>
<div class="content">CONTENT</div>
</div>
You can read more about it here - http://www.alistapart.com/articles/fauxcolumns/
If you want to try this in CSS you could try the negative margins trick.
You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }
<div id="container">
<div>
SIDEBAR
</div>
<div class="col2">
CONTENT
</div>
</div>
I have a problem which I do not understand.
If I use percentage in width, I would expect that elements calculate borders, margins or paddings within their size (in percentage).
But in fact those values are added to their size which I asume is wrong.
Is my expectation wrong?
The bellow example shows the issue. The both "divs" "left" and "right" I expect to be in a single line. If I remove "border" it works as expected.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
border: 1px solid black;
width: 100%;
overflow: auto;
}
.left {
border: 1px solid black;
width: 20%;
float: left;
}
.right {
border: 1px solid black;
width: 80%;
float: left;
}
</style>
</head>
<body>
<div class="center">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
What you can do to fix this issue is to use box-sizing. See http://jsfiddle.net/Marwelln/YYkxK/
box-sizing:border-box
That's totally normal. It's not what you might expect at first, but CSS works that way.
Even without percentages:
#width {
width: 100px;
padding: 0 20px;
}
This #width div will occupy 140px. Works the same for percentages.
So you might need inner divs to achieve what you want.
<div class="left">
<div class="inner">
</div>
</div>
<div class="right">
<div class="inner">
</div>
</div>
.inner { padding: 10px; }
.right .inner { border-left: 1px solid #ccc; }
Padding or Border always adds to an elements size, inside out.
Margin never adds to size but adds space outside the element.
Percentages or set values don't matter. The above is always true.
Reviewing the box model may help ---> HERE
When you use percentage as width (or height) values, these are the percentage of the width (or height) of the parent block element (containing block).
In super modern browsers you can use calc() to fix this: calc(80% - 2px). And yes, it is normal. If you set the width to 100px and border to 150px what would happen then if border wasnt added?
I have icons. Problem is they do not vertically align to the middle like everything else (text, input). My html structure is something like this:
<div class="i_contain_things">
<div class="i_float_left"><checkbox/></div>some text
<div class="i_float_right">
<span class="sprite icn1">my sprite</span>
<span class="sprite icn2">my sprite</span>
</div>
</div>
.i_contain_things
{
clear:both;
margin-bottom:10px;
vertical-align:middle;
}
.i_float_left
{
padding:0 3px 0 3px;
float:left;
display:inline-block;
}
.i_float_right
{
padding:0 3px 0 3px;
float:right;
display:inline-block;
vertical-align:middle;
}
.sprite
{
display:inline-block;
background: url(../img/icn_sprite_1.png);
width: 16px;
height: 16px;
vertical-align: middle;
}
.icn1{background-position:0,0}
.icn2{background-position:0,16px}
my sprite is always aligned to the bottom, while the checkbox and text are in the middle.
This is not going to work, a span is an inline element so as soon as you remove the text, it will collapse; height and width won´t do anything.
I´m not sure what you want to achieve exactly, but it seems to me that you need to put your sprite as a background to one of the elements you already have (like .i_contain_things), and not put it in a separate element.
If you do need to put it in a separate element, you need to make sure it´s a block level element (for example a div or a span that's set to display:block). That element needs to be positioned where you want it.
You need to specify the background-position property. Like so:
sprite { background: url(../img/icn_sprite_1.png) 50% 50% no-repeat;
Where the first number is axis-x and the second number is axis-y You can use percentages, pixels, or keywords (right, top, center) to declare the position of the background image.
http://www.w3schools.com/css/css_background.asp