page with different links

edbr · 09-04-2008, 03:45 AM

I have made a page here with different link styles, styles included in the head.
Hopefully it will give examples to the much asked question re "can i have different types of links?"

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body{font-family:Georgia, "Times New Roman", Times, serif;
color:#000000; font-size:12pt;}

a {
color:#09c; font-size:10pt; font-family:book antiqua,Trebuchet MS;
font-weight:normal;}




#wrapper {
    position:relative;    width:80%;    height:auto; margin-left:10%; margin-right:10%;}

    #header {    position:relative;    width:100%;    height:50px; float:left; position:relative; clear:right    ; background-color:#00FF00;} 
      
#sidebar {    position:relative;    width:20%;    height:auto;    float:left;    background-color:#CCCCCC;}
    
    .two {font-family:book antiqua,Trebuchet MS;

}

#footer{width:100%; height:50px; background-color:#0000FF; float:left; clear:left;}


#footer a:link {color:#FFF; font-size:16px;}
#footer a:visited {color:#FFF;font-size:16px; }
#footer a:hover{color:#FFF;font-size:16px;font-size:150%;}


.two a:link {color:#000;font-size:14pt;
font-family:book antiqua,Trebuchet MS;
font-weight:normal;
text-decoration:none;}
.two a:visited {color:#ff0000;font-size:14pt;
font-family:book antiqua,Trebuchet MS;
font-weight:normal;
text-decoration:none;}
.two a: hover{color:#FF0000;font-size:14pt;
font-family:book antiqua,Trebuchet MS;
font-weight:normal;
text-decoration:none;}

.content{width:80%; float:left; position:relative; border:#999999 solid 1px:}
-->
</style>
</head>

<body>
<div id="wrapper"> <div id="header"> This is the header</div> <!--end header-->
 
 
<div id="sidebar">
  <a href="a_page.html">this is a standard link</a>
       <br />
   <div class="two" ><a href="a_page.html" >this is two class link    </a></div> 
</div> <!--end sidebar-->
<div class"content">Content division<br />
<a href="a_page.html">this is a standard link</a></div>

<div id="footer">
  <p><a href="a_page.html">this is any link in the footer div</a></div><!-- end footer-->
</div><!-- end wrapper-->
</body>
</html>

edbr · 09-25-2008, 03:54 AM

This is the same page but I have added two divisions parent and child to produce a scroll bar ( just one way to achieve this)
in the tex,t is the code to add in code view to show another site within the div

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body{
font-family:Georgia, "Times New Roman", Times, serif;
color:#000000; font-size:12pt;}

a {
color:#09c; font-size:10pt; font-family:book antiqua,Trebuchet MS;
font-weight:normal;}

#wrapper {
    position:relative;    width:80%;    height:auto; margin-left:10%; margin-right:10%;}

#header {    position:relative;    width:100%;    height:50px; float:left; position:relative; clear:right    ; background-color:#00FF00;} 
      
#sidebar {  
  position:relative;    width:20%;    height:auto;    float:left;    background-color:#CCCCCC;}
    
#footer{
width:100%; height:50px; background-color:#0000FF; float:left; clear:left;}

#footer a:link {
color:#FFF; font-size:16px;}
#footer a:visited {
color:#FFF;font-size:16px; }
#footer a:hover{
color:#FFF;font-size:16px;font-size:150%;}

 .two {font-family:book antiqua,Trebuchet MS;}

.two a:link {
color:#000;font-size:14pt;
font-family:book antiqua,Trebuchet MS;font-weight:normal;text-decoration:none;}

.two a:visited {
color:#ff0000;font-size:14pt;
font-family:book antiqua,Trebuchet MS; font-weight:normal;text-decoration:none;}

.two a: hover{
color:#FF0000;font-size:14pt;
font-family:book antiqua,Trebuchet MS;font-weight:normal;text-decoration:none;}

.content{
width:80%; float:left; position:relative; border:#999999 solid 1px:}
#holder {
    float:left;    margin-left: 40px;    position:relative;    width:300px;    height:200px;    border:#666666 1px solid;    overflow:scroll;}
#info {
float:left;    position:relative;    width: 275px;    height:400px;}
-->
</style>
</head>

<body>
<div id="wrapper"> <div id="header"> This is the header</div> <!--end header-->
  
<div id="sidebar">
  <a href="a_page.html">this is a standard link</a>
       <br />
   <div class="two" >
     <p><a href="a_page.html" >this is two class link    </a><br />
     </p>
     <p><br />
       <br />
       <br />
     </p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <p>&nbsp;</p>
   </div> 
</div> <!--end sidebar-->
<div class"content">
  <p>Content division<br />
  Below are 2 divisions, parent and child holder and info. adding overflow: scroll to the parent and making the child longer than the parent gives a scroll bar</p>
  

  <div id="holder">
    <div id="info">   
 <p>This is div info<br />
     
 <a href="a_page.html">this is a standard link</a></p>

 <p> If you want to show content from a different site, add this in code view</p>
 <p>&lt;iframe
   src =&quot;http://www.domain.com/index.html&quot;<br />
   width=&quot;100%&quot; height=&quot;100%&quot;&gt; &lt;/iframe&gt;</p>
 <p>consetetur sadipscing elitr, sed diam. 
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. 
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. 
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. 
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. 
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. 
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. 
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
 Content for  id "info" Goes Here</div>
  </div>
</div>
<div id="footer">
  <p><a href="a_page.html">this is any link in the footer div</a></div><!-- end footer-->
</div><!-- end wrapper-->
</body>
</html>

CaliWilli · 11-09-2008, 05:32 AM

Wow edbr, first of all thanks for taking the time to do this. When I first read it, it was greek. Last night after I first posted this question I went through a CSS tutorial and gained a little bit of knowledge concerning div placements and class id's but I still couldn't get anything to work the way I wanted it to. I previously used tables to control all of my content, which is, at this point, one website that isn't published yet. It looks like I have a long way to go, but just copying and pasting the code above into an html file has helped me understand it more than that entire tutorial.

Here are my questions about this...
Relating to the use of tables concerning page layout, the #wrapper id in your CSS would represent the main table, in as much as, it is the "container" for all of the other div tags, is this correct?

I noticed that changing the browser's window size affects the content, would that be remedied by assigning an absolute positioning instead of relative, if no, how is that controlled?

If the answer to question number two is yes, then all of the other div tags could be placed relatively without affecting them no matter the viewers window size, is that correct?

I hope I'm not bothering you with all of these questions, it just seems that I have struck paydirt in this forum, and I'm going to try to spend it!!!

CaliWilli · 11-09-2008, 05:42 AM

I got the link issue in order, very exciting. Thanks!!!

Corrosive · 11-09-2008, 10:59 AM

Quote:

Relating to the use of tables concerning page layout, the #wrapper id in your CSS would represent the main table, in as much as, it is the "container" for all of the other div tags, is this correct?

Yes, that is correct.

Quote:

I noticed that changing the browser's window size affects the content, would that be remedied by assigning an absolute positioning instead of relative, if no, how is that controlled?

This has got nothing to do with abs/rel positioning. It is controlled by using % measurements for the divs. I.e. being say 80% of the browser window. That way when the window expands the site expands to fill it. If you don't want a 'liquid layout' then use fixed measurements such as px.

Quote:

If the answer to question number two is yes, then all of the other div tags could be placed relatively without affecting them no matter the viewers window size, is that correct?

See above

Quote:

I hope I'm not bothering you with all of these questions, it just seems that I have struck paydirt in this forum, and I'm going to try to spend it!!!

Not at all...spend away it's what DWC is for

marcia · 01-09-2009, 03:42 PM

hello edbr,

thanks so much for the link. I'm just beginning to understand the wrapper concept and this certianly helps. I just checked out your Bali website (which I love and want to go to). You are probably aware of this but I will mention it anyway. The image relating to the thumbs is covering the "facilities" head and the the top of the ensuing copy block. Hope you don't mind my mentioning it, as you are so much more advanced than me, and kind enuf to help people like me and Willi above.

To Corrosive,

That explanation is very helpful to me, as I'm sure it is to Willi. I thought I was the only one who had problems understanding containers, etc, and am glad to see that others do to.

Marcia

edbr · 01-10-2009, 01:58 AM

of course i dont mind Marciae, i make boat loads of mistakes. this is not a problem for me though as i figured visitors are either looking at images or the facilities. Really thanks for the feed back though

djbutter22 · 10-27-2009, 02:38 PM

Hi edbr!
what you posted is exaclty what i'm looking for. However I'm having some issues with the execution. I basically have two types of links that I need. Text links and images that are linked. On the text, I want them to be white and underlined, on the images I want the image to have nothing applied. I also don't want any color on visited links. Can you give me some guidance as to what I need to put on the style sheet?

Jade · 12-30-2009, 05:40 AM

Hello BG in Bali, many thanks for your response. I looked at your website and saw what you had created, and appreciate the code - BUT as I'm not proficient at all in HTML (just learing through seeing what comes up in code view) can you advise what are the Dreamweaver stages to create this, OR is there a specific tutorial that will show me how. I have created roll over images on the home page of the website, but can't see how to have the large mandala as the base image and then have 40+ separate text images on top that link to the individual music pages.
By the way, I was in Bali many years ago and LOVED it!

edbr · 12-30-2009, 05:53 AM

try this ,
sleect /hilight a piece of text you want .
in the properties panel make it a link to another page.
you till get <a href="your_page.html">fff</a>
select / highlight the a
in the properties css panel edit rule abox wil come up and you can edit as you please
the link will then read
<a href="your_page.html" class="your_class">fff</a>
work in split view at least and you will see the changes and it will help you understand the coding more
sounds like time you visited Bali ageain then

11-09-2008, 05:42 AM	#4
CaliWilli Join Date: Oct 2008 Location: San Diego County CA Posts: 19	I got the link issue in order, very exciting. Thanks!!! Last edited by CaliWilli; 11-09-2008 at 05:43 AM.. Reason: terminoligy

01-10-2009, 01:58 AM	#7
edbr Join Date: Aug 2005 Location: Bali Posts: 11,215	of course i dont mind Marciae, i make boat loads of mistakes. this is not a problem for me though as i figured visitors are either looking at images or the facilities. Really thanks for the feed back though __________________ If you're happy and you know it shake your meds! different style links examples Flight / Hotel search Free script download Bali Villas

12-30-2009, 05:53 AM	#10
edbr Join Date: Aug 2005 Location: Bali Posts: 11,215	try this , sleect /hilight a piece of text you want . in the properties panel make it a link to another page. you till get <a href="your_page.html">fff</a> select / highlight the a in the properties css panel edit rule abox wil come up and you can edit as you please the link will then read <a href="your_page.html" class="your_class">fff</a> work in split view at least and you will see the changes and it will help you understand the coding more sounds like time you visited Bali ageain then __________________ If you're happy and you know it shake your meds! different style links examples Flight / Hotel search Free script download Bali Villas

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

11-09-2008, 05:32 AM	#3
CaliWilli Join Date: Oct 2008 Location: San Diego County CA Posts: 19	Wow edbr, first of all thanks for taking the time to do this. When I first read it, it was greek. Last night after I first posted this question I went through a CSS tutorial and gained a little bit of knowledge concerning div placements and class id's but I still couldn't get anything to work the way I wanted it to. I previously used tables to control all of my content, which is, at this point, one website that isn't published yet. It looks like I have a long way to go, but just copying and pasting the code above into an html file has helped me understand it more than that entire tutorial. Here are my questions about this... Relating to the use of tables concerning page layout, the #wrapper id in your CSS would represent the main table, in as much as, it is the "container" for all of the other div tags, is this correct? I noticed that changing the browser's window size affects the content, would that be remedied by assigning an absolute positioning instead of relative, if no, how is that controlled? If the answer to question number two is yes, then all of the other div tags could be placed relatively without affecting them no matter the viewers window size, is that correct? I hope I'm not bothering you with all of these questions, it just seems that I have struck paydirt in this forum, and I'm going to try to spend it!!!

01-09-2009, 03:42 PM	#6
marcia Join Date: Aug 2007 Location: nyc Posts: 246	hello edbr, thanks so much for the link. I'm just beginning to understand the wrapper concept and this certianly helps. I just checked out your Bali website (which I love and want to go to). You are probably aware of this but I will mention it anyway. The image relating to the thumbs is covering the "facilities" head and the the top of the ensuing copy block. Hope you don't mind my mentioning it, as you are so much more advanced than me, and kind enuf to help people like me and Willi above. To Corrosive, That explanation is very helpful to me, as I'm sure it is to Willi. I thought I was the only one who had problems understanding containers, etc, and am glad to see that others do to. Marcia

10-27-2009, 02:38 PM	#8
djbutter22 Join Date: Oct 2009 Posts: 63	Hi edbr! what you posted is exaclty what i'm looking for. However I'm having some issues with the execution. I basically have two types of links that I need. Text links and images that are linked. On the text, I want them to be white and underlined, on the images I want the image to have nothing applied. I also don't want any color on visited links. Can you give me some guidance as to what I need to put on the style sheet?

12-30-2009, 05:40 AM	#9
Jade Join Date: Dec 2009 Posts: 3	Image Rollover as text Hello BG in Bali, many thanks for your response. I looked at your website and saw what you had created, and appreciate the code - BUT as I'm not proficient at all in HTML (just learing through seeing what comes up in code view) can you advise what are the Dreamweaver stages to create this, OR is there a specific tutorial that will show me how. I have created roll over images on the home page of the website, but can't see how to have the large mandala as the base image and then have 40+ separate text images on top that link to the individual music pages. By the way, I was in Bali many years ago and LOVED it!