Centered-fixed-width-div with fluid divs on left and right? - html

I am working on a wordpress site.
I have these decorative titles that are constructed like this:
(the following is not the real html structure, it is just as example purpose)
<div class="decoration-left"> <div class="title"> <div class="decoration-right">
.title has a h1 title inside.
.decoration-left, and .decoration-right, are empty divs, with a decorative background.
I need the title to be centered all the time.
I first tried to give all the three divs a 33.3% width, which worked nice on big screens, but as i reduce the window the title breaks into two lines, and it looks ugly. I need the title to have a constant width therefore. I dont want the text to be smaller.
Right now, i have the .title div with "width:auto" which works fine. however i need the left and right decorative divs to take each one, half of the remaining space in a responsive/fluid way.
attaching picture for better understunding.!

My guess is: put your DECORATIVE divs inside the TITLE div, and your TITLE div inside a WRAP div. Make the TITLE div with 'position: relative; display:inline-block; background:#fff;' the DECORATIVE ones with 'position:absolute; left:-50px;' and 'position:absolute; right:-50px;', and the WRAP with 'text-align:center; background:url(LINE IMAGE LINK) center repeat-x;'.
I know it's hard to understand, but I am mostly sure it will work that way. I'll try making it look better by coding some of it:
HTML:
<div class="title-warpper">
<div class="title">
<div class="decoration-left"></div>
<span>YOUR TITLE HERE</span>
<div class="decoration-right"></div>
</div>
</div>
CSS:
div.title-wrapper {
background:url(LINE IMAGE LINK) center repeat-x;
text-align: center;
}
div.title {
position:relative;
background:#fff;
display:inline-block;
}
div.decoration-right{
position:absolute;
right:-25px;
background:url(DECORATION BG LINK);
width:25px;
height:25px;
}
div.decoration-left{
position:absolute;
left:-25px;
background:url(DECORATION BG LINK);
width:25px;
height:25px;
}
I set the decoration divs for 25px, but use what you need. Just remember to adjust them and the left and right properties to fit your needs.

if you don't mind the title overlapping the decorative divs on some screen sizes then you can absolute position the decorative divs with
position:absolute;
left:0px; (OR right:0px;)
give them whatever width and height you like.

Related

how to put an img under a header(div) that contains other divs?

I put a header which contains three divs. One has an image and the other two contain text.I then tried putting an image under it which has the same width of the header. But when I first put it, it was over the header div( I thought it should go under it). I then tried pushing it down by increasing the top margin and it worked. But as I increase the width of it the text in the header moves although it is not touching it!
This is the html code:
<div id="header">
<img id="logo" src="...."> <!---the logo at the top right-->
<div id="name">JANE DOETTE<div> <!---the text that moves - top left -->
<div id="job">Front-End Ninja</div> <!--under the text that moves but doesn't move--->
</div>
<img id="image" src="...."> <!---the image-->
This is the css code:
#header {
height: 6em;
width:80%;
background-color: white;
margin-left:10%;
margin-right:10%;
border-bottom:2px solid #BCBBBB;
margin-bottom:10px;
}
#image{
margin-left:10%;
margin-right:10%;
height:10em;
width:80%;
}
#logo {
height:88px;
width:89px;
}
#name {
color: #BCBBBB;
text-align:left;
float:right;
font-size:2.7em;
font-family:sans-serif;
height:50%;
}
#job {
color: #BCBBBB;
text-align:left;
float:right;
font-size:0.5em;
font-family:sans-serif;
font-weight:bold;
margin-top:0.2em;
}
Those are my questions:
Why doesn't the image automatically go under the header div?
Why does the text move?
Why is the top text the one that moved although the one at the bottom is nearer to the image?
What should I do to get the image under the heading div?
I adjusted the width of the image to 80%. But it seems to be just 20%. Why?
Has it got anything to do with position or display?
***Sorry for not adding an image of it but I don't have a reputation of more than 10 ( I am not allowed to).
***Sorry for the long questions.( I am still a beginner).
***Your answers would be much appreciated.
Your question isn't all that clear (please clarify), I will try to answer regardless, but I might misrepresent your question.
1 / 6 . The biggest problem you have I think is that you don't tell the browser how to 'order' the divs. Should they be under eachother or next to eachother? Use the "display" property for this. Use "display: block" to make sure that page-elements like divs or images are stacked under eachother. Depending on the margin the browser uses the remaining space to stack elements next or above eachother.
2 / 3. Because it floats. A float is relative to other elements on the page. If you make it float right, but the content within it align to the left the box goes left while the content within it stays as far to the left as it can keeping with the contraints of the div container. Therefore it seems to move. Lose the float and use "display: block" to make the div be the full width of the header div.
#name {
color: #BCBBBB;
text-align:left;
font-size:2.7em;
font-family:sans-serif;
height:50%;
display: block;
padding-left: 10px;
}
4 / 5 . Lose the "height" property of the image. Because the image has a relative 'height' property next to a relative 'width' property it distorts the image scaling. Use only the width as a percentage and it will scale proportionally.
You are missing a slash. Instead of
<div id="name">JANE DOETTE<div>
it should be:
<div id="name">JANE DOETTE</div>
After adding the slash it appears fine to me in Chrome and Firefox (except for the missing images obviously). See fiddle. Does that solve all of your questions?

