1
Я пытаюсь переписать свой веб-сайт только для целей тестирования, поскольку я являюсь полным новичком в php и css. Вот код этой страницы: GelasoftПроблема с странным элементом
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<title>Gelasoft - Just like that</title>
<link rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/formStyle.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/responsive.css" type="text/css" media="all" />
<link rel='stylesheet' href="css/font.css" type='text/css'>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
</head>
<body>
<!-- wrapper -->
<div id="wrapper">
<!-- shell -->
<div class="shell">
<!-- container -->
<div class="container">
<!-- header -->
<header id="header">
<h1 id="logo"><a href="#">Gelasoft</a></h1>
<!-- search -->
<div class="search">
<!-- MAYBE AN ADD HERE -->
</div>
<!-- end of search -->
<div class="cl"> </div>
</header>
<!-- end of header -->
<!-- navigaation -->
<nav id="navigation">
<a href="#" class="nav-btn">HOME<span></span></a>
<ul>
<li class="active"><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">services</a></li>
<li><a href="#">projects</a></li>
<li><a href="#">solutions</a></li>
<li><a href="#">jobs</a></li>
<li><a href="#">blog</a></li>
<!-- <li><a href="#">contacts</a></li> -->
</ul>
<div class="cl"> </div>
</nav>
<!-- end of navigation -->
<!-- slider-holder -->
<div class="slider-holder">
<!-- slider -->
<div class="slider">
<div class="socials">
<a href="https://www.facebook.com/Gelasoft" target="blank" class="facebook-ico">facebook-ico</a>
<a href="https://twitter.com/gelasoft" target="blank" class="twitter-ico">twitter-ico</a>
<a href="skype:slim-style_bg?chat" class="skype-ico">skype-ico</a>
<!-- <a href="#" class="rss-ico">rss-ico</a> -->
<div class="cl"> </div>
</div>
<div class="arrs">
<a href="#" class="prev-arr"></a>
<a href="#" class="next-arr"></a>
</div>
<ul>
<li id="img1">
<div class="slide-cnt">
<h4>We can do it!</h4>
<h2>Just Like That</h2>
<p>Do you need a custom software? Do you need a logo design, business card, party cards, or flyers design? Maybe you need someone to convert your PSD to valid HTML? We do everything you have in your mind!<br> Just like that!</p>
</div>
<img src="css/images/mac-img.png" alt="" />
</li>
<li id="img2">
<div class="slide-cnt">
<h4>Heading Title Goes</h4>
<h2>Just Like That</h2>
<p>Acor porta mi, non venenatis augue imperdiet quis. Nam faucibus, felis ut suscipit vulputate, tortor quam ultricies neque, eget dignissim elit urna a metus. Aliquam sed quam dui, id lacinia nunc. <a href="#">read more</a></p>
</div>
<img src="css/images/mac-img.png" alt="" />
</li>
</ul>
</div>
<!-- end of slider -->
<!-- thumbs -->
<div id="thumbs-wrapper">
<div id="thumbs">
<a href="#img1" class="selected"><img src="css/images/thumb.png"/></a>
<a href="#img2"><img src="css/images/thumb2.png" /></a>
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
</div>
<!-- end of thumbs -->
</div>
<!-- main -->
<div class="main">
<div class="featured">
<h4>Welcome to <strong>Gelasoft</strong>! Have a dream? We can realize it! Leave it to our <strong>professionals</strong>!</h4>
<a href="#" class="blue-btn">GET IN TOUCH</a>
</div>
<section class="cols">
<center><div id="gallery">
<ul>
<li>
<a href="photos/800x800-copy.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
<img src="photos/800x800-copy-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/858-money-800x800-copy.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/858-money-800x800-copy-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/CS-800x800-copy.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/CS-800x800-copythumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/Arcovia-Network.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/Arcovia-Network-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/DJLON-800x800-copy.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/DJLON-800x800-copy-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/grand-gala-800x800-copy.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/grand-gala-800x800-copy-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/DAutomatic-Loans.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/Automatic-Loans-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/Estate-Planning-800x800-copy.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/Estate-Planning-800x800-copy-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/Beauty-800x800-copy.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/Beauty-800x800-copy-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/Fixed-800x800-copy.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/Fixed-800x800-copy-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/Go-to-health-800x800-copy.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/Go-to-health-800x800-copy-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/J-R-Foto-800x800-copy.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/J-R-Foto-800x800-copy-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/Local-Property-Buyer-800x800-copy.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/Local-Property-Buyer-800x800-copy-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/China-Ebay-LOGO-HB-copy-copy.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/China-Ebay-LOGO-HB-copy-copy-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/CO-800x800-copy.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/CO-800x800-copy-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/heart-felt-logo-800x800-copy.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/heart-felt-logo-800x800-copy-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/Kendu-800x800-copy.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/Kendu-800x800-copy-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
<li>
<a href="photos/R2x26p8.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
<img src="photos/R2x26p8-thumb.jpg" width="72" height="72" alt="" />
</a>
</li>
</ul>
</div></center>
<div class="cl"> </div>
</section>
<section class="entries">
<div class="entry">
<h3>Latest News</h3>
<div class="entry-inner">
<div class="date">
<strong>28</strong>
<span>2013</span>
<em>nov</em>
</div>
<div class="cnt">
<p>New design added! We hope that you will love it!</p>
<p class="meta">Just like that </p>
</div>
</div>
</div>
<div class="entry">
<h3>Latest Project</h3>
<h5>Keep a track on our latest projects </h5>
<a href="#"><img src="css/images/col-img2.png" alt="" /></a>
<p>We are always working on something new! You can check our latest projects here <br /><a href="#" class="more">check out</a></p>
</div>
<div class="entry">
<h3>Testimonials</h3>
<div class="testimonials">
<p>Wow, I can say just that! My logo is amazing!</p>
<p class="author">Alexis D.</p>
</div>
<div class="testimonials">
<p>Thanks for fixing our forum issues!</p>
<p class="author">Alejandro H.</p>
</div>
<!--
<div class="partners">
<h3>Our Partners</h3>
<img src="css/images/partners-img.png" alt="" />
</div>
-->
</div>
<div class="cl"> </div>
</section>
</div>
<!-- end of main -->
<div class="cl"> </div>
<!-- footer -->
<div id="footer">
<div class="footer-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacts</a></li>
</ul>
<div class="cl"> </div>
</div>
<p class="copy">© Copyright gelasoft 2012<span>| just like that</span></p>
<div class="cl"> </div>
</div>
<!-- end of footer -->
</div>
<!-- end of container -->
</div>
<!-- end of shell -->
</div>
<!-- end of wrapper -->
</body>
</html>
Я столкнулся некоторые странные проблемы. Если вы посмотрите внизу на Latest News, Latest Project и Testimonials это выглядит супер уродливым, и я действительно не могу найти причину. - Код выше на 95% совпадает с кодом этой страницы: Contact page где дно выглядит так, как должно.
Может ли кто-нибудь сказать мне, где я ошибаюсь? Я почти уверен, что мне не хватает чего-то действительно маленького, но я не могу определить его как новичка.
СПАСИБО !!! Это сработало! Я знал, что мне не хватает чего-то маленького. :) Еще раз спасибо! – chility
спасибо вам, брат :) –