Erro em background

hamedm · 18/01/2014

Hola Forobetanos,

Tengo un Problema, el cual es que en esta pagina, http://timers.com.co/hamed/productos.php me aparece la barra de desplazamiento de abajo, pero yo no se porque, ya que yo le puse el 100Ç% de la pantalla, aqui les pongo el codigo de la pagina:

HTML:

<!doctype>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Productos-Sabz Goltab-Pagina Web Oficial-Vajillas en Melamine</title>
		<link rel="stylesheet" href="CSS/index.css" type="text/css">
	<style type="text/css">
	fieldset{
	border: red blue 10px;
        width:80%;
	margin-left:200px;
	margin-right:200px;
	}
	legend{
	color:red;
	}
	.main_product{
	margin-left:10px;
	margin-top:25px;
	width:275px;
	height:275px;
	border: 5px solid #0FF61E;
	border-radius: 3px;
	float:left;
	}
	.product_image{
	width:265px;
	height:200px;
	}
	.product_image img{
	width:265px;
	height:200px;
	margin:5px;
	}
	.product_information{
	width:265px;
	height:75px;
	margin:10px 5px 5px 5px;
	}
	.product_information tr td{
	text-align:center;
	font-weight:bold;
	}
	.product_information tr td a:hover{
	text-align:center;
	font-weight:bold;
	cursor:pointer;
	}
	</style>
	</head>
<body>
<center>
<?php
include ('header.php');
$conexion=mysql_connect("localhost","tkityi","fg");
$bd="timersco_base";
$sql1="select * from categorias";
$resultado1=mysql_db_query ($bd,$sql1,$conexion);

while ($row=mysql_fetch_array($resultado1))
{  
?>

<fieldset>
	<legend><?php echo $row["tipo"]; ?></legend>
<?php
 
	$sql2='select * from productos where id_producto='.$row["ID"].' ';
	$resultado2=mysql_db_query ($bd,$sql2,$conexion);
	while ($yo=mysql_fetch_array($resultado2))
	{
		
		
		?> 
<div class="main_product">
    <div class="product_image">
		<img src="fotos/<?php echo $yo["imagen"]; ?>">
    </div>
    <div class="product_information">
		<table width="265" height="50" bgcolor="#0f95f6">
			<tr>
				<td style="text-align:center; color:white;" width:265px: height:50px;><?php echo $yo["nombre"]; ?></td>
			</tr>
			<tr>
				<td style="cursor:pointer;background-color:#F6F60F; border:2px solid #F6F60F; border-radius:3px;padding:0px; width:5px;height:10px;" ><a href="">Ver Mas</a></td>
			</tr>
		</table>
    </div>
</div>
 <?php
}
 ?>
</fieldset>
<?php
}
?>
</center>
</body>
</html>

ahora el codigo de la pagina:

HTML:

body {
background-image: url(../imgs/fondo-logo.jpg);
background-repeat: repeat;
padding:0;
margin:0;
font-family: Segoe UI;
background-size: 100%;
}
a {
text-decoration:none;
color: #222;
}
.topmenu{
height: 40px;
width:100%;
background-color: #090;	
color: #FFF;
padding-top: 10px;
font-family: verdana;
text-align: left;
font-size: 20px;
}

.topmenu img{
float: right;
width: 25px;
height: 25px;
margin-right: 5px;
}
header {
height: 90px;
width: 100%;
background-color: #FFF;
}
header a {
color:#000;
}
header .main {
width: 90%;
height:80px;
margin:0 auto;
}
header .main img {
float: left;
height: 80px;
width: 80px;	
}
header .main h1 {
margin: 0;
padding: 0;
color: #1c95e6;
padding-top: 10px;
height: 70px;
width: 200px;
float: left;
font-family: Segoe UI;
text-align: center;
left: 100px;
}
header nav {
float:left;
width:60%;
height:80px;
}
header nav ul{
width:auto;
height:70px;
float:right;
padding:0;
margin:0;
list-style:none;
}
header nav ul:hover{
width:auto;
height:70px;
float:right;
padding:0;
margin:0;
list-style:none;
color: #fff;
}
header nav ul li {
float: left;
padding-bottom:10px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
margin-top: 20px;
margin-left: 20px;
margin-right: 10px;
}
header nav ul li:hover{
float: left;
padding-bottom:10px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
background-color: #1c95e6;
border-radius: 5px;
color: #FFF;
text-shadow:1px 1px rgba(204, 204, 204, 0.46);
}
header nav ul li:hover a{
color: #FFF;
text-decoration: none;
}
header #social-media{
width: 1340px;
height: 10px;

}
header #social-media img{
float: right;
width: 25px;
height: 25px;
}
section {
width: 100%;
padding:10px;
height: auto important!;
background: #F8F8F8;
border-bottom:1px solid rgba(217, 67, 67, 0.4);
}
.btnredlarge {
background: #FF5757;
padding: 5px;
text-align: center;
color: white;
border: 1px solid rgba(34, 34, 34, 0.19);
text-shadow: 1px 1px rgba(34, 34, 34, 0.21);
margin-top:5px;
}
.btnredlarge:hover {
background: #FF3838;
padding: 5px;
text-align: center;
color: white;
border: 1px solid rgba(34, 34, 34, 0.19);
text-shadow: 1px 1px rgba(34, 34, 34, 0.21);
cursor:pointer;
}

