SitePoint Sponsor |
|
User Tag List
Results 1 to 19 of 19
-
Jul 22, 2008, 07:42 #1
- Join Date
- Jul 2008
- Posts
- 32
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
css content areas, borders and expanding images, Css help
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.
-
Jul 22, 2008, 07:51 #2
- Join Date
- Nov 2005
- Location
- Norway
- Posts
- 715
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi
Take a look at the faux column technique.
Hope it helps.
-
Jul 22, 2008, 08:19 #3
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jul 22, 2008, 08:22 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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.
-
Jul 22, 2008, 08:35 #5
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jul 22, 2008, 08:42 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by Centauri
-
Jul 22, 2008, 09:15 #7
- Join Date
- Jul 2008
- Posts
- 32
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jul 22, 2008, 10:27 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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?
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
-
Jul 22, 2008, 19:29 #9
- Join Date
- Jul 2008
- Posts
- 32
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jul 23, 2008, 00:27 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Sure, no problem - post back if you get stuck and we'll try to help
-
Jul 23, 2008, 14:29 #11
- Join Date
- Jul 2008
- Posts
- 32
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jul 23, 2008, 14:39 #12
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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)
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)
-
Jul 23, 2008, 16:34 #13
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 :Code:#content_wrapper{ position: relative; margin:0; min-height:300px; background: url(images/bodyslice.jpg); color:#fff; padding: 10px 65px; overflow: hidden; }
Code:#left_menu_area { margin-top: 5px; float: left; width: 184px; background-color: red; } #main_content_area { float: right; width: 658px; background-color: transparent; }
-
Jul 26, 2008, 13:33 #14
- Join Date
- Jul 2008
- Posts
- 32
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jul 30, 2008, 11:35 #15
- Join Date
- Jul 2008
- Posts
- 32
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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:
Code:<!--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>
Code:.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.
-
Jul 30, 2008, 14:20 #16
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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.
Code:.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; }
-
Jul 30, 2008, 15:00 #17
- Join Date
- Jul 2008
- Posts
- 32
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jul 30, 2008, 16:06 #18
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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.
-
Jul 30, 2008, 17:11 #19
- Join Date
- Jul 2008
- Posts
- 32
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Bookmarks