Whenever I put in the HTML for my webpage; the #content div is below the widget/sidebar and I already tried position:absolute- and that causes my images to not re-size.
#content {
background: #fff;
margin: 2px 0 2px;
padding: 20px 62px;
width: 68%;
display: block;
float: left;
margin-left: 25%;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-moz-box-shadow: 0px 0px 0px 0px #000000;
-webkit-box-shadow: 0px 0px 0px 0px #000000;
box-shadow: 0px 0px 0px 0px #000000;
}
/************************************************************************************
SIDEBAR
*************************************************************************************/
#sidebar {
width: 25%;
float: left;
margin: 2px 0 2px;
}
.widget {
background: #0b2d7e;
margin: 0 0 0px;
padding: 0px 20px;
/* rounded corner */
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
/* box shadow */
-moz-box-shadow: 0px 0px 0px 0px #000000;
-webkit-box-shadow: 0px 0px 0px 0px #000000;
box-shadow: 0px 0px 0px 0px #000000;
}
Same lesson I tried to teach you earlier. You're stuff doesn't add up to 100% because of the paddings. You have 68% + 25% + 25% + more padding = way more than 100%.
If a box is 50% wide and it has a padding of 10px on the left and right, and a 1px border, then you have 50% +20px+2px.
If you have two divs exactly the same as above you have 100% +40px +40px +2px +2px = more than 100%.
Use box-sizing: border-box; to solve your padding and border problem above. Then you just have to take into account the margins.
See the Can I Use It for box-sizing.
Here is a JS Fiddle fixing your code... You also had a stray </aside> that wasn't needed.
http://jsfiddle.net/a2YSa/1/
Note that in the code I provided, box-sizing: border-box; tells the div to calculate its width including padding and borders. Then I have 25% sized left column, and a 50% right content column with a 25% margin = 100%.
Here is a fiddle with 25% sidebar and 75% main with 0 margins.
http://jsfiddle.net/a2YSa/3/
Screenshot of my last fiddle:
Have you tried using firebug to visualize the problem ? I think you should remove your 25% left margin on your #content...
i think the problem is here:
content width: 68%
content margin-left: 25%
sidebar width: 25%
you currently use more then 100%.
if that isn't the problem, please post html code too or check the width AND paddings / margins with Firebug. it's the easiest way.
Related
What order would this go in?
div{
margin:0px 0px 13px 0px;
}
What side of the div would the 13px effect?
Also would I need all of the px or just one or none?
could I do this?
div{
margin:0 0 13 0;
}
It goes in this order: top, right, bottom and left. For example:
div {
margin: 1px 2px 3px 4px;
}
is equal to
div {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
}
You also can specify only 2 properties, and for example:
div {
margin: 10px 20px;
}
means the following: margin-top and margin-bottom are equal to 10px, margin-left and margin-right are equal to 20px.
You can also specify 3 values, like this:
div {
margin: 1px 2px 3px;
}
And it equals to:
div {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 2px;
}
And as you already know margin: 1px will set all 4 margins to 1px.
When you specifuing a number not equal to 0, you should specify px or % and so on, but when you specify 0, it can be just 0, it's OK.
I have several divs side by side floating on left and spread on multiple lines:
<!doctype html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
}
.elem {
height: 300px;
width: 150px;
background-color: rgba(230,230,230,1);
-webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
margin: 20px;
padding: 10px;
float: left;
transition: all 0.5s ease;
}
.elem:hover {
-webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
-moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
margin: 10px;
padding: 20px;
background-color: rgba(130,230,230,1);
}
.w140 { width: 140px; }
.w70 { width: 70px; }
.w200 { width: 200px; }
.w50 { width: 50px; }
.grid {
width: 100%;
}
</style>
</head>
<body>
<div class="grid">
<div class="elem w140">elem1</div>
<div class="elem">elem2</div>
<div class="elem w200">elem3</div>
<div class="elem w50">elem4</div>
<div class="elem">elem5</div>
<div class="elem">elem6</div>
<div class="elem w70">elem7</div>
<div class="elem w50">elem8</div>
<div class="elem">elem9</div>
<div class="elem w200">elem10</div>
</div>
</body>
</html>
This works perfectly fine on firefox. But on Chrome (Version 55.0.2883.87 to be exact) when hovering some elements (for example the last one before a "line break"), the layout will get messed up during the transition duration.
How do I prevent this?
Fiddle at http://jsfiddle.net/d6rs6gsq/
I found a workaround referring to Animating margins and padding with CSS Transition causes jumpy animation
use css scale transform instead of manipulating the padding and margin values.
.elem {
height: 300px;
width: 150px;
background-color: rgba(230,230,230,1);
-webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
margin: 20px;
padding: 10px;
float: left;
transform:scale(1);
transition: all 0.5s ease;
}
.elem:hover {
-webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
-moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
transform:scale(1.1);
background-color: rgba(130,230,230,1);
}
http://jsfiddle.net/d6rs6gsq/2/
Hope it solves
It happens when the last element in the row animates with the one before it. Since the animation is ease and not linear, there are points during the combined animations when they create "corners" into which elements from next row are floating.
There are multiple ways to get rid of this unwanted effect. First, you shouldn't be animating padding or margin for grid elements. The rule of thumb in animation is: Never animate the space the element occupies, but only the element's rendered image. You want to use transforms or position:relative and top|right|bottom|left as none of these modify the space an element takes in document's flow.
However, the simplest solution in your case would be remove float:left from your .elem and apply: display:flex;flex-wrap:wrap; to your grid. The flex grid is smart enough to not break rows below based on inconsistencies in height of elements in previous row. It's one of the many advantages of the flexbox model over the box model.
Updated fiddle: http://jsfiddle.net/websiter/d6rs6gsq/3/
I have a centered webpage and for now I have resized it using media-queries but I don't know how I can achieve something like on stackoverflow itself. Once you decrease the width of the page, it's gettings smaller and smaller and the margin-left is decreasing towards zero; so at one point the page fills the whole window. I use a lot of margin-left: 25% to have the page centered, but this does not work like the design I want. Once I resize the browser window, the pages width gets smaller and it stays centered, while I don't really want the width to get smaller, but rather decreasing the space at the left and right of the page.
This is for example a title I use:
margin-top: 3%;
float:left;
font-size: 350%;
margin-left: 25%;
width:10%;
This is the "middle" of the site which has a white background:
position: absolute;
border-radius: 3px;
top: 0px;
left: 21%;
width: 58%;
min-height: 100%;
background: white;
z-index: -1;
-webkit-box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
Sorry, this is probably quite easy, but I somehow really don't get it...
Thanks
I think you need to set your left and right margins to auto. Not 25%.
Like this:
margin-left:auto;
margin-right:auto;
But you have to define a width of your container to which the auto values are applied.
If you take a look at the CSS of the example site you provided in your comment:
#mainbody {
width: 980px; /*this line*/
text-align: center;
vertical-align: top;
padding: 0;
margin: auto; /*this line*/
height: auto;
background: #fff;
}
I'd like a CSS div with an arched top and a square (or slightly rounded corners) bottom.
Here's my CSS:
#oval {
width: 200px;
height: 500px;
background: red;
border-radius: 80px/20px 5px;
}
I also tried 80px/20px 80px/20px 5px 5px with no luck, and a bunch of other combinations. I've been testing in Firefox.
Any help would rock!
You could try this:
border-radius: 80px 80px 5px 5px / 20px 20px 5px 5px;
Try building out each corner separately like this
.oval {
width: 200px;
height: 500px;
background: red;
border-top-left-radius:200px;
border-top-right-radius:200px;
border-bottom-right-radius:0;
border-bottom-left-radius:0;
//border-radius: 80px/20px 5px;
}
Okay, here's the rule: border-radius: 85% 85% 5px 5px / 15% 15% 5px 5px;
Apparently, you specify all the horizontal radii for four corners, then all the vertical radii
Given the following CSS
.comment {
margin: 10px;
display: block;
overflow: auto;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
-webkit-box-shadow: rgba(0, 0, 0, .2) 1px 1px 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
min-height: 200px;
width: 100%
}
This is applied to a textarea but the right margin is ignored and the textarea goes off the screen.
why is this?
By setting the width to 100% and a margin of 10px the textarea will be a 100% width of it's container shifted down and to the left 10px
To get your desired result you'll probably need to use a container around the textarea with a 10px padding.
See example.
commentA is using a container with padding
commentB is your original CSS
so something like:
<div class="comment-container">
<textarea class="commentA"></textarea>
</div>
and
.comment-container {
padding:10px;
}
.commentA {
width:100%;
min-height: 200px;
}
to get started.
Just use:
display: inline
Instead of:
display: block