h1.quienes {
font-family: arial;
font-size: 25px;
margin: 10px;
color: green;
}
fieldset{
background-color:white;
border: 3px solid gray;
}
legend{
color: blue;
font-size:25px;
font-weight:bold;
}

Jaison Mora · 18/01/2014

hamedm disse:

Hola Forobetanos,

Tengo un Problema, el cual es que en esta pagina, Productos-Sabz Goltab-Pagina Web Oficial-Vajillas en Melamine me aparece la barra de desplazamiento de abajo, pero yo no se porque, ya que yo le puse el 100Ç% de la pantalla, aqui les pongo el codigo de la pagina:

HTML:

<!doctype>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Productos-Sabz Goltab-Pagina Web Oficial-Vajillas en Melamine</title>
		<link rel="stylesheet" href="CSS/index.css" type="text/css">
	<style type="text/css">
	fieldset{
	border: red blue 10px;
        width:80%;
	margin-left:200px;
	margin-right:200px;
	}
	legend{
	color:red;
	}
	.main_product{
	margin-left:10px;
	margin-top:25px;
	width:275px;
	height:275px;
	border: 5px solid #0FF61E;
	border-radius: 3px;
	float:left;
	}
	.product_image{
	width:265px;
	height:200px;
	}
	.product_image img{
	width:265px;
	height:200px;
	margin:5px;
	}
	.product_information{
	width:265px;
	height:75px;
	margin:10px 5px 5px 5px;
	}
	.product_information tr td{
	text-align:center;
	font-weight:bold;
	}
	.product_information tr td a:hover{
	text-align:center;
	font-weight:bold;
	cursor:pointer;
	}
	</style>
	</head>
<body>
<center>
<?php
include ('header.php');
$conexion=mysql_connect("localhost","tkityi","fg");
$bd="timersco_base";
$sql1="select * from categorias";
$resultado1=mysql_db_query ($bd,$sql1,$conexion);

while ($row=mysql_fetch_array($resultado1))
{  
?>

<fieldset>
	<legend><?php echo $row["tipo"]; ?></legend>
<?php
 
	$sql2='select * from productos where id_producto='.$row["ID"].' ';
	$resultado2=mysql_db_query ($bd,$sql2,$conexion);
	while ($yo=mysql_fetch_array($resultado2))
	{
		
		
		?> 
<div class="main_product">
    <div class="product_image">
		<img src="fotos/<?php echo $yo["imagen"]; ?>">
    </div>
    <div class="product_information">
		<table width="265" height="50" bgcolor="#0f95f6">
			<tr>
				<td style="text-align:center; color:white;" width:265px: height:50px;><?php echo $yo["nombre"]; ?></td>
			</tr>
			<tr>
				<td style="cursor:pointer;background-color:#F6F60F; border:2px solid #F6F60F; border-radius:3px;padding:0px; width:5px;height:10px;" ><a href="">Ver Mas</a></td>
			</tr>
		</table>
    </div>
</div>
 <?php
}
 ?>
</fieldset>
<?php
}
?>
</center>
</body>
</html>

ahora el codigo de la pagina:

HTML:

body {
background-image: url(../imgs/fondo-logo.jpg);
background-repeat: repeat;
padding:0;
margin:0;
font-family: Segoe UI;
background-size: 100%;
}
a {
text-decoration:none;
color: #222;
}
.topmenu{
height: 40px;
width:100%;
background-color: #090;	
color: #FFF;
padding-top: 10px;
font-family: verdana;
text-align: left;
font-size: 20px;
}

