I am designing a page on www.bookmyshirt.co.cc/hair/city.html
In main div it has two div:
1) block_header
2)main_out
but main_out is not showing grey background to all of its content rather it shows only grey background to some height i want that grey background to all of its content.
and also at bottom that button also merge with above content.
any suggestion is welcome.
main-content1 is in position absolute.. that's why main-content cant set the proper height.
Remove the position absolute an you'll see the grey background
EDIT:
your problem is that you set the heights for different divs but the content of your divs are bigger than the height you gave them (e.g .main-content, .deals) if you have a dynamic content or if you dont know the height of the div, just remove that property in the css.
To solve the problem of the register button, remove the height on .deals
Related
I am trying to implement a sidemenu with a background image but I don't understand how to make it responsive also vertically...
I have this image https://ibb.co/Pzyyyh2 whose size is 320x1000px. It's a very tall white image that a certain point becomes black.
I'd like to have this black detail to stay always at a certain point of my sidemenu (the transition from white to black should start before the social link part).
As you can see here, on iPhone X emulator, it works as expected: https://ibb.co/C7Nm6b7.
While on another device such as Moto G4 this happens: https://ibb.co/S7tQwJV
You don't need the white part of the image, if what you're trying to show is the black, then just use the black. If your image is an svg, it will always expand/contract properly, without visible pixelation. The rest of the footer should have a background-color equal to that of your img.
If you want to use skew, then make a first div (the parent/wrapper), then place it right before your footer area. Then inside the wrapper, add the skew-div. Make the parent have overflow:hidden so the excess of the skew-siv doesn't become visible past the borders of the parent.
Like this:
Then, inside your 'magic-div', you'd have the following:
The parent gets width: 100%; and overflow:hidden;. The child skew div inside gets width:100%; too. If you're using background with an svg as suggested earlier, the background-size rule should be 100% auto or cover, depending on the scenario (the widths you're covering + the angle of your skew). Give it a try and let us know how it went.
I am re-building my website with DIVs, I want a DIV's height to adapt to the height of the browser, I can easily do that by positioning the DIV as absolute and then using "bottom-padding:0", however I need my DIV to be positioned as "relative" and therefore I can't get this result. This is my website (work in progress):
http://www.antoniofx.com/test/
As you notice, the RED box goes below the footer, I want the red box (a div) to stop where the footer is (even if I resize the browser) so that the content inside the red box will end when the browser end and then scroll if there is more content, instead of just pass the footer and going below it. I have researched this but couldn't find any solution. Thanks!
I have a header inside a container div with a width of 960px. The header holds a couple logos perfectly centered on the page. I'm suppose to have a background gradient that extends forever behind the header. The problem arises because the gradient banner is limited by the width of the 960px. I tried moving the banner out of the 960px container and positioning it down but it leaves unwanted space above the header.
I've tried z-index -2. Nothing.
Any suggestions
You can use the 1background-repeat1 CSS property for this.
http://www.w3.org/TR/CSS2/colors.html#propdef-background-repeat
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.
Thanks for your help in advance.
Here is PNG of the layout: Website Layout
The Second Section (with the dark grey background) is giving me problems. Below is the CSS I am using for the background.
#mainbg {
width:100%;
height:450px;
padding-top:25px;
background-image:url(../images/mainbg.png);
background-color:#303030;
background-position:top;
background-repeat:repeat-x;
}
The background displays, (although it won't display unless I set a min-height, which doesn't work for IE6 anyway), and everything works, until I get content that stretches beyond say 450px.
After that, the content just spills over into the footer, and the background doesn't stretch. I don't want the IMAGE to stretch, just for the image to end and the background colour to continue on as a plain background fitting to the content.
How do I set the background height for this div so that it stretches to accommodate the content, whilst only displaying the background image once on the y axis (while still repeating on the x axis).
I play around with other height and inherits and autos, but setting any of those just means the image does not display.
Help, this is driving me insane!
You have two problems:
It is forcing you to set a minimum height because you don't have content in it yet. Imagine an empty div. It will be as wide as the screen, since it's block level, but as tall as the text, which is nothing. So you don't need a minimum height, you just need a height or some actual content.
The background will only take up the space that the div is taking up. If the color and the image stop, that means the div has stopped. Try setting "overflow: scroll" just to see where the cutoff really is..
One thing that will make your life a lot easier with CSS is to not try to set everything all at once and make sure layout is good, then worry about cosmetics like background images and colors. Try give the troublesome div a background color of orange and a blue border. This will give you perfect idea of when things start and stop. Once you know the color is lined up, then try the background image.