Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS I really need your help in HTML/CSS plz

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #38698
    djflo99
    Member

    Hello everybody,

    I’m a webdesigner, i’ve designed a home page for a website and it was validated by the client, but once the programmers wanted to integrate it, they have a problem integration the Footer (See the image here : http://postimage.org/image/8rbrcrown (another link to view the image: http://www.freeimagehosting.net/padh6 )

    They said that the footer can’t be programmed (and i don’t believe them :) ), so if you can help me solve this problem i’ll be very happy and I can keep my job :)

    I’m online now for further question.

    And sorry about my bad english :)

    #105354
    djflo99
    Member

    Thank you very much @kgscott284 for your quick feedback,

    Unfortuntly I tryed to have access to the code, but I couldn’t because it’s “confidentiel” they said. I’ll do my best to get the code and publish it here.

    Thnak you again for your help, and keep it up :)

    #105371
    simoncmason
    Member

    As @kgscott284 says without seeing the output HTML it is impossible to say for sure why they are having a hard time recreating your image as a web page.

    Is the problem that the footer is going the full width of the page and not leaving the empty space on the left that you want?

    In which case is seems that something like footer {width:70%; float:right} or depending on the containers the footer sits within maybe using position:relative or even position:absolute rules would get you rolling. Or there are lots of other ways to implement your layout.

    In any case to say it can’t be done seems a bit far fetched. The design seems very simple (and all the better for that) to my eyes and as such it should be a snap to create the layout in CSS.

    #105373
    Paulie_D
    Member

    Yeah, if the footer is to extend across the whole page/screen width then that might be an issue…I’ll have a think.

    Here’s where I’m at so far: http://codepen.io/pen/8482/1

    #105710
    djflo99
    Member

    Hello everybody,

    I’m so grateful for your help. I did talked to the programmer and proposed to him the solutions you give me, but he told me that he already tested that and it’s not working.

    For the website, his already online and you can view at this adresse : (after www.) d a r e d d a y a h o t e l . m a (Sorry I wrote it like that to avoid that the website be referenced at Google, for confidentiality reasons :) )

    Thank you again,

    #105715
    simoncmason
    Member

    OK – So you want the footer full width?

    Bit hacky (It would be far better to rewrite the HTML structure but I take it this isn’t an option and this really isn’t going to look great on small screens (see note below)) but this will work, also only tested in Chrome, you’ll need to test in Firefox, IE etc (It won’t work in ie6):

    #left {
    min-height: 2000px;
    /* Makes the vertical menu bar extend to the bottom of the screen */
    }

    #footer {
    position: absolute;
    left: 0;
    right: 0;
    /* Position absolute allows us to put it where we want, giving it left and right 0 busts it out of the container and sticks it to either side of the screen */
    bottom: 10px;
    /* Puts it 10 pixels from the bottom of the screen (please note this will break the design in mobiles when the user zooms in as the bar will move under the welcome box – the screen not being tall enough to accommodate it – I did say you need to re-write the html ;) */
    width:100%;
    /* Allows us to position the sub-menu using margin 0 auto */
    z-index: -1;
    /* Puts it under the vertical menu bar */
    min-height:60px
    /* Gives it back the height it loses by being position absolute */
    }

    .sub_footer {
    width: 960px;
    margin: 0 auto;
    /* Centres the sub-menu back inline with the main content box */
    }

    .menu_foo {
    float:right;
    /* Puts the menu in place */
    }

    .by {
    float:right
    /* Puts the byline in place */
    }

    Interesting exercise, but, please note the caveats above and I really wouldn’t recommend this for a production site unless the client is happy the design is not going to be seen on mobiles, if they are having a separate mobile site constructed or of course you can use media queries to change the layout for mobile.

    If there is any way of getting the html changed it would be a lot better to simply put the footer outside of the #layout div, underneath it in the document tree, and give it width 100%.

    Good luck and hope this helps.

    Simon

    #106044
    djflo99
    Member

    Thank you very much @simoncmason

    I’ll give this code to the programmer and I’ll make sure to make you know about any progress :)

    Thank you again for your time.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.