Forums

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

Home Forums CSS CSS responsive layout, with elements fluid and fixed

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #148246
    Hplatini89
    Participant

    Hello World!

    I need a bit help, I am developing a custom theme for WordPress: http://bjorn.flabifitness.hu/

    I need a fixed header, footer, menu area. And a fluid content area with page content (an image).

    During browser window size is changing, only the content need to be changed/adjusted to view-size, without scrollbar, and if the picture is bigger than the browser window, or the monitor, it should be adjusted to the size of browser-window. (fluid)

    Header, footer, and menu (vertical position) should be at the same place. (fixed)

    This is my CSS-code for now: (main: all of page, inside header, container(sidebar, content), footer)
    `

    main {

    position: absolute;
    background-color:#434343;
    z-index:0;
    display: block;
    opacity: 0;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    text-rendering: optimizeLegibility;
    

    }

    header {

    background: #1d1d1d;
    margin: 0;
    padding-top: 15px;
    padding-left: 35px;
    padding-bottom: 13px;
    min-width: 100%;
    margin:0px auto;
    

    }

    footer {

    clear: both;
    min-width: 100%;
    

    }
    /* two columns*/
    .container {
    height: auto;
    overflow: hidden;
    }

    .sidebar {
    width: 242px;
    float: left;
    background: #434343;
    min-height: 92%;
    }

    .content {
    float: none; /* not needed, just for clarification /
    background: #434343;
    /
    the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
    }
    `

    #148324
    Paulie_D
    Member

    Perhaps you could put something in Codepen for us to play with.

    #148338
    Hplatini89
    Participant

    Ok, thanks! :)

    so the main point is:

    image should be resized only, and other elements should be sticked to the image container.

    http://codepen.io/anon/pen/JoseB

    #148340
    Paulie_D
    Member

    Is the image there for Content purposes or Styling?

    #148343
    Hplatini89
    Participant

    for content purposes, this would be all the content (in content area)

    #148344
    Paulie_D
    Member

    I stripped out all of the images into the background and I think I’m mostly there.

    http://codepen.io/Paulie-D/pen/spHLd

    #148346
    Paulie_D
    Member

    I checked, now content area is adjusted by vertical resize.

    The image gets smaller as you narrow the window doesn’t it?

    You can’t keep the footer at the bottom of the page at all times AND have the image fill the rest of the content area exactly unless it distorts to do so.

    #148352
    Hplatini89
    Participant

    Yes, your solution is perfect, and I need the same horizontally and vertically together. just like here: http://www.caesarlima.com/

    #148363
    Paulie_D
    Member

    So it’s perfect..or isn’t it, I’m confused?

    I’m pretty sure you can’t be responsive BOTH ways without distorting the image..unless there is something else going on.

    #148498
    Hplatini89
    Participant

    In this site, can You guess, what they use?:

    http://www.caesarlima.com/

    It is cropping the images, but I cannot extract the appropriate CSS.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.