Forums

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

Home Forums CSS css layout problem in php gallery

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #43418
    Hochvater
    Member

    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:

    Portofolio

    if (!isset($_POST))
    {
    ?>










    }
    if (isset($_POST)&&$_POST==1){
    ?>




    session_destroy();
    ?>


    Thank you for your time invested in reading this and any ideas would be appreciated.

    #128615
    Hochvater
    Member

    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!

    #128630
    Hochvater
    Member

    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!

    #128631
    Senff
    Participant

    @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/

    #128632
    Hochvater
    Member

    Thanks, Senff, I’ll check that out!

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