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.
Related
I have the following layout...
The green elements repeats downward (they're tiles for a web-app).
The red column is a div with a fixed width, and the pink element also has a fixed size. The blue element is used elsewhere, and normally just takes the place of the green to sit in the red box - but under a special use case we need an options panel to come up on the side (the pink thing). So basically the blue element is a plain old div, no float, nothing like that.
Whenever I add the pink element, it appears below the blue. So I switched both blue and pink to inline-block, issue there is that the blue no longer grows to fill the extra space. So I'm at a loss.
How could I go about doing this, assuming that the red div cannot be changed? Thanks!
P.S. I don't need a complete code answer, just point me in the right direction and I'll fill in the dots.
try this
http://jsfiddle.net/mQN9Z/2/
CSS
.container {
width: 100%;
display: Table;
background-color: black;
height: 400px;
padding: 10px;
}
.left {
display: Table-cell;
background-color: #0054A6;
width: 70%;
}
.right {
display: Table-cell;
background-color: #EC008C;
width: 30%;
}
HTML
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
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>
This is my case:
http://jsfiddle.net/vZ4sB/
Is there a way that the H1 background color ocupies the whole width of the container MINUS the floated element width?
jsFiddle is temporarily down, but here's what I worked out:
HTML
<div class="container">
<h1>
<img src="my_img.jpg" />
<span>Here's my header!</span>
</h1>
</div>
CSS
.container {
border: 1px solid red;
height: 500px;
width: 500px;
}
h1 {
background: url(my_header_bg.jpg) top right no-repeat;
height: 30px;
}
h1 img {
float: left;
}
h1 span {
background: url(my_header_bg.jpg) top left no-repeat;
float: left;
line-height: 30px;
padding: 0 5px;
}
I'm shooting a little bit in the dark here, but I'm guessing you have a header with some text, a background image behind the text, and perhaps a logo to the left? Please let me know if I'm wrong.
This might need a little more tinkering, but what I did was float both the image and span (with text) in the H1 and set the height on the h1 to a static height. This way the span will always butt up against the image and the H1 will extend 100%. I set a left-aligned background image to the span. Then I set a right-aligned background image to the H1. If the background image is a seamless pattern of some sort, this will probably work. If it's an image with a static width, you can set the span to the width of the background image and fade it out to the H1.
If it's just blue, you can just keep the H1 background blue.
See if this fits what you're working with.
You could, if the width of the .floater element is static at 200px (plus 2px for borders) use an adjacent sibling selector to assign a margin-left to those h2 elements following a .floater:
.floater + h1 {
margin-left: 202px;
}
JS Fiddle.
Try with:
h1 {
background: blue;
overflow: hidden;
}
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
I have created a DIV with two DIV's inside it; A DIV with a rollover image and A DIV below it with text and normal rollover behaviors.
They text describes the image and they are both links to the same place so I want them to both rollover together when the mouse is hovering over either one.
Can anyone tell me how I could do that with just CSS?
Much thanks!
You could put the :hover on the outer <div> and then use that to effect the rollovers on the inner <div>s. For example:
<div class="outer">
<div class="inner-img">
</div>
<div class="inner-text">
Where is pancakes house?
</div>
</div>
And some CSS:
.outer {
width: 200px;
border: 1px solid #000;
}
.inner-img {
width: 200px;
height: 100px;
background-image: url(http://placekitten.com/200/100);
}
.inner-text {
width: 200px;
}
.outer:hover .inner-img {
background-image: url(http://placekitten.com/201/100);
}
.outer:hover .inner-text {
background-color: #dfd;
}
And an example: http://jsfiddle.net/ambiguous/3bXhA/