[CSS] margin,padding abziehen

[Bluerock]

Hallo,

gibt es bei css ein funktion die Abstaende, Raender etc. dazuaddieren sondern abziehen. Also ungefaehr width:100%;
margin-left: -170px /breite von linken men/
margin-right:-130px /breite vom rechten menu/

die Minus haben jetzt nur gemacht das es zeigen soll, dass man von diesen 100% nicht plus 170 oder 130 zuaddieren sollen sondern der bereich 100%-170px-130px sein soll.

Gruss Blue

 

[Sgt_H4rtman]

AW: margin,padding abziehen

Hi,

wenn Du es probiert hättest, wüsstest Du, dass es genau so funktioniert.


Ciao

 

[Bluerock]

Re: AW: margin,padding abziehen

Nicht wirklich oder? Ich habe es einmal so gemacht und dabei ging es leider nicht, werd es gleich nochmal versuchen. Schonmal danke.

Wie ich gesagt habe, es geht nicht. wen ich das mit margin-left:-170 mach haut er mich den ganzen text nachlangs uebers menu, was mit float links gemacht wurde.

 

[QUT-Clan]

Also wenn du schreibst margin-left: -170px, hat das genau den selben Effekt, als wenn du schreiben würdest margin-right: 170px.
Also, versuch mal einfach das Minus weg zu lassen.
Wenns dann immer noch nicht geht, dann versuch es mit padding.

Wenn auch das nicht funktioniert, dann musst du wohl auf CSS3 warten, da es dann dort die Möglichkeit geben wird, von einer relativen Breite/Höhe, eine absolute Breite/Höhe abzuziehen.

Mehr dazu hier: KLICK

 

[HoRnominatoR]

Also wenn du schreibst margin-left: -170px, hat das genau den selben Effekt, als wenn du schreiben würdest margin-right: 170px.

das ist so nicht richtig. es hat schon seinen grund, warum man die raender zum linken bzw rechten objekt separat angeben kann.

 

[Bluerock]

Re: AW: [CSS] margin,padding abziehen

Ich glaube, ihr habt mich nicht richtig verstaden. Ich habe ein neues Template gemacht, wo ich das linke menu links gefloat und das rechte , rechts gefloatet habe. Zwischen diesen beiden ist der normale Inhaltsbereich. Somit hat man das uebliche 3spalten design. Ich moechte jedoch das im Inhaltsbereich, der dynamish sein soll, eine Aufteilung von 1:1 passiert, sprich 50%. Da dieser Bereich, der Inhaltsbereich, je nach Aufloesung anders ist, habe ich versucht es mit 50% und 50% zumachen. Jedoch bekomme ich keine Abstaende zwischen den beiden hin, da man ja die Abstaende dazuaddiert. Was ich will ist ca.

#linkemenu {
width:170px;
border-right:1 px #farbe;
float:left; }

#rechtmenu {
width: 130px;
border-left:xx;
float:right;
}

#inhaltsbereich {
width:100%;
margin-left: 171px; (dies soll von den 100% abgezogen werden)
margin-right: 131px; (dies soll von den 100% abgezogen werden)
}

#rechtespalte {
float:right;
width:50%;
padding-left:10px; (dies soll von den 50% abgezogen werden)

}

#linkespalte {
width:50%;
padding-right:10px; (dies soll von den 50% abgezogen werden)
}

 

[QUT-Clan]

Hab ich das jetzt richtig verstanden, dass deine CSS-Klassen "#rechtespalte" und "#linkespalte" im Contentbereich (also in "#inhaltsbereich") stehen?
Also in etwa so:

<div id="inhaltsbereich">
    <div id="linkespalte">
    </div>
    <div id="rechtespalte">
    </div>
</div>

Denn wenn das so ist, das kannst du das "width: 100%" weglassen, so fern die "#inhaltsbereich" Klasse auf ein Blockelement angewendet wird.
Vllt. funzt es ja dann.
Ansonsten gibts du halt noch dem Inhaltsbereich die Eigenschaft:

position: relative;

und positionierst die linke und rechte Spalte absolut.

 

[Bluerock]

Re: AW: [CSS] margin,padding abziehen

Hi, da du anscheined ein bisschen verstehtst geb ich dir mal den Code. Also ich benutze das CMS (Joomla!) und versuche den inhaltsbereich 2 spaltig zu machen. Der Gesamte bereich der Seite ist das linkes menue + inhaltsbereich (eingeteilt in News und Artikel) + rechtes menue. Das linke menue und das rechte habe ich gefloatet. Wenn ich im inhaltsbereich das 100% weglasse,was ich derzeit mache, habe ich aber probleme die abstaende hinzubekommen. Meint ich bekomme kein Abstand zwischen den beiden hin, da ich ja ein angabe von 50% und 50%, womit er mir den abstand ja dazu rechnet was dann ergibt 50% + abstand, da aber nur 100% vorhanden sind geht es ja nicht.

html code:

<div id="seite">
<div id="seiteninfo">XXXX.de - XXX <div id="uhrzeit"><?php  echo mosCurrentDate(); ?></div></div>
<div id="headerbereich"> <a href="http://www.xxx.de" title="xxx">
 <img src="http://www.duff-world.space4free.net/templates/celby/images/logo.png" alt="xxx" />
</a><div id="headerwerb"><?php mosloadmodules ('user5'); ?></div></div>
<div id="inhaltsbereich">
<div id="linkmenue"> <?php mosLoadModules ('left')?></div>
<div id="rechtmenue"><?php mosLoadModules ('right')?></div>
<div id="inhalt">
<div id="navigation"><?php mosLoadModules ('top') ?></div>
<div id="standort"> <?php mosPathway(); ?></div>

<?php
if ( moscountmodules ('user8')){
echo "<div id='artikel'>";
echo "<div id='ueber'>Artikel</div>";
mosMainBody ();
echo "</div>"; }
else { mosMainbody (); } ?>
<?php
if ( moscountmodules ('user8')){
echo "<div id='newsbox'>";
echo "<div id='ueber_2'>News</div>";
mosLoadModules ( 'user8');
echo "<hr />";
mosloadmodules ( 'user7');
echo "</div>"; } ?>

</div>
</div>
  <div id="unten"> XXX.de Copyright 2006<span id="formal"> xxx</span></div>
</div>

CSS:

body {
	text-align:left;
         font-family:Verdana, Tahoma, sans-serif;
         font-size:12px;
         margin:0;
         padding:10px 20px 10px 20px;
         background-color:#FFF;
                                 }

/* Layout */

#seite {
	margin:0;
    padding:0;
    border:1px solid #E0E0FE;
                  }
#seiteninfo {
	width:100%;
	font-size:11px;
    height:14px;
    background-image:url(../images/oben.png);
    background-repeat: repeat-x;
    background-color:#E2E2E2;
    color:#000000;
    text-align:left;
                  }

#uhrzeit {
	text-align:right;
         position:absolute;
         right:24px;
         top:11px;
                        }

#headerbereich {
         background-image:url(../images/header.png);
         background-repeat:repeat-x;
         height:100px;
         width:100%;
                  }

#headerwerb {
	text-align:right;
         position:absolute;
         top:45px;
         right:42px;
         }

#inhaltsbereich {
         height:100%;
         background-image:url(../images/linkmenuebg.png);
         background-repeat: repeat-y;
         background-color:#F9F9F9;
         font-family:Verdana, Tahoma, sans-serif;
         font-size:12px;
		 color:#000;
         margin:0;
         padding:0;

}
#linkmenue {
         float:left;
         background-color:#F5F5F5;
         height:100%;
		 width:170px;
           border-bottom:1px solid #E0E0FE;
         line-height:150%;
           }

#rechtmenue {
         float:right;
         background-color:#F8F8F8;
         width:130px;
         border-left:1px solid #E0E0FE;
         border-bottom:1px solid #E0E0FE;
         line-height:150%;
           }
#navigation {
         height:30px;
         border-right: 1px solid #F9F9F9;
         border-left: 1px solid #F9F9F9;
         border-bottom: 1px solid #F9F9F9;
         color:#FFF;
         text-align:left;
         background-image:url(../images/modulebg.png);
         background-repeat:repeat-x;
         background-color:#FFF;
         }

#standort {
	text-align:left;
	background-color:#F9F9F9;
	color:#000000;
         margin-top:10px;
         margin-bottom:10px;
         border:1px solid #E7E7E7;

}
#inhalt {
         background-color:#FFF;
         line-height:150%;
         
		 padding-left:10px;
         margin-left:171px;
         padding-right:10px;
         margin-right:131px;
         padding-bottom:10px;

                                }
#artikel {
         width:50%;
		 padding-left:10px;
         border-left:1px solid #CCCCCC;
         text-align: left;
		float:right;         
		 }

#newsbox {
         /*width:50%; */
         padding-right:10px;
        
                                  }


#unten {
	border-top:1px solid #CCCCCC;
         background-color:#E7E7E7;
         text-align:center;
         clear:both;
         font-weight:bold;
                        }

#formal {

         text-align:right;
         color:#000000;
         font-size:10px;
         position:absolute;
         right:24px;
							}

#ueber {
	background-image:url(../images/unten.png);
         background-repeat:repeat-x;
        
		 padding-left:4px;
         border:1px solid #EBEBEB;
         color:#FFF;
         height:20px;
         font-weight:bold;
         font-size:14px;
         text-align:left;
		margin-bottom:5px;
		}


#ueber_2 {
	background-image:url(../images/unten.png);
         		 background-repeat:repeat-x;
         padding-left:4px;
         border:1px solid #EBEBEB;
         color:#FFF;
         font-weight:bold;
         font-size:14px;
         height: 20px;
         text-align:left;
        margin-bottom:5px;
		}