Problem:
https://postimg.cc/image/tunhwh8qj/
The trouble I am currently having is that the border around my body is not outlining everything. As I have recently learned I'm guessing this means an element is out of the flow due to floating? However I am not certain how to fix it in this case.
My html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<img src="final.jpg" id="banner">
<ul id="nav">
<li class="links">Home</li>
<li class="links">Location</li>
<li class="links">Facilities</li>
<li class="links">Attractions</li>
<li id = "endlink">Bookings</li>
</ul>
<div id="leftcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
<div class="slideshow">
<img src="1.jpg" width="600" height="450" />
<img src="2.jpg" width="600" height="450" />
<img src="3.jpg" width="600" height="450" />
</div>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS is:
html{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
height: 100%;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
border-bottom: 1px solid #7f7f7f;
border-top: 1px solid #7f7f7f;
}
#mainc {
float: left;
width: 654px;
background-color: white;
margin: 0;
padding-left: 8px;
padding-right: 4px;
height: 100%;
}
#leftcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 290px;
border-right: 1px solid #7f7f7f;
height: 100%;
}
#footer {
clear: both;
position: relative;
bottom: 0.5px;
margin: 0;
background-color: #dad8bf;
border-top: 1px solid #7f7f7f;
}
#footer p{
margin: 0;
}
.links {
float: left;
margin: 0px;
border-right: 1px solid #7f7f7f;
}
#endlink {
float: left;
margin: 0px;
border-right: none;
}
#lastlink{
display: block;
width: 184px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
#lastlink:hover{
background-color: #999999;
}
a:link {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
.slideshow {
height: 483px;
width: 632px;
margin: auto;
padding: 0px;
}
.slideshow img {
padding: 0px;
border: 1px solid #ccc;
background-color: #eee;
}
thanks in advance guys!!
This is happening because your body has fix height of 100%.Change body tag css as:
height:auto;
min-height: 100%
if this doesn't work then add following with this:
overflow:auto;
Probably better NOT to use the body element for your container. Instead, just add
<div class="container"></div>
around your code and in your CSS changehtml to body and body to div.container.
body{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
div.container{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
}
Edit: I completely missed the 100%, that's gotta be it.
Add overflow: hidden to your body element. When elements are floated it will not push the parent container height past it unless there is a clearer
Related
I'm trying to make a comment box that is horizontal with the name box, because the text box was fixed on the top. When I tried to apply margin-top on the text area and form, it moves the name box and the whole entire profile down with it. Is there a way to move the text area down, without affecting anything else. Here is my code:
body {
margin: 0;
}
p.name {
font-family: "Roboto";
margin-top: 90px;
margin-left: 50px;
margin-bottom: 0;
border: 1px solid black;
display: inline-block;
padding: 20px 70px;
font-size: 25px;
}
div.info {
margin-left: 50px;
border: 1px solid black;
padding: 20px 13.5px 20px;
border-top: none;
display: inline-block;
margin-bottom: 0;
}
div.date {
margin-left: 50px;
border: 1px solid black;
border-top: none;
display: inline-block;
padding: 0px 17px 0px;
text-align: center;
}
form {
display: inline-block;
margin-left: 100px;
}
textarea {
width: 300px;
height: 150px;
display: inline-block;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="profile.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>
<body>
<p class="name">henWrek</p>
<form>
<label for="fname">Profile Comments:</label>
<br>
<textarea>Enter your comment here...</textarea>
</form>
<br>
<div class="info">
<img src="default.jpg" height="200" width="210">
</div>
<br>
<div class="date">
<p>Joined: 11/1/2018</p>
<p>Last Online: 11/9/2018 3:21PM</p>
<p>Post Count: 2</p>
</div>
</body>
</html>
Another option is to put a position to the label tag and this tag have a relative position and you can change top and right to move when you want.
body {
margin: 0;
}
p.name {
font-family: "Roboto";
margin-top: 90px;
margin-left: 50px;
margin-bottom: 0;
border: 1px solid black;
display: inline-block;
padding: 20px 70px;
font-size: 25px;
}
div.info {
margin-left: 50px;
border: 1px solid black;
padding: 20px 13.5px 20px;
border-top: none;
display: inline-block;
margin-bottom: 0;
}
label{
position:relative;
top:50px;
right:100px;
}
div.date {
margin-left: 50px;
border: 1px solid black;
border-top: none;
display: inline-block;
padding: 0px 17px 0px;
text-align: center;
}
form {
display: inline-block;
margin-left: 100px;
}
textarea {
width: 300px;
height: 150px;
display: inline-block;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="profile.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>
<body>
<p class="name">henWrek</p>
<form>
<label class="label-prueba" for="fname"> Profile <br> Comments:</label>
<br>
<textarea>Enter your comment here...</textarea>
</form>
<br>
<div class="info">
<img src="default.jpg" height="200" width="210">
</div>
<br>
<div class="date">
<p>Joined: 11/1/2018</p>
<p>Last Online: 11/9/2018 3:21PM</p>
<p>Post Count: 2</p>
</div>
</body>
</html>
I have seen your code and found your problem, my suggestion is kindly add two property to your .textarea class and that is position:relative and top as per your requirement.
textarea{
position:relative;
top:100px;
}
try margin-top with a negative value, for instance: margin-top: -2px;
i am making a website when i am om full screen the website looks good but when i am making the screen smaller the divs come out etc.
Here is a printscreen of it:
How do i fix this?
This is the HTML and CSS im using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jari Rengeling</title>
<link rel="stylesheet" href="../CSS/StyleSheet.css" type="text/css">
</head>
<body>
<div id="header">
<img alt="wood" src="../Images/wood.png" id="wood">
<div id="menu">
<span id="naam">Jari Rengeling</span>
<ul id="nav1">
<li class="li1">Home</li>
<li class="li1">Over mij</li>
<li class="li1">Ervaringen</li>
<li class="li1">Contact</li>
</ul>
</div>
<div id="headertext">
<h1 class="space">Welkom</h1>
<p class="space" id="headerp">Mijn naam is Jari Rengeling, ik ben een beginnend Applicatieontwikkelaar. Neem gerust een kijkje op mijn eigen portfolio.</p>
</div>
</div>
<div id="footer">
<div id="navigatie">
<h2 id="h22">Navigatie</h2>
<ul id="ul2">
<li class="li2">Home</li>
<li class="li2">Over mij</li>
<li class="li2">Ervaringen</li>
<li class="li2">Contact</li>
</ul>
</div>
<div id="projecten">
<h2 id="h21">Projecten</h2>
<div id="project1"></div>
<div id="project2"></div>
<p>Geen huidge projecten...</p>
</div>
<div id="socialmedia">
<h2 id="h23">Sociale Media</h2>
<img alt="facebook" src="../Images/facebook.png" id="facebook" class="miniaturen">
<img alt="twitter" src="../Images/twitter.png" id="twitter" class="miniaturen">
</div>
<div id="contact">
<h2 id="h24">Contact</h2>
<p>Klik hier om mijn contact gegevens te bekijken!</p>
</div>
</div>
</body>
</html>
CSS
body
{
margin: 0px;
padding: 0px;
background-color: rgba(154, 135, 100, 1.0);
width: auto;
}
#menu
{
width: 100%;
height: 100px;
z-index: 1;
background-color: rgba(154, 135, 100, 0.80);
}
#nav1
{
margin: 0px;
text-align: right;
margin-right: 400px;
}
.li1
{
display: inline;
padding-left: 2%;
font-size: 19px;
line-height: 100px;
font-family: Champagne;
color: white;
}
#wood
{
position: absolute;
z-index: -1;
height: 800px;
width: 100%;
}
#naam
{
font-family: Champagne;
font-size: 40px;
color: white;
line-height: 100px;
margin: 0px;
position: absolute;
margin-left: 400px;
}
.space
{
margin: 0px;
color: white;
padding-top: 20px;
text-align: right;
font-family: Caviar;
}
#headerp
{
max-width: 480px;
display: inline-block;
font-size: 25px;
}
#headertext h1
{
font-size: 50px;
}
#headertext
{
float: right;
margin-right: 400px;
margin-top: 240px;
}
#footer
{
background-color: rgba(154, 135, 100, 0.80);
height: 210px;
width: 100%;
margin-top: 700px;
}
#h21
{
font-family: Caviar;
margin-left: 400px;
color: white;
border-bottom: 1px solid white;
max-width: 230px;
padding-top: 10px;
}
#project1
{
border: 1px solid black;
width: 100px;
height: 100px;
margin-left: 400px;
background-color: rgba(128, 128, 128, 0.15);
position: absolute;
padding-top: 0px;
}
#project2
{
border: 1px solid black;
width: 100px;
height: 100px;
margin-left: 530px;
background-color: rgba(128, 128, 128, 0.15);
padding-top: 0px;
position: absolute;
}
p
{
font-family: Caviar;
color: #ebebeb;
}
#projecten p
{
margin-left: 400px;
margin-top: 120px;
position: absolute;
}
#projecten
{
margin-left: 200px;
margin-top: 0px;
padding-top: 0px;
}
#navigatie
{
margin-left: 400px;
position: absolute;
}
.li2
{
list-style-type: none;
}
#ul2
{
position: absolute;
margin: 0px;
padding: 0px;
padding-top: 10px;
font-family: Caviar;
color: #ebebeb;
}
#h22
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
a:hover
{
color: black;
}
#h23
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
#socialmedia
{
position: relative;
margin-left: 900px;
top: -56px;
padding: 0px;
max-width: 214px;
}
.miniaturen
{
padding-right: 5px;
padding-top: 20px;
}
#contact
{
position: absolute;
margin-left: 1200px;
top: 802px;
padding: 0px;
max-width: 100px;
}
#h24
{
font-family: Caviar;
color: white;
padding-top: 10px;
border-bottom: 1px solid white;
margin: 0px;
}
a
{
text-decoration: none;
color: white;
font-family: Champagne;
}
There is a rule in css known as #media rule.
#media is used for creating responsive webpage.
example of #media rule :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
Seeing your CSS code, I noticed you are almost always using pixels as a measure. You shouldn't do that unless you know exactly the size of the screen were your website will be open. Otherwise, using percentages is always a good thing. You can control the style like with pixels and when you resize, since everything has it's size according their parent elements, everything will resize.
I changed a bit of your CSS and HTML code for you to see it. It's not perfect but you can understand the power of using percentages instead of pixels (:
http://jsbin.com/tacayaweya/edit?html,css,output
You could use #media queries (just like it was said here) to control the style your website based on the screen size. The example of #Advaith is a good example of how to use it.
As also mentioned in the comments, using frameworks like Bootstrap can help you with the design of your website.
I'm wondering why the elements in my nav bar appear to have blank space above them? I've checked the margin and padding and there doesn't seem to be an issue, but there is a large space above my #logo and #searchbox which is messing up my layout, how can I get rid of the space above the elements?
Thanks a lot!
Here's my Code:
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
Your <nav> element has a padding of 10px.
EDIT: The absolutely positioned search form seems to be causing the problem. I made the following changes and the space went away:
#searchbox_div {
position: relative;
display: block;
padding: 0;
width: 100%;
}
#searchbox {
position: relative;
float: right;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
float: left;
}
#main_nav{
display: inline-block;
padding: 0px;
margin: 0px;
margin-top: 4em;
margin-left: 1em;
}
I noticed that you`re not using a css reset. A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
Also, sometimes if I have a problem with blank spaces, I run the html all together so there are no blank spaces between the tags. To make it look neat, I insert carriage returns in the middle of the html tag.
By default, most browsers have an 8px or so margin that is built in or "Added" to the page style. The super easy way to eliminate this is through CSS. Simply use:
html,body{
margin:0;
}
You can also add:
padding:0;
If it's still giving you problems!
You appear to need to reset/normalize your css as that
html,body{
margin:0;
padding:0;
}
The <nav> element is configured to have 10 pixels of padding on all sides.
I've been trying for hours to center a table div on a website I'm creating, and I can't figure it out. I've tried using margin: 0 auto with a defined width, and that doesn't work. I've also 'margin-right: auto; margin-left: auto;", but that didn't work either. I'm really not sure what else to try.
Also, I'm trying to fix my footer to stay on the bottom of the page. It'll look great on one page, coming after all the content, but on another page it will be right on top of the content. Should I make another topic for that, or can someone help me out with that in this one?
HTML for the page with the table:
#body {
background-color: #8AD4E6;
font-color: #3E3E3E;
font-family: "Akzidenz Grotesk" sans-serif;
}
#content {
margin-left: auto;
margin-right: auto;
width: 500px;
text-align: center;
vertical-align: middle;
position: relative;
}
#header {
background-color: #6cf;
margin: 10px;
height: 120px;
font-family: "Akzidenz Grotesk" sans-serif;
text-align: center;
color: #4D8B4D;
border: 2px solid black;
}
#headerimg {
border: 2px solid;
float: left;
margin: 10px 5px 5px 5px;
margin-left: 20px;
}
#sidebar{
position: relative;
float: right;
margin: 10px;
padding: 25px;
background-color: #6cf;
border: 2px solid black;
}
.sideheading {
text-align: center;
color: #4D8B4D;
font-family: "Akzidenz Grotesk" sans-serif;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 5px;
margin-left: 35%;
position: relative;
text-align: center;
vertical-align: middle;
}
table th {
font-style: bold;
}
.female {
background-color: #FFE6FF;
}
.male {
background-color: #D6EBFF;
}
.uni{
background-color: #D4FFD4;
}
#name{
margin-left: 35%;
text-align: center;
vertical-align: middle;
position: relative;
}
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
width: 20px;
background-color: #6EC66E;
margin-left: 44%;
margin-top: 30px;
text-align: center;
}
#navigation li {
display: inline-block;
}
a:link, a:visited {
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #CC6699;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover, a:active {
background-color: #4D8B4D;
}
#footer {
position: relative;
margin: 5px;
padding: 5px;
height: 60px;
background-color: #6cf;
border: 2px solid black;
}
`<!DOCTYPE html>
<html>
<head>
<title>Writer's Toolbox</title>
<link rel="stylesheet" type="text/css" href="writerstoolbox.css" />
</head>
<body>
<div id="headerimg">
<img src="logo.jpg" alt="Writer's Toolbox header image" />
</div>
<div id="header"> <h1> Writer's Toolbox</h1><h3>All of your writing needs in one place </h3></div>
<div id="sidebar">
<h3 class="sideheading">
<!-- <img src="" alt="" /> -->
<br />
What are you looking for?
</h3>
<p>Names<br>Settings<br>Character Traits<br>Mary Sue Test<br>Plot ideas<br>Title ideas<br>Writing Tips<br>Resources</p>
</div>
<div id="content">
<h3 id="name">'A' Names</h3><br>
<table id="tablename">
<tr>
<th>Names</th>
<th>Alternate Spelling</th>
<th>Gender </th>
<th>Origin</th>
<th>Meaning</th>
</tr>
<tr class="male">
<td>Aaron</td>
<td>Arron, Aaren</td>
<td>m</td>
<td>Hebrew</td>
<td>Exalted, strong</td>
</tr>
<tr class="male">
<td>Abbott</td>
<td>Abbot</td>
<td>m</td>
<td>English</td>
<td>Head of a monastery</td>
</table>
</div>
<footer id="footer">
<ul id="navigation">
<li>Homepage</li>
<li> | </li>
<li>Back to Names</li>
</ul>
</footer>`
u have some problems with the globe styling like u style the table and it's element together
Any way here's the solution in js fiddle
http://jsfiddle.net/phonexdoda/ze6dddoh/
i changed the #content style to
#content {
width: 1020px;
text-align: center;
vertical-align: middle;
position: relative;
}
add $tablename style
#tablename{
margin: auto;
}
and last the table styling
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 5px;
position: relative;
text-align: center;
vertical-align: middle;
}
and for the #name
#name {
text-align: center;
vertical-align: middle;
position: relative;
}
And the footer need this
#footer {
position: relative;
clear: both;
margin: 5px;
padding: 5px;
height: 60px;
background-color: #6cf;
border: 2px solid black;
}
If you use text-align: center; and vertical-align: middle; in the content class it will try and format the contents of the div to those attributes. These don't apply to the actual div itself.
Create a new div around the content div, like content_container and apply text-align: center; and vertical-align: middle; to the class.
This will center and vertically align your content div.
I am making a webpage using CSS when I encountered a problem. My menu bar doesn't center the links vertically in the bar. It should be really simple, but I need help. Sorry for making it so long, I just didn't want to leave anything out.
HTML:
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<title>noobyDev</title>
<style>
body {
background-color: CCFFFF;
text-align: center;
}
div.background
{
width: 90%;
height: 200px;
background color: #00FF66;
border: 2px solid black;
margin: 0 auto;
text-align: left;
}
div.background h3
{
margin: 0px 40px;
}
div.logo
{
width: 350px;
height: 75px;
background: url(logo.png);
margin: 30px 40px;
}
div.nav
{
background-color: #00CC66;
border: 2px solid black;
width: 90%;
margin: 0 auto;
text-align: left;
height: 30px;
border-top: 0px solid black;
}
.menu
{
margin: 5px 10px;
background: #00CC66;
color: black;
-webkit-transition: color;
}
.menu:hover
{
color: red;
}
div.center
{
width: 90%;
height: 700px;
background color: white;
border: 2px solid black;
border-top: 0px solid black;
margin: 0 auto;
text-align: left;
}
div.column1 h1
{
margin: 30px 40px;
}
div.column1 p
{
margin: 30px 40px;
}
div.column1
{
width: 70%;
height: 100%;
float: left;
display: block;
border-right: 2px solid black;
}
div.column2
{
width: 30%
height: 100%;
float: left;
display: block;
text-align: left;
}
div.column2 a
{
margin: 30px 40px;
display: block;
text-decoration: none;
font-size: 30px;
font-color: black;
}
div.legal
{
width:90%;
height: 50px;
background color: white;
border: 2px solid black;
border-top: 0px solid black;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="background">
<div class="logo">
</div>
<h3>Have you failed today?</h3>
</div>
<div class="nav">
<a style=text-decoration="none" href="index.html" class="menu">Home</a>
<a style=text-decoration="none" href="html.html" class="menu">HTML</a>
<a style=text-decoration="none" href="javascript.html" class="menu">Javascript</a>
<a style=text-decoration="none" href="css.html" class="menu">CSS</a>
<a style=text-decoration="none" href="java.html" class="menu">Java</a>
<a style=text-decoration="none" href="news.html" class="menu">News</a>
<a style=text-decoration="none" href="games.html" class="menu">Games</a>
<a style=text-decoration="none" href="other.html" class="menu">Other</a>
</font>
</div>
<div class="center">
<div class="column1">
<h1>Home</h1>
<br>
<p>Welcome to noobyDev.com! This is my site where I document all of my fails and successes worth sharing. Feel free to use them unless otherwise instructed to do so. Check back often and admire my awesomeness!</p>
</div>
<div class="column2">
Video?
</div>
</div>
<div class="legal">
<p>This site is heavily protected with a gargantuan army of mutant cotton balls; I would recommend not stirring trouble up. Just so you know, this site looks the best in Internet Explorer.</p>
</div>
</body>
</html>
Just add a line-height to div.nav:
div.nav
{
background-color: #00CC66;
border: 2px solid black;
width: 90%;
margin: 0 auto;
text-align: left;
height: 30px;
line-height: 30px;
}
Here's the JS Bin to test: http://jsbin.com/oliwit/1/
There are generally a lot of misconceptions on how to utilize the vertical-align within CSS, I found this post very helpful on how to get a full understanding of it... http://phrogz.net/css/vertical-align/