TechQA.

HTML/CSS - Text to right formatted without gaps

90 views Asked by At

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sell</title>
<link rel="stylesheet" type="text/css" href="../Web6/Web6.css"/>
</head>

<body>
    <center><h1>Video Games for Sale</h1></center>
    <center><h4>(This is for a school project only. Any of these items can not actually be purchased by an individual.)</h4></center>
<div><label class="field-label">First name:</label><input type="text" name="firstname" /></div><br/>
    <div><label class="field-label">Last Name:</label><input type="text" name="lastname" /></div>

    <p>
        <img src="SotC.jpg" alt="Shadow of the Colossus" /><input type="checkbox" name="games[]" value="shadowofthecolossus"/>
        Shadow of the Colossus - $20 <br/>
        <img src="GoW.jpg" alt="God of War" /><input type="checkbox" name="games[]" value="godofwar" />
        God of War - $15 <br/>
        <img src="HL.jpg" alt="Half-life" /><input type="checkbox" name="games[]" value="halflife" />
        Half-Life - $10 <br/>
    </p>

    <p id="description">This website is for the sale of 3 particularly good video games. The first one Shadow of the Colossus where you play a character Wander who is set<br/> on a quest to slay 16 Gigantic Colossus to bring back his love. Another game for sale is God of War, where you play as Spartan warrior Kratoes<br/> who is betrayed by the God of War Ares which sets up an Epic revenge tale. Finally Half-Life in which you play as scientist Gordon Freeman who<br/> was involved in a science experiment gone wrong and has to survive not only alien creatures let in, but also the military trying to quarentine the area. 
    </p>        

    <label class="field-label">Street:</label><input type="text" name="street" /><br/>
    <label class="field-label">City:</label><input type="text" name="city" /><br/>
    <label class="field-label" id="state">State:</label><select name="state">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select><br/>
    <label class="field-label">Zip Code:</label><input type="text" name="zip" /><br/>

Credit Card Type:<br/>
<input type="radio" name="card" value="mastercard" checked="checked"/>Master Card<br/>
<input type="radio" name="card" value="visacard" />Visa Card<br/>
<input type="radio" name="card" value="expresscard" />American Express<br/>

<input type="submit" />
<input type="reset" />
</form>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

.field-label {
    display: inline-block;
    width: 5%;
    text-align: left;
}

img {width:1%;
    height:1%;
}

#description {text-align:right;
z-index:1;
}

If you go to this website the text is to the right, but the left side now has a huge gab. How would I fix this within CSS? If not possible how would I fix it through HTML? I am trying to submit a site to sell materials (video games). I will be adding links on the name of the games later on to describe them, which is more than what is asked. This is my biggest issue though. I have asked, but nothing stopped the gap on the right.

html css text spacing
Original Q&A
2

There are 2 answers

3
Muhammad Umer On BEST ANSWER

Example: http://jsfiddle.net/ethbz5gn/1/

It's because of the <br> tags that have been manually implemented everywhere inside the <p id="description"> tag. Remove all br tags and it does what you want.

0
Jon P On

I would change few things. The center tag is obsolete, get rid of it and use CSS. The br tag has no semantic meaning and is almost impossible to style, so get rid of that and replace with div if needed to separate elements. It is also better to let text flow naturally.

Learn how label works. It either uses an id of an element or wraps it. This does a few things, it helps with accessibility and also provides an additional action point. For example clicking on the label will bring focus to the element or click a radio or check-box.

Also learn about floats, which is what I've used to move your text to the right.

So here is the code:

h1, h4 {text-align:center;} /*Replace the center tag with css*/

.field-label {
    display: inline-block;
    width: 15%;
    text-align: left;
}

/*Get rid of list bullets and paddin when in field set*/
fieldset ul {list-style:none; padding:0;}

img {width:1%;
    height:1%;
}
form{float:left; width:50%;}

#description {text-align:right;
z-index:1;
    float:right;
    width:50%;
}
<h1>Video Games for Sale</h1>
<h4>(This is for a school project only. Any of these items can not actually be purchased by an individual.)</h4>
<p id="description">This website is for the sale of 3 particularly good video games. The first one Shadow of the Colossus where you play a character Wander who is set on a quest to slay 16 Gigantic Colossus to bring back his love. Another game for sale is God of War, where you play as Spartan warrior Kratoes who is betrayed by the God of War Ares which sets up an Epic revenge tale. Finally Half-Life in which you play as scientist Gordon Freeman who was involved in a science experiment gone wrong and has to survive not only alien creatures let in, but also the military trying to quarentine the area. 
</p>
<form action="#">
    <fieldset>
        <legend>Personal Details</legend>
        <div class="frmRow"><label class="field-label" for="firstname">First name:</label><input type="text" id="firstname" name="firstname" /></div>
        <div class="frmRow"><label class="field-label" for="lastname">Last Name:</label><input type="text" id="lastname" name="lastname" /></div>
    </fieldset>
    <fieldset id="selGames">
        <legend>Games</legend>
        <!--  Looks Like a list, so lets make it a list -->
        <ul>
            <li>
                <label for="SotC">
                    <img src="SotC.jpg" alt="Shadow of the Colossus" />
                </label>
                <input type="checkbox" id="SotC" name="games[]" value="shadowofthecolossus"/>
                <label for="SotC">Shadow of the Colossus - $20</label>
            </li>
            <li>
                <label for="GoW">
                    <img src="GoW.jpg" alt="God of War" />
                </label>
                <input type="checkbox" name="games[]" id="GoW" value="godofwar" />
                <label for="GoW">God of War - $15</label>
            </li>
            <li>
                <label for="HL">
                    <img src="HL.jpg" alt="Half-life" />
                </label>
                <input type="checkbox" id="HL" name="games[]" value="halflife" />
                <label for="HL">Half-Life - $10</label>
            </li>    
        </ul>
     </fieldset>
    <fieldset id="addressDetails">
        <legend>Address</legend>        
        <div class="frmRow"><label class="field-label" for="street">Street:</label><input type="text" name="street" id="street" /></div>
        <div class="frmRow"><label class="field-label" for="city">City:</label><input type="text" name="city" id="city" /></div>
        <div class="frmRow"><label class="field-label" for="state">State:</label><select id="state" name="state">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
            </select></div>
        <div class="frmRow"><label class="field-label" for="zip">Zip Code:</label><input type="text" id="zip" name="zip" /></div>
    </fieldset>
        <fieldset>
            <legend>Credit Card Type</legend>
            <!--Again this looks like a list-->
            <ul>
                <li><input type="radio" name="card" id="mc" value="mastercard" checked="checked"/><label for="mc">Master Card</label></li>
                <li><input type="radio" name="card" id="vc" value="visacard" /><label for="vc">Visa Card</label></li>
                <li><input type="radio" name="card" id="amex" value="expresscard" /><label for="amex">American Express</label></li>
            </ul>   
            </fieldset>

<input type="submit" />
<input type="reset" />

Related Questions in HTML

Related Questions in CSS

Related Questions in TEXT

Related Questions in SPACING

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions