...

View Full Version : Resolved Creating a Web page region using HTML with external CSS file.



scourgy
04-26-2011, 11:04 PM
Hello, guys!

I am new here and I need your help. I have to create a Web page region like this: http://img714.imageshack.us/img714/5474/ex3.th.gif (http://img714.imageshack.us/i/ex3.gif/)

I have to use HTML with external CSS file and each line should be a hyperlink. Can somebody help me, please?
Thanks in advance!

teedoff
04-27-2011, 12:57 AM
Hello, guys!

I am new here and I need your help. I have to create a Web page region like this: http://img714.imageshack.us/img714/5474/ex3.th.gif (http://img714.imageshack.us/i/ex3.gif/)

I have to use HTML with external CSS file and each line should be a hyperlink. Can somebody help me, please?
Thanks in advance!

Have you tried any code yourself? If so show us what you have. Is this a school project?

msevrens
04-27-2011, 01:52 AM
Menus should be done with unordered lists.



<ul>
<li><a href="poop.htm>bananaz</a></li>
<li><a href="crabcakes.htm>orungez</a></li>
<li><a href="llama.htm>moo</a></li>
</ul>


you can make it horizontal, by making the li's float left like this


li {
float:left;
/*some pretty design*/
}


then you can change the appearing using the hover pseudo class like this



li:hover {
/*some pretty changes*/
}


This is a neato article that explains drop down menus, which is unrelated but a pretty good article. Answer to your question? floattinggg.

scourgy
04-27-2011, 08:30 AM
Yes, it's a school project, but I don't have enough time to complete it. My key problem is the decoration of this menu. So far I've done this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title> Excercise 3 </title>
<style type="text/css">
body {font-family:calibri;}
.parent {background:rgb(0,101,202);border:2px white outset}
div {padding:7px;display:inline-block; background:#FFFFDD ;margin:-3px;border:1px solid; }
a {color:black}
a:hover {color:white; background:rgb(0,101,202);text-decoration:100%}
</style>
</head>
<body>
<div class="parent">
<div class="mydiv"> <a href="item1"> Item 1 </a></div>
<div class="mydiv"> <a href="item2"> Item 2 </a></div>
<div class="mydiv"> <a href="item3"> Hovered Item 3 </a></div>
<div class="mydiv"> <a href="item4"> Some Longer Item 4 </a></div>
</div>
</body>
</html>


I will be very appreciative if you can help me.

teedoff
04-27-2011, 03:44 PM
As msevrens already suggested, a navigation menu belongs in a list like so:


<div id="navcontainer">
<!-- Navigation Menu -->
<ul id="navlist">
<li><a href="Home.html">Home</a></li>
<li><a href="Products.html">Products</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Support.html">Support</a></li>

</ul>
</div>

Then the css would be something like this:


ul#navlist {
margin: 0;
padding: 0;
list-style-type: none;
white-space: nowrap;
}

ul#navlist li {
float: left;
font-family: verdana, arial, sans-serif;
font-size: 9px;
font-weight: bold;
margin: 0;
padding: 5px 0 4px 0;
background-color: #eef4f1;
border-top: 1px solid #e0ede9;
border-bottom: 1px solid #e0ede9;
}

#navlist a, #navlist a:link {
margin: 0;
padding: 5px 9px 4px 9px;
color: #95bbae;
border-right: 1px dashed #d1e3db;
text-decoration: none;
}

ul#navlist li#active {
color: #95bbae;
background-color: #deebe5;
}

#navlist a:hover {
color: #74a893;
background-color: #d1e3db;
}

You can change the colors if you'd like, I just worked this up quickly to give you something to go on.

I would suggest however, that in the future for homework assignments, you start earlier so you have enough time to complete them....:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum