Select boxes and trailed titles are far apart

Hi everyone,
Although this is a PHP forum and my app. is PHP too, my problem lays, I think, in CSS
programming but I cannot display it in a CSS forum since it is a
*PHP
*MySQL
*HTML
*CSS
combination. I hope someone here can help me with the complication I bumped into.
My app. shows a table and the user is asked to select “from… to” ranges for each column.
I’d like the select boxes and the titles “from…to” to be close together, at the same line.
My code:

yields select boxes placed far from their accompanied title.
I would also like the “selects” to be at the same table column beneath their column titles but that is
too much to ask for the time being.
I’d just ask anyone who can to show me how to stick together select boxes with their trailed titles
and put them in one line.
Thanks a lot.

The best thing to do if this is a layout problem is to show the resulting html and the css that comes from the php/sql. This is all that is seen on the client side, all the php stuff and jumble of different languages just confuses things for those looking at it.

3 Likes

I changed it into 2 html files. Is it better now?

That’s even more confusing. :confused:
Now there are 2 pages in one. One with the table head, and one with the table body.
What we want is as if you run the php then view the html source.

I’ll try and paste up something from your code.

Your css

            *
            {
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                font: inherit;
                vertical-align: baseline;
            }
            html, body
            {
                height:100%;
            }
            table
            {
                direction:rtl;
                width:80%;
                max-width:80%;
                table-layout:fixed;
                margin:auto;
                border-collapse: collapse;
            }
            th
            {
                padding:5px 10px;
                font-family: 'Arimo', 'sans-serif';
                font-weight:bold;
            }
            thead
            {
                background:#075e54;
                color:#ffffff; 
                display:table;
                width:100%;
                width:calc(100% - 18px);
            }
            .firstCol {width:5%;text-align: center;font-family: 'Varela+Round', sans-serif;}
            .secondCol {width:8%;text-align: center;font-family: 'Varela+Round', sans-serif;}
            .thirdCol {width:8%;text-align: center;font-family: 'Varela+Round', sans-serif;}
            .fourthCol {width:8%;text-align: center;font-family: 'Varela+Round', sans-serif;}
            .fifthCol {width:8%;text-align: center;font-family: 'Varela+Round', sans-serif;}
            .sixthCol {width:7%;text-align: center;font-family: 'Varela+Round', sans-serif;}
            .seventhCol {width:7%;text-align: center;font-family: 'Varela+Round', sans-serif;}
            .eighthCol {width:5%;text-align: center;font-family: 'Varela+Round', sans-serif;}
            .ninethCol {width:5%;text-align: center;font-family: 'Varela+Round', sans-serif;}
            .tenthCol {width:8%;text-align: center;font-family: 'Varela+Round', sans-serif;}
            .eleventhCol {width:18%;text-align: center;font-family: 'Varela+Round', sans-serif;}
                        
                        #extraction
            {
                border-radius:10px;
                box-shadow:0 0 3px #AAA;
                -webkit-box-shadow: inset 3px 3px 0px 0px #808080;
                -moz-box-shadow:    inset 3px 3px 6px 0px #808080;
                box-shadow:  inset 3px 3px 6px 0px #808080;
                direction:rtl;
                width:7%;
                height:5%;
                background:#ffffff;
                margin:1px auto;padding:2px;
                overflow:auto;
                display:block;
            }
            .selectCounter
            {
                float: right;
            }

and the html

<!DOCTYPE html>
<!--forum_titles.html-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Arimo|Varela+Round">  
    </head>
<body>
    <table>
        <thead>
            <tr>
                <th class="firstCol" scope="col" >1</th>
                <th class="secondCol" scope="col">22222</th>
                <th class="thirdCol" scope="col">33333</th>
                <th class="fourthCol" scope="col">444</th>
                <th class="fifthCol" scope="col">55555</th>
                <th class="sixthCol" scope="col" >66666</th>
                <th class="seventhCol" scope="col">7777</th>
                <th class="eighthCol" scope="col">8888</th>
                <th class="ninethCol" scope="col">99999</th>
                <th class="tenthCol" scope="col">00000</th>
                <th class="eleventhCol" scope="col" >aaaa</th>
            </tr>
        </thead>
                <tbody  class="selectCounter">
                    <tr>
                        <td>
                                from:
                                <select name='from_counter' id = "extraction" >
                                        <option value="volvo">Volvo</option>
                                        <option value="saab">Saab</option>
                                        <option value="mercedes">Mercedes</option>
                                        <option value="audi">Audi</option>
                                </select>
                                to:
                                <select name='to_counter' id = "extraction">
                                        <option value="volvo">Volvo</option>
                                        <option value="saab">Saab</option>
                                        <option value="mercedes">Mercedes</option>
                                        <option value="audi">Audi</option>
                                </select>
                        </td>
                        <td>
                                from:
                                <select name='from_counter' id = "extraction" >
                                        <option value="volvo">Volvo</option>
                                        <option value="saab">Saab</option>
                                        <option value="mercedes">Mercedes</option>
                                        <option value="audi">Audi</option>
                                </select>
                                to:
                                <select name='to_counter' id = "extraction">
                                        <option value="volvo">Volvo</option>
                                        <option value="saab">Saab</option>
                                        <option value="mercedes">Mercedes</option>
                                        <option value="audi">Audi</option>
                                </select>
                        </td>
                        <td>
                                from:
                                <select name='from_counter' id = "extraction" >
                                        <option value="volvo">Volvo</option>
                                        <option value="saab">Saab</option>
                                        <option value="mercedes">Mercedes</option>
                                        <option value="audi">Audi</option>
                                </select>
                                to:
                                <select name='to_counter' id = "extraction">
                                        <option value="volvo">Volvo</option>
                                        <option value="saab">Saab</option>
                                        <option value="mercedes">Mercedes</option>
                                        <option value="audi">Audi</option>
                                </select>
                        </td>
                    </tr>
            </tbody>
        </table>
    </body>
</html>
2 Likes

Thank you SamA74.
Most confused is myself.
Thanks for your solution.
My starting point was a PHP program which I tried to dismantel so it’d be readable (titles for reuse) but I found my self getting into growing complicatios.
I’ll start agaitn with HTML (+CSS) only , using your suggestion, and when the result is satisfactory I’ll assimilate it inside the PHP…
thank you for your efforts.

That wasn’t really a solution, I was just putting the code into a format of just html and css so it may be more easily debugged.

I myself didn’t clearly see where my problem lays thats why my notification was so confusing.
I’m trying to make the application better structured so things can be better pinpointed.
Sorry about confusion.

The main problem I see is that the table head row has 11 cells, but the table body has only 3.
So cells in the body will need the colspan attribute to make the numbers add up.

1 Like

Hi SamA74,
Your suggestion is right hence the problem presented in my post is solved but unforunately my table is still messy :confused:
I presented the new problem which poped up here:

I’ll be grateful if you take a look.
Thanks a lot

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.