HTML CSS

Matt_Hirst · 20 Mar 2015 at 11:08

I am writing a HTML file just to learn a few things what I am wanting to do is position a few select boxes on a form with labels to the left of these select boxes, all very simple but it doesn't seem to be working as I expect.

Code:

<!DOCTYPE html>
<html lang="en">
    
    <head>
        
        <body>
            <label class="left">Select Quote:</label>
            <select id="quoteselect" name="quoteselect" onchange="populateDD2()"></select>
             <h1><select id="quote" name="quote"></select></h1>

             <h1><select id="customer" name="customer"></select></h1>

             <h1><select id="pricelist1" name="pricelist1"></select></h1>

             <h1><select id="pricelist2" name="pricelist2"></select></h1>

             <h1><select id="pricelist3" name="pricelist3"></select></h1>

            <select id="month" name="month"></select>
            <script type="text/javascript">
                populateDD();
            </script>
        </body>
    </head>

</html>

I have also created a CSS file

Code:

#quoteselect
    {
        position:absolute;
        top: 100px;
        left: 200px;
        width: 150px;
    }

label{
    position: absolute;
}
.right{
    top: 0;
    left: 100%;
}
.left{
    top: 0;
    right: 100%;
}
.top{
    bottom: 100%;
    left: 0;
}
.bottom{
    top: 100%;
    left: 0;
}

#quote
    {
        position:absolute;
        top: 100px;
        left: 200px;
        width: 150px;
    }

#customer
    {
        position:absolute;
        top: 100px;
        left: 200px;
        width: 150px;
    }

#pricelist1
    {
        position:absolute;
        top: 100px;
        left: 200px;
        width: 150px;
    }
#pricelist2
    {
        position:absolute;
        top: 100px;
        left: 200px;
        width: 150px;
    }

#pricelist3
    {
        position:absolute;
        top: 100px;
        left: 200px;
        width: 150px;
    }

All I want to do is be able to position the quoteselect and have the label to the left of this - what am I doing wrong?

Matt

GravyMonster · 20 Mar 2015 at 11:29

What layout are you trying to achieve? It's not clear from what you have now - http://jsfiddle.net/z0cf9ydr/

Also, for SEO you should only have 1 h1 element in the page, and it certainly shouldn't have a select in it

Matt_Hirst · 20 Mar 2015 at 11:36

I was just trying to get the centre positioned select to have a label to the left of it, then look at setting the other selects positions and labels accordingly.

Ideally I want to have a top select which spans the full width of the form with a label to the left, below this I would like two selects with labels to the left of each, equally spaced across the width, below this I would like three more selects with labels to the left of each again equally spaced across the width of the form.

Matt

Matt_Hirst · 20 Mar 2015 at 11:53

Have updated the html to:

Code:

<!DOCTYPE html>
<html lang="en">
    
    <head>
        
        <body>
            <label id="labelquoteselectleft">Select Quote:</label>           
            <select id="quoteselect" name="quoteselect"></select>
        </body>
    </head>

</html>

and css file to

Code:

#labelquoteselectleft
{
        position:absolute;
        top: 100px;
        left: 100px;
}




label
    {
    position: absolute;
    }
.right
    {
        top: 0;
        left: 100%;
    }
.left
    {
        top: 0;
        right: 100%;
    }
.top
    {
        bottom: 100%;
        left: 0;
    }
.bottom
    {
        top: 100%;
        left: 0;
    }

this fixes the position but I just wondered if the label could be set to a relative left position to the check box without coding it's position?

Matt

roger that · 20 Mar 2015 at 12:13

This might be close to what you wanted.

http://jsfiddle.net/fufflevalve/ntov9nnr/

It does fall apart at smaller widths though.

Matt_Hirst · 20 Mar 2015 at 13:13

roger that,

Thanks for that, it is laid out exactly how I want it to be, superb.

One final thing I need to look to do is, this form is one of three I need to make up to fit onto a single screen, each one needs to be able to be collapsed is this possible?

Can you reccomend some good learning resources, also any advice on editor's, etc.

regards,

Matt

Matt_Hirst · 20 Mar 2015 at 14:44

Got it sort of working with this: http://jsfiddle.net/eK8X5/5519/

But when I create the separate files:

Code:

<html>
<head>
        <link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
        <script type="text/javascript" src="script.js"></script>

       
<div class="container">
    <div class="header"><span>+</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>
