HTML гиперссылки изображения движутся и т. Д. - PullRequest
0 голосов
/ 01 августа 2010

Это сайт, над которым я работаю , и CSS находится в том же каталоге с именем saucy.css (извините, я могу опубликовать только одну гиперссылку).

Прежде всего,извиняюсь за мой ужасно недействительный HTML и CSS.Обещаю, что все исправлю, как только сайт заработает!Однако, если это вызывает проблемы, конечно, я сделаю это сейчас.

Мои текущие проблемы:

  • Когда я добавляю гиперссылку на иконку Twitter, она перемещается в верхний левый угол каксейчас.Как вы можете видеть из HTML, он должен находиться под главным окном (в соответствии с логотипом авторского права и т. Д.) Слева.
  • У меня есть странный текст, который появляется внизу моей страницы:,Мне сказали, что это связано с невозможностью правильно отобразить символ, но я не вижу, каким он может быть.
  • Когда я пытаюсь отредактировать CSS, чтобы удалить форматирование ссылки на панели навигации, ничего не происходит.
  • Я не могу добавить рамку для поля в центре страницы.Так как выпадающие списки являются частью таблицы, я хочу только границу для или которая серого цвета.Возможно ли это сделать?

Большое спасибо за чтение!

Ответы [ 2 ]

0 голосов
/ 03 июля 2017

Вот тот же код, который вы использовали для своего сайта, но я удалил все элементы таблицы, чтобы выручить вас, и выглядел довольно привлекательно, пожалуйста, проверьте его и дайте мне знать, что вы думаете, или если вам нужно что-то еще.Возможно, я допустил некоторые незначительные ошибки или не соответствовал стандартам веб-сайта, но это было сделано на лету.

   <h3 class="logo" style="text-align:center; weight:bold;">saucydares</h3> <!--center these in your css file. or inline style it like I did. -->
   <h3 class="slogan" style="text-align:center;">fun and games for couples everywhere!</h3><!--center these in your css file. or inline style it like I did. -->

 <div class="links" style="text-align:center;"> 
    <br /><a href="#">HOME</a> | <a href="/about.html">ABOUT</a> | <a href="#">ARCHIVE</a> | <a href="#">DARE BOX</a><br /> <br />
   </div>

<h5 id="dare" style="text-align:center;">Welcome to Saucy Dares! To get going, adjust the settings below and click "Dare me!".</h5><br />

            <form name="form" style="text-align:center;"> 

            <select id="mode" name="mode"> 
            <option value="classic">Classic Collection</option> 
            <option value="long">The Long Game</option> 
            </select><br />

            <select name="player"> 
            <option value="him">For him</option> 
            <option value="her">For her</option> 
            <option value="double">Double dare</option> 
            </select> 
            <br />

            <input type="button" value="Dare me!" onClick="get();"> 
            </form> 


<br /><br /> <!-- Breaks should always be <br />-->
<b>Latest news</b> 
<UL> 
<LI> Welcome to the new look Saucy Dares! Now you can take things to the next level with the new game mode, The Long Game. You can also both get involved by selecting 'Double dare' from the second drop down box. Read more about the new game modes on the <a href="/about.html">About page</a>.
<LI>Dares now appear without needing to refresh the page meaning your settings aren't reset every time you view a new dare.
<LI> What do you like about the new design? What is still missing? Let us know on Twitter! You can also follow @SaucyDares to receive updates whenever new features and dares are added.
<LI> You can now share your favourite dares with us by putting them in the <a href="/darebox.html">Dare Box</a>!
</UL> 

<div style="text-align:center;" class="footer"><img src="facebook_border.gif"><br />

<a style="text-align:center;" href="http://www.twitter.com/saucydares" target="_blank"><img style="text-align:center;" src="twitter_border.gif" alt="Twitter" border="0" /></a> 

<h3 width="33%" style="text-align:center;">&copy; 2010 Saucy Dares</h3><p width="33%" style="text-align:center;">Click <a style="text-align:center;" href="mailto:saucydares@yahoo.com">here</a> to report an error</p> 
</div>
0 голосов
/ 02 августа 2010

Ух ты, похоже, ты спешил соединить это ... Тебе действительно стоит потратить время на то, чтобы не ошибиться. Я вижу, что вы перевернули TD-тег там, где должен быть TR-тег. Я также вижу, что вы закрыли тег TR и решили использовать вместо него тег TD, что я не уверен, намеренно это или нет, лол. Я собираюсь прокомментировать часть вашего кода и спросить вас, было ли оно намеренным или нет, но сначала я немного его почисту.

Вы никогда не должны просто запускать весь свой код вместе, это очень плохая практика и заставит вас забыть закрыть теги. Всегда отступайте, когда можете. Можете ли вы написать colspan = 4 или нет, это не имеет значения, вы всегда должны указывать это в кавычках: colspan = "4" и для всех других свойств.

Для того уровня, на котором вы находитесь, вы должны использовать xhtml. Это заставит браузеры использовать стандартизацию и не даст вашему сайту выглядеть «странно» в одном браузере, но идеально в другом.

Вот ваш код, который я прокомментировал. Вам действительно нужно пройти его и правильно сопоставить ВСЕ ваши открывающие / закрывающие теги. Вы сделали хороший беспорядок для себя, лол. Веселитесь.

<table align="center" width="60%" cellspacing="0" cellpadding="5"> 
 <tr>
  <td colspan=4>
   <div class="logo">saucydares</div> 
   <div class="slogan">fun and games for couples everywhere!</div>
   </td>
 </tr>
 <tr class="links"> 
  <td class="links" colspan=4 width="100%" align=center><a href="#">HOME</a> | <a href="/about.html">ABOUT</a> | <a href="#">ARCHIVE</a> | <a href="#">DARE BOX</a></td> 
 </tr> 
 <tr>
  <td colspan=4 class="main" cellpadding=10> 
   <br><br> <!-- Breaks should always be <br /> XHTML only //-->


    <table height="270px" width="450px" align=center cellpadding="5"> 
        <tr class="box">
         <td align=center>
          <div id="dare">Welcome to Saucy Dares! To get going, adjust the settings below and click "Dare me!".</div>
         </td>
        </tr>
        <!-- There is no TR tag here. 
             Was it on purpose? //-->
        <td height="20px" align=right cellpadding="0">
            <form name="form"> 

            <select id="mode" name="mode"> 
            <option value="classic">Classic Collection</option> 
            <option value="long">The Long Game</option> 
            </select> 

            <select name="player"> 
            <option value="him">For him</option> 
            <option value="her">For her</option> 
            <option value="double">Double dare</option> 
            </select> 

            <input type="button" value="Dare me!" onClick="get();"> 
            </form> 
         </tr> <!-- You closed the parent TR before the child TD //-->
        </td>  <!-- This TD no longer applies to anything because you
                    closed its parent row //-->
    </table> 


<br><br> <!-- Breaks should always be <br /> XHTML only //-->
<b>Latest news</b> 
<UL> 
<LI> Welcome to the new look Saucy Dares! Now you can take things to the next level with the new game mode, The Long Game. You can also both get involved by selecting 'Double dare' from the second drop down box. Read more about the new game modes on the <a href="/about.html">About page</a>.
<LI>Dares now appear without needing to refresh the page meaning your settings aren't reset every time you view a new dare.
<LI> What do you like about the new design? What is still missing? Let us know on Twitter! You can also follow @SaucyDares to receive updates whenever new features and dares are added.
<LI> You can now share your favourite dares with us by putting them in the <a href="/darebox.html">Dare Box</a>!
</UL> 
 </tr> <!-- Because you already closed the TR in your
            child table, this is going to cause some
            weird effects lol //-->
</td> <!-- More weird effects are going to occur until
           you match the correct closing tags to
           their opening tags //-->

<tr class="footer"><img src="facebook_border.gif">&nbsp;

<a href="http://www.twitter.com/saucydares" target="_blank"><img src="twitter_border.gif" alt="Twitter" border="0"></a> 

</td><td width="33%" align=center>&copy; 2010 Saucy Dares</td><td width="33%" align=right>Click <a href="mailto:saucydares@yahoo.com">here</a> to report an error</td></tr> 
</table> 
...