Textausrichtung oder Darstellungsproblem?

Razielim · 05.03.2011

Hallo Leute,

ich habe 2 Probleme, hoffentlich kann mirjemand schnell helfen.
Ich habe eine Vorlage erstellt und auf deren Basis eine neue seite erstellt und habe dort Text eingefügt. Jetzt möchte ich, dass der Text nicht so an der Navigation klebt, also hab ich schon alles mögliche ausprobiert um den Text einzuziehen. Ich habe einfach nur Texteinzug ausgewählt, habe padding eingegeben oder habe einen eigenen div container für den text gemacht, aber der Text bleibt wo er ist. Nur die Überschrift hat sich nach langem hin und her endlich nach rechts bewegt. In Dreamweaver werden die Veränderungen auch angezeigt, aber im Browser nicht. Zudem sieht die Seite in jedem Browser anders aus. In Opera 11.0 wird alles angezeigt nur der Text ist nicht eingezogen. Und im Internetexplorer wird gar kein Text angezeigt, nur den den ich in die template eingebaut habe.

Meine Frage also nun: Liegt der fehlerhafte texteinzug nur an der Darstellung des Browser oder mache ich irgendwas falsch?

achja ich arbeite mit CS3

Sorc · 05.03.2011

AW: Textausrichtung oder Darstellungsproblem?

Ein wenig Quellcode wäre nicht schlecht, da könnte man dir eher helfen.

fakerer · 05.03.2011

AW: Textausrichtung oder Darstellungsproblem?

lass mal dw weg

mit padding bist ja schon mal auf der Richtigen Spur. eventuell hilft ja auch ein margin.
Unterschiedliche Ansichten gibt es wegen unterschiedlicher BoxModelle.

Razielim · 06.03.2011

AW: Textausrichtung oder Darstellungsproblem?

Das kann doch nicht sein, jetzt wird plötzlich auch nicht mehr die Hintergrundfarbe von meiner Überschrift angezeigt.

ok hier mal der html code:

HTML:

<body class="twoColElsLtHdr">

    <div id="container">
      <div id="header"></div>
      
  <div id="sidebar1">
        	<div class="strife"><a href="home.html" target="_self">HOME</a></div>
            <div class="strife"><a href="us.html" target="_self">About us</a></div>
            <div class="strife">Products</div>
       </div>

      
      <!-- InstanceBeginEditable name="inhalt" -->
      <div id="mainContent">
   		<text>
          <h1>HOME</h1>
			<p>Osto commolore volendi onulla faccummy num quam il utetummolor sisim irilis et aliquip et lobore venismolor il dolenit loreriusto do dolent la cons nummodo lestincidunt autpat. Ure tio consed digna con eleniamet, commolorper ad er iure feugait ing erci blam, vullaortis aci eliquisi euipismod magnisci tin voluptat iure te min ulputpatum vel ulputat aliquisit vel ecte conulla aut incin ea facidunt nons dolendi psuscin ciliquat iurer ilit alit, quamcom modigna amet adignis ad magnim zzril ullam, verit at, commod tatisit ipis dolesto odolum qui ex eros non ute et, quatincidui euisse commy nit wis ad et, si.
Dui ea feuip estisit adionsed magna commy nos duisissenit, vel utet lum dolore magna aci blaorem zzrit loreetum velit ex essi.
Num delestrud dolor iusto dolenibh estrud modigni smolor ipit, qui blaore mincinci ectet in henim vel iril eu feugiam, sed dipis auguerci ea feugiam zzrit am voluptat, suscilla feu facin vullan vel iniamcommy nos essi eugiam, quisi.
Henit iriliquat am vel ex ex essequis ent luptatiniat, quamet, quatin ut lorer sendreet wisl utpat iuscilla amet wis non henit aliquipsum vulputpat dui eraesto deliscinisl irit, conse voloreros alis am, sit do dolorti scipit wis augiatis nulla feuisl ullum venim num vulla faccum dio cor sisse te endreet adipis elesent ipis ex esequis nostio et nulputatie conulluptat, venibh eriuscilla faci tat, secte venis dunt luptat do er augait, con veliquam vulla augue dolorer ostisi tie doloboreet vercipit ate ent nos et lutpat lut am doluptatet essim dolorer sis elenit aliquamet, veliquat amet, voloborerit dolore consectetue faccum in veliquam at. Ut alis nos enis eugue ex ero con vulputpate feuisci tissi.</p></text>
            </div>
        
      </div>
      <!-- InstanceEndEditable -->
      <!-- Dieses clear-Element sollte direkt auf das #mainContent-div folgen, um das #container-div anzuweisen, alle untergeordneten Floats aufzunehmen. --><br class="clearfloat" />
       <div id="footer">
        <p>Fußzeile</p>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
