The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Theme Page for Assignment
xerofoify
post Mar 14 2015, 09:41 PM
Post #1





Group: Members
Posts: 2
Joined: 14-March 15
Member No.: 22,363
https://zenit.senecac.on.ca/~emile.ohan/int...nt-02/index.png
I am trying to theme like this page.
This is my Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/sitecss.css">
<title>Nick's 2 Website</title>
</head>
<div id=nav>
<a href="../index.html">My zenit Account</a>
<a href="index.html">Home</a>
<a href="gallery.html">Photo Gallery</a>
<a href="video.html">Video</a>
<a href="audio.html">Audio</a>
<a href="html5.html">Html5</a>
<a href="tables.html">Tables with Css</a>
<a href="mortage/index.html">Forms</a>
<a href="extra/extra.html">Extra</a>
</div>
<body>
<div id="main">
<div id="bothsides">
<div id="leftside">
<div id=sidebarmain">
<h1>Home</h1>
<p>This website is to showcase the importance of using HTML 5, the newest major
verison of HTML. The major reasons primarly for most people moving to HTML5
include using less Javascript in their website design and being able to use
video and audio without dealing with the mess of plugins like flash in our
website when implementing media files. Further more the importance of making
your website have a similiar look and feel across all the pages for the user
is a important skill and in order to do this we use the same css file to do
this called normalize.css.
</p>
<h3>Honesty / CopyRight </h3>
<p>I declare that this assignment is wholly my own work in accordance with Seneca Academic Policy.
I also declare that I did not copy any part of this assignment manually or electronically from
any other source (including web sites) except for the information supplied by the INT222 instructors
and / or made available in this assignment for my use; nor have I distributed any part(s) of the
assignment to other students.</p>
<p>Signed-by:Nicholas Krause</p>
<p>Date:March 2nd 2015</p>
</div>
</div> <!-- end of left side -->
<div id="rightside">
<div id=sidebarmain">
<div id=smtitle">
<h2>Recommended Links</h2>
://zenit.senecac.on.ca/~emile.ohan/int222/assignments/assignment-02/index.pngdiv id=sidebarmain">
<h3>Links to Html5 Resource</h3>
</div>
<a href="http://www.w3.org/TR/html5/">HTML Standards</a><br />
<a href="http://www.html5rocks.com/en/">HTML 5 for Devolopers</a><br />
<h3>Css Resources</h3>
<a href="http://www.csszengarden.com/">Css Ideas</a><br />
<a href="http://developer.mozilla.org/en-US/docs/Web/CSS">Mozilla's Guide to Css</a> <br />
<h3>Javascript Resources</h3>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">Mozilla on Javascript</a><br />
<a href="http://www.codecademy.com/en/tracks/javascript">CodeAcademy</a><br />
<div id="redbreak">
</div>
<h3>Social Media Links</h3>
<div style="position: relative; background: url('images/social-media.png') no-repeat; width: 250px; height: 140px;">
<a href="http://facebook.com" title="Face Book" style="width: 23px; height: 23px; border: 0; position: absolute; top: 3px; left: 4px;"></a>
<a href="http://twitter.com" title="Twitter" style="width: 23px; height: 23px; border: 0; position: absolute; top: 3px; left: 31px;"></a>
<a href="http://pintrest.com" title="Pintrest" style="width: 23px; height: 23px; border: 0; position: absolute; top: 3px; left: 58px;"></a>
</div>
</div>
</div> <!-- end of right side -->
</div> <!-- end of both sides -->
<footer>
<script>
var dt=new Date(document.lastModified); // Get document last modified date
document.write('<hr />This page was last updated on '+dt.toLocaleString());
</script>
</footer>
</div>
</body>
</html>
And this is my Css so Far:
a {
text-decoration: none !important;
color: white;
}

a:hover {
color: black;
}

#indexbody {

color: green;
background-color: #CCCCCC;
font-size: 40px;
display: inline-block;
padding-right: 23px;
padding-left: 10px;
width:719px;
height:249px;
}
#index1 {
color: black;
background-color: white;
font-size: 15px;
display: inline-block;
padding:1em;
width:702px;
height:75px;

}

#index2 {
color: black;
background-color: white;
font-size: 15px;
display: box;
padding:1em;
width:702px;
height:210px;

}

#title {
font-weight: bold;

}

#sidebarmain {
display: box;
padding-right: 10px;
padding-left: 10px;
width: 249px;
height: 500px;
float: right;
background-color: #CCCCCC;
text-color:#000;
}

#linktitle {
font-size: 10px;
padding:0em;
margin:0em;
border:0em;
}
#link1 {
display: block;
width: 250px;
height: 52px;
91,1 30%
background-color: white;
color: grey;
padding:0;
border:0;
margin: 0;
}

#rl {
font-weight: bold;
text-decoration: underline;
text-align: center;
}

#redbreak {
background-color: red;
width:247px;
height:8px;
border-style: solid;
border-width: 2px;
}

#sideboxwhite {
border: solid black;
border-style: solid;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-bottom-width: 1px;
width:250px;
height:8px auto;
height: 15px;
background-color: white;
}

#smtitle {
font-weight: bold;
text-decoration: underline;
text-align: center;
}
#picture {
float: right;
padding: 5px;
margin:0px;
text-align: center;
font-size: 0;
display:inline-block;
}
#gallerybody {

color: green;
background-color: #CCCCCC;
font-size: 40px;
display: inline-block;
padding-right: 23px;
padding-left: 10px;
adding-right: 23px;
padding-left: 10px;
width:719px;
height:auto;
}
#gallery1 {
color: black;
background-color: white;
font-size: 15px;
display: inline-block;
padding:1em;
width: 702px;
height: 200px;

}
#pic1 {
border: 0;
position: absolute;
top: 200px;
left: 500px
}
figcaption {
text-align: center;
}
Any Help Would be great as have been trying to figture this out for the last few hours.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 16 2015, 04:48 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Start by making sure your HTML is correct. Validate at http://validator.w3.org .
Validate the CSS too, at http://jigsaw.w3.org/css-validator/ .
Those are two tools to have at hand.

You need a two column layout, see http://www.456bereastreet.com/lab/developi...sslayout/2-col/ .

At least, then you'll be on the right track and go from there.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 02:49 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC