Search code examples
phphtmlcsserror-handlingmargin

My error message is formatted below my error message to the left of it


My error message is displayed a bit underneath my other error message. I'm trying to make it so they are displayed next to each other when they get an error. This is what it looks like before the error message: before error This what it looks like when I receive the errors: the error messages. To be more clear I would like the error messages to be above "Select a style:", and "Select a size:"

I tried applying css to format it correctly with margin, I tried adding in spaces. Both did not work.

<?php
if(($_POST['style'] == NULL) && ($_SERVER['REQUEST_METHOD'] == 'POST')){
    echo "<strong>Please select a clothing style!</strong><br />";
}
?>



<div class="style" style="width 100px; float:left; height 100px; margin:0px;">
<!-- this code asks the suer what clothing style they like. They have a lot of options. The code is like the gender code -->

Select a style: <br /> 
<label> <input type="radio" name="style" value="Casual" 
<?php 
if ($_POST['style'] == 'Casual') {
        echo "checked";
}
?>
/>Casual</label><br />

<label> <input type="radio" name="style" value="Athletic" 
<?php 
if ($_POST['style'] == 'Athletic') {
        echo "checked";
}
?>
/>Athletic</label><br />

<label> <input type="radio" name="style" value="Vintage" 
<?php 
if ($_POST['style'] == 'Vintage') {
        echo "checked";
}
?>
/>Vintage</label><br />

<label> <input type="radio" name="style" value="Formal" 
<?php 
if ($_POST['style'] == 'Formal') {
        echo "checked";
}
?>
/>Formal</label><br />

<label> <input type="radio" name="style" value="Streetwear" 
<?php 
if ($_POST['style'] == 'Streetwear') {
        echo "checked";
}
?>
/>Streetwear</label><br />

<label> <input type="radio" name="style" value="Rocker" 
<?php 
if ($_POST['style'] == 'Rocker') {
        echo "checked";
}
?>
/>Rocker</label>
</div>




<?php
if(($_POST['size'] == NULL) && ($_SERVER['REQUEST_METHOD'] == 'POST')){
    echo "<strong>Please select a clothing size!</strong><br />";
}
?>



<div class="size" style="width 100px; float:left; height 100px; margin:0px">

&nbsp
&nbsp
&nbsp
&nbsp
&nbsp
&nbsp
&nbsp
&nbsp
&nbsp
&nbsp
&nbsp
&nbsp
&nbsp
&nbsp
&nbsp


Select a size: <br />

<label class="one"> <input type="radio" name="size" value="Extra Small" 
<?php 
if ($_POST['size'] == 'Extra Small') {
        echo "checked";
}
?>
/>Extra Small</label><br />

<label class="one"> <input type="radio" name="size" value="Small" 
<?php 
if ($_POST['size'] == 'Small') {
        echo "checked";
}
?>
/>Small</label><br />

<label class = "one"> <input type="radio" name="style" value="Medium" 
<?php 
if ($_POST['size'] == 'Medium') {
        echo "checked";
}
?>
/>Medium</label><br />

<label class="one"> <input type="radio" name="size" value="Large" 
<?php 
if ($_POST['size'] == 'Large') {
        echo "checked";
}
?>
/>Large</label><br />

<label class="one"> <input type="radio" name="size" value="Extra Large" 
<?php 
if ($_POST['size'] == 'Extra Large') {
        echo "checked";
}
?>
/>Extra Large</label><br />

<label class="one"> <input type="radio" name="size" value="2X Large" 
<?php 
if ($_POST['size'] == '2X Large') {
        echo "checked";
}
?>
/>2X Large</label>
</div>

I would like for them to be displayed right next to each other horizontally so it looks nice.


Solution

  • Just add table for your error..

    <?php
    if(($_POST['style'] == NULL) && ($_SERVER['REQUEST_METHOD'] == 'POST')){
        echo "<table> <tr> <td> <strong>Please select a clothing style!</strong> </td> </tr> </table>";
    }
    ?>
    
    <?php
    if(($_POST['size'] == NULL) && ($_SERVER['REQUEST_METHOD'] == 'POST')){
        echo "<table> <tr> <td> <strong>Please select a clothing size!</strong></td> </tr> </table>";
    }
    ?>
    
    
    
    <div class="style" style="width 100px; float:left; height 100px; margin:0px;">
    <!-- this code asks the suer what clothing style they like. They have a lot of options. The code is like the gender code -->
    
    Select a style: <br /> 
    <label> <input type="radio" name="style" value="Casual" 
    <?php 
    if ($_POST['style'] == 'Casual') {
            echo "checked";
    }
    ?>
    />Casual</label><br />
    
    <label> <input type="radio" name="style" value="Athletic" 
    <?php 
    if ($_POST['style'] == 'Athletic') {
            echo "checked";
    }
    ?>
    />Athletic</label><br />
    
    <label> <input type="radio" name="style" value="Vintage" 
    <?php 
    if ($_POST['style'] == 'Vintage') {
            echo "checked";
    }
    ?>
    />Vintage</label><br />
    
    <label> <input type="radio" name="style" value="Formal" 
    <?php 
    if ($_POST['style'] == 'Formal') {
            echo "checked";
    }
    ?>
    />Formal</label><br />
    
    <label> <input type="radio" name="style" value="Streetwear" 
    <?php 
    if ($_POST['style'] == 'Streetwear') {
            echo "checked";
    }
    ?>
    />Streetwear</label><br />
    
    <label> <input type="radio" name="style" value="Rocker" 
    <?php 
    if ($_POST['style'] == 'Rocker') {
            echo "checked";
    }
    ?>
    />Rocker</label>
    </div>
    
    
    
    
    
    
    <div class="size" style="width 100px; float:left; height 100px; margin:0px">
    
    &nbsp
    &nbsp
    &nbsp
    &nbsp
    &nbsp
    &nbsp
    &nbsp
    &nbsp
    &nbsp
    &nbsp
    &nbsp
    &nbsp
    &nbsp
    &nbsp
    &nbsp
    
    
    Select a size: <br />
    
    <label class="one"> <input type="radio" name="size" value="Extra Small" 
    <?php 
    if ($_POST['size'] == 'Extra Small') {
            echo "checked";
    }
    ?>
    />Extra Small</label><br />
    
    <label class="one"> <input type="radio" name="size" value="Small" 
    <?php 
    if ($_POST['size'] == 'Small') {
            echo "checked";
    }
    ?>
    />Small</label><br />
    
    <label class = "one"> <input type="radio" name="style" value="Medium" 
    <?php 
    if ($_POST['size'] == 'Medium') {
            echo "checked";
    }
    ?>
    />Medium</label><br />
    
    <label class="one"> <input type="radio" name="size" value="Large" 
    <?php 
    if ($_POST['size'] == 'Large') {
            echo "checked";
    }
    ?>
    />Large</label><br />
    
    <label class="one"> <input type="radio" name="size" value="Extra Large" 
    <?php 
    if ($_POST['size'] == 'Extra Large') {
            echo "checked";
    }
    ?>
    />Extra Large</label><br />
    
    <label class="one"> <input type="radio" name="size" value="2X Large" 
    <?php 
    if ($_POST['size'] == '2X Large') {
            echo "checked";
    }
    ?>
    />2X Large</label>
    </div>