All the content of my site is centred in the main wrapper of my page. What I am trying to do is if the resolution of the screen gets bigger have a second wrapper expand and fill the space with a second background.
If you look at this site you will understand what I mean. http://www.cclonline.com/
Thanks in advance.
Related
Hello all the web editing professionals! I have a bit an “alternative” problem:::
First off, here is my webpage that I need help adjusting elements’ heights and margins with::: www.rebelrock.fi. Please open that webpage in another browser window first!
So there are three DIV elements with the parameter position: fixed there; The MENU, the LOGO and the bottom FOOTER.
My problem is with the LOGO included DIV (at the top of the page, right under the MENU) and the main page content MARGIN-TOP positioning.
So as the browser windows size (actually the WIDTH) is changed smaller, at one point the REBELROCK .png-file LOGO IMAGE at the fixed-positioned DIV above will start automatically adjusting the width and height of that logo image. And when the logo is getting smaller (both by WIDTH and HEIGHT), then the HEIGHT of the DIV – inside of which the logo is – will be getting smaller too – and that’s exactly how I want it to be.
However, the non-fixed main content that is scrollable vertically, and especially the MARGIN-TOP value of that content will NOT be adjusted by the changing height of the FIXED logo DIV above, causing there unwanted space between the fixed logo DIV and the main content of the page.
So my question is; HOW CAN THE MARGIN-TOP VALUE OF THE MAIN CONTENT ELEMENT BE CHANGED IN RELATION TO THE CHANGING HEIGHT OF THAT LOGO DIV ABOVE IT?
As You can see, the pages are by far not finished in almost any way but I first want to have all the basic HTML/CSS to be perfect until starting to add more specific detailed content to the website. The site itself was initially a template of ADOBE DREAMWEAVER but that’s not important here 😊
I really hope someone here could help me.
Thank You in advance!
Yours, Tommi Tiihonen
e-mail: tommi.tiihonen#gmail.com
My webpage: www.rebelrock.fi
Give The saurce code to change edits on your website
This is how the site looks with the window in full size:
This is how the site looks with the window reduced in width:
You'll notice that as soon as the window gets reduced in width enough to touch the left edge of the road, the entire footer section (i.e. road, black box, rocks on ground) stops shifting over with the rest of the layout and stays in place.
Ideally, I'd like the footer to shift with the rest of the layout so the black box in the footer matches the grid of the three boxes above it, like this:
I have tried fixing this for a few hours and I figured I could use some help. If someone out there has the patience to help me with this, I'd truly appreciate it.
Thanks for reading.
problem in your this image
http://yourdailylaughz.com/wp-content/themes/ydl/images/footer.png
you should crop this image in 2 different slice 1 slice for bridge bg and second for content bg your problem will be solved..
Ok, so the issue is I have a header, footer and the content div and what I want is for the content div to auto fill the height of the browser between header and footer making the footer stay on the bottom of the page, or below the content length.
when you go to incard.com.au you can see the issue on the index page as the content area is smaller then the browser window so we have added a height to the div to solve the footer floating issue.
I fixed it using jquery
$('#sitewidth').css({'height':(($(document).height())-320)+'px'});
$('#contentbody').css({'height':(($(document).height())-320)+'px'});
Remove the 'min-height: 700px' from #contentbody
So what is supposed to happen when the browser window is smaller than the height of the div?
You can set the height of the central div at 100 percent. For example, make the content div 100%, make the top and bottom fixed heights. That's kind of a hack but it works sometimes I think -- the 100% won't compress the fixed height top and bottom -- it "tries" to be 100%.
What I'm unclear about is what's supposed to happen as you make the browser window smaller. Is the header and footer supposed to stay glued to the top and bottom of your browser, while the content area gets smaller and smaller?
The only issue I see is that the orange borders on each side of your content area stop half-way down the page when the content doesn't reach the footer.
The most common way to fix this issue it to make those orange borders a background image and have it repeat-y inside of .sitewidth
I was able to fix the solution by using Javascript, it seems that to get the height of the content to fit the whole screen correctly I had to do a math thing where I took the height of the footer and header away from the browser screen size and then that gave me the min-size of my content body. as it is different on each users screen size it had to be a javascript set function.
I'm essentially trying to design my header and footer how it's done at StoreEnvy. They have a large (2400px wide) header and footer, which are always centered. When you resize the page horizontally, th same part stays centered, but new parts of the image are exposed along the end of the browser window.
I've tried setting up my document like this, but I can only either 1) Get the image the resize to fit the entire window, or 2) have scroll bars totaling the width of the images.
ANy idea what I may be missing??
Thanks!
Make the image a CSS background and center it. Then it will crop as expected. There are other methods but this is the easiest.
I am a new learner of html and jquery.
Please help me how I can create an overlay div which covers my whole screen, including the background image as well. I was able to create an overlay div but it does not covers my whole screen, instead it covers my container div and if i increase the width it stretches to right side but left part remains uncovered.I put my overlay div in the outer most div but still on increasing the width it gives extra width to right side only and left part remains uncovered.
.
My wrapper div has a background image for the whole screen but my overlay div is not able to cover left part of my container div. Please help me.
thanks
HP
take a look at the blockUI plugin
http://jquery.malsup.com/block/
lots of different styles available!
the page blocking example is what you need, it works with a div or a html string for the message while the overlay is shown.
I got the answer.
YOu can put margin:auto; Now, your browser will take care of it and it will occupy the whole screen.