I am having trouble getting the grey box on my page, https://com-bb-dev.com.edu to automatically resize to the width of the borders on the two boxes that are above it on every resolution. On 1440x900 it looks normal, or how I want it to look for every user, however I am using my second monitor here on a different resolution to test for issues such as this.
Here is what I have tried so far:
#loginText {
padding: 12px 80px 18px 80px;
background: #5f6062;
display: inline-block;
width: 912px;
border-top: 6px solid #DADADA;
margin-left: 10.6%;
text-align: center;
}
By default this div is not displaying as an inline box. Its entire container for whatever reason takes up the entire width of the screen(this is by default as far as I know). Thank you.
You need to make the following changes to the #loginText CSS:
Remove padding-right: 80px;
Remove padding-left: 80px;
Change margin-right: auto;
Change margin-left: auto;
Add width: 1072px;
Your issue is that your margins were percentage based, which scales on all resolutions. Your box above is an absolute size (1072px); this should make it match and center it as well.
I think I understand what you're trying to ask. The reason why the width of the gray box doesn't always match that of the two above boxes is because while the upper boxes have a set width, the gray box resizes with the browser window width (since it has a percentage margin on both sides).
Amend your style definition to this:
#loginText {
background: none repeat scroll 0 0 #5F6062;
border-top: 6px solid #DADADA;
margin: 0 auto;
padding: 12px 0;
text-align: center;
width: 1072px;
}
And I believe that gives you the behaviour you're seeking. If this isn't what you were looking for, let me know and I'll be happy to help further. Good luck!
Related
So, I'm working on my Wordpress theme for my personal website, and I'm stuck trying to figure out how to do a couple things:
1) I need for the white to extend above the top edge of the page content
2) I'd like for the container to extend to the bottom edge of the viewport if possible.
I'm using Twitter Bootstrap for all of my layout stuff. Source is viewable by normal means, etc.
I tried using min-height: 100% in various places, haven't had much luck. Maybe it just wasn't in the right place, who knows.
Thanks ahead of time for any response!
To get the white to extend to the top, remove padding-top from the .page-container and add it to page-outline instead. Also add height: 100% to the page-outline.
So your CSS looks like this for page-container and page-outline:
.page-container {
min-height: 100%;
}
.page-outline {
background-color: white;
border-left: 1px solid black;
border-right: 1px solid black;
padding-top: 25px;
height: 100%;
}
I recently got a Ning account. I want to customize the site a bit more using their "Add Custom CSS" option I would like the ning site to look as close to this site as possible. More specifically the green horizontal bar across the top of the page, and the location and spacing of the header group. I'm currently using the following CSS on the ning site but can't figure out how to make the green horizontal bar span the entire width of the page. Any help, advise or direction would be greatly appreciated.
.mainTab-item.active, .mainTab-item.active > a {
color: #00a6ed;
}
.site-header {
height: 0px;
}
.header-container {
margin-bottom: 15%;
}
h2.module-name {
background-color: #88C540;
color: #FFFFFF;
font-size: 16px;
margin-top: -15%;
max-width: 100%;
padding: 30px;
text-align: center;
text-shadow: 2px 2px 0px #609F16;
}
Here is the Commonly used CSS classes and HTML (ning.com/ning3help/commonly-used-css-classes-and-html)
The problem here is that your container has a width of 960px which the green bar is included inside. Therefore when you set max-width or width of 100% it is relative to the container. E.g. 100% of 960px is 960px.
The only way around this would be to change the mark-up and take it out of .container in order for the percentage to be relative to the document.
Or another option is to absolutely position the div to take it out of the document flow. But I strongly do not advise that.
hey hoping someone can help me. It's for my portfolio I'm building at www.pxlmin.com/portfolio
What I want is for the background color to take up the whole width, and it does, but when I resize the window down-to say half the width-I just get white space off to the side, (when I scroll to the right), so what I'm wondering is how can I get the background of both the center and the container to extend off to the left.. I have width 100% but it's obviously not doing the trick. Thanks.
Remove width: 100%; from #portContainer and #middlePort. Hope this would solve your issue.
You could add the main background color to the body tag:
body{
margin: 0;
padding: 0;
background: #EFE6D9
}
or use a background image which has the stripes in - but as the above remove the 100% width or set the left and right borders to 0. The white bit is probably 6 pixels which is the the borders being added to the width.
#middlePort {
background: #E8DED0;
height: 300px;
border: 3px solid #E2DAD0;
padding-top: 49px;
}
or
#middlePort {
background: #E8DED0;
height: 300px;
width: 100%;
border-bottom: 3px solid #E2DAD0;
border-top: 3px solid #E2DAD0;
padding-top: 49px;
}
ahha, figured it out.. just set a min-width greater than the amount of the content you need to fill with the background. in my case div #middleport min-width: 1500px;
Amazing the amount of pages that have these fall off backgrounds though (when viewport width reduced and scolled to the right).. tinygrab.com, nodejs.org to name a couple..
I'm pretty rubbish with CSS, I muddle through and rather than bash my head against a brick wall...
www.SchofieldBell.com
I have the book part of the page in the middle by placing everything inside #wrapper:
#wrapper
{
BORDER-RIGHT: 0px solid;
BORDER-TOP: 0px solid;
BORDER-LEFT: 0px solid;
BORDER-BOTTOM: 0px solid;
PADDING-TOP: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 17px;
MARGIN: 0px auto;
WIDTH: 900px;
DISPLAY: block;
POSITION: relative;
TOP: 0px;
}
But I want the left hand side of the page (the bit that's missing) to expand or shrink depending on the screen size...
Any ideas?
First of all, please write CSS-code in all lowercase - so much easier to read. :-)
#wrapper {
width: 90%;
}
Will ensure that #wrapper always has a width equal to 90% of the viewport (viewing area of the browser).
or
#wrapper {
margin: 20px;
}
will ensure that the #wrapper width always is 100% of the viewport, minus 20 pixels on each side.
Did i understand your problem correctly?
It is called elastic or fluid layout, and there is a great article in A List Apart
First off...
Image overload, optimize or something, took a good 5-8 seconds to load
Give the element a 23% width, and a min-height property.
This design isnt fluid at all and is too big for my 1600x1200 screen, reconsider that.
Using a mix of CSS / tables / and iFrames is pretty messy, try to correct that.
Thanks.
Depending on whether I understand your goal correctly, this might be worth a try: Place the div within #wrapper and position it c. 900px from the right side of the wrapper. I assume your intent is to overflow the text off the left hand side of the page.
Eduardo mentioned A List Apart, however, I think this article on that site might be more appropriate (as it seems to be exactly what you want).
2 columns, liquid, fixed right
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.