newb here again,
i'm pretty sure i knew this at one point but i no longer remember.
here's my fiddle
http://jsfiddle.net/rachelcat/PHG6U/
obviously this is not the font i am using but let's deal with it.
height: 100%
^ i tried this and it makes everything dissppear.
i am aware i have the lines set to 800px which is why they stop, but without making them like "4000px" height how would i make it so it always corrects to the browser size? (whatever size that may be) without necessarily having the extra 1000 pixels when you scroll down?
i assume this has an easy answer and i'm just really dumb.
THANKS IN ADVANCE.
Set the parent elements' heights to 100%, along with the sideline divs. When using percentages, an element's height is calculated with respect to the height of the generated box's containing block.
html {
background: #FFFDDB;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
height: 100%;
}
body {
font-family: 'Pompiere', cursive;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
height: 100%;
}
Related
I am new to HTML/CSS and curious why div stretch correctly in below example, but not image?
Is the image calculated differently than div?
Is there an MDN documentation i can read more about this behavior?
body {
background: #222;
padding: 32px;
}
.card {
background-color: white;
padding: 32px;
border-radius: 8px;
}
img {
width: auto;
margin: 0px -32px 0px -32px;
}
.gooddiv {
width: auto;
height: 100px;
margin: 0px -32px 0px -32px;
border: 2px solid red
}
<div class="card">
<img alt="SG Image" src="https://images.unsplash.com/photo-1508964942454-1a56651d54ac?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80" />
<div class="gooddiv"></div>
</div>
For a <div>, a width: auto setting will mean 100% of its parent element, so it will stretch.
For an image, width: auto (which is also the default if you don't define width at all) will mean that (unless there is a height setting) the image is displayed at its original size and therefore not stretch or shrink. If you define width: 100% or similar (or a height setting) , it will adjust.
I want to add that if an image is stretched beyond its original proportions, it will look distorted and have a bad quality, so it really wouldn't make sense to stretch an image by default to the size of its parent element, which might easily be larger than the image itself.
To avoid the mentioned distortion due to stretching beyond original size, a common way to handle that is to use max-width: 100%; (and also max-height: 100% if you defined height for the parent), thereby leaving width and height at their default auto (= original size). That way you'll stretch the image to full width if its at least as wide as the parent originally, or have it displayed at original size if its smaller (avoiding bad quality due to stretching beyond original size). In the snippet below, I only used max-width: 100%; (i.e. everything else at default settings), which limits the image width to the parent element width (minus padding), avoids stretching beyond original width and adjusts the height automatically, keeping the original height/width ratio. (BTW. I erased the negative margins you added, which wouldn't make sense in this context)
Note: Setting width: 100% and height: 100% is not a good idea for images since in most cases this will distort the height/width proportion of the picture, making it look bad (unless it's an abstract graphic pattern where a disproportion between height and width doesn't matter).
body {
background: #222;
padding: 32px;
}
.card {
background-color: white;
padding: 32px;
border-radius: 8px;
}
img {
max-width: 100%;
margin: 0;
}
.gooddiv {
width: auto;
height: 100px;
margin: 0px -32px 0px -32px;
border: 2px solid red
}
<div class="card">
<img alt="SG Image" src="https://images.unsplash.com/photo-1508964942454-1a56651d54ac?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80" />
<div class="gooddiv"></div>
</div>
Even though I've set a max width/height for my image element, it'll still extend upwards when I zoom in on the page. Any help here :)?
.column img {
width: 80%;
height:450px;
max-height:450px;
min-height:450px;
max-width:80%;
border-radius: 50%;
border: 1px solid black;
margin-bottom: 20px;
box-shadow: 6px 6px 6px #000;
}
website 100% view
website 120% view
I know 1 way to solve this if you want with CSS only.
With CSS: you can make break points in your page. So in resolutions that you set your page will be responsive. You can check This . And you can not use (%) for solve your problem. Only with px. If you set
height:450px;width:450px;
this will work for the circle but will not be responsive. And the px of width must be the same with height. And the BootStrap is some files that can help you with the responsive design.
I have a center box which is 90% of the page, this is because at 100% is leaves a blank space to scroll. Either way my issue at the moment is I have a page with quite a lot of content, and it goes off the bottom of the center box. I would set the hight to auto, but then on pages like my home page, the center box is too small on larger screens, making look bad.
Heres the CSS:
#centerBox {
width:70%;
min-height: 90%;
height: auto;
background:#ffffff;
text-align: center;
margin:0 auto;
-moz-box-shadow:0px 3px 3px 3px #737374;
-webkit-box-shadow:0px 3px 3px 3px #737374;
box-shadow:0px 3px 3px 3px #737374;
min-height:500px;
Any help will be appreciated!
Thanks,
James
firstly if upon giving 100% width, horizontal scroll comes then reset the layout
body
{
margin:0;
padding:0;
}
now, for your large content, always leave your height to auto i.e. height:auto
but it causes one problem, when there is no content, height will be too small.
what you can do is you can employ jquery to control the height.
leave entire css as it is and do this.
document.ready(function(){
if($('.content-container').height()<200)
$('.content-container').height('500');
});
where $('.content-container') points to the required div i.e. content which want to scale
I was playing with a slideshow in jQuery today. I managed to create it when I noticed strange thing. The div #feature in which the slideshow is placed seems to be somehow glued to its parent element #content. When I add margin: 10px auto to the #feature div, the #content div is also lowered down by 10px relative to its parent element.
Can anyone tell me what have I done wrong here?
Providing you with the whole code would create a mess, but here's a link:
CSS for #feature:
#feature {
width:940px;
margin: 10px auto;
position: relative;
height:500px;
overflow: hidden;
clear: both;
box-shadow: 0px 0px 5px 2px #000;
}
and CSS for #content:
#content{
min-height:800px;
background-color: #fff;
}
My friend noticed an interesting thing. If you add margin-bottom: 30px to #menu the empty 10px space in content is filled correctly although the margin problem is still not solved.
position: relative does just that... makes any element that this applies to have its position become "relative" to its parent container.
#feature is a child of #content, so #feature's position becomes relative to the position of #content. When you add that 10px margin to #feature, it moves down 10px from #content.
Try adding overflow:auto; to #content. It may help.
Adding overflow prevents margins from collapsing
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin.
from https://www.w3.org/TR/CSS2/box.html#collapsing-margins
I have a faux column for the sidebar with a background image repeat-y. However, I would like to add a drop shadow to the entire image. How do I do this?
I can't seem to be able to figure it out. Below the box shadow applies only to the sidebar, but I want it to apply to the entire home_navbg.jpg faux column.
<div id="wrapper">
<div id="sidebar">
</div>
<div id="content">
</div>
</div>
#wrapper {
width: 100%;
background: url('../img/home_navbg.jpg');
background-repeat: repeat-y;
}
#sidebar {
width: 240px;
height: 100%;
float:left;
box-shadow: 0px 4px 20px #231F20;
-webkit-box-shadow: 0px 4px 20px #231F20;
-mox-box-shadow: 0px 4px 20px #231F20;
}
Edit: In the end, I just put the drop shadow in the background image itself. I guess CSS3 can't do it all.
The faux column seems to be a tricky (hacky?) solution to the "how to achieve equal height columns" problem, if I understand it correctly.
CSS3 has new a property that could do what I assume you would like to achieve.
It is called box-flex: http://www.w3schools.com/css3/css3_pr_box-flex.asp
Though it has limited browser support (no IE, Opera).
Is this similar to what you want?
http://jsfiddle.net/yuUKv/78/
Actually, what is the reason to use faux column? Probably you would be better (browser support wise...?) off using a javascript solution (jQuery is relatively easy to use) to properly adjust height of elements.
Does this work?:
http://jsfiddle.net/yuUKv/
The 100% height is 100% of the parent's height which in your example is only the size of the content.