I want a centered header DIV and inside it the following absolutely positioned DIVs:
logo
menu
line
title
But my HTML/CSS has two problems:
for some reason the page is now wider (see bottom scroll bar)
If my title is longer, I want it to be right-aligned of course
What I really want is a centered DIV and inside that I want to position DIVs absolutely within their centered parent (but not absolute since they wouldn't be centered). Is this possible?
How would you accomplish this layout?
alt text http://tanguay.info/web/external/centeredLayoutProblem.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#headerArea {
background-color: yellow;
margin: 0px auto;
width: 760px;
height: 150px;
}
#logo {
position: relative;
top: 20px;
left: 20px;
background-color: orange;
text-align: center;
font-size: 32pt;
width: 150px;
padding: 10px;
z-index: 10;
}
#menu {
position: relative;
top: -52px;
right: -480px;
background-color: tomato;
text-align: center;
font-size: 14pt;
width: 240px;
padding: 10px;
}
#title {
position: relative;
top: -35px;
right: -620px;
font-style: italic;
font-size: 14pt;
}
#line {
position: relative;
top: -60px;
border-bottom: 1px solid blue;
margin: 0 20px;
}
</style>
</head>
<body>
<div id="headerArea">
<div id="logo">LOGO</div>
<div id="menu">One Two Three Four Five</div>
<div id="title">This is the Title a Bit Longer</div>
<div id="line"></div>
</div>
</body>
</html>
Make your #headerArea div position:relative. Then, for all your inner divs, you can position:absolute in relation to #headerArea.
Like so:
<style type="text/css">
#headerArea {
position:relative;
background-color: yellow;
margin: 0px auto;
width: 760px;
height: 150px;
}
#logo {
position: absolute;
top: 20px;
left: 20px;
background-color: orange;
text-align: center;
font-size: 32pt;
width: 150px;
padding: 10px;
z-index: 10;
}
#menu {
position: absolute;
top: 20px;
left: 480px;
background-color: tomato;
text-align: center;
font-size: 14pt;
width: 240px;
padding: 10px;
}
#title {
position: absolute;
top: 80px;
left: 20px;
width: 720px;
text-align: right;
font-style: italic;
font-size: 14pt;
}
#line {
position: absolute;
width: 720px;
height: 1px;
top: 70px;
border-bottom: 1px solid blue;
margin: 0 20px;
}
</style>
You should use the 'left' property instead of 'right' since 'right' doesn't work in ie6.
The 'left' and 'top' values I've put in may be a little off, but you can tweak to get what you want.
EDIT:
I've corrected the pixel values, and added a width to your line div, and a height since IE defaults all divs to one text line high.
Also, your title div should be full width with text-align right so that the title will expand to the left instead of the right.
Yes. If you do #headerArea{position:relative;} you can have position:absolute on the children and their position will be relative to the parent.
Use position:relative on the header (as has already been suggested) so that it becomes a layer, then the absolutely positioned elements inside it will use that element as origin.
You can place the line before the logo in the markup, then you don't need to use z-index to put the logo on top of the line. All browsers doesn't handle z-index the same...
By placing the title to the right, it will expand to the left as needed.
Use a top border instead of a bottom border on the line, that elliminates the problem with IE wanting to make the element at least one character high.
I removed some unneccesary styles, and added a title to the page (as that is required in a proper html document).
This will display consistently in Firefox 3, IE 7, IE 8, Opera 9 and Chrome 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://data.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
body {
margin: 0;
padding: 10px;
}
#headerArea {
position: relative;
background: yellow;
margin: 0 auto;
width: 760px;
height: 150px;
}
#headerArea div {
position: absolute;
}
#logo {
top: 20px;
left: 20px;
background: orange;
text-align: center;
font-size: 32pt;
width: 150px;
padding: 10px;
}
#menu {
top: 20px;
right: 20px;
background: tomato;
text-align: center;
font-size: 14pt;
width: 240px;
padding: 10px;
}
#line {
top: 80px;
left: 20px;
width: 720px;
border-top: 1px solid blue;
}
#title {
top: 90px;
right: 20px;
font-style: italic;
font-size: 14pt;
}
</style>
</head>
<body>
<div id="headerArea">
<div id="line"></div>
<div id="logo">LOGO</div>
<div id="menu">One Two Three Four Five</div>
<div id="title">This is the Title a Bit Longer</div>
</div>
</body>
</html>
(You may need to adjust the positioning to get it exactly as you want, but that should be quite easy.)
Related
I'm experimenting with a simple example in order to better understand the basics of CSS float, position, height, and margin properties.
As you can see in the image, I'm trying to find a simple way (without using CSS Grid or Flexbox) to automatically align the bottom border of both the Sidebar and the Main content divs to the top border of the Footer.
Is there a simple way to use height and/or margin properties with 'auto' or '0' values to do this? I don't want to specify a number of pixels or a % height for either the Sidebar or Main divs. I'd rather just "glue" the bottom border of each to the top border of the Footer.
Here is my CSS code:
* {
box-sizing: border-box;
background: #ccc;
font-family: arial;
}
body {
margin: 0;
padding: 0;
}
h2 {
padding: 0;
margin: 0;
}
.navbar,
.sidebar,
.main,
.footer {
display: flex;
align-items: center;
justify-content: center;
}
.navbar {
width: 100%;
height: 70px;
border: 10px solid green;
}
.sidebar {
width: 20%;
float: left;
border: 10px solid red;
/* Rather than specifying a specific height for .sidebar, I want to align
the bottom border of the sidebar to the top border of the footer automatically.
Is there a possible combination of height and/or margin-bottom
that can accomplish this? (Note: without using CSS Grid or Flexbox) */
height: 400px;
margin-bottom: ;
}
.main {
width: 80%;
float: right;
border: 10px solid blue;
/* Same comment here as sidebar above. */
height: 350px;
margin-bottom: ;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 140px;
border: 10px solid purple;
}
And here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Playground</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar"><h2>Navbar</h2></div>
<div class="sidebar"><h2>Sidebar</h2></div>
<div class="main"><h2>Main</h2></div>
<div class="footer"><h2>Footer</h2></div>
</body>
</html>
Again, I know I can do this easily with CSS Grid, but I'd rather learn more about the capabilities and limitations of the "height" and "margin" properties first.
Thanks!
UPDATE:
See below, I was able to achieve the layout I want by using "position: fixed" and explicitly locating the bottom and left/right sides of the Sidebar and Main divs. I also created --navbar-height and --footer-height variables so I only need to type those values once.
However, rather than using "position: fixed", I would rather use "float" and some other way to automatically locate the bottom edge of the Sidebar and Main elements to the top of the Footer. With my current code structure, is there some way to use the --footer-height variable to locate that bottom edge of those elements?
:root {
--navbar-height: 70px;
--footer-height: 140px;
}
* {
box-sizing: border-box;
background: #ccc;
font-family: arial;
}
body {
margin: 0;
padding: 0;
}
h2 {
padding: 0;
margin: 0;
}
.navbar,
.sidebar,
.main,
.footer {
display: flex;
align-items: center;
justify-content: center;
}
.navbar {
border: 10px solid green;
width: 100%;
height: var(--navbar-height);
}
.sidebar {
border: 10px solid red;
width: 20%;
/* float: left; */
position: fixed;
top: var(--navbar-height);
bottom: var(--footer-height);
}
.main {
border: 10px solid blue;
width: 80%;
/* float: right; */
position: fixed;
right: 0;
top: var(--navbar-height);
bottom: var(--footer-height);
}
.footer {
border: 10px solid purple;
width: 100%;
position: fixed;
bottom: 0;
height: var(--footer-height);
}
You can set position:fixed for sidebar and main divs as well.
Then set bottom: for the main and sidebar to the height of your footer or more to have them aligned above the the footer:
UPDATE: Yes you can achieve this with display:block; . Then use float property. So if any of them changes in term of height, the others will change related to the changed one which can be footer
* {
box-sizing: border-box;
background: #ccc;
font-family: arial;
}
h2 {
padding: 0;
margin-top: 0;
}
.navbar {
margin-bottom: 50px;
width: 100%;
height: 70px;
border: 10px solid green;
}
.parent{
width: 100%;
text-align: center;
}
.child{
display: block;
}
#sidebar {
float: left;
width: 30%;
border: 10px solid red;
height: 200px;
}
#main {
float: left;
width: 70%;
border: 10px solid blue;
height: 200px;
}
#footer {
float: left;
width: 100%;
height: 100px;
border: 10px solid purple;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Playground</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar"><h2>Navbar</h2></div>
<div class="parent">
<div class="child" id="sidebar"><h2>Sidebar</h2></div>
<div class="child" id="main"><h2>Main</h2></div>
<div class="child" id="footer"><h2>Footer</h2></div>
</div>
</body>
</html>
JsFiddle: JsFiddle
Is it possible to use calc() to center an element, which has a width defined with % ?
e.g.
.wrapper {
width: 100%;
background-color: black;
height: 300px;
position: absolute;
top: 0;
}
.inside {
width: 100%;
margin-left: 30px;
background-color: yellow;
height: 250px;
margin: 20px;
}
.inside h1 {
width: 30%;
background-color: white;
text-align: center;
}
.inside h1 {
position: absolute;
left: calc(50% - 15%);
left: -webkit-calc(50% - 15%);
}
<div class="wrapper">
<div class="inside">
<h1>CENTERED to viewport</h1>
</div>
</div>
This is the slider. It has a "string", which guides through the steps of the slider and the header is always in the middle of the screen. But for design purpose, the line starts a bit to the right and ends a bit to the left, which is given with a width of 80%.
The top is slider no.1 with the string, the second slider, which is synced is the area with the big white square.
Maybe now it is a bit more clear, why I tried what I tried.
Yes, if you create a variable in the css for example:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
--Example: 200px;
position: absolute;
left: 50px;
width: calc(100% - var(--Example)/2);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">Some text...</div>
</body>
</html>
If you can have fixed width just add margin: 0px auto. This will center the text horizontally.
.wrapper {
width: 100%;
background-color: black;
height: 300px;
position: absolute;
top: 0;
}
.inside {
margin-left: 30px;
background-color: yellow;
height: 250px;
margin: 20px;
}
.inside h1 {
width: 40%;
background-color: white;
text-align: center;
margin: 0px auto;
}
<div class="wrapper">
<div class="inside">
<h1>CENTERED to viewport</h1>
</div>
</div>
I'm using Bootstrap 3 to create the layout, I'm not sure if that's relevant. The html/body element is set with height: 100%, I even put min-height: 100% on the body, and the body is set to position relative.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
min-height: 100%;
font-size: 16px;
background-color: rgb(232, 232, 232);
font-family: Calibri;
position: relative;
}
Inside the body, on the level under it, is my footer, positioned absolutely with bottom: 0. However, it won't go to the bottom of the page, no matter how bad I want it to.
.footer {
color: white;
background: url(Images/images/footer_bg.gif) repeat-x;
padding-top: 10px;
padding-bottom: 9px;
padding-left: 30%;
}
.footerContainer {
width: 100%;
margin: 0;
padding: 0;
margin-top: 60px;
position: absolute;
right: 0;
left: 0;
}
The footer is a direct child of the body, that is, it's not hiding inside anything else at all. Here's the markup for the footer:
<div class="container footerContainer">
<div class="row footer">
<div class="col-md-12"><p>Content</p></div>
</div>
As I said previously, this isn't inside any other divs, just the body. What could the problem be here?
There is no bottom:0; in your sample. Which seems to be the issue.
.footerContainer {
width: 100%;
margin: 0;
padding: 0;
margin-top: 60px;
position: absolute;
border:1px solid;
bottom:0;
}
Here is a Demo with your code: (using bootstrap 3)
http://jsfiddle.net/n6ypb/3/
In the website below website's layout in the navigation,when hovered on the buttons it rises up and when the mouse is taken away it sinks down,how to do it either in css or other ways ?
www.bigfishgames.com/
You can do it with plain CSS:
<!DOCTYPE html>
<html>
<head>
<style>
div { border-radius: 4px; width: 100px; height: 20px; background: green; position: absolute; top: 50px; left: 50px; text-align: center; padding: 10px 0px; }
div:hover { top: 40px; padding-bottom: 20px; }
</style>
</head>
<body>
<div>Howdy</div>
</body>
</html>
Note how both padding-bottom and height are changed to give the illusion that the div is expanding 'upwards'.
I know that this is SIMILAR to a few questions already out there, but it's different in that it's not my main body background that's causing the problem, and so I'm lost.
The website is at http://www.thesweet-spot.com/test77
The problem is that when you shrink your viewport to be smaller than the content and then scroll down, the wavy line on the left stops at where the bottom of your viewport originally was. The tricky part is that I want the wavy line on the left to scroll WITH the content when the content is too long.
The relevant CSS looks like this:
body {
background: url('images/background.jpg');
margin: 0;
padding: 0;
min-width: 1000px;
}
#container {
width: 100%;
position: absolute;
top: 105px;
bottom: 0;
margin: 0;
padding: 0;
}
#sidebarbg {
background: url('images/chocolate.jpg');
width: 300px;
height: 100%;
position: fixed;
left: 0;
z-index: 11;
background-attachment:fixed;
}
#sidebar {
background: url('images/sidebar.png');
width: 300px;
height: 100%;
position: absolute;
left: 0;
z-index: 12;
}
#contentnest {
position: absolute;
top: 50px;
left: 365px;
right: 0;
z-index: 14;
}
#content {
background: url('images/contentbg.png');
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-khtml-border-radius: 30px;
padding: 20px;
border: #f062a4 3px solid;
width: 80%;
min-width: 350px;
margin-left: auto;
margin-right: auto;
font-size: 22px;
line-height: 150%;
font-family: QuicksandBook, Tahoma, Arial, sans-serif;
color: #905131;
}
and the HTML looks like this:
<body>
<div id="sidebarbg"></div>
<div id="sidebar"></div>
<div id="container">
<div id="contentnest">
<div id="content">
<! -- content goes here -->
</div>
</div>
</div>
</body>
What am I missing?
in #sidebar try removing height:100% and add bottom:-99999em
the other way is to make the sidebar position:fixed.
I was able to get the BG of my absolute container to extend beyond the viewport by adding this to my div style that has the BG.
min-height: 100%;
height: 100%;
overflow-y: scroll;
This will cause a double scroll bar so add this to your body style
overflow-y: hidden;