I am trying to stick my pop up to top and make it a bit smaller to fit the screen.
Here is my landing page URL - yogavoga.com/2weekdiet
Any help will be appreciated.
.modal-content {
margin: 5px auto;
background-color: #fefefe;
border: 1px solid #888;border-width:3px;
width: 90%;
}
I'm not sure if this solves your question in full, because your sample code is a bit short and it doesn't show the element itself. I tried visiting your website, but can't find the element. So it is very difficult for us to say what you actually want.
margin is the space around your div element, in this case your modal. With your code you say your browser to put your element at the top, (0 margin at the top), and do the rest automatically. It does that and will center your element based on the width of your element.
You can scale your element with width. Make it smaller by reducing the percentage.
.modal-content {
margin: 0 auto; // 0 from top, left, bottom and right auto.
background-color: #fefefe;
border: 1px solid #888;
border-width: 3px;
width: 60%; // Width of your element.
}
TIP: remove the margin and padding presets from your body to have your element at the absolute browser border.
Related
I have the following code:
<div style="width: 100px;
overflow: hidden;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>
(XHTML 1.0 transitional)
What happens is that the padding-right doesn't appear, it's occupied by the content, which means the overflow uses up the padding right space and only "cuts off" after the padding.
Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right?
What I get is the first div in the following image, what i want is something like the 2nd div:
image
I have the same problem with the overflow:hidden; obeying all the padding rules, except for the right hand side. This solution works for browsers that support independent opacity.
I just changed my CSS from:
padding: 20px;
overflow: hidden;
to
padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);
Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.
Unfortunately, in your case this won't work so well, as you need a real border on the div.
Your best bet is to use a wrapping div and set the padding on that.
I had a similar problem that I solved by using clip instead of overflow. This allows you to specify the rectangular dimensions of the visible area of your div (W3C Recommendation). In this case, you should specify only the area within the padding to be visible.
This may not be a perfect solution for this exact case: as the div's border is outside the clipping area, that will become invisible too. I got around that by adding a wrapper div and setting the border on that, but since the inner div must be absolutely positioned for clip to apply, you would need to know and specify the height on the wrapper div.
<div style="border: 1px solid red;
height: 40px;">
<div style="position: absolute;
width: 100px;
background-color: #c0c0c0;
padding-right: 20px;
clip: rect(auto, 80px, auto, auto);">
2222222222222222222222111111111111111111111111113333333333333333333</div>
</div>
Wrap the div and apply padding to the parent
.c1 {
width: 200px;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 50px;
}
.c1 > .c1-inner {
overflow: hidden;
}
<div class="c1">
<div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333
</div>
</div>
If you have a right-adjacent element to the one in question, put padding on its left. That way the content from the left element will flow up to but not past its margin, and the left padding on the right-adjacent element will create the desired separation. You can use this trick for a series of horizontal elements which may have content that needs to be cut off because it is too long.
I want to make a header with a image in it that will use the whole width of the browser even when zoomed out. Directly under that #slider-wrapper with the image in it is the #main-content. But that div is postioned directly after #topheader now as you can see what indicates my problem. That div must be right after the #slider-wrapper (and thus ) but because #slider-wrapper is positioned absolute, the div #main-content is positioned after #topheader.
How can I get the #main-content positioned after the #slider-wrapper? Is there some other way to make the header image use the whole width of the screen instead of position absolute? Please help me with this, trying this for hours now.
I have made a jsfiddle for the first time that's not 100% correct but it will do I think. So atm the header image is using the whole screen even after zoomed out but I can't get the #main-content positioned well. Thanks alot
https://jsfiddle.net/hj28fuw7/4/embedded/result/
https://jsfiddle.net/hj28fuw7/4/
If I understand your issue correctly, I think what you need to do is set a top margin on the #main-content to the value of the height of the #slider-wrapper. i.e.
change:
#main-content {
width: 1060px;
margin: 0 auto;
border: 1px solid #000000;
}
to:
#main-content {
width: 1060px;
margin: 426px auto 0px auto;
border: 1px solid #000000;
}
In the "CSS The definitive Guide", the author said "The values of these seven properties must add up to the width of the element’s containing block, which is usually the value of width for a block element’s parent". But In the following, the child element is wider than the parent.
//html
<div class="wrapper">
<div class="content-main">
<div class="main">This is main</div>
</div>
</div>
// style
.wrapper {
width: 500px;
padding: 30px 0;
border: 1px solid #0066cc;
}
.content-main {
padding: 0 20px;
border: 2px solid #00CC33;
}
.main {
width: 500px;
border: 1px solid #f00;
}
So I have two quesions:
What does the author mean for the "seven properties must add up to the width of the element’s containing block".
Why in my example, the element will stick out the parent.
in the edit version, the seven properties add up to the width of the element' containing block seems work well. Why the equation not apply to my example?
EDIT VERSION
p.wide width is 438px, the author calculate as following
10px(left margin) + 1(left border) + 0 + 438px + 0 + 1(right border) – 50px(right margin) = 400px(parent width)
// HTML
<div>
<p class="wide">A paragraph</p>
<p>Another paragraph</p>
</div>
// CSS
div {width: 400px; border: 3px solid black;}
p.wide {
margin-left: 10px; width: auto; margin-right: -50px;
border: 1px solid #f00;
}
What does the author mean for the "seven properties must add up to the width of the element’s containing block".
He is teaching you CSS Box Model, here, you are using div elements which are block level in nature, block level means they take up entire horizontal space by default, unlike span or i or b tags, which are inline elements.
So when you use padding or border they are added outside of the element and not inside. So for example you have an element of say 100x100 in dimension, and you add a padding like
element {
width: 100px;
height: 100px;
padding: 10px;
}
So in the above case, your element will be 120x120 in total, because it will add up 10px of padding on all four size of your element.
Explaining padding syntax
You have two different padding syntax, which are as follows...
padding: 30px 0; in .wrapper and padding: 0 20px; in .content-main so these aren't the same.
Both the above syntax are nothing but short hand syntax of padding ... The complete version looks like...
padding: 5px 10px 15px 20px; /*Nothing to do with your code, this is just a demo */
So in the above example, you have to go clock wise, so 5px is nothing but padding-top: 5px;, then comes 10px which is right, next is bottom and the last 20px is padding-left.
So what when it's just two parameters defined, that means...
padding: 0 20px;
--^---^---
top bottom/left right
So, top and bottom are set to 0 here and right and left to 20px respectively...
Explaining the CSS
Note: None of the element has the height set by you, so the screens
you see ahead which I've attached are computed. So ignore height in them
completely.
.wrapper {
width: 500px;
padding: 30px 0;
border: 1px solid #0066cc;
}
Here, your element is 502px wide, so why? As I said that border will add on all four sides of the element, and hence it will add 1px on all four sides but your padding is applied to top and bottom only. It's better to use tools like Firebug which will show you graphical presentation of what's going on behind the scenes.
Coming to the second snippet which has the following syntax
.content-main {
padding: 0 20px;
border: 2px solid #00CC33;
}
Here, it is now adding 2px border to your element but, the padding is now applied to left and right and nothing for top and bottom so now the computation will be
Coming to the last snippet which is
.main {
width: 500px;
border: 1px solid #f00;
}
Here, just border is applied, but why it goes out? In technical words, why it overflows? Because you have width defined. So since you have padding set for the parent element, which is padding: 0 20px;, so it will nudge the child element by 20px from the left side. I'll attach a screen of Firebug to show you why it is nudged....
Why in my example, the element will stick out the parent.
Because you are defining width of 500px to your .main div
Demo (What happens when you take out the width)
The default box model is known as content-box
This can be altered by defining a new CSS3 introduced property called box-sizing set to border-box which will alter your box-model in such a way that it will count the padding and border inside the element instead of outside
like many others looking for CSS height solutions, I've had this issue on and off throughout the years. A simple jsfiddle is worth a thousand words:
http://jsfiddle.net/7dcjn/1/
I understand how to use height: 100% on the html and body to achieve partially what I would like to do. I also just found out about the CSS3 box-sizing property, which again, fixes some of the issues.
However, I still have the issue where if you have a top header div1 that is 50px in height, then have a div2 below that with 100% height, the browser makes the div2 100% of the viewport height which then of course makes div2 run outside the body. See the jsfiddle above or code below.
<div id="MainBody">
<div id="TopHeader">My Top Header</div>
<div id="ContentWrapper">
How does one get this blue box to extend only to the bottom of the viewport/browser window? In other words, the blue border needs to extend right up to the green box.
</div>
</div>
html, body {margin: 0; padding: 0; border: 2px solid #00CC00;}
html, body, #MainBody, #ContentWrapper {height: 100%; min-height: 100%; box-sizing:border-box; -moz-box-sizing:border-box;}
#MainBody {margin: 0; padding: 0; border: 2px solid #CC0000;}
#TopHeader {height: 50px; background-color: #303030; padding: 10px; color: #FFFFFF;}
#ContentWrapper {margin: 0; padding: 20px 20px 0 20px; margin: 10px 10px 0 10px; border: 2px solid #0000CC;}
Any suggestions? Thanks!
I think this is the closest you'll get to actually fitting the box to the remaining space, that is to have the box fill the whole space and float the header over top of it so that the content gets pushed out of the way.
This is a better solution than calc() because the size of the header does not need to be set in order for this to work.
So you need to make a few modifications, TopHeader needs to be float:left;width:100%; and the margins on the ContentWrapper need to be changed so that it doesn't get pushed off of the bottom.
See my JSfiddle
To adjust the spacing below the header for when the content starts you need to adjust hte bottom margin on TopHeader
Here's an Example
Here's your solution bro:
The first styling of the css of the "contentWrapper" was false.
http://jsfiddle.net/xbV9A/
I have the following code:
<div style="width: 100px;
overflow: hidden;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 20px;
">
2222222222222222222222111111111111111111111111113333333333333333333</div>
(XHTML 1.0 transitional)
What happens is that the padding-right doesn't appear, it's occupied by the content, which means the overflow uses up the padding right space and only "cuts off" after the padding.
Is there any way to force the browser to overflow before the padding-right, which means my div will show with the padding right?
What I get is the first div in the following image, what i want is something like the 2nd div:
image
I have the same problem with the overflow:hidden; obeying all the padding rules, except for the right hand side. This solution works for browsers that support independent opacity.
I just changed my CSS from:
padding: 20px;
overflow: hidden;
to
padding: 20px 0 20px 20px;
border-right: solid 20px rgba(0, 0, 0, 0);
Having container divs works fine, but that effectively doubles the amount of divs on a page, which feels unnecessary.
Unfortunately, in your case this won't work so well, as you need a real border on the div.
Your best bet is to use a wrapping div and set the padding on that.
I had a similar problem that I solved by using clip instead of overflow. This allows you to specify the rectangular dimensions of the visible area of your div (W3C Recommendation). In this case, you should specify only the area within the padding to be visible.
This may not be a perfect solution for this exact case: as the div's border is outside the clipping area, that will become invisible too. I got around that by adding a wrapper div and setting the border on that, but since the inner div must be absolutely positioned for clip to apply, you would need to know and specify the height on the wrapper div.
<div style="border: 1px solid red;
height: 40px;">
<div style="position: absolute;
width: 100px;
background-color: #c0c0c0;
padding-right: 20px;
clip: rect(auto, 80px, auto, auto);">
2222222222222222222222111111111111111111111111113333333333333333333</div>
</div>
Wrap the div and apply padding to the parent
.c1 {
width: 200px;
border: 1px solid red;
background-color: #c0c0c0;
padding-right: 50px;
}
.c1 > .c1-inner {
overflow: hidden;
}
<div class="c1">
<div class="c1-inner">2222222222222222222222111111111111111111111111113333333333333333333
</div>
</div>
If you have a right-adjacent element to the one in question, put padding on its left. That way the content from the left element will flow up to but not past its margin, and the left padding on the right-adjacent element will create the desired separation. You can use this trick for a series of horizontal elements which may have content that needs to be cut off because it is too long.