<div class="container">
    <div class="header"><span>+</span>
    </div>
    <div class="content2">
        <ul>
            <li>This is just some random content2.</li>
            <li>This is just some random content2.</li>
            <li>This is just some random content2.</li>
            <li>This is just some random content2.</li>
        </ul>
    </div>
</div>
</head>
</html>

css

Code:

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}

script.js

Code:

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "-" : "+";
        });
    });

});

Clicking the header doesn't do anything.

Matt

Matt_Hirst · 20 Mar 2015 at 15:15

updated to this to combine the two

Code:

http://jsfiddle.net/eK8X5/5525/

Still need to work out how to create the seperate files to make all this work?

Matt

Aston998 · 23 Mar 2015 at 08:42

Hello dude, If you are wanting to learn about CSS & HTML you might want to have a look at http://www.w3schools.com/

Matt_Hirst · 23 Mar 2015 at 10:49

Thanks for the reply, now have three seperate files:

HTML:

Code:

<html>
<head>
        <link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
                    <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
                    <script type="text/javascript" src="script.js"></script>
       
<div class="container">
    <div class="header"><span>+ Quote: </span></div>

    <div class="content">
        <form>
            <label>Select Quote:</label>
            <select id="quoteselect" class="top" name="quoteselect" onchange="populateDD2()"></select>

            <label>Quote:</label>
            <select id="quote" class="two-selects" name="quote"></select>

            <label>Customer:</label>
            <select id="customer" class="two-selects" name="customer"></select>

            <label>Pricelist 1:</label>
            <select id="pricelist1" class="three-selects" name="pricelist1"></select>

            <label>Pricelist 2:</label>
            <select id="pricelist2" class="three-selects" name="pricelist2"></select>

            <label>Pricelist 3:</label>
            <select id="pricelist3" class="three-selects" name="pricelist3"></select>

        </form>
    </div>
</div>

<div class="container">
    <div class="header"><span>+ Product Configurator</span></div>

    <div class="content">
       <form>
            <label>Select Quote:</label>
            <select id="quoteselect" class="top" name="quoteselect" onchange="populateDD2()"></select>

            <label>Quote:</label>
            <select id="quote" class="two-selects" name="quote"></select>

            <label>Customer:</label>
            <select id="customer" class="two-selects" name="customer"></select>

            <label>Pricelist 1:</label>
            <select id="pricelist1" class="three-selects" name="pricelist1"></select>

            <label>Pricelist 2:</label>
            <select id="pricelist2" class="three-selects" name="pricelist2"></select>

            <label>Pricelist 3:</label>
            <select id="pricelist3" class="three-selects" name="pricelist3"></select>

        </form>
    </div>
</div>

<div class="container">
    <div class="header"><span>+ Product</span></div>

    <div class="content">
       <form>
            <label>Select Quote:</label>
            <select id="quoteselect" class="top" name="quoteselect" onchange="populateDD2()"></select>

            <label>Quote:</label>
            <select id="quote" class="two-selects" name="quote"></select>

            <label>Customer:</label>
            <select id="customer" class="two-selects" name="customer"></select>

            <label>Pricelist 1:</label>
            <select id="pricelist1" class="three-selects" name="pricelist1"></select>

            <label>Pricelist 2:</label>
            <select id="pricelist2" class="three-selects" name="pricelist2"></select>

            <label>Pricelist 3:</label>
            <select id="pricelist3" class="three-selects" name="pricelist3"></select>

        </form>
    </div>
</div>
</head>
</html>

CSS

Code:

.container
{
    width:100%;
    border:1px solid #d3d3d3;
}

.container div
{
    width:100%;
}

.container .header
{
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}

.container .content
{
    display: none;
    padding : 5px;
}

form:after {
    content:" ";
    display:table;
}
label {
    display:inline-block;
    float:left;
    min-width:15%;
    text-align:right;
}
select{
    display:block;
    width:100px;
    margin-bottom:1em;
}
.top {
    width:85%;
}
.two-selects {
    width:35%;
    float:left;
}
.three-selects {
    width:18.333%;
    float:left;
}

JS FILE

Code:

            $(document).ready(function(){
                $(".header").click(function () {
                    $header = $(this);
                    //getting the next element
                    $content = $header.next();
                    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
                    $content.slideToggle(500, function () {
                       //execute this after slideToggle is done
                       //change text of header based on visibility of content div
                      $header.text(function () {
                          //change text based on condition
                         return $content.is(":visible") ? "-" : "+";
                       });
                     });
                  });
              });

