CSS - Separare top menų da user1 e user2

[TullioWeb]

Ciao a tutti

Ho un template in cui dovrei spostare i blocchi user1 e user2 che appaiono appena sotto il top menų.
Dovrei fare in modo di avere uno spazio vuoto che separa il top da user1 e user2.

E' possibile ?

Grazie in anticipo a chi mi risponde.

[tasto]

certo, ma devi copiare il codice... cosė come si fa a spiegarti?

[TullioWeb]

Questo č il CSS:

body {
   font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   background:#CADEB9 url(../images/logo.jpg) no-repeat top left;
   background-attachment:fixed;
   padding:0;
   margin-bottom: 10px;
}

p {
   font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
}

a:link, a:visited {
   text-decoration:  none;
   font-weight: bold;
   border: none;
   color: #004377;
}

a:hover {
   text-decoration:  underline;
   border: none;
   color: #FF9900;    
}

#user1 {
   float: left;
   margin-bottom: 20px;
   font-size: 10px;
   width: 230px;
   border: 0px solid blue;
}
#user2 {
   float: left;
   margin-bottom: 20px;
   margin-left: 20px;
   font-size: 10px;
   width: 230px;
   border: 0px solid green;
}
#design {
   margin-left:90px;
   font-size: 10px;
   margin-top: -27px;
}

#main {
   margin-left:50px;
   margin-top:10px;
   margin-bottom:10px;
   background:url(../images/main_m.jpg) bottom left repeat-y;   
}
#main_top {
   background:url(../images/main_t.jpg) top left no-repeat;   
}
#main_bottom {
   background:url(../images/main_b.jpg) bottom left no-repeat;   
}

#logo {
   position: absolute;
   top:9px;
   left:5Px;
}

#inhalt {
   margin-left:50px;
   padding-bottom:30px;
   padding-top:80px;
   width:500px;
   min-height:500px;
   height:auto !important;
   height:500px;
}


#menu {
   position: absolute;
   top:10px;
   left:670px;
}

#menu_left {
   background:url(../images/menu_left_m.jpg) top left repeat-y;
}
#menu_left_top {
   background:url(../images/menu_left_t.jpg) top left no-repeat;
}
#menu_left_bottom {
   background:url(../images/menu_left_b.jpg) bottom left no-repeat;
}

#menu_right {
   margin-top:10px;
   background:url(../images/menu_left_m.jpg) top left repeat-y;
}
#menu_right_top {
   background:url(../images/menu_right_t.jpg) top left no-repeat;
}
#menu_right_bottom {
   background:url(../images/menu_left_b.jpg) bottom left no-repeat;
}
#menu_left_content, #menu_right_content {
   width: 218px;
   min-height:200px;
   height:auto !important;
   height:200px;
   padding-left: 24px;
   padding-top: 25px;
   padding-bottom: 25px;
}

.struktur {
   position:absolute;
   left:-1000px;
   top:-1000px;
   width:0px;
   height:0px;
   overflow:hidden;
   display:inline;
}

table.moduletable {
   width: 170px;
   margin-top: 10px;
   }

table.moduletable th {
   font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   color: #004377;
   text-align: left;
   white-space: nowrap;
   width: 100%;
   border-bottom: 2px solid #004377;
   background:url(../images/elefant.png) top right no-repeat;
   padding-left: 0px;
   }
   
table.moduletable td {
   font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: normal;
   padding-left: 2px;
   }
   
.moduletable h3, .contentheading{
   font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   color: #004377;
   text-align: left;
   white-space: nowrap;
   border-bottom: 2px solid #004377;
   margin: 0px;
}   

.moduletable {
   font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}


/* --Default Class Settings-- */

a.mainmenu:link, a.mainmenu:visited, a.mainlevel:link, a.mainlevel:visited {
   color: #004377;
   text-decoration: none;
}

a.mainmenu:hover, a.mainlevel:hover {
   color: #FF9900;
}

a.sublevel:link, a.sublevel:visited {
   color: #004377;
   text-decoration: none;
}

a.sublevel:hover {
   color: #FF9900;
}


#active_menu  {
   color: #004377;
   font-weight: bold;
   font-size: 14px;
   text-decoration: underline;
}

/* Other Mambo Stuff */

#title {
}
.pathway {
color: #BBBBBB;
font-size: 10px;
text-decoration: none;
font-weight: normal;
}

.pathway a{
color: #BBBBBB;
text-decoration: none;
font-weight: normal;
}

.mosimage {
  border: 1px solid #cccccc;
  margin: 5px
}

.mosimage_caption {
  margin-top: 2px;
  background: #efefef;
  padding: 1px 2px;
  color: #666;
  font-size: 10px;
  border-top: 1px solid #cccccc;
}

hr {
width:  90%;
 }
hr.separator {
width:  40%;
 }
a.pnav {
}
.pnav:hover {
}
.small {
font-size: 10px;
color: #ABABAB;
}

.smalldark {
font-size: 10px;
color: #000;
height: 10px;
line-height: 10px;
text-align: left;
}

.sectiontableentry1 {
text-align: left;
background: #EFEFEF;
font-size: 10px;
padding: 2px;
}
.sectiontableentry2 {
background: #FFF;
font-size: 10px;
text-align: left;
padding: 2px;
}
.button {
border: 1px solid #BBBBBB;
}
.inputbox {
border: 1px solid #BBBBBB;
}

