I have a site with 4 div tags:
Header (for navigation etc)
Logoheader (for a Logo)
content (my site content)
footer (for additional information)
the header and logo div should have a fix height and both should be 100% in their widht.
the footer div has a fix height of 132px and should be at the very bottom of the page.
The content div should fill the rest of the space which is left between the logoheader and the footer.
Here my code:
html:
<html>
<head>
<title>test</title>
<link href="_css/main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="headerWrapper"></div>
<div id="logoWrapper"></div>
<div id="contentWrapper"></div>
<div id="footerWrapper"></div>
</body>
</html>
css:
body, html {
background-color: green;
margin: 0;
padding: 0;
}
#headerWrapper {
background-color: #ff6b2b;
height: 45px;
}
#logoWrapper {
background-color: white;
width: 100%;
height: 100px;
border-bottom: 1px solid black;
}
#contentWrapper {
margin-left: auto;
margin-right: auto;
height: 100%;
width: 70%;
background-color: red;
}
#footerWrapper {
background-color: #ff6a2b;
height: 132px;
border-top: 1px solid black;
}
The outcome isnt really what I was looking for, maybe someone can help me to fix this problem. Because the whole site should be visible without scrolling.
Greetings :)
Related
I need your help,
It seems that I am having some difficulty with attempting to add a div around a textarea inside a container div as well as a border for the div encompassing my button at the bottom of the container div.
First problem: the right side border is missing
Second problem, the 1px solid red is missing from the inner2 div.
Here is a pic of the problem and the desired result:
Desired result is:
Here is the HTML & CSS in question:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#container {
text-align: center;
width: 500px;
border: 1px solid green;
}
#summary {
width: 100%;
height:100%;
border: 0;
}
#inner1 {
height: 500px;
}
#inner2 {
border-top: 1px solid red;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id='inner1'><textarea id="summary"></textarea></div>
<div id="inner2"><input type="button" value="Close"></div>
</div>
</body>
</html>
It's because the textarea element has default padding. Since padding isn't included in an element's width/height calculations, it overflows outside of the parent element because a width of 100% + the border is greater than the parent elements width.
You could either remove this padding, or include the padding in the dimension calculations by adding box-sizing: border-box to the textarea element:
#summary {
width: 100%;
height: 100%;
border: 0;
box-sizing: border-box;
}
Add overflow: hidden and box-sizing: border-box; like below:
#container {
text-align: center;
width: 500px;
border: 1px solid green;
}
#summary {
width: 100%;
height:100%;
border: 0;
box-sizing: border-box;
}
#inner1 {
height: 500px;
overflow: hidden;
}
#inner2 {
border-top: 1px solid red;
width: 100%;
}
I just started to follow some simple video about web site development.
Since I don't want to just go through instructions given, I stumbled upon small issue: why div id="header" is not centered even with option margin: 0 auto, declared in css? Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FLASTER</title>
<!-- <link rel="stylesheet" href="css/styles.css"> -->
<style>
body {
background: black;
margin: 0;
padding: 0;
font-family: "Helvetica", "Arial";
}
#wrapper {
width: 960px;
height: auto;
background: white;
border-left: 5px solid blue;
border-right: 5px solid blue;
overflow: auto;
margin: 0 auto;
padding: 10px;
}
#header {
width: 100%;
height: 100px;
border-bottom: 3px solid red;
border-left: 3px solid blue;
border-right: 3px solid blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
</div> <!-- End of header -->
<div id="content">
</div> <!-- End of content -->
<div id="footer">
</div> <!-- End of footer -->
</div> <!-- End of wrapper -->
</body>
</html>
Auto margins will centre the box (including the padding and the border) so long as the total width of it is 100% or less. (If it is exactly 100% then centred, left-aligned and right-aligned will look identical.).
The header element is not centred for two reasons:
It doesn't have margin: 0 auto
Even if it did, the box has a content-width of 100% and 6 pixels of borders as well, so it ends up being left aligned with the right-most 6 pixels being pushed out to the right.
If you set width: auto then it will adjust the content width to fill the container (accounting for the borders) which will centre it on the page (since its container is centred).
Set width: 100% in #wrapperor if you want maximum width you can set max-width: 960px; width:100%;
#wrapper {
width:100%
height: auto;
background: white;
border-left: 5px solid blue;
border-right: 5px solid blue;
overflow: auto;
margin: 0 auto;
padding: 10px;
}
or
#wrapper {
max-width: 960px;
width:100%
height: auto;
background: white;
border-left: 5px solid blue;
border-right: 5px solid blue;
overflow: auto;
margin: 0 auto;
padding: 10px;
}
If you want to center a block, you must set it to a width less than 100% and use margin:auto.
If you want to center the content within a block, you use text-align:center.
It has width: 100%, so, what to center? Set a width less than 100% (for ex. 50%), add text-align: center; to its parent (#wrapper ) and see the result.
#wrapper {
text-align: center
}
#header {
width: 50%;
border: 3px solid blue;
margin: 3px auto;
}
Being new to HTML and CSS i was trying to create a Sticky Navigation Bar and it seems like i did not code it right. I have posted my code below, please do help me out with the issue.
Thanks.
<!DOCTYPE>
<html>
<head>
<title>test</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
nav{
min-height: 40px;
height: 55px;
background-color: #67518e;
width: 100%;
}
div{
padding-top: 30px;
padding-bottom: 30px;
border-top: 1px solid green;
border-bottom: 1px solid green;
background-color: yellow;
width: 100%;
}
</style>
</head>
<body>
<nav>
</nav>
<div>
</div>
</body>
</html>
You need to use position: fixed on you nav with top and left values..
top:0;
left:0;
position:fixed;
and your div need to have margin-top equal to nav-height, otherwise it will just overlay each togther;
margin-top:55px;
Here is a fiddle; http://jsfiddle.net/h9u1fe4v/
I've got a div within a div, both are percentage based for the page but the nested div overlaps slightly to the right.
I'm actually trying to get the white box sit inside the first light blue div with a small margin on all sides so you can see a bit of the darker backround color, making it stand out more.
Editing to point out that the point of the position:fixed is to make the white box move as you scroll.
A solution was posted that involved chaning the position to relative, although this obviously stops the box from moving.
JSFiddle
div {
border-radius: 5px;
}
#header {
height: 50px;
background-color: #F38630;
margin-bottom: 10px;
}
.left {
height: 1300px;
width: 25%;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
}
.right {
height: 1300px;
width: 75%;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#footer {
height: 50px;
background-color: #69D2E7;
clear: both;
}
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
<html>
<head>
<title>Result</title>
</head>
<body>
<div id="header"></div>
<div class="left"><div id="fixedleft"></div></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
Your margin is increasing with the width.
Try:
#fixedleft {
height: 50px;
width: calc(25% - 2px);
background-color: #FFFFFF;
position: fixed;
margin: 1px;
}
I guess that this issue is due to default body margin as it doesn't affect the width of your fixed div(as you can see in the example, it's width is always the same, no matter what margin value you set, unlike it's container's width) :
body { margin:0; }
There is still a problem with the inner margin (1px) that pushes it out of the container, you can use calc for it, here is an example:
JSFiddle
#fixedleft {
background-color: #ffffff;
height: 50px;
margin: 2px;
position: relative;
width: 98%;
}
Please try this instear of
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
if you load jQuery..
$(window).bind("resize", function(){
$("#fixedleft").width( parseInt($(".left").width()) -2)
})
$(function(){$(window).resize()})
I'd like to have a [Fixed][Liquid][Fixed] cross-browser compatible layout.
HTML:
body
div#col-1
div#col-2
div#col-3
CSS:
#col-1 {
width:150px;
float:left;
}
#col-2 {
width:100%;
padding:0 150x;
}
#col-3 {
positon:absolute:
right:0;
width:150px;
}
Would this work/better way to do it?
This is pretty simple.
here is the code
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>
I'm using floats instead of position absolute. The advantage of using floats above absolute positioning is that you can put a nother div beneath it, lets say the footer. And just give it a clear: both and it will automatically display at the bottom of the page.
here is an example with a footer
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
#footer {
clear: both;
margin-top: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>
Voila! You've got your liquid layout.
check this out:
http://siteroller.net/articles/3-column-no-tables-no-floats
But no,I don't think that would work. There are plenty of links in said article though to address your issue.
And if there is any interest, I will extend what is written there.
Okay, got it: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
I like Robert's answer. I would also add a wrapper around the left, right, center and footer. Here, I set the id to "page":
<body>
<div id="page">
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</div>
</body>
Then, you can also add the style for the "page":
#page {
min-width: 600px;
}
This way, if the user shrinks their browser down to a very small size, the content still looks good.