Now I need to change the text contained in the headers depending on which one is clicked i.e. if I click the + of the first area I need to change the text to "- Quote:", if I click the + of the second header the text in the second header needs to be "- Product:".

I assume this is done in the js file which needs to react upon whichever header is pressed so the id of that particular header will need changing but as to how to do all this I aint got a clue.

regards,

Matt

Aston998 · 23 Mar 2015 at 11:05

Is it still not doing what you want it to do?

Matt_Hirst · 23 Mar 2015 at 11:18

Yeah it is working just trying to learn my way through amending it to do different things and learning along the way.

I think I am close to getting the script to receive the id and ammend the text accordingly, I need to go back and mod the layout as it is setting it to 100% but it means the select boxes fit to the end of the screen, ideally I need an equidistant gap on the left and right just to make it look right - not sure if I need to define an element as padding or change the % laid.

Overall I am trying to learn best practice for doing this hence lots of questions.

Matt

Aston998 · 23 Mar 2015 at 12:31

No worries

I am doing a computing degree at the moment. So free feel to ask me any questions, Your welcome to add us on Steam or something

Matt_Hirst · 25 Mar 2015 at 15:02

Have modified it once more:

HTML

Code:

<html>
<head>
        <link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
                    <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
                    <script type="text/javascript" src="script.js"></script>     
     
<div class="container">
    <div class="header" id="header1"><span>+ Quote: </span></div>

    <div class="content">
        <form>
            <label>Select Quote:</label>
            <select id="quoteselect" class="one-selects" name="quoteselect" onchange="populateDD2()"></select>

            <label>Quote:</label>
            <select id="quote" class="two-selects" name="quote"></select>

            <label>Customer:</label>
            <select id="customer" class="two-selects" name="customer"></select>

            <label>Pricelist 1:</label>
            <select id="pricelist1" class="three-selects" name="pricelist1"></select>

            <label>Pricelist 2:</label>
            <select id="pricelist2" class="three-selects" name="pricelist2"></select>

            <label>Pricelist 3:</label>
            <select id="pricelist3" class="three-selects" name="pricelist3"></select>

        </form>
    </div>
</div>

<div class="container2">
    <div class="header" id="header2"><span>+ Product Configurator: </span></div>

    <div class="content">
       <form>
            <label id="lblref">Ref:</label>
            <input type="text" id="ref" name="ref">

            <label id="lbl_pband">Price Band:</label>
            <select id="pband" name="pband"></select>

            <label  id="lbl_product">Product:</label>
            <select id="product" name="product"></select>

            <button type="button" id="btn_reset">Reset</button>

            <label id="lbl_description">Description:</label>
            <input type = "text" id="dedscription" class="two-selects" name="descripton">

            <label id="lbl_id1"></label>
            <input type = "text" id="id1" name="id1">

            <label id="lbl_id5"></label>
           <input type = "text" id="id5" name="id5">

            <label id="lbl_unit">Unit:</label>
            <select id="unit" id="unit" name="unit"></select>

            <label id="lbl_discount">Discount:</label>
            <input type = "text" id="disc" name="disc">

            <input type="checkbox" id="pdisc" name="pdisc">
            <label id="lbl_percentagediscount" id="lbl_percentagediscount">%</label>

            <label id="lbl_id2"></label>
            <input type = "text" id="id2" name="id2">

            <label id="lbl_id6"></label>
           <input type = "text" id="id6" name="id6">

            <label id="lbl_factor">Factor:</label>
            <input type = "text" id="factor" name="factor">

            <label id="lbl_isalternateproduct">Is Alternate Product</label>
            <input type="checkbox" id="aprod" name="aprod">

            <label id="lbl_id3"></label>
            <input type = "text" id="id3" name="id3">

            <label id ="lbl_qty">Qty:</label>
            <input type = "text" id="qty" name="qty">

            <label id="lbl_unitprice">Unit Price:</label>
            <input type = "text" id="uprice" name="uprice">

            <label id="lbl_insertafterselected">Insert After Selected</label>
            <input type="checkbox" id="inaftsel" name="inaftsel">

            <label id="lbl_id4"></label>
            <input type = "text" id="id4" name="id4">

            <label id="lbl_sellingunit">Selling Unit:</label>
            <select id="sunit" id="sunit" name="sunit"></select>

            <label id="lbl_amount" class="label">Amount:</label>
            <input type = "text" id="amount" name="amount">

            <input type = "techdesc" id="techdesc" name="techdesc">

            <button type="button" id="btnadd">Add</button>
        </form>
    </div>
</div>

<div class="container">
    <div class="header" id="header3"><span>+ Product</span></div>

    <div class="content">
       <form>
            <label id="lbl_filtert">Filter Product By:</label>
            <input type = "text" class="three-selects" name="filterby" id="filterby">

            <table id="tt" border="1" style="width:90%; height:auto;">
                <thead>
                    <tr>
                        <th field="tbl_select" width="50">Select</th>
                        <th field="tbl_ref" width="50">Ref</th>
                        <th field="tbl_product" width="50">Product</th>
                        <th field="tbl_qty" width="50">Qty</th>
                        <th field="tbl_unitprice" width="50">Unit Price</th>
                        <th field="tbl_discunit" width="50">Disc Unit</th>
                        <th field="tbl_disc" width="50">Disc</th>
                        <th field="tbl_discp" width="50">Disc %</th>
                        <th field="tbl_subtotal" width="50">Subtotal</th>
                        <th field="tbl_total" width="50">Total</th>
                        <th field="tbl_selling" width="50">Selling</th>
                        <th field="tbl_pricelist" width="50">PriceList</th>
                        <th field="tbl_description" width="50">Description</th>
                    </tr>  
                </thead> 

                    <tbody>
                    </tbody>
            </table>

        </form>
    </div>
</div>
</head>
</html>

script.js

Code:

            $(document).ready(function(){
                $(".header").click(function () {
                    $header = $(this);
                    //getting the next element
                    $content = $header.next();
                    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
                    $content.slideToggle(500, function () {
                       //execute this after slideToggle is done
                       //change text of header based on visibility of content div
                      $header.text(function () {
                            var currentId = $(this).attr('id');
                            switch(currentId)
                            {
                                 case "header1" : return $content.is(":visible") ? "- Quote" : "+ Quote:";
                                 case "header2" : return $content.is(":visible") ? "- Product Configurator:" : "+ Product Configurator:";
                                 case "header3" : return $content.is(":visible") ? "- Product:" : "+ Product:";
                            }                          
                       });
                     });
                  });
              });

mystyles.css

Code:

div.parent
{
    position: relative;
    left: 0px;
    top: 0px;
}

div.child
{
    position: absolute;
    left: 10px;
    top: 10px;
}

.container
{
    width:100%;
    border:1px solid #d3d3d3;
}

.container div
{
    width:100%;
}

.container .header
{
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
    height: 20px;
}

.container .content
{
    display: none;
    padding: 3px;
    height: 100px;
}

.container2
{
    width:100%;
    border:1px solid #d3d3d3;
}

.container2 div
{
    width:100%;
}

.container2 .header
{
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
    height: 20px;
}

.container2 .content
{
    display: none;
    padding: 3px;
    height: 255px;
}

form:after
{
    content:" ";
    display:table;
    left-margin:5%;
    right-margin:5%;
}

label
{
    display:inline-block;
    float:left;
    left-margin:3px;
    right-margin:3px;
    text-align:right;
    width:100px
}

select
{
    display:block;
    width:80px;
    margin-bottom:1em;
}

.one-selects
{
    width:81%;
}

.two-selects
{
    width:38.5%;
    float:left;
}

.three-selects
{
    width:20.333%;
    float:left;
}

.four-selects
{
    width:20.333%;
    float:left;
}

.five-selects
{
    width:14%;
    float:left;
}

#lblref
    {
        position:absolute;
        top: 170px;
        left: 50px;
        width: 150px;
    }

#ref
    {
        position:absolute;
        top: 170px;
        left: 200px;
        width: 150px;
    }

#lbl_pband
    {
        position:absolute;
        top: 170px;
        left: 750px;
        width: 150px;
    }

#pband
    {
        position:absolute;
        top: 170px;
        left: 900px;
        width: 150px;
    }

#lbl_product
    {
        position:absolute;
        top: 170px;
        left: 1250px;
        width: 150px;
    }
#product
    {
        position:absolute;
        top: 170px;
        left: 1400px;
        width: 300px;
    }

#btn_reset
    {
        position:absolute;
        top: 270px;
        left: 40px;
        width: 150px;
    }

#lbl_description
    {
        position:absolute;
        top: 195px;
        left: 50px;
        width: 150px;
    }

#dedscription
    {
        position:absolute;
        top: 195px;
        left: 200px;
        width: 1500px;
        height: 100;
    }

