Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    Hello!

    I am just starting off with web design, so please excuse me if I am wasting your time with some elementary stuff.
    I got this task to create a 2-column layout with header and footer and right navigation. It should basically look like this

    http://i.data.bg/06/07/21/35293_orig.jpg

    (the lighter blue being the content section)
    My problem is that when a very wide image is displayed in the content(e.g. width="2000") the whole layout has to strech. And this is how mine looks

    http://proba45.free.bg/HTMLPage.htm

    while it should look like in the initial state.

    Could anyone please help?

    Kindest regards,
    Valentin

  2.  

  3. #2
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    Here is the code I'm using.
    Can anyone explain why it is not working. I'm stuck, so I would really appreaciate your help.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Layout 1</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <style type="text/css">
    html,body
    {
    margin:0.5% 0.5% 0.5% 0.5%;
    padding:0;
    display:inline
    }

    body
    {
    font: 76% arial,sans-serif
    }

    div#header h1
    {
    height:80px;
    line-height:80px;
    width:100%;
    margin-bottom:0.5%;
    padding-left:10px;
    background-color:#ff9999
    }

    div#container
    {
    float:left;
    width:100%
    }

    div#content
    {
    float:left;
    width:74.9%;
    margin-bottom:0.5%;
    background-color:#00ccff
    }

    div#news
    {
    float:left;
    height:100%;
    width:25%;
    margin-left:-25%;
    background:#0099cc
    }

    div#footer
    {
    clear:left;
    width:100%;
    margin-top:0.5%;
    background-color:#ba3f3f
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="header"><h1>Header</h1></div>
    <div id="content">
    <img src="images/1.jpg" alt="" />
    </div>
    <div id="news">
    <p><strong>3) More stuff here.</strong> very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
    </div>
    <div id="footer"><p>Here it goes the footer</p></div>
    </div>
    </body>
    </html>

  4. #3
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    Shrink the image, or make it a thumbnail that the user can click to bring up the full size image.
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!

  5. #4
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    I know this would work, but they want me to leave the image as it is, so I can't use overflow:hidden. I have to stretch the whole layout. :-((

  6. #5
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    Ask about the thumbnail. There aren't many people out there that would stay on a site with a picture that bloody huge starin at em.
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!

  7. #6
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    lol. i totally agree with you chris, i don't know where the hell they came up with this task, but unfortunately that is the way I've to do. I would really appreciate if you have any suggestions

  8. #7
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    If you can't use overflow: hidden then your width calculations won't work. Try setting a width on just the sidebar and also floating the right sidebar left. Then leave width specifications off of the header and footer and picture. See if they stretch appropriately then.

  9. #8
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    It doesn't work. The navigation part (the right one) is now placed in the uppermost rightmost corner of the picture and is still on top of it. And the header and footer have not stretched.

    Here is the code I'm using now in case I got sth wrong:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Layout 1</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <style type="text/css">
    html,body
    {
    margin:0.5% 0.5% 0.5% 0.5%;
    padding:0;
    display:inline-block
    }

    body
    {
    font: 76% arial,sans-serif
    }

    div#header h1
    {
    height:80px;
    line-height:80px;
    margin-bottom:0.5%;
    padding-left:10px;
    background-color:#ff9999
    }

    div#container
    {
    width:100%;
    }

    div#content
    {
    float:left;
    margin-bottom:0.5%;
    background-color:#00ccff;
    }

    div#news
    {
    float:left;
    height:100%;
    width:25%;
    margin-left:-25%;
    text-align:right;
    background:#0099cc
    }

    div#footer
    {
    clear:left;
    margin-top:0.5%;
    background-color:#ba3f3f
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="header"><h1>Header</h1></div>
    <div id="content">
    <img src="images/1.jpg" alt="" />
    </div>
    <div id="news">
    <p><strong>3) More stuff here.</strong> very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
    </div>
    <div id="footer"><p>Here it goes the footer</p></div>
    </div>
    </body>
    </html>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:34 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com