2013-06-18 3 views
0

Так что прямо сейчас я начинаю работать на сайте im, просто создавая все, что позиционируется и отформатирован на странице, прежде чем попытаться стилизовать его и добавить javascript. Как ни странно, я добавил три тега div после моей формы, чтобы следующая строка разделилась на три столбца. На моем листе css я добавил границу, чтобы увидеть размер ящиков и заголовков. Проблема в том, что ничего не появляется. Любая помощь будет оценена, потому что я ставлю ее на что-то очень простое.Не могу увидеть Добавленные элементы

<!doctype html> 
    <html lang="en""> 
    <head> 
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="operationStyle.css"> 
<title>Operation:Educate Children</title> 
<script language="javascript" type="text/javascript"> 
     image1=new Image(); 
     image1.src="supermario.png"; 
     image2=new Image(); 
     image2.src="mario.png"; 
</script> 
    </head> 
    <body> 
<header class="header"> 
    <img src="mario.png" alt="header"/> 
    <h2>"Only the educated are free-Epictetus"</h2> 
</header> 




<table> 
    <tr> 
     <th><a href="educatedChilren.html">Home</a></th> 
     <th><a href="aboutUs.html">About Us</a></th> 
     <th><a href="currentProject.html">Current Project</a></th> 
     <th><a href="getInvolved.html">Get Involved</a></th> 
     <th><a href="Calendar.html">Calendar</a></th> 
     <th><a href="Donate.html">Donate</a></th> 
    </tr> 
</table> 


<div id="slideshow"> 
    <img class="slide" name="slide" src="supermario.png" width="100" height="200"> 
    <script> 
     var step=1; 
     function slideit(){ 
      if(!document.images) 
       return; 
      document.images.slide.src=eval("image"+step+".src") 
      if(step<2) 
       step++; 
      else 
       step=1; 
      setTimeout("slideit()",2500); 
      } 
      slideit(); 
    </script> 
<div> 
<div class="contact"> 
    <h2>Contact Us!</h2> 
    <form action="contact.php" method="post"> 
     <strong>Name:</strong> 
     <input type="text" name="name"><br></br> 
     <strong>E-Mail:</strong> 
     <input type="text" name="email"><br></br> 
     <strong>Message:</strong> 
     <textarea name="message" cols="25" rows="12"></textarea> 
     <input type="submit" value="Send"> 
     <input type="reset" value="Clear"> 
    </form 
</div> 

<div class="events"> 
    <h3><strong>Upcoming Events</strong></h3> 
</div> 

<div class="follow"> 
    <h3><strong><Follow Us!></h3></strong> 
</div> 

<div class="blog"> 

</div> 



    </body> 
    </html> 

    BODY{ 
margin-left:15%; 
margin-right:15%; 
    } 
    .header h2{ 
color:blue; 
text-align:right; 
border:5px solid black; 
font-family:'Bookman Old Style',serif; 
font-size:10pt; 
font-style:italic; 
width:28%; 
float:right; 
height:200px; 

    } 


    .header img{ 
width:70%; 
float:left; 
border:thin black; 
height:200px; 
    } 
    table{ 
border:5px solid black; 
width:100%; 
height:75px; 
clear:left; 
    } 

    .slide{ 
border:5px solid black; 
width:70%; 
height:400px; 
float:left; 
    } 

    .contact{ 
border:5px solid black; 
width:27%; 
height:400px; 
float:right; 
    } 

    .contact h2{ 
text-align:center; 
    } 

    .contact form{ 
margin-left:2%; 
    } 

    img.slide{ 
position:absolute; 
left:0; 
top:0; 
    } 

    #slideshow{ 
position:relative; 
overflow:hidden; 
    } 

    .events{ 
float:left; 
width:33%; 
border:black; 
height:200px; 
    } 

    .follow{ 
float:left; 
width:33%; 
border:black; 
height:200px; 
    } 

    .blog{ 
float:left; 
width:33%; 
height:200px; 
border:black; 
    } 

ответ

0

Посмотрите на этой линии:

<h3><strong><Follow Us!></h3></strong> 

Вы используете < и> внутри тега сильного. Это может испортить ваш HTML. Кроме того, ваши теги не в правильном порядке, вы должны изменить строку следующим образом:

<h3><strong>Follow Us!</strong></h3> 

Кроме того, закрывающий тег вашей последней формы не закрыт должным образом.

0

Измените свой CSS следующим образом:

.events, .follow, .blog { // they are all the same, why having three times as much code? 
    float: left; 
    width: 33%; 
    border: 1px solid black; 
    height: 200px; 
} 

Тогда исправить недостающее> в </form

Вы также пропустили/в слайд-шоу DIV в конце </div>

(и зафиксировать тег, указанный Дани (<Follow Us!>>Follow Us!)

Затем вы увидите DIVs

0

Есть несколько закрывающие теги, которые вышли из строя:

<div class="follow"> 
    <h3><strong><Follow Us!></h3></strong> 
</div> 

</h3> и </strong> нужно быть заказана быть <h3><strong><Follow Us!></strong></h3>

Вы также отсутствует форма закрытия тега. </form не хватает закрытия >.

0

Как уже указывалось, ваш код HTML содержит несколько синтаксических ошибок, из-за которых браузеры отображают 3 <div> s, добавленных вами внутри <div class="contact">, - и поскольку высота указанного значения была отключена.

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