PDA

View Full Version : Creating a CSS rule to constrain image in header


azzaman
10-13-2009, 08:43 PM
Hello there,
I am very new at this stuff. I have created a template, 2 column liquid, header and footer. I have created some button and include a navigation panel on the side bar. I have also created a header image in photoshop and put it in a div tag in the header...... ok... so the problem in that when I preview the image in a browser and pull in the browser from the right to the left, the image will "run over" the outside right column before being minimised by the browser. I have looked and read myself silly for 2 hours..

Is there a rule or check box that will keep the image in the header div tag. I read about floating boxes, tried to input width and height etc. Nothing worked,

Not sure if I have framed this "small" problem so you all can understand it...

Cool!! Thanks

ps.. code view is like a foreign language

DWcourse
10-13-2009, 09:44 PM
You can use the overflow:hidden CSS property for the #header div to prevent the image from continuing outside the div. It won't shrink the image, just hide the overflowing portion of it.

azzaman
10-14-2009, 07:51 AM
I tried that and it is still happening. I have a #header css, #header<h1> css and I created another div tag called #headertitle. I applied the overflow to hidden although it is stilling traveling over the edge when the browser window get smaller..
azza332.com you can see what I mean here..

Thanks

azzaman
10-14-2009, 08:00 AM
probably should have mentioned that it is a .dwt file.

DWcourse
10-14-2009, 01:40 PM
add the overflow:hidden property to the .twoColLiqLtHdr #header style.