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");
}
Related
I am trying to get a White Border Around Everything present in the <main> tag, but I have not had any luck. It will only to around the <nav> section for some reason. Help?
header{
background-color: #030303;
color:#ffffff;
height: 60px;
text-align: center;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo{
float: right;
height: 50px;
}
header h1{
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox{
float: left;
height: 750px;
width: 15%;
float: left;
background-color: aqua;
text-align: center;
}
#homecontent{
height: 750px;
width: 84.3%;
float: left;
background-color: aquamarine;
border: red solid;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
}
nav li{
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
nav li:hover{
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}
nav ul{
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer{
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1{
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html{
background-color: #030303;
}
a{
color: white;
text-decoration: none;
}
a:hover{
color: black;
}
main{
border: white solid;
order-radius: 10px;
}
#wrapper{
background-color: #030303;
}
#schedulebox{
border: red solid;
}
#dragonpic{
width: 1600px;
height: auto;
}
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>D&D WCTC Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main>
<nav><ul><li>Home</li> <li><a>Page2</a></li> <li><a>Page3</a></li></ul></nav>
<div id="schedulebox">
<h1>Schedule</h1>
<p>We will usually have games twice every week. However, we will switch games every week so please look at the schedule for the one you wish to join.</p>
<h2>Campaigns in Progress:</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h2>Upcoming Campaigns</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h3>We run games at 5pm CST to 8pm CST on Wednesdays and Fridays 5pm CST to 8pm CST</h3>
</div>
<div id="homecontent">
<img src="assets/dragon.png" id="dragonpic">
<h2>Who are we?</h2>
<h3>We are a local Dungeons and Dragons club at Waukesha County Technical College. We host multiple games occuring at the same time with as many as 6 players at once. Each party's actions effect the in game universe that other parties will have to deal with. We are always welcoming new members and are also looking for people looking to become Dungeon Masters!</h3>
<h2>Looking to Join?</h2>
<h3>Head over to our join page to learn how to get started!</h3>
</div>
</main>
<footer>
<div id="footercontent">
<small><i>Copyright © 2020 Company</i></small>
</div>
</footer>
</div>
</body>
</html>
I am just trying to get a white border around the main website content and not the <nav> or <header> section. I've tried having a separate division in the code for the content, but to no avail.
You need to have clearfix hack to clear floats. Refer to w3schools tutorial for more info.
<main class="clearfix">
.clearfix::after {
content: "";
clear: both;
display: table;
}
header {
background-color: #030303;
color: #ffffff;
height: 60px;
text-align: center;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo {
float: right;
height: 50px;
}
header h1 {
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox {
float: left;
height: 750px;
width: 15%;
float: left;
background-color: aqua;
text-align: center;
}
#homecontent {
height: 750px;
width: 84.3%;
float: left;
background-color: aquamarine;
border: red solid;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
}
nav li {
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
nav li:hover {
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}
nav ul {
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer {
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1 {
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html {
background-color: #030303;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: black;
}
main {
border: thick solid white;
border-radius: 10px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#wrapper {
background-color: #030303;
}
#schedulebox {
border: red solid;
}
#dragonpic {
width: 1600px;
height: auto;
}
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>D&D WCTC Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main class="clearfix">
<nav>
<ul>
<li>Home</li>
<li><a>Page2</a></li>
<li><a>Page3</a></li>
</ul>
</nav>
<div id="schedulebox">
<h1>Schedule</h1>
<p>We will usually have games twice every week. However, we will switch games every week so please look at the schedule for the one you wish to join.</p>
<h2>Campaigns in Progress:</h2>
<ul>
<li>Plague of The Gods</li>
<li>Inheritence of Felwinter</li>
</ul>
<h2>Upcoming Campaigns</h2>
<ul>
<li>Plague of The Gods</li>
<li>Inheritence of Felwinter</li>
</ul>
<h3>We run games at 5pm CST to 8pm CST on Wednesdays and Fridays 5pm CST to 8pm CST</h3>
</div>
<div id="homecontent">
<img src="assets/dragon.png" id="dragonpic">
<h2>Who are we?</h2>
<h3>We are a local Dungeons and Dragons club at Waukesha County Technical College. We host multiple games occuring at the same time with as many as 6 players at once. Each party's actions effect the in game universe that other parties will have to
deal with. We are always welcoming new members and are also looking for people looking to become Dungeon Masters!</h3>
<h2>Looking to Join?</h2>
<h3>Head over to our join page to learn how to get started!</h3>
</div>
</main>
<footer>
<div id="footercontent">
<small><i>Copyright © 2020 Company</i></small>
</div>
</footer>
</div>
</body>
</html>
make a div under <div id="wrapper"></div> then give padding around 20px to the wrapper div , and then give border value to the new div you will make under the div with id wrapper
When I removed the float:left, it worked for me like this.
#schedulebox{
height: 750px;
width: 15%;
background-color: aqua;
text-align: center;
}
#homecontent{
height: 750px;
width: 84.3%;
background-color: aquamarine;
border: red solid;
}
Then I added border to wrapper
#wrapper{
border:1vw solid white;
background-color: #030303;
}
This worked for me!
Since there are floated elements in main, you need to add overflow: auto; to main to include all floated elements in it.
header{
background-color: #030303;
color:#ffffff;
height: 60px;
text-align: center;
padding-top: 30px;
padding-left: 3em;
background-image: url("assets/dndlogo.jpg");
background-repeat: no-repeat;
background-position: right;
}
#dndlogo{
float: right;
height: 50px;
}
header h1{
font-family: Georgia, "Times New Roman", Serif;
margin-top: 0px;
font-size: 3em;
letter-spacing: 0.25em;
}
#schedulebox{
float: left;
height: 750px;
width: 15%;
float: left;
background-color: aqua;
text-align: center;
}
#homecontent{
height: 750px;
width: 84.3%;
float: left;
background-color: aquamarine;
border: red solid;
}
nav {
overflow: hidden;
background-color: #030303;
font-family: Arial;
float: top;
margin: 0;
padding: 0;
}
nav li{
float: left;
font-size: 20px;
color: black;
text-align: center;
padding: 15px 20px;
text-decoration: none;
list-style-type: none;
color: white;
height: 15px;
}
nav li:hover{
background-color: white;
border-radius: 15px;
transition: 0.5s;
color: black;
}
nav ul{
margin: 0;
padding-bottom: 10px;
padding-left: 0;
}
footer{
background-color: #030303;
float: bottom;
color: white;
}
#schedulebox h1{
border-bottom: solid;
padding-top: 0;
margin: 0;
}
html{
background-color: #030303;
}
a{
color: white;
text-decoration: none;
}
a:hover{
color: black;
}
main{
border: white solid;
border-radius: 10px;
overflow: auto;
}
#wrapper{
background-color: #030303;
}
#schedulebox{
border: red solid;
}
#dragonpic{
width: 1600px;
height: auto;
}
<html lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<head>
<meta charset="UTF-8">
<title>D&D WCTC Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Dungeons and Dragons: WCTC</h1>
</header>
<main>
<nav><ul><li>Home</li> <li><a>Page2</a></li> <li><a>Page3</a></li></ul></nav>
<div id="schedulebox">
<h1>Schedule</h1>
<p>We will usually have games twice every week. However, we will switch games every week so please look at the schedule for the one you wish to join.</p>
<h2>Campaigns in Progress:</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h2>Upcoming Campaigns</h2>
<ul><li>Plague of The Gods</li><li>Inheritence of Felwinter</li></ul>
<h3>We run games at 5pm CST to 8pm CST on Wednesdays and Fridays 5pm CST to 8pm CST</h3>
</div>
<div id="homecontent">
<img src="assets/dragon.png" id="dragonpic">
<h2>Who are we?</h2>
<h3>We are a local Dungeons and Dragons club at Waukesha County Technical College. We host multiple games occuring at the same time with as many as 6 players at once. Each party's actions effect the in game universe that other parties will have to deal with. We are always welcoming new members and are also looking for people looking to become Dungeon Masters!</h3>
<h2>Looking to Join?</h2>
<h3>Head over to our join page to learn how to get started!</h3>
</div>
</main>
<footer>
<div id="footercontent">
<small><i>Copyright © 2020 Company</i></small>
</div>
</footer>
</div>
</body>
</html>
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;
}
I'm fairly new to all this but I've done it quite a few times now and should probably be able to find the error. But i can not figure out why the css document won't import to my html. I search around first and went to W3Schools.com to read how to use external documents however i can not find why it won't work. Sorry if the answer is painfully obvious but here is my code. Thanks in advance!
(Using NotePad++ if that matters at all)
<html>
<head>
<script type="text/javascript" src="DeveloperLogMain.js"></script>
<link type="text/css" rel="spreadsheet" href="DeveloperLogMain.css">
</head>
<body id='body'>
<div id='head'>
<h1 id='title'><b>Developing Log</b></h1>
</div>
<br>
<br>
<br>
<br>
<div id='navbar'>
<ul>
<li><a href='#'><b>Home</b></a></li>
<li><a href='#'><b>HTML</b></a></li>
<li><a href='#'><b>CSS</b></a></li>
<li><a href='#'><b>JavaScript</b></a></li>
</ul>
</div>
<div id='footcontainer'>
<footer id='footer'><b>End Of Log</b></footer>
</div>
</body>
</html>
the css document is called "DeveloperLogMain.css".
cointaining
#head {
position: fixed;
width: 100%;
top: 0;
}
#title {
background-color: DarkRed;
color: white;
text-align: center;
border-bottom: solid;
border-color: black;
}
#footcontainer {
position: fixed;
bottom: 0;
width: 100%;
}
#navbar {
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 90px;
background-color: grey;
position: fixed;
}
li a {
display: block;
color: black;
border: 2px solid;
border-color: DarkRed;
text-align: center;
}
li a:hover {
background-color: black;
color: white;
}
#footer {
background-color: DarkRed;
text-align: center;
height: 25px;
color: white;
}
rel should be equal to stylesheet not spreadsheet:
<link type="text/css" rel="stylesheet " href="DeveloperLogMain.css">
Working on a page for my website and I'm trying to set up a series of profiles side-by-side.
The idea is that the images of the profiles will be external links, but I would like each small block profile to be side by side.
I'm fairly uncertain of how to do this, ass I thought fixing the padding and adding inline to the blocks themselves would stack them side by side. Help?
.Head, .Welcome {
padding-left: 300px;
margin-right: 150px;
}
.body {
padding-left: 300px;
margin-right: 150px;
}
.img.center {
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
#pagename {
text-align: center;
font-family: "Arial"
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000
color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 50;
}
/*GAR PROFILE*/
.Gar{
padding-left: 300px;
}
.gar-block1{
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
}
.gar-block2{
background-color: #d9d9d9;
color: black;
font-family:"Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
}
/*MAYU PROFILE*/
.Mayu{
padding-left: 750px;
display: in-line;
}
.mayu-block1{
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
display: in-line;
}
.mayu-block2{
background-color: #d9d9d9;
color: black;
font-family:"Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
display: in-line;
}
<!doctype html>
<html>
<!--HEAD INFORMATION-->
<head>
<link rel="stylesheet" type="text/css" href="CHARACTER_PAGE.css">
<title>FFXIV RP Database</title>
<style>
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
</style>
</head>
<!--END: HEAD INFORMATION-->
<body>
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact<li>
</ul>
</div>
<!--END: NAVIGATION BAR-->
<!--HEADER-->
<div class="head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--END: HEADER-->
<!--BELOW HEAD CONTENT-->
<div class="Characters">
<p>
<h2 id="pagename">Characters</h2>
<p>
</div>
<!--CHARACTER PROFILE: GAR-->
<div class="Gar">
<p>
<img id="garprofile" src="Gar.png" height="290px">
<div class="gar-block1"><h3>"Gar"</h3></div>
<div class="gar-block2">
<p><b>Age:</b> 30</p>
<p><b>Height:</b> 5'11"</p>
<p><b>Job:</b> Dark Knight</p>
<p><b>Role:</b> Tank</p>
<p><b>Family:</b> Unknown mother and father (estranged)</p>
<p><b>Significant Other:</b> Mayumi Mori</p>
</p>
<!--CHARACTER PROFILE: MAYU-->
<div class="Mayu">
<p>
<aside>
<img id="garprofile" src="Mayumi.png" height="290px">
<div class="mayu-block1"><h3>Mayumi Mori</h3></div>
<div class="mayu-block2">
<p><b>Age:</b> 23</p>
<p><b>Height:</b> 4'8"</p>
<p><b>Job:</b> Astrologian</p>
<p><b>Role:</b> Healer</p>
<p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p>
<p><b>Significant Other:</b> Gar</p>
</aside>
</p>
</body>
</html>
I'm not sure if i can understand you well here but did you mean that you want the profile to be centered?
If this is the case, i already made it for you.
Please also check your html code, there are lots of missing </> close tag
I also edit some of your codes, please check the codes below both HTML and CSS.
Since .Gar and .Mayu are same layout, i made the css layout of it in one class profile display both container inline-block
Hope it helps.
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
.Head, .Welcome {
padding-left: 300px;
margin-right: 150px;
}
.body {
padding-left: 300px;
margin-right: 150px;
}
.img .center {
display: block;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
#pagename {
text-align: center;
font-family: "Arial"
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000 color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 50;
}
/*GAR PROFILE*/
.profile {
margin-left: 300px;
display: inline-block;
margin-bottom: 100px;
}
.block1 {
background-color: #990000;
color: white;
font-family: "Arial";
text-decoration: none;
text-align: center;
width: 250px;
padding: 20px;
}
.block2 {
background-color: #d9d9d9;
color: black;
font-family: "Arial";
text-decoration: none;
width: 250px;
height: 300px;
padding: 20px;
}
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact</li>
</ul>
</div>
<!--END: NAVIGATION BAR-->
<!--HEADER-->
<div class="head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--END: HEADER-->
<!--BELOW HEAD CONTENT-->
<div class="Characters">
<p>
<h2 id="pagename">Characters</h2>
</p>
</div>
<!--CHARACTER PROFILE: GAR-->
<div class="profile Gar">
<p>
<img id="garprofile" src="Gar.png" height="290px">
<div class="block1">
<h3>"Gar"</h3>
</div>
<div class="block2">
<p><b>Age:</b> 30</p>
<p><b>Height:</b> 5'11"</p>
<p><b>Job:</b> Dark Knight</p>
<p><b>Role:</b> Tank</p>
<p><b>Family:</b> Unknown mother and father (estranged)</p>
<p><b>Significant Other:</b> Mayumi Mori</p>
</div>
</p>
</div>
<!--CHARACTER PROFILE: MAYU-->
<div class="profile Mayu">
<p>
<aside>
<img id="garprofile" src="Mayumi.png" height="290px">
<div class="block1">
<h3>Mayumi Mori</h3>
</div>
<div class="block2">
<p><b>Age:</b> 23</p>
<p><b>Height:</b> 4'8"</p>
<p><b>Job:</b> Astrologian</p>
<p><b>Role:</b> Healer</p>
<p><b>Family:</b> Junko Mori (Dead) and Khaguran (Unknown)</p>
<p><b>Significant Other:</b> Gar</p>
</div>
</aside>
</p>
</div>
Use float:left; in your css style sheets.
#a{
float:left;
}
#b{
float:left;
}
this two divs whith id : a , b will be side by side but you need to use clear:both; in next div;Remember about closing tags .I hope it helps
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