Main Wrapper, Container and background-image repeat problem-and Footer :-)

Hi everyone,
First off, i tried almost every idea i could get to solve this on my own but now im...aaa...
Well, the problem is i have a main wrapper with a background image repeat. A header,menu, body container - which has a left column and right column. I want that main wrapper,body container and both of the columns to grow auto according to content. I tried the height:100%. When i float the columns the text from left column spills over on to the footer. The left column also does not autogrow towards the footer?! I was able to set the footer at the bottom which i want it to remain at the bottom of the main wrapper, but the main wrapper and the columns do not grow automatically...I guess it has something to do with float and the clear properties but what???
body{
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
font-size: 11px;
font-family: verdana;
text-align: center;
background:url(back_index3.png) repeat-x scroll 0 0 #E4E4E4;
#main_wrapper {
width: 959px;
margin:0 auto;
margin-top:80px;
background:url(backslice.png) repeat-y;
height:auto;
min-height:800px;
#header {
width: 959px;
margin-left: auto;
margin-right: auto;
height:119px;
background:red;
padding-top: 0px;
padding-bottom: 0px;
#topmenu {
background-color:#blue;
height:30px;
margin:0px;
width: 959px;
margin-left: auto;
margin-right: auto;
#body_container {
height:100%;
width: 949px;
margin: 0 auto;
#content {
float:left;
width: 645px;
background:yellow;
border-right:1px solid #ffffff;
padding:10px;
height:100%;
text-align:left;
#sidebar {
float:left;
width: 283px;
background:#234234;
height:100%;
#footer {
clear:both;
height:200px;
background-color: #686768;
margin:0 auto;
border-top: 1px solid #F6F6F6;
text-align:center;
width: 100%;
<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
     <div id="header">
      <span id="header_logo">title</span>
     </div>
     <div id="topmenu">
     menu
     </div>
     <div id="body_container">
      <div id="content">
content to be added
      </div>
      <div id="sidebar">
      hallow2
      </div>
     </div>
</div>
<div id="footer">
asd
</div>
</body>
</html>
Thanks in advance if somebody can help me out here.
you can see an image of the problem in the attachement down thr... thnx

<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
     <div id="header">
      <span id="header_logo">title</span>
     </div>
     <div id="topmenu">
     menu
     </div>
     <div id="body_container">
      <div id="content">
content to be added
      </div>
      <div id="sidebar">
      hallow2
      </div>
     </div>
</div>
<br clear="all" />
<div id="footer">
asd
</div>
</body>
</html>
Hope this will work well

Similar Messages

Background image repeat-y not showing

I have done a search here without success.
I have a rough setup of a site that will show the background
repeat-y in a div in IE but will not display it in firefox or
safari.
My css and and xhtml validate W3C.
I am no pro and have tried several things I can think of
without any luck.
Here is the url
http://www.asmc.ca/index2.html
Thanks in advance

The problem was that the div on which the background image
was applied was
collapsing around its non-floated descendents. You needed to
do something
to clear those floats before closing the div#innerwrapper.
The
'overflow:hidden' style forces the browser to establish a new
block context
for that div, effectively clearing the floats within, and
allowing the div
to wrap even the floated elements.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Bryan628" <[email protected]> wrote in
message
news:g6qsdt$350$[email protected]..
> Thanks Murray,
> That did the trick. So it was happening for 2 reasons?
> 1 the div I had it on?
> 2 the overflow hidden code?
>
> What does the overflow hidden mean/do
> And thanks again guys
>
>
>
quote:
Originally posted by:
Newsgroup User
> Change your #innerwrapper rule to this -
>
> #innerwrapper {
> height: auto;
> width: 768px;
> background: url(images/body_bkgrnd.jpg) repeat-y;
> overflow:hidden;
> }
>
> and see if that helps.
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> ==================
>
>
> "Bryan628" <[email protected]> wrote in
message
> news:g6qqk1$1ag$[email protected]..
> > And thanks for your time.
> >
http://www.asmc.ca/index2.html
> >
> > Bryan
>
>
>
>
>