<!-- InstanceEnd --></html>

und hier CSS:

HTML:

<style type="text/css"> 
     
    body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
	padding: 0;
	text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
	color: #000000;
	background-color: #000000;
	background-image: none;
	background-repeat: repeat-x;
	background-position: right bottom;
    }
    
   
    .twoColElsLtHdr #container {
	width: 62.5em;  
	background: #FFFFFF; 
	border: 1px solid #000000;
	text-align: left; 
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
    } 
body {
	background-color: #000000;
	text-align: left;
	text-indent: 0px;
}

.strife {
	background-color: #0066CC;
	height: 20px;
	width: 200px;
	padding-bottom: 10px;
	line-height: normal;
	text-align: center;
	vertical-align: middle;
	top: 0px;
	margin-top: 2em;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-size: 24px;
}
st {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: bold;
	text-align: center;
	text-indent: 3em;
	padding-left: 0em;
	margin-left: 0px;
	left: 3em;
}
    .twoColElsLtHdr #header {
	background-color: #FFFFFF;
	background-image: url(../bilder/biehler-logo.jpg);
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	height: 130px;
	width: 1000px;
	background-position: left top;
	margin-left: 0px;
	background-repeat: no-repeat;
    } 
    .twoColElsLtHdr #header h1 {
    	margin: 0; 
    	padding: 10px 0; 
    }
    
   
    .twoColElsLtHdr #sidebar1 {
	float: left;
	width: 200px; 
	background-color: #EBEBEB;
	background-image: url(../bilder/biehlernav.jpg);
	height: 1000px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
    }
    .twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p {
    	margin-left: 10px; 
    	margin-right: 10px;
    }
    
    
    .twoColElsLtHdr #mainContent {
	background-image: url(../bilder/mainback.jpg);
	margin-top: 0;
	margin-right: 0em;
	margin-bottom: 0;
	margin-left: 0em;
	background-position: right top;
	height: 900px;
	width: 1000px;
	right: 0px;
	padding-top: 10px;
	top: 10px;
	padding-left: 0px;
	left: 20px;
	text-align: left;
	text-indent: 100px;
    } 

    .twoColElsLtHdr #footer {
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	width: 980px;
	height: 50px;
	background-color: #DDDDDD;
	background-image: url(../bilder/biehlernav.jpg);
    } 
    .twoColElsLtHdr #footer p {
    	margin: 0; 
    	padding: 10px 0; 
    }
    
   
    .fltrt { 
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { 
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { 
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
     
    </style>@charset "utf-8";

.kontaktfeld {
	padding-left: 20px;
}

a {
	color: #000000;
	text-decoration: none;
}


text {
	font-family: Arial, Helvetica, sans-serif;
	padding-left: 100px;
	text-align: left;
	text-indent: 20px;
}
h1 {
	background-color: #0066FF;
	line-height: 30px;
}

p {
	text-indent: 20px;
	text-align: left;
	padding-left: 20px;
}

.inhalt {
	text-align: left;
	text-indent: 20px;
	padding-left: 20px;
}

Nebenbei eine andere Frage, wie kann man die Kommentare ausblenden?

MegaAdi · 06.03.2011

AW: Textausrichtung oder Darstellungsproblem?

ersetze mal

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

durch
margin: 0 15px;
auto kannste verwenden wenn dein Text eine vorgegebene Breite hätte und du ihn zentrieren möchtest oder im Verhältnis zum gegenüberliegenden Abstand haben möchtest!

Margin mit mehreren Zahlen:
eine Zahl: alle 4 Seiten.
zwei Zahlen: erste Zahl = Oben / Unten, zweite Zahl = Rechts / Links
drei Zahlen: erste = Oben, zweite = Rechts / Links, dritte = Unten
vier Zahlen: erste = Oben, zweite = Rechts, dritte = Unten, vierte = Links

ich hoffe ich konnte helfen!

Gruß Adrian

Chris_EDI · 06.03.2011

AW: Textausrichtung oder Darstellungsproblem?

Pffffff - Dreamweaver - Wahnsinn, was da alles drin steht: Schaut so aus, dass DW die CSS nicht ändert, sondern ergänzt, bis die Seite komplett zerschossen ist.
Wenn du schon mit DW arbeiten möchtest, würde ich dir vorschlagen, noch mal ganz von vorne zu beginnen.
Übrigens, im CSS teil steht der schließende </style> -Tag mitten im code. (oberhalb von .kontaktfeld...)
Andere Möglichkeit wäre, firebug im firefox installieren und mit den css-einstellungen experimentieren.