HTML/CSS - Текст справа отформатирован без пробелов

HTMLHTML/CSS - Текст справа отформатирован без пробелов

<!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; 
}

Если вы зайдете на этот сайт текст находится справа, а левая сторона теперь имеет огромный gab. Как я могу исправить это в CSS? Если не возможно, как я могу исправить это через HTML? Я пытаюсь представить сайт для продажи материалов (видеоигр). Я буду добавлять ссылки на название игр позже, чтобы описать их, что больше, чем того требуют. Это моя самая большая проблема. Я спросил, но ничто не остановило пробел справа.

источник

2015-06-25 Javaturtle

Вы имеете в виду странные разрывы строк в 'description'? Удалите '
' s из html. – Sphinxxx

Тег 'center' хорошо и действительно устарел. Используйте css вместо –

Пример: http://jsfiddle.net/ethbz5gn/1/

Это из-за <br> тегов, которые были вручную реализованы везде внутри <p id="description"> тега. Удалите все теги br, и он делает то, что вы хотите.

источник

2015-06-25 22:50:26

Не так, я хочу, чтобы текст оставался справа, а все остальное слева. – Javaturtle

Но вы сказали, что хотите, чтобы текст заполнил пробел слева тоже. –

Извините, я хочу, чтобы текст справа остался справа, а коробки слева двигались вверх, чтобы закрыть промежуток. – Javaturtle

Я бы изменил несколько вещей. Тег center устарел, избавиться от него и использовать CSS. Тэг br не имеет смыслового смысла и почти невозможно стилизовать, поэтому избавитесь от него и замените его div, если необходимо, для разделения элементов. Также лучше разрешить поток текста естественным образом.

Узнайте, как работает label. Он либо использует id элемента, либо обертывает его. Это делает несколько вещей, это помогает с доступностью, а также обеспечивает дополнительную точку действия. Например, нажатие на метку приведет к фокусу элемента или щелчку по радио или флажку.

Также узнайте о floats, что я использовал для перемещения текста вправо.

Так вот код:

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" />

источник

2015-06-26 00:39:34

HTML/CSS - Текст справа отформатирован без пробелов

ответ

Смежные вопросы