PDA

View Full Version : CSS , Align the divider, How?


dubai3d
05-11-2011, 01:28 AM
I have a template and I need to align the divider ( wrapper) to the top or align it to the red line as you see in the below image . how can I do that?

I'm new to css, and its divider or wrapper divider I think, but when I select the below yellow line and cursor over its shows as divider1

Any idea how can I move the entire yellow(divider) next to the red line so I dont see this gap anymore.

if you know something, plz say something

regards

edbr
05-11-2011, 01:41 AM
not with out some details of how the page is constructed

dubai3d
05-11-2011, 01:49 AM
thanks for reply,

what kind of details you need?

its CSS style and it has DIV,

edbr
05-11-2011, 01:51 AM
link would be simplest

dubai3d
05-11-2011, 01:56 AM
I attached style sheet as zip file, I hope this helps.

thanks

edbr
05-11-2011, 04:13 AM
link would be better. style sheet shows a min width and height on the body why?
post the code no one really is interested in downloading zip files

d a v e
05-11-2011, 05:39 AM
link! link! link! :)

dubai3d
05-11-2011, 12:12 PM
<!DOCTYPE html>
<html lang="en">
<head>
<title>30217 template preview</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script src="js/jcarousellite.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript"></script>
<script type="text/javascript" src="js/imagepreloader.js"></script>
<script type="text/javascript">
preloadImages([
'../images/prev-b-hover.gif',
'../images/next-b-hover.gif']);
</script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
<![endif]-->
<script type="text/javascript">
$(function() {
$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
auto: 2000,

speed: 1500,
easing:"backinout"

});
});
</script>

</head>

<body id="page1">
<!-- header -->
<header>
<div class="main">
<div class="wrapper"></div>
<div class="container">
<h1>&nbsp;</h1>
<article class="contact-info"></article>
<div class="clear"></div>
</div>
<nav>
<ul>
<li class="first active"><a href="#">home page</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li><a href="#">projects</a></li>
<li><a href="#">faqs</a></li>
<li><a href="#">contacts</a></li>
</ul>
</nav>
<section class="carousel-box">
<div class="inner">
<a href="#" class="prev">&nbsp;</a>
<a href="#" class="next">&nbsp;</a>
<div class="carousel">
<ul>
<li><a href="#" ><img src="images/thumb1.jpg" alt="" width="312" height="361" /></a></li>
<li><a href="#" ><img src="images/thumb2.jpg" alt="" width="312" height="361" /></a></li>
<li><a href="#" ><img src="images/thumb3.jpg" alt="" width="312" height="361" /></a></li>
<li><a href="#" ><img src="images/thumb4.jpg" alt="" width="312" height="361" /></a></li>
<li><a href="#" ><img src="images/thumb5.jpg" alt="" width="312" height="361" /></a></li>
<li><a href="#" ><img src="images/thumb6.jpg" alt="" width="312" height="361" /></a></li>
</ul>
</div>
</div>
</section>
</div>
</header>
<!-- content -->
<section id="content">
<div class="main">
<div class="indent">
<div class="divider">
<div class="wrapper divider1">
<article class="col-1 col-pad">
<h2 class="h2-margin">Services</h2>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<ul class="list">
<li></li>
</ul>
</article>
<article class="col-2 col-pad1">
<h2 class="h2-margin">welcome</h2>
<p class="pad">&nbsp;</p>
<ul class="list1">
<li></li>
<li class="last"></li>
</ul>
</article>
<article class="col-3">
<h2 class="h2-margin">what`</h2>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</article>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<div class="main">
<footer><br>
<!-- {%FOOTER_LINK} -->
</footer>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7078796-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

d a v e
05-11-2011, 12:20 PM
well a link would be nicer (hint hint , oh i did hinting already) otherwise we have to copy and paste code into editor, link the css and view without images...

and you didn't post the stylesheet(s) either. or the js.

if you would like some help then upload it (to a testing folder if you like) and post a *** link *** to a live page.

dubai3d
05-11-2011, 12:35 PM
testing folder? where is that? how can I upload the html index temporary online?
regards

d a v e
05-11-2011, 04:12 PM
upload it to your hosting account - either with the web space that comes with your ISP (internet service provider) or with whatever hosting you pay for

d a v e
05-11-2011, 04:14 PM
either use the web space that your ISP provides (you usually get some space with from your internet service provider) or with your hosting account, assuming you have one