Extend the header to the top of the page with CSS rounded corners
I have a web page with a rounded corners wrap. The first thing in the wrapper is the title of the page, but there is a white space above it where the corners are. I want the blue heading to start right at the top of the wrapper, so there is no white space at the top. I don't know if this is possible, but any help would be appreciated! Here is the (simplified) code. I used inline CSS to post this post.
Html
<div id="wrapper">
<div id="header">
<h1>Test Page</h1>
</div>
<!--header-->
<div id="nav"> <a href="index.html">Home</a> <a href="index.html">Link 1</a> <a href="index.html">Link 2</a> <a href="index.html">Link 3</a> <a href="index.html">Link 4</a>
</div>
<!--nav-->
<div id="main">
<p>This is the test page.</p>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<!--main-->
</div>
<!--wrapper-->
CSS
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #999999;
}
h1 {
line-height: 200%;
margin-bottom: 0px;
}
a {
padding-left: 10px;
padding-right: 10px;
color: #000000;
}
#wrapper {
background-color: #FFFFFF;
min-width: 760px;
max-width: 960px;
margin-left: auto;
margin-right: auto;
border: 1px solid #a1a1a1;
border-radius: 25px;
}
#header {
background-color: #40ebff;
color: #FFFFFF;
padding-left: 5px;
}
#nav {
font-weight: bold;
background-color: #ffdab2;
padding: 5px;
}
#main {
padding-left: 20px;
padding-right: 20px;
}
FIDDLE> http://jsfiddle.net/znfa0Lkf/
source to share
You needed to add margin-top:0;
to this style h1
as it was forcing it to do.
Then you had to add
border-top-left-radius:25px;
border-top-right-radius:25px;
before #header
.
Add overflow:hidden;
in instead #wrapper
. As Woodrow Barlow said in the comments:
some browsers will draw the base element's ribbon if you try to fully align the rounded corners on top of each other (rendering is not perfect)
Side note: you don't need to add px
to something if it's set to 0
. For example, you can simply margin-top:0;
and not margin-top:0px
.
source to share
As suggested, you get a simple CSS reset . By default, the browser adds specific paddings and margins to specific elements - by explicitly negating this, you can define your own paddings and margins. Another advantage is that because the "defaults" can differ from browser to browser, you get more consistent results across the board.
reset is simple. Add this to the top of your CSS:
* {
margin:0;
padding:0;
}
And add a couple of changes to make your page look the way you intended. First, we'll add margin:10px
(adjust if necessary) to #wrapper
(this makes sure your rounded rectangle is the way it was before, rather than breaking across the top of the page). Then add overflow:hidden
to #wrapper
. Since it #header
doesn't have rounded corners, it usually has square corners coming out of #wrapper
, but overflow:hidden
prevents this from happening.
Here's a live demo .
Note that you don't need to use CSS reset if you don't want to. If you prefer, you can just add margin-top:0
to the selector h1
. In this case, you don't need to add margin
to #wrapper
, but you want to install anyway overflow:hidden
. Below is a live demo of this version.
source to share
This will help you:
*{
margin:0;
padding:0;
}
By default, there is a margin and padding on several elements, including the body, so you see the space there, and the margin and padding value set to 0 with the entire selector (*) removes the margin and padding value or says there is no space in your document.
source to share
Problem 1> margins around your "Wrapper"
You get margins around your "Wrapper" because of the default margins in " <body>
" All you have to do is remove the default Margin and Padding from " <body>
"
Issue 2> margins above the "blue title"
Add margin-top: 0px;
Since it takes the default marker for<h1>
Issue 3> Radius is removed when removing a field from H1
Add overflow:hidden;
to "#wrapper" so <h1>
it stays inside and doesn't override the style. header
wrapper
Final Fix added here:
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #999999;
margin:0 auto; /*FIX ADDED*/
padding:0; /*FIX ADDED*/
}
h1 {
line-height: 200%;
margin-bottom: 0px;
margin-top: 0px; /*FIX ADDED*/
}
#wrapper {
background-color: #FFFFFF;
min-width: 760px;
max-width: 960px;
margin-left: auto;
margin-right: auto;
border: 1px solid #a1a1a1;
border-radius: 25px;
overflow:hidden; /*FIX ADDED*/
}
Here is a working fiddle> http://jsfiddle.net/0w646ba1/
** Sorry, could not add a heading space fix.
source to share