Hi I'm trying to make my maintenance page for my site however when I try and put the main content div in the middle by using margin: auto; however it seems to stay at the top and the only way to pull it down is by using <br /> but i'd prefer not to use that as it looks messy so I was wondering if you has any ideas what's wrong
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div class="topBarcontainer">
<img class="logo" src="images/logo.png" alt="Chattrd home">
</div>
</div>
<div id="navigationBar">
<ul>
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
<div id="mainContent"></div>
</body>
</html>
CSS:
body {
background: #F7F7F7;
font-family:Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.alert {
font-size: 10px;
color: #FFF;
background: #1f1f1f;
height: 14px;
padding-left: 10px;
font-family: Arial;
white-space: nowrap
}
.topBar {
background: #06C;
height: 40px;
}
#navigationBar {
background: #1f1f1f;
height: 28px;
color: white;
font-family: 'Open Sans';
}
.topBarcontainer{
margin: auto;
width: 1000px;
}
.logo {
padding: 7px;
height: 24px;
width: 98px;
}
#navigationBar ul {
margin: 0;
padding: 3px;
list-style-type: none;
text-align: center;
}
#navigationBar ul li {
display: inline;
}
#navigationBar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
}
#navigationBar ul li a:hover {
color: #FFF;
background-color: #06C;
}
#mainContent {
margin: auto;
width: 500px;
height: 200px;
border: 1px solid #D8D8D8;
border-radius: 5px;
background: #E6E6E6;
}
Vertical centering will not work because there is nothing to center - the body will, like all HTML elements by default, be just the height needed to accomodate its contents.
Since your main content is of a fixed size you could simply solve it with absolute positioning:
#mainContent {
width: 500px;
height: 200px;
position:fixed;
left:50%;
top:50%;
margin:-100px 0 0 -250px;
border: 1px solid #D8D8D8;
border-radius: 5px;
background: #E6E6E6;
}
Fiddled for your pleasure.
Related
I am trying to use css on an <ul> but for some reason I can't figure out why it won't apply. I am trying to style the list into a menu bar for practice but am unable to get it to register. Can anyone see what I'm missing?
I have tried #menu ul{} #menu ul li{} but neither of those work either.
#container {
width: 1050px;
border: 1px solid grey;
margin: 0 auto;
}
#header {
height: 100px;
padding: 10px 0;
}
#brand {
float: left;
}
h1 a{
font-size: 40px;
font-weight: 100;
text-decoration: none;
color: #861BFF;
}
#searchBox {
float: right;
background: linear-gradient(#E4F2B9, #B7E953);
width: 400px;
height: 50px;
padding: 20px 20px 0 20px;
}
.text {
float: left;
width: 200px;
padding: 5px;
font-size: 15px;
color: #E36A0C;
background: white url(./images/search22px.png) right center no-repeat;
}
.submit {
float: right;
font-weight: bold;
padding: 5px;
color: white;
background: #A751D6;
font-size: 15px;
}
ul {
list-style: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Maths Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="maths.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="brand">
<h1>Maths the Fun Way</h1>
</div>
<div id="searchBox">
<form method="get">
<input type="text" class="text" name="searchBox">
<input type="submit" class="submit" value="Search a Topic">
</form>
</div>
<div class="clear">
</div>
</div>
<div id="menu">
<ul>
<li>Home</li>
<li>Online Tutorials</li>
<li>Get a Private tutor</li>
<li>Sign Up</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
</html>
The above is the full code. I have tried in both firefox and chromium and the problem is present in both.
Your code works perfectly fine as Adam mentioned.
See https://jsfiddle.net/kabsw9gr/
#menu ul {
margin: 0 0 10px 0;
padding: 0;
list-style: none;
}
#menu ul li {
display: inline-block;
padding: 10px 20px;
background: linear-gradient(#E4F2B9, #B7E953);
}
Why does my header and navigation go below my hero image?
Whenever I increase the size of my text on my image the nav and heading goes down further. If i get rid of the size for the text it goes back to where i want it.
Here is my html and css.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Amanda Farrington</title>
<link rel="stylesheet" href="css/demo.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 97%;
margin:0;
padding-left: 3em;
float: left;
background: white;
height: 10%;
}
#leftHeader
{
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 40%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
#hero{
width: 100%;
height: 30em;
}
#heroImage
{
top: 12%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 30em;
top: 90%;
margin-left: 30%;
z-index: 2;
position: relative;
}
h2{
width: 9em;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
It's because of position: absolute; of your #heroImage div (if I understand, what do you want)
I don't know what happened to my navigation bar and its links. They do not show (Safari 6.0.5). I have tried to adjust the height and position of my header and nav containers. I know the answer is righht there in front of me but I don't see it. I haven't found any ideas on my web searches. Thank you for your help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MS Office Skills</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<img class="pctr" src="images/lily-pads.jpg" alt="Admin extraordinaire" />
<!-- another img class MAY GO HERE. but for now, nothing -->
</div><!--/#header-->
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Our Services</li>
<li>Read Our Blog</li>
<li>Contact Us</li>
</ul>
</div><!--/#nav-->
</div><!--/#container-->
</body>
</html>
/* BODY AND CONTAINER
---------------------------------*/
body {
font-size: 76%;
<!-- background-image: url(../images/black.jpg); -->
<!-- background-image: url(../../CGT136as/week-07hw/website/images/bg-strip-body.jpg); -->
background-repeat: repeat-x;
padding: 0px;
margin: 0px;
}
#container {
overflow: hidden;
width: 100%;
margin: 0 auto 0 auto;
}
/* HEADER AREA
---------------------------------*/
#header {
position: absolute;
left:0;
width: 100%;
height: 190px;
padding: 0px;
margin: 0px;
background-color: #0d0d0d;
}
.pctr {
position: relative;
top: 0px; <!-- 30px; -->
left: 0px; <!-- 0px; -->
z-index: 20;
}
/* MAIN NAVIGATION
---------------------------------*/
#nav {
float: left;
width: 900px;
height: 53px;
padding: 0px;
margin: 0px;
}
#nav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#nav ul li {
float: left;
line-height: 53px;
padding: 0 50px 0 0;
}
#nav ul li a {
font-family: arial, helvetica, sans-serif;
font-size: 1.4em;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#nav ul li a:hover {
color: #ff0;
border-bottom: 2px dotted #fff;
}
Your Header Div is ending up on top of the navigation div (You can see it by setting your header's background to be transparent). Either add a z-index: -1 rule to the header div.
Or apply the position: absolute; rule to the container div instead (Which is probably what you wanted).
I have this bare bones navigation that I am putting together and for some reason I am getting about a 40px left margin before the first link starts. I dont have a left margin on the div so not sure why it is happening. Of course it wont look good to be completely flush against the left side of the screen but id like to control any margin size myself.
I could not use jsfiddle for this because inside jsfiddle the error is not there. it renders fine.
With that said, this is the html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #FFF;
margin: 0;
padding: 0;
}
#footer_enhanced {
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
line-height: 50px;
float: left;
background-color: #121212;
z-index: 999;
margin: 0px;
left: 0px;
}
#navigation_enhanced {
color: #000;
margin: 0px;
padding: 0px;
height: 50px;
float: left;
clear: both;
}
#navigation_enhanced ul {
list-style: none;
margin: 0;
}
#navigation_enhanced li {
float: left;
line-height: 50px;
}
#navigation_enhanced li a {
display: block;
text-decoration: none;
font-size: 1.125em;
color: #FFF;
margin-right: 0.375em;
padding-right: 0.375em;
padding-left: 0.375em;
letter-spacing: -1px;
}
#navigation_enhanced li a:hover {
color: #000;
background-color: #fff;
}
.current {
display: block;
text-decoration: none;
font-size: 1.125em;
color: #000;
background-color: #fff;
margin-right: 0.375em;
padding-right: 0.375em;
padding-left: 0.375em;
letter-spacing: -1px;
list-style: none;
float: left;
}
</style>
</head>
<body>
<div id="footer_enhanced">
<div id="navigation_enhanced">
<ul>
<li class="current">home</li>
<li>cat2</li>
<li>cat3</li>
<li>cat4</li>
<li>cat5</li>
</ul>
</div>
</div>
</body>
</html>
The "unwanted" space doesn't exist in a fiddle by default because they reset (incorrectly labeled as normalize) the css. By default, ul has a padding-left, but jsfiddle clears it.
ul {
padding-left: 0;
}
I've searched this site all over and can't find the solution to my problem. First of all here's an image of my problem. (The div's with the "sssss" should expand vertically). So the content of the div should go to the next line when it hits the border. Any advice is very well appreciated.
Image
Here is my code.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<LINK rel=StyleSheet href="styles/StyleSheet.css" type="text/css" media=screen>
</head>
<body>
<form id="Form1">
<div id="header">
<div id="header-center">
<div id="logo">Logo</div>
<div id="search-user">
<form action="" id="SearchUser">
Search User: <asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox>
</form>
</div>
</div>
<div id="nav-menu">
<ul>
<li>Account</li>
<li>Burndown Chart</li>
<li>Projects</li>
<li>Reports</li>
<li>Extra</li>
<li>Extra</li>
</ul>
</div>
</div>
<div id="wrapper">sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
</form>
</body>
</html>
CSS
html, body
{
padding: 0px;
margin: 0px;
text-align: center;
background-color: #f3f4f9;
font-family: Verdana;
border: 0px;
}
#header
{
width: 100%;
background-color: #0066CC;
}
#header-center
{
margin: 0 auto;
width: 800px;
height: 80px;
}
#logo
{
float: left;
margin-top: 13px;
height: 50px;
font-size: 40px;
color: White;
font-weight: bold;
}
#search-user
{
float: right;
color: White;
font-size: 11px;
font-weight: bold;
margin-top: 25px;
}
#nav-menu
{
width: 100%;
margin: 0 auto;
border-top: 1px solid #003366;
clear: both;
}
#nav-menu ul
{
list-style-type:none;
margin:0;
padding:0;
height: 48px;
background-image: url(../images/menu-ul-bg.png);
}
#nav-menu ul li
{
display:inline;
line-height: 50px;
}
#nav-menu ul li a
{
padding: 0px 40px 0px 40px;
text-decoration: none;
color: Black;
font-size: 14px;
}
#nav-menu ul li a:hover
{
color: White;
}
#wrapper
{
margin: 0 auto;
width: 200px;
border: 1px solid black;
}
It's because you have one long string that the browser won't break on its own. The height will adjust automatically if you break it up into smaller words, if you use the CSS3 word-break or word-wrap property.
Ex: word-break:break-all;
You need to add to your #wrapper styling:
word-wrap: break-word;
This will brake long words like the 'ssssssssssssssssssssssss' one and make it go along divs width.