I have a container with a repeating image that i want to fill 100% of the available height. Some of the inner divs have their :after pseudo elements absolutely positioned so i can get the borders the way i need them. This is causing an issue with the repeating background of the main container.
Please visit this link and scroll to the end of the page -
http://www.mariage-graham-audrey.com/static.html
Can anyone suggest a possible solution for this ?
Just a workaround but try to add larger bottom padding to layout like this:
.layout {
...
padding-bottom: 180px;
}
Just saw your CSS and I think by adding this you would be able to get a full page background :
background: white url("/bootstrap/assets/images/pattern.png") 0 0;
width: 100%;
margin: 0 auto;
padding: 30px 0;
min-height: 100%;
Just edit the " width:100%; " thats all.
Please Replace your style for layout div with this. It will work
.layout{
background: white url("/bootstrap/assets/images/pattern.png") 0 0;
width: 100%; /* add 100% width*/
margin: 0 auto;
padding: 0 0 150px 0; /*change padding with this*/
min-height: 100%;
}
Related
I created a div where I plan to a title for my webpage, I set the width to 100% but there was still white on the sides and top. I got the top to disappear but the sides won't, I assume it's got something to do with the movement of the div, I've checked everywhere, but everyone has different divs for different purposes so I couldn't find the answer. In case you guys wanna show an example of your solution you could do so here
Here is the HTML:
<div id="toptitle">
</div>
For my CSS I tried using margin-left: -8px and the same for the right side but they don't work like that, it's only movement of the div and even when I don't set the left side yet the right still won't move till there's isn't a white gap:
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
margin-top: -15px;
}
Reset your body margin. Also make a research for reset css.
body {
margin: 0;
}
Add margin: 0 to the body :
body{
margin:0;
}
You are missing body margin, please have a look at the below working snippet taken from your codepen. and there is no need to have negative top margin too.
body {
margin: 0
}
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
}
<div id="toptitle">
</div>
The body tag has a default margin of 8px which you have to remove. So just add this to your code:
body{
margin:0;
}
You should also remove margin-top:-15;
Hope this is clear to you!
i'm trying to get my onepager to work. But sadly i have bug with my css.
If i try to scale the width of my browser below the width of my content a scrollbar appears. When i use the scrollbar and scroll to the right, i see my background color does not resize to the actually width. I don't want my website to be responsive or don't want to use any mediaqueries. Just basic stuff with a bug ;)
I took a screenshot to show what i mean:
Here is my website: Website
Just to make sure everyone understand HOW i mean the scrollingpart:
Remove your fix width properties e.g
style.css: 144
#header {
height: 95px;
/* width: 1200px; */ //Use percentages and media query to control width
margin: auto;
}
.section-wrapper {
width: 1200px; //Here use media queries and better to use % instead of px
padding: 50px;
margin: auto;
}
section#one>.section-wrapper:after {
content: url(img/leaf.png);
/* height: 152px; */
/* width: 331px; */
display: block;
/* position: absolute; */
margin: -57px 0 0 700px; // Do not use margin 700px instead position it on right and add right padding or distance.
}
after setting width to 100% in .section-wrapper the text stop clipping
Edit #2:
By removing the padding: 50px; from .section-wrapper in #one section and leaf part i got this result
In image above you can footer top border is not aligned with the login box.I want to restrict border width equal to login container width.
and also I dont want x axis to scroll as in image.
To solve overflow issue I used,
html {
overflow:hidden !important;
}
But it does not seems promising to me,
I want something like this ,
footer top border should be aligned with red lines
Fiddle
You are using position: absolute; so you need to use left: 0; for the .google-footer-bar
Demo
.google-footer-bar {
position: absolute;
bottom: 0;
left: 0; /* Add this here */
height: 35px;
width: 100%;
border-top: 1px solid #ebebeb;
overflow: hidden;
}
Also, it will be better if you wrap up the elements, say a maximum 1000px in width and than use margin: auto; to center them, having no wrapper element will just spoil your layout. As far as 100% width element goes, you can use width: 100%; for the container and then nest 1000px; of another child element with margin: auto;, this way your layout will be stable.
You might want to start by removing width and min-width and also height and min-height.
On http://www.posterlion.com/ the left side disappears when you make the window smaller by the browser. The horizontal scrollbar appears though but I can't get to it anymore by scrolling to the left. The content is centered through a absolute div. How do i prevent this from happening?
position:relative;left:50%;margin-left:-517px;
width:1015px; overflow:visible; background-color: #FFFFFF; padding: 10px;
The best practice to centered tour layout is using margin: 0px auto instead of absolute positioning.
In your case you should remove your absolute positioning, create some div which contain all your layout (<div id='wrapper'></div> can be standard in this case) and set its margin to auto.
By:
#wrapper {
margin: 0px auto;
width: yourWidth;
}
In your given CSS add
min-width: 1050px;
Here is Css to update :-
#lwe {
width: 1015px;
overflow: visible;
background-color: #FFFFFF;
padding: 10px;
margin: 0 auto;
}
I have a div(InnerDiv) which contains a grid with paging enabled...
After some user actions , data inside that grid will load and we will have a big grid!
The problem is when grid's data loads , overflow the div's bottom portion(InnerDiv) and some of those data get's displayed out of the div.
my css of body and html like below :
html, body
{
margin: 0; /* get rid of default spacing on the edges */
padding: 0; /* get rid of default spacing on the edges */
border: 0; /* get rid of that 2px window border in Internet Explorer 6 */
height: 100%; /* fill the height of the browser */
border:3px solid red;
}
i need 100% height of body when page loads...
OuterDiv inside body like below :
div#OuterDiv
{
position:absolute;
width: 100%;
height: 100%;
/*height: auto;*/
margin: 0px;
padding: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
border:5px solid green;
}
InnerDiv Inside OuterDiv Is Like Below :
div#InnerDiv
{
position: relative;
width: 100px;
height: 100%;
margin: 0 auto;
background: transparent url('../Images/Blue.png') repeat scroll left top;
}
Content Inside InnerDiv Like Below :
#Content
{
position: relative;
top: 10px;
background: transparent url('../Images/Red.png') repeat scroll left top;
width: 550px;
height: 1080px; /*>>>>>>>>>>>>>>>>>>> plz see this line*/
top: 10px;
right: 10px;
padding: 7px;
border: 10px ridge #ce004e;
color: black;
}
that grid(Content) is inside InnerDiv...
EDIT 1
the below example can show my situation :
Here's an example at jsFiddle
we can not remove position:absolute of OuterDiv , by doing that height:auto or height:100% on it does not work at page start -> outerDiv should be 100% because Of InnerDiv Background and remember InnerDiv height is not 1080px at start -> it is only 200px at page load and dynamically it will change to 1080px!
i want to force yellow area (InnerDiv) to fill entire Purple Area...
also InnerDiv Should Have 100% Height Because Of It's Background At Page Start...
i know this problem is about 100% height / but how can i fix that ?
EDIT 2 :
AT LAST HERE IS MY WEB SITE :
MY WEB SITE
plz change the height of red area with firebug - so by changing it to 1080px body and OuterDiv And InnerDiv Will grow.
but at page load i want body and OuterDiv And InnerDiv 100% height.
how can i do that?
thanks in advance
You need less constraints on #OuterDiv. By specifying top, bottom, left, and right, you're locking the edges of #OuterDiv to the edges of body; and your body rule locks body to the same size as the viewport.
Try changing your div#OuterDiv rule like this:
div#OuterDiv
{
position:absolute;
margin: 0px;
padding: 0px;
border: 5px solid green;
}
Here's an example at jsFiddle
From what I could gather from your explanation and styles you basically want this:
http://jsfiddle.net/sg3s/zXSXx/
If this is correct I will also explain what is happening to each div. Else please tell me what div is behaving not as you would like and why.
By the way if possible use absolute paths (whole links) to images. Seeing how they need to fit together will help us all to find something that works for you.