www.webdeveloper.com
Results 1 to 5 of 5

Thread: HTML Page LayOut

Hybrid View

  1. #1
    Join Date
    Oct 2013
    Posts
    3

    HTML Page LayOut

    Hey there,

    I am pretty new to the HTML and now trying to come up with a web page that has some simple layouts.

    My goal is to have a left pane that has all the navigation buttons like, HOME, Contact US,....... and then the top part having a Logo and then the bottom part having some information that also doesn't change from page to page. So the only part in the page that changes is the center and right half.

    I would like to think this is easy to do. And i was able to come up with something that's close. But the part i am struggling with is drawing border lines to

    1. separate the Left Navigation pane area from the dynamically changing center & right area.
    2. separate the top portion having Logo from the dynamically changing center & right area and also from Left Navigation area.
    3. separate the bottom portion from the dynamically changing center & right area also from Left Navigation area

    I would like to see some sample HTML that does this.

    Thanks in advance.

  2. #2
    Join Date
    Feb 2013
    Posts
    78
    Just go to a website that has what you want and look at that html code.

  3. #3
    Join Date
    Mar 2012
    Posts
    1,118
    Take a look at the CSS BORDER attribute. That allows you to put vertical and horizontal bars between the page areas.

  4. #4
    Join Date
    Oct 2013
    Posts
    3
    The only downside to absolutely positioned boxes is that because they live in a world of their own, there is no way of accurately determining where they end.

  5. #5
    Join Date
    Mar 2012
    Posts
    1,118
    Quote Originally Posted by Watt–Wilton View Post
    The only downside to absolutely positioned boxes is that because they live in a world of their own, there is no way of accurately determining where they end.
    What??? Absolute positioning supports explicit width and height as well as explicit distances from the window edges. E.g.
    #box1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 700px;
    }

    Give a fixed box size starting in the top left corner, whilst...

    #box2 {
    position: absolute;
    left: 300px;
    top: 0;
    right: 0;
    height: 700px;
    }
    #box3 {
    position: absolute;
    left: 0;
    top: 700px;
    right:0;
    bottom: 0;
    }

    define box2 to the right of box1 that occupies the rest of the window width, and is 700 px high (to match), and box3 which is full width and occupies the remaining space below box1 and box2.

Thread Information

Users Browsing this Thread

There are currently 3 users browsing this thread. (0 members and 3 guests)

Posting Permissions

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



Recent Articles