I have 2 monitors. The one is 24" and the other is my laptop's monitor (12.5"). A "div" (red box) in my web application can be shown on big monitor full height, but just part of it on my small monitor.
My question is why it displays differently on different size of monitor? Because all height settings in my css are percentage and I never used absolute number for the height. Why does the red box (div id is "scrollTable") show differently on different size of monitor? Because this issue, the dynamic table in this "div" cannot be shown completely even if the div is scrolled to the bottom. The row number of the dynamic table depends on Users' search result, maybe only 1 or 2 rows or maybe more than 30 or 40 rows sometimes. Please see the css and html below. Thanks for your help.
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
header {
height: 6%;
margin: 0px;
padding: 0.2px;
padding-left: 6px;
text-align: left;
vertical-align: central;
background: #8a1841;
color: papayawhip;
display: block;
}
#nsmap {
float: left;
left: 0;
width: 80%;
bottom: 0;
height: 94%;
}
#searchPanel {
padding: 3px;
float: right;
height: 94%;
width: 20%
}
#HomeButton {
position: absolute;
top: 135px;
left: 20px;
z-index: 50;
}
label {
font-size: 10px;
font-weight: bold;
text-align: center;
}
table.imagetable {}
table.imagetable tr td {
border: 1px solid #000000;
text-align: center;
padding: 8px;
font-size: 10px;
}
table.imagetable th {
border: 1px solid #000000;
text-align: center;
padding: 8px;
font-size: 10px;
}
table.imagetable tr:nth-child(even) {
background-color: #92c8da;
}
table.imagetable tbody tr:hover {
background-color: #EBECCD;
}
.cboWidth {
border: 1px solid #000000;
width: 100%;
}
.ccTable1 {
height: 77%;
}
#scrollTable {
border: 2px solid red;
max-height: 80%;
min-height: 80%;
width: 100%;
overflow-y: auto;
overflow-x: auto;
}
#StreetKey {
width: 100%;
}
.thirty {
width: 30%;
}
.twenty {
width: 20%;
}
.fifteen {
width: 15%;
}
thead {
visibility: visible;
}
.dijitButtonNode {
width: 160px;
height: 25px;
text-align: left;
font-size: 16px;
border: hidden;
}
.dijitButtonNode:hover {
font-weight: bold;
}
.center {
display: block;
margin-left: 52%;
width: 45%;
}
#tbPrint {
border: 0px;
padding: 8px;
min-width: 350px;
max-width: 350px;
}
.tdPrint {
border: 0px;
text-align: left;
padding: 0px;
font-size: 10px;
max-width: 140px;
min-width: 140px;
}
#trPrint {
background-color: white;
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title> Online Map Book </title>
<header>
<h4>Online Map Guide Book</h4>
</header>
<div id="nsmap" style="background-color:whitesmoke">
</div>
<div id="searchPanel">
<form action="/action_page.php">
<label style="font-weight:bold;font-size:12.5px">Select Electoral District:</label> <br>
<select id="EDNum" name="EDNum" class="cboWidth"></select>
<br><br>
<label style="font-weight:bold;font-size:12.5px">
Select Polling Division: </label><br>
<select id="PDNum" name="PDNum" style="border:1px solid #000000"></select>
<br><br>
<div class="dropdown" style="width:100px">
<table id="tbPrint">
<tr>
<td><label style="font-size:12.5px">Print map or street key:</label></td>
</tr>
<tr id="trPrint">
<td class="tdPrint">
<button id="btnPrintGroup" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" disabled>
Print
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<div id="btnPrint"></div>
</li>
<li>
<div>
<div class="dijitButtonNode" id="btnStKey" onclick="printStKey()" style="margin-left:10px">
Street Key
</div>
</div>
</li>
</ul>
</td>
</tr>
</table>
</div>
</form>
<hr>
<div id="StreetKey" class="ccTable1">
<div style="font-size:14px; font-weight:bold"> Street Key </div>
<div id="scrollTable">
<table id="streetTable" class="imagetable " style="cursor: pointer;">
<colgroup>
<col class="thirty" />
<col class="twenty" />
<col class="fifteen" />
<col class="fifteen" />
<col class="twenty" />
</colgroup>
<thead>
<tr>
<th>Street</th>
<th>Town</th>
<th>Low No.</th>
<th>High No.</th>
<th>Order</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>
</html>
When you use 100% it means that you take the whole heigth os the div's parent. If you want to show your div always in the viewport, try using this units : vh
They mean: viewport height, so if you set the height:100vh, the div will always be fit to the viewport no matter what screen. :)
https://css-tricks.com/fun-viewport-units/
Related
I tried to create my first E-mail template, when I open it by Live Server it looks good, but when I send it via mail with putsmail it looks very crappy and broken.
I tried to upload pictures online but it doesn't change anything.
On code snippet it also looks good so I think that code is fine?
I have run out of ideas, is there anyone who can help me?
Mail preview
-
Live Server preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VANS E-Mail Template</title>
<style type="text/css">
body {
margin: 0;
background-color: #cccccc;
}
table {
border-spacing: 0;
}
td {
padding: 0;
}
img {
border: 0;
}
.wrapper {
width: 100%;
table-layout: fixed;
background-color: #cccccc;
padding-bottom: 40px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.main {
background-color: #ffffff;
margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;
color: #4a4a4a;
}
.two-columns {
text-align: center;
font-size: 0;
padding: 40px 0;
}
.two-columns .column {
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: top;
text-align: center;
font-size: 18px;
padding-bottom: 40px;
}
.button {
background-color: #C9192E;
color: #ffffff;
text-decoration: none;
padding: 15px 20px;
border-radius: 2px;
}
.banner {
max-width: 600px;
}
.container {
position: relative;
text-align: center;
color: white;
margin-top: 0px;
}
.container2 {
position: relative;
text-align: center;
margin-top: -60px;
display: block;
}
.background {
height: 70px;
width: 600px;
margin-top: 0px;
background-color: #1C1C1C;
}
.background2 {
height: 70px;
width: 600px;
background-color: #1C1C1C;
background: #1C1C1C;
background-size: 100%;
}
.background-text {
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: white;
}
.background-text2 {
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
color: white;
white-space: nowrap;
}
.first {
margin-left: 15px;
margin-top: 15px;
z-index: 9;
display: block;
position: absolute;
}
.first-text {
font-size: 32px;
padding: 0;
margin-top: -30px;
margin-left: 45px;
color: #272727;
}
.first2-text {
font-size: 22px;
padding: 0;
margin-top: -30px;
margin-left: 50px;
color: #272727;
}
.second {
margin-left: 315px;
margin-top: 40px;
display: block;
position: absolute;
}
.second-text {
font-size: 32px;
padding: -300px;
margin-left: 380px;
line-height: 0;
color: #272727;
}
.second2-text {
font-size: 22px;
padding: -300px;
margin-left: 380px;
line-height: 0;
color: #272727;
}
.third {
margin-top: 290px;
margin-left: 15px;
}
.third-text {
font-size: 32px;
padding: -300px;
margin-top: -275px;
margin-left: 340px;
line-height: 0;
color: #272727;
}
.third2-text {
font-size: 22px;
padding: -300px;
margin-left: 340px;
line-height: 0;
background: "#D0CFC8";
background-size: "100%";
color: #272727;
}
.see-more {
margin-left: 380px;
margin-top: 80px;
font-size: 26px;
}
.background-rect {
background: #D0CFC8;
height: 150px;
width: 600px;
}
.icons {
position: relative;
display: block;
margin-top: -58px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<center class="wrapper">
<table class="main" width="100%">
<!-- LOGO SECTION -->
<!-- BANNER IMAGE !! -->
<tr>
<td>
<img src="https://i.ibb.co/MPsmk9q/banner.png" alt="Banner" class="banner">
</td>
</tr>
<!-- BACKGROUND COLOR TEXT !!-->
<tr>
<td class="container">
<div class="background"></div>
SHOP CLASSICS
</td>
</td>
</tr>
<!-- TWO COLUMN SECTION -->
<tr>
<td>
<table width="100%">
<tr>
<td class="two-columns" style="background-color: #D8D7D3; padding-bottom: 0;">
<table class="column">
<tr>
<td>
<img src="https://i.ibb.co/YfSffKs/women.webp" alt="Women" title="Women" width="300" style="max-width: 300px; padding-bottom: 60px; padding-top: 30px;">
BUY WOMENS
</td>
</tr>
</table>
<table class="column">
<tr>
<td class="column">
<a href="#"><img src="https://i.ibb.co/bvHdthf/men.webp" alt="Men" title="Men" width="300" style="max-width: 300px; padding-bottom: 60px; padding-top: 30px; -webkit-transform: scaleX(-1);
transform: scaleX(-1);"></a>
</a>
BUY MEN
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="container">
<div class="background"></div>
OUR LATEST COLLECTION
</td>
</tr>
<!-- FOOTER SECTION -->
<tr style="background: #D0CFC8; background-size: 100%;">
<td>
<div class="first">
<img src="https://i.ibb.co/YQ09v1N/Eco.webp" alt="Eco" style="max-width: 350px">
<div class="first-text">
<p>PAISLEY PATTERN</p>
</div>
<div class="first2-text">
<p>Embrace bohemian style.</p>
</div>
</div>
<div class="second-text">
<p>ECO</p>
<p>POSITIVITY</p>
<p>COLLECTION</p>
</div>
<div class="second2-text">
<p>Make a difference,</p>
<p>be the change.</p>
</div>
<div class="second">
<img src="https://i.ibb.co/4tVLfzn/paisley.webp" alt="Paisley" style="max-width: 270px;">
</div>
<div class="third">
<img src="https://i.ibb.co/CVw2t2R/Spring-HUes.webp" alt="SpringHues" style="max-width: 310px;">
</div>
<div class="third-text">
<p>SPRING HUES</p>
</div>
<div class="third2-text">
<p>Colours That Celebrate</p>
<p>Spring.</p>
</div>
<div class="see-more">
SEE MORE
</div>
<div class="background-rect"></div>
</td>
</tr>
<!-- SOCIAL MEDIA ICONS -->
<div>
<td class="container2">
<div class="background2"></div>
<div class="icons">
<img src="https://i.ibb.co/bQgqb1L/icons.png" alt="">
</div>
</td>
</div>
<!-- BROWN BORDER -->
</table>
</center>
</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>
I am having some issues with sizing images. I have images that I have created with photoshop. They are all PNG's and have cropped them to remove as much white space as possible, but one image is moved to the right a bit. Since I'm using a table, I can't add padding or margin to move it to the left. I am using the object-fit method to fit the image to the right size and fit the table, but it doesn't seem to fit the way I want it. Below is the image of what I mean:
Code:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>[KINGDOMS OF CORELIA]</title>
<link rel="icon" href="favicon.ico">
<style>
* {
box-sizing: border-box;
}
body {
text-align: center;
font-family: sans-serif;
}
a {
color: blue;
text-decoration: none;
}
hr {
width: 50%;
}
nav {
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.nav {
float: left;
margin-top: 5px;
display: block;
text-align: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.right {
float: right;
}
button {
font-family: inherit;
font-size: 80%;
padding: .5em 1em;
color: #444;
color: rgba(0,0,0,.8);
border: 1px solid #999;
border: none transparent;
background-color: #e6e6e6;
text-decoration: none;
border-radius: 2px;
cursor: pointer;
}
button:hover {
background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
}
.fade {
margin: 50px;
padding: 50px;
opacity: 1;
}
img {
width: 100%;
height: 100%;
}
.slideshow {
margin: 50px auto;
position: relative;
width: 700px;
height: 400px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
img {
}
.guard_armor {
width: 20%;
height: 50%;
object-fit: contain;
}
.guard_weapons {
width: 100%;
height: 100%;
object-fit: contain;
}
.guard_items {
width: 100%;
height: 100%;
object-fit: contain;
}
.archer_armor {
width: 60%;
height: 90%;
object-fit: contain;
}
.archer_weapons {
width: 150%;
height: 150%;
object-fit: contain;
}
table {
border-collapse: collapse;
}
table, th, td {
border: 0.5px solid black;
}
th {
text-align: left;
}
th, td {
padding: 15px;
}
tr:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body style="margin: 0;">
<nav>
<ul>
<li><a class="nav" href="#">CORELIA</a></li>
<li><a class="nav" href="staff.html">Staff</a></li>
<li><a class="nav" href="endran.net/network.html">Network</a></li>
<li><a class="nav" href="support.html">Support</a></li>
<li><a class="right" href="login.html" target="_blank">
<button type="button">Login</button>
</a></li>
<li><a class="right" href="signup.html" target="_blank">
<button type="button">Sign Up</button>
</a></li>
</ul>
</nav>
<h1>Welcome to the Kingdoms of Corelia! | play.corelia.online:25568</h1>
<h2>[KITPVP | FACTIONS]</h2>
<div class="slideshow">
<div>
<img src="images/spawn.jpg">
</div>
<div>
<img src="images/fight.jpg">
</div>
<div
<img src="images/arena.jpg">
</div>
</div>
<br />
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div id="content">
<div id="history" class="fade">
<h2>The History of the Kingdoms</h2>
<hr />
<p>The Kingdoms of Corelia started with a small towny server called Endran. Xp10d3 (the owner) was (and still is) a Moderator on the server and ended up creating a whitelisted Vanilla server originally called Erath. The server was relatively unsuccessful, and the world files ended up getting corrupted. Xp10d3 decided to create a KitPvP server after making a KitPvP plugin. He added a few more gamemodes before fully releasing Corelia until it is now what it looks like today.</p>
</div>
<div id="about" class="fade">
<h2>About the Kingdoms</h2>
<hr />
<p>On the website (it's still a work in progress) you can chat with other people in the chat. All you have to do is signup and than login to chat with other people! Other than that, we don't have much else. Sorry for that.</p>
</div>
<div>
<h2 class="fade">KITS</h2>
<table style="width:100%">
<tr>
<th>Kit Name</th>
<th>Armor</th>
<th>Weapons</th>
<th>Items</th>
<th>Tier</th>
</tr>
<tr>
<td>Guard</td>
<td><img src="images/kits/guard_armor.png" class="guard_armor"></td>
<td><img src="images/kits/guard_weapons.png" class="guard_weapons"></td>
<td><img src="images/kits/cooked_beef.png" class="guard_items"></td>
<td>1</td>
</tr>
<tr>
<td>Archer</td>
<td><img src="images/kits/archer_armor.png" class="archer_armor"></td>
<td><img src="images/kits/archer_weapons.png" class="archer_weapons"></td>
<td><img src="images/kits/archer_items"></td>
<td>1</td>
</tr>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(window).on("load",function() {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});
$(".slideshow > div:gt(0)").hide();
setInterval(function() {
$('.slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('.slideshow');
}, 3000);
</script>
</body>
</html>
Note: I purposely made the image on the bottom missing because I haven't added the image yet.
Use object-position as described here to fix that.
Specifies the alignment of the replaced element's content object within the element's box.
I've been trying to design an Online form for our customers to upload their prescriptions. I've created the below in Dreamweaver, I'm not a programmer as you will see below but I've given it my shot to make this work and probably added too many things then needed lol. I just followed some of the online tutorials and probably messed up somewhere.
If you run the link at the bottom, you will see it's misaligned (Top, the 'please enter you details text and the form fields'). I've tried padding it quite a lot and of course responsive doesn't work).
I hope you can help. (I apologise if I posted this in the wrong section).
table {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
.topnav {
float: left;
text-align: left;
padding-left: 200px;
padding-right: 200px;
text-decoration: none;
}
.fields {
float: left;
padding-left: 200px;
padding-right: 200px;
text-align: left text-decoration: none;
}
* {
box-sizing: border-box;
}
#column_container {
width: 837px;
margin: 0 auto;
}
<div class="topnav" id="myTopnav">
<table width="900" cellpadding="30">
<tbody>
<tr>
<td>
<img src="http://themedicalsupplydepot.com/email/logo.jpg" width="183" height="95" alt="Medical Supply Depot">
</td>
<td>
<img src="https://secure.medicalsupplydepot.com/site/img/verisign_l.gif" alt="Norton SECURED Powered by VeriSign">
<br>
<a style="padding-left: 3px;" href="https://www.mcafeesecure.com/RatingVerify?ref=www.medicalsupplydepot.com"><img src="https://images.scanalert.com/meter/www.medicalsupplydepot.com/13.gif" alt="McAfee SECURE sites help keep you safe from identity theft, credit card fraud, spyware, spam, viruses and online scams" oncontextmenu="alert('Copying Prohibited by Law - McAfee Secure is a Trademark of McAfee, Inc.'); return false;"
border="0" height="54" width="94"></a>
</td>
<td>
<table cellpadding="0" cellspacing="0" align="left" width="200">
<tbody>
<tr>
<td><img src="http://themedicalsupplydepot.com/email/telephone.jpg" width="29" height="29"></td>
<td style="font-size:21px; font-weight:bold; color:#536f86">(800) 965-7496</td>
</tr>
<tr>
<td><img src="http://themedicalsupplydepot.com/email/clock.jpg" width="29" height="29"></td>
<td style="font-size:12px; font-weight:bold; color:#333333; padding-top:4px">Monday through Friday, <br>9am to 9pm (Eastern Time)</td>
</tr>
<tr>
<td><img src="http://themedicalsupplydepot.com/email/contact.jpg" width="29" height="29"></td>
<td style="font-size:11px; font-weight:bold;">info#medicalsupplydepot.com</td>
</tr>
</tbody>
</table>
<br><br>
<NLFORM>
</td>
</tr>
</tbody>
</table><br></div>
<br /><br />
<div class="fields" id="fields">
<h2>Please fill in the details:</h2>
<table width="100" cellpadding="1">
<tr>
<td>
<nlsalutation></nlsalutation>
</td>
<td>
<nladdress1></nladdress1>
</td>
</tr>
<tr>
<td>
<nlfirstname></nlfirstname>
</td>
<td>
<nladdress2></nladdress2>
</td>
</tr>
<tr>
<td>
<nllastname></nllastname>
</td>
<td>
<nladdress3></nladdress3>
</td>
</tr>
<tr>
<td>
<nlemail></nlemail>
</td>
<td>
<nlstate></nlstate>
</td>
</tr>
<tr>
<td>
<nlphone></nlphone>
</td>
<td>
<nlzipcode></nlzipcode>
</td>
</tr>
<tr>
<td>
<nlfile></nlfile>
</td>
<td></td>
</tr>
<tr>
<td>
<nlcomments></nlcomments>
</td>
<td> </td>
</tr>
</table>
</div>
This is the actual form Online Form. The fields added are part of the Netsuite system so they won't show up on Dreamweaver or Notepad++, or whatever else you guys use.
Based on your HTML I have added the minimum amount of CSS to make this responsive and keep in line your inputs. Also, added CSS to allow you to control style of each element. I still recommend finding a method for adding a framework (https://getbootstrap.com/ is my favourite) to your NetSuite pages. This will most likely suffice, but won't evolve with new screens and devices in the same way a popular framework would with updates.
Anyhow, let me know how you go with this and if you have any questions, just ask.
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
left: 0;
top: 0;
font-size: 100%;
background: #f9fafb;
}
/* FONT STYLES */
* {
font-family: Arial, Helvetica, sans-serif;
color: #193652;
line-height: 1.5;
}
h2 {
font-size: 2rem;
}
/* GRID */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.row {
position: relative;
width: 100%;
}
.row [class^="col"] {
float: left;
margin: 0.5rem 2%;
min-height: 0.125rem;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
width: 96%;
}
.col-1-sm {
width: 4.33%;
}
.col-2-sm {
width: 12.66%;
}
.col-3-sm {
width: 21%;
}
.col-4-sm {
width: 29.33%;
}
.col-5-sm {
width: 37.66%;
}
.col-6-sm {
width: 46%;
}
.col-7-sm {
width: 54.33%;
}
.col-8-sm {
width: 62.66%;
}
.col-9-sm {
width: 71%;
}
.col-10-sm {
width: 79.33%;
}
.col-11-sm {
width: 87.66%;
}
.col-12-sm {
width: 96%;
}
.row::after {
content: "";
display: table;
clear: both;
}
.hidden-sm {
display: none;
}
.pull-right {
float: right;
}
#media only screen and (min-width: 33.75em) {
/* 540px */
.container {
width: 90%;
}
}
#media only screen and (min-width: 45em) {
/* 720px */
.col-1 {
width: 4.33%;
}
.col-2 {
width: 12.66%;
}
.col-3 {
width: 21%;
}
.col-4 {
width: 29.33%;
}
.col-5 {
width: 37.66%;
}
.col-6 {
width: 46%;
}
.col-7 {
width: 54.33%;
}
.col-8 {
width: 62.66%;
}
.col-9 {
width: 71%;
}
.col-10 {
width: 79.33%;
}
.col-11 {
width: 87.66%;
}
.col-12 {
width: 96%;
}
.hidden-sm {
display: block;
}
.hidden-lg {
display: none;
}
.footer-text {
text-align: left !important;
padding: 13px 0;
}
input[type="submit"] {
float: right !important;
width: 200px !important;
}
}
#media only screen and (min-width: 60em) {
/* 960px */
.container {
width: 100%;
max-width: 60rem;
}
}
/* HEADER */
header {
width: 100%;
padding: 10px 0;
border-bottom: 1px solid #d9e3ed;
background: #fff;
}
.sec-images {
text-align: center;
}
.sec-images img {
height: 45px
}
ul {
list-style: none;
float: right;
margin: 0;
}
li {
display: flex;
}
li.phone {
font-size: 21px;
font-weight: bold;
color: #536f86;
height: 35px;
}
li.phone:before {
content: url(http://themedicalsupplydepot.com/email/telephone.jpg);
display: inline-block;
margin-right: 10px;
}
li.hours {
font-size: 12px;
font-weight: bold;
color: #333;
height: 35px;
}
li.hours:before {
content: url(http://themedicalsupplydepot.com/email/clock.jpg);
display: inline-block;
margin-right: 10px;
}
li.email {
font-size: 11px;
font-weight: bold;
height: 29px;
line-height: 2.7;
}
li.email:before {
content: url(http://themedicalsupplydepot.com/email/contact.jpg);
display: inline-block;
margin-right: 10px;
}
/* FOOTER */
footer {
width: 100%;
padding: 1em 0;
border-top: 1px solid #d9e3ed;
background: #fff;
margin-top: 50px;
}
.footer-text {
text-align: center;
padding: 13px 0;
}
.footer-images {
text-align: center;
}
.footer-images img {
height: 45px;
vertical-align: middle;
}
/* FORM */
label {
font-weight: 700;
color: #536f86;
}
input[type="text"],
input[type="email"],
input[type="number"] {
border: 1px solid #d9e3ed;
padding: 0 10px;
height: 40px;
line-height: 36px;
font-size: 16px;
color: #193652;
border-radius: 6px;
width: 95%;
margin-bottom: 10px;
}
select {
border: 1px solid #d9e3ed;
padding: 0 10px;
height: 40px;
line-height: 36px;
font-size: 16px;
color: #193652;
border-radius: 6px;
width: 99%;
margin-bottom: 10px;
background: #fff;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="textarea"]:focus,
select:focus {
border: 1px solid #9d2a31 !important;
box-shadow: none!important;
outline: none!important;
}
input[type="textarea"] {
border: 1px solid #d9e3ed;
padding: 0 10px;
height: 120px;
line-height: 36px;
font-size: 16px;
color: #193652;
border-radius: 6px;
width: 95%;
}
input[type="file"] {
height: 40px;
font-size: 16px;
color: #193652;
width: 95%;
}
input[type="submit"] {
height: 60px;
line-height: 48px;
padding: 0 30px;
font-size: 20px;
text-transform: none;
color: #fff;
border-radius: 6px;
background: #9d2a31;
float: left;
width: 99%
}
<header>
<div class="container">
<div class="row">
<div class="col-6-sm col-3">
<img src="http://themedicalsupplydepot.com/email/logo.jpg">
</div>
<div class="col-6 hidden-sm sec-images">
<img src="https://secure.medicalsupplydepot.com/site/img/verisign_l.gif"><br>
<img src="https://images.scanalert.com/meter/www.medicalsupplydepot.com/13.gif">
</div>
<div class="col-6-sm col-3">
<ul>
<li class="phone">(800) 965-7496</li>
<li class="hours">Monday through Friday,<br>9am to 9pm (Eastern Time)</li>
<li class="email">info#medicalsupplydepot.com</li>
</ul>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-12">
<h2>Please fill in the details:</h2>
</div>
</div>
<div class="row">
<form>
<div class="col-sm-12 col-6">
<!-- Replace <nlsalutation></nlsalutation>-->
<label>Mr/Mrs</label>
<input type="text">
<!-- End Replace -->
<!-- Replace <nlfirstname></nlfirstname>-->
<label>First Name</label>
<input type="text">
<!-- End Replace -->
<!-- Replace <nllastname></nllastname>-->
<label>Last Name</label>
<input type="text">
<!-- End Replace -->
<!-- Replace <nlemail></nlemail>-->
<label>Email</label>
<input type="email">
<!-- End Replace -->
<!-- Replace <nlphone></nlphone>-->
<label>Phone Number</label>
<input type="number">
<!-- End Replace -->
<!-- Replace <nlfile></nlfile>-->
<label>File</label>
<input type="file">
<!-- End Replace -->
<!-- Replace <nlcomments></nlcomments>-->
<label>Comments</label>
<input type="textarea">
<!-- End Replace -->
</div>
<div class="col-sm-12 col-6">
<!-- Replace <nladdress1></nladdress1>-->
<label>Address line 1</label>
<input type="text">
<!-- End Replace -->
<!-- Replace <nladdress2></nladdress2>-->
<label>Address line 2</label>
<input type="text">
<!-- End Replace -->
<!-- Replace <nladdress3></nladdress3>-->
<label>Address line 3</label>
<input type="text">
<!-- End Replace -->
<!-- Replace <nlstate></nlstate>-->
<label>State</label>
<select name="cars">
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
<option value="option4">Option4</option>
</select>
<!-- End Replace -->
<!-- Replace <nlzipcode></nlzipcode>-->
<label>Zip/Postal Code</label>
<input type="text">
<!-- End Replace -->
</div>
</form>
</div>
<div class="row">
<div class="col-12">
<input type="submit">
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-12-sm footer-text">
© 2017 Medical Supply Depot.
</div>
<div class="col-12-sm hidden-lg footer-images">
<img src="https://secure.medicalsupplydepot.com/site/img/verisign_l.gif">
<img src="https://images.scanalert.com/meter/www.medicalsupplydepot.com/13.gif" style="margin-top:5px;">
</div>
</div>
</div>
</footer>
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