New here, I am creating a website and there seems to be a problem with a table I made to hold an image and a table I made to hold content. Content on left image on right. When I float the Image table right the content table moves completely underneath it. When I float it left there is too much space in between the 2. The code in question is table and table 3.
I want it to display the image block next to the link buttons and the context block underneath the buttons but next to the image block.
The second problem is my logo heading which is an image is removing the background image.
HTML Code
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<link href="Articlepage.CSS" rel="stylesheet" type="text/css">
<title>BEADLES BEADING</title>
</head>
<body id="wrap">
<h1><img src="logo.jpg" alt="logo"></h1>
<a class="mouseover" href="Home Page.html"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
<a class="mouseover1" href="Article Page.html"><img src="Buttons/New button About us pressed.jpg" alt="about_us"></a>
<a class="mouseover2" href="Section Page.html"><img src="Buttons/New button Products Unpressed.jpg" alt="products"></a>
<a class="mouseover3" href="Contact us.html"><img src="Buttons/New button Contact us Unpressed.jpg" alt="contact_us"></a>
<a class="mouseover4" href="url"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
<table3>AD SPACE(Image)</table3>
<table>
<tr>
<td>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b><br>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<br><br><br><br><br><br><br><br><br><br><br>
</td>
</tr>
</table>
<table2>
<tr>
<td>
FOOTER
</td>
<tr>
</table2>
</body>
</html>
CSS code
div {
text-align: left;
position: relative;
font-size: 2.5em;
font-weight: bold;
}
div1 {
text-align: left;
position: relative;
font-size: 1.5em;
text-shadow: 2px 2px black;
font-family: Georgia, Times, serif;
text-shadow: -1px -1px black, 1px 1px;
}
h1 {
text-align: left;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 0.1em 0.1em 0.2em black;
font-size: 2em;
font-style: italic;
float: inline;
border: 3px solid black;
width: 800px;
height: 196px;
padding: 0;
}
h2 {
text-align: left;
position: relative;
font-size: 1.5em;
font-family: Verdana, Helvetica, sans-serif;
text-shadow: -1px -1px black, 1px 1px;
}
p {
position: relative;
text-align: left;
font-size: 1em;
font-family: Georgia, Times, serif;
text-shadow: -1px -1px black, 1px 1px;
}
li {
position: relative;
font-size: 1em;
}
a {
padding: 0;
float: left;
}
b {
border: 3px solid black;
width: 180px;
height: 10.5em;
padding: 10px;
float: left;
}
b1 {
border: 3px solid black;
position: absolute;
width: 40px;
height: 23em;
padding: 10px;
float: right;
position: relative;
}
b2 {
border: 3px solid black;
position: absolute;
width: 40px;
height: 23em;
padding: 10px;
position: relative;
}
body {
background-image: url("background.jpg");
background-size: 100%;
margin: 20px;
width: 800px;
padding: 30px;
position: relative;
}
.centeredImage {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
table {
display: inline-block;
width: 640px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 5px;
text-align: center;
height: 400px;
padding: 0;
}
table2 {
display: inline-block;
width: 625px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 5px;
text-align: center;
height: 50px;
}
td {
text-shadow: 0.1em 0.1em 0.2em black;
font-family: "Times New Roman", Times, serif;
}
table3 {
float: right;
width: 150px;
border-style: solid;
border-width: 5px;
text-align: right;
height: 490px;
padding: 0;
}
p2 {
border: 10px solid black;
float: rights;
}
select {
width: 200px;
}
#wrap {
width: 900px;
margin: 0 auto;
}
Image link.
Look I am sure you get the just of what it should look like. Plus the white background should have a lilac image I placed into the body as background.
I think the two main problems are:
You are using tags that don't exist and
You aren't considering the width of the borders when setting your sizes
You set the width of the body to 800px, the first table to 640px, and that table3 to 150px. But the borders on both are 5px wide. 640 + 10 (left and right border of the first table) +10 (left and right border of the second table) + 150 = 810. Even if the tags were correct they're too wide to go next to each other.
Change
<table3>Ad Space</table3>
and
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b><br>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
To
<div id="adCol">Ad Space</div>
and
<div id="#imgDiv">
<img />
<img />
<img /><br />
<img />
<img />
<img />
</div>
In your CSS change "b" to "#imgDiv img", "table" to "#imgDiv", and "table3" to "#adCol". Then either reduce the width of the borders or make one of them at least 10px smaller in width.
Don't forget to also remove the table2 tag and change whatever you've called b1 and b2 to use real HTML tags and change b1 and b2 in your CSS to class names or ids.
Also, consider not setting the width of the body. You probably don't need that.
In this case I see what your trying to accomplish but you should really use divs it would make it easier.
But why don't you just build (1) table with a layout like this below and place / position it in your content. Instead of creating multiple tables. You can still use CSS to add your effects.
<div id="apDiv3">
<table width="100%" height="335" border="1">
<tr>
<td width="87%" height="207">CONTENT</td>
<td width="13%" rowspan="2"><span class="style5">AD SPACE(Image)</span></td>
</tr>
<tr>
<td height="50">Footer</td>
</tr>
</table>
</div>
We don't have tag <table2>. You should use <table>.
If you want to bring two elements near each other, you have to create a div and set the display to flex and bring 2 or more elements into it. You have to set the width of elements to 50% if you want to bring 2 elements. If you want more, you must divide 100 to the number of elements. For example, if you want 5 elements next to each other you must set the width of elements to 20%.
Related
I have created 3 divs that line side-by-side on 1 row on desktop view but I would like each div to stack vertically on mobile devices only. I can't seem to figure out the correct CSS code/media query for this.
This is the HTML div code I'm using in the body of the post:
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 1
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 2
<div style="float: left; width: 30%; margin-right: 5px;">
SOURCE 3
Here is the full HTML code--I am embedding 3 Instagram photos.
div style="float: left; width: 30%; margin-right: 3px;">
blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">
div style="padding: 1px;">
div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>
a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BC2kmbmhTOY/" target="_blank">#CherryBlossom #Doughnuts: Vanilla Cream Cheese Glaze w/ a #Cherry Filling, and featuring a #CherryBlossomTree design made with Chocolate (tree) and Cherry Buttercream Flowers Available Soon! March 15 to April 17.</a>
A photo posted by Astro Doughnuts (#astrodoughnuts) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-12T12:17:51+00:00">Mar 12, 2016 at 4:17am PST</time>
/div></blockquote>
script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">
/script>
/div>
div style="float: left; width: 30%; margin-right: 3px;">
blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">
div style="padding: 1px;">
div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>
a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BCq4otrp-ZW/" target="_blank">Spring truly arrives when flowers start blooming, and our #CherryBlossom macaron has certainly begun showing its petals! Sweet and subtle, it's the perfect spring bite. #oliviamacaron #frenchmacarons #springtime #GeorgetownDC #ShopTysons #DCeats</a>
A photo posted by Olivia Macaron (#oliviamacaron) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-07T23:22:02+00:00">Mar 7, 2016 at 3:22pm PST</time>
/div>
/blockquote>
script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">
/script>
/div>
div style="float: left; width: 30%; margin-left: 3x;">
blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6">
div style="padding: 1px;">
div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"></div>
a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BDJCBpnAi8f/" target="_blank">🌸💕 Happy Saturday! 💕🌸</a>
A photo posted by Georgetown Cupcake (#georgetowncupcake) on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-19T16:21:18+00:00">Mar 19, 2016 at 9:21am PDT</time>
/div>
/blockquote>
script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer">
/script>
/div>
div style="clear: both; height: 1em;"></div>
You need to use media queries in your css to produce responsive layouts. It can't be done using inline styles.
At a minimum, and from a mobile first approach:
<div>
SOURCE 1
</div>
<div>
SOURCE 2
</div>
<div>
SOURCE 3
</div>
<style>
#media(min-width:768px){
div {
float:left;
width:30%;
margin-right:5px;
}
}
</style>
Here you have three stacked, full width divs. Once the browser or device is equal to or beyond the defined breakpoint of 768px, the new css takes effect to produce three side-by-side divs as defined in the css.
See example. You should use percentage dimensions
.col{
height: 100px;
background-color: red;
margin-bottom: 10px;
}
#media (min-width: 960px){
.col{
float:left;
width: 30%
margin-left: 10%;
}
.col:last-child{
margin-left: 0%;
}
}
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
.block{ text-align: center; width:30%; margin:0px; padding:50px 0; float:left;}
#media only screen and (max-width: 767px) {
.block{ width:100%;}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="block" style=" background: #f00;">
SOURCE 1
</div>
<div class="block" style=" background: #ccc;">
SOURCE 2
</div>
<div class="block" style=" background: #444;">
SOURCE 3
</div>
Please check hope so this will help full for you
There is different options to do that, but both use media queries.
You can either put each div on display: inline-block on desktop and change them to display: block on mobile. Maybe set a width: 33% for each div (otherwise if your div are too long they won't be side by side).
Or the other solution:
Put your parent element on display: flex on desktop and put it back on display: block on mobile.
.sub { background-color: rgba(200,200,200,0.6); box-sizing: border-box; border-right: 1px solid black; padding: 5px; }
.first { display: flex; }
.first .sub { width: 33.3%; }
.second { display: block; margin-top: 20px; }
.second .sub { width: 100%; }
/* media queries for mobile */
#media (min-width: 320px) and (max-width: 480px) {
.first { display: block; }
.first .sub { width: 100%; }
}
<div class="first">
<div class="sub">One</div>
<div class="sub">Two</div>
<div class="sub">Three</div>
</div>
<div class="second">
<div class="sub">One</div>
<div class="sub">Two</div>
<div class="sub">Three</div>
</div>
use <li> instead of <div>, then use display:inline-block; or display:block;
I have several different sections in which I'm trying to center a set of tabs. One set of tabs I've tried to put in an unordered list and the other set I've tried with several <p> tags within a <div> but nothing seems to be working. I know others have had this problem but I haven't been able to find it so I apologize if this is a repetitive question.
I've tried <position: absolute>, <display: inline>, and others. I just can't seem to get it. Thanks in advance!
Also, they're not supposed to functioning tabs at the moment because I don't want to have to worry about jQuery right now, just supposed to look like them!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/default.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>STARSHIP CHRONICLES</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>STARSHIP CHRONICLES</h1>
<p id="topmenu">SEARCH - FAQ - FEEDBACK - ABOUT</p>
</div>
<div id="ships">
<!--ships go here-->
</div>
<!--This section is the area for the tabs that attach to the boxinfo-->
<div id="tabs">
<ul id="tabs">
<li id="tabs">OVERVIEW</li> <!--link to div id="geninfo"-->
<li id="tabs">STATS</li> <!--link to div id="statsinfo"-->
<li id="tabs">IMAGES</li> <!--link to div id="imagesinfo"-->
<li id="tabs">CONTEXT</li> <!--link to div id="contextinfo"-->
</ul>
</div>
<!--need to figure out how to place different information in same box when click on separate tabs-->
<div id="geninfo">
<table>
<tr>
<td><p class="info">SHIP NAME:</td>
<td><span class="text">Recursant-Class Star Destroyer</span> </p></td>
</tr>
<tr>
<td><p class="info">ALLIANCE:</td>
<td><span class="text"> Commerce Guild</span> </p></td>
</tr>
<tr>
<td><p class="info">ORIGIN:</td>
<td><span class="text"> Star Wars</span> </p></td>
</tr>
<tr>
<td><p class="info">SIZE:</td>
<td><span class="text"> 1,187 meters </spam></p></td>
</tr>
</table>
</div>
<div id="bottommenu">
<!--This is the scale-->
<p id="length">0m-479m</p><p id="length">480m-1299m</p><p id="length">1300m-1999m</p><p id="length">2000m-4999m</p><p id="length">5000m+</p>
</div>
</div>
</body>
</html>
CSS
body {
background: url(../images/spacebg.jpg) no-repeat fixed ;
}
#container {
width: 100%;
height: 100%;
}
#header {
width: 50%;
height: 100px;
border: solid 1px #0071BC;
background-color: transparent;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#info {
margin-left: auto;
margin-right: auto;
position: relative;
}
#geninfo {
margin-top: 100px;
width: 35%;
height: 200px;
background-color: #000000;
border: solid 1px #0071BC;
margin-left: auto;
margin-right: auto;
padding: 5px;
}
/*tab shape*/
#tabs {
color: #000000;
font-family: DinBlack;
text-align: center;
background-color: #0071BC;
width: 100px;
text-decoration: none;
}
#tabs ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#tabs li {
margin: 0 0.5em 0 0;
}
h1 {
color: white;
font-family: OratorSlant;
font-size: 50px;
margin-left: auto;
margin-right: auto;
}
#topmenu {
color: #ffffff;
font-family: DinBlack;
font-size: 15px;
}
table {
padding: 0px;
margin: 0px;
line-height: 1px;
}
/*h2*/
.info {
color: #0071BC;
font-size: 25px;
font-family: Captain;
}
/*infotext*/
.text {
color: #0071Bc;
font-size: 18px;
font-family: DinReg;
}
#bottommenu {
position: absolute;
bottom: 5px;
display: inline-block;
}
#length {
color: #000000;
font-family: DinBlack;
text-align: center;
background-color: #0071BC;
display: inline-block;
margin: 5px;
width: 200px;
height: 20px;
}
To horizontally center p's within a div, you can make the parent div text-align: center;, and the inner p's display: inline-block;
Inside of #bottommenu, remove absolute positioning (there are better ways to place a footer), and add text-align: center
Many possible duplicates, such as this one
im trying to create a website, but im having trouble with 2 parts;
1. I am unable to vertically align the Website title vertically so that its is in the middle of the div.
2. Im trying to left align the menu table with the header div right above it and make it stay as such for all browser types.
I have tried to do different things to get both the above to work, but nothing seems to work and am unable to align either of the elements. Could someone help me please.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game Portal</title>
<style>
body{
background-color: black;
}
h1.header{
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: bold;
font-size: 30px;
color: #fff;
text-transform: uppercase;
}
#headerdiv{
margin: 0px auto;
border: 1px solid red;
width: 70%;
height: 100px;
padding-top:30px;
}
th, td {
padding: 15px;
table-layout: fixed;
width: 180px;
height: 75px;
padding: 0px;
border-right-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #808080;
border-collapse: collapse;
}
td {
text-align: center;
font-family:"Times New Roman", Helvetica, sans-serif;
font-size: 15pt;
border-radius:5px
height: 100px;
}
a{
color: #808080;
}
#titleSize{
font-size: 25px;
}
#nav {
line-height:30px;
background-color:#4D4D4D;
height:80px;
width:100%;
}
</style>
</head>
<body>
<div id="headerdiv">
<h1 class="header">game<span id="titleSize">portal</span></h1>
</div>
<div id="nav">
<table style="background-color: #4D4D4D; padding-left: 15%;">
<tr>
<td>Home</td>
<td>Games</td>
<td>News</td>
<td>Contact Us</td>
</tr>
<table>
</div>
</body>
</html>
I have tried messing with the positions (abs, fixed, relative) as well as with the margins, but nothing seems to move either of the elements. Thanks in advance.
One way to do it is through padding:
#headerdiv{
width: 200px;
margin:0px auto;
border: 1px solid red;
width: 70%;
height: 70px;
padding-top:30px;
}
Here height has been changed and the rest to 100 has been added to padding-top
There are many ways to do that, example:
http://jsfiddle.net/ovLhjmwb/
For example: Is more easy to have a container that contains all the child elements (and give it a width)
.container {
width: 400px;
margin: auto;
}
Also, vertical aligned text, is a little difficult to do, the easiest way is to use the vertical-align property (that comes with table elements)
#headerdiv table{
vertical-align: middle;
height: 100%;
width: 100%;
}
So I guess there are some more probs. For example use more HTML5 tags and not so many of ID's or classes. Keep your DOM-tree as simple as possible. You will get a better structure and your xode is more readable. BTW I fixed your problems in my solution as well.
HTML:
<header>
<h1>Game<span>Portal</span></h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Games</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
body{
background: black;
}
header {
width: 70%;
display: block;
margin: 0 auto;
height: 100px;
border: 1px solid red;
}
header h1 {
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: bold;
font-size: 30px;
line-height: 30px;
color: white;
text-transform: uppercase;
padding-top:13px;
}
header h1 span {
font-size: 25px;
}
nav {
width:70%;
margin:0 auto;
text-align:left;
height: 100px;
background: #4D4D4D;
}
nav ul {
margin-left:-40px;
}
nav ul li {
float:left;
list-style-type:none;
}
nav ul li a{
color: #808080;
height: 62px;
padding:38px 20px 0 20px;
border-left:1px solid #808080;
display: block;
font-size: 15pt;
}
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 just have a quick question about my website. I have a huge whitespace between my footer and the end of my background image, about 500 or so pixels. I can't seem to find the problem and any help is appreciated.
Thanks,
Jacob
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link type="text/css" rel="stylesheet" href ="C:\Users\toshiba\Documents\NetBeansProjects\HTML5Application\public_html\css\index.css">
<meta charset="UTF-8">
<title> JP's Webservices</title>
</head>
<body>
<div id ="body">
<div class = "nav">
<ul>
<li>
About Me
</li>
<li>
Contact Me
</li>
<li>
Pricing
</li>
</ul>
</div>
<div class ="jumbotron">
<div class ='container'>
<div id ='h1'>
<h1> Need a website but don't know how? Look no further </h1>
</div>
<p> Web engineer for hire
</div>
</div>
<div style='align:center;text-align:center' class ="des" >
<h2> Knowledge. </h2>
<p> Straight 'outta Compton </p>
<hr>
<h2> Commitment. </h2>
<p> To excellence and to serve </p>
<hr>
<h2> Perspective. </h2>
<p> New outlook on your web designs </p>
<br>
</div>
</div>
</body>
<footer>
<div id ='footer'>
<p> Copyright #2014-2015 Jacob Platin
</div>
<div id ='footer1'>
<div id ='foot1'>
<a href="https://twitter.com/TheJakeoShark" target=newtab><img src="https://g.twimg.com/Twitter_logo_blue.png" width="72" height="46" border="0" /></a>
</div>
<div id ='facebook'>
<a href ='https://facebook.com/jacob.platin' target=newtab><img src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png' width ="65" height =" 53" /></a>
</div>
</div>
</footer>
</html>
CSS
.jumbotron {
background-image: url(http://cam-consultants.net/wp-content/uploads/2014/05/servers.jpg);
z-index: 110;
position: relative;
}
.des {
position: relative;
bottom: 1564px;
background-color: #e3e3e3;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
box-shadow: 1px 5px 35px black;
text-align: center;
width: 1050px;
height:1000px;
position: relative;
z-index: -1;
margin: 0 auto;
}
.nav li {
list-style-type: none;
text-align: center;
float: left;
width: 33.3%;
position: relative;
z-index: 10;
color: black;
padding-top: 12px;
font-weight: 700;
font-size: 18px;
}
.nav {
background-color: #660000;
height: 65px;
box-shadow: 2px 2px 8px 3px black;
}
.nav a {
text-decoration: none;
color: black;
padding-top: 15px;
font-weight: 700;
color: white;
}
.container > p {
padding-top: 100px;
height: 500px;
position: relative;
bottom: 140px;
font-weight: 700;
color: #cc0000;
text-align: center;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px blue;
}
.jumbotron {
background-image: url(http://cam-consultants.net/wp-content/uploads/2014/05/servers.jpg);
background-position: -10px -60px;
z-index: -1;
height: 1700px;
}
#h1 {
position: relative;
top: -50px;
text-align: center;
font-family: 'Georgia', times, serif;
background-color: black;
color: #e3e3e3;
text-shadow: 5px 5px 5px white;
height: 150px;
width: auto;
margin: 0;
margin-left: 44px;
margin-right:44px;
position: relative;
z-index: -1;
}
#master_wrapper{overflow:hidden!important;}
#footer {
width: 2000px;
height: 200px;
background-color: black;
box-shadow: 1px 1px 12px 4px black;
position: relative;
bottom: -100px;
}
#footer1 {
height: 78px;
width: 2000px;
background-color: #660000;
position: relative;
margin-top: 24px;
}
#footer > p {
text-align: center;
font-family: 'Georgia', sans-serif;
color: white;
font-size: 18px;
padding-top: 24px;
}
#foot1 {
padding-top: 15px;
text-align: center;
}
#facebook {
position: relative;
bottom: 123px;
text-align: center;
}
.des > h2 {
padding-top: 80px;
color: #660000
}
#photo1 {
background-image: url(http://financeandcareer.com/wp-content/uploads/2013/03/webProgrammingInternship.jpg);
width: 240px;
height: 200px;
position:relative;
}
.des > img {
margin-top: 40px;
box-shadow: 01px 01px 01px 5px black;
}
When you use position: relative; the browser thinks, "Ok, I'm going to keep the element's technical location the same, but I'm going to make it appear to be in a different spot." You have the following CSS on your .des element:
.des {
position: relative;
bottom: 1564px;
}
This says, "Keep .des there, but make it appear 1564 pixels higher (further away from the original bottom)". This results in a blank space, which is the height of the element, showing up where the element technically still is, even though it appears elsewhere.
You also have the following CSS on your #footer element:
#footer {
position: relative;
bottom: -100px;
}
This makes it appear 100px lower on the page, but keeps the original spot there, and now blank.
Unless I'm mistaken, these two gaps combine for a whopping 1038px of blank space on your page. The solution? You're probably looking for position: absolute;, which doesn't keep the original spot for the element. In fact, I think that if you changed the positioning part of the CSS on .des to be
.des {
position: absolute;
top: 260px;
}
or something close to that, it would get rid of most of the gap, minus the 100px on #footer. Here's a JSFiddle, if you'd care to have a look.
The height of your background image in your CSS is set to height: 1700px; but the background image that you link to is only 1200px high. That would seem to account for the 500px difference