I'm realizing a new website. I have attached an image of how I would like it to be the base of my home page.
I ask you please what is the best method to create these three colored sections.
The first blue in which to insert the title.
The second light blue with black borders in which to include names.
And the rest light gray where I will add a table containing input boxes and below I will add the text.
I state that I have no problem formatting title, tables, texts, input boxes, etc.
I only can't get the effect of the three sections like in the image. I either tried to use div but I think it's not the best solution because I get unwanted margins.
How would you do?
Thanks :)
.div0 {
background-color: red;
margin-top: 0%;
margin-bottom: 0%;
}
.title1 {
font-family: Arial;
font-weight: normal;
color: black;
font-size: 428%;
margin-top: 0.7%;
margin-bottom: 0%;
text-align: center;
bgcolor: red;
}
.td1 {
text-align: center;
}
.div1 {
background-color: blue;
margin-top: 0%;
margin-bottom: 0%;
}
<BODY>
<div class="div0">
<H1 class="title1">
Title
</H1>
</div>
<div class="div1">
<table width="96%" align="center">
<tr class="tr1">
<td class="td1" width="1/7">
Name1
</td>
<td class="td1" width="1/7">
Name2
</td>
<td class="td1" width="1/7">
Name3
</td>
<td class="td1" width="1/7">
Name4
</td>
<td class="td1" width="1/7">
Name5
</td>
<td class="td1" width="1/7">
Name6
</td>
<td class="td1" width="1/7">
Name7
</td>
</tr>
</table>
</div>
<div class="div2">
</div>
</BODY>
A minimal markup and css for something similar to that, using css grid and flexbox, would be more or less like this:
body {
margin: 0;
font-family: sans-serif;
}
.main {
display: grid;
grid-template-rows: 120px max-content 1fr;
min-height: 100vh;
}
.header {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
color: yellow;
}
.header__title {
text-transform: uppercase;
}
.navbar {
display: flex;
background: lightblue;
border-top: 2px solid;
border-bottom: 2px solid;
}
.navbar__item {
flex-grow: 1;
padding: 6px 12px;
text-align: center;
text-transform: capitalize;
text-decoration: none;
color: black;
}
.content {
background: silver;
}
<main class="main">
<header class="header">
<h1 class="header__title">Title</h1>
</header>
<nav class="navbar">
item
item
item
item
item
item
item
</nav>
<article class="content">
</article>
</main>
I recommend you do a bit of studying about html5 semantic markup, to help you know where to use each kind of tag in their appropriate context.
It is not good practise using tables for the structure of a page. For a structure you may use display:flex or float:left. The first stylesheet removes differences between browsers and give some good readable default values for many devices. The second stylesheet is your styling (see below)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page">
<header id="header">
<h1 class="title1">Title</h1>
</header>
<nav id="nav">
<ul>
<li>Name1</li>
<li>Name2</li>
<li>Name3</li>
<li>Name4</li>
<li>Name5</li>
<li>Name6</li>
<li>Name7</li>
</ul>
</nav>
<main id="main">
<p>Your content</p>
</main>
<footer id="footer">
Footer
</footer>
</body>
</html>
And the css in file "style.css"
html, body {
height: 100%;
}
#page {
max-width: 100%;
min-height: 100%;
padding-top: 0.7%;
}
#header {
background-color: red;
}
#header h1 {
margin: 0;
text-align: center;
}
#nav {
background-color: yellow;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#nav::after {
display: block;
clear: both;
content: "";
}
#nav ul {
padding: 0;
list-style: none;
}
#nav ul li {
float: left;
width: 14.2857%;
padding: 5px 0px 7px 0px;
text-align: center;
}
#main {
min-height: 5em;
padding: 12px 16px;
background-color: silver;
}
#footer {
text-align: center;
background-color: red;
}
Related
I am attempting to align the subheadings and body text on my webpage design (attached as a JPG) according to the specific locations I have indicated. I designed the page using Photoshop and am currently using pixel measurements to position the elements within a flex container in my CSS styles. However, I also want to implement a breakpoint that will alter the webpage's styling at a certain screen size. I am unsure if using pixel measurements is the best approach for this.
/*Universal selector-reset default*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Barlow, sans-serif;
}
/*nav flex box content*/
.navbar-container {
display: flex;
justify-content: space-between;
height: 64px;
width: 1365px;
background-color: #f9eaec;
border: 2px solid red;
}
.navbar {
height: 100%;
width: 100%;
}
#websiteName {
color: black;
font-style: Extrabold;
font-size: 18px;
align-items: center;
align-content: center;
height: 100%;
}
#logo {
left: 62.3px;
top: 6px;
}
.dropdown {
top: 26px;
align-items: flex-end;
}
/*body flex box content*/
.body-container {
display: flex;
height: 410px;
width: 693px;
margin: auto;
transform: translateY(115.6px);
border: 2px solid red;
}
#name {
font-style: Extrabold;
font-size: 59px;
left: 339.8px;
top: 179px;
border: 2px solid blue;
width: 276.2px;
}
#subname {
font-style: Extrabold;
font-size: 59px;
border: 2px solid blue;
width: 276.2px;
}
.subheading {
font-style: Extrabold;
font-size: 18px;
}
#subheadingOne {
margin-left: 317px;
border: 2px solid blue;
width: 156px;
}
#subheadingTwo {
margin-left: 561px;
border: 2px solid blue;
}
#chemistryLab {
border: 2px solid blue;
top: 149px;
left: 0px;
height: 235px;
width: 287.2px;
}
#down {
padding-top: 1000px;
}
#translations {
border: 2px solid blue;
font-style: Thin;
font-size: 14px;
margin-top: 61px;
margin-left: 317px;
}
#definition {
font-style: Thin;
font-size: 14px;
border: 2px solid blue;
margin-top: 158px;
margin-left: 317px;
}
.dropdown-content {
display: none;
}
#dropdown-btn:checked~.dropdown-content {
display: flex;
flex-direction: column;
top: 23px;
left: 1329px;
align-content: space-between;
gap: 20px;
margin: 20px 0;
}
.search-box {
position: absolute;
top: 23px;
left: 1197.8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link rel="stylesheet" type="text/css" href="periodictable.css">
<title>EVERYTHING CHEMISTRY</title>
</head>
<body>
<!--nav bar flex box-->
<div class="navbar-container">
<!--navbar general styling-->
<div class="navbar">
<!--navbar building blocks-->
<h3 id='websiteName'>EVERYTHING CHEMISTRY</h3>
<img id='logo' src="icon.png" alt="Hydrogen atom">
<div class="dropdown">
<input type="checkbox" id="dropdown-btn">
<label for="dropdown-btn" class="dropbtn">
<i class="fa-solid fa-bars"></i>
</label>
<div class="dropdown-content">
Home
About
Contact
</div>
<!--search box-->
<form class="search-box" action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</div>
<!--body flex box-->
<div class="body-container">
<!--body general styling-->
<div class="body">
<div class="page-title">
<h1 id='name'>Periodic</h1>
<h1 id='subname'>Table</h1>
</div>
<img id='chemistryLab' src="Chemistry.JPG" alt="Chemist Lab">
<div class="subheading">
<h2 id='subheadingOne'>118 Elements</h2>
<h2 id='subheadingTwo'>7 Periods</h2>
</div>
<div class="body-text">
<p id='translations'>{Eng: Periodic Table; Arabic: الجدول الدوري; Afrikaans: Periodieke tabel; Mandarin: 周期表
(zhōuqī biǎo); Urdu: پیرودیک ٹیبل.}</p>
<p id='definition'>The periodic table is a tabular arrangement of the chemical elements, organized on the basis
of their atomic number, electron configurations, and chemical properties. Elements are presented in rows
(called periods) and columns (called groups or families) according to their increasing atomic number. The
elements in a group have similar chemical and physical properties, and those in a period show a progression
of properties as the atomic number increases. The table provides a useful summary of the properties of the
elements and their chemical reactivity. It is widely used in chemistry and other sciences to predict the
properties and behavior of elements and their compounds.</p>
</div>
</div>
</div>
<aside class="move-down"><i class="fa-solid fa-angle-down"></i>
</aside>
</body>
</html>
First of all if you have to align items using flex you must make the parent or container itself a flex in your case is subheading class. Which I don't think you do in your codes. Also the margin left and right in the subheadingOne and subheadingTwo is not supposed to be there since you using flex to align items.
So the codes should be like this
.subheading {
display: flex;
justify-content: space-between;
font-style: Extrabold;
font-size: 18px;
}
#subheadingOne {
border: 2px solid blue;
width: 156px;
}
#subheadingTwo {
border: 2px solid blue;
}
I created a basic, simple HTML website for our clinics, however, the table content keep falling off the grid/margin (or whatever we call them). The view for ipad, web is alright but on phone is so weird.
Please help me.
I tried many way to have this sorted but it seemed so weird. I try to redo it but same thing keep happen.
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Style image */
.img-LHG {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
.img-LCG {
padding-top: 0px;
margin-right: auto;
margin-left: auto;
width: 20%;
}
.img-me{
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
}
/* Style the body */
body {
font-family: Arial;
margin: 0;
float: inherit;
}
h1{
font-family: Arial, "Time new roman";
font-size: 22px;
text-align: center;
line-height: 40px;
}
h2 {
font-family: Arial, "Time new roman";
font-size: 18px;
text-align: center;
line-height: 20px;
}
h3 {
font-family: Arial, "Time new roman";
font-size: 12px;
text-align: center;
line-height: 20px;
}
p {
font-family: Arial;
font-size: 16px;
text-align: center;
line-height: 30px;
text-indent: 30px;
}
table{
width: 100%;
background-color: white;
}
td{
padding: 1px;
}
/* Header/logo Title */
.header {
text-align: center;
padding: -10px;
text-align: center;
background: white;
text-decoration: none;
}
/* Links Title */
.links {
text-align: center;
font-size: 22px;
font-stretch: expanded;
}
/* Style the top navigation bar */
.wrapper{
margin: 0 auto;
width: 100%;
}
nav {
width: 100%;
height:100px;
background-color: #white;
text-align: center;
}
ul {
}
ul li {
list-style: none;
display: inline-block;
line-height: 100px;
background-color: grey:
text-align: center;
padding: -10px;
text-align: center;
}
ul li a {
text-decoration: none;
font-size: 18px;
font-family: Arial;
color: #1e1e1e;
padding: 0 30px;
text-align: center;
padding: -10px;
text-align: center;
}
ul li a:hover {
color: blue;
}
/* Style the navigation bar links */
.navbar a {
font-family: Arial;
font-size: 15px;
text-align: center;
line-height: 30px;
text-align: center;
text-indent: 30px;
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
.side {
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
background-color: white;
padding: 20px;
}
.fakeimg {
background-color: lightgray;
width: 100%;
padding: 20px;
float: left;
}
/* Footer */
.footer {
padding: 15px;
text-align: center;
background: #ddd;
width: 100%;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
.wrapper{
width: 600px;
}
.header{
width: 500px;
}
.wrapper p {
width: 500px;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
#media screen and (max-width: 400px) {
.row {
flex-direction: column;
}
.wrapper{
width: 300px;
}
.header{
width: 300px;
}
.wrapper p {
width: 300px;
}
}
/* Responsive layout - when the screen is less than 200px wide, make the navigation links stack on top of each other instead of next to each other */
#media screen and (max-width: 200px) {
.row {
flex-direction: column;
}
.wrapper{
width: 100px;
}
.header{
width: 100px;
}
.wrapper p {
width: 100px;
}
.table{
size: 20px;
width: calc(100vh - 100%);
}
.table p{
font-size: 10px;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>London abc</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div> <a href="https://www.londonclinicgroup.com/index.html">
<img class="img-LHG" src="img/LHG.jpg" alt="LHG"> </div>
<h1>Welcome to London abc</h1>
<p>abc</p>
</div>
<nav>
<div class="wrapper">
<ul>
<li>About Us</li>
<li>Career</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
<div class="row">
<div class="side">
<div class="wrapper">
<h2>About Us</h2>
<p>This is a paragraph.</p>
<br>
<h2>Our Clinics:</h2>
<table class="table">
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td><p>HHC-we are a table content.</p></td>
<th><img class="img-LCG" src="img/HHC.jpg" alt="LHG"></th>
</tr>
<tr>
<td><p>HHC-we are a table content.</p></td>
<th><img class="img-LCG" src="img/LHW.jpg" alt="LHG"></th>
</tr>
<tr>
<td><p>HHC-we are a table content.</p></td>
<th><img class="img-LCG" src="img/LHH.jpg" alt="LHG"></th>
</tr>
<tr>
<td><p>HHC-we are a table content.</p></td>
<th><img class="img-LCG" src="img/OPL.jpg" alt="LHG"></th>
</tr>
</table>
<br>
<h2>Our Goal</h2>
<p> Our clinicians are at the core of our business and we work tirelessly to forge a long term clinical environment.</p>
<br>
<div class="footer">
<h3>Phone 020 xxx | abc</h3>
<h3>©2020 Londonabc</h3>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>London abc</title>
</head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#500&display=swap" rel="stylesheet">
<style>
* {
text-align: center;
text-decoration: none;
list-style-type: none;
margin: 0;
font-family: "Roboto", serif;
box-sizing: border-box;
padding: 0;
}
.header {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
flex-direction: column;
background-color: white;
}
.header img {
width: 60px;
height: auto;
max-width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}
.header>*,
.wrapper>* {
padding: 8px;
color: black;
}
.nav-links-wrapper {
width: 100%;
height: auto;
padding: 55px;
background-color: #f1f1f1;
}
ul {
display: flex;
align-items: center;
align-content: center;
justify-content: space-evenly;
}
.content-wrapper>* {
padding: 8px;
}
.table {
width: 100%;
}
.table-wrapper {
margin: 15px;
background: #f1f1f1;
}
.img-LCG {
width: 40px;
height: auto;
max-width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
}
.footer {
background-color: #ddd;
}
.footer>* {
padding: 8px;
}
</style>
<body>
<div class="header">
<div>
<a href="https://www.londonclinicgroup.com/index.html">
<img class="img-LHG" src="https://dummyimage.com/600x400/000/fff" alt="LHG"></a>
</div>
<h1>Welcome to London abc</h1>
<p>ABC</p>
</div>
<nav class="nav-links-wrapper">
<div class="wrapper">
<ul>
<li>About Us</li>
<li>Career</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
<div class="row">
<div class="side">
<div class="wrapper">
<div class="content-wrapper">
<h2>About Us</h2>
<p>This is a paragraph.</p>
</div>
<div class="table-wrapper">
<h2>Our Clinics:</h2>
<table class="table">
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td>
<p>HHC-we are a table content.</p>
</td>
<th><img class="img-LCG" src="https://dummyimage.com/600x400/000/fff" alt="LHG"></th>
</tr>
<tr>
<td>
<p>HHC-we are a table content.</p>
</td>
<th><img class="img-LCG" src="https://dummyimage.com/600x400/000/fff" alt="LHG"></th>
</tr>
<tr>
<td>
<p>HHC-we are a table content.</p>
</td>
<th><img class="img-LCG" src="https://dummyimage.com/600x400/000/fff" alt="LHG"></th>
</tr>
<tr>
<td>
<p>HHC-we are a table content.</p>
</td>
<th><img class="img-LCG" src="https://dummyimage.com/600x400/000/fff" alt="LHG"></th>
</tr>
</table>
</div>
<h2>Our Goal</h2>
<p> Our clinicians are at the core of our business and we work tirelessly to forge a long term clinical environment.
</p>
<br>
<div class="footer">
<h3>Phone 020 xxx | abc</h3>
<h3>©2020 Londonabc</h3>
</div>
</body>
</html>
This is what I'm trying to make
There are a couple reasons on why I'm having trouble making this, I can't put all of these tables in one big table since that will make the main box able to go through all the obstacles.
Here's the code for a simple level to show what I'm trying to do exactly:
Html:
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<title> Level 1 </title>
<link rel="stylesheet" type="text/css" href="Mohanned_Project.css" />
<style>
body {
background: blue;
background-size: cover;
}
</style>
</head>
<body>
<table>
<tr>
<th>
<img src="Obstacle_1.png" height="285px" width="1400px">
<img src="Box.png" id="Goat" align="left">
<img src="Win.png" align="right">
</th>
</tr>
</table>
<table style="padding: 0px 1300px 1300px 0px;">
<tr>
<th>
<img src="Obstacle_1.png" height="285px" width="1400px">
</th>
</tr>
</table>
</body>
</html>
Css:
#Goat {
position: sticky;
top: 300px;
left: 10px;
right: 10px;
}
#Goat_2 {
position: sticky;
top: 10px;
left: 10px;
right: 10px;
}
.btn{
color: #fff;
border: none;
margin: 5px;
padding: 10px 8px;
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
border-radius: 10px;
transition: 0.4s;
transition-property: box-shadow;
}
.btn-primary{
font-size: 31px;
}
and heres the result: When you move the screen, the red box sticks to the borders and moves
I would really apprecciate advice on how do I set up the 2nd level since I've been trying for an hour and can't seem to figure it out
Stop using tables. Use divs. and flexbox.
.cafeteria {
display: flex;
flex-direction: column;
}
.first-row {}
.table-row {
display: flex;
}
.table {
width: 40px;
height: 200px;
border: 1px solid black;
background-color: brown;
}
.small-table {
align-self: flex-end;
width: 40px;
height: 100px;
background-color: brown;
}
.small-table.blue {
background-color: blue;
}
.small-table.green {
background-color: green;
}
<div class="cafeteria">
<div class="first-row">
<div class="small-table blue"></div>
</div>
<div class="table-row">
<div class="table"></div>
<div class="small-table"></div>
<div class="table"></div>
<div class="small-table"></div>
<div class="table"></div>
<div class="small-table"></div>
<div class="table"></div>
<div class="small-table green"></div>
<div class="table">
</div>
</div>
</div>
My CSS style sheet header is not working. It works best in internal stylesheet or embedded stylesheet, but did not work when its code in external stylesheet. Only the header class did not wok but other code working best.
.header1{
background-color: brown ;
padding: 20px;
background-image: url("pics/saqib.png");
}
#pic{
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float:left;
background-color: #333;
border-top-left-radius: 35%;
border-top-right-radius: 35%;
margin-left:2px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: green;
}
.navbar{
padding: 20px;
margin-top: 150px;
}
/* End nav bar */
.skin{
background-color: lightblue;
}
.table {
margin-top: 0px;
width: 100%;
}
.table .sidebar{
border-right: 2px solid black;
width: 20%;
}
.footer{
background-color: blue;
padding: 20px;
padding: 100px;
}
.left{
float: left;
display: block;
width: 40%;
color: gray;
border-right: 2px solid white;
border-color: gray;
padding-right: 70px;
}
.right{
float: right;
display: block;
width: 40%;
color: gray;
}
pre a{
font-family: helvatic, sanshrif;
font-size: 15px;
color: white;
}
pre a:hover{
color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="mypage.css"/>
<meta charset="UTF-8"/>
</head>
<body>
<header class="header">
<div id="pic"> <img src="pics/saqib.png"/></div>
<div class="navbar">
<ul>
<li>Home</li>
<li>Software</li>
<li>Contact Us</li>
<li>About us</li>
</ul>
</div>
</header>
<div class="skin">
<table class="table">
<tr>
<td class="sidebar">
This is sidebar
</td>
<td style="padding: 50px;">
<h1>My First Website</h1>
<p> A collection of all steps to complete a process in known as Transaction. DBMS should support transaction. It must ensure that all steps in a transaction are executed successfully or none of them is executed. It facility ensures that the database is always in consistent state even if a transaction fails due to some problem such as system crash or power failure etc.</p>
</td>
</tr>
<tr>
<th colspan="2">
<footer class="footer">
<div class="left">
<pre>Home | Software | Contact Us | About us</pre>
</div>
<div class="right">
The most important function of DBMS
is data processing. It includes creation,
storage and arrangements of data in database.
</div>
</footer>
</th>
</tr>
</table>
</div>
<body>
</html>
Your stylesheet defines a .header1 class but your HTML is looking for header. Make those the same.
You can change in either one place to make it work:
In HTML:
<header class="header">
to:
<header class="header1">
or in CSS:
.header1 {
background-color: brown;
padding: 20px;
background-image: url("pics/saqib.png");
}
to:
.header {
background-color: brown;
padding: 20px;
background-image: url("pics/saqib.png");
}
It should be:
.header{
background-color: brown ;
padding: 20px;
background-image: url("pics/saqib.png");
}
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