2013-08-13 2 views
0

С кодом ниже $ title1 и $ title2 должен быть вне div и центрироваться по ширине страницы. Это происходит только потому, что у меня есть «Y». Если я удаляю «Y», текст перемещается вверх и центрируется по классу адреса. Очевидно, я не могу держать «Y» там, но не уверен, почему это меняет ситуацию.Как получить текст для отображения за пределами предыдущей области div?

<html> 
    <head> 
     <title></title> 
     <style> 
      body { margin:12pt auto 12pt auto;width:568pt; } 
      .sseal { float:left; width:56.25pt; } 
      .address { float:left;text-align:center; margin:15px auto;width:450pt; } 
      .dseal { float:right; width:56.25pt;} 
      wrapper { margin:0px auto; } 
      .form_title { text-align:center;font-weight:bold;font-size:22pt; } 
      .header { font-weight:bold; } 
      .heading { font-size:16pt;font-weight:bold; } 
      .title1 { font-size:24pt;font-weight:bold;text-align:center; } 
      .title2 { font-size:22pt;font-weight:bold; font-style:oblique;text-align:center; } 
      table, th, td { padding:10px; } 
      hr { padding:0px;spacing:0px;margin:0px; } 
      .rightpaced { margin:45px; } 
     </style> 
    </head> 
    <body> 
     <div class="wrapper"> 
      <div class="sseal"><img src="../image2.gif" height="75" width="75" border="0"></div> 
      <div class="clear:both;"></div> 
      <div class="address"> 
       <font size=+1><b> 
       $companyname<br> 
       $address 
       </b></font> 
      </div> 
      <div class="clear:both;"></div> 
      <div class="dseal"><img src="../image2.gif" height="75" width="75" border="0"></div> 
      <div class="clear:both;"></div> 
     </div> 
     <div class="clear:both;"></div> 
     Y<br> 
     <div class="title1">$title1</div> 
     <p> 
     <div class="title2">$title2</div> 


    </body> 
</html> 
+0

Лучше не размещать такой длинный код, а только некоторые очень важные части, а остальные в [jsFiddle] (http://jsFiddle.net) содержат весь код. – EZSlaver

+0

Вы должны сделать скрипку, показывающую проблему. В этом коде есть много проблем, кроме этого названия. Во-первых, ни один из ваших тегов img не заканчивается правильно. Сделать последнюю скобку тегов img похожими на это '/>' – Bobo

+0

Кроме того, это * очень * старый HTML. Если не существует каких-либо ограничений, вы должны использовать текущий стиль дня. Например, '
' теги больше не нужны (хотя вы можете использовать стили CSS 'float' и' clear'), а '' стиль тегов (ширина, высота) должен выполняться с помощью CSS. – EZSlaver

ответ

0

Прежде всего, если у вас есть некоторые ограничения (браузер-поддержка, это задание, которое должно быть сделано таким образом), я предлагаю вам использовать новый (CSS2 и CSS3) селекторы и HTML тег (например, <br /> больше не используется).

См. W3Schools для получения дополнительной информации о новых HTML и CSS. На сайте есть отличные примеры и учебные пособия.

EDIT: См. this example планировки, которую вы хотели (я думаю).

+0

Спасибо. Я использовал W3School для большинства, если не все. http://www.w3schools.com/tags/tag_br.asp Он не упоминает, что он обесценился, хотя я видел, как он говорит, что некоторые другие вещи, на которые я смотрел, были обесценены. В следующий раз я буду использовать jsFiddle. Благодарю. – RBC

+0

Тег '
' не * точно * устарел, хотя он поддерживается. Это просто редко используется больше. Проверьте [этот раздел] (http://www.w3schools.com/css/css_positioning.asp) для лучшего веб-дизайна. – EZSlaver

+0

http://jsfiddle.net/QFjwF/ Я добавил заголовок и удалил «Y», и это не сработало. Когда я добавил «Y» назад, это сработало. Может быть, я не совсем понял эту проблему. Проблема не в том, что это не центрирование, потому что это так, проблема в том, что она центрирует изображения, и это не должно. – RBC

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