Forums

Give help. Get help.

  • # March 27, 2014 at 3:39 pm

    Hello everyone! My first time here. I’ve always struggled with CSS and want to get better. Thanks in advance for your help.

    I hope what I am trying to explain looks good as I can’t find a preview button should it exist. Oh well, here goes….

    I want two rows on the page like the following:

    Address:   _________   Map
    City:      _________
    

    The “_____” is really an input element. I want the two rows to look like a table with three columns on the first row (“Address:”, input element, and map link) and two columns on the second row (“City:” and input element where there is a span between columns 2 and 3), however, for the mater principle, I don’t want to use a table. Currently, my HTML looks like the following, however, I can add a div wrapper if necessary.

    <div>
        <label for="address" class="input">Address:</label>
        <input type="text" id="address" >
        <a href="#">Map</a>
    </div>
    <div>
        <label for="city" class="input">City:</label>
        <input type="text" id="city" >
    </div>
    

    Now, the tricky part (at least for me). I am using jquery-validation, and if there is an error, it automatically inserts a label element below the applicable input (and also automatically adds class “error” to the applicable input element) as shown below. So, now, my HTML would look like:

    <div>
        <label for="address" class="input">Address:</label>
        <input type="text" id="address"  class="error">
        <label for="address" generated="true" class="error">This input is required</label>
        <a href="#">Map</a>
    </div>
    <div>
        <label for="city" class="input">City:</label>
        <input type="text" id="city"  class="error">
        <label for="address" generated="true" class="error">This input is required</label>
    </div>
    

    For this scenario, it would like the the following:

    Address:   _________   Map
               This input is required
    City:      _________
               This input is required
    

    Can anyone help me with the applicable CSS?

    Thank you!

    PS. Hope this post isn’t posted twice. First time I tried, it didn’t seem to take.

    # March 27, 2014 at 8:13 pm

    Hi Wolfcry,

    How would you recommend removing the height if the validation label does not exist?

    Also, would it be simpler with more html markup or is it okay as is?

    Thanks

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag