|
| |
|
|
henderson_pk
Posts: 3
Joined: 7/5/2009
Status: offline
 |
CSS and links - 7/5/2009 16:44:05
I bought a template for a website and am having trouble making links of any kind. I've tried anchors and hyper links. Here is the orginal code:
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body id="page-1">
<div id="main">
<!--header -->
<div id="header">
<div class="logo"><a href="index.html"><img alt="" src='images/logo.gif' /></a></div>
<div class="menu">
<ul class="wrapper">
<li class="m1">
<img class="title" alt="" src='images/m1-title.gif' />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<a href="index.html"><img alt="" src='images/m1-link.jpg' /></a>
</li>
<li class="m2">
<img class="title" alt="" src='images/m2-title.gif' />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<a href="AdultsPage.html"><img alt="" src='images/m2-link.jpg' /></a>
</li>
<li class="m3">
<img class="title" alt="" src='images/m3-title.gif' />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<a href="InfoPage.html"><img alt="" src='images/m3-link.jpg' /></a>
</li>
<li class="m4">
<img class="title" alt="" src='images/m4-title.gif' />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<a href="EventsPage.html"><img alt="" src='images/m4-link.jpg' /></a>
</li>
</ul>
</div>
</div>
<!--header end-->
<div id="content">
<div class="inner">
<img class="title" alt="" src='images/page-1-title1.gif' />
<div class="wrapper padding2">
<img class="img-indent" alt="" src='images/page-1-img.gif' />
<p class="padding1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Paraesent vestibulum molestie. Aenean nonummy hendrerit mauris. Phasellus porta. Ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy<br /> nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam</p>
<p>Nulla dui. Fusce feugiat malesuada odio.Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
</div>
<p class="padding1"><a href="#" class="margin1"><img alt="" src='images/button-more.gif' /></a></p>
<img class="title" alt="" src='images/page-1-title2.gif' />
<p class="padding1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Paraesent vestibulum molestie. Aenean nonummy hendrerit mauris. Phasellus porta.<br /> 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</p>
<p class="padding3">Nulla dui. Fusce feugiat malesuada odio.Morbi nunc odio, gravida at, cursus nec, luctus a, lorem. Maecenas tristique orci ac sem. Duis ultricies<br /> pharetra magna. Donec accumsan malesuada orci.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.</p>
<p class="padding2"><a href="#" class="margin1"><img alt="" src='images/button-more.gif' /></a></p>
<div class="box">
<div class="box-left">
<div class="box-right">
<div class="wrapper">
<div class="col-1"><a href="#"><img alt="" src='images/box-link.gif' /></a></div>
<div class="col-2">
<h2>Interested in learning more? Lorem ipsum dolor sit amet, consectetuer adipiscing...</h2>
<p>Please download</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--footer -->
<div id="footer">
KPL © 2009<a href="index-4.html">Privacy Policy</a>
</div>
<!--footer end-->
</div>
</body>
</html>
I've been successful in changing the "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat." into a table but making a link out of anyone of those tables is just not happening. When I select the text and make a link the words drop down to the bottom of the image and the link is made there. That might be ok but I make a second link and those second words are written on top of the first words.
I've done one website already but nothing fancy. I would really like the table to be printed on top of the image and would like to set some anchors so I can link to locations further down on the page.
Can someone help me?
Pam
|
|
|
|
henderson_pk
Posts: 3
Joined: 7/5/2009
Status: offline
|
RE: CSS and links - 7/7/2009 14:57:05
Below is the CSS file.
1 /* CSS Document */
2 * {margin:0; padding:0; font-size:100%;}
3 body {text-align:center; background:#000 url(images/body-tail.jpg) left top repeat-x;}
4
5 img {vertical-align:top;}
6 a img {border:0;}
7
8 table {border-collapse:collapse; border:0;}
9
10 html, input , textarea {font-family:Tahoma, Geneva, sans-serif; font-size:0.813em; line-height:1.231em; color:#535454;}
11 input, select {vertical-align:middle; font-weight:normal;}
12
13 a {text-decoration:none; color:#FFF; font-weight:bold;}
14 a:hover {text-decorations:underline;}
15 ul {list-style:none;}
16 ul li {background:url (images/list-marker.gif) left 10px no-repeat; line-height:1em; padding:5px 0 14px 21 px;}
17 li a:hover {color:#FFF; text-deocration:none;}
19
20 .float-1 {float:left;}
21 .float-r {float:right;}
22 .clear {clear:both; font-size:0%; line-height:0% height:0;}
23
24 #main {width:960px; margin:0 auto; text-align:left;}
25
26 #constent .col-1,
27 #constent .col-2,
28 #constent .col-3, {float:left;}
29 /********** header***************/
30 #header {height:698px; font-family:Arial, Helvetica, sans-serif; font-size:0.923em; color:#000; }
31
32 .logo {text-align:right; padding:88px 163px 83px 0;}
33
34 .menu li {float:left; height:413px; width:191px; padding:34px 0 0 33px; position:relative; background:none; line-height:1.417em;}
35 menu .m1 {background:url (images/m1.jpg) left top no-repeat; width:190px; padding-left:64px;}
36 menu .m2 {background:url (images/m2.jpg) left top no-repeat;}
37 menu .m3 {background:url(images/m3.jpg) left top no-repeat;}
38 menu .m4 {background:url (images/m4.jpg) left top no-repeat; width:224px; padding-left:34px}
39
40 .menu .title {margin-bottom:69px;}
41 .menu p {width:150px; padding:0 0 0 4px;}
42 .menu a {position:absolute: bottom:137px: right:28px;}
43 .menu .m1 a {right:27px;}
44 .menu .m4 a {right:61px;}
45
46 /************content************/
47 .wrapper {width:100%; overflow:hidden;}
48 .img-indent {float:left; margin:3px 28px 0 0;}
49 .phone {float:right; margin-right:84px;}
50 cite {font-style:normal;}
51
52 #content {padding:0 45px 0 41px;}
53 #content .inner {margin-top:-47px !important; position:relative;}
54
55 .col-1 {width:550px; padding-right:59px:}
56 .col-2 {width:265px;}
57 .col-3 {width:406px;}
58
59 /**********titles***********/
60 .title {margin-bottom:12px;}
61 .title-un {margine-bottom:17px;}
62
63 h2 {font-family;Times New Roman, Times, serif; font-size:1.492em; line-height:1.1em; font-style:italic; font-weight:normal; color:#FFF;}
64
65 /************boxes*************/
66 .box {boxground:url (images/box-tail.jpg) left top repeat-x; font-size:1.077em; color:#494848; margin-left:-51px:}
67 .box .box-left {background: url (images/box-left.jpg) left top no-repeat; width:100%;}
68 .box .box-right {background: url (images/box-right.jpg) right top no-repeat; padding:32px 0 83px 61px;}
69 .box .col-1 {width:98px; padding: 0;}
70 .box .col-2 {width:700px; padding:5px 0;}
71
72 /******************form*************/
73 #contactForm p {width:150px; padding:0 0 5px 0; margin:0; line-height:1em;}
74 #contactForm .float-l {width:170px; line-height:1em; padding:0; margin:0;}
75 #contactForm .float-1 div {height:27px; width:170px;}
76 #contactForm input, #contactForm textarea {font-size:1em; line-height:1em; background:#000; border:1px solid #535454;}
77 #contactForm .float-1 input {height:18px; width:167px;}
78 #contactForm .float-r textarea {overflow:hidden; height:108px; width:365px;}
79 #contactForm .buttons {text-align:right; margin:-6px -13px 0 0;}
80 #contactForm .buttons input {border:none; height:30px;}
81
82 /************positioning************/
83 .margin 1 {margin-left:-13px;}
84 .margin2 {margin-top:3px;}
85 .margin3 {margin-left:10px;}
86
87 .padding 1 {padding-bottom:16px;}
88 .padding 2 {padding-bottom:11px;)
89 .padding 3 {padding-bottom:27px;}
90 .padding 4 {padding-bottom:9px;}
91 .padding 5 {padding-bottom:39px;}
92 .padding 6 {padding-right:62px;}
93 .padding 7 {padding-bottom:6px;}
94 .padding 8 {padding-bottom:24px;}
95
96 /*************footer***********/
97 #footer {color:#A1A1A1; padding:18px 0 68px 39px; font-size:0.923em; line-height:1.083em;}
98 #footer a {margin-left:16px; text-decorations:none; color:#5C5A5A; font-weight:normal;}
99 #footer a:hover {color:#A1A1A1;}
100
| |
|
|
|
henderson_pk
Posts: 3
Joined: 7/5/2009
Status: offline
|
RE: CSS and links - 7/10/2009 9:29:08
I purchased the template from a company. You can see it here:
http://www.templatemonster.com/cart.php?add=23730
On top of the colored boxes I want to put my list. The items in the list would be links to other places, some would be anchor links and some would be hyperlinks.
Please understand I'm a novice at website development.
| |
|
|
|
treetopsranch
Posts: 1651
From: Cottage Grove, OR, USA
Status: offline
|
RE: CSS and links - 7/10/2009 10:11:27
Those colored boxes were created with Flash. That is a flash menu. On the website where you bought that template there is a section where you can customize that flash menu. Did you try that?
_____________________________
Don from TreeTops Ranch, Oregon
"I've got a taste for quality and luxury"
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
