there is a strange white line in my screen.
It's possible to see the line in jsfiddle.
http://jsfiddle.net/fWq3c/3/
My real screen image is available here:
http://postimage.org/image/w4jcveyyv/f0779d0b/
The strange thing is that my body is no in all the screen.
In my code, the div #tudo is inside body. But in result, it appears that #tudo expand beyond body.
<body>
<div id="tudo">
<div id="topo_login"></div>
<div id="conteudo_login">
#RenderBody()
</div>
<div class="limpar"></div>
<div id="rodape2"></div>
<div id="rodape"></div>
</div>
</body>
That line appears because the background image http://s15.postimage.org/sjog2gpff/Fundo.png is having a border at the bottom of white color. Change/edit this image and try again.
Related
I am trying to do a website with a loading animation. This loading animation shows well above all other divs in Chrome, but not in Firefox.
I have a menu bar, a main div, and a footer.
In the main div, I have a "main box" (will rotate in 3D) and a loading div.
The loading div hosts the animation for loading.
Html is kind of the following:
<div id="site">
<div id="menuDiv" class="mainSection"> Menu bar</div>
<div id="mainDiv" class="mainSection">
<div id="mainBox">
<div class="mainBoxSide front">
</div>
<div class="mainBoxSide right">
</div>
<div class="mainBoxSide back">
</div>
<div class="mainBoxSide left">
</div>
</div>
<div id="loadingDiv">
<div id="loadingBox">
<div class="loadingBoxSide loading-front"></div>
<div class="loadingBoxSide loading-right"></div>
<div class="loadingBoxSide loading-back"></div>
<div class="loadingBoxSide loading-left"></div>
</div>
</div>
</div>
</div>
<div id="footer" class="mainSection">Footer</div>
I want mainDiv to be on top of the footer, and loadingDiv on top of mainBox.
So in term of z-index : footer < mainBox < loadingDiv.
I created a codepen which isolates the problem: https://codepen.io/3MO/pen/vmOMEG
When opened in Chrome, everything works fine.
When opened in Firefox, the animation is flickering: it goes on top and on background of the mainBox element all the time, and I don't know why.
There is worse: if I provide a background color to the loading div, everything works fine: I created another codepen, the exact fork and defined a background color for loadingDiv: https://codepen.io/3MO/pen/XRbQjQ
Can someone know why it behaves like this? I need to work with a transparent div, so without any background color.
Thanks!
Try adding transform: translate3d(0,0,1px); to the div #loadingDiv.
I am facing problem. My page doesn't look like what i am expecting.
*{margin:0; padding:0;}
.width{width:980px;margin:0 auto;}
.header{width:100%;background-color:#ffffbb;}
.leftpanel{float:left;height:50px;}
.rightpanel{float:right;height:50px;}
.clear{clear:both;}
h2{font-size:32px;}
<!-- HEADER AREA -->
<div class="header">
<div class="width">
<div class="leftpanel">
<h2>This is first sentence</h2>
</div>
<div class="rightpanel">
<h2>This is second sentence</h2>
</div>
<div class="clear"></div>
</div>
</div>
On window minimize my header color is getting shrinks and not covering whole width of the content. How to fix it ? I tried to use max-width:980px; but that is collapsing the content when minimizing the browser. I want bottom scroll to cover the whole width without collapsing the content and background color to get fixed.
I see what you're doing wrong. Basically, your header only extends to a width of 100%, that is 100% of the viewport. When you shrink your screen past 980px, as denoted by your .width element some of your content goes out of the viewport thereby extending outside of the header. You can do many things to fix this, a really quick fix would be to add a float to the header and set its minimum width to 100%. e.g.
*{margin:0; padding:0;}
.width{width:980px;margin:0 auto;}
.header{min-width:100%;float:left;background-color:#ffffbb;}
.leftpanel{float:left;height:50px;}
.rightpanel{float:right;height:50px;}
.clear{clear:both;}
h2{font-size:32px;}
<!-- HEADER AREA -->
<div class="header">
<div class="width">
<div class="leftpanel">
<h2>This is first sentence</h2>
</div>
<div class="rightpanel">
<h2>This is second sentence</h2>
</div>
<div class="clear"></div>
</div>
</div>
This is because you are giving fixed width to the elements .
Use the following Css and your problem will be solved:
*{margin:0; padding:0;}
.width{width:100%;margin:0 auto;}
.header{width:100%;background-color:#ffffbb;}
.leftpanel{float:left;height:50%;}
.rightpanel{float:right;height:50%;}
.clear{clear:both;}
h2{font-size:32px;}
Also try reading why not to give fixed width and height, this would help you understand better
I am displaying three div's side by side, they look well at normal screen size but on zooming screen as the div shrinks text inside it also shrinks and images seem to be cut (size of image is being cut on further zoom). Bottom line I don't want content inside divs messed up on zooming, tried overflow: scroll for body but on zooming no scroll bar appears. I think scroll bar would help in keeping the content inside div safe.
jsfiddle this will help you understand
<div id='container' style='width:100%;'>
<div class='left' style='height:20px;width:21%;float:left;border:1px solid black;box-sizing: border-box;height:200px;'>
</div>
<div class='center' style='height:20px;width:56%;float:left;border:1px solid blue;box-sizing: border-box;height:200px;'>
</div>
<div class='right' style='height:20px;width:23%;float:right;border:1px solid red;box-sizing: border-box;height:200px;'>
</div>
</div>
When using % in width be carefull because the border, margin, padding all counts to the width calculation, thats probably why your code fails.
To make it work you can use box-sizing: border-box; in your divs take a look:
<div id='container' style='width:100%;'>
<div class='left' style='width:21%;float:left;box-sizing: border-box;'>
</div>
<div class='center' style='width:56%;display:inline-block;box-sizing: border-box;'>
</div>
<div class='right' style='width:23%;float:right;box-sizing: border-box;'>
</div>
</div>
Take a look at this fiddle fully working http://jsfiddle.net/0heq8dz3/
Is it possible to have a background image not display in a certain element?-
Example -
If I have 3 divs inside of div that has a background image all inside a <body> tag that has a background image. Is there some way to show the <body> background image (BodyBackground.jpg) instead of the <div> background image (DivBackground.jpg) in the center div?
<body style="background-image:url('/Content/Images/BodyBackground.jpg'); background-repeat:repeat-y;">
<div style="background-image:url('/Content/Images/DivBackground.jpg')">
<div style="height:100px;width:200px"></div>
<div style="height:100px;width:200px"> SHOW BodyBackground.jpg IMAGE HERE </div>
<div style="height:100px;width:200px"></div>
</div>
</body>
You can make it look like it using fixed position.
HTML:
<body style="background:url('/Content/Images/BodyBackground.jpg') repeat-y;">
<div style="background-image:url('/Content/Images/DivBackground.jpg')">
<div style="height:100px;width:200px"></div>
<div style="height:100px;width:200px;background:url('/Content/Images/BodyBackground.jpg') fixed;">
SHOW BodyBackground.jpg IMAGE HERE
</div>
<div style="height:100px;width:200px"></div>
</div>
</body>
Because the background position is set to fixed its position is global to the whole page and not the div itself. Even if you change the position of the elements in the page it'll still look like that area is transparent.
Try this
<body style="background-image:url('/Content/Images/BodyBackground.jpg'); background-repeat:repeat-y;">
<div style="background-image:url('/Content/Images/DivBackground.jpg')">
<div style="height:100px;width:200px"></div>
<div style="height:100px;width:200px;background-image:url('/Content/Images/BodyBackground.jpg')!important;"> SHOW BodyBackground.jpg IMAGE HERE </div>
<div style="height:100px;width:200px"></div>
</div>
</body>
You could create a CSS class that defines the background image. And then use the CSS class accordingly?
Eg.
.body-bg{
Background-image:url(...);
}
.div-bg{
Background-image:url(...);
}
body class="body-bg">
div class="div-bg></div>
div class="body-bg></div>
div class="div-bg></div>
/body>
I'm working on a home page that is going to use a "custom" border around the whole website.
This is what I want to achieve with my div's.
[LEFT-TOP-BORDER ][MIDLLE-TOP-BORDER ][RIGHT-TOP-BORDER ]
[LEFT-MIDDLE-BORDER][Content ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]
All the border corners (left/right top & bottom border) have a fixed width and height.
The middle-top/bottom-border has a fixed height but should expand to
the full width of the site.
The middle left and right border have a fixed width but should fill
up the whole height of the screen even when the content gets bigger.
The borders should stay clear of the content div, so if the window is
to small it should not be on to the content div.
The content div is going to have a fixed width and height.
I want the footer to be sticky without again overlapping the content
div when the window is to small.
Hope it's clear what I want to do!
I almost got it to work, but i got an problem with the left/right-middle-border. See for your self here
As you can see when the window is to small the borders overlap the content div.
But I think the way I have done it is not good?
How should I do it?
Thanks in advanced!
Kind Regards Alex
Looking at your code what you need to do is put your divs inside each other, not next to each other. So your middle section will be:
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
Then give your middle-left left padding of the correct width and position the background to the left, the middle-right some right padding of the correct width and position the background to the right, and then as your content gets taller, the margin divs will automatically expand.
Do this for all of the three layers, like so:
<div class="wrapper">
<div class="top-left">
<div class="top-right">
<div class="top-content">
</div>
</div>
</div>
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
<div class="bottom-left">
<div class="bottom-right">
<div class="bottom-content">
</div>
</div>
</div>
</div>
The body height doesn't need the 100% in your CSS now. And the wrapper can be centered and doesn't need a height either. I would try actually getting rid of all of your CSS and starting that again with this new HTML structure. Just add the padding and some background colours and get that right.