![]() |
#1 |
![]() ![]() Join Date: Aug 2005
Location: Bali
Posts: 11,214
|
![]() 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>
__________________
If you're happy and you know it shake your meds! different style links examples Flight / Hotel search Free script download Bali Villas |
![]() |
![]() |
#2 |
![]() ![]() Join Date: Aug 2005
Location: Bali
Posts: 11,214
|
![]() 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> </p> <p> </p> <p> </p> <p> </p> <p> </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><iframe src ="http://www.domain.com/index.html"<br /> width="100%" height="100%"> </iframe></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>
__________________
If you're happy and you know it shake your meds! different style links examples Flight / Hotel search Free script download Bali Villas |
![]() |
![]() |
#3 |
![]() 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!!! |
![]() |
![]() |
#4 |
![]() 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 |
![]() |
![]() |
#5 | ||||
![]() Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
|
![]() Quote:
Quote:
Quote:
Quote:
![]()
__________________
Websites: www.yotocreative.co.uk | www.clearwater-it.co.uk | www.bristolcomputerfix.co.uk Social Media: Twitter | Facebook |
||||
![]() |
![]() |
#6 |
![]() 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 |
![]() |
![]() |
#7 |
![]() ![]() Join Date: Aug 2005
Location: Bali
Posts: 11,214
|
![]() 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 |
![]() |
![]() |
#8 |
![]() 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? |
![]() |
![]() |
#9 |
![]() Join Date: Dec 2009
Posts: 3
|
![]() 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! |
![]() |
![]() |
#10 |
![]() ![]() Join Date: Aug 2005
Location: Bali
Posts: 11,214
|
![]() 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 | |
Display Modes | |
|
|