Div doesn't shrink-wrap around resized image

I have a div on my page that should have some small divs inside it, with a line of text, images and another line of text, everything centered.
But by some weird reason, the div doesn't wrap around the text even if floated, it looks like it haves the same width as the full-scale image, instead of wrapping around the now smaller image.
<div id="real">
<div class="relspn">
Title:<br/>
<img src="img.png"/><br/>
Another text
</div>
<div class="relspn">
Title:<br/>
<img src="img.png"/><img src="img.png"/><br/>
Another Text Another Text
</div>
</div>
Something like that, but, it doesnt matter if I float the divs, set them as inline-blocks or even inline, the div doesn't gets smaller than the full image.
Here's the css:
#real {
float: right;
position:relative;
width:96%;
padding:20px 0;
}
.relspn {
position:relative;
text-align:center;
float:left;
padding:0.2%;
}
.relspn img {
position:relative;
display:inline;
width:10%;
}
I don't know what's happening, help.
Edit:
http://jsfiddle.net/3SkZV/1/
Updated now, I wrote the div class wrong in the example. >.>
Updated the Fiddle too

Some CSS problems to vertically extend the content of a div until the end of its container in a layout

I am creating an HTML\CSS tabless layout starting from a psd file and I am having a litle problem.
This is my final result that I would obtain:
and this is my HTML\CSS result: http://onofri.org/example/WebTemplate/
As you can see I have some problem with the left sidebar because the last blue box (the #c div) does not extend vertically to the end of the #container div and so don't match with the footer background immage.
The pnly "solution" that I have found (but this is not a correct solution) is to increase the value of the min-height* property of the **#c div of my sidebare. For example if I increase this value from the original 234px to 334px it seems to work well.
But this is not a real solution because if the amount of content change of the page change this problem occurs again.
How can I solve? What can I do to extend the height of the #c div until the end of its container
Tnx
Andrea
Here's a little trick I use sometimes:
What you need to do is have both the #content and #sidebar divs within a container div. You tell that container div to have a class of "clearfix" and it will stretch itself to be the height of the tallest column. You can then give the container div a background image if you want to make the background of each column look like it stretches the whole length.
For example, a 1px high repeating background like this might work: http://i.stack.imgur.com/W84Xa.jpg
THE CSS:
.clearfix:after{
content:”.”;
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;}
.clearfix{
display:inline-block;
}
html[xmls].clearfix{
display:block;
}
*html.clearfix{
height:1%;
}
#container{
width:770px;
}
#content{
width:542px;
float:left;
}
#sidebar{
width:228px;
float:left;
}
THE HTML:
<div id="container" class="clearfix" >
<div id="content">
Content Div Text
</div>
<div id="sidebar">
Sidebar Div Text
</div>
</div>

CSS list to expand to the same height as content in div

I have a div that has two divs that float left/right respectively. The right div contains a lot of text, and the left div has 3 images.
I am trying to make it so that the three images are distributed with one at the top, middle, and bottom of text, so that if more text were added then the images would move to 'correctly fill the space'
I have a 'ul' inside the left and if I set the height:200px; property it displays correctly, but I can't get it to match the height of the other div dynamically! I've tried using % and tried the +1000 -1000 padding/margin hack but that doesn't seem to do have the desired effect, so I must be barking up the wrong tree. (I have searched all morning on this and I can make the div work but not the ul height to match the div!).
JSFiddle: jsfiddle.net/b98Rx/3/
HTML:
<div id="articleBody">
<div id="articleMainText">
<p>This is some text that should overflow to the some space below here</p>
</div>
<div id="articleMainImages">
<ul id="articleMainImagesUL">
<li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
<li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
<li><span><img src="http://phrogz.net/tmp/gkhead.jpg"></span></li>
</ul>
</div>
CSS: (In fiddle)
Example as an image:
Sorry for the MSPaint but I hope it shows what I'm trying to do!
I am open to other suggestions and I don't have to use a ul/li. Ideally to be compatible with as much as possible! I might make this into a 2 column table and make three seperate divs for each image to align top, middle, and bottom! Would this work?
EDIT:
Solved it myself, see this fiddle for how I did it! http://jsfiddle.net/B63Yy/
What might work is having nested divs, and having the images as backgrounds, attached to top, middle and bottom - though they would not print to paper. Of if you are targetting browsers that support multiple background css then use that.
This would not work if the text was too short as the images would start to overlap - unless you enforce a min-height.
Otherwise I think you are looking at javascript to do this.
Anyone know better?
Update: this kinda works ... needs polishing though.
<div id="articleBody">
<div id="articleMainText">
<div id="a"><div id="b"><div id="c">
<p>This is some text that should overflow to the some space below here. This is some text that should overflow to the some space below here. This is some text that should overflow to the some space below here. This is some text that should overflow to the some space below here</p>
</div></div></div>
</div>
</div>
#articleBody { /* Body of article */
display:block;
width:200px;
overflow:auto;
background-color:#ecd;
}
#articleMainText { /* Main text DIV */
width:10em;
margin-right:32px;
padding-left:32px;
margin-top:0px;
padding-top:0px;
}
#a, #b, #c {
background-image: url("http://phrogz.net/tmp/gkhead.jpg");
background-repeat: no-repeat;
background-size:20px 20px;
}
#a{background-position: left top}
#b{background-position: left center}
#c{background-position: left bottom}
I've edited your fiddle to work:
http://jsfiddle.net/b98Rx/7/
what I changed was:
#articleMainImages img {
bottom:0;position:absolute;
}
#articleMainImagesUL li {
height:33%;
position:relative
}
and deleted the table-cell props where you had them.