.topmenu img{
float: right;
width: 25px;
height: 25px;
margin-right: 5px;
}
header {
height: 90px;
width: 100%;
background-color: #FFF;
}
header a {
color:#000;
}
header .main {
width: 90%;
height:80px;
margin:0 auto;
}
header .main img {
float: left;
height: 80px;
width: 80px;	
}
header .main h1 {
margin: 0;
padding: 0;
color: #1c95e6;
padding-top: 10px;
height: 70px;
width: 200px;
float: left;
font-family: Segoe UI;
text-align: center;
left: 100px;
}
header nav {
float:left;
width:60%;
height:80px;
}
header nav ul{
width:auto;
height:70px;
float:right;
padding:0;
margin:0;
list-style:none;
}
header nav ul:hover{
width:auto;
height:70px;
float:right;
padding:0;
margin:0;
list-style:none;
color: #fff;
}
header nav ul li {
float: left;
padding-bottom:10px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
margin-top: 20px;
margin-left: 20px;
margin-right: 10px;
}
header nav ul li:hover{
float: left;
padding-bottom:10px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
background-color: #1c95e6;
border-radius: 5px;
color: #FFF;
text-shadow:1px 1px rgba(204, 204, 204, 0.46);
}
header nav ul li:hover a{
color: #FFF;
text-decoration: none;
}
header #social-media{
width: 1340px;
height: 10px;

}
header #social-media img{
float: right;
width: 25px;
height: 25px;
}
section {
width: 100%;
padding:10px;
height: auto important!;
background: #F8F8F8;
border-bottom:1px solid rgba(217, 67, 67, 0.4);
}
.btnredlarge {
background: #FF5757;
padding: 5px;
text-align: center;
color: white;
border: 1px solid rgba(34, 34, 34, 0.19);
text-shadow: 1px 1px rgba(34, 34, 34, 0.21);
margin-top:5px;
}
.btnredlarge:hover {
background: #FF3838;
padding: 5px;
text-align: center;
color: white;
border: 1px solid rgba(34, 34, 34, 0.19);
text-shadow: 1px 1px rgba(34, 34, 34, 0.21);
cursor:pointer;
}

h1.quienes {
font-family: arial;
font-size: 25px;
margin: 10px;
color: green;
}
fieldset{
background-color:white;
border: 3px solid gray;
}
legend{
color: blue;
font-size:25px;
font-weight:bold;
}

Amigo a mi me sale la pagina bien no me sale lo que tu dices ?? no es que tendras el zoom en tu pc!😛irate:

Vika · 18/01/2014

Yo tampoco veo el scroll horizontal...

PD. Deberías editar el código que colocaste ya que muestras datos sensibles (usuario y pass de tu conexión).

pitufoweb · 18/01/2014

Yo tambien lo veo bien.

hamedm · 19/01/2014

es que se ve mal, con los computadores antiguos, los que tienen torre.

GGalizzi · 19/01/2014

Primero que nada, revisa tu HTML, tenes tags de metas, links y otras cosas que van en <head> no <body>, y las tenes repetidas.

Uno de tus problema esta en el elemento #social-media ( <div id="social-media"> ), tiene un width fijo (1340px), por lo que un viewport menor a 1340px va a agregar la scrollbar. Aunque de todas maneras no le veo la utilidad a ese div.
Pero si achicas un poco mas el viewport aparece de nuevo el scrollbar, pero no puedo encontrar cual es el otro causante de este.

En fin, cuesta encontrar el problema acá porque el HTML y el CSS es bastante "sucio".

edit:

El otro causante del scrollbar son los 400px de margen que le estas dando a los <fieldset>

Melvin Garcia · 19/01/2014

Hola,

Cambia tu php por este

PHP:

<!DOCTYPE html>
<html>
    <head>
        <title>Productos-Sabz Goltab-Pagina Web Oficial-Vajillas en Melamine</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="CSS/index.css" type="text/css">
    </head>
<body>
<?php
include ('header.php');
$conexion=mysql_connect("localhost","tkityi","fg");
$bd="timersco_base";
$sql1="select * from categorias";
$resultado1=mysql_db_query ($bd,$sql1,$conexion);

