I want to design a site, where the corners of the page are rounded (black circle on all the corners of the window).
To do so I've setted the body color to black, and I've added a rouded corner to the content div, a part form its background.
<body style="backgound: black">
<div class="content" style="background: blue; border-radius: 8px;">
....
</div>
</body>
After that I've tried:
Not working solution 1
position: absolute;
height: 100%;
Not working when content height is larger than window, because the content background hiddes when scrolled.
Not working solution 2
position: fixed;
height: 100%;
Not working when content height is larger than window; no scroll bar displayed.
Not working solution 3
Nothing at all.
Not working when content height smaller than window; the bottom part is left black.
Ugly working solution 1
Add 4 images with the border, with fixed position
Any one know a clean solution to the problem? css3 is accepted.
THanks
I think this should help:
.content
{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background blue;
border-radius: 8px;
}
EDIT this solution will work:
.content
{
float:left;
min-height: 100%;
height: auto;
width: 100%;
background: blue;
border-radius: 8px;
}
working jsfiddle
another example using css3 calc() here
You can try height:100%
body, html{height:100%}
.content{height:100%}
DEMO
Use two nested fixed divs for header, and the same for footer.
This will work with every kind of content, on every browser:
Running Example: http://jsfiddle.net/5kgN3/
HTML
<div id="headerOuter"><div id="headerInner"></div></div>
<div class="content">
<br />test
<br />test
<!-- More tests here -->
<br />test
<br />test
</div>
<div id="footerOuter"><div id="footerInner"></div></div>
CSS
body, html {
height: 100%;
width: 100%;
}
.content {
min-height: 100%;
height: auto;
width: 100%;
background: blue;
padding-top: 20px;
padding-bottom: 20px;
}
#headerOuter{
background-color: black;
height: 20px;
width: 100%;
position: fixed;
top: 0;
}
#headerInner{
border-radius: 20px 20px 0px 0px;
background-color: blue;
height: 20px;
width: 100%;
position: fixed;
top: 0;
}
#footerOuter{
background-color: black;
height: 20px;
width: 100%;
position: fixed;
bottom: 0;
}
#footerInner{
border-radius: 0px 0px 20px 20px;
background-color: blue;
width: 100%;
height: 20px;
position: fixed;
bottom: 0;
}
I used 20px of border-radius, when adjusting that to your 8px, remember to adjust paddings and heights.
Related
I want to use position: absolute to create a centered element, but it will create a horizontal scrollbar on Internet Explorer 11. Please see the script below. Anyone here knows how to fix this problem?
*Update: I figured out that using overflow:hidden seems to solve this problem somehow. But when there are another one outside of the container, it will be hidden as well.
.container {
width: 80%;
margin: 0 auto;
height: 100vh;
border: 1px solid green;
position: relative;
overflow: hidden; /*This one is not the solution, though*/
}
.content {
width: 80%;
height: 30px;
position: absolute;
top: 50px;
left: 50%;
transform: translate(-50%, 0);
border: 1px solid red;
}
.another-content {
width: 40px;
height: 40px;
border: 1px solid blue;
position: absolute;
bottom: 20px;
right: -20px;
}
<div class="container">
<div class="content"></div>
<div class="another-content"></div>
</div>
You need to add following properties with the position absolute in IE
position: absolute;
top:0;
right: 0;
left: 0;
bottom:0; //specify all including bottom:0
The scrollbar show up in all browsers, not only IE. You can do the following:
The biggest issue is that the left: 50% and width: 80% together are adding to the total width and forcing the horizontal scrollbar to show up in some browsers (e.g. Internet Explorer and MS Edge). You set the width to 80%, so divide the remaining 20% between the left and right border and you'll end up with 10% each. Simply use left: 10% to achieve the same result, but without the side effect of the horizontal scrollbar.
Also when you set the size to 100% and then add border, those borders will be out of the view and cause the scrollbars to show up. This is the same in all browsers. Use box-sizing: border-box to force the browser to include the border in the height and width calculation.
The height: 100vh makes the box height equals to the view port. However, the body has default margins which vary from one browser to another. You can either set those margins to zero body { margin: 0; }, or change the height to height: 100% which is 100% of the container which the body in this case.
Try this:
.container {
width: 100%;
height: 100%;
border: 1px solid green;
position: relative;
box-sizing: border-box;
}
.content {
width: 80%;
height: 30px;
position: absolute;
top: 50px;
left: 10%;
border: 1px solid red;
}
<div class="container">
<div class="content"></div>
</div>
Thanks for your replies. Though they are not direct solution, they helped me a lot to figure out how to solve it.
The cause is as what Racil Hilan said. When I use left:50% and width:80%, the content width will be added up and create a horizontal scroll, which is not ignored by only IE. And my point is to avoid creating that added-up width. Here is my two way to workaround this one.
* {
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
border: 1px solid green;
position: relative;
}
.content {
width: 80%;
height: 30px;
position: absolute;
top: 50px;
left: 0;
right: 0;
border: 1px solid red;
margin: 0 auto;
}
.content-wrapper {
border: 1px solid black;
height: 30px;
position: absolute;
top: 100px;
left: 0;
right: 0;
}
.another-content {
width: 80%;
display: block;
height: 100%;
border: 1px solid red;
margin: 0 auto;
}
<div class="container">
<div class="content"></div>
<div class="content-wrapper">
<div class="another-content"></div>
</div>
</div>
I am currently trying to create a div that overlays a canvas element, both of these are contained in a wrapper div. The wrapper has a fixed height but when i add a height of 100% to the overlay div it still has a height of 0. Can anyone help me out with this? Here's the html:
<div id="canvas-wrap">
<canvas id="canvas" style="background-image: url('<%= #post.image.url%>');"></canvas>
<div id="overlay">
</div>
</div>
And the css:
#canvas-wrap {
position: relative;
height: 400px;
min-height: 400px;
}
#canvas {
width: 100%;
height: 100%;
border-radius: 7px;
box-shadow: 2px 1px 6px #a0a0a0;
}
#overlay {
position: absolute;
height: 100%;
top: 0;
left: 0;
}
Is this something to do witht he fact that im using a canvas element as i havent ran into this problem before. Thanks in advance everyone.
try this:
#overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
Here you are using Background Image property. That will not decide the width of the element. So you can not expect the width change of the element.
So it appears null height instead of zero width. (There was a height but no width)
So assign a fixed width to the parent and align the background image to that width
#canvas-wrap {
position: relative;
height: 400px;
min-height: 400px;
width: 600px;
min-width: 600px;
}
#canvas {
width: 100%;
height: 100%;
border-radius: 7px;
box-shadow: 2px 1px 6px #a0a0a0;
background-size: cover;
background-repeat: no-repeat;
}
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}
I have an issue about HTML and CSS Layout. All i want on my website is a fixed left bar for navigation and a fixed top bar for messages.
I would like both the items to follow when the user scrolls down the page (fixed) but i have an issue telling the CSS i want the top bar to fill up the whole rest of the page width.
Using this HTML :
<body>
<div id="leftbar">
<img border="0" src="images/somelogo.png">
<p>leftbartest</p>
<p></p>
</div>
<div id="topbar">
<p>topbartest</p>
</div>
</div>
</body>
Consider both these CSS examples :
Bar is fixed and stay on page when scroll, but will not fill width and resize when browser window is resized (will fit text size):
body {
background-color: #A69E40;
}
html {
height: 99%;
width: 99,8%;
}
#leftbar {
position: fixed;
float: left;
margin-left: -8px;
margin-top: -8px;
background-color: #FFFFFF;
width: 272px;
height: 100%;
z-index: 2;
border: outset 2px #000000;
}
#topbar {
position: fixed;
float: left;
margin-left: 268px;
margin-top: -8px;
background-color: #FFFFFF;
height: 35px;
z-index: 5;
border: solid 1px #000000;
}
Bar is not fixed and will not stay on the page when scroll, but will fill width and resize when browser window is resized :
body {
background-color: #A69E40;
}
html {
height: 99%;
width: 99,8%;
}
#leftbar {
position: fixed;
float: left;
margin-left: -8px;
margin-top: -8px;
background-color: #FFFFFF;
width: 272px;
height: 100%;
z-index: 2;
border: outset 2px #000000;
}
#topbar {
margin-left: 268px;
margin-top: -8px;
background-color: #FFFFFF;
height: 35px;
z-index: 5;
border: solid 1px #000000;
}
It's meant to create some kind of portal where a table will be embed to the right of the leftbar and under the topbar. All in all the left bar should fit the whole height of the first 272 width pixels, the top bar should fit the whole width of 35 pixels height and the whole rest will be used to drop some tables.
Please detail, i am new to this wonderfull world that is HTML and CSS, and i would like to become solid in this field of modern technology.
Thanks again for reading this and thanks in advances for your brainstorm on my silly beginner problem.
Here's a CodePen demo.
Top bar on the top and left bar below it
HTML
<nav id="left-bar">
Left bar
</nav>
<header id="top-bar">
Top Bar
</header>
<article>
All your content goes here.
</article>
CSS
html, body {
margin: 0px;
padding: 0px;
background: #E4E4C5;
width: 100%;
height: 100%;
}
header {
position: fixed;
background: #8D2036;
width: 100%;
height: 35px;
}
nav {
padding-top: 35px;
position: fixed;
background: #B9D48B;
width: 272px;
height: 100%;
box-sizing: border-box;
}
article {
padding: 55px 20px 20px 292px;
width: 100%;
box-sizing: border-box;
}
Left bar stretching the entire height and top bar next to it
HTML
<header id="top-bar">
Top Bar
</header>
<nav id="left-bar">
Left bar
</nav>
<article>
All the content goes here...
</article>
CSS
html, body {
margin: 0px;
padding: 0px;
background: #E4E4C5;
width: 100%;
height: 100%;
}
header {
padding-left: 272px;
position: fixed;
background: #8D2036;
width: 100%;
height: 35px;
}
nav {
position: fixed;
background: #B9D48B;
width: 272px;
height: 100%;
box-sizing: border-box;
}
article {
padding: 55px 20px 20px 292px;
width: 100%;
box-sizing: border-box;
}
I am trying to implement cosntruction, described here.
<div id="wrap">
<div id="header">
header
</div>
<div id="main">
main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
</div>
</div>
<div id="footer">
footer
</div>
#header {
border-top:20px solid #fff;
height: 33px;
line-height: 33px;
text-align: center;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
overflow: auto;
padding-bottom: 53px; /* must be same height as the footer */
background-color: red;
border: solid 1px blue;
height: 90%;
}
#footer {
position: relative;
margin-top: -53px; /* negative value of footer height */
height: 33px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: center;
}
The whole page has background color (gray), header and footer are transparent (so you can see the page's background through it) and the content block has red background. Despite the fact that content part is stretchable it doesn't fill with the background the whole block, only the actual.
Is it possible to fill the whole content block with the color?
While minimizing window the footer floats on content. is it possible to disable such behaviour?
Here is a workaround of what you are looking for. Hope this helps.
Add this lines of code below to your code:
#main{
position: absolute;
top: 33px;
bottom: 33px;
left: 0;
right: 0;
}
#wrap{
position: relative;
}