css content areas, borders and expanding images, Css help

[~Zedge~]

Hi there, I am relatively new to css and webdesign really and was wondering if anyone would be able to help me solve my issue

I am currently building a site for a cms and so far I have made the header and I am now tackling the content areas.


What I have done so far:

I have made a content wrapper - inside this, I have 3 images - the left border, the "center content area" and the right border.

What I wanted was that as the central content area expands as more news articles etc. are added, the left and right borders also expand to fill the gap, so that the 3 images end up the same height as the content wrapper.

Here is the site containing my current progress - I have had to post it without ht tp: / / im afraid as I could not post a link as I'm new - I hope this is ok:


testing.elitestrikeforce.com/first_site/test2/test3/e107.html


so what I need is for the left and right borders to fill up to the height of the content wrapper as the main content area increases in size causing the wrapper to expand.

I hope I have explained this well enough.

The code is all visible with view source so I won't fill this forum with it - I would also be very grateful if people would critique the code and css etc. as I am keen to learn as best I can, and as correctly as possible.

Many thanks in advance for any assistance you are able to give me,

Zed.

[fredda]

Hi
Take a look at the faux column technique.

Hope it helps.

[Centauri]

As the site is a fixed width, you don't need side divs for the borders - just use one wide background image that includes both borders.

[Paul O'B]

As the site is a fixed width simply repeat the side borders as one graphic on the main page outer and the it will always be as long as the content (this is the same method fredda linked to).

The columns, backgrounds and border in this example are all made with this single image.

[Centauri]

That's twice in 4 minutes I got in 3 minutes ahead of you, Paul ...

We even worded the start of our posts the same.

[Paul O'B]

That's twice in 4 minutes I got in 3 minutes ahead of you, Paul

I must be getting too old for this

[~Zedge~]

Hehe, many thanks for your replies guys

I have thought about doing it like this which I agree is a good method for a fixed width site.

The area I run into slight difficulty is that next, I have content boxes to make (which will go inside what I called the center area.

I dont have these as full width images :S - I have again, the two side borders and then the inner part that I need to repeat for any given width.

The problem will be the same.

I really appreciate your replies and will have to change tac if there is no solution.

Presumably there must be some way around it though, because say the site was not foxed width and I wanted to achieve the same thing with the 2 borders, the centre piece would have to fill to anygiven browser size?

If you can think of any way I can improve on my current method to make it work, that would be fantastic, if not, I fully understand

Many thanks all,

Zed.

[Paul O'B]

Hi,

I'm not sure exactly what you want but the answer is still the same

If you have repeating sections in the middle then you can have some nested divs using a repeating image for the inner sections. (However there's no reason why you can't include these repeating images on the main container along with the existing side borders. You can just rub then out with the background of existing elements where you don't need them (assuming these are consistent part of your design)).

If you look at the example I gave all the columns and the borders and the background colours are all produces with one image. This one even add shadows and different background colours on either side of the layout.

because say the site was not foxed width and I wanted to achieve the same thing with the 2 borders, the centre piece would have to fill to any given browser size?

Then you'd nest two elements and on the first elements you repeat the right border and then on the inner element you repeat the left border. The inner element holds all the content and they will both stretch together.

http://www.pmob.co.uk/pob/side-borders.htm
http://www.pmob.co.uk/pob/equal-columns.htm

Or if you want to be clever you can do this:
http://www.pmob.co.uk/search-this/absolute-edges.htm
http://www.pmob.co.uk/search-this/absolute-edges2.htm
http://www.pmob.co.uk/search-this/absolute-edges3.htm

You may need to show us a picture of the design to get more specific answers

[~Zedge~]

Hi Paul,

Many thanks indeed for your reply - it is I think, very helpful indeed.

I had initially done trialed doing it like this, but left in because I thought that it was not a good method - turns out with your links etc. that it is the generally accepted way

Thankyou for pointing me to them

I really hope that it will work - the cms requires things to extend and extend etc. etc. all within eachother, and most people take the table layout approach when dealing with fancy designs as it allows them to extend borders more easily, and those that do use css tend to keep it fairly simple using box models and simple pixel borders :P

Is it ok if I come back here if I get stuck again?

You guys have been most helpful

Thanks,

Zed.

[Paul O'B]

Sure, no problem - post back if you get stuck and we'll try to help

[~Zedge~]

Hi,

I'm back sooner than I thought I would be.

Firstly I'd like to apologise for my last post - which was not written very well

I have continued with my site layout, making the main content area or "news section" and I have set the mark for the left hand menu area.


Here is a link: (h t t p ://) testing.elitestrikeforce.com/first_site/test4/e107.html


The left menu area will be inside the red area which will be made transparent, forming its wrapper.

My problem is that I want the news section and this left section to be at the same height (starting vertically at the same point).

I can obviously achieve this using absolute positioning, but the border method for making nice image borders does not really allow for fully absolute positioning, and if I use absolute positioning, the content area main borders do not extend to the height of whichever area, news or menu area is the longest and as such, the menu's spill over the bottom of the page.

If you guys can point out what I can do to resolve this or a better way of doing things, that would be fantastic .

Again, I have not posted the code as it is quite long and would take up a lot of room :P

All of the code is visible from "view source" or alternatively from the test4 directory where the html is.


Thankyou very much in advance once again,

Zed.

[Paul O'B]

My problem is that I want the news section and this left section to be at the same height (starting vertically at the same point)

You just need to float them both and then they will line up horizontally - If that's what you were asking. You will then need to clear them before the parent closes to regain the flow of the page. See the FAQ on floats and clearing if you are unsure what I mean

Or did you mean something else?

If you want then to equalise heights then you do the same as you did for the main page by creating a wrapper that holds the borders and then float the two elements inside this wrapper.

( If that's not what you meant I'll be back tomorrow)

[Centauri]

Specifying coordinates with relative positioning just moves the display of the item but it actually still occupies the original location. Floating each section will allow them to sit side by side.

As discussed before, there is no need for those #content_wrapper_lb and #content_wrapper_rb absolutely positioned divs just for borders. If #content_wrapper gets as its background a wide slice, like this graphic, then both borders will be done in one hit. Side padding will keep any content away from the borders :

#content_wrapper{
	position: relative;
	margin:0;
	min-height:300px;
	background: url(images/bodyslice.jpg);
	color:#fff;
	padding: 10px 65px;
	overflow: hidden;
}

The content and menu areas can then just be floated left and right :

#left_menu_area {
	margin-top: 5px;
	float: left;
	width: 184px;
	background-color: red;
}

#main_content_area {
	float: right;
	width: 658px;
	background-color: transparent;
}

[~Zedge~]

Hi guys,

thankyou very much for your responses - I apologise for the late reply - I was away from my computer.

You are right, it would be a lot more simple using a single slice. The reason I have not done it with a single slice is really ust for good practice - I was intending to learn it such that I would be able to take the same method to make liquid layouts - in which case I could not use a specific width background slice :S

I am yet to try out anything else to repair the situation in a way that will be good with liquid styles too - I will try it as soon as I get home and let you know if I am still stuck

Have a great weekend all and thankyou all for your help

Zed.

[~Zedge~]

Hi again,

Thanks for all of your replies - I worked through it and got the desired result.

My new problem is centering my text in the menu and news banners.

here is a link:

h t t p: // testing.elitestrikeforce.com/first_site/test5/e107.html


So, as you can see, the text in the left menu:

{$caption}

is out of position.

the menu banner is made up of 3 parts, the left corner, the center piece and the right corner - i want the text to be placed in the right and center areas (thus not encroaching on the logo) centrally aligned in the vertical direction.

If you can help I'd be very appreciative

The relevant pieces of code are:

<!--Left Menu-->
				<div class='menu_wrapper'>
												
					<div class='menu_banner_wrapper'>
						<div class='menu_banner_tl'>
						</div>
						<div class='menu_banner_center'>
							<span class='menu_title_font'>{$caption}
							</span>
						</div>
						<div class='menu_banner_tr'>
						</div>
					</div>

.menu_banner_wrapper {
	width: 100%; /*(184px)*/
	height: 49px;
	background: none;
}


.menu_banner_tl {
	float: left;
	width: 78px;
	height: 49px;
	background: url(images/menu_tl.jpg) left center no-repeat;
}


.menu_banner_center {
	float: left;
	width: 86px;
	height: 49px;
	background: url(images/menu_tc.jpg) center center repeat-x;
}


.menu_banner_tr {
	float: left;
	width: 20px;
	height: 49px;
	background: url(images/menu_tr.jpg) left center no-repeat;
}

Many thanks in advance guys

Zed.

[Paul O'B]

HI,

You can center text by using text-align:center as long as the text is contained within an element that has the correct width and then the text is centered within that element.

In your example you have floated your banner_menu_text itself so it can't be centred because you can't center a float very easily.

You should do something like this.

.menu_banner_center {
    float: left;
    width: 86px;
    height: 34px;
    background: url(images/menu_tc.jpg) center center repeat-x;
text-align:center;
padding:15px 0 0 0;
}
.menu_title_font {
    float:none;
    font-size: 13px;
}

Padding is added to move the text down but the height is changed to keep the background height the same as it was (obviously you would also need to do box model hacks for ie5.x now).

[~Zedge~]

Hi Paul, thankyou very much for your reply - it's very much appreciated.

I see what you are saying - the only thing is, it leaves quite limited space and makes could make things look a little odd if for example the text were to stretch onto 2 lines.

I had thought of 2 other possible options, which might be absolute rubbish :P - your professional opinion would be again very much appreciated.


Because using the centre piece of the menu leaves little space, is it possible to create an overlay for the left and right menu banner pieces and have the background as transparent and then deal with the text inside the overlay? - this would give more space and reduce the chance of things moving onto 2 lines.


The other thing I had come across was setting the display as table-cell and doing something like that.

Thanks for your help Paul.

Have a good night,

Zed.

[Paul O'B]

Hi,

The problem is that I don't really know what you want it to look like

You say the text may stretch to two lines but the space it sits in doesn't stretch to two lines anyway so I'm not sure what you mean. Surely you aren't going to have text stretching beyond the background?

Or do you mean that you want it vertically centred within that space and if it stretches to two lines the it should still be centred vertically and will just about fit?

This is table behaviour and not something that css can easily do. You could use display:table but Ie6 and 7 don't understand it so you'd be cutting out 70% of your audience. There are ways to vertcially sentre unknown amounts of text but they are quite compliacted t understand.

http://www.pmob.co.uk/temp/vertical-align5.htm

It might be better if you draw a picture of what you need or how you envisage the element looking when there are two lines or one line.

Also I would have placed that esf logo and accompanying top section where the caption sits as one image in the background of a div. You have used three images with one image repeating. I think you'll find that on image would hardly be any bigger in filesize and you would also only have one request for the image instead of three. You would then just position the text on top in the normal way using margins to push it into position.

The same could be said for the base which should just be one image placed in the background at the bottom of a wrapper. The only repeating image section would be the middle part which would expand with content.

At present you are slicing it a bit like a table and using too many extra elements just to place images into place. Try to rationalise your appoach a little and make it easier for yourself.

[~Zedge~]

Hi Paul, thanks for replying - I take all of your points - they are very wise

You are totally correct - I should have sliced the images as 1 piece - the only thing is that I am using an incorrectly sized original image xD so the only way to extend the menus to the width I want is to do it like so

I will make a better explanation tomorrow morning for what exactly I want though

Thanks so much for your help Paul,

Zed.