Error en background

  • Autor Autor hamedm
  • Fecha de inicio Fecha de inicio
H

hamedm

Gamma
Programador
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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;
}
 

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:
 
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).
 
Yo tambien lo veo bien.
 
es que se ve mal, con los computadores antiguos, los que tienen torre.
 
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>
 
Última edición:
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
Insertar CODE, HTML o 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;
    }
 
Última edición: