Jump to content

centering slideshow and other contents inside div


setsuna
 Share

Recommended Posts

Hey everyone, Im working on this page but cant seem to adjust the slideshow inside my div to be centered. The same goes for the nav bar and clock inside my header.

 

Could someone please tell me how i can fix this? its driving me nuts...

 

Basically want my header to look like the PNG below.

 

HTML

<!DOCTYPE html> 
<html lang=" en"> 
	
	<head> 
		<title>Lorem Ipsum</title> 
		<meta charset=" utf-8">
		<link rel="stylesheet" href="omega.css">
		
	</head>
		<div id="wrapper">	
	
		<header class="imgParentSec">
            <div class="imgSec"><img alt="logo" src="images/logo.png" width="200px" height="100px" style="margin:10px 0px"></div>
		
			

			
			
			<div id="divsearch" align="right">
					<form action="http://www.google.ca/search?query=" method="query">
				<input type="text" name="query" size="15" maxlength="70">
				<input type="submit" name="Submit" value="Search"></form>
				
				<h1>Lorem Ipsum</h1>				
				
				<script type="text/javascript">
					tday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
					tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");

					function GetClock(){
					var d=new Date();
					var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear();
					if(nyear<1000) nyear+=1900;
					var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;

					if(nhour==0){ap=" AM";nhour=12;}
					else if(nhour<12){ap=" AM";}
					else if(nhour==12){ap=" PM";}
					else if(nhour>12){ap=" PM";nhour-=12;}

					if(nmin<=9) nmin="0"+nmin;
					if(nsec<=9) nsec="0"+nsec;

					document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
					}

					window.onload=function(){
					GetClock();
					setInterval(GetClock,1000);
					}
				</script>
				<div id="clockbox" style= "color:#ffffff;"></div>
				
		</header>
	
	<main>
		<body> 

	<div id="sidebar">
	
	<nav id="nav-div">
		<ul id="dropdown">
			<li class="nav-item"><a href="index.html">Home</a></li>
			<li class="nav-item"><a href="#">Web Design</a>
				<ul>
					<li><a href="http://www.google.com">Google</a></li>
					<li><a href="https://lethbridge.instructure.com/login/canvas">LC Canvas</a></li>
					<li><a href="#">TBD</a></li>
				</ul>
			</li>
			<li class="nav-item"><a href="#">Survey</a>
				<ul>
					<li><a href="survey.html">take the survey</a></li>
				</ul>
				
			</li>
			<li class="nav-item"><a href="#">Directory</a>
				<ul>
					<li><a href="aboutme.html">about the developer</a></li>
					
				</ul>			
			</li>
			<li class="nav-item"><a href="#">Contact</a>
				<ul>
					<li><a href="mailto:nickpc15@gmail.com">eMail Me</a></li>
				</ul>			
			</li>
		</ul>
	</nav>

<div class="vgap1">
</div>
	
	<div class="div1">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	
	
	</div>
	
	<div class="div2">

	<div class="slides">
		<img src="images/pic1.jpg">
		<img src="images/pic2.jpg">
		<img src="images/pic3.jpg">
		<img src="images/pic4.jpg">
		<img src="images/pic5.jpg">
		<img src="images/pic6.jpg">
		<img src="images/pic7.jpg">
		<img src="images/pic8.jpg">
		<img src="images/pic10.jpg">
	
	<script type="text/javascript">
		function nextSlide() {
		var q = function(sel) { return document.querySelector(sel); }   
		q(".slides").appendChild(q(".slides img:first-child"));
		}
		setInterval(nextSlide, 3000)
	</script>
	</div>


	</div>
	
	<div class="div3">
		<video width="320" height="240" controls>
		<source src="movie.mp4" type="video/mp4">
		<source src="movie.ogg" type="video/ogg">
		Your browser does not support the video tag.
		</video>
	</div>

	<div class="div4">
	
		<script LANGUAGE="Javascript" type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
			<script>
			function initialize()
			{
			var mapCanvas = document.getElementById('map-canvas');
			var mapOptions = 
			{
				center: new google.maps.LatLng(49.661997, -112.807087),
				zoom: 8,
				mapTypeID:google.maps.MapTypeId.ROADMAP}
			var map = new google.maps.Map(mapCanvas, mapOptions)
			}
			google.maps.event.addDomListener(window, 'load', initialize);
			</script>
			<div id="map-canvas"></div>
	</div>
	

		<div class="vgap1">
	</div>
	
	<div class="div5">
		<p>The quick brown fox jumped over the lazy dog.</p>
		<p>THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.</p>
	</div>

