2017-01-25 8 views
1

Я новичок в HTML и в настоящее время работаю над моей университетской проектной работой, и мне действительно нужна помощь. Я использую фоновое окно для «блог-подобного» веб-сайта, для которого нужно выровнять заголовок и короткий текст слева и содержимое с гиперссылками справа.Как выровнять текст в поле в 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> 
    <title> 
     Your Personal Guide To Best Hardcore Events 
    </title> 
    <style type="text/css"> 
     body { 
     background: url(http://webprojects.eecs.qmul.ac.uk/at315/background.jpg); 
     background-repeat: no-repeat; 
     background-size: 100% 100%; 
     background-attachment: fixed 
     } 

     .background { 
     display: flex; 
     justify-content: center; 
     } 

     div.transbox { 
     margin: 0px; 
     background-color: #ffffff; 
     border: 1.5px solid black; 
     opacity: 0.6; 
     filter: alpha(opacity=60); 
     width: 100%; 
     max-width: 1300px; 
     } 

    </style> 
    </head> 

    <body> 
    <p align="center"> 
     <img src="http://webprojects.eecs.qmul.ac.uk/at315/header.png" style="width:70%;" border="0" alt="" /> 
    </p> 
    <div class="background"> 
     <div class="transbox"> 
     <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
      <tr> 
      <th width="75%" align="left"> 
       <h2> 
        Articles: 
        </h2> 
      </th> 
      <th width="20%" align="center"> 
       <ul style="list-style: none;"> 
       <li> 
        <a href="http://webprojects.eecs.qmul.ac.uk/rr305/CourseWork/blog.xml" style="text-decoration:none">Homepage</a> 
        <br /> 
        <br /> 
       </li> 
       <li> 
        <small><a href="http://www.qmul.ac.uk" style= 
         "text-decoration:none">Architects</a></small> 
       </li> 
       <li> 
        <small><a href="https://www.facebook.com" style= 
         "text-decoration:none">Northlane</a></small> 
       </li> 
       <li> 
        <small><a href="http://www.bbc.co.uk" style= 
         "text-decoration:none">Attila</a></small> 
       </li> 
       </ul> 
      </th> 
      </tr> 
      <tr> 
      <td align="left"> 
       <h4> 
        <strong>Architects Rocking Brixton</strong> 
        </h4>Read our article about Architects headlining their biggest sold-out UK show! 
       <hr /> 
      </td> 
      </tr> 
      <tr> 
      <td></td> 
      </tr> 
      <tr> 
      <td align="left"> 
       <h4> 
        <strong>Architects Rocking Brixton</strong> 
        </h4>Read our article about Architects headlining their biggest sold-out UK show! 
       <hr /> 
      </td> 
      </tr> 
      <tr> 
      <td></td> 
      </tr> 
      <tr> 
      <td align="left"> 
       <h4> 
        <strong>Architects Rocking Brixton</strong> 
        </h4>Read our article about Architects headlining their biggest sold-out UK show! 
       <br /> 
       <br /> 
      </td> 
      </tr> 
     </table> 
     </div> 
    </div> 
    </body> 

</html> 

Main page of the website

+0

Ваш HTML-код кажется каким-то сломанным, я пытался отформатировать его, и я обнаружил, что теги не закрыты, вы закрываете 'ul', не открывая его, код действительно не имеет смысла, вы хотите его просмотреть и исправить код , незавершенные теги или неправильные окончания наверняка вырвут макет. –

+0

См. Обновленный код, я только что обновил его. – Aleksander

+0

Уважаемый @alexander. То, что вы сейчас хотите, это другой вопрос. Я ответил вам на первый вопрос, и было бы лучше спросить об этом как о новом вопросе (и, конечно, проверьте, чтобы я ответил как истинный: -P) –

ответ

0

В этой ситуации лучше всего использовать гибкую и максимальную ширину. Это очень хорошо реагировать дизайн так.

.background { 
display: flex; 
justify-content: center; 
} 

div.transbox { 
margin: 30px; 
background-color: #ffffff; 
border: 1px solid black; 
opacity: 0.6; 
filter: alpha(opacity=60); 
width: 100%; 
max-width: 1000px; 
} 

Изменить размер вашего браузера, Он отлично работает для любых размеров. И лучше всего, если экран имеет ширину < 1000 пикселей стол заполняет весь экран.

+0

Это отличный совет, спасибо Я просто пробовал, и он отлично меняет размеры! Но я все еще не могу решить проблему правильного выравнивания текста внутри этого окна, как если бы я создал ячейку, которая покрывает 100% ее и делит ее на 2 части, чтобы выровнять содержимое влево и вправо, как только расстояние между содержимым o n право увеличивается, как это можно увидеть с помощью мини-меню с гиперссылками, тогда расстояние между заголовком i.e «Статьи» и подзаголовок и текст также увеличиваются, есть ли способ справиться с этим? Спасибо – Aleksander

+0

Извините, но я не понял, что вы сказали. Я читал это 2 раза. Не могли бы вы объяснить это? –

+0

Извините за неясность, кстати, как указано в основных разделах комментариев, у меня было несколько ошибок, я исправил их сейчас, так что вы можете увидеть обновленный код. Проблема у меня, как вы могли видеть, у меня есть 3 элемента фона и заголовок, которые являются отдельными изображениями, а затем у меня есть окно содержимого спереди. У меня возникли проблемы с правильным выравниванием текста. Представление должно быть блочным, т. Е. Левым верхним заголовком является «Статьи», а затем статьи перечислены ниже.Проблема, которую я имею, - это расстояние, так как это отдельная ячейка, поскольку содержимое с правой стороны занимает больше места, чем – Aleksander

-1

просто изменить этот тег:

<table style="padding:0 5% " width = "90%" border="0" cellpadding="0" cellspacing="0"> 
+0

Пожалуйста, используйте ссылку [edit], объясните, как работает этот код и не просто дать код, так как объяснение, скорее всего, поможет будущим читателям. См. также [ответ]. [источник] (http://stackoverflow.com/users/5244995) –

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

  • Нет связанных вопросов^_^