73 users online (1 members and 72 guests)  



Thread: website layout


Page 2 of 2 First 12
  Results 16 to 23 of 23
Digg button stumble

Related

  1. Replies: 1
  2. My First Layout!    Forum: Show it off!
    Replies: 4
  1. #16
    eccmoh's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2003
    Posts
    8
    Yes Android! That's EXACTLY it! I just need to find the code for the angle-y border thingies!



  2. #17
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    Talking That's going to take some finagling.....

    Do you want to use images? Or CSS positioning? How big is the text box? Not doing much today at work, maybe be a good little project to keep me busy........
    What about cross browser issues? This could be pretty tricky.

  3. #18
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    Here's one using CSS-P....Phew!

    I set it up using relative div's and surrounded it with an absolutely positioned div for page positioning. Good enough? Watchout though: I only know what it looks like in IE6. It probably doesn't work at all in NS 4.x.

    Good Excercise:
    Code:
    <html>
    <head>
    <title>Androids Super Gizmo Text Box</title>
    <!-- 
    Free to use just send me the URL for my collection, eh?
    (Signed) Android 
    -->
      <style>
    div#box
    {
    position:absolute; 
    top: 200px; 
    left: 100px; 
    border-color:#cccccc;
    border-style:dashed; 
    border-width: 1px;
    
    width:200px;
    height:60px;
    padding:0px;
     
    }
    div#textbox
    {
    position:relative;
    left:33px;
    bottom:14px;
    padding:0px;
    margin:-8px;
    
    }
    div#boxtl
    { 
    position:relative; 
    top:0px; 
    left:0px; 
    border-style:ridge; 
    border-width:0px 8px 8px 0px;
    border-color:#ff0000; 
    width: 30px;
    height:20px;
    margin:0px; 
    padding:0px;
    }
    div#boxtr
    { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    border-style:ridge; 
    border-width: 0px 0px 8px 8px;
    border-color:#ff0000; 
    width: 30px;
    height:20px;
    padding:0px; 
    }
    div#boxbl
    { 
    position: absolute; 
    bottom:0px; 
    left:0px; 
    border-style:ridge; 
    border-width: 8px 8px 0px 0px;
    border-color:#ff0000; 
    width: 30px;
    height:20px;
    padding:0px; 
    }
    div#boxbr
    { 
    position: absolute; 
    bottom:0px; 
    right:0px; 
    border-style:ridge; 
    border-width: 8px 0px 0px 8px;
    border-color:#ff0000; 
    width: 30px;
    height:20px;
    padding:0px; 
    }
    
    </style>
    </head>
    <body>
    <div id="box">
    
    <div id="boxtl">
    </div>
    <div id="boxtr">
    </div>
    
    <div id="textbox">
    <form>
    <input type="text" name="text">
    </form>
    </div>
    
    <div id="boxbl">
    </div>
    <div id="boxbr">
    </div>
    
    </div>
    </body>
    </html>
    Last edited by Android; 02-14-2003 at 01:10 PM.

  4. #19
    eccmoh's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2003
    Posts
    8
    That's great - but it's a tad bit too small. I was planning on using it for part of my website layout with the text box as like.. the area for updates and news and then the right angles as areas for little sub-columns. I'm sorry if anything was misinterpereted!

  5. #20
    Doorknob's Avatar
    Super Newbie

    Status
    Offline
    Join Date
    Jun 2002
    Location
    Malaysia
    Posts
    316
    cool. i'm saving that

  6. #21
    benzden's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Feb 2002
    Location
    San Antonio, Texas
    Posts
    652
    Very nice. Nothing like a challenge, eh Android?!

    I like it better with left:300px;border-width:0px (versus 200 and 1) and have saved it to play around with on a rainy day (among the thousands of other things saved for that rainy day).

  7. #22
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,441

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel
    Moving to the CSS forums

  8. #23
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    Talking

    Kept me busy for the better part of the morning....Still playing around with it..............



Page 2 of 2 First 12

Tags for this Thread

Posting Permissions

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