Dangerosking
Reputation: 438
CSS Div Duplicates itself
Hello I am working on this design, but there seems to be a problem with the "content-main-text". For some reason, it duplicates itself, (or at least thats what it looks like), one time it shows with 0 px padding, and the second time with 5 px padding (how it really should be displayed). Here is the Template file code:
<?php
define('IN_PHPBB', true);
$phpbb_root_path = 'foro/';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
$user->session_begin();
$auth->acl($user->data);
$user->setup();
$url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
a:link {
color: #4d9547;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #4D9547;
}
a:hover {
text-decoration: underline;
color: #d02c2c;
}
a:active {
text-decoration: none;
color: #d02c2c;
}
a {
font-size: 1em;
}
h3 {
font-size: 1.7em;
color: #3D372B;
}
h2 {
font-size: 2em;
}
body {
background-color: #484238;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
color: #4F493D;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-top: 0px;
margin-top: 0px;
}
#content-left {
background-image: url(/Images/Backgrounds/Classic%20Template/border_left.gif);
background-repeat: repeat-y;
background-position: left top;
margin: 0px;
}
#content-right {
background-image: url(/Images/Backgrounds/Classic%20Template/border_right.gif);
background-repeat: repeat-y;
background-position: right top;
margin: 0px;
padding: 0px;
}
#header {
background-image: url(/Images/Backgrounds/Classic%20Template/border_top.gif);
background-repeat: repeat-x;
background-position: left top;
padding: 0px;
margin-right: 3.5px;
margin-bottom: 0px;
margin-left: 0px;
height: 50px;
}
#header-left {
background-image: url(/Images/Backgrounds/Classic%20Template/border_top_left.gif);
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
padding: 0px;
height: 44px;
}
#header-right {
background-image: url(/Images/Backgrounds/Classic%20Template/border_top_right.gif);
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
padding: 0px;
}
#topnav {
background-image: url(/Images/Backgrounds/Classic%20Template/topnav_bg.gif);
background-repeat: repeat-x;
background-position: left top;
white-space: nowrap;
display: block;
float: left;
height: 24px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 15px;
border-top-width: 3px;
border-right-width: 3px;
border-left-width: 3px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #4F493D;
border-right-color: #4F493D;
border-left-color: #4F493D;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#Global {
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 13px;
color: #4F493D;
background-color: #E0DACE;
background-image: url(/Images/Backgrounds/Classic%20Template/bg_content.gif);
background-repeat: repeat;
background-position: left top;
width: 100%;
}
#page-header {
clear: both;
height: 15px;
margin-top: 0px;
margin-right: 2.5%;
margin-bottom: 0px;
margin-left: 2.5%;
border: 2px solid #4F493D;
text-align: center;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#navar-top {
margin: 0px;
padding: 0px;
}
#block_header {
background-image: url(/Images/Backgrounds/Classic%20Template/block_top.gif);
background-repeat: repeat-x;
background-position: left top;
display: block;
padding: 0px;
clear: both;
height: 5px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
}
#block-content {
background-image: url(/Images/Backgrounds/Classic%20Template/block_left.gif);
background-repeat: repeat-y;
background-position: left top;
}
#block-footer {
background-image: url(/Images/Backgrounds/Classic%20Template/block_bottom.gif);
background-repeat: repeat-x;
display: block;
padding: 0px;
clear: both;
height: 5px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
}
#div {
background-repeat: no-repeat;
background-position: left top;
height: 24px;
}
#div {
background-repeat: no-repeat;
background-position: right top;
margin: 0px;
height: 24px;
padding-top: 0px;
padding-right: 6px;
padding-bottom: 0px;
padding-left: 10px;
}
#content-right {
background-image: url(/Images/Backgrounds/Classic%20Template/border_right.gif);
background-repeat: repeat-y;
background-position: right top;
margin: 0px;
padding: 0px;
}
#topnav-search {
float: right;
width: 120px;
margin-right: 20px;
padding: 0px;
border: 2px solid #4F493D;
height: 25px;
background-color: #E2DCD0;
}
#footer {
background-image: url(/Images/Backgrounds/Classic%20Template/border_bottom.gif);
background-repeat: repeat-x;
background-position: left bottom;
clear: both;
height: 6px;
text-align: center;
}
#left-column {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top_left.gif);
background-repeat: no-repeat;
width: 15%;
border: 1px solid #484238;
}
#column-left-rightbg {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top_right.gif);
background-position: right top;
background-repeat: no-repeat;
}
#column-content {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top.gif);
background-repeat: repeat-x;
}
#column-left {
float: left;
width: 12%;
margin-top: 20px;
margin-right: 2.5%;
margin-bottom: 20px;
margin-left: 2.5%;
}
#column-left-quests {
margin-bottom: 20px;
}
#column-left-title-leftbg {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top_left.gif);
background-position: left top;
background-repeat: no-repeat;
}
#column-left-title-rightbg {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top_right.gif);
background-repeat: no-repeat;
background-position: right top;
}
#column-left-title-center {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top.gif);
background-repeat: repeat-x;
margin-right: 13px;
margin-left: 13px;
font-size: 11px;
}
#Global #content-left #content-right #column-left #column-left-quests #column-left-title-leftbg #column-left-title-rightbg #column-left-title-rightbgTrue #column-left-title-center strong {
text-align: center;
}
#column-left-title-mainbox {
margin-bottom: 50px;
border: 1.5px solid #484238;
}
#column-left-quests {
text-align: center;
}
#column-left-quests-title {
font-size: 11px;
font-weight: bold;
color: #484238;
border-top-width: 2.5px;
border-right-width: 2.5px;
border-bottom-width: 2.5px;
border-left-width: 2.5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #484238;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
text-align: center;
vertical-align: middle;
height: 20px;
padding-top: 2px;
background-image: url(/Images/Backgrounds/Classic%20Template/Classic-Template-Column-Degradee.png);
background-repeat: repeat;
}
#column-left-quests-content {
border-top-width: 2px;
border-right-width: 2.5px;
border-bottom-width: 2.5px;
border-left-width: 2.5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #484238;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
padding: 4px;
}
#column-left-HLM {
text-align: center;
margin-bottom: 20px;
}
#column-left-HLM-title {
background-color: #E2DCD0;
padding-top: 3px;
font-weight: bold;
border-top-width: 2.5px;
border-right-width: 2.5px;
border-bottom-width: 2.5px;
border-left-width: 2.5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #484238;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
height: 20px;
font-size: 11px;
background-image: url(/Images/Backgrounds/Classic%20Template/Classic-Template-Column-Degradee.png);
background-repeat: repeat-x;
}
#column-left-HLM-content {
border: 2.5px solid #484238;
padding: 3px;
}
#column-right {
text-align: center;
float: right;
width: 12%;
margin-top: 20px;
margin-right: 2%;
margin-bottom: 20px;
margin-left: 15px;
}
#column-main {
margin-top: 20px;
margin-right: 15%;
margin-bottom: 20px;
margin-left: 15%;
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top_left.gif);
background-repeat: no-repeat;
background-position: left top;
}
#column-main-rightbg {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top_right.gif);
background-position: right top;
background-repeat: no-repeat;
height: 12px;
}
#column-main-content {
background-image: url(/Images/Backgrounds/Classic%20Template/block2_top.gif);
background-repeat: repeat-x;
background-position: center top;
margin-right: 12px;
margin-left: 11px;
}
#column-main-text {
margin-top: 0px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
padding: 5px;
}
#column-right-poll {
border: 2px solid #484238;
margin-bottom: 20px;
padding: 0px;
}
#content-right-poll-title {
background-image: url(/Images/Backgrounds/Classic%20Template/Classic-Template-Column-Degradee.png);
background-repeat: repeat-x;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-bottom-style: solid;
border-top-color: #484238;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
font-weight: bolder;
height: 20px;
padding-top: 5px;
}
#column-right-poll-content {
padding: 2.5px;
}
#column-right-imagenes {
margin-bottom: 20px;
border: 2px solid #484238;
}
#column-right-images-title {
font-weight: bold;
background-image: url(/Images/Backgrounds/Classic%20Template/Classic-Template-Column-Degradee.png);
background-repeat: repeat-x;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-bottom-style: solid;
border-top-color: #484238;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
height: 20px;
padding-top: 5px;
}
#content-right-images-content {
padding: 2px;
}
#column-right-herramientas {
text-align: center;
border: 2px solid #484238;
margin-bottom: 20px;
}
#column-right-herramientas-title {
font-weight: bold;
background-image: url(/Images/Backgrounds/Classic%20Template/Classic-Template-Column-Degradee.png);
background-repeat: repeat-x;
height: 20px;
padding-top: 5px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-bottom-style: solid;
border-top-color: #484238;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
}
#column-right-herramientas-content {
padding: 2px;
}
#column-right-videos {
text-align: center;
margin-bottom: 20px;
border: 2px solid #484238;
}
#column-right-videos-title {
font-weight: bold;
background-image: url(/Images/Backgrounds/Classic%20Template/Classic-Template-Column-Degradee.png);
background-repeat: repeat-x;
height: 20px;
padding-top: 5px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-bottom-style: solid;
border-top-color: #484238;
border-right-color: #484238;
border-bottom-color: #484238;
border-left-color: #484238;
}
#column-right-videos-content {
padding: 2px;
}
#page-banner {
text-align: center;
}
.Image {
display: block;
margin-right: auto;
margin-left: auto;
text-align: center;
border: 1px solid #000;
}
#new-copyright {
text-align: center;
clear: both;
}
-->
</style>
<meta name="Keywords" content="runescape, rs, ayuda, guias, español, jagex, tutoriales, mapas, trucos, consejos, ayuda, items, quests, misiones, videos, herramientas, calculadores, bases de dato, monstruos, armas, armaduras, magia, java, online, juegos, multijugador, MMORPG, guilds, dragones, negocios, herbs, posiones, gemas, skills, atlas, guerreros, cuevas, dungeon, merchant, clanes, hispanos" />
<meta name="Description" content="Las mejores guias de runescape en español con mayor cantidad de detalle, faciles de seguir, sencillas pero completas y organizadas." />
<!-- TemplateBeginEditable name="doctitle" -->
<title>:: Fenix Flame, guias de RS en Espanol</title>
<!-- TemplateEndEditable -->
<LINK REL="SHORTCUT ICON"
HREF="http://www.fenixflame.net/Images/FirePhoenix.ico">
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
body,td,th {
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 13em;
}
h1 {
font-size: 3em;
}
</style>
</head>
<body>
<div id="Global">
<div id="content-left">
<div id="content-right">
<div id="header">
<div id="header-left">
<div id="header-right">
<div id="topnav">
<div id="div">
<div id="div">
<?php
if ($user->data['user_id'] == ANONYMOUS)
{
echo '<a href="http://foro.fenixflame.net/faq.php"> FAQ</a> • ';
echo '<a href="http://foro.fenixflame.net/search.php"> Buscar</a> • ';
echo '<a href="http://foro.fenixflame.net/ucp.php?mode=register"> Buscar</a> • ';
echo '<a href="http://fenixflame.net/login.php?previousURL=' . $url . '"> Identificarse</a>';
}
else
{
echo'<a href="http://foro.fenixflame.net/ucp.php">Panel de control de usuario</a> • ';
echo'<a href="http://foro.fenixflame.net/ucp.php?i=pm&folder=inbox"><strong>' . $user->data['user_unread_privmsg'] . '</strong> mensajes privados </a>• ';
echo'<a href="http://foro.fenixflame.net/search.php?search_id=egosearch">Buscar sus mensajes</a> •';
echo'<a href="http://foro.fenixflame.net/faq.php"> FAQ</a> •';
echo'<a href="http://foro.fenixflame.net/search.php"> Buscar</a> •';
echo'<a href="http://foro.fenixflame.net/memberlist.php"> Usuarios</a> • ';
echo '<a href= "http://www.fenixflame.net/logout.php"> Desconectarse [ '. $user->data['username'] .' ]</a>';
}
?>
</div>
</div>
</div>
</div>
<div id="topnav-search">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'es'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('013088667146165371013:-bdq_dp2ewk');
customSearchControl.setResultSetSize(google.search.Search.SMALL_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/espresso.css" type="text/css" />
<link rel="stylesheet" href="http://www.google.com/cse/style/look/espresso.css" type="text/css" />
</div>
<p><br />
</p>
</div>
</div>
<div id="page-banner"><a href="../default.html"><img src="../Images/Banners/Fenix-Flame-Evolution.png" alt="Fenix Flame Logo Image" border="0" title="Fenix Flame" /></a></div>
<div id="page-header"><a href="../default.php">Home</a> • <a href="http://foro.fenixflame.net/">Foro</a> • <a href="../HTML/Todas las Guias.php">Guias</a> •<a href="http://foro.fenixflame.net/viewtopic.php?f=8&t=12"> El Clan</a> •<a href="../HTML/Videos.php"> Videos</a> • <a href="../HTML/Contactarse.html">Contactarse</a> </div>
<div id="column-left">
<div id="column-left-quests">
<div id="column-left-quests-title">Quests</div>
<div id="column-left-quests-content"><a href="../HTML/Guias/Quests/Quests f2p/Cooks Assistant.php">Cooks Assistent</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Black Knights Fortress.php">Black Knights Fortress</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Demon Slayer.php">Demon Slayer</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Dorics Quest.php">Dorics Quest</a> <br />
<a href="../HTML/Guias/Quests/Quests f2p/Dragon Slayer.php">Dragon Slayer</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Ernest the Chicken.php">Ernest the Chicken</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Goblin Diplomacy.php">Goblin Diplomacy</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Imp Catcher.php">Imp Catcher</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Knight's Sword.php">Knights Sword</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Unstable foundations.php">Unstable Foundations</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Pirates Treassure.php">Pirates Treassure</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Prince-Ali-Rescue.php">Prince Ali Rescue</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Restless Ghost.php">Restless Ghost</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Romeo y Julieta.php">Romeo y Julieta</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Rune Mysteries.php">Rune Mysteries</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Sheep Shearer.php">Sheep Shearer</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Shield-of-Arrav.php">Shield of Arrav</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Vampire Slayer.php">Vampire Slayer</a><br />
<a href="../HTML/Guias/Quests/Quests f2p/Witchs Potion.php">Witchs Potion</a></div>
</div>
<div id="column-left-HLM">
<div id="column-left-HLM-title">PvM</div>
<div id="column-left-HLM-content"><span class="text"><a href="New Classic Template/HTML/Guias/High LM/King Black Dragon.php">King Black Dragon<br />
</a><a href="New Classic Template/HTML/Guias/High LM/Chaos Elemental.php">Chaos Elemental</a><br />
<a href="New Classic Template/HTML/Guias/High LM/Kalphite Queen.php">Kalphite Queen</a></span></div>
</div>
</div>
<div id="column-right">
<div id="column-right-poll">
<div id="content-right-poll-title">Encuesta</div>
<div id="column-right-poll-content"><strong>En tu opinión, ¿El actual diseño grafico del sitio es mejor o peor que el anterior?</strong><br />
Mejor porque es menos brillante<br />
Mejor<br />
Mejor pero le hacen falta retoques <br />
Igual de bueno
<br />
Peor<br />
Mucho Peor
<br />
</div>
</div>
<div id="column-right-herramientas">
<div id="column-right-herramientas-title">Herramientas</div>
<div id="column-right-herramientas-content"><a href="New Classic Template/HTML/Herramientas y Utilidades/Calculators/Combat Calculator 1.0.html">Combat Calculator</a><br />
<a href="New Classic Template/HTML/Herramientas y Utilidades/Calculators/Max Hit Calculator.html">Max Hit Calculator</a><br />
<a href="HTML/Herramientas y Utilidades/Otros/Buscador-de-Items.html">Price Checker</a></div>
</div>
<div id="column-right-videos">
<div id="column-right-videos-title">Videos</div>
<div id="column-right-videos-content"><a href="New Classic Template/HTML/Videos/Videos Guia.php">Videos Guia</a><br />
<a href="New Classic Template/HTML/Videos/Videos de Entretenimiento.php">Videos Entretenimiento</a></div>
</div>
</div>
<div id="column-main">
<div id="column-main-rightbg">
<div id="column-main-content"><br />
</div>
</div>
<div id="column-main-text">
<!-- TemplateBeginEditable name="MainTextRegion" -->
<p>Hellooooo</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<!-- TemplateEndEditable --></div>
</div>
<div id="new-copyright">This website and its contents are © 2009 - 2011 Fenix Flame. All Rights Reserved.<br />
<a href="http://www.runescape.com/">RuneScape</a> ® is a trademark of Jagex Ltd. © 1999 - 2011 Andrew Gower.</div>
<div id="footer">"</div></div></div></div>
</body>
</html>
Upvotes: 0
Views: 2692
Answers (1)
splicer
Reputation: 5404
This isn't a CSS problem; it's an templating/HTML problem. Have a look at these two lines:
<div id="column-main-text">
<!-- TemplateBeginEditable name="MainTextRegion" -->
The problem is that MainTextRegion generates one of the column-main-text divs, so the first of those two lines is unnecessary. Just delete the first of those two lines (and its corresponding closing div) and your problem should be solved.
Upvotes: 2
Related Questions
- How to avoid the duplication is css?
- Duplicated content from main page and index page
- Duplicated div lost style
- how to remove duplicate of div
- Avoiding multiple unique divs in single page CSS
- javascript: it keeps copying the 1st div it duplicates
- Images duplicates themselves
- Same content of divs only via HTML+CSS
- Css prints a second div
- Problem in CSS styling for the same div tag called twice. Behaves differently