chility
Reputation: 744
Strange element issue
I'm trying to rewrite my website, just for testing purposes, as I'm a total beginner in php and css. Here is the code of this page: 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>
I'm facing some strange issues. If you look at the bottom at Latest News, Latest Project and Testimonials it looks super ugly and I really can't find the reason why. - The code above is 95% the same as the code of this page: Contact page where the bottom is looking as it should.
Can someone tell me where I'm mistaking? I'm pretty sure that I'm missing something really small, but I'm not able to spot it as a beginner.
Upvotes: 1
Views: 71
Answers (2)
Mohsen Safari
Reputation: 6805
use this class:
.main .entries .entry:last-child {
padding-right: 0px;
}
Upvotes: 1
Mahmoude Elghandour
Reputation: 2931
you miss the "last" class in the last div of Testimonials
<div class="entry last">
it give the last div padding-right: 0;
Upvotes: 2