while ($row=mysql_fetch_array($resultado1))
{  
?>

<fieldset>
    <legend><?php echo $row["tipo"]; ?></legend>
<?php
 
    $sql2='select * from productos where id_producto='.$row["ID"].' ';
    $resultado2=mysql_db_query ($bd,$sql2,$conexion);
    while ($yo=mysql_fetch_array($resultado2))
    {
        
        
        ?> 
<div class="main_product">
    <div class="product_image">
        <img src="fotos/<?php echo $yo["imagen"]; ?>">
    </div>
    <div class="product_information">
        <table width="265" height="50" bgcolor="#0f95f6">
            <tr>
                <td style="text-align:center; color:white;" width:265px: height:50px;><?php echo $yo["nombre"]; ?></td>
            </tr>
            <tr>
                <td style="cursor:pointer;background-color:#F6F60F; border:2px solid #F6F60F; border-radius:3px;padding:0px; width:5px;height:10px;" ><a href="">Ver Mas</a></td>
            </tr>
        </table>
    </div>
</div>
 <?php
}
 ?>
</fieldset>
<?php
}
?>
</body>
</html>

Y cambia tu archivo CSS por este

Inserir CODE, HTML ou PHP:

body {
background-image: url("../imgs/fondo-logo.jpg");
background-repeat: repeat;
padding:0;
margin:0;
font-family: Segoe UI;
}
a {
text-decoration:none;
color: #222;
}
.topmenu{
height: 40px;
width:100%;
background-color: #090;    
color: #FFF;
padding-top: 10px;
font-family: verdana;
text-align: left;
font-size: 20px;
}

.topmenu img{
float: right;
width: 25px;
height: 25px;
margin-right: 5px;
}
header {
height: 90px;
width: 100%;
background-color: #FFF;
}
header a {
color:#000;
}
header .main {
width: 90%;
height:80px;
margin:0 auto;
}
header .main img {
float: left;
height: 80px;
width: 80px;    
}
header .main h1 {
margin: 0;
padding: 0;
color: #1c95e6;
padding-top: 10px;
height: 70px;
width: 200px;
float: left;
font-family: Segoe UI;
text-align: center;
left: 100px;
}
header nav {
float:left;
width:60%;
height:80px;
}
header nav ul{
width:auto;
height:70px;
float:right;
padding:0;
margin:0;
list-style:none;
}
header nav ul:hover{
width:auto;
height:70px;
float:right;
padding:0;
margin:0;
list-style:none;
color: #fff;
}
header nav ul li {
float: left;
padding-bottom:10px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
margin-top: 20px;
margin-left: 20px;
margin-right: 10px;
}
header nav ul li:hover{
float: left;
padding-bottom:10px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
background-color: #1c95e6;
border-radius: 5px;
color: #FFF;
text-shadow:1px 1px rgba(204, 204, 204, 0.46);
}
header nav ul li:hover a{
color: #FFF;
text-decoration: none;
}
header #social-media{
width: 1340px;
height: 10px;

}
header #social-media img{
float: right;
width: 25px;
height: 25px;
}
section {
width: 100%;
padding:10px;
height: auto important!;
background: #F8F8F8;
border-bottom:1px solid rgba(217, 67, 67, 0.4);
}
.btnredlarge {
background: #FF5757;
padding: 5px;
text-align: center;
color: white;
border: 1px solid rgba(34, 34, 34, 0.19);
text-shadow: 1px 1px rgba(34, 34, 34, 0.21);
margin-top:5px;
}
.btnredlarge:hover {
background: #FF3838;
padding: 5px;
text-align: center;
color: white;
border: 1px solid rgba(34, 34, 34, 0.19);
text-shadow: 1px 1px rgba(34, 34, 34, 0.21);
cursor:pointer;
}

h1.quienes {
font-family: arial;
font-size: 25px;
margin: 10px;
color: green;
}
fieldset{
background-color:white;
border: 3px solid gray;
}
legend{
color: blue;
font-size:25px;
font-weight:bold;
}    
   fieldset{
    border: red blue 10px;
        width:80%;
    margin: 0 auto;
    }
    legend{
    color:red;
    }
    .main_product{
    margin-left:10px;
    margin-top:25px;
    width:275px;
    height:275px;
    border: 5px solid #0FF61E;
    border-radius: 3px;
    float:left;
    }
    .product_image{
    width:265px;
    height:200px;
    }
    .product_image img{
    width:265px;
    height:200px;
    margin:5px;
    }
    .product_information{
    width:265px;
    height:75px;
    margin:10px 5px 5px 5px;
    }
    .product_information tr td{
    text-align:center;
    font-weight:bold;
    }
    .product_information tr td a:hover{
    text-align:center;
    font-weight:bold;
    cursor:pointer;
    }

Erro em background

hamedm

Jaison Mora

Vika

pitufoweb

hamedm

GGalizzi

Melvin Garcia

Tópicos similares