Preview what a background 'Image Repeat' will look like?

I want to preview some website background images that I have which are 1 pixel wide without having to upload to the website and refresh the page. Is there a way to preview images repeating in either Adobe Bridge or Adobe Photoshop or any product in the Adobe Creative Cloud for that matter without having to upload to the website and refresh the page? I would ideally like to scroll through the images and have it simulate the repeat horizontal style.

Not sure that is what I'm looking for.
I have over 2000 different gradients for website backgrounds that I just want to scroll through to pick the one I want but I need the image to repeat horizontally so that I can see it because it's only 1 pixel wide ...
Ideally, I would like to just be able to hit my arrow key down and down and down and preview what the background would look like super quickly so I can pick the one I like best.
Hopefully that makes better sense.
Thanks!
Something like this website, but where i don't have to upload files to the web.
http://lab.rails2u.com/bgmaker/

Background Image repeating for table cells

I am trying to put different images as the background to all
the cells in a table, so I can put text over the top of them, but I
cant have an image without it repeating. Ive tried going into the
code and adding background-image: "no-repeat" but that hasn't
worked. I know nothing of CSS and it seems really confusing - so if
this is the answer please give me CSS for dummies instructions.
Layers drive me bonkers as no 2 browsers display them in the same
place.
URL is:
http://www.visionsportsmedia.com/BillyTestSite/test
At the moment only cell one is a background image, the rest
are images inserted normally.
Hope you can help.
Thanks.

Your question reflects the confusing mess your life will be
if you persist
with web authoring without taking the time to learn some HTML
and CSS.
You have -
<th height="351" colspan="6" "scope="col">
Note the extra doublequote just before 'scope'.
Also note that your preloads (look at the body tag) as well
as your image
swaps (look elsewhere - everywhere you see 'file:///') are
all broken -
pointing to files on your hard drive. Finally, you might want
to just think
about making a page where there is no readable content
(everything here is
in images). It will get a zero search engine ranking....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"little bob" <[email protected]> wrote in
message
news:gqo8jh$ejo$[email protected]..
>I am trying to put different images as the background to
all the cells in a
> table, so I can put text over the top of them, but I
cant have an image
> without
> it repeating. Ive tried going into the code and adding
background-image:
> "no-repeat" but that hasn't worked. I know nothing of
CSS and it seems
> really
> confusing - so if this is the answer please give me CSS
for dummies
> instructions. Layers drive me bonkers as no 2 browsers
display them in the
> same
> place.
>
> URL is:
http://www.visionsportsmedia.com/BillyTestSite/test
>
> At the moment only cell one is a background image, the
rest are images
> inserted normally.
>
> Hope you can help.
>
> Thanks.
>

CSS - background image repeat-y

Hello,
QUESTIONThis works great in IE v6.0. How can I get the
background position to work in Firefox 2.0?
Instead of a tiled background that I can control where it
begins to tile within a DIV, in Firefox 2.0 it displays
the image once and doesn't tile like it does in IE. Argh!
background-image:
url(images/SideNav/side_nav_bottom_repeat.gif);
background-repeat: repeat-y;
background-position: 0% 218px;
I just went through a CSS training video and applied some of
the things taught.
It was very helpful thanks you. However it worked in IE but
not in Firefox.
http://movielibrary.lynda.com/html/modPage.asp?ID=279
5. Adding Colors and Backgrounds
Movie: Positioning backgrounds
Is there a work around for Firefox?

Zero is zero no matter what units you have on it. I am not
aware of any
mixed unit issue like that.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Alexander Ross" <[email protected]> wrote in message
news:f0rkhi$kht$[email protected]..
>I have some vague recolection about weird behaviors with
mixed units. Try:
>
> background-position: 0px 218px;
>
> If not, post a link to your page
>
>
>> background-image:
url(images/SideNav/side_nav_bottom_repeat.gif);
>> background-repeat: repeat-y;
>> background-position: 0% 218px;

Background image repeating, even with no-repeat?