<div class="div6">
		<table width="100%">
			<tr>
				<td colspan="12" align="center" bgcolor="#333333"><font color="FFFFFF"><b>Schedule</b></font></td>
			</tr>
				
				<tr bgcolor="#AAAAAA">
				<td bgcolor="white"></td>
				<td>8-9am</td>
				<td>10-11am</td>
				<td>12pm-13pm</td>
				<td>14pm-15pm</td>
				<td>16pm-17pm</td>
				
			</tr>
			<tr bgcolor="EEEEEE">
				<th>Monday</th>
				<td>sleep</td>
				<td>look at alarm</td>
				<td bgcolor="#D90000"><font color="#ffffff">throw alarm</td>
				<td colspan="2">sleep some more</td>
				
				
			</tr>
			<tr bgcolor="EEEEEE">
				<th>Tuesday</th>
				<td colspan="7"><font color="#FFBF00">bathroom</td>
				
			</tr>
			<tr bgcolor="EEEEEE">
				<th>Wednesday</th>
				<td colspan="2" bgcolor="#FFFF26">repair alarm</td>
				<td colspan="5" bgcolor="#EEEEEE">read "fixing alarms for dummies"</td>
								
			</tr>
			<tr bgcolor="EEEEEE" rowspan="2">
				<th>Thursday</th>
				<td colspan="2">google alarm parts</td>
				<td colspan="2">question value of CAD</td>
				<td align="center">eat</td>
			</tr>
			<tr bgcolor="#EEEEEE">
				<th>Friday</th>
				<td bgcolor="#aacc00">buy new alarm</td>
				<td colspan="4">sleep</td>
				
			</tr>
			<tr bgcolor="#EEEEEE">
				<th>Saturday</th>
				<td colspan="5">enjoy free time I do not have</td>
			</tr>
			<tr bgcolor="#EEEEEE">
				<th>Sunday</th>
				<td colspan="5">enjoy some more free time i do not have</td>
			</tr>
		</table>
		</div>
	
	<div class="div7">
	
	<table style="width:100%">
		<a href="http://www.facebook.com">
			<img border="0" alt="facebook" src="images/facebook-flat-vector-logo-400x400.png" width="50" height="50"></a>
		<a href="http://www.twitter.com">
			<img border="0" alt="twitter" src="images/Twitter-icon.png" width="50" height="50"></a>
		<p align="right">Address:555 Evergreen Terrace, Copyright © 2015 | Privacy Policy | Legal Issues | <a href="mailto:nickpc15@gmail.com">Contact</a></strong></p>
		
			</div>
		<audio autoplay="autoplay" loop="loop" hidden="true">
<source src="images/Sleep Away.mp3" type="audio/mpeg">
</audio>
	</main>

CSS

body
{
	background-image: url("images/background.jpg");
	font-family:Humanst521;
	
	}

.div1,.div2,.div3,.div4
		{
		border:1px solid;
		}

.list{
		display: inline;
		}
		
.imgParentSec{position:relative;}
.imgSec{
position:absolute;
left:10px;
top:0;
}

.div1
	{
	height: 525px;
	float: right;
	width: 40%;
	border-color:#AAAAAA;
	color:#20202F;
	background-color:white;
	overflow: hidden;
	padding: 10px 10px 10px 10px;
	}


.div2
	{
	height:250px;
	float:left;
	width: 55%;
	border-color:#AAAAAA;
	background-color:white;
	overflow: hidden;
	padding: 10px 10px 10px 10px;
	}
	
.div3{
    height:250px;
	float:left;
	width: 27.5%;
	border-color:#AAAAAA;
	color:#20202F;
	background-color:white;
	overflow: hidden;
	padding: 10px 10px 10px 10px;
	margin-right:7px;
	}
.div4{
    height:250px;
	float:;
	width: 25%;
	border-color:#AAAAAA;
	color:#20202F;
	background-color:white;
	overflow: hidden;
	padding: 10px 10px 10px 10px;
	
	}
.div5
	{
	height: 250px;
	float: left;
	width: 40%;
	border-color:#AAAAAA;
	color:#20202F;
	background-color:white;
	overflow: hidden;
	padding: 10px 10px 10px 10px;
	}
.div6
	{
	height:250px;
	float:right;
	width: 55%;
	border-color:#AAAAAA;
	color:#20202F;
	background-color:white;
	overflow: hidden;
	padding: 10px 10px 10px 10px;
	margin-bottom:10px;
	}
.div7
	{
	height:70px;
	width:99%;
	color:white;
	background-color:#333333;
	border:2px solid #AAAAAA;
	overflow: hidden;
	font-family:Humanst521, verdana, arial, sans-serif;
	letter-spacing: 0.1em;
	font-size: 12px;
	margin-top:10px;
	padding: 10px 5px 10px;
	
	}
	
