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..
Related
I have a question on something weird that is rendering on the latest IE and Chrome browsers. I have a div that is supposed to span 100% of a parent. So clumsily, I gave it - width: 100%px; as a CSS property. Here is my entire item:
.loc_vendiv{
position: relative;
margin-top: 5px;
left: 0px;
width: 100%px;
height: 120px;
border: 1px solid #333;
background-color: #fff;
}
The weird thing - that worked perfectly. So much so, that I just noticed today that this was wrong. Not wanting an ugly style sheet, I removed the px from the end. And... the div was two pixels too wide. Any explanation as to why this is happening? Here is the parent div:
#loc_catlist{
position: absolute;
width: 612px;
height: 720px;
top: 50px;
left: 0px;
background-color: #eee;
overflow-y: auto;
overflow-x: hidden;
}
I'm mildly annoyed, as the bad code works, yet the correct code doesn't do what I want. I don't think I can leave it, though. I don't like little hiccups like this...
It's because of your border.
Try adding :
box-sizing: border-box;
to your .loc_vendiv class, it will take the border in account.
Browsers usually ignore invalid css rules like width: 100%px; which means that to get the style you had with the mistake. you only have to remove the width rule.
2px too wide is likely caused because you have a width of 100% in addition to a border of 1px (all around adds up to 2px width).
A fix can be found here from "Paul Irish" about
box-sizing
what happens is that when the width value is wrong (100%px;) this part of the CSS is simply ignored by the browser. If this part of the css was deleted, the result would be the same.
About the 2 extra pixels, this happens because of the border set to the div.loc_vendiv.
The width of div.loc_vendiv is equal to the width of div#loc_catlist and to this is added the border value (1px for the left border and 1px for the right border = 2px).
Remember that the border width is added to the size of the object while the padding creates an internal space.
I have a contentWrapper class which contains all of the elements on my page. For some reason, the navigation takes up what appears to be 100% of the body and then some. I cannot however get the following elements, the slider and divs below, to stretch to fill the same width. There is always extra room to scroll to the right which displays the background color. I have made it pink in the fiddle its easy to see.
body {
background-color: black;
}
.contentWrapper {
height: 100vh;
width: 100%;
background-color: black;
}
http://jsfiddle.net/o5y26tqw/
Any suggestions? I feel like it could be an easy fix, deleting sections of the page at a time did not seem to remedy the issue.
So it looks like your .cycle-overlay is 100% wide and left is set to 20px. This is pushing everything over and revealing the background. Setting the width to 300px got rid of it for me.
JSFiddle
.cycle-overlay {
position: relative;
top: -200px;
left: 20px;
z-index: 999;
width:200px;
}
I have an image placed within a relative width div as part of a responsive page design. The div's width (and hence the image's size) is set to ensure that content beneath it appears above the fold on screens down to a certain resolution.
A minority of images that appear here have different dimensions (e.g. 4x5 format vs. 4x6). These taller images push the content beneath it below the fold.
I want to maintain the div's height for the 4x6 dimension, which represents the majority of images, such that when an alt format image appears here, the top and bottom of the image are evenly clipped.
I've tried a couple different approaches, none with the desired effect. Applying a max-height on the image element slightly distorts taller images. I tried max-height on the wrapper div with overflow:hidden, but that doesn't constrain the image element.
I applied max-height to that mainImage div, too, and this almost works. However, as you can see from the CSS, I'm using background-color and padding to create a border around the image. Setting max-height on the main div forces the bottom border of the image element outside of the main div. I also tried applying the border to mainImage, but the bottom border still does not appear. Lastly, with max-height applied to the div and not the image, the image is not centered vertically within the div.
I'm not sure how to accomplish what I'm after, or whether it's possible in a responsive design (i.e. without a fixed height). Any thoughts?
Here's the HTML:
<wrapper>
<header></header>
<content>
<!--the main image -->
<section>
<div id="mainImage" role="main">
<div class="in mainImageWrapper">
<img src="[IMAGEFILE]" />
</div><!--end mainImageWrapper -->
</div><!--end mainImage-->
</section>
<!-- more content -->
</content>
</wrapper>
And here's the CSS:
#wrapper {
width: 100%;
min-height:100%;
height: auto !important;
height:100%;
border: none;
}
#content {
margin: 0 auto;
width: 90%;
max-width: 980px;
}
#mainImage {
margin: 1% auto 3% auto;
width: 100%;
overflow: hidden;
}
.mainImageWrapper {
width: 100%;
max-height: 634px; /* The aforementioned fix that doesn't provide the desired effect */
overflow:hidden;
margin: 0 auto;
padding: 0;
display: table-cell;
text-align: center;
position: relative;
}
#mainImage img {
width: 97%;
padding: 1.5%;
background: #FFFFFF;
margin: auto;
vertical-align: middle;
-moz-box-shadow: 1px 2px 8px #1A1A1A;
-webkit-box-shadow: 1px 2px 8px #1A1A1A;
box-shadow: 1px 2px 8px #1A1A1A;
}
So, it appears that what I want to accomplish above isn't possible through css. I wound up implementing phpThumb and using the z-crop parameter to crop images that exceed a certain height from the center. Works well for most instances. Only issue I've encountered with this approach is that, since this is a photography website that includes watermarked images, occasionally the crop cuts off the watermark in an awkward way.
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!
I have such Layout structure:
1) First lays SimpleLayoutPanel main (green border)
2) I'd like to add DockLayoutPanel child to main (red border; 25px margins)
I have implemented this, but result, shown in attachment (.jpg), is strange for me.
So, all red (top, left, right, bottom) borders of child should be inside main, but child panel shifts. How can I implement this logic in a right way? I have more complex ui structure with 3-4 level. And I also dont work without margins.
And here it is code and css:
SimpleLayoutPanel panel = new SimpleLayoutPanel();
panel.setStyleName("mainModulePanel");
SimpleLayoutPanel p = new SimpleLayoutPanel();
p.setStyleName("moduleBody");
panel.setWidget(p);
initWidget(panel);
//CSS
.moduleBody {
/*width: 100%;
height: 100%;*/
margin: 0px;
width: 100%;
height: 100%;
border: 3px solid red;
}
.mainModulePanel {
/*margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;*/
border: 3px solid green;
}
This has to do with the html definition for the border!
Let me explain it with an example.
Your DockLayoutPanel is 500x500px. You put a child element with 100x100% into it, where the margin, padding and border are 0px. Your element will have a size of 500x500px. No you give it border of 3px. This means that to the height and width 3px are added. So your element has a size of 506x506px.
The overflow is ignored.
The result is your second picture.
This is correct html behavior and has nothing to do with GWT!
I've solved the problem by removing 100% height and width .moduleBody CSS.
So, to avoid such situation u shouldn't size child element by 100% height and width.
Thanks guys!