Simple question. I want my page to be in the middle, from top to bottom. It's already centered from left to right.
Just point out what I need to add and where, thank you. If you see some error in the css, please correct that too.
#charset "utf-8";
/* CSS Document */
/* Created By CaptainMcMarcus */
/* Heavily customized by Sjokomelk */
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
html {
height: 100%; -webkit-font-smoothing: antialiased; font-smoothing: antialiased;
}
/* Clearing some default browser settings */
* {border: 0px; margin: 0px; padding: 0px;}
a:active {outline:none;}
:focus {-moz-outline-style:none;}
.clear {clear:both;}
/* These parts can be easily changed to affect the design */
body {color: #FFF; font-family: "Open Sans", Arial, Helvetica, sans-serif;
background: url('images/bg.jpg') no-repeat; background-size: 100% auto; background-size: cover; background-attachment: fixed;}
p {text-align: justify; font-size:16px;}
p a { text-decoration: underline; color: #ea5353; text-decoration: underline;}
p a:hover { text-decoration: none; color: #333;}
/* Core Wrapper which we vertically align */
.wrapper {width: 700px; height: auto; margin: 0 auto;}
.box-wrap {
width: 100%;
height: auto;
margin: 20px 0 0 0;
-webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}
.box-wrap h2 {width: 100%; height: auto; padding: 15px 0; text-align: center;
background: url('images/header-bg.png') repeat center top; background-color: RGBA(42,52,59,0.75);}
.box-wrap p {font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; padding: 15px 30px; overflow: hidden;
text-align: justify; width: 640px; height: auto; background: #ffffff; color: #717171;}
.icon-box {width: 210px; height: 210px; background: #FFF; margin: 20px 15px 20px 0; float: left; text-decoration: none;}
.icon-box a {text-decoration: none;}
.icon-box p {font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 300; font-size: 22px; text-align: center; color: #717171; text-decoration: none;}
.icon-box:hover {background: #f1f1f1;}
.wide {width: 700px; margin: 0px;}
.end2 {margin: 0px 0px 0px 0px;}
.end {margin: 20px 0px 0px 0px;}
nav {margin: 10px auto; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none; float: left; padding:0;}
nav ul li a {
background: #FFFFFF;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 18px;
text-align: center;
color: #717171;
text-decoration: none;
float: left;
padding: 8px 0;
width: 105px;
margin: 0px 14px 0 0;
}
nav ul li{ position:relative; float:left;}
nav ul li a:hover {background: #f1f1f1;}
nav ul li:last-child a{
margin-right:0;
}
nav ul li ul.submenu {
position: absolute;
width: auto;
display:none;
top: 35px;
}
nav ul > li:hover > ul {
left: 0;
display: block;
}
code, pre {
padding: 0 3px 2px;
font-family: Menlo, Monaco, "Courier New", monospace;
font-size: 10px;
color: #333333;
}
code {
padding: 3px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
pre {
display: block;
padding: 8.5px;
margin: 0px;
font-size: 11px;
line-height: 18px;
background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
}
pre code {
padding: 0;
color: inherit;
background-color: transparent;
border: 0;
}
.footer h3 {width: 100%; height: auto; padding: 15px 0; text-align: center;
background: url('images/header-bg.png') repeat center top; background-color: RGBA(42,52,59,0.75);}
.footer {
width: 100%;
height: auto;
margin: 20px 0 0 0;
-webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}
html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Forside" />
<title>Hjortefjellet</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery.js"></script><!-- Link to jquery so we can center the content -->
</head>
<body>
<div class="wrapper"><!-- Opens the wrapper so we can contain and center everything -->
<img src="images/logo.png" width="702" height="87" alt="Your Logo" />
<nav>
<ul>
<li>HJEM</li>
<li>FORUM</li>
<li>DONER</li>
<li>SERVERE
<li>FAQ</li>
<li><a style="margin-right: 0 !important;" href="kontakt.html">KONTAKT</a></li>
</ul>
</nav>
<div class="clear"></div>
<div class="box-wrap">
<h2>Velkommen til Hjortefjellet</h2>
<p class="text-box"><!-- PAGE TEXT -->
Hjortefjellet er et nytt norsk gaming coummunity som har brukeroplevelsen i fokus. Vi startet opp 21. februar og har nå en Garry's Mod som kjører Trouble in Terrorist Town. Ta gjerne turen innom for å bli bedre kjent med oss.</p>
<p class="text-box">Has albucius oporteat eu, eos eu etiam intellegam. Has posse dicant feugiat ut, cu quo case convenire definitionem, possim persius meliore no est. Urbanitas vituperatoribus eos in, pro delenit reformidans eu. Nec detracto sadipscing te.</p>
</div>
<div class="footer">
<h3>© Hjortefjellet.com 2014 | Siden benytter cookies</h3>
</div>
</div><!-- This closes the wrapper -->
</body><!-- Closes off the HTML Document -->
</html>
Thank you.
Like this
$(function() {
$(window).on('resize', function() {
$('.wrapper').css('margin-top', function() {
return ($(document).height() - $(this).height()) / 2;
});
}).trigger('resize');
});
FIDDLE
CSS can help you with display :
html {display:table}
body {
display:table-cell;
vertical-align:middle;/* will center content in middle , what you look for*/
/* vertical-align:top; pushes content to top */
/* vertical-align:bottom; pushes content to bottom */
}
DEMO
If you dislike to use table display , you may want to try the flex display:
html,body {
height:100%;
width:100%;
}
body {
display:flex;
}
.wrapper {
margin:auto;/* because of flex, auto margin is applied on both axis*/
}
DEMO
Related
I have three cards when I hover on any card it it should translate upwards up to this it's working fine, now what my requirement is when ever the hovered card translates there should be a small space in that I want to fill with some message. Please help me to achieve this thing.
Note - each card contains different messages
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
.heart-icons {
margin-left: -40%;
}
/* .fas{
background: transparent;
color:red;
} */
button {
border: none;
position: absolute;
}
.fas {
/* padding-left:2000%; */
background: #ebf5fc;
padding-top: 500%;
color: yellowgreen;
font-weight: 600;
/* top:10;
right:50; */
}
audio {
margin-top: 40%;
}
* {
margin: o;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
/* background:#c7c744; */
}
#my_audio {
margin-top: -40%;
}
.main-section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #ebf5fc;
}
.container {
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
padding: 40px 0;
}
.container .card {
position: relative;
width: 320px;
height: 440px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0, 0, 0, 0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
border-radius: 15px;
margin: 30px;
}
.container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #ebf5fc;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container .card:hover .box {
transform: translateY(-50px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, #b95ce4, #4f29cd);
}
.container .card .box .content {
padding: 20px;
text-align: center;
}
.container .card .box .content h2 {
position: absolute;
top: -10px;
right: 30px;
font-size: 8em;
color: rgba(0, 0, 0, 0.02);
transition: 0.5s;
pointer-events: none;
}
.container .card:hover .box .content h2 {
color: rgba(0, 0, 0, 0.05);
}
.container .card .box .content h3 {
font-size: 1.8em;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card .box .content p {
font-size: 1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card:hover .box .content h3,
.container .card:hover .box .content p {
color: #fff;
}
.container .card:hover .box .content p {
font-style: italic;
color: gold;
}
.container .card .box .content a {
position: relative;
display: inline-block;
padding: 8px 20px;
background: #03a9f4;
margin-top: 15px;
border-radius: 20px;
color: #fff;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.container .card:hover .box .content a {
background: #ff568f;
}
#i1 {
width: 100%;
height: 50px;
}
h1 {
text-align: center;
font-size: 65px;
font-style: italic;
}
#love {
color: red;
}
#shape {
width: 150px;
height: 150px;
border-radius: 50%;
margin-left: 45%;
margin-top: -12%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css" rel="stylesheet" />
First, you have to use an absolute div to position it on the bottom of the card, next use z index in order to move the absolute div behind the main moving card
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<title>Special-Wishes </title>
<style>
.secret{
position : absolute;
bottom : 2px;
padding : 20px;
z-index : 0
}
.box{
z-index:1
}
</style>
<script>
</script>
</head>
<body>
<h1>kitty <span class="wifey">puppy</span></h1>
<img id="shape"src="https://i.pinimg.com/originals/2f/9d/95/2f9d9562eb2252ae132b4bf8258aa18a.jpg"/>
<audio autoplay id="player">
<source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />
<button id="music" onclick="document.getElementById('player').play()">
<i style='font-size:24px;' class='fas'></i>
</button>
<div class="main-section">
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<h2 id="initial">I</h2>
<h3>Card One</h3>
<p>Your birthday is the first day of another 365-day journey. Be the shining thread in the beautiful tapestry of the world to make this year the best ever.</p>
Read More
</div>
</div>
<div class="secret">
This is my secret
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2><span class="heart-icon" style='font-size:180px;'>♥</span></h2>
<h3>Card Two</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>U</h2>
<h3>Card Three</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
</div>
</div>
</body>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
.heart-icons{
margin-left:-40%;
}
/* .fas{
background: transparent;
color:red;
} */
button{
border: none;
position:absolute;
}
.fas{
/* padding-left:2000%; */
background:#ebf5fc;
padding-top:500%;
color:yellowgreen;
font-weight: 600;
/* top:10;
right:50; */
}
audio{
margin-top:40%;
}
*{
margin: o;
padding:0;
box-sizing: border-box;
font-family: 'poppins',sans-serif;
/* background:#c7c744; */
}
#my_audio{
margin-top:-40%;
}
.main-section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background:#ebf5fc;
}
.container{
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
padding: 40px 0;
}
.container .card{
position: relative;
width:320px;
height:440px;
box-shadow: inset 5px 5px 5px rgba(0,0,0,0.05),
inset -5px -5px 5px rgba(255,255,255,0.5),
5px 5px 5px rgba(0,0,0,0.05),
-5px -5px 5px rgba(255,255,255,0.5);
border-radius: 15px;
margin:30px;
}
.container .card .box{
position: absolute;
top:20px;
left:20px;
right:20px;
bottom:20px;
background: #ebf5fc;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container .card:hover .box{
transform: translateY(-50px);
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
background: linear-gradient(45deg,#b95ce4,#4f29cd);
}
.container .card .box .content{
padding:20px;
text-align: center;
}
.container .card .box .content h2{
position: absolute;
top:-10px;
right:30px;
font-size: 8em;
color:rgba(0,0,0,0.02);
transition: 0.5s;
pointer-events: none;
}
.container .card:hover .box .content h2{
color: rgba(0,0,0,0.05);
}
.container .card .box .content h3{
font-size:1.8em;
color: #777;
z-index:1;
transition: 0.5s;
}
.container .card .box .content p{
font-size:1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card:hover .box .content h3,
.container .card:hover .box .content p{
color: #fff;
}
.container .card:hover .box .content p{font-style: italic;color: gold;}
.container .card .box .content a{
position: relative;
display: inline-block;
padding: 8px 20px;
background: #03a9f4;
margin-top:15px;
border-radius: 20px;
color:#fff;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.container .card:hover .box .content a{
background: #ff568f;
}
#i1{
width:100%;
height:50px;
}
h1{
text-align:center;
font-size:65px;
font-style: italic;
}
#love{
color:red;
}
#shape{
width:150px;
height:150px;
border-radius:50%;
margin-left:45%;
margin-top:-12%;
}
.
</style>
</html>
I've come across an issue when coding a site for a colleague of mine. He resells t-shirts that are given to him by a friend, and does so by listing them on his current eBay page. He asked me to code a site for him which would promote his t-shirts more, and wanted me to allow customers to click on the shirts from his website to be redirected to the corresponding eBay page. I want to be able to randomly generate images from his eBay page and have them show up on the website, and therefore be able to redirect users to his eBay page from the site.
EDIT: I have already included a script in my .html file for randomly selecting images. My main issue is being able to randomly select such images from eBay itself.
Here is the HTML for the page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ADARA Enterprises</title>
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
</head>
<script type="text/javascript">
var imageURLs = [
"http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
, "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
, "http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Some alt text\"/>';
return img;
}
</script>
</head>
<body>
<div id="background">
<div id="page">
<div id="header">
<span id="connect">
</span>
<!-- /#logo -->
<ul id="navigation">
<li>Home</li>
<li>About</li>
<!-- <li>Blog</li> -->
<li>Shop</li>
<li class="selected">Contact Us</li>
</ul>
</div> <!-- /#header -->
<div id="contents">
<div id="main">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
</p>
<address>
<span>Telephone numbers:</span>
555-5678901 to 555-5678902
<span>Email Address:</span>
adarasomething#whateverthehell.com
<span>Street Address:</span>
4th Lit Street, 73813 Yeet, CO
</address>
</div>
<div id="featured">
<ul>
<li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
<li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
<li><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
<li class="last"><img src="http://i.ebayimg.com/images/g/1sAAAOSwjqVZBkGi/s-l1600.jpg" alt="shirt" /></li>
</ul>
shop here!
</div>
</div> <!-- /#contents -->
<div id="footer">
<div id="description">
<div>
<span>© Copyright © 2017. ADARA Enterprises All rights reserved</span>
</div>
<p>
This is just filler text. <br>
<br>
Filler text.
</p>
</div>
<div class="navigation">
Home|
About|
<!-- Yeet| -->
Shop|
Contact Us
</div>
</div> <!-- /#footer -->
</div> <!-- /#page -->
</div> <!-- /#background -->
</body>
</html>
And here is the CSS file associated with it:
html {
font-family: 'Trebuchet MS', sans-serif, Arial, Helvitica;
}
body {
background-color: #ffffff;
margin: 0;
// padding-top: 19px;
min-height: 100%;
}
#background {
background: url(https://static.pexels.com/photos/29724/pexels-photo-29724.jpg) repeat;
min-height: 100%;
//border-top: 1px solid #000000;
margin: 0;
}
#page {
width: 960px;
margin: 0 auto;
min-height: 100%;
height: 100%;
}
#font-face {
font-family: 'Arial Bold';
src: url('fonts/corben-bold-webfont.eot');
src: local('?'), url('fonts/corben-bold-webfont.woff') format('woff'),
url('fonts/corben-bold-webfont.ttf') format('truetype'),
url('fonts/corben-bold-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*
img {
border: 0;
}
*/
#connect .facebook, #connect .twitter, #connect .vimeo {
background: url(../images/icons.png) no-repeat;
}
/*------------------------------ HEADER ------------------------------*/
#header {
background: url(../images/bg-header.png) no-repeat center top;
min-height: 340px;
margin-bottom: 20px;
}
#connect {
float: left;
display: inline-block;
height: 30px;
width: 300px;
margin: 15px 0 15px 10px;
}
#connect a {
display: inline-block;
height: 30px;
margin: 0 10px;
padding: 0;
}
#connect .facebook {
background-position: 0 2px;
width: 27px;
}
#connect .twitter {
background-position: 0 -36px;
width: 36px;
}
/* #connect .vimeo {
background-position: 0 -74px; // Removed Vimeo Logo. Can implement any other logo here with matching dimensions
width: 32px; */
}
#infos {
float: right;
color: #ffe680 ;
display: inline-block;
height: 30px;
width: 200px;
margin: 15px 0;
}
#infos a {
color: #ffe680;
font-family: Arial;
font-size: 14px;
line-height: 30px;
margin: 0 5px;
text-decoration: none;
}
/** Logo **/
#logo {
clear: both;
display: block;
height: 217px;
width: 950px;
margin: 0 auto;
}
/** Navigation **/
#navigation {
height: 40px;
list-style-type: none;
margin: 0;
display: inline-block;
padding: 8px 20px 12px 84px;
}
#navigation li {
float: left;
font-family: 'Arial Black';
font-size: 22px;
font-weight: bold;
line-height: 40px;
width: 186px;
text-align: center;
}
#navigation a {
color: #ffe680;
text-decoration: none;
text-shadow: 1px 1px #C3A33B;
}
#navigation a:hover, #navigation li.selected a {
color: #FFFFAC;
text-shadow: 1px 1px 0 #C3A33B;
}
/*------------------------------ CONTENTS ------------------------------*/
#contents {
margin: 0 0 40px;
padding: 0 5px;
}
#main {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
margin: 0 0 30px;
padding: 0 0 30px;
}
#main p {
color: #ffe680;
font-size: 14px;
line-height: 20px;
margin: 0;
padding: 0 0 20px;
text-shadow: 1px 1px #C3A33B;
}
#main p a {
color: #ffe680;
text-shadow: 1px 1px #C3A33B;
}
#main address {
color: #FFFFAC;
font-style: normal;
width: 350px;
margin: 0 auto;
text-align: center;
text-shadow: 1px 1px #C3A33B;
}
#main address span {
color: #ffe680;
text-shadow: 1px 1px #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 18px;
line-height: 20px;
margin: 20px 0;
width: 350px;
}
/* #adbox {
background: #FFFFAC url(../images/bottom-shadow-headliner.jpg) no-repeat center bottom;
height: 371px;
width: 935px;
margin: 0 auto;
padding: 7px 7px 22px;
position: relative;
}
#adbox img {
height: 371px;
width: 935px;
margin: auto;
}
*/
#featured {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
padding: 0 0 42px;
position: relative;
}
#featured ul {
display: inline-block;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
#featured ul li {
float: left;
background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
height: 253px;
width: 204px;
margin-right: 28px;
padding: 6px 6px 15px;
}
#featured ul li.last {
margin-right: 0;
}
#featured ul li img {
border: 1px solid #e4e0d1;
}
#featured a.button {
background: url(../images/bg-button.jpg) no-repeat;
color: #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 18px;
height: 30px;
line-height: 30px;
width: 144px;
padding: 4px 0 6px;
text-align: center;
text-decoration: none;
position: absolute;
bottom: -20px;
left: 403px;
}
/*------------------------------ Blog Page ------------------------------*/
#blogs {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
padding: 0 0 20px;
position: relative;
}
#blogs div {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
display: inline-block;
margin: 0 0 20px;
padding: 0 0 20px;
}
#blogs div.last {
background: none;
margin: 0;
}
#blogs span {
float: left;
background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
display: block;
height: 253px;
width: 204px;
margin-bottom: 6px;
margin-right: 40px;
padding: 6px 6px 15px;
}
#blogs span img {
border: 1px solid #e4e0d1;
}
#blogs h3 {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
line-height: 30px;
margin: 0 0 20px 258px;
padding: 0 0 10px;
}
#blogs p {
color: #ffe680;
max-height: 160px;
line-height: 20px;
margin: 0 0 20px 258px;
padding: 0 0 20px;
overflow: hidden;
text-shadow: 2px 2px #C3A33B;
}
#blogs p a {
color: #ffe680;
text-shadow: 2px 2px #C3A33B;
}
#blogs a.more {
color: #C3A33B;
font-style: italic;
text-decoration: none;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
background: none;
display: inline-block;
width: 328px;
margin: 0;
padding: 0;
position: absolute;
bottom: -20px;
left: 311px;
}
#blogs div.buttons a, #blogs div.blog-entry-buttons a {
float: left;
background: url(../images/bg-button.jpg) no-repeat;
color: #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 18px;
height: 30px;
line-height: 30px;
width: 144px;
margin-right: 20px;
padding: 4px 0 6px;
text-align: center;
text-decoration: none;
}
#blogs div.blog-entry-buttons {
width: 690px;
left: 258px;
}
#blogs div.blog-entry-buttons a.back {
float: right;
font-size: 16px;
margin-right: 0;
}
/*------------------------------ Shop Page ------------------------------*/
#shop {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
padding: 0 0 20px;
position: relavive;
}
#shop ul.items {
display: inline-block;
list-style-type: none;
margin: 0 auto 16px;
padding: 0;
}
#shop ul.items li {
float: left;
color: #ffe680;
height: 340px;
width: 216px;
margin-bottom: 20px;
margin-right: 28px;
}
#shop ul.items li span {
background: #FFFFAC url(../images/bottom-shadow-img.jpg) no-repeat center bottom;
display: block;
height: 253px;
width: 204px;
margin-bottom: 10px;
padding: 6px 6px 14px;
}
#shop ul.items li span img {
border: 1px solid #e4e0d1;
}
#shop ul.items li span.price {
float: right;
background: none;
color: #FFFFAC;
display: inine-block;
font-size: 17px;
height: 20px;
line-height: 20px;
width: 80px;
margin: 0;
padding: 0;
text-align: right;
}
#shop ul.items li a.buy {
background-color: #ffe680;
color: #C3A33B;
display: block;
font-family: 'Arial Black';
font-size: 14px;
height: 20px;
line-height: 20px;
width: 80px;
border-radius: 3px;
margin: 13px auto 0;
padding: 1px 0 4px;
text-align: center;
text-decoration: none;
}
#shop ul.items li.last {
margin-right: 0;
}
/*------------------------------ FOOTER ------------------------------*/
#footer {
padding: 0 5px;
}
#description {
background: url(../images/border-dashed.jpg) repeat-x left bottom;
margin: 0 0 30px;
padding: 0 0 30px;
}
#description div {
float: left;
width: 180px;
margin-right: 50px;
}
/*#description div a.logo {
background: url(../images/logo-footer.gif) no-repeat;
display: block;
height: 30px;
width: 175px;
margin: 0 0 10px;
}
*/
#description div span {
padding-bottom: 5px;
color:#ffe680;
display: block;
font-size: 11px;
line-height: 20px;
text-shadow: 1px 1px #C3A33B;
}
#description div span a {
color: #ffe680;
text-decoration: none;
text-shadow: 1px 1px #C3A33B;
}
#description p {
color: #ffe680;
font-size: 13px;
line-height: 20px;
margin: 20px 0;
text-align: justify;
text-shadow: 1px 1px #C3A33B;
}
#description p a {
color: #ffe680;
text-shadow: 1px 1px #C3A33B;
}
#footer div.navigation {
color: #ffe680;
font-size: 14px;
line-height: 20px;
width: 338px;
margin: 0 auto 20px;
text-shadow: 0 1px 0 #C3A33B;
}
#footer div.navigation a {
color: #ffe680;
padding: 0 15px;
text-decoration: none;
text-shadow: 1px 1px 0 #C3A33B;
}
#footer div.navigation a:hover {
color: #FFFFAC;
}
/*------------------------------ For IE6 ------------------------------*/
#background {
_height: 1440px;
min-height: 100%;
}
#featured a.button {
_top: 299px;
}
#blogs {
_height: 620px;
}
#blogs div.buttons, #blogs div.blog-entry-buttons {
_top: 620px;
}
I know this is a lot, and I'm not asking for anyone to look through the entirety of the code and provide me with completely revamped code that I can use right off the bat. I could really just use some help figuring out an algorithm to put into place for creating these randomly generated images on the page.
Any help that can be provided is very much appreciated! Thank you all!
I ended up creating an iframe and pulling the photos from E-bay's site regardless. Couldn't create live image pulls due to built-in security, so I had to go ahead and use images manually in a DB.
Also created an href redirect to the owner's ebay sales page, which worked out when it came to overall sales of the shirts / products, etc.
I have this JAVA script at the moment.
/* ******************************************************************** */
/* Generated by: http://csscreator.com */
/* ******************************************************************** */
html,
body {
margin: 0;
padding: 0;
text-align: center;
BACKGROUND: #fff;
font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
}
a {
color: #fff;
text-decoration: none;
white-spaces: nobreak
}
li {
color: #fff;
}
body {
color: #BAC6DE
}
#pagewidth {
width: 1395px;
text-align: left;
margin: 0px auto;
}
#header {
position: relative;
height: 100px;
width: 1395px;
display: block;
overflow: none;
padding: 0px 0px 0px 0px;
}
#header h2 {
color: #fff;
padding: 0px 0px 0px 60px;
}
#header p {
color: #fff;
padding: 10px 0px 0px 60px;
}
#maincol {
background-color: #BAC6DE;
position: relative;
width: 1395px;
height: 800px;
padding: 0px 0px 0px 0px;
Margin: 0px 0px 0px 0px;
}
#widgetcontainer {
background-color: #00386B;
position: relative;
width: 1175px;
height: 100%;
Margin: 0px 0px 0px 0px;
Padding: 0px 0px 0px 10px;
Overflow: auto;
}
.widget {
background-color: #BAC6DE;
float: left;
width: 200px;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}
#result p {
color: #000;
}
#footer h2 {
color: fff;
padding: 0px 0px 0px 0px;
}
#footer p {
color: fff;
padding: 0px 50px 0px 60px;
font-family: 'Monotype Corsiva', 'Apple Chancery', 'ITC Zapf Chancery', 'URW Chancery L', cursive;
font-size: 120%;
margin-right: 2px;
margin-top: 8px;
}
/* ******************************************************************** */
/* Clearfix: http://csscreator.com/attributes/containedfloat.php */
/* ******************************************************************** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility;
hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
/* ******************************************************************** */
/* Styling for widgets hover */
/* ******************************************************************** */
.current {
color: #00386B;
display: block;
}
.imgHover {
display: inline;
position: relative;
}
.imgHover .hover {
display: none;
position: absolute;
z-index: 1;
}
.hover {
height: 575px;
width: 200px;
background: #BAC6DE;
}
.hover a {
display: block;
padding: 2px;
font-size: 80%;
padding-left: 5px;
}
.hover a:link {
/* Applies to all unvisited links */
text-decoration: none;
font-weight: none;
background-color: #BAC6DE;
color: #fff;
}
.hover a:hover {
/* Applies to links under the pointer */
text-decoration: none;
font-weight: bold;
background-color: #BAC6DE;
color: #fff;
}
.input {
border: 2px inset #fff;
background: #eee;
height: 30px;
margin-bottom: 40px;
}
.input:hover {
border: 2px solid #f00;
background: #ff6;
}
.button {
display: none;
}
label {
display: block;
width: 150px;
float: left;
margin: 2px 4px 6px 4px;
text-align: right;
}
br {
clear: left;
}
/* ******************************************************************** */
/* Styling for console panel */
/* ******************************************************************** */
a:focus {
outline: none;
}
a.trigger {
position: absolute;
background: #9E00F8 url(../images/plus.png) 6% 55% no-repeat;
text-decoration: none;
font-size: 16px;
letter-spacing: -1px;
font-family: verdana, helvetica, arial, sans-serif;
color: #fff;
padding: 4px 12px 6px 30px;
font-weight: bold;
z-index: 2;
}
a.trigger.left {
left: 0;
border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
a.trigger.right {
right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
}
a.trigger:hover {
background-color: #59B;
}
a.active.trigger {
background: #666 url(../images/minus.png) 6% 55% no-repeat;
}
.panel {
color: #CCC;
position: absolute;
display: none;
background: #9E00F8;
height: 800px;
width: 800px;
z-index: 1;
}
.panel.left {
left: 0;
padding: 26px 0px;
border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.panel p {
font-size: 11px;
}
<!doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>Hub Page</title>
<meta charset="utf-8" />
<meta generator="csscreator.com" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9SmF2YVNjcmlwdA==+/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slidePanel.min.js"></script>
<script>
$(function() {
$(".imgHover").hover(function() {
$(this).children("img").fadeTo(200, 0.1).end().children(".hover").show();
}, function() {
$(this).children("img").fadeTo(200, 1).end().children(".hover").hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
// default settings
// $('.panel').slidePanel();
// custom settings
$('#panel2').slidePanel({
triggerName: '#trigger1',
triggerTopPos: '0px',
panelTopPos: '0px'
});
});
</script>
<SCRIPT LANGUAGE="JavaScript">
function ClipBoard() {
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("RemoveFormat");
Copied.execCommand("Copy");
alert("Template Copied");
}
</SCRIPT>
<!-- Please link back to http://csscreator.com -->
<link rel="stylesheet" href="style/homepage.css" type="text/css" />
</head>
<body>
<div id="pagewidth">
<div id="header">
<IMG SRC="images/header.jpg" align=right>
</a>
<TEXTAREA ID="holdtext" STYLE="display:none;">
</TEXTAREA>
<SPAN ID="copytext" STYLE="height:150;width:162;display:none;">
http://kana.ifdsgroup.co.uk/attachments/attach/uk/</SPAN>
</P>
</div>
<div id="wrapper" class="clearfix">
<div id="maincol">
<div class="widget">
<div class="hover">
<!----------START NAVIGATION PANEL----------->
TEAM HOME
KANA IQ
EMAIL DRAFT
TEAM DOCUMENTS
<!----------END NAVIGATION PANEL----------->
</div>
</div>
<div id="widgetcontainer">
<!----------Start Team Home Links----------->
<font size=5><strong><p>Bulletin Board. . .</p></strong></font>
<P>Please Enter Your First Bulletin Here . . .</P>
<!----------End Team Home Links----------->
</div>
<br clear=all>
</div>
</div>
</div>
</div>
</body>
</html>
Please can someone tell me why the text in the right hand DIV (Dark blue) is lower than the text in the left DIV (light blue)?
I have changed the padding, the margins but i cant get it to line up correctly.
You have to take note that browsers have their own pre-defiend styles for elements.
As "Bulletin Board..." is a p tag, browsers will add their own margins to that element. Most developers will use a reset stylesheet to avoid these issues. You could also just add margin: 0px; to the p tag and it would solve the issue.
<p> has a margin of 1em. Just inspect the the code using dev console.
p{
margin :0;
}
This will fix it. But please use normalize.css to fix browser specific default values.
Try this: your problem is margin of p tag. it have default margin. so, you can reset the margin of p tag by following code
Add p{margin:0;}code in css
This is because most browsers by default add some margins and paddings to the paragraph tags. You can either use a css reset file or just remove the margins yourself.
#widgetcontainer p{
margin: 0px;
}
I need the sidebar to not go over the footer nav. I can't figure out how to edit the css for this. Here's a preview, with html and css. So what I'm looking for is a "collision" off the footer border-top so the sidebar can interact with it.
http://codepen.io/TheGamingHideout/pen/reayx
HTML:
<html>
<head>
<title>Home - POG</title>
<link rel="shortcut icon" href="http://www.thegaminghideout.com/pog/favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- This Template is a WiP - Please report any bugs to the administrative team at The Gaming Hideout. Thank you. All rights reserved. -->
</head>
<body>
<div id="wrap">
<div id="header">
<h1><img src="http://www.thegaminghideout.com/pog/VexIMG/header.png" alt="Possessed Gaming" width="760" height="60"></h1>
</div>
<div id="navigation">
<div class="navlinks">
<div id="output2">
</div>
</div>
<script src="nav.js"></script>
</div>
<div id="buttons">
<img src="http://www.thegaminghideout.com/pog/VexIMG/donate.png">
</div>
<div id="body">
<center>
<h2>Welcome to Possessed Gaming DarkRP!</h2>
<h4>Owned by PossessedGaming</h4>
</center>
<p>Thanks for choosing our GMod server! You are currently playing DarkRP on PossessedGaming. Make sure to read and follow the rules below!</p>
<br>
<h3>Rules</h3>
<ul>
<li>Do NOT RDM</li>
<li>NLR 3 Minutes!</li>
<li>Respect Staff</li>
<li>Do NOT spam chat or mic</li>
<li>Have Fun!</li>
</ul>
<p>Disobeying these rules or finding loopholes around them can and will result in punishments including kicks, bans, mutes, weapon strips, and jails.</p>
<br>
<p>Click here to apply for staff!</p>
<div id="latest">
<center>
<img src="http://www.thegaminghideout.com/pog/VexIMG/Index/latest.png">
<p id="output1"></p>
<script src="latest.js"></script></center>
</div>
</div>
<div id="footer">
<div id="copyright">
Copyright © The Gaming Hideout
<br>We own no rights on any game on this site unless otherwise noted.
<br>All Rights Reserved.
</div>
<div id="footnav">
<script src="footnav.js"></script>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
body {
background: url(http://www.thegaminghideout.com/pog/VexIMG/bg.png);
background-color: black;
background-size: 100%;
background-repeat: no-repeat;
font-size: 12px;
color: #666666;
}
#font-face {
font-family: 'karmatic_arcaderegular';
src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot');
src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff2') format('woff2'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff') format('woff'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.ttf') format('truetype'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.svg#karmatic_arcaderegular') format('svg');
font-weight: normal;
font-style: normal;
}
p, h1, h2, h3, h4, h5, h6, caption, text, font, li, ul {
color: white;
}
#wrap {
width: 760px;
margin: auto;
overflow: hidden;
}
#header {
height: 60px;
width: auto;
background: #db6d16
url(VexIMG/header.png);
}
#navigation {
width: 760px;
height: 35px;
position: absolute;
border-bottom: 2px solid #000000;
background: red;
padding: 0px;
}
#navigation .padding {
padding: 2px;
}
#navigation .navlinks {
position: absolute;
top: 1px; left: 0px;
}
#navigation .navlinks ul {
margin: 0px;
padding: 0px;
text-align: center;
list-style-type: none;
width: 760px;
height: 35px;
}
#navigation .navlinks li {
position: relative;
top: 5px;
margin: 0px 5px 0px 5px;
list-style-type: none;
display: inline;
}
#navigation .navlinks li a {
color: #000000;
padding: 5px 0px 9px 0px;
text-decoration: none;
font-size: 18px;
font-family: karmatic_arcaderegular;
padding: 5px 0px 9px 0px;
}
#navigation .navlinks li a:hover {
margin: 0px;
color: #ffffff;
background: red;
text-decoration: underline;
}
#buttons {
padding-bottom: 2000px;
margin-bottom: -2000px;
width: 155px;
border-left: 2px solid #FFA500;
border-right: 2px solid #FFA500;
float: right;
font-family: Terminal, Arial, Times New Roman;
background: linear-gradient(#700000, #250000);
}
#latest {
border: 1px ridge #FFA500;
width: 300px;
height: auto;
background: linear-gradient(#000000, #252525, #000000);
clear: left;
}
#latest p {
font-family: Times New Roman;
}
#body {
padding-top: 50px;
width: 600px;
font-family: Arial, Verdana, Terminal;
font-size: 14px;
}
#body .secret img {
width: 150px;
height: 100px;
border: 2px solid black;
}
#body .game {
padding: 3px 3px 10px 3px;
}
#body .game img {
align: center;
float: left;
width: 175px;
height: 101px;
border: 2px ridge #ff0000;
}
#body .game caption {
padding-left: 1px;
}
#body .space {
padding-top: 10px;
padding-bottom: 10px;
border-top: 4px ridge red;
border-bottom: 4px ridge red;
}
#body .game caption {
margin-top: 2px;
float: right;
font-family: Terminal, Arial, Verdana, San-Serif;
font-size: 12px;
color: #000000;
border-bottom: 2px dashed #e9e9e9;
}
#body .game a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#body .game a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer {
width: 730px;
height: 60px;
font-family: Tahoma, Arial, Terminal, San-Serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}
#footer li {
padding: 0px 2px 0px 2px;
float: right;
display: inline;
text-align: left;
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size:; 10px;
}
#footer a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#footer a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer #footnav {
display: inline;
width: 310px;
float: right;
text-align: left;
position: relative;
bottom: 65px;
}
Adding position: relative to the wrapper and positioning #buttons with position: absolute is a way to fix this. Do keep in mind that you need to know the exact distance between the top and bottom of the #wrap and #buttons.
That said there are probably other solutions as well.
#wrap {
position: relative;
width: 760px;
margin: auto;
overflow: hidden;
}
#buttons {
position: absolute;
right: 0px;
top: 110px;
bottom: 95px;
width: 155px;
border-left: 2px solid #FFA500;
border-right: 2px solid #FFA500;
font-family: Terminal, Arial, Times New Roman;
background: linear-gradient(#700000, #250000);
}
use margin-bottom: -648px; padding-bottom: 648px; for #buttons instead of padding-bottom: 2000px; margin-bottom: -2000px; This will fix for your current view.But if you want it dynamic at every page you may need to use javascript to detect the screen height and determine the padding-bottom and margin-bottom.hope it will help you.
like this?
http://codepen.io/mmp1992/pen/bnrvw
#buttons {
height:645px;
}
and remove the padding and margin.
I hope someone can help. This is driving me nuts.
You can see the page i'm having problems with at www.jomundayphotography.com/template.html.
The dropdown menu is working everywhere but Internet Explorer (all versions are having problems).
The Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href="css/navcss.css" rel="stylesheet" type="text/css"/>
<link href="css/csstest2.css" rel="stylesheet" type="text/css">
<script src="JavaScript/jq.js" type="text/javascript"></script>
<script src="JavaScript/easing.js" type="text/javascript"></script>
<script src="JavaScript/color.js" type="text/javascript"></script>
<script src="JavaScript/navjs.js" type="text/javascript"></script>
<script src="JavaScript/mainTest2.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="header">
<img src="images/Logos/logo.png" id="logo" alt="Sinclairs Solicitors Logo"/>
<img src="images/Logos/conveyancingqualitylogo.gif" id="conveyancingQuality" alt="Conveyancing Quality"/>
<div id="motto">
<p>
<span id="motto1">Professional</span>
<span id="motto2">Experienced</span>
<span id="motto3">Approachable</span>
</p>
</div>
</div>
<div id="nav"><div id="navBar">
<ul>
<li id="aboutUsHeading"class="menuItem">about Us</li>
<li id="teamMenuHeading" class="menuItem">
the team
<ul>
<li class="subMenuItem">Henry Drucker</li>
<li class="subMenuItem">Joanna Yianni</li>
</ul>
</li>
<li id="servicesMenuHeading" class="menuItem">
services
<ul>
<li class="subMenuItem">Residential Property</li>
<li class="subMenuItem">Commercial Property</li>
<li class="subMenuItem">Company Commercial</li>
<li class="subMenuItem">Landlord and Tenant</li>
<li class="subMenuItem">Wills</li>
<li class="subMenuItem">Trust and Probate</li>
<li class="subMenuItem">Family Life</li>
<li class="subMenuItem">Employment</li>
<li class="subMenuItem">General Litigation</li>
<li class="subMenuItem">Personal Injury</li>
</ul>
</li>
<li id="contactMenuHeading" class="menuItem">contact us
<ul>
<li class="subMenuItem"> find us</li>
</ul>
</li>
</ul>
</div></div> <!--end of navBar-->
<div id="content">
<div class="contentBox" id="sideBarLeft">
<div id="miniMenu">
<ul>
<li><nobr>Residential Property</nobr></li>
<li><nobr>Commercial Property</nobr></li>
<li><nobr>Company Commercial</nobr></li>
<li><nobr>Landlord and Tenant</nobr></li>
<li><nobr>Wills</nobr></li>
<li><nobr>Trust and Probate</nobr></li>
<li><nobr>Family Law</nobr></li>
<li><nobr>Employment</nobr></li>
<li><nobr>General Litigation</nobr></li>
<li><nobr>Personal Injury</nobr></li>
</ul>
</div>
</div>
<div class="contentBox" id="galleryBox">
<div id="contentHolder">
<p id="p1">moving House?</p>
<p id="p3">At Sinclairs we have over<br/>25 years experience,<br/>helping our clients<br/>through the moving process,<br/>advising on how to stay<br/>in control of their rented<br/>properties,and in all areas<br/>of legal documentation.</p>
<p id="p4">renting?</p>
<p id="p7">need to make a Will?</p>
<p id="contact">0208 203 3344 <br/>info#sinclairssolicitors.com<button class="myButton" email>email us</button><br/>20 Watford Way, Hendon, NW4 3AD</p>
<div>
</div>
<div class="contentBox" id="galleryBox2">
<!--<img id="image1" src="images/civillitigation2.jpg"class="top"/>-->
</div>
<div class="contentBox" id="galleryBox3"><p></p><img src="images/speechbubble.png"><span>read what our clients have to say about us</span><div id="testimonialTeaser"></div></div>
</div>
</div>
</div>
</div> <!--container end-->
<div id="footertop"></div>
<div id="footer"></div>
</body>
</html>
The CSS
#charset "utf-8";
/* CSS Document */
#charset "utf-8";
/* CSS Document */
#charset "utf-8";
/* CSS Document */
/* reset */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* #font-face #/ /* Generated by Font Squirrel (http://www.fontsquirrel.com) on May 2, 2011 04:30:37 PM America/New_York */
/* end reset*/
body {
position:relative;
background: url(../images/Backgrounds/bgtile1.gif);
z-index: -30;
overflow: scroll;
}
#container {
position:relative;
top: 0px;
width: 1002px;
height:850px;
margin: 20px auto 0px auto;
background-color: #fff;
/*border-right: 15px #18c662 solid;*/
}
#header {
position:relative;
display: block;
clear: both;
z-index:10;
margin: 0px;
height: 170px;
background-image: url(../images/Backgrounds/headerbg.gif);
background-repeat:repeat-x;
}
#logo {
clear:both;
padding-top: 20px;
padding-bottom:15px;
padding-left: 30px;
float:left;
height: 140px;
background: none;
}
#conveyancingQuality {
float:right;
height: 95px;
padding-top: 10px;
}
#motto {
clear:both;
position: absolute;
line-height:.9;
left: 470px;
top: 30px;
color: #000;
width: 200px;
font-size: 1.8em;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
margin: 0px;
font-family: 'Ropa Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-style: italic;
line-height: 1.3;
}
#motto1 {
display: none;
}
#motto2 {
display: none;
margin-left: 40px;
}
#motto3 {
display: none;
margin-left: 70px;
}
#navBar {
clear:both;
width: 100%;
margin: 0 auto;
}
#navBar a {
display: block;
width: 238.5px;
height: 18px;
/*margin-right: 16.25px;
margin-left: 16.25px;*/
padding: 6px;
border-right:0px #fff solid;
text-decoration:none;
background: url(../images/Buttons/buttona.png);
height: 50px;
background-repeat:no-repeat;
color: #000;
font-family: 'Ropa Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size:1.8em;
}
#aboutUsHeading a {
/*margin-left: 30.25px;*/
}
#contactMenuHeading a{
/*margin-right: 0px;*/
border-right:0px #fff solid;
}
#navBar a:hover {
color: #039;
color: rgba(21, 68, 86, .9);
background: url(../images/Buttons/buttonb.png);
background-repeat: repeat-x;
}
#navBar li.menuItem {
/*z-index:21;*/
margin-top:-6px;
text-align:center;
margin-right:0px;
float:left;
line-height: 1.6;
font-size:100%;
height: 30px;
border-right:0px #fff solid;
}
.subMenuItem {
position:relative;
top: 0px;
display: none;
font-size:80%;
text-indent: 15px;
text-align: left;
border-right:0px #fff solid;
height: 50px;
z-index:30;
}
#navBar ul ul li a {
height:30px;
background: url(../images/Buttons/submenubuttona.png);
background-repeat: no-repeat;
font-size: 95%;
}
#navBar ul ul li a:hover {
background: url(../images/Buttons/submenubuttonb.png)
}
#content {
clear: both;
z-index: 22;
position: absolute;
top: 235px;
}
.contentBox {
position: absolute;
float:left;
border: 1px #154456 solid;
margin: 0px;
height: 600px;
/*background-image: url(../images/Backgrounds/contentbg2.png);
background-repeat: repeat-x;
/*-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;*/
}
#sideBarLeft {
position:relative;
width: 1000px;
}
#miniMenu {
padding: 5px 0px;
margin: 210px 0px 5px 13px;
font-family: 'Ropa Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
background: none;
width: 200px;
-webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .7);
-moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .7);
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .7);
}
#miniMenu a {
display:block;
text-decoration:none;
font-size:110%;
height: ;
padding: 3px 3px 3px 10px;
margin-top: 0px;
margin-bottom: 3px;
width:90%;
background-image: url(../images/Buttons/submenubuttona.png);
background-repeat:no-repeat;
color: #000;
font-family: 'Ropa Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
text-indent:0px;
}
#miniMenu a:hover {
text-decoration:none;
color: rgba(21, 68, 86, .9);
background-image: url(../images/Buttons/submenubuttonb.png);
font-style:italic;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .7);
-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .7);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .7);
}
#articleBox {
left: 210px;
width: 580px;
}
#sideBarRight {
left: 799px;
width: 200px;
}
.contentBox, #container, #content {
-webkit-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, .7);
-moz-box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, .7);
box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, .7);
}
#galleryBox {
positioning: absolute;
top: 13px;
left: 10px;
height: 170px;
width: 980px;
background: url(../images/Backgrounds/dep_5272790-London-Skyline.png);
}
#contentHolder{
width: 550px;
height:100%;
background:#fff;
margin-left:250px;
z-index: 10
}
#contentHolder p {
padding: 0;
z-index: 11;
padding-top: 10px;
}
#p1 {
display: none;
font-family: 'Droid Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 80%;
color: #154456;
margin-left: 470px;
}
#p3 {
position: absolute;
top: 0px;
display: none;
margin-left: 320px;
font-family: 'Droid Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 100%;
text-align:center;
color: #154456;
}
#p4 {
display: none;
font-family: 'Droid Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 80%;
color: #154456;
margin-left: 470px;
}
#p7 {
display: none;
font-family: 'Droid Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 80%;
color: #154456;
margin-left: 470px;
}
#contact {
display: none;
font-family: 'Droid Sans', "Trebuchet MS", Helvetica, Arial, sans-serif;
font-size: 200%;
color: #154456;
margin-left: 0px;
}
#contact a{
color: #154456;
text-decoration:none;
}
#contact a:hover{
text-decoration: underline;
}
#contactBox {
display: block;
width: 200px;
height: 100px;
position:absolute;
top: 76px;
background: #3F3
}
.myButton {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #154456) );
background:-moz-linear-gradient( center top, #ededed 5%, #154456 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#154456');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #154456;
display:inline-block;
color:#f5f5f5;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
}.myButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #154456), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #154456 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#154456', endColorstr='#ededed');
background-color:#154456;
}.myButton:active {
position:relative;
top:1px;
}
#galleryBox2 img {;
position:absolute;
width: 100%;
height:100%;
margin: 0 auto;
}
#image2 {
display: block;
}
#image1 {
display: block;
}
#galleryBox2 img:hover {
}
#galleryBox2 {
positioning: absolute;
top: 190px;
left: 215px;
height: 375px;
width: 210px;
background-image: url(../images/Backgrounds/contentbg2.png);
}
#galleryBox3 {
positioning: absolute;
top: 190px;
left: 440px;
height: 375px;
width: 538px;
background-image: url(../images/Backgrounds/contentbg2.png);
}
#testimonialTeaser {
position: relative;
top: 12px;
background:none;
/*background: #18c662;*/
width: ;
height: 100px;
margin: 0 auto;
}
#footertop {
margin: 40px 0px 0px 0px;
background: url(../images/Backgrounds/footerbg.png);
background-repeat: repeat-x;
position:relative;
top:0px;
height:75px;
}
#footer {
background:#FFFFFF;
position:relative;
top:75px;
height:auto;
}
The JavaScript
// JavaScript Document
$(document).ready(function() {
var teamMenuHeading = $('#teamMenuHeading');
var teamSubMenu = $('#teamMenuHeading li');
var teamSubMenuLinks = $('#teamMenuHeading a');
var buttonb = ['images/buttonb.gif'];
//alert (teamSubMenu.length)
teamMenuHeading.hover(
function(){
teamSubMenu.stop(true,true).slideDown(700, 'easeOutSine' //, function() {
)
}, //end teamMenuHeading hover first function
function(){
teamSubMenu
.stop(true,true).slideUp(200, 'easeOutSine'//, function() {
)
}); //end teamMenuHeading hover
var servicesMenuHeading = $('#servicesMenuHeading')
var servicesSubMenu = $('#servicesMenuHeading li');
var servicesSubMenuLinks = $('#servicesMenuHeading a');
//alert (servicesSubMenu.length)
servicesMenuHeading.hover(
function(){
servicesSubMenu.stop(true,true).slideDown(700, 'easeOutSine' //, function() {
)
}, //end teamMenuHeading hover first function
function(){
servicesSubMenu
.stop(true,true).slideUp(200, 'easeOutSine'//, function() {
)
}); //end servicesMenuHeading hover
var contactMenuHeading = $('#contactMenuHeading')
var contactSubMenu = $('#contactMenuHeading li');
var contactSubMenuLinks = $('#contactMenuHeading a');
//alert (servicesSubMenu.length)
contactMenuHeading.hover(
function(){
contactSubMenu.stop(true,true).slideDown(700, 'easeOutSine' //, function() {
)
}, //end teamMenuHeading hover first function
function(){
contactSubMenu
.stop(true,true).slideUp(500, 'easeOutSine'//, function() {
)
}); //end contactMenuHeading hover
}); //end ready
Number 1 rule for styling lists:
Reset your lists: ul, li { margin:0;padding:0 }
Do not style LIs, other than display:, position: and float:.
Use display:block and put all styling on your A-tag.
This will clear up 99% of list layout problems.
See my tutorial: http://preview.moveable.com/JM/ilovelists/