#lbl_id1
    {
        position:absolute;
        top: 300px;
        left: 50px;
        width: 150px;
    }

#id1
    {
        position:absolute;
        top: 300px;
        left: 200px;
        width: 150px;
    }

#lbl_id5
    {
        position:absolute;
        top: 300px;
        left: 500px;
        width: 150px;
    }

#id5
    {
        position:absolute;
        top: 300px;
        left: 650px;
        width: 150px;
    }

#lbl_unit
    {
        position:absolute;
        top: 300px;
        left: 950px;
        width: 150px;
    }

#unit
    {
        position:absolute;
        top: 300px;
        left: 1100px;
        width: 150px;
    }

#lbl_discount
    {
        position:absolute;
        top: 300px;
        left: 1350px;
        width: 150px;
    }

#disc
    {
        position:absolute;
        top: 300px;
        left: 1500px;
        width: 150px;
    }

#pdisc
    {
        position:absolute;
        top: 300px;
        left: 1660px;
        width: 20px;
    }

#lbl_percentagediscount
    {
        position:absolute;
        top: 300px;
        left: 1680px;
        width: 20px;
    }

#lbl_id2
    {
        position:absolute;
        top: 325px;
        left: 50px;
        width: 150px;
    }

#id2
    {
        position:absolute;
        top: 325px;
        left: 200px;
        width: 150px;
    }

#lbl_id6
    {
        position:absolute;
        top: 325px;
        left: 500px;
        width: 150px;
    }

#id6
    {
        position:absolute;
        top: 325px;
        left: 650px;
        width: 150px;
    }

#lbl_factor
    {
        position:absolute;
        top: 325px;
        left: 950px;
        width: 150px;
    }

#factor
    {
        position:absolute;
        top: 325px;
        left: 1100px;
        width: 150px;
    }

#lbl_isalternateproduct
    {
        position:absolute;
        top: 325px;
        left: 1510px;
        width: 150px;
    }

#aprod
    {
        position:absolute;
        top: 325px;
        left: 1660px;
        width: 20px;
    }

#lbl_id3
    {
        position:absolute;
        top: 350px;
        left: 50px;
        width: 150px;
    }

#id3
    {
        position:absolute;
        top: 350px;
        left: 200px;
        width: 150px;
    }

#lbl_qty
    {
        position:absolute;
        top: 350px;
        left: 500px;
        width: 150px;
    }

#qty
    {
        position:absolute;
        top: 350px;
        left: 650px;
        width: 150px;
    }

#lbl_unitprice
    {
        position:absolute;
        top: 350px;
        left: 950px;
        width: 150px;
    }

#uprice
    {
        position:absolute;
        top: 350px;
        left: 1100px;
        width: 150px;
    }

#lbl_insertafterselected
    {
        position:absolute;
        top: 350px;
        left: 1510px;
        width: 150px;
    }

#inaftsel
    {
        position:absolute;
        top: 350px;
        left: 1660px;
        width: 20px;
    }

#lbl_id4
    {
        position:absolute;
        top: 375px;
        left: 50px;
        width: 150px;
    }

#id4
    {
        position:absolute;
        top: 375px;
        left: 200px;
        width: 150px;
    }

#lbl_sellingunit
    {
        position:absolute;
        top: 375px;
        left: 950px;
        width: 150px;
    }

#sunit
    {
        position:absolute;
        top: 375px;
        left: 1100px;
        width: 150px;
    }


#lbl_amount
    {
        position:absolute;
        top: 375px;
        left: 1350px;
        width: 150px;
    }

#amount
    {
        position:absolute;
        top: 375px;
        left: 1500px;
        width: 150px;
    }

#techdesc
    {
        position:absolute;
        top: 400px;
        left: 200px;
        width: 1250px;
    }

#btnadd
    {
        position:absolute;
        top: 400px;
        left: 1500px;
        width: 150px;
    }

select
{
    display:block;
    width:80px;
    margin-bottom:1em;
}

.one-selects
{
    width:81%;
}

.two-selects
{
    width:38.5%;
    float:left;
}

.three-selects
{
    width:20.333%;
    float:left;
}

.four-selects
{
    width:20.333%;
    float:left;
}

.five-selects
{
    width:14%;
    float:left;
}

My only issue is the second drop down, I need the controls to be positioned relative to the content they are held within - hope that makes sense? Also when pressing "-" the third content holder and the first all scroll nicely whereas the second scrolls then the content is removed.

Any ideas?

Matt