1 reply [Last post]
byronwells
byronwells's picture
Offline
newbie
Last seen: 4 years 40 weeks ago
Joined: 2013-04-09
Posts: 2
Points: 4

Alright Guys

I am having major problems taking the following image and then turn it into css code. I have slice the image, so that it's split into to sections.. I.e the grey part is the header, and then the black part will be the background, where later on I will add text and images in dreamweaver. Here is the image I am talking about

salestemplate3_13.jpg

Please note this image will be part of much larger hmtl template that I am using, which contains lots of code. So for now I am only showing snippets

css code that I am using to display that section

/* Video Module Container */
.videomodule-container	{
	margin:0 auto 0px;
    width:849px;
}
.videomodule-container .header	{
	margin:0 auto;
    width:849px;
	height:140px;
 
}
.videomodule-container .heading	{
    padding:48px 0 0 0;
    text-align: center;
    width:422px;
	height:75px;
	margin:0 auto;
}
.videomodule-container h2	{
    font-family: 'MyriadPro-Bold';
    font-size:48px;
	color:#f9f9bd;
    text-align: center;
	line-height: 32px;
	margin:0;
}
.videomodule-container h2 span	{
    font-family: 'danielregular';
    font-size:18px;
	color:#FFF;
    text-align: center;
}
.videomodule-container .content	{
	background: url(../../images/modullebackground.jpg) repeat-y;
    margin: 0px 0px auto;
	width: 840px;
}
.videomodule-container .content .img	{
    margin:0 auto;
	text-align:center;
}
.videomodule-container h3	{
    font-family: 'MyriadPro-Bold';
    font-size: 30px;
    line-height: 38px;
    margin: 0 auto;
    padding: 32px 0 5px;
    text-align: center;
    width: 580px;
}
.videomodule-container p	{
	font-family: 'MyriadPro-Regular';
    font-size: 18px;
    line-height: 25px;
	margin: 25px;
    padding: 2px 0 0;
	text-align: justify;
}
.videomodule-container ul	{
	padding:0px;
	margin:0px;
}
.videomodule-container ul li	{
	background:url(../images/arrow.png) no-repeat 36px 16px;
	padding:10px 0 0 58px;
	font-weight:bold;
	font-style:italic;
	font-size:18px;
}
.videomodule-container .bottom	{
	background:url(../images/module-bg-bottom.png) no-repeat center;
    height:42px;
	width:743px;
	margin:0px auto;
}

html for full html page

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Unlocking Blue Print</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<div class="main-container">
<!-- 
Header Area -->
<div class="header">
  <img src="assets/images/header.png" width="868" height="322" alt="">
</div>
<!-- 
Content Area -->
<div class="content-area">
<div class="header-red">
<div class="heading">
<img src="assets/images/header-heading.png" width="762" height="228" alt="">
</div>
<div class="sub-heading">
<h2>The # 1 Solution to Blah Blah</h2>
</div>
</div>
<div class="white-container-middle-head">
<div class="text">
Add Some More Sub Headlines<br>
Here <strong>With Some Emphasis</strong> On The<br>
<strong class="underline">Most Important Benefits!</strong>
</div>
<div class="product">
<img src="assets/images/product-pic-small.png" alt=""></div>
<div class="clear"></div>
</div>
<!--<div class="arrow-red-big-top"></div>-->
<div class="white-container-bottom-top"></div>
<div class="clear"></div>
<!-- 
Message Area -->
<div class="message-wrap">
<div class="dp">
  <img src="assets/images/dp-top.png" alt="" width="169" height="162">
  <span class="text1">Your Name</span>
  <span class="text2">Your Name</span>
</div>
<div class="white-container-top"></div>
<div class="white-container-middle">
<p><strong>Dear fellow marketer,</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tellus velit, aliquet sed lacinia in, vulputate eget orci. Nam non nulla condimentum turpis molestie blandit vel id quam. Proin a tempus ipsum. </p>
<p>Ut tellus dui, faucibus vel adipiscing nec, ultrices eget erat. Ut consectetur auctor ipsum ac fermentum. Etiam ut nisi ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <span class="underline">Phasellus sapien risus</span>, scelerisque scelerisque aliquam nec, varius ac nulla.</p>
<p><strong>Maecenas ac mauris nunc:</strong> in euismod justo. Aliquam commodo, leo vel sodales vehicula, nunc erat porta enim, <span class="underline">ut hendrerit est lectus eu lectus</span>. Phasellus nec libero sit amet dui aliquam lobortis. </p>
<p>Pellentesque vitae risus mauris. Etiam id lacus nibh. Mauris at orci in felis lacinia feugiat at in erat. Maecenas ante dolor, gravida ac condimentum quis, bibendum id massa. Suspendisse tempus nunc sed nisi semper tristique. </p>
<p>Vivamus ante orci, vehicula sit amet vulputate quis, pharetra sit amet nibh. Donec id dolor non nisi sagittis egestas ac nec ipsum. </p>
</div>
<div class="white-container-bottom"></div>
</div>
<!-- 
Product Introduction -->
<div class="product-intro-wrap">
<div class="text">
<div class="heading">
  <img src="assets/images/intro-heading.png" width="418" height="135" alt=""> </div>