.createdate {
font-size: 10px;
color: #ABABAB;
height: 10px;
line-height: 0.7;
}
.modifydate {
font-size: 10px;
color: #ABABAB;
height: 20px;
line-height: 20px;
margin-bottom: 5px;
}

table.contentpane td.contentheading {
border: none;
}

table.contentpane ul {
margin: 0px;
padding: 0px;
list-style: none;
}

table.contentpane ul li{
padding: 0px;
margin: 0px;
padding-left: 15px;
}

.contentdescription {
font-size: 10px;
}
.sectiontableheader {
font-weight: bold;
font-size: 10px;
height: 25px;
line-height: 25px;
}
.categorytitle {
font-weight: bold;
font-size: 16px;
height: 25px;
line-height: 25px;
}
.componentheading {
   font-weight: bold;
   font-size: 16px;
   height: 23px;
   line-height: 20px;
   border-bottom: 2px solid #004377;
   background:url(../images/elefant.png) top right no-repeat;
   color: #004377;
   margin-bottom: 5px;
}

a.category {
text-decoration:  underline;
 }
a.category:hover {
text-decoration:  underline;
 }

.poll {
font-size: 10px;
text-align: center;
}


table.contenttoc {
border: 1px solid #CCCCCC;
padding: 3px;
}

table.contenttoc th{
font-weight: bold;
font-size: 10px;
border-bottom: 1px solid #BBBBBB;
}

form {
margin: 0px;
padding: 0px;
}

[tasto]

aggiungi a user 1/2
margin-top: "50px";
poi aumenti o riduci, in base alle tue preferenze

[TullioWeb]

aggiungi a user 1/2
margin-top: "50px";
poi aumenti o riduci, in base alle tue preferenze

Ti ringrazio per la risposta, tasto.
Ho provato ad aggiungere il codice che hai suggerito ma si abbassa tutto (top menų, titolo e contenuto)in riferimento al top della pagina.
A me serve che si abbassi solo il contenuto della pagina con il titolo e rimanga uno spazio vuoto tra il top menų e la pagina.

Si puō fare ?

Di nuovo grazie per l' aiuto.

[pulce]

Prova semplicemente nell'index ad aggiungere tra i tag top e user un br o un p ...

[TullioWeb]

Ciao

Scusami ma sono proprio un super inesperto.

Mi puoi scrivere il codice che devo inserire ?

[maria.p]

dovrebbe essere una modifica + da index che da css quindi o ci dici che template utilizzi oppure allega l'index.

[TullioWeb]

Il template č elephant_css e questo č il suo index:

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php $iso = split( '=', _ISO );
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
   initEditor();
}
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="shortcut icon" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/templates/<?php echo $cur_template; ?>/images/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/templates/<?php echo $cur_template; ?>/css/template_css.css" />

<style type="text/css">
<!--
#main_top {
   background:url(<?php echo $GLOBALS['mosConfig_live_site']."/templates/".$cur_template."/images/main_t".sprintf("_%02d",rand(1,12)).".jpg"; ?>) top left no-repeat;
}
-->
</style>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="main">
<div id="main_top">
<div id="main_bottom">

<div id="inhalt">

<?php if (mosCountModules( "top" )) { ?>
<div class="top">
   <?php mosLoadModules ( 'top',-1); ?>
</div>
<?php } ?>

<?php if (mosCountModules( "user1" )) { ?>
<div id="user1">
   <?php mosLoadModules ( 'user1',-2); ?>
</div>
<?php } ?>

<?php if (mosCountModules( "user2" )) { ?>
<div id="user2">
   <?php mosLoadModules ( 'user2',-2); ?>
</div>
<?php } ?>
<div style="clear:both;"></div>



<a name="inhalt">[/url]
<h1 class="struktur">Inhalt</h1>
<?php mosMainBody(); ?>

</div>
   
</div>
</div>
</div>

<div id="menu">

<?php if (mosCountModules( "left" )) { ?>
<div id="menu_left">
<div id="menu_left_top">
<div id="menu_left_bottom">
<div id="menu_left_content">
<a name="navigation">[/url]
<h1 class="struktur">Navigation</h1>
<?php mosLoadModules ( 'left'); ?>
</div>
</div>
</div>
</div>
<?php } ?>

<?php if (mosCountModules( "right" )) { ?>
<div id="menu_right">
<div id="menu_right_top">
<div id="menu_right_bottom">
<div id="menu_right_content">
<?php mosLoadModules ( 'right'); ?>
</div>
</div>
</div>
</div>
<?php } ?>

</div>

<?php
   // Danke, dass der folgende Link erhalten bleibt.
?>
<div id="design">
   <a href="http://www.i-cons.ch" target="_blank">design by i-cons[/url]
</div>

</body>
</html>

[pulce]

<?php if (mosCountModules( "top" )) { ?>
<div class="top">
   <?php mosLoadModules ( 'top',-1); ?>
</div>
<?php } ?>

Prova ad inserire qui il tag br

Codice: [Seleziona]

<br />

<?php if (mosCountModules( "user1" )) { ?>
<div id="user1">
   <?php mosLoadModules ( 'user1',-2); ?>
</div>
<?php } ?>

[TullioWeb]

Ho provato.

FUNZIONA !!! 

1000 Grazie per l'aiuto a pulce e a tutti.