1 reply [Last post]
magicman
magicman's picture
Offline
newbie
Last seen: 5 years 43 weeks ago
Timezone: GMT-7
Joined: 2012-06-27
Posts: 7
Points: 12

This is a fairly new site so no one knows about it. I am trying to get the layout correct for the bottom of www.netvergent.ca/laptop.html and for some reason, after resizing the laptop image from a width of 150 to 250, the details of the laptop in dd/dt blue shifted left, like It should be.

The Details are not site by side. Example want it to look like this.

CPU: Intel i5
Operating System: Windows 7
Ram: yada yada so on

You get the idea. Also, the image of the laptop is shifted far right. Should the padding right be added to shift it left, or make it a .img { position:relative; float: left; }

?

Thanks to those who can help me.

body {  
    margin:0 auto;  
    width:900px;  
    font: 13px/22px Helvetica, Arial, sans-serif;  
    background:#000000;
    height:auto;
	}
 
 
 
	#container {
	margin: 0 auto;
	width:900px;
	height:auto;
	}
 
#header {
    position:relative;
	width:900px;
	height:125px;
    background-color:#FFF;
	}	
 
 
	p ,h2 ,tr{
	float:left;
	margin-left:20px;
	margin-right:20px;
	margin-top:5px;
	margin-bottom:5px;
	font-family:Verdana, sans-serif;
	padding:5px;
	}
 
 
 
 
 
 
 
 
.pright {  /* this center <p> text right */
float:right;
font-family:Verdana, sans-serif;
margin-top:20px;
margin-bottom: 0 auto;
margin-right:30px;
border:5px;
font-size:12px;
}	
.pleft { /* came as pright */
float:right;
font-family:Verdana, sans-serif;
Margin-left:10px;
Margin-top: 0 auto;
Margin-bottom: 0 auto;
border:5px;
font-size:2em;
}		
 
 
/* This is the contact.html page for customers conting us upper right coner of index.html */	
#contact{
float:right;
width:auto;
margin-top: 0 auto;
margin-bottom: 0 auto;
vertical-align: middle;
margin-right: 20px;
color:#0000;
font-family: Verdana, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: normal;
line-height: 1.6em;
z-index:1;
}	
 
/* center image in body. Use <IMG class="displayed" src="..." alt="..."> */
IMG.displayed {
    display: block;
    float:right; }
 
#logo {  
float:left;
margin:10px;
width:315px;
height:90px;
background-image:url('logo.png');
text-align:center;
}
 
 
/* CSSTerm.com Simple Horizontal DropDown CSS menu */
 
.drop {
position:relative;
z-index:1;
 
}
.drop_menu {
	background:#005555;
	padding:0px;
	margin:0;
	list-style-type:none;
	height:30px;
}
.drop_menu li { float:left; }
.drop_menu li a {
	padding:10px 20px;
	display:block;
	color:#fff;
	text-decoration:none;
	font:12px arial, verdana, sans-serif, bold;
}
 
/* Submenu */
.drop_menu ul {
	position:absolute;
	left:-9999px;
	top:-9999px;
	list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#48579D; }
.drop_menu li:hover ul {
	left:0px;
	top:30px;
	background:#48579D;
	padding:0px;
    border: 1px solid #000;
    margin-top: -1px;
	}
 
.drop_menu li:hover ul li a {
	padding:5px;
	display:block;
	width:168px;
	text-indent:15px;
	background-color:#48579D;
border: 1px solid #000;
margin-top: -1px;
	}
.drop_menu li:hover ul li a:hover { background:#005555; }
 
.pblue {
color:blue;
font-size:150%;
line-height:2px;
margin-top:20px;
margin-bottom:2px;
 
}
.pred {
color:red;
font-size:175%;
line-height:2px;
margin:0 auto;
}
 
 
p span 
{
    display: block;
    }
 
/* 
#content {
position:relative;
float:left;
height:auto;
width:860px;
margin-top:1px;
background-color:#ffffff;
padding-top:10px;
padding-right:20px;
padding-left:20px;
padding-bottom:20px;
z-index:-1;
}
*/
 
 
/* body section of page */
    #content {
      background-color: #FFFFFF;
      float: none;
      height: auto;
      margin-top: 50px;
      padding: 10px 20px 20px;
      position: relative;
      width: 860px;
      margin: 0 auto;
      overflow:hidden;   
   }
 #form_content {
      background-color: #FFFFFF;
      float: none;
      height: auto;
      margin-top: 40px;
      padding: 10px 20px 20px;
      position: relative;
      width: 860px;
      margin: 0 auto;
      overflow:hidden; 
}
#intro {
margin-top:25px;
margin-bottom:10px;
position:relative;
left:18%;
top:2%;
width:600px;
height:61px;
background-image:url('tag-line.gif');
background-repeat:no-repeat;
 
}
 
.margin20 {
margin-bottom:10px;
margin-top:20px;
font-family:"Arial Black", Gadget, sans-serif;
}
 
#form  {
position:relative;
height:600px;
width:860px;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;
width:10em;
 
}
 
 
 
/* laptop details image */
.LTDetailsPrice_img {
float:left;
position:relative;
width:200px;
height:158px;
margin:0 auto;
background-color:#FFF;
 
}
/* laptop details info */
.LTDetailsPrice {
float:left;
position:relative;
width:660px;
height:158px;
margin:0 auto;
background-color:#E0D8E0;
 
}
 
 
 
 
#footer {
    position:relative;
    left:0px;
	bottom:0px;
	height:227px;
    background-image:url('footer2.png');
    background-repeat:no-repeat;
	clear:both;
}
 
/* float images right */
.ImageRight {
float:right;
margin: 0 auto;
padding:5px;
}
 
.line_max { /* this line takes up 100% for one word or all words */
position:relative;
float:left;
width="100%";
}
 
 
.details {
	position:relative;
	float:left;
	margin:10px;
	}
 
 
/*DL, DT, DD TAGS LIST DATA*/
dl {
    margin-bottom:50px;
}
 
dl dt {
    background:#5f9be3;
    color:#fff;
    float:left;
    font-weight:bold;
    margin-right:10px;
    padding:2px; 
    width:125px;
}
 
dl dd {
    margin:0px 0;
    padding:2px 0;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>example site layout</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" type="text/css"  href="style.css"/>
</head>
	<body>
		<div id="container">
			<div id="header">
				<div id="logo">
					<img width="315" height="90"  alt="Netvergent Communications" src="Logo.png" />
				</div>
					<div id="contact"><img src="contact_number.png" width="300" height="35" alt="Contact_us"/></div>
			</div>
				<div class="drop"><!--Drop menu-->
					<ul class="drop_menu">
						<li><a href='index.html'>HOME</a></li>
						<li><a href='#'>SERVICES</a>
							<ul>
								<li><a href='cable.html'>Structured Cable</a></li>
								<li><a href='#'>Digital Signage </a></li>
								<li><a href='#'>Printer Support</a></li>
								<li><a href='#'>Windows Support</a></li>
								<li><a href='security.html'>Security Alerts</a></li>
							</ul>
						</li>
						<li><a href='#'>PRODUCTS</a>
							<ul>
								<li><a href='peoplecounter.html'>People Counters</a></li>
								<li><a href='laptop.html'>Laptop Sales</a></li>
								<li><a href='pasystems.html'>PA Intercom</a></li>
								<li><a href='#'>Printer Sales</a></li>
								<li><a href='#'>Routers and Switches</a></li>
							</ul>
						</li>
						<!-- <li><a href='#'>GALLERY</a>
								<ul>
									<li><a href='gallery.html'>Gallery of installs</a></li>
								</ul>
									</li> --> 
							<li><a href='contact2.html'>CONTACT US</a>
								</li>
					</ul>
				</div>
 
					<!--Content window under menu-->
					<div id="content">
						<img width="700" height="125"  alt="toughbook" src="images/panasonic.gif"/>
							<p style="color:blue">Company Background</p>
 
 
							<p>Panasonic Toughbook is a manufacturer of rugged computers. Panasonic Toughbooks or Panasonic laptops 
							have delivered reliable, durable mobile solutions for more than fifteen years and have expanded the
							boundaries of wireless communications technology through a broad portfolio of products, ranging 
							from fully rugged, industrial strength notebook computers and tablet PCs to business-rugged thin 
							and light and ultra-portable notebooks.</p>
 
								<div class="line_max">
									<h2 style="padding-top:10px;">Panasonic Toughbook CF-31JBRDD1M</h2>
										</div>
										<div class="ImageRight">
											<img src="cf-31.jpg" width="250" height="150" alt="Toughbook CF-31" />
										</div>
 
											<!-- CF-31JBRDD1M - Win7, Intel Core i5-2520M 2.50GHz, vPro, 13.1" XGA Touch, 320GB(7200rpm), 4GB, Intel WiFi a/b/g/n, TPM, Bluetooth, Dual Pass (Upper:WWAN/Lower:Selectable),  Fingerprint, 3 Year Toughbook Preferred Warranty -->
 
 
											<div class="details"> <!-- laptop details --> 
												<dl>         
													<dt>Operating System:</dt>
														<dd>Windows 7</dd>
													<dt>CPU:</dt>
														<dd>Intel Core i5-2520M</dd>
             										<dt>RAM:</dt>
														<dd>4 GB</dd>
                 									<dt>Display:</dt>
														<dd>13.1 XGA Touch</dd>
                 									<dt>Wifi:</dt>
														<dd>Intel Wifi a/b/g/n</dd>
												</dl>
											</div>
 
					</div> <!-- content -->
				<div id="footer"></div>
		</div><!--container-->
	</body>
</html>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 38 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9749
Points: 3831

First, the link you gave is

First, the link you gave is invalid. I will edit from /laptop.ca to laptop.html.

You have a div.line_max wrapping an h2 element. It is it is redundant to h2; remove it.

The h2 is {float: left;}. Delete that property.

You have a div.details wrapping a dl. The dl is a perfectly good container. The div is redundant; lose it. Put its margin property on the dl element.

To the dl element, add {overflow: hidden;}.

There is no reason for the div that wraps the right side image. Floating the image makes it block level automagically. Give the image a reasonable right margin, say 100px.

As a rule, do not use the position property without a clear and compelling reason. If you don't know exactly why you're using it, don't.

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.