I wanted to create a simple page with blocks representing different parts of the Earth (think 8 bit).
 |
| by ~inuit-joe |
I created 4 parts to my 'HTML Earth'.
Sky, Sea, Grass and Tree.
Simple, huh?
Yes, yes I am.
The problem came about by not following the worksheet.
All the other problems followed from there.
I managed to finally create 3 <div> sections which coloured in blue (#4392C1), a different blue (#62B3C6) and green (#458604).
The struggle came with getting the tree element in line with the rest.
The solution was to create a <div> within a <div> and then have my tree <div> alongside the others (by not aligning right - this caused the tree to move when zooming in/out of the page).
I then managed to position an image of leaves across my other <div>'s by using an absolute position in my paired CSS file.
#leaves{
position:absolute;
left:830px;
top:010px;
}
Simple links could be mode within each <div> with new <p></p> sections and using the text as hyperlinks to wiki entries, etc.
In a nutshell, my mini experiment didn't work. I probably would have been better off creating a less 'unusual' and 'different' page. But now I know.
Below is a screenshot of the laughable page (which could have been made in MS paint in a fraction of the time) and the HTML & CSS.
Feel free to shout out easier/quicker ways and where I've gone wrong. Constructively though, not things like "You needn't have bothered today", I already know that! :p
HTML:
<html>
<head>
<title>Earth</title>
<link rel="stylesheet" href="style1.css"/>
</head>
<body>
<div id="bigdiv">
<div id="secondarydiv">
<div id="middiv">
<div id="sky">
<p><a href="http://en.wikipedia.org/wiki/Sky">Sky</a></p>
<div id="skytext"><p>my wiki example text here</p>
</div>
</div>
<div id="grass">
<p><a href="http://en.wikipedia.org/wiki/Crust_(geology)">Grass</a></p>
</div>
<div id="sea">
<p><a href="http://en.wikipedia.org/wiki/Earth#Surface">Sea</a></p>
<div id="seatext"><p> my wiki example text here </p></div>
</div>
</div>
<div id="tree">
<p><a href="http://en.wikipedia.org/wiki/Biosphere">Tree</a></p>
</div>
</div>
<div id="leaves">
<img src= "/Users/ma101lp/Desktop/leaves2.jpg" alt="leaves on tree"/>
<caption><a href="http://en.wikipedia.org/wiki/Life">Leaves</a></caption>
<p></p>
</div>
<div id="nav">
<ul>
<li>Our</li>
<li>Planet</li>
<li>In</li>
<li>HTML</li>
</div>
</div>
CSS:
body{
background-color:#ffffff;
}
#bigdiv{
height:1000px;
width:1200px;
}
#secondarydiv{
}
#middiv{
height:999px;
width:1000px;
float:left;
}
#sky{
background-color:#4392C1;
width:985px;
height:350px;
padding:10px;
border:1px solid light blue;
}
#skytext{
max-width:500px;
}
#grass{
background-color:#458604;
width:650px;
height:300px;
padding:10px;
border:1px solid green;
float:right;
}
#sea{
background-color:#62B3C6;
width:310px;
height:300px;
padding:10px;
border:1px solid light blue;
align:left;
}
#seatext{
max-width:295px;
}
#treediv{
float:right
width:150px;
height:650px;
}
#tree{
background-color:#953804;
width:150px;
height:670px;
padding:10px;
border:1px solid brown;
float:left;
}
#leaves{
position:absolute;
left:830px;
top:010px;
}
ul{
list-style-type:none;
margin:0px;
padding:0px;
}
ul li{
border:1px solid black;
margin:0px;
padding:0px;
float:left;
}
#nav{
border:1px solid black;
margin:10px;
padding:10px;
align:centre
}
No comments:
Post a Comment