.divsurvey
	{
	height: 100%;
	float: center;
	width: 98%;
	border-color:#AAAAAA;
	color:#20202F;
	background-color:white;
	overflow: hidden;
	padding: 10px 10px 10px 10px;
	}
	
#sidebar
{
	float:left;
	border:10px;
	padding-left:1%;
	padding-right:1%;
	border-left-style: solid;
	border-left-color: #BBBBBB;
	border-right-style: solid;
	border-right-color: #BBBBBB;
}

/* the slide container with a fixed size */
.slides {
  box-shadow: 0px 0px 3px black;
  margin: auto;
  width: 98%;
  position: relative;
  

  }

/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img { 
  display: block;
  position: absolute; 
  transition: opacity 1s;
  opacity: 0;
  width: 100%;
}

/* the first image is the current slide. it's faded in. */
.slides img:first-child { 
  z-index: 2; /* frontmost */
  opacity: 1;
}

/* the last image is the previous slide. it's behind the current slide and it's faded over. */
.slides img:last-child {
  z-index: 1; /* behind current slide */
  opacity: 1;
}
.vgap1
	{
	width:100%;
	height:10px;
	border: 0px;
	float: right;
	}	
.vgap2
	{
	width:1%;
	height:10px;
	border: 0px;
	float: right;
	}	
.hgap1
	{
	width:10%;
	height:10px;
	}

#wrapper {
	margin: 0 auto;
	width: 100%;
	min-width: 900px; max-width: 1200px;
	
	}

.buttonPosition{ text-align: center; }	
	

	
header 
{
	
	padding: 5px;
	background-color: #333333;
	
}
h1 {
	
	text-align: center;
	color:#FFFFFF;
	font: 4em "Humanst521", Arial, Helvetica, Geneva, sans-serif;
	
}

@font-face{
	font-family: "Humanst521";
	src: url('font/tt0288m_.ttf') format('truetype');
}

#map-canvas {
				width: 300px;
				height: 250px;
				}

				
clockbox{
	font-family:Humanst521;
	color:white;
}
				



#nav-div
{
	float:left;
	width:100%;
	text-align: center;
	border: 1.5px solid #FFFF26;
	border-bottom: none;
	
}

#dropdown
{
	margin-right:auto;
	margin-left:auto;
}
.slider {
  max-width: 95%;
  height: 210px;
  margin: 20px auto;
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 98%;
  height: 98%;
}
.slide1 {
  background: url("images/pic1.jpg");
      background-size: cover;
    animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;

} 
.slide2 {
  background: url("images/pic2.jpg");
      background-size: cover;
    animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
.slide3 {
    background: url("images/pic3.jpg");
      background-size: cover;
    animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}
.nav-item
{
	width:20%;
	margin-right:auto;
	margin-left:auto;
}

ul
{
	list-style: none;
	padding: 0px;
	margin: 0px;
}

ul li
{
	display: block;
	position: relative;
	float: left;
	
}

li ul
{
	width:100%;
	display: none;
	
}

ul li a 
{
	display: block;
	background: #FFBF00;
	padding: 5px 10px 5px 10px;
	text-decoration: none;
	white-space: nowrap;
	color: white;
	border-bottom: 1px solid #FFFF26;
	
}

ul li a:hover
{
	background: #FF4000;
}

li:hover ul 
{
	display: block;
	position: absolute;
	background:#FFBF00;
	
}

li:hover li 
{
	float: none;
	background:#FF8000;
	border-bottom: none;
}

li:hover a 
{
	background: #FF8000;
}

li:hover li a:hover 
{
	background: #FF4000;
}

img {
	float:left;
	padding:0px 15px 15px 0px;
	/*--position: absolute;
	transition: opacity .5s ease-in;
	max-width:100%;
	max-height:100%;
	margin: auto;
	display: block;
	}
img + img 
	{
	opacity: 0;
	*/
	}

p{
	font-family: 'Humanst521', verdana, arial, sans-serif;
	
}


main {
	background-color: #AAAAAA;
	color: #FFFFFF;
	padding: 10px 10px 10px 10px;
	overflow: hidden;
	font-family: 'Humanst521', sans-serif;
}
th{
	background-color:#FF8000;
	color: white;
	font-family: 'Humanst521', verdana, arial, sans-serif;
	letter-spacing: 0.1em;
	font-weight: strong;
	}

td
{
	
	text-align: center;	
	font-family: 'Humanst521', verdana, arial, sans-serif;
	letter-spacing: 0.1em;
	}





post-192328-0-24519700-1449044075_thumb.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...