Grow your CSS skills. Land your dream job.

css layout problem in php gallery

  • # March 18, 2013 at 9:47 am

    I’ve been working on a gallery made in php. Some time ago, I made the layout using tables. It worked out super. Now, using tables for layouts is not recommended and sort of “deprecated” (I don’t understand why, if someone could explain this to me, thank you). So, I’m trying to change the layout from tables to divs and I’m having a lot of problems (can someone recommend a good reference to how to make a good layout using css?). So far I managed this: [http://jsfiddle.net/hochvater/4DbUU/](http://jsfiddle.net/hochvater/4DbUU/ “”) . MY FIRST QUESTION is this: how do I make the #panel_poze div to show up in the top of the container div, glued to the #panel_albume (as it is now)? I don’t understand why #panel_albume is lined with the 3rd div contained by the div it is glued to (#panel_albume). My second question would be this: can’t I just put the big table (you can imagine easily how it looks by the structure of the divs) into a container div and sort of leave it as it was…would this still be considered “deprecated” or not recommended?

    THE CSS CODE:

    body {
    background-color: black;
    color: white;
    }

    @font-face { font-family: “john_handy”;
    src: url(“john_handy.eot”);
    src: local(“¢”),
    url(“john_handy.woff”) format(“woff”),
    url(“john_handy.TTF”) format(“opentype”),
    url(“john_handy.svg#john_handy”) format(“svg”);
    }
    @font-face { font-family: “bradley_hand”;
    src: url(“bradley_hand.eot”);
    src: local(“¢”),
    url(“bradley_hand.woff”) format(“woff”),
    url(“bradley_hand.TTF”) format(“opentype”),
    url(“bradley_hand.svg#bradley_hand”) format(“svg”);
    }

    a:link {color:white;} /* unvisited link */
    a:visited {color:white;} /* visited link */
    a:hover {color:red;} /* mouse over link */
    a:active {color:blue;} /* selected link */

    .fonty {
    text-align:center;
    font: italic 30px john_handy, serif;
    }

    a.fonty {
    font-style: normal;
    font-size:20px;
    }

    #pp {
    margin: 15% auto;
    max-width:80%;
    min-width:850px;
    text-align: center;
    white-space:nowrap;
    }

    .sec{
    position: static;
    margin: 0% 4%;
    max-width: 20%;
    min-width: 200px;
    display: inline-block;
    }

    .imageOff{
    border: 3px solid transparent;
    margin: auto;
    }

    .imageOn{
    border: 3px solid red;
    opacity: 0.7;
    filter: alpha(opacity=70);
    margin: auto;
    }

    .selected{

    padding: 2px;
    border: 1px solid red;

    }

    .submit{
    /*margin: 0;*/ border: none; /*padding: 0;*/ background: black;
    font:normal 20px john_handy, serif;
    color:white;
    }

    .subsel{

    color:red;

    }

    .submit:hover{ color:red; }

    .poze_albume{

    border: 1px solid red;
    height: 250px;
    width: 200px;

    }

    #panel_poze{

    border: 1px solid blue;
    width: 70%;
    min-width: 400px;
    display: inline-block;
    height: 100px;
    margin-top:0;

    }

    #panel_albume{

    border: 1px solid yellow;
    display:inline-block;

    }

    #container {

    text-align: center;
    width: 100%;
    border: 1px solid white;
    min-width: 700px;

    }

    .album {

    }

    THE GALLERY CODE:

    < ?php session_start(); ?>

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    # March 18, 2013 at 9:51 am

    Sorry, it’s the first time I post something here! The gallery code doesn’t look as it should have and I don’t know how to edit the post. Anyhow, if you want to have a look over it, just access the link to jsfiddle I provided. The css code is much more important in solving the issue rather than the gallery code. Thanks a lot, again!

    # March 18, 2013 at 10:35 am

    I figured it out! Sorry for wasting your time, guys! In the css code, the height of 100px of #panel_poze div was the problem…I changed that and it worked just fine! Look on the link to jsfiddle for the change!

    # March 18, 2013 at 10:35 am

    @Hochvater — the tables vs. divs discussion is because tables are not meant for laying out a page. Tables are meant to show tabular data; data that is supposed to be shown in columns and rows.

    While a table CAN be used to lay out a page, the current common way of doing this is by using DIVs, because that’s much easier to manipulate, change, and lay out. Putting your layout in table makes it less flexible to move things around.

    It’s like saying that you can make a car out of wood, but you shouldn’t cause steel is much better suited for it. Hope that makes sense.

    A good new site to learn the basics of layout can be found here: http://learnlayout.com/

    # March 18, 2013 at 10:39 am

    Thanks, Senff, I’ll check that out!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".