I can't seem to figure out why my background image is repeating in Safari. I have set the page properties to no-repeat and it is working well in Firefox (Mac), but in Safari, my background image is repeating. Does anyone have any suggestions? Thanks so much.
Url: http://www.aquapup.com/zoe/author.html

Which background are you seeing repeat? I presume it's the ../zoe/images/Zoe_site_off_01.jpg one, but I'm not seeing it repeat in Safari.
.zoetextbackground {
    background-image: url(../zoe/images/Zoe_site_off_01.jpg);
    background-repeat: no-repeat;
.buglettetextbackground {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 13px;
    line-height: 18px;
    font-weight: normal;
    padding-left: 180px;
    padding-right: 340px;
    position: relative;
    vertical-align: middle;
    background-image: url(../zoe/images/Zoe_site_off_01.jpg);
    background-repeat: no-repeat;
.buglettetextbackground_book {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 13px;
    line-height: 18px;
    font-weight: normal;
    padding-left: 410px;
    padding-right: 360px;
    position: relative;
    vertical-align: middle;
    background-image: url(../zoe/images/Zoe_site_off_01_alt.jpg);
    background-repeat: no-repeat;

Background image display problem in IE6

I'm having another problem with my CSS. This one involves some background images not displaying properly in IE6. My navbar is an unordered list, and I'm using an image replacement technique to swap out the text for background images that serve as the buttons. The height of each button is 12 pixels, and the rollover is created by offsetting the image -12 pixels to reveal the bottom half of the image. So far so good. The images appear in all browsers, but IE6 displays more than 12 pixels of the image, revealing part of the rollover below it.
Here's the page in question: http://www.colbydesign.com/redesign/index.html
Here's a screen shot from BrowserLab of how the page looks in IE6: http://www.colbydesign.com/redesign/images/ie6_screenshot.jpg
The <ul> height and image height are set to 12 pixels. I can't figure out why IE6 has a problem with the CSS. Maybe there's an IE6 hack I can use? Any help would be appreciated.
Thanks,
R-Co

I didn't have a chance to work through the whole problem, but I believe that the font size of your "off-screen" menu text is pushing down the size of your ul and your li, as I see "overflow" outlines on that specific div.
Try giving those items #header h1 a, specifically, a smaller defined font size.
Alternatively, try applying an "overflow: hidden;" to the hover definition.
Beth

NavBar Background Image repeats in Netscape

Portal generates the following HTML to place an image in a NAVBAR:
<TABLE BORDER="0" class="RegionBorder" background="http://www.gevityhr.com/pls/portal30/docs/293.GIF" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
This works great in IE 5.0 the image shows up once. In Netscape 4.x the image repeats for each navbar element.

On Sun, 25 Jun 2006 00:29:18 +0000 (UTC), "Hydrowizard"
<[email protected]> wrote:
> Also for some reason the background image in the navbar
div is not shown in
>macs using firefox and mozilla (internet explorer in macs
shows it) and linux
>users. What is the cross browser solution for this?
Thanks
Could it just be timing out? The server is EXTREMELY slow.
Gary

Dreamweaver CC Design View background image render problem

Why in Dreamweaver CC does the Design View show any background image (CSS or HTML placed) with its top missing? The websites I produce with background images show fine in Live View and in the browser but why does the Design View have a problem with the positioning? CS5 didn't have this problem?

Please see attached screenshots, any ideas? You may not be able to see the red and green annotations, so just incase:
1. WRONG: The left screenshot is the Design View from Dreamweaver and this moves the grey background image up behind the header
2. CORRECT: The right screenshot is the Browser View and this is fine, showing the grey background image in the correct position.

Background image repeat, like css repeat_y

I imagine this is possible, but I haven't figured it out as yet.
I simply want to add a background image that does not scale, but functions exactly like a HTML/CSS background:
    background-repeat: repeat-y;
    background-position: left top;
Thanks.

Just because the swc is 700 kb doesn't mean your project will increase by that amount.
Only classes that are actually being used are compiled into your project.
As an alternative, you can use this simple class I wrote:
http://muzakdeezign.com/flex3/flex3lib/ImageTile.as
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:display="com.muzakdeezign.flex.display.*"
layout="absolute"
backgroundColor="#282E3E"
backgroundImage=""
>
     
     <display:ImageTile width="100%" height="1200" source="@Embed('skins/bg.png')" includeInLayout="false" />
     
     
     
     
</Application>

Background image from one slide appearing in all slides after and I can't remove it

Hello,
I'm modifying a course created with Captivate 5, in Captivate 7 and for some reason the background image from slide 35 is appearing in all slides after that one and I can't remove it. The most interesting thing is that when you look at the slides in the film strip they look different (like the original) than the one on the work area which contains the background image I'm trying to remove (screenshot below).
Any ideas or comments?
Thank you.

Hi Lilybiri,
Thank you for your prompt response. That was it!!!! You are awesome! I tried so many things and I don't know how that setting changed to "rest of project". Great thing to check next time.
I greatly appreciate your help.
Have a great day.

Adding 2 background images

Hello all!
I'm trying to figure out if this is possible..
I have 1 repeat-x image to the body that acts as a gradient background but then I would like to add a second background image with repeat-x again. I need both images to repeat at 100% width behind all the other elements, like header, container etc. But it seems I can use only 1 background image in body.
Is there a way to add 2?

Since you want it to go behind everything, just create a div that wraps around your content, and apply the background to that.
body {
background-image: url('images/imageA.jpg');
margin: 0;
padding: 0;
#wrapper {
width: 100%;
background-image: url('images/imageB.jpg');
margin: 0;
padding: 0;
<body>
<div id="wrapper">
All your page content goes here
</div>
</body>

Swap Background image using ActionScript

I need to know how to change (swap) background images.
Explanation:
The main file (level 0) is named "Master".
In the Master timeline, the lowest layer is named "bg" (for
backgrround).
On the bg layer is an image the size of the stage, and this
image forms the background against which other movie clips (.swf)
are shown.
Purpose:
In response to a user (ie: the user clicks a button), I want
to change the background image.
Problem:
I have searched through Flash 8 Help system, and cannot find
how to delete the 1st image from the "bg" layer, and add a
different image.
Hoping someone knows the answer,
Thanks,
John

convert your image to a movieclip. you can then use
movieclipInstanceName.removeMovieClip() to remove it. or, if you
might want to use it latter in your swf, change its _visible
property.

Lightroom 5.2 - Background Image on a Two-Page spread in the Book Module

Is there a way i can make the Background image spread in the two-page spread in the Book Module. Currently i see the same Background image repeating which is annoying. Or is there a workaround. I'm using LightRoom 5.2. Please Advise.

I have an even simpler method. I use MyPublisher to print my books. I select their page layout for a two-page spread, drag and drop the image. DONE! I understand that most people have their favorite places to have work done. I have been extremely pleased with MyPublisher.com, so I haven't even tried the book module in Lightroom.

Pages from template not showing DIV background images

Hi;
I have a template with several DIVs that each contain a background image. When I create a new page from that template, the the background images are missing. The code for the new page shows absolute paths to the images while the template show relative paths.
template code for header:
.twoColFixLtHdr #header {
    padding: 0 10px 0 20px;
    height: 215px;
    background-image: url(../images/10banner.jpg);
template based page code for header:
.twoColFixLtHdr #header {
    padding: 0 10px 0 20px;
    height: 215px;
    background-image: url(file:///C|/Documents and Settings/patrick/My Documents/web sites/The Marketing Guy/images/10banner.jpg);
I don't know if the path codes are relevant in this case, but why don't the background images appear ?
Thanks;
Pat

background-image: url(file:///C|/Documents and Settings/patrick/My Documents/web sites/The Marketing Guy/images/10banner.jpg);
You've got a path pointing to files on your local computer instead of your local site.
Did you save new page as "somefilename.html" or is still "untitled"?
Did you properly define your DW local site folder?
Creating your first website in DW CS4 -
http://www.adobe.com/devnet/dreamweaver/articles/first_cs4_website_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Main Wrapper, Container and background-image repeat problem-and Footer :-)

Similar Messages

Maybe you are looking for