Fixed width div in center of screen with two either side of it to fill rest of screen?

So, I have this wonderful image here:
And what it is is a header for a website - click it to view it full size..
I need to re-create this using HTML/CSS/images and I can't figure out how. It has to be 100% width yet, the point where the gradient turns from one type to the other, has to remain in the same place on resize. To illustrate:
The area that is not blacked out must stay in the center of the page at all times and not move. The areas in black must extend to 100% of the screen width and have a tiled background gradient.
How can this be done?
I have tried something like this:
Where green is a div with a fixed width and centered yellow is the 'twirl' gradient bit and then red/blue are the tiling gradients. But this does not work because the tiling gradients to not match the position of the 'twirl' when the browser is resized.
Note: This must support IE7+ and must be cross-browser compatible and preferably uses no javascript.
I’m not sure why do you actually want to make this so hard by cutting the image up into pieces?
Take the image, extend the canvas to let’s say 5000px and just repeat the gradients to both sides. You’ll maybe add about 200 bytes (yes, bytes, not kilobytes) to the image size, but you’ll make it all up without adding 2 more requests for the separate backgrounds to the page.
And then just set the image to background-position: center top;
And as the center DIV is fixed width, you can either add a container to have the background or add the background to BODY for example.
Well, I think I've managed to do it..
<header>
<div id="bg-left"></div>
<div id="bg-right"></div>
<div id="header-content">
My header contents
</div>
</header>
And
header {
height:88px;
}
header #header-content {
width:1004px;
height:88px;
position:absolute;
left:50%;
margin-left:-502px;
background-image:url("/img/header-bg-middle.png");
}
header #bg-left, header #bg-right {
position:absolute;
height:88px;
}
header #bg-left {
background-image:url("/img/header-bg-left.png");
width:50%;
}
header #bg-right {
width:50%;
background-image:url("/img/header-bg-right.png");
right:0px;
}
So basically, I am creating a fixed width div in the center of the page, and then behind that I create two 50% width divs that have the appropriate gradient background.
Id do the same thing as you started doing with the one 'twirl' being centered, with two divs on the outside... the way I would do this is like this:
this is what i have:
<div style="width:100%">
<div style="background:#333; position:absolute; left:50%; top:0; width:50px; margin:auto; height:50px; z-index:10;">
</div>
<div style="width:50%; position:absolute; left:0; top:0; background-color:#060; height:50px; margin:0; z-index:1">
</div>
<div style="width:50%; position:absolute; right:0; top:0; background-color:#060; height:50px; margin:0; z-index:2">
</div>
</div>
</div>
which can be viewed here: http://sunnahspace.com/TEST.php
basically you have a container div, which if you decide to move this around at all id make relative positioned. then youd take the piece where the gradients change and make that your 1st inner div, with the different gradients your 2nd and 3rd div. Basically, the 1st div (the "twist") is positioned to stay in the same place of the browser (the middle, see the 50%, but this can be set to say 200px from the right, etc.) with the other two divs expanding when browser window sizes change. The z-index layers the css, so the 1st one having a z-index of 10 is on top (the number hardly matters so long as it is the highest number, but leaving it like this allows you to add more layers underneath without having to change the z-index, with the other two having z-indexes of 1 and 2, doesnt matter which order so long as they are less than the top div, this lets the first div sit on top of these two divs, hiding where they meet. Should work, let me know how it goes, and if need be ill fix a few things.
Is this what you want to do? http://jsfiddle.net/nnZRQ/1/