The parent grey div hides the bottom part of the lime box.
Can I keep the bottom part of the lime box visible?
What is the right way of using overflow: hidden; here?
It is also important to save 100% width of the parent grey box.
Example 1 - Zoom in issue
Example 2 - Zoom out issue
How can we make the grey line 100% width (for both zoom in and out) ?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
/* Start BG RECT */
.bg-rect {
position: absolute;
top: 50px;
left:0; right:0; /* Required to be 100% 100% */
min-width: 980px; /* max for iPad */
height: 263px;
}
#bg-rect-important {
overflow: hidden; /* Disable right bg breaking by words on the right! */
/* overflow hidden: disallows child be taller then parent?! */
background-color: #656565;
}
/* Start BASE RECT */
.base-rect {
position: relative; /* margin: auto works only with position: relative */
margin: 0 auto; /* Centralize! */
/*!SPACE>*/top:32px; width:940px;
/*left: -300px; /* unfortunately scroll doen't work */
}
#base-rect-lime {
background-color: #3F3;
height:249px;
}
/* Start LIME RECT : left, right */
#left-text {
position:absolute;
left:-200px;
width:200px; height:218px;
}
#right-text {
position:absolute;
right:-200px;
width:200px; height:218px;
}
/* End LIME RECT : left, right */
/* End BASE RECT */
/* End BG RECT */
</style>
</head>
<body>
<div class="bg-rect" id="bg-rect-important">
<div class="base-rect" id="base-rect-lime">
<div id="left-text"></div>
<div id="right-text"></div>
</div>
</div>
</body>
</html>
I'm pretty sure this is what you want:
#bg-rect-important {
overflow-y: auto;
overflow-x: hidden;
background-color: #656565;
width: 100%;
}
Fiddle here - http://jsfiddle.net/h2E7v/
We think,
#bg-rect-important {
background-color: #656565;
}
will make your the bottom part of the lime box visible
It also save 100% width of the parent grey box
Hope this help you.
Related
I have the following code that does not cover the full page height if a page has content beyond the normal view port (not having to scroll). If I scroll down the outer div displays for just a small bit and that goes back to white.
Why is the outer div not taking the full height of the page even if it requires scrolling?
html ,body {
height: 100%;
font-style: Helvetica;
}
.page_background, .page { margin: 0 auto; }
.page_background {
width: 100%;
min-height: 100%;
background: -webkit-linear-gradient(#282828, #888888); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#282828, #888888); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#282828, #888888); /* For Firefox 3.6 to 15 */
background: linear-gradient(#282828, #888888); /* Standard syntax */
position: absolute;
/*height: 100%;*/
}
.page {
background-color: #FFFFFF;
width: 85%;
min-height: 100%;
bottom: 0;
position: absolute;
height: 100%;
left: 7.5%;
}
<div class="page_background">
<div class="page">
</div>
</div>
I created a fiddle to demonstrate what I am doing. You can even see if you scroll in the fiddle, it doesn't take the gray border.
https://jsfiddle.net/1qwwtgjp/
Edit: Your Main Issue is CSS Positioning
See here: https://jsfiddle.net/1qwwtgjp/3/
You have used position: absolute; in your styles, but are looking for your content to flow (and your background height with it). Remove all the absolute positioning, including the left, bottom, etc, and the explicit height on your .page element so it can flow to whatever height it truly is. This will bring the outer wrapper along with it.
So the new styles for your .page class should be:
.page {
background-color: #FFF;
width: 85%;
min-height: 100%;
/** REMOVE THESE: **/
/* left: 7.5%; */
/* bottom: 0; */
/* position: absolute; */
/* height: 100%; */
}
Old Answer:
If I understand your question correctly, you may simply not be aware that browsers tend to have default margins on the <body> tag.
Simply add a style to remove it:
html, body { margin:0; }
and see if that solves your issue.
You can fix this by assigning overflow property to hidden for the outermost wrapper div.
.outerpagewrapperdiv{
overflow:hidden;
}
I'm trying to figure out how to resize a background image only if it is bigger than the div which contains it using only CSS.
<div id="container>
</div>
#container{
width: 100px;
height: 100px;
background-image: url("...myimagepath");
}
If the image is bigger than 100x100 px it should be resized but if it is smaller I need to keep it center and not adapted. In my code it works as aspected for images smaller than the div while the image is not resized for bigger ones.
You can frig it by putting the image in a div that sits in the background.
So HTML:
<div id="container>
<div id="background">
<img src="...myimagepath">
</div>
Container content here.
</div>
CSS:
#container{
width: 100px; /* Your original dimensions */
height: 100px;
position: relative; /* Lets anything in it be positioned relative to it */
}
#background{
width: 100%; /* Same width as parent container */
height: 100%; /* Ditto height */
position: absolute; /* Take out of document flow. Default position 0,0 */
z-index: -1; /* Push it behind anything else in its container */
}
#background img {
max-width: 100%; /* Don't let it get wider than its container */
max-height: 100%; /* Nor taller */
display: block; /* Lets margins be set (otherwise in-line) */
position: absolute: /* Lets us position it */
top: 0; /* Put it at the top ... */
left: 0; /* on the far left ... */
bottom: 0; /* and at the bottom (makes sense later) */
right: 0; /* and the far right (ditto) */
margin: auto; /* Best compromise between left/right & top/bottom = centre */
}
I seem to half remember there might be the odd browser that doesn't treat the zeros for top, left, etc properly. If that's true, use a value like 1px instead.
I have the following code for a section on my website: http://jsfiddle.net/qda6bkze/
The problem is, I can't get it to be responsive. Ideally, I'd like for the orange box and the picture to align themselves so that the picture overlaps the orange box. Something like this: http://puu.sh/bMb8M.jpg
I know I'll have to use media queries, but I was wondering what changes to make in order for the image to align itself under the orange block, since right now it sits to the right no matter how big the browser window is.
Here's what i have for CSS now:
.home-feature4 {
position:relative;
max-width:1200px;
}
#boxy {
width:1200px;
height:790px;
}
.feature4text, .orangeblock, .orangephoto {
position: absolute;
text-align: center;
}
.feature4text {
z-index: 2;
color:#32719a;
font-family:"Scout", sans-serif;
text-transform:uppercase;
font-size:12pt;
top: 100px;
left: 120px;
width:425px;
}
.orangeblock {
z-index:1;
top: 280px;
left: 20px;
}
.orangephoto {
z-index: 3;
top: 0px;
left: 600px;
}
Take out the top and left properties and add float: left;
Like so:
.orangephoto {
z-index: 3;
float: left;
}
A reference for the float property (and others) from W3 Schools
You need to give your div an "ID" and place the image inside the div. I wrote some mark up for you below feel free to copy it and make adjustments for it to work on your site. Let me know if you have any further questions I would be happy to help.
/* Your can adjust the CSS however you see fit for your Project */
#orangeblock {
width:410px; /* Give your background block extra pixels needed for your border */
height:310px; /* Same with your height */
background-color:#CCC;
}
#orangeblock img {
width: 390px; /* your image size shouls always be smaller than your div size */
height: 290px; /* This will allow you to see the background image */
padding: 10px; /* Your padding will have to be adjusted to get the image where your want */
/* you can also use padding-left: padding-right: padding-top: padding-bottom: and place whatever pixels you like */
}
<html>
<head>
</head>
<body>
<div id="orangeblock">
<img src="https://cdn.shopify.com/s/files/1/0636/3475/files/home-ossection-04-photo.jpg">
</div>
</body>
</html>
I've got a div for my header and a text in that div. Now I have figured out how to put that text at the bottom of the div but I can't seem to put it in the center.
text-align: center; didn't work.
#heading {
position: relative;
background: -webkit-linear-gradient(#acbfb9,#cae1da); /* For Safari */
background: -o-linear-gradient(#acbfb9,#cae1da); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#acbfb9,#cae1da); /* For Firefox 3.6 to 15 */
background: linear-gradient(#acbfb9,#cae1da);
height: 150px;
width: 100%;
}
#title {
position: absolute;
bottom: 20px;
}
<div id="heading">
<h1 id="title">StrAgility</h1>
</div>
First, your #title has not width set so it has the width of the text it contains if you use text-align:center; it won't center in the #header.
So you need to set width:100% on #title to and then text-align:center; will work as you expect.
see this
FIDDLE
CSS :
#title {
position: absolute;
bottom: 20px;
width:100%;
text-align:center;
}
Text-align center doesn't work for you as you'd expect as you haven't set the width of the title div. As such, it's currently sitting in the centre of the div, it's just that the div isn't wider than your text. So to change that add 'width:100%' and then add 'text-align:center'.
Ah, beaten to it.
Example 1 - Zoom in issue
Example 2 - Zoom out issue
How can we make the grey line 100% width (for both zoom in and out) ?
Notice: the left and the right div position
cause a white gap issue from the right side of the screen.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
/* Start BG RECT */
.bg-rect {
position: absolute;
top: 50px;
left:0; right:0; /* Required to be 100% 100% */
min-width: 980px; /* max for iPad */
height: 263px;
}
#bg-rect-important {
overflow: hidden; /* Disable right bg breaking by words on the right! */
/* overflow hidden: disallows child be taller then parent?! */
background-color: #656565;
}
/* Start BASE RECT */
.base-rect {
position: relative; /* margin: auto works only with position: relative */
margin: 0 auto; /* Centralize! */
/*!SPACE>*/top:32px; width:940px;
/*left: -300px; /* unfortunately scroll doen't work */
}
#base-rect-lime {
background-color: #3F3;
height:249px;
}
/* Start LIME RECT : left, right */
#left-text {
position:absolute;
left:-200px;
width:200px; height:218px;
}
#right-text {
position:absolute;
right:-200px;
width:200px; height:218px;
}
/* End LIME RECT : left, right */
/* End BASE RECT */
/* End BG RECT */
</style>
</head>
<body>
<div class="bg-rect" id="bg-rect-important">
<div class="base-rect" id="base-rect-lime">
<div id="left-text"></div>
<div id="right-text"></div>
</div>
</div>
</body>
</html>