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.
Related
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/
I have this page with a sidebar and I want the content in the sidebar to move down with the page but only if you scroll past it. So If you are at the top of the page it would be at the top of the sidebar but if you are at the bottom it would be at the top of the screen. How would you do that? I tried using position: fixedbut that just moves it with the screen no matter what and I only want it to move if the top reaches it.
Gif of Webpage with sidebar content that has the position fixed:
Here's the CSS of the content:
#content-list {position: fixed;}
#content-list ul {padding: 0px; list-style: none;}
#content-list li { padding-bottom: 25px; }
Here's the HTML of the content:
<div class="sidebar">
<nav id="content-list">
Page Content:
<ul>
<li>Quick Description</li>
<li>Help Menu</li>
</ul>
</nav>
</div>
EDIT
I would like to be able to do this using only CSS/HTML if possible (No javascript etc.)
Full demo:
/* imports a Google font */
#import url(https://fonts.googleapis.com/css?family=Oswald);
#import url(https://fonts.googleapis.com/css?family=Lora);
/* creates an 800px-wide space centered on the page, to constrain line width. it also specifies a default typeface and line height for the entire body of the document */
body {
background: #551A8B;
margin: 0;
color: white;
}
#body {
text-align: center;
display: table;
position: absolute;
height: 100%;
width: 100%;
font-size: 150%;
}
#main {
display: table-cell;
vertical-align: middle;
line-height: 150%;
font-family: Lora;
padding: 0px;
margin: 0px;
box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
}
.content {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: left;
}
.sidebar {
display: table-cell;
vertical-align: top;
width: 10%;
padding: 10px 10px 0px 20px;
font-family: Oswald;
font-size: 80%;
text-align: left;
background: #450A7B;
box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
}
#content-list {
position: fixed;
}
#content-list ul {
padding: 0px;
list-style: none;
}
#content-list li {
padding-bottom: 25px;
}
#title {
display: table-row;
vertical-align: top;
height: 10%;
padding: 0px;
font-family: Oswald;
background-color: #35006B;
font-size: 120%;
}
#footer {
display: table-row;
vertical-align: bottom;
background-color: #35006B;
overflow: hidden;
white-space: nowrap;
line-height: 20%;
height: 10%;
}
a:link {
color: #FFE303;
text-decoration: underline;
}
a:visited {
color: #E3701A;
text-decoration: underline;
}
a:hover {
color: blue;
text-decoration: underline;
}
h2 {
font-family: Oswald;
}
/* Setup the dropdown menu at the top of the screen */
.menu ul {
padding: 0px;
margin: 0px;
white-space: nowrap;
}
.menu li {
display: inline-block;
width: 25%;
background: #35006B
}
.menu li > ul {
display: none;
}
.menu li:hover {
background: #25005B
}
.menu li:hover > ul {
position: absolute;
display: inline;
box-shadow: 5px 5px 10px black;
-moz-box-shadow: 5px 5px 10px black;
-webkit-box-shadow: 5px 5px 10px black;
margin-top: 40px;
margin-left: -100px;
font-size: 80%;
width: 200px;
}
.menu li li {
display: block;
padding: 10% 75% 10% 10%;
margin: 0px;
}
.menu a {
text-decoration: none;
color: #FFE303;
}
/* Set images to a certain size */
.large-image {
width: 50%
}
.small-image {
width: 25%
}
#links {
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>NecroTheif: Maze Generator Project</title>
<link type="text/css" rel="stylesheet" href="../styles.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta charset="utf-8">
</head>
<body>
<div id="body">
<div id="title">
<h1>Maze Generator</h1>
<ul class="menu">
<a href="#">
<li>
Features
<ul>
<a href="about.html">
<li>About</li>
</a>
<a href="generation.html">
<li>Generating Mazes</li>
</a>
<a href="editing.html">
<li>Editing Mazes</li>
</a>
<a href="settings.html">
<li>Settings</li>
</a>
<a href="saveopen.html">
<li>Save/Open</li>
</a>
</ul>
</li>
</a>
<a href="MazeCreator.exe">
<li>Download</li>
</a>
<a href="api.html">
<li>API</li>
</a>
</ul>
</div>
<div>
<div class="sidebar">
</div>
<div id="main">
<h2 id="quick-description">Quick Description</h2>
<img class="large-image" src="https://i.gyazo.com/93f60cc74d13175ce5aee548cc020b10.png" alt="Picture of the maze creator program." />
<p class="content">The maze creator program is a program that allows you to create mazes of any size with ease. You can create mazes either by using an algorithm to generate them or building them yourself in the creator (You can even combine the two by generating
a maze and then editing it!). You then can save these files as .maz files to be loaded into games or to be edited later in the maze creator!</p>
<h2 id="help-menu">Help Menu</h2>
<img class="small-image" src="https://i.gyazo.com/55ec91a6523562ca82341510c7bdde43.png" alt="Picture of the top of the help menu." />
<img class="small-image" src="https://i.gyazo.com/d121313f333eba42faa37220aa599bb7.png" alt="Picture of the bottom of the help menu." />
<p class="content">This menu in the maze creator shows the basic controls of the creator. Open it by clicking Help or pressing Ctrl+H</p>
</div>
<div class="sidebar">
<nav id="content-list">
Page Content:
<ul>
<a href="#quick-description">
<li>Quick Description</li>
</a>
<a href="#help-menu">
<li>Help Menu</li>
</a>
</ul>
</nav>
</div>
</div>
<div id="footer">
<div id="links">
Main Page
</div>
<p>Developer: Andrew Wetmore (aka NecroTheif)</p>
<p>Last Updated: 11/03/15</p>
</div>
</div>
</body>
</html>
The term for this is 'Sticky sidebar', so you want it to always stick to the top of the page when the user scrolls.
There's millions of plugins for it, I'm particularly fond of this one:
DEMO: http://spoiledmilk.com/demos/sticky-sidebar/
This article explains in detail how to implement it and what it does exactly.
As #Manoj says in a comment this can be done using
position: sticky; position: -webkit-sticky;
Sadly this only works in Firefox and Safari (For now, see here for more info). I went with that and for browsers that don't support it I used this simple javascript (Which does not require JQuery and in my opinion creates a "cleaner" look than most complicated sticky sidebars) and anything I wanted to be sticky was of class "sticky"
// Try to give it sticky position first
function loadStickies(){
var sticky = document.getElementById("content-list");
sticky.style.position = "-webkit-sticky";
sticky.style.position = "sticky";
positionStickies();
}
// If giving it sticky position didn't work do it manually
function positionStickies() {
var sticky = document.getElementById("content-list");
if(sticky.style.position !== "sticky" && sticky.style.position !== "-webkit-sticky"){
if (document.documentElement.scrollTop > sticky.parentNode.offsetTop || document.body.scrollTop > sticky.parentNode.offsetTop)
sticky.style.position = "fixed";
else
sticky.style.position = "relative";
}
}
window.onload = loadStickies;
window.onresize = positionStickies;
window.onscroll = positionStickies;
window.onclick = click;
EDIT
To make the script work in IE and Firefox you must use document.documentElement as well as document.body.
Complete Demo:
// Try to give it sticky position first
function loadStickies(){
var sticky = document.getElementById("content-list");
sticky.style.position = "-webkit-sticky";
sticky.style.position = "sticky";
positionStickies();
}
// If giving it sticky position didn't work do it manually
function positionStickies() {
var sticky = document.getElementById("content-list");
if(sticky.style.position !== "sticky" && sticky.style.position !== "-webkit-sticky"){
if (document.documentElement.scrollTop > sticky.parentNode.offsetTop || document.body.scrollTop > sticky.parentNode.offsetTop)
sticky.style.position = "fixed";
else
sticky.style.position = "relative";
}
}
window.onload = loadStickies;
window.onresize = positionStickies;
window.onscroll = positionStickies;
window.onclick = click;
/* imports a Google font */
#import url(https://fonts.googleapis.com/css?family=Oswald);
#import url(https://fonts.googleapis.com/css?family=Lora);
/* creates an 800px-wide space centered on the page, to constrain line width. it also specifies a default typeface and line height for the entire body of the document */
body {
background: #551A8B;
margin: 0;
color: white;
}
#body {
text-align: center;
display: table;
position: absolute;
height: 100%;
width: 100%;
font-size: 150%;
}
#main {
display: table-cell;
vertical-align: middle;
line-height: 150%;
font-family: Lora;
padding: 0;
margin: 0px;
box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
}
.content {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: left;
}
.sidebar {
display: table-cell;
vertical-align: top;
width: 150px;
padding: 10px 10px 0px 20px;
font-family: Oswald;
font-size: 80%;
text-align: left;
background: #450A7B;
box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
}
#content-list {
top: 0; padding-top:10px;
}
#content-list ul {
padding: 0px;
list-style: none;
}
#content-list li {
padding-bottom: 25px;
}
#title {
display: table-row;
vertical-align: top;
height: 10%;
padding: 0px;
font-family: Oswald;
background-color: #35006B;
font-size: 120%;
}
#footer {
display: table-row;
vertical-align: bottom;
background-color: #35006B;
overflow: hidden;
white-space: nowrap;
line-height: 20%;
height: 10%;
}
a:link {
color: #FFE303;
text-decoration: underline;
}
a:visited {
color: #E3701A;
text-decoration: underline;
}
a:hover {
color: blue;
text-decoration: underline;
}
h2 {
font-family: Oswald;
}
/* Setup the dropdown menu at the top of the screen */
.menu ul {
padding: 0px;
margin: 0px;
white-space: nowrap;
}
.menu li {
display: inline-block;
width: 25%;
background: #35006B
}
.menu li > ul {
display: none;
}
.menu li:hover {
background: #25005B
}
.menu li:hover > ul {
position: absolute;
display: inline;
box-shadow: 5px 5px 10px black;
-moz-box-shadow: 5px 5px 10px black;
-webkit-box-shadow: 5px 5px 10px black;
margin-top: 40px;
margin-left: -100px;
font-size: 80%;
width: 200px;
}
.menu li li {
display: block;
padding: 10% 75% 10% 10%;
margin: 0px;
}
.menu a {
text-decoration: none;
color: #FFE303;
}
/* Set images to a certain size */
.large-image {
width: 50%
}
.small-image {
width: 25%
}
#links {
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>NecroTheif: Maze Generator Project</title>
<link type="text/css" rel="stylesheet" href="../styles.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta charset="utf-8">
</head>
<body>
<div id="body">
<div id="title">
<h1>Maze Generator</h1>
<ul class="menu">
<a href="#">
<li>
Features
<ul>
<a href="about.html">
<li>About</li>
</a>
<a href="generation.html">
<li>Generating Mazes</li>
</a>
<a href="editing.html">
<li>Editing Mazes</li>
</a>
<a href="settings.html">
<li>Settings</li>
</a>
<a href="saveopen.html">
<li>Save/Open</li>
</a>
</ul>
</li>
</a>
<a href="MazeCreator.exe">
<li>Download</li>
</a>
<a href="api.html">
<li>API</li>
</a>
</ul>
</div>
<div>
<div class="sidebar">
</div>
<div id="main">
<h2 id="quick-description">Quick Description</h2>
<img class="large-image" src="https://i.gyazo.com/93f60cc74d13175ce5aee548cc020b10.png" alt="Picture of the maze creator program." />
<p class="content">The maze creator program is a program that allows you to create mazes of any size with ease. You can create mazes either by using an algorithm to generate them or building them yourself in the creator (You can even combine the two by generating
a maze and then editing it!). You then can save these files as .maz files to be loaded into games or to be edited later in the maze creator!</p>
<h2 id="help-menu">Help Menu</h2>
<img class="small-image" src="https://i.gyazo.com/55ec91a6523562ca82341510c7bdde43.png" alt="Picture of the top of the help menu." />
<img class="small-image" src="https://i.gyazo.com/d121313f333eba42faa37220aa599bb7.png" alt="Picture of the bottom of the help menu." />
<p class="content">This menu in the maze creator shows the basic controls of the creator. Open it by clicking Help or pressing Ctrl+H</p>
</div>
<div class="sidebar">
<nav id="content-list">
Page Content:
<ul>
<a href="#quick-description">
<li>Quick Description</li>
</a>
<a href="#help-menu">
<li>Help Menu</li>
</a>
</ul>
</nav>
</div>
</div>
<div id="footer">
<div id="links">
Main Page
</div>
<p>Developer: Andrew Wetmore (aka NecroTheif)</p>
<p>Last Updated: 11/03/15</p>
</div>
</div>
</body>
</html>
Here is what it looks like:
If I remove the image, the text centers perfectly:
#A.B
I mean, it worked... Sort of.
I am having some problems with the image pushing the title to the right, as you can see, it's not exactly centred.
HTML:
<!doctype html>
<head>
<meta charset="UTF-8">
<meta name"description" content"Mobile Cat Grooming Service">
<meta name"keywords" content"Cat, Grooming, Service, Colchester">
<meta name"author" content"Jordan Downs">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="master.css"/>
<script type="text/javascript">
function changeFontSize(element, step) {
var el = document.getElementById(element);
var curFont = parseInt(window.getComputedStyle(el).fontSize, 10);
el.style.fontSize = (curFont + step) + 'px';
}
</script>
<script>
function changecolor(code) {
document.body.style.backgroundColor=code
}
</script>
</head>
<h2>
<center>
<button type="button" onClick="changeFontSize('content', 2);">A+</button>
<button type="button" onClick="changeFontSize('content', -2);">A-</button>
<script language="javascript" type="text/javascript"></script>
<form>
<input type="button" name="Button1" value="Default" onclick="changecolor('white')">
<input type="button" name="Button1" value="Scheme 1" onclick="changecolor('#FE2EF7')">
<input type="button" name="Button1" value="Scheme 2" onclick="changecolor('#FA58D0')">
<input type="button" name="Button1" value="Scheme 3" onclick="changecolor('#B404AE')">
</form>
</center>
</h2>
<body>
<div id="page">
<header>
<img src="Images/catlogo.jpg" alt= "logo"/>
<h1><center>Mobile Cat Grooming Service</center></h1>
</header>
<nav>
<ul>
<li><a alt="Home button" href="index.html">Home</a></li>
<li><a alt="History page button" href="history.html">History</a></li>
<li><a alt="Appointment page button" href="appointments.html">Appointments</a></li>
<li><a alt="Contact us page button" href="contactus.html">Contact us</a></li>
</ul>
</nav>
</head>
CSS:
body {
font-family: arial, helvetica, sans-serif;
line-height: 1.8em;
zoom: 150%;
}
#page {
margin:2% auto;
width: 100%;
overflow: hidden;
}
header {
float: left;
clear: both;
width: 96%;
color: #fff;
background-color: #660066;
padding: 1%;
margin-left: 1%;
}
header img {
float: left;
width: 12%;
height: 12%;
background: #660066;
}
h2 {
float: left;
margin-bottom: -1%;
width: 96%;
color: #fff;
background-color: #660066;
padding: 1%;
margin-left: 1%;
border-bottom: 2px solid;
border-color: #Cc3399;
}
nav {
font-family: "Times New Roman";
position: relative;
margin: auto;
padding: 0;
list-style: none;
width: 100%;
height: 100%;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
text-decoration: none;
padding: 5px 0;
width: 100px;
background: #Cc3399;
color: #eee;
float: left;
text-align: center;
border-left: 1px solid #fff;
}
nav ul li a:hover {
background: #660066;
color: #fff;
}
I suspect there is something we're not seeing as your existing code seems to be fine although I have removed the center tag which has been deprecated and substituted text-align:center.
If it still doesn't center in your FULL HTML, then we need to examine the remainder of the code.
header {
float: left;
clear: both;
width: 96%;
color: #fff;
background-color: #660066;
padding: 1%;
margin-left: 1%;
}
header img {
float: left;
width: 12%;
height: 12%;
background: #660066;
}
header h1 {
text-align: center;
}
<header>
<img src="http://placekitten.com/g/200/300" alt= "logo"/>
<h1>Mobile Cat Grooming Service</h1>
</header>
try this
header {
float: left;
clear: both;
width: 96%;
color: #fff;
background-color: #660066;
padding: 1%;
margin-left: 1%;
position:relative;
}
header img {
width: 12%;
height: 12%;
background: #660066;
position:absolute;
left:0;
top:0;
}
There are a few different ways to do this, you could use position:absolute; in your image or a more extendable way would be something like this:
<header>
<img src="Images/catlogo.jpg" alt= "logo"/>
<h1 class="centerTitle">Mobile Cat Grooming Service</h1>
</header>
css:
centerTitle {
width: 100%;
text-align: center;
margin-left: -12%;
}
I'm not sure how you want your image aligned compared to the page and/or the header but the reason the image is pushing your h1 over is because it is being floated and therefore taken out of the normal document flow. The h1 lines itself up as if the floated image wasn't there. The reason the h1 is shift over is that the space it takes up is still respected even though it is taken out of the normal document flow.
I can make further suggestions once I know the desired layout.
EDIT 1
I would probably use absolute positioning to solve this.
<header>
<img src="http://lorempixel.com/150/200/city">
<h1>Your Title Here</h1>
</header>
header {
text-align: center;
position: relative;
}
header img {
position: absolute;
top: 0;
left: 0;
z-index: 1; /* use this if you're having stacking issues */
}
Here is a jsFiddle demonstrating the above code: http://jsfiddle.net/3h5zdzbr/1/
The problem that i am facing is that text inside the a tag is not adjusting on a single line.
Here's my html.
<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div id="outer">
<ul>
<li class="current">Home</li>
<li>content</li>
<li>search</li>
<li>more</li>
</ul>
<div id="homepage">
Set as Homepage
</div>
<div id="clear">
</div>
</div>
<div id="wrapper">
<div id="pic">
<img src="logo.png">
<div id="content">
<p> Secure Search </p>
</div>
</div>
<div id="forms">
<form>
<input type="text" name="submit" size="70" style="font-size:20pt;"/>
</form>
<div id="pic_2">
<img src="powerd-by-google.png">
</div>
</div>
<div id="footer">
© 2012 - We Respect your Privacy - About AVG Secure Search
</div>
</div>
</body>
</html>
and here's my css.
body
{
margin: 0;
padding: 0;
background-color: white;
}
h1,h2,h3
{
margin: 0;
padding: 0;
}
p,ul,ol,li
{
margin: 0;
padding: 0;
}
#outer
{
background-color: rgb(67,68,71);
}
#outer ul
{
list-style: none;
margin-left: 5px;
border-left: 1px solid;
}
#outer li
{
float: left;
}
.current
{
background-color: rgb(56,63,137);
}
#outer a
{
width: 90px;
display: block;
text-transform: uppercase;
text-decoration: none;
text-align: center;
font-weight: bold;
color: white;
border-right: 1px solid;
padding: 5px;
}
#outer a:hover
{
color: black;
background-color: white;
}
#outer .current a:hover
{
color: white;
background-color: inherit;
}
#homepage a
{
float: right;
font-weight: none;
color: white;
background-color: rgb(67,68,71);
display: inline;
text-transform: lowercase;
border-right: none;
}
#homepage a:hover
{
color: white;
background-color: inherit;
}
#clear
{
clear: both;
}
#wrapper
{
width: 960px;
margin: 0 auto;
overflow: auto;
}
#pic
{
margin-top: 100px;
margin-left: 389px;
position: relative;
}
#content
{
position: absolute;
top: 60px;
left: 90px;
}
#forms
{
margin-top: 50px;
position: relative;
}
#pic_2
{
position: absolute;
top: 0px;
left: 867px;
}
#footer
{
width: 500px;
margin: 375px auto 0px;
}
#footer a
{
text-decoration: none;
}
now the problem is with the a tag in the homepage div, i have tried very hard but i have no idea why its text is not adjusting on a single line instead it seems to creep up on multiple lines.
Any suggestions in this matter would be really helpful.
thank you.
I'm assuming you're talking about the 'set as homepage' button.
If so, The issue is that your css is writing a fixed with to the element inherited from #outer a which is making that element 90px wide.
You can fix this by simply adding the css style width: inherit; to #homepage a
Example:
http://jsfiddle.net/2jByx/1/
You need to add width to the "set as homepage" element
#homepage a {
.....
width: 120px; //added width
}
Take a look at here, http://jsfiddle.net/VkmHr/
is that you looking for?
I am running my app on google Chrome and Safari, both webkit-compliant. I'm building a scrolling div using -webkit-transition.
It worked just fine when I had the doctype specified as HTML 4 transitional (!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"), but our requirement is HTML 5. When I set the doctype (!DOCTYPE HTML) the transition stops working completely.
I ran my code through an HTML5 validator and cleaned up all errors (except tags).
Am I misunderstanding something?
Here is the relevant code:
<!DOCTYPE HTML>
<html>
<head>
<title>Shopping List</title>
<style>
ul{margin:0;padding:0;}
li{display: inline; float: left;}
body{
background-color: #475c76;
font-family: Arial;
font-size: 18pt;
font-weight: bold;
}
#wrapper{
height: 600px;
width: 800px;
}
/* Main menu */
#mainMenu{
height: 83px;
background-image: url(img/mainMenu_bg.png);
}
#mainMenu li{
height: 57px;
margin: 13px 0;
display: inline;
float: left;
color: #475c76;
}
#mainMenu li a{
color: #475c76;
padding: 0;
text-decoration: none;
background-image: url(img/btn_main.png);
background-position:0 0;
height: 57px;
width: 197px;
text-align: center;
line-height: 40pt;
display: inline-block;
}
#mainMenu li a:link{
}
#mainMenu li a:active{
background-position: 0 -57px;
color: white;
}
/* Page body */
#pagebody{
overflow: hidden;
height: 417px;
background-color: #DDDDDD;
}
/* Submenu */
.subMenuWrapper{
height: 80px;
width: 800px;
overflow: hidden;
position: absolute;
top: 421px;
left: 0;
}
#subMenus{
position: absolute;
background-image: url(img/subMenu_bg.png);
height: 80px;
width: 1600px;
-webkit-transition: all .4s;
}
#subMenus ul{
width: 780px;
padding: 0 10px;
display: inline;
float: left;
}
#subMenus ul .floatright{
float: right;
}
/* Buttons */
a.button{
color: white;
text-decoration: none;
background-position:center 0;
text-align: center;
display: inline-block;
}
a.button>*{
display: inline-block;
margin-top: 10px;
height: 60px;
background-image: url(img/button1.png);
line-height: 40pt;
}
a.button .l{
width: 14px;
background-position:top left;
}
a.button .t{
background-position:top center;
color: #AABBCC;
padding: 0 10px;
}
a.button .r{
width: 14px;
background-position: top right;
}
a.button .larrow{
width: 24px;
background-image: url(img/buttonpointies.png);
background-position:top left;
}
a.button .rarrow{
width: 24px;
background-image: url(img/buttonpointies.png);
background-position: top right;
}
a:active.button .t{
background-position: center -60px;
color: white;
}
a:active.button .l,
a:active.button .larrow{
background-position: left -60px;
}
a:active.button .r,
a:active.button .rarrow{
background-position: right -60px;
}
/* List */
#scrollingWrapper{
overflow: hidden;
}
#scrollingWrapper>div{
display:inline;
float:left;
}
#scrollingList{
position: relative;
width: 660px;
-webkit-transition: all .5s;
}
.lineItem{
height: 60px;
width: 100%;
border-top: 3px solid white;
border-bottom: 3px solid gray;
font-size: 24pt;
padding: 3px 8px;
background-color: #E8E8E8;
}
.lineItem *{
height: 57px;
display: inline;
float: left;
}
.lineItem .text{
margin: 7px 14px;
}
.lineItem .checkbox{
background-image: url(img/btn_check.png);
width: 44px;
margin:0;
}
/* Scroll buttons */
.scrollArea .scrollBar{
display: inline;
float: left;
background-color: #D0D0D0;
height: 334px;
width: 5px;
margin: 2px 0 2px 28px;
padding: 0;
border-radius: 3px;
}
.scrollArea .scrollBar #elevator{
position: relative;
background-color: gray;
height: 100px;
width: 5px;
-webkit-transition: all .5s;
border-radius: 3px;
}
.scrollArea .scrollButtons{
display:inline;
float:left;
margin-left: 12px;
margin-top: 100px;
}
.scrollArea .scrollButtons li{
display: block;
float: none;
padding: 4px 0;
}
.scrollArea .scrollButtons li div{
margin:0;
display: inline;
float: left;
}
.scrollArea .scrollButtons li div img{
padding-top: 10px;
}
/* Footer */
#footer{
position: absolute;
top: 500px;
height: 100px;
width: 800px;
border-top: 3px solid black;
}
#footer img{
margin: 5px;
float:left;
}
#footer #datetime{
margin-top: 20px;
}
#footer #datetime *{
float: right;
color: #AABBCC;
text-align: center;
color: #AABBCC;
display: block;
width: 160px;
}
</style>
<script>
var arrList = ["Milk 1%", "Bread", "Granny Smith Apples", "Oatmeal","Potatoes", "Yogurt", "Muffins", "Spaghetti", "Crackers", "Pancake Mix", "Melons", "Ice Cream", "Perogies", "Cottage Cheese", "Canned Peaches","Red Delicious Apples", "Ground Beef", "Salmon Steaks", "Popcorn", "Salt", "Tea", "Coffee", "Light Bulbs", "Eggs", "Bacon"];
var lineHeight = 72;
var windowHeight = 338;
var scrollBarHeight = 335;
var scrollAmt = lineHeight*4;
var listHeight; //tbd
var elevHeight; //tbd
function init(){
popList();
// upon finished loading
listHeight = (arrList.length)*lineHeight;
document.getElementById('scrollingList').style.top = 0;//needs to be explictly set so that it can be read later, otherwise it is undefined
elevHeight = windowHeight/listHeight*scrollBarHeight;
document.getElementById('elevator').style.height = elevHeight;
document.getElementById('elevator').style.top = 0;
}
function popList(){
// populate list from arrList
// THIS CODE IS RUN INLINE
var listHTML = "";
for (item=0;item<arrList.length;item++){
listHTML += '<div id="lineitem'+ item +'" class="lineItem" checked="false">';
listHTML += ' ';
listHTML += ' <div class="text">' + arrList[item] + '</div>';
listHTML += '</div>';
}
document.getElementById('scrollingList').innerHTML = listHTML;
}
function scrollme(dir){
var yMax = windowHeight-listHeight;
var yMin = 0;
if (dir>0){ // scroll down (list physically moves up, listPos goes more negative)
_setlistPos(Math.max(_getlistPos() - scrollAmt, yMax));
}
else{ // scroll up (list physically moves down, listPos goes more positive)
_setlistPos(Math.min(_getlistPos() + scrollAmt, yMin));
}
_setscrollPos();
function _getlistPos(){ return parseInt(document.getElementById('scrollingList').style.top); }
function _setlistPos(y){ document.getElementById('scrollingList').style.top = y; }
function _setscrollPos(){ document.getElementById('elevator').style.top = -(_getlistPos())*scrollBarHeight/listHeight; }
}
function editList(editState){
if (editState){ // show 2ndary menu
document.getElementById('subMenus').style.left = -800;
}
else{ // return to primary menu
document.getElementById('subMenus').style.left = 0;
}
}
function check(button,clickState){
var lineitem = button.parentNode;
if(clickState){ // button pressed
button.style.backgroundPosition = "0 -57px";
}
else{ // button released
if (lineitem.getAttribute("checked")=="false"){ // box was unchecked, so check it
lineitem.setAttribute("checked","true");
button.style.backgroundPosition = "0 -114px";
}
else{ // box was checked, so uncheck it
lineitem.setAttribute("checked","false");
button.style.backgroundPosition = "0 0";
}
}
}
function deleteChecked(){
var tempArrList = [];
for (item=0;item<arrList.length;item++){
var lineitem = document.getElementById("lineitem" + item);
if (lineitem.getAttribute("checked")!="true"){
tempArrList.push(lineitem.childNodes[3].innerText);
}
}
arrList = tempArrList;
init();
}
</script>
</head>
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" onload="init()">
<div id="wrapper">
<!-- Main Menu -->
<ul id="mainMenu">
<li>Home</li>
<li>Shopping List</li>
<li>Recipes</li>
<li>Specials</li>
</ul>
<!-- Page body -->
<div id="pagebody">
<div id="scrollingWrapper">
<!-- Scroll list -->
<div id="scrollingList">
</div>
<!-- Scroll Controls -->
<div class="scrollArea">
<div class="scrollBar"><div id="elevator"></div></div>
<ul class="scrollButtons">
<li>
<a class="button" href="javascript:void(false);" onmouseup="scrollme(-1);">
<div class="l"> </div><div class="t"><img src="img/glyph_up.png" width="35" height="35" alt=""></div><div class="r"> </div>
</a>
</li>
<li>
<a class="button" href="javascript:void(false);" onmouseup="scrollme(1);">
<div class="l"> </div><div class="t"><img src="img/glyph_dn.png" width="35" height="35" alt=""></div><div class="r"> </div>
</a>
</li>
</ul>
</div>
</div>
<!-- SubMenus -->
<div class="subMenuWrapper">
<div id="subMenus">
<ul id="subMenu1">
<li>
<a class="button" href="javascript:void(false);">
<div class="l"> </div><div class="t">Button 1</div><div class="r"> </div>
</a>
</li>
<li class="floatright">
<a class="button" href="javascript:void(false);" onmouseup="editList(true);">
<div class="l"> </div><div class="t">Edit List</div><div class="rarrow"> </div>
</a>
</li>
</ul>
<ul id="subMenu2" class="subMenu">
<li>
<a class="button" href="javascript:void(false);" onmouseup="editList(false);">
<div class="larrow"> </div><div class="t">Done</div><div class="r"> </div>
</a>
</li>
<li class="floatright">
<a class="button" href="javascript:void(false);" onmouseup="deleteChecked()">
<div class="l"> </div><div class="t">Clear Checked</div><div class="r"> </div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<img src="img/main_ad_wave.png" alt="">
<div id="datetime">
<span id="date">Fri. Jan. 01</span>
<span id="time">12:01am</span>
</div>
</div>
</div>
</body>
</html>
It looks like the problem isn't the transition, but the setting of properties.
elevHeight = windowHeight/listHeight*scrollBarHeight;
document.getElementById('elevator').style.height = elevHeight;
The CSS height property takes a length not an integer, and lengths (other than 0) require units.
(There may be other issues, probably similar ones, but that's the first one I spotted in your code)
The Doctype you are using (HTML 4.01 Transitional with no URL) is considered by browser to be an indication of legacy code written before the proper (or almost proper) use of web standards became common (i.e. around the late 90s). This triggers Quirks mode.
The HTML 5 Doctype is designed to trigger Standards mode, in which browsers follow the standards much better (and are much more consistent which each other — this is highly desirable).
One of the bugs that is emulated in Quirks mode is treating integer values as pixel lengths.
You need to specify a unit. e.g. ... + 'px'.
(You also have some errors in the HTML that would be detected by a validator)
I suspect the problem is down to the fact that it looks like you're trying to trigger the transition by changing CSS properties programatically with Javascript. I'm not entirely sure how well that kind of functionality is supported now, or how well it will be supported in the future.
Really, CSS transitions are intended for enhancing the UI experience, not for this kind of advanced animation. Seems that you're trying to bend CSS to make it do stuff it's not designed for. You might want to reconsider your approach.
It might be possible to achieve what you want using CSS animation keyframes, else why not just use a Javascript library like jQuery to do the heavy-lifting? That approach would be much better suited to what you're trying to achieve.