I'm creating a menu bar for my site and I'm wondering if I'm doing this correctly.
Is there a better way to achieve the same result? It just seems excessive to use 3 divs.
Here is how I'm currently handling it :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#topbar {
background: #487BC0;
width: 100%;
}
#container {
width: 960px;
margin: 0 auto;
}
#links {
padding: 15px 0 15px 840px;
color: #fff;
font-size: 14px;
margin-bottom: 30px;
}
#content {
position: relative;
background: #f6f6f6;
width: 960px;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="topbar">
<div id="container">
<div id="links">Login | Register</div>
</div>
</div>
<div id="content">Content goes here</div>
</body>
</html>
Im no Guru but maybe something like this will work?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
background: #487BC0;
width: 100%
min-width: 960px;
margin: 0 auto;
}
#container > span {
display: block;
padding: 15px 0 15px 840px;
color: #fff;
font-size: 14px;
margin-bottom: 30px;
}
#content {
position: relative;
background: #f6f6f6;
width: 960px;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<span>Login | Register</span>
</div>
<div id="content">Content goes here</div>
</body>
</html>
Then again, im no Guru O.o
remove the #topbar if you do not want the blue background to stretch otherwise its alright i think..
There are many solutions to same problem
My Way Of Skinning this cat. The way I see it, width is common so only set it once.
HTML
<div class="container">
<div class="topBar">Login | Register</div>
<div class="content">content</div>
</div>
CSS
.container
{
width:960px;
margin: 0 Auto;
}
.topBar
{
background-color:#487BC0;
text-align:right;
margin-bottom:30px;
padding: 15px 15px 15px 15px;
color: #fff;
font-size: 14px;
}
.topBar div
{
padding: 15px 0 15px 840px;
color: #fff;
font-size: 14px;
margin-bottom: 30px;
}
.content
{
background-color:#f6f6f6;
}
Example: http://jsfiddle.net/V9DGp/
Related
I would like that the footer stays at the bottom of my web page. I did it, but if the main content is long the user can not scroll the page; the consequence (I guess) is that the footer overlaps the content.
Another problem is that the width of the footer is larger than the "header" of the website.
Here is my CSS for the footer:
#footer {
position: absolute;
bottom: 0;
width: 100%;
font-size: 0.9em;
padding: 2em;
background-color: orange;
border: 0.2em #4040ff;
margin-bottom: 1em;
border-style: solid;}
I upload also the image of the screen in order to show you the graphic problem.
Thank you.
For me always work this:
html { height: 100%; }
body {
min-height:100%;
position:relative;
padding-bottom:[footer-height]
}
.footer {
position: absolute;
left: 0 ; right: 0; bottom: 0;
height:[footer-height]
}
I have written one code snippet, which can solve your problem
html, body{
height:100%;
margin:0;
}
header {
height: 30px;
background-color: #000;
color: #fff;
padding: 20px;
text-align:center;
}
footer{
height: 30px;
background-color: #000;
color: #fff;
padding: 20px;
text-align:center;
margin-top: auto;
}
body{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction:column;
}
header p, footer p{
margin: 5px 0px;
}
.container{
text-align:center;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header>
<p>This is header</p>
</header>
<div class="container">
<p>This is body content</p>
</div>
<footer>
<p>This is footer</p>
</footer>
</body>
</html>
I've been struggling with this for hours and cannot find the solution. I've made a simple layout to display two pairs of gauge+thermometer visualizations to show the temperatures uploaded by ESP8266. The basic layout is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container_main">
<div id="heading"><h1>The title</h1></div>
<div class="graph">
<div id="container">
<div id="inner">
<div id="gauge_div"></div>
<div class="below_gauge">Text #1</div>
<div class="below_gauge2">Here I would like to display some text but would not like the left square to be misaligned with the right one.</div>
</div>
<div id="thermometer">
<canvas id="termometar_cnv" width="160" height="600"></canvas>
</div>
<div id="inner2">
<div id="gauge2_div"></div>
<div class="below_gauge">Text #2</div>
</div>
<div id="thermometer2">
<canvas id="termometar2_cnv" width="160" height="600"></canvas>
</div>
</div>
<div id="below">Description.
</div>
</div>
</div>
</body>
</html>
body {
background-color: #ddd;
}
h1 {
color: #FFFFFF;
background-color: #0000FF;
padding: 5px;
}
#container {
height: 100%;
width: 100%;
display: table;
}
#inner {
vertical-align: middle;
display: table-cell;
}
#inner2 {
vertical-align: middle;
display: table-cell;
}
#gauge_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#gauge2_div {
width: 240px;
height: 240px;
margin: 0 auto;
background-color: green;
}
#heading {
width: 100%;
margin: 0 auto;
text-align: center;
color: blue;
}
#below {
margin: 0 20px;
text-align: center;
color: blue;
}
.graph {
margin: 0 auto;
padding: 10px 0;
text-align: center;
color: blue;
border: thin solid #00F;
}
#container_main {
padding-right: 100px;
padding-left: 100px;
}
#thermometer {
margin: 0 auto;
padding: 10px 0px 10px 0;
background-color: gray;
}
#thermometer2 {
margin: 0 auto;
padding: 10px 20px 10px 0;
background-color: gray;
}
.below_gauge {
font-weight: bold;
color: blue;
}
.below_gauge2 {
width: 240px;
margin: 0 auto;
color: blue;
}
When <div class="below_gauge2"> is removed from the HTML the layout is exactly how I would like it to be. However, after adding that DIV, the green div moves up so it is not anymore vertically aligned with the second green div at the right.
What can be done so <div class="below_gauge2"> would be displayed below the left green DIV, but in a such way the green DIV would stay where it was before adding the <div class="below_gauge2">?
check this fiddle
#inner {
vertical-align: middle;
display: table-cell;
//added
position: relative;
}
.below_gauge2 {
width: 240px;
margin: 0 auto;
color: blue;
//added
position: absolute;
left: 0;
right: 0;
margin: auto;
}
I don't have much HTML/CSS experience, but I am trying to get a simple layout going where I have a centered div acting as the page container. I have tried looking up other examples, but I can't figure out why mine doesn't work (the header appears but is left justified, I want it centered):
html:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header"></div>
</div>
</body>
</html>
css:
body {
background: #fff;
font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
#container {
background: #bbb;
width: 800px;
margin: 0, auto;
}
#header, #footer {
background: #333;
height: 40px;
}
margin: 0, auto;
should be
margin: 0 auto;
Remove comma in margin:
margin: 0 auto;
instead of
margin: 0, auto;
You have a , between margin:0 and auto; this is an invalid CSS term
margin: 0, auto;
needs to be
margin: 0 auto;
Check this demo
body {
background: #fff;
font-family: Helvetica, Arial, sans-serif;
width: 100%; /* You need to mention the width here (Good way)*/
padding: 0;
text-align: center;
}
#container {
background: #bbb;
width: 800px;
margin: 0 auto; /* You are doing wrong here (margin: 0, auto;) */
}
#header, #footer {
background: #333;
height: 40px;
}
margin: 0 auto; (valid) instead of margin: 0, auto; (invalid)
So, I would like to have my text aligned in the middle of the page and I would also like a separate div that has text on the bottom of the page in the middle.
Here is my CSS code
#header { text-align:center; color:white; font-family:'Capture'; font-size:34px; margin: auto; width: 800px;}
#slogan { text-align:center }
#font-face { font-family:'Capture'; src:url(/fonts/Capture_it.ttf); }
.info-container { width: 840px; border: 1px solid #d8d5c6: padding: 4px; margin: 40px auto 0; }
.inner-border { background-color: #fcfbf9; border: 1px solid #d8d5c6; padding: 10px 20px; }
.coming-soon-visitor strong, .coming-soon-owner strong { font-weight: bold; color: #000; }
.coming-soon-owner { float: left; font-size: 14px; color: #6d6a5b; font-weight: normal; width: 400px; border-right: 1px solid #d9d6c5; padding: 10px 0; margin-bottom: 10px; }
.coming-soon-visitor { float: left; font-size: 14px; color: #6d6a5b; font-weight: normal; padding-left: 20px; padding: 10px 0 10px 20px; margin-bottom: 10px; }
<div style="text-align:center">Your text here</div>
and for your css
<div id="my-div">Your text here</div>
#my-div{ text-align: center }
if you mean, "I want my DIV centered," then you possibly want this:
<div id="my-div">Your text here</div>
#my-div{ width: 800px; margin: 0 auto; text-align: center }
beyond that, your question might be too vague to give you the answer you seek
See if the code below helps:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>align</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#text_center {
text-align: center;
width: 200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-20px;
}
#text_bottom {
text-align: center;
width: 200px;
position:absolute;
left:50%;
bottom:1%;
margin-left:-100px;
}
</style>
</head>
<body>
<div id="text_center">Text 1</div>
<div id="text_bottom">Text 2</div>
</body>
</html>
http://i.imgur.com/mFtXm.jpg here is a screenshot.
The areas marked in red are where the problems are. When I view the page in firefox it looks fine, in chrome there are tiny gaps, I don't deal with ie.
What is the correct way to size these divs such that each div will "connect" with other divs without leaving any gaps whenever the browser changes? something with jquery or js?
html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div id="header">
<h1>New York Tech Map</h1>
</div>
<div id="navlinks">
<div class="topnav">
About Us
</div>
<div class="topnav">
Contact Us
</div>
<div class="topnav">
Sign Up
</div>
<div class="topnav">
Help
</div>
</div>
<div id="sidebar">
</div>
<div id="map">
</div>
<div id="footer">
© 2012 NYC Tech Map
</div>
</body>
</html>
css:
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #F0F0F0;
}
a { text-decoration: none; color: grey; }
a:hover{ color: red; }
#header {
width: 100%;
height: 75px;
background: red;
margin-top: -21px;
}
#navlinks { float: right; width: 80%;}
.topnav {
width: 25%;
height: 25px;
float: left;
padding-top: 5px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-size: 15px;
font-weight: bold;
}
#sidebar {
width: 20%;
height: 500px;
float: left;
background: blue;
}
#map {
height: 80.8%;
width: 80%;
float: right;
}
.
.popa:hover {
background: #D6D6D6;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 25px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-weight: bold;
padding-top: 5px;
color: grey;
}
it is better just resize dynamically, use js to get the window size then have that element adjust accordingly.