Dreamweaver Club Forums

Dreamweaver Club Forums (http://www.dreamweaverclub.com/forum//index.php)
-   HTML and CSS (http://www.dreamweaverclub.com/forum//forumdisplay.php?f=170)
-   -   page with different links (http://www.dreamweaverclub.com/forum//showthread.php?t=28749)

edbr 09-04-2008 03:45 AM

page with different links
 
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

div with scrollbar and iframe
 
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

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!

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 :)


All times are GMT. The time now is 04:42 AM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com