<p>“This is the best WP plugin I’ve ever
seen! There is nothing else like it
on the market. Buy it!”<br>
<span class="clientname">Client Name</span>
<span class="website">www.ClientsSite.com</span>
</p>
</div>
<div class="product-image">
  <img src="assets/images/product-cds-books.png" width="415" height="386" alt=""></div>
</div>
 
<!-- 
Product Points -->
<div class="product-points-wrap">
<div class="round-border-top"></div>
<div class="white-container-middle2">
<div class="heading">
With This Awesome Product<br>
<strong>Your Can Do All This:</strong>
</div>
<ul>
	<li><strong>Pellentesque vitae risus mauris.</strong> Etiam id lacus nibh. Mauris at orci in felis lacinia feugiat at in erat. Donec id dolor non nisi sagittis egestas ac nec ipsum. </li>
	<li><strong>Morbi at turpis eget justo iaculis molestie.</strong> In at augue et ante pretium lobortis non a quam.</li>
    <li><strong>Aliquam erat volutpat.</strong> Sed lacinia fermentum velit quis gravida. Nulla porta luctus mauris sit amet mollis.</li>
    <li><strong>Phasellus commodo, dui a consequat eleifend</strong>, erat tortor dignissim quam, vitae hendrerit neque justo id tortor.</li>
</ul>
<div class="clear"></div>
</div>
<div class="white-container-bottom2"></div>
</div>
 
 
<!-- 
Product Points Detail -->
<div class="product-points-wrap">
<div class="round-border-top"></div>
<div class="white-container-middle2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tellus velit, aliquet sed lacinia in, vulputate eget orci. Nam non nulla condimentum turpis molestie blandit vel id quam. Proin a tempus ipsum. 
<br>
<br>
Ut tellus dui, faucibus vel adipiscing nec, ultrices eget erat. Ut consectetur auctor ipsum ac fermentum. Etiam ut nisi ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <span class="underline">Phasellus sapien risus,</span> scelerisque scelerisque aliquam nec, varius ac nulla.
<br>
<br>
<span class="bold">Maecenas ac mauris nunc:</span> in euismod justo. Aliquam commodo, leo vel sodales vehicula, nunc erat porta enim, <span class="underline">ut hendrerit est lectus eu lectus.</span> Phasellus nec libero sit amet dui aliquam lobortis. 
<br>
<br>
Pellentesque vitae risus mauris. Etiam id lacus nibh. Mauris at orci in felis lacinia feugiat at in erat. Maecenas ante dolor, gravida ac condimentum quis, bibendum id massa. Suspendisse tempus nunc sed nisi semper tristique. 
<br>
<br>
Vivamus ante orci, vehicula sit amet vulputate quis, pharetra sit amet nibh. Donec id dolor non nisi sagittis egestas ac nec ipsum. 
<br>
<br>
</p>
</div>
<div class="white-container-bottom2"></div>
</div>
<div class="clear"></div>
<!-- 
Red Box Features -->
<div class="features-box-container">
  <h2>Key Reseller Features:</h2>
  <img src="assets/images/features-box.png" width="830" height="606" alt=""> 
  </div>  
<div class="clear"></div>
 
<!-- 
Red Box Features -->
<div class="turnkey-plr-packages">
  <img src="assets/images/turnkey-plr-packages.png" width="830" height="230" alt=""> 
  </div>
  <div class="clear"></div>
  <!--Module Box Start -->
<div class="videomodule-container">
<div class="header"><img src="images/modulevideoheader.jpg" width="849" height="140"> </div>
<div class="content">
<p>Testubg</p>
</div></div>
<!--Module Box End -->  
<div class="clear"></div>
<!-- 
Products Area -->
 
<!--Module Box Start -->
<div class="module-container">
<div class="header">
<div class="left">
<img src="assets/images/doc-pdf-icon.png" width="224" height="88" alt="" class="icon"></div>
<div class="right">
<img src="assets/images/module-01.png" width="84" height="164" alt="" class="no"></div>
<div class="heading">
<h2>30 Page Ebook<br>
<span>($400 Real Value)</span></h2></div>
</div>
 
<div class="content">
<div class="img">
<img src="assets/images/book.png" width="168" height="253" alt="">
</div>
<h3>Drive Massive Traffic To Your Websites
  With This Bonus Plugin</h3>
 
	<p><strong>Donec eget orci turpis, ut vestibulum odio.</strong> Donec sapien nunc, venenatis faucibus varius id, interdum sed odio. </p>
 
      <p><span class="underline">Pellentesque lacinia, neque ut vulputate</span> elementum, nisi felis cursus lacus, a luctus erat nibh interdum enim. <strong>Suspendisse at ipsum metus.</strong> Nulla imperdiet elementum tempus. </p>
 
<p>Vivamus scelerisque sapien ut nunc varius molestie. In sed lorem et eros tristique consequat. <span class="underline">Mauris ut dolor justo.</span> Donec aliquam, neque pulvinar pellentesque aliquam, nisl risus viverra elit, id tempor tortor quam id ipsum. </p>
<ul>
	<li>Pellentesque vitae risus mauris</li>
    <li>Pellentesque vitae risus mauris</li>
</ul>
	</div>
    <div class="bottom"></div>
</div>
<!--Module Box End -->
 
<!--Module Box Start -->
<div class="module-container">
<div class="header">
<div class="right">
<img src="assets/images/avi-fl-icon.png" width="224" height="88" alt="" class="icon"></div>
<div class="left">
<img src="assets/images/module-02.png" width="84" height="164" alt="" class="no"></div>
<div class="heading">
<h2>1Hr Video<br>
<span>($400 Real Value)</span></h2></div>
</div>
 
<div class="content">
<div class="img">
<img src="assets/images/product-cd.png" width="235" height="261" alt="">
</div>
<h3>Drive Massive Traffic To Your Websites With This Bonus Plugin</h3>
 
<p><span class="bold">Donec eget orci turpis, ut vestibulum odio.</span> Donec sapien nunc, venenatis faucibus varius id, interdum sed odio. </p>
<ul>
	<li>Pellentesque vitae risus mauris</li>
</ul>
	</div>
    <div class="bottom"></div>
</div>
<!--Module Box End -->
 
<!--Module Box Start -->
<div class="module-container">
<div class="header">
<div class="left">
<img src="assets/images/ppt-icon.png" width="126" height="88" alt="" class="icon"></div>
<div class="right">
<img src="assets/images/module-03.png" width="84" height="164" alt="" class="no"></div>
<div class="heading">
<h2>Presentation Slides<br>
<span>($400 Real Value)</span></h2></div>
</div>
 
<div class="content">
<div class="img">
<img src="assets/images/book.png" width="168" height="253" alt="">
</div>
<h3>Drive Massive Traffic To Your Websites With This Bonus Plugin</h3>
 
<p><span class="bold">Donec eget orci turpis, ut vestibulum odio.</span> Donec sapien nunc, venenatis faucibus varius id, interdum sed odio. </p>
<ul>
	<li>Pellentesque vitae risus mauris</li>
</ul>
	</div>
    <div class="bottom"></div>
</div>
<!--Module Box End -->
 
<!--Module Box Start -->
<div class="module-container">
<div class="header">
<div class="right">
<img src="assets/images/avi-fl-icon.png" width="224" height="88" alt="" class="icon"></div>
<div class="left">
<img src="assets/images/module-04.png" width="84" height="164" alt="" class="no"></div>
<div class="heading">
<h2>Full Transcript<br>
<span>($400 Real Value)</span></h2></div>
</div>
 
<div class="content">
<div class="img">
<img src="assets/images/book.png" width="168" height="253" alt="">
</div>
<h3>Drive Massive Traffic To Your Websites With This Bonus Plugin</h3>
 
<p><span class="bold">Donec eget orci turpis, ut vestibulum odio.</span> Donec sapien nunc, venenatis faucibus varius id, interdum sed odio. </p>
<ul>
	<li>Pellentesque vitae risus mauris</li>
</ul>
	</div>
    <div class="bottom"></div>
</div>
<!--Module Box End -->
 
<!--Testimonials -->
<div class="testimonials-container">
<h2>”This is the best product EVER!”
<div class="stars"></div></h2>
<div class="content">
<p>“This is the best product EVER! Thanks so much for making this offer available for such a low price. Suspendisse quam ipsum, tincidunt ac faucibus imperdiet, vehicula et nulla. Aenean condimentum sapien tortor. Donec at odio velit. Sed sollicitudin urna eget enim egestas consectetur tempus velit vulputate. Etiam sit amet metus magna.”</p>
</div>
<div class="bottom-right">
<img src="assets/images/testimonial-pic-01.png" width="84" height="91" alt="">
<div class="text">
Client Name
<span>www.ClientsSite.com</span></div>
</div>
	</div>
<!--Testimonials End -->
 
<!--Testimonials -->
<div class="testimonials-container">
<h2>”This is the best product EVER!”
<div class="stars"></div></h2>
<div class="content right">
<p>“Wow, this product is awesome. Praesent accumsan neque eget urna dapibus a consectetur odio auctor. Phasellus tortor magna, consectetur in ornare ultrices, volutpat quis sapien.”</p>
</div>
<div class="bottom-left">
<img src="assets/images/testimonial-pic-02.png" width="76" height="104" alt="">
<div class="text">
Client Name
<span>www.ClientsSite.com</span></div>
</div>
	</div>
<!--Testimonials End -->
 
<!-- Killer Bonus -->
<div class="killer-bonus-container">
<div class="content">
<div class="product">
  <img src="assets/images/killer-bonus-01.png" width="172" height="316" alt=""></div>
<h3>Your Bonus Name</h3>
<p><strong>Donec eget orci turpis, ut vestibulum odio.</strong> Donec sapien nunc, venenatis faucibus varius id, interdum sed odio.</p> 
 
<p><strong>Pellentesque lacinia, neque ut vulputate elementum,</strong> nisi felis cursus lacus, a luctus erat nibh interdum enim. Suspendisse at ipsum metus. <span class="underline">Nulla imperdiet elementum tempus.</span></p>
 
<p>Vivamus scelerisque sapien ut nunc varius molestie. In sed lorem et eros tristique consequat. Mauris ut dolor justo. <strong>Donec aliquam,</strong> neque pulvinar pellentesque aliquam, nisl risus viverra elit, <span class="underline">id tempor tortor quam id ipsum.</span></p>
<div class="line"></div>
</div>
 
<div class="content">
<div class="product">
  <img src="assets/images/killer-bonus-02.png" width="172" height="316" alt=""></div>
<h3>Your Bonus Name</h3>
<p><strong>Donec eget orci turpis, ut vestibulum odio.</strong> Donec sapien nunc, venenatis faucibus varius id, interdum sed odio.</p> 
 
<p><strong>Pellentesque lacinia, neque ut vulputate elementum,</strong> nisi felis cursus lacus, a luctus erat nibh interdum enim. Suspendisse at ipsum metus. <span class="underline">Nulla imperdiet elementum tempus.</span></p>
 
<p>Vivamus scelerisque sapien ut nunc varius molestie. In sed lorem et eros tristique consequat. Mauris ut dolor justo. <strong>Donec aliquam,</strong> neque pulvinar pellentesque aliquam, nisl risus viverra elit, <span class="underline">id tempor tortor quam id ipsum.</span></p>
<div class="clear"></div>
</div>
<div class="bottom"></div>
	</div>
<!-- Killer Bonus End -->
 
<!--
Images Area -->
<div class="grap-copy-img">
  <img src="assets/images/risk-free-heading.png" alt="">
</div>
<div class="money-back-img">
  <img src="assets/images/money-back-img.png" alt="">
</div>
<div class="hurry-img">
  <img src="assets/images/hurry-heading.png" alt="">
</div>
<div class="arrow-double-img">
  <img src="assets/images/arrow-double.png" alt="">
</div>
<div class="offer-img">
  <a href="javascript:;"><img src="assets/images/btn-add-to-cart.png" alt=""></a>
</div>
 
<!-- 
Thanks Area -->
<div class="thanks-container">
<p>Thanks,</p>
<img src="assets/images/dp.png" alt="">
<br>
<p class="name">Your Name</p>
<p class="space-none"><strong class="italic">Your Name</strong></p>
<p><strong>P.S.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tellus velit, aliquet sed lacinia in, vulputate eget orci. Nam non nulla condimentum turpis molestie blandit vel id quam. Proin a tempus ipsum. 
</p>
</div>
 
<!-- 
Faqs Area -->
<div class="faqs-wrap"></div>
 
<!-- 
Add tTo Cart Btn -->
<div class="add-cart-btn">
<a href="javascript:;">
<img src="assets/images/add-to-cart-btn.png" width="264" height="86" alt=""></a>
</div>
 
<!-- 
Earn 100% Commission -->
<div class="earn-comm">
<div class="btn">
<a href="javascript:;">
<img src="assets/images/signup-btn.png" width="377" height="93" alt=""></a></div>
</div>
 
<!-- 
Footer -->
<div class="footer"></div>
</div>
	</div>
</body>
</html>

In dreamweaver under design vide it shows both of the image correctly, but when click on live view to check it shows that two sections are not together at all..

I have no idea what is going on.. Please someone help

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 25 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Not tested

First: Never ever think that Dreamweaver has a clue. Nor, should you ever think that design view means a damned thing. It is not a browser, and no one will ever view your page in DW.

I suspect, from your description, that you're experiencing margin collapse. This is (probably) correct behavior. See Uncollapsing margins for the straight poop.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.