• Locked
3 replies [Last post]
Fri, 2010-03-05 02:14
tippaflorda
tippaflorda's picture
User offline. Last seen 2 years 10 weeks ago. Offline
newbie
Timezone: GMT-8
Joined: 2009-08-28
Posts: 8
Points: 9

For some reason, there is excess space on the right of the page. Any ideas? The thing is already in a wrapper with margin: 0 auto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Quines Somos | Promo-visa</title>
<link href="style2.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div>
<div class="container_1"><a href="index.html" border="0"><img src="images/promo-visa-logo.jpg" alt="Promo-visa-logo"/></a></div>
<div id="leftpic"><img src="images/gstudio.jpg"alt="Promo-visa-picture" /></div>
 
 
<div class="container_2">
<ul>
	<li><a href="quines-somos.html">Servicios</a></li>
    <li><a href="servicios.html">Musica y Publicidad</a></li>
    <li><a href="musica-y-publicidad.html">Por que Promo-visa?</a></li>
    <li><a href="porque-promo-visa.html">Promociones</a></li>
 
</ul>
</div>
 
<div class="container_2">
<ul id="second">
	<li><a href="demos.html">Demos</a></li>
</ul>
 
 
<ul id="third">   
    <li><a href="contactanos.html">Contactanos</a></li>
  </ul>
 
</div>
<div class="container_4">
<h1>Quines Somos</h1>
 
</div
><div class="container_8">
<p><span class="orange">Promo-visa</span> es una empresa joven, dinamica, dedicada al servicio promocional de los productos de su negocio, ayundando sin duda a incrementar sus ventas.</p>
 
<p>
<span class="orange">Promo-visa</span> combina el arte de la technologia con un equipo de locutores, 
musicos, cantantes, arreglistas y programadores musicales. 
Todos profesionales con gran experiencia en el ramo publicitario.</p>
</div>
<div class="container_4"><h2>Nuestra Mision</h2></div>
</div>
<h3>Brindar un servicio personalizado</h3>
<div class="container_10">
<img class="bottompics" src="images/pic1.jpg" alt="promo-visa-1" />
<img class="bottompics" src="images/pic2.jpg" alt="promo-visa-2" />
<img class="bottompics" src="images/pic3.jpg" alt="promo-visa-3" />
<img class="bottompics" src="images/pic4.jpg" alt="promo-visa-4" /></div>
 
 
 
 
</body></html>

CSS
body{
	background-color: #000000;
	margin:0;
	padding:0;
}
 
 
 
div{margin:0 auto;
width:960px;
 
}
h1{
 
	width:210px;
	margin-top: 68px;
 
	padding-left:250px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 29px;
	font-style: normal;
	color: #FF6400;
}
 
 
 
 
h2{
	width:210px;
	padding-left:280px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-style: normal;
	color: #FF6400;
	margin-top: 44px;	
}
 
h3{
	width:400px;
	margin-top: -75px;
	padding-left:720px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	color: #FFffff;
}
 
 
#leftpic {
	width:219px;
	float:left;
	border: 4px solid #FFFF00;
	margin-top: 35px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
 
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #FFFFFF;
	width:740px;
	line-height: 22px;
	margin-top:0px;
	text-align: left;
	padding: 5px;
	font-style: normal;
	font-weight: lighter;
 
}
 
 
.orange{
color:#ff6400;
}
 
.container_1 {
	width: 211px;
	height: 83px;
	margin-top:10px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 10px;
}
 
 
 
.container_2 {
 
	width:800px;
	margin-top:-30px;	
 
}
 
.container_3 {
	margin-left: auto;
	margin-right: auto;
	width: 211px;
	clear:left;
 
}
 
.container_4 {
margin-left:270px;
 
}
 
.container_5 {
	margin-left: auto;
	margin-right: auto;
	margin-top:60px;
	width: 950px;
	border:5px solid #FFFF00;
	background-color:#000000;
}
 
.container_6 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	padding-left:601px;
 
}
 
.container_7 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
 
}
 
.container_8 {
	width: 430px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: -30;
	margin-left: auto;
}
 
.container_10 {
	width: 800px;
 
 
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #FFFFFF;	
}
 
 
 
ul {
	width: 769px;
	margin-top: -20px;
	border: 1px solid #000;
	margin-left: 150px;	
	clear:right;
 
	}
 
li {
	width: 170px;
	height: 15px;
	list-style: none;
	float: left;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	margin-right:15px;
 
	}
 
 
a {
	width: 170px;
	height: 20px;
	background-color:#330000;
	margin-top:-20px;
	padding-top: 6px;
	list-style: none;
	float: left;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
 	border: thin solid #ffff00;	
	}
 
a:link {
	text-decoration: none;
	color: #ffffff;
 
}
a:visited {
	text-decoration: none;
	color: #ffffff;
 
}
 
a:hover {
	background-color:#663333;
}
 
a:active {
background-color:#663333;
}
 
 
#second ul {
	width: 1000px;
	margin-top: 10px;
	border: 1px solid #000;
 
	}
 
#second li {
	width: 170px;
	height: 15px;
	list-style: none;
	float: left;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
 
	}
 
#second a {
	width: 170px;
	height: 20px;
	background-color:#330000;
	margin-top:20px;
	padding-top: 6px;
 
	list-style: none;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
 	border: thin solid #ffff00;	
	}
 
#second a:link {
	text-decoration: none;
	color: #ffffff;
 
}
 
#second a:visited {
	text-decoration: none;
	color: #ffffff;
 
}
 
#second a:hover {
	background-color:#663333;
}
#second a:active {
background-color:#663333;
}
 
#third ul {
	width:200px;
 
	border: 1px solid #000;
	margin-left: 220px;	
 
 
	}
 
#third li {
	width: 170px;
	height: 15px;
	list-style: none;
	float: right;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	margin-right:42px;
	margin-top: 40px;	
	}
 
 
#third a {
	width: 170px;
	height: 20px;
	background-color:#330000;
	margin-top:-20px;
	padding-top: 6px;
	list-style: none;
	float: left;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
 	border: thin solid #ffff00;	
	}
 
#third a:link {
	text-decoration: none;
	color: #ffffff;
 
}
#third a:visited {
	text-decoration: none;
	color: #ffffff;
 
}
 
#third a:hover {
	background-color:#663333;
 
}
 
#third a:active {
	background-color:#663333;
 
}
 
.bottompics
{
	width:130px;
	float:left;
	border: thin solid #FFFF00;
	margin-top: 54px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 25px;
}

Top
Tags:
Fri, 2010-03-05 16:18
#1
CupidsToejam
CupidsToejam's picture
User offline. Last seen 17 weeks 5 hours ago. Offline
rank Guru
Guru
Timezone: GMT-6
Joined: 2008-08-15
Posts: 2634
Points: 1552

its all these weird margins

its all these weird margins you have all over the place. this is a very simple design, and useing this many divs is messy. search this forum and learn out divitis. The best advice we can provide, is to read about divitis, and go through the tuts from www.htmldog.com. You need to learn how to properly organize and structure your html.


First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Top
Tue, 2010-03-09 04:10
#2
tippaflorda
tippaflorda's picture
User offline. Last seen 2 years 10 weeks ago. Offline
newbie
Timezone: GMT-8
Joined: 2009-08-28
Posts: 8
Points: 9

i went back to the drawing

i went back to the drawing board. Thanks.

Top
Tue, 2010-03-09 14:41
#3
CupidsToejam
CupidsToejam's picture
User offline. Last seen 17 weeks 5 hours ago. Offline
rank Guru
Guru
Timezone: GMT-6
Joined: 2008-08-15
Posts: 2634
Points: 1552

Thats sometimes the best

Thats sometimes the best solution. take a few steps back, and re-evaluate what you're trying to do.


First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Top
  • Locked