A Flash Developer Resource Site

Results 1 to 8 of 8

Thread: MAKING COOL LINES IN HTML.... PLEASE CLICK HERE!!!!!!!!!!!!!

  1. #1
    Senior Member
    Join Date
    Dec 2000
    Posts
    620
    i need some help...


    i cannot for the life of me, figure out how you make verticle lines and make wierd table boarders.... like for example..

    http://www.mul-ti-ple.com .... how do they control the boarders or lines on their pages...

    almost everyone does it now...i cant figure it out..


    can someone direct me to a tutorial or something.. thanks a bunch in advance...

    mannyme80

  2. #2
    N' then I might just
    Jump back on
    An' ride
    Like a cowboy
    Into the dawn
    ........To Montana.
    david petley's Avatar
    Join Date
    Jun 2000
    Location
    not in Montana
    Posts
    10,192
    if you check the source code for that page you will see how they did it.
    the code -
    ...........................
    <html>
    <head>
    <title>mul-ti-ple.com</title>
    <link rel="stylesheet" href="css/mul-ti-ple.css" type="text/css">
    </head>

    <body bgcolor=#ffffff>
    <!-- Lines and Color Blocks -->
    <div id="left_bar_top" style="position: absolute; left: 74px; top: 18px; width: 358px; height: 20px; z-index: 2; visibility: visible;"><img src="imgs/light_green.gif" width="358" height="20" alt="" border="0"></div>
    <div id="left_bar_top_line1" style="position: absolute; left: 73px; top: 17px; width: 359px; height: 1px; z-index: 3; visibility: visible;"><img src="imgs/lines.gif" width="359" height="1" alt="" border="0"></div>
    <div id="left_bar_top_line2" style="position: absolute; left: 73px; top: 17px; width: 1px; height: 20px; z-index: 3; visibility: visible;"><img src="imgs/lines.gif" width="1" height="20" alt="" border="0"></div>
    <div id="left_bar_top_line3" style="position: absolute; left: 73px; top: 37px; width: 359px; height: 1px; z-index: 3; visibility: visible;"><img src="imgs/lines.gif" width="359" height="1" alt="" border="0"></div>
    <div id="left_bar_top_line4" style="position: absolute; left: 73px; top: 57px; width: 359px; height: 1px; z-index: 3; visibility: visible;"><img src="imgs/lines.gif" width="359" height="1" alt="" border="0"></div>
    <div id="left_bar_bottom" style="position: absolute; left: 74px; top: 239px; width: 358px; height: 20px; z-index: 2; visibility: visible;"><img src="imgs/light_green.gif" width="358" height="20" alt="" border="0"></div>
    <div id="left_bar_bottom_line1" style="position: absolute; left: 73px; top: 239px; width: 359px; height: 1px; z-index: 3; visibility: visible;"><img src="imgs/lines.gif" width="359" height="1" alt="" border="0"></div>
    <div id="left_bar_bottom_line2" style="position: absolute; left: 73px; top: 239px; width: 1px; height: 20px; z-index: 3; visibility: visible;"><img src="imgs/lines.gif" width="1" height="20" alt="" border="0"></div>
    <div id="left_bar_bottom_line3" style="position: absolute; left: 73px; top: 259px; width: 359px; height: 1px; z-index: 3; visibility: visible;"><img src="imgs/lines.gif" width="359" height="1" alt="" border="0"></div>
    <div id="left_bar_bottom_line4" style="position: absolute; left: 73px; top: 278px; width: 359px; height: 1px; z-index: 3; visibility: visible;"><img src="imgs/lines.gif" width="359" height="1" alt="" border="0"></div>
    <div id="right_dark_green_top" style="position: absolute; left: 439px; top: 0px; width: 266px; height: 30px; z-index: 4; visibility: visible;"><img src="imgs/dark_green.gif" width="266" height="30" alt="" border="0"></div>
    <div id="right_light_green_top" style="position: absolute; left: 439px; top: 30px; width: 266px; height: 32px; z-index: 4; visibility: visible;"><img src="imgs/light_green.gif" width="266" height="32" alt="" border="0"></div>
    <div id="logo" style="position: absolute; left: 439px; top: 66px; width: 266px; height: 80px; z-index: 5; visibility: visible;"><img src="imgs/logo.jpg" width="266" height="80" alt="" border="0"></div>
    <div id="right_light_gray_top" style="position: absolute; left: 439px; top: 150px; width: 266px; height: 32px; z-index: 4; visibility: visible;"><img src="imgs/gray.gif" width="266" height="32" alt="" border="0"></div>
    <div id="computer" style="position: absolute; left: 439px; top: 192px; width: 266px; height: 200px; z-index: 5; visibility: visible;"><img src="imgs/computer.jpg" width="266" height="200" alt="" border="0" usemap="#browse" name="computer"></div>
    <map name="browse"><area alt="" coords="3,72,44,84" href="portfolio.html" onMouseOver="document.computer.src='imgs/computer_swap.jpg'; return true;" onMouseOut="document.computer.src='imgs/computer.jpg'; return true;"></map>
    <div id="right_light_gray_bottom" style="position: absolute; left: 439px; top: 443px; width: 266px; height: 32px; z-index: 4; visibility: visible;"><img src="imgs/gray.gif" width="266" height="32" alt="" border="0"></div>
    <div id="right_light_green_bottom" style="position: absolute; left: 439px; top: 477px; width: 266px; z-index: 4; visibility: visible;"><img src="imgs/light_green.gif" width="266" height="123" alt="" border="0"></div>
    <!-- End Lines and Color Blocks -->

    <!-- Text -->
    <div id="Our_Introduction" style="position: absolute; left: 76px; top: 21px; z-index: 6; visibility: visible;"><img src="imgs/intro.jpg" width="106" height="12" alt="" border="0"></div>
    <div id="Who_we_are" style="position: absolute; left: 76px; top: 42px; z-index: 6; visibility: visible;"><span class="text1">who we are &amp; what we do?</span></div>
    <div id="Info_paragraph" style="position: absolute; left: 76px; top: 100px; width: 345px; z-index: 6; visibility: visible;"><span class="text1">mul-ti-ple is a web design agency that unites creative individuals with their inspirations and ideas. Our artists &amp; architects work together to define the common goal and discover new environments that communicate your message to the world. In tandem with our unique understanding of presentation on the web, we deliver cost managed services that build growth within our audience. Please browse our portfolio &amp; thanks for visiting.
    </span></div>
    <div id="General_Info" style="position: absolute; left: 76px; top: 243px; z-index: 6; visibility: visible;"><img src="imgs/info.jpg" width="130" height="12" alt="" border="0"></div>
    <div id="Contact_Info" style="position: absolute; left: 76px; top: 264px; z-index: 6; visibility: visible;"><span class="text1">contact info &amp; employment</span></div>
    <div id="You_may_contact_us_by" style="position: absolute; left: 76px; top: 325px; z-index: 6; visibility: visible;"><span class="text1">You may contact us by</span></div>
    <div id="Info" style="position: absolute; left: 240px; top: 325px; z-index: 6; visibility: visible;">
    <span class="text1">
    Electronic Mail<br>
    <a href="mailto:inquires@mul-ti-ple.com">inquires@mul-ti-ple.com</a><p>
    Telephone<br>
    214-321-5014<p>
    Regular Mail<br>
    7151 Gaston Avenue<br>
    suite 111<br>
    Dallas, TX 75214<br>
    </span></div>
    <div id="employment" style="position: absolute; left: 76px; top: 480px; z-index: 6; visibility: visible;"><span class="text1">Employment</span></div>
    <div id="Info" style="position: absolute; left: 240px; top: 480px; z-index: 6; visibility: visible;">
    <span class="text1">
    If you are a photographer or<br>
    illustrator and are interested in<br>
    working with mul-ti-ple, please <br>
    send a brief note to <br><a href="mailto:artist@mul-ti-ple.com">artist@mul-ti-ple.com</a>
    </span></div>
    <div id="copyright" style="position: absolute; left: 76px; top: 590px; width: 345px; z-index: 6; visibility: visible;" align="center">
    <span class="text1">
    Copyright 2001 mul-ti-ple All rights reserved.
    </span></div>
    <!-- End Text -->

    </body>
    </html>
    ....................
    you'll see that it is all controlled by style sheets applied to particular named div's
    david p

  3. #3
    Senior Member
    Join Date
    Dec 2000
    Posts
    620
    is that code written or do you think they used a particular program...

    im looking for the easy fix....


    thanks for the comment ...


    mannyme80

  4. #4
    FK Official Mechanic
    Trust your mechanic

    Join Date
    Jul 2001
    Posts
    119
    Originally posted by mannyme80
    is that code written or do you think they used a particular program...
    im looking for the easy fix....
    thanks for the comment ...
    mannyme80
    Probably written........
    Have a look into CSS....it really is <David.P quote>easy peasy</David.P quote>


  5. #5
    Anything. Anytime. Anywhere. aliensynergy's Avatar
    Join Date
    Feb 2001
    Location
    Arizona.
    Posts
    163
    CSS is the way to go, but its also possible to do it with a small image file of a vertical line...and place it in its own cell in a table...

  6. #6
    Junior Member
    Join Date
    Oct 2001
    Posts
    21
    Think easy!

    The vertical lines are just a backgroung .gif (named bg.gif, width=778 height=1)

    Before CSS it was very dificult to layout with the background image taken in consideration, but since CSS lets you lay elements by the pixel and in an absolut form, there's the trick!

  7. #7
    Junior Member
    Join Date
    Oct 2001
    Posts
    21
    by the way:

    bg.gif is referenced in mul-ti-ple.css NOT in main.html (for those who can't find the bgimage tag in the html)

  8. #8
    Senior Member
    Join Date
    Dec 2000
    Posts
    620
    PatoLucas....you are absolutely right....

    i think that describes all the nonsense of not being able to select it as a picture or see the background picture....since it is css....

    now the next question is....

    are there any good books or tutorial sites so that scrubs like me, who are new to designing, can learn...

    thanks for the books or links..guys... i owe a lot to flashkit....

    thanks board members...

    mannyme80

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center