✔ Opera zentriert nicht?!

Dkl764 · 24. Dezember 2008

Der Internet Explorer 6 zeigt alles soweit richtig an wie bei mir im Dreamweaver auch. Der Opera hingegen setzt es links an den Rand, obwohl mittig angegeben.

Wo ist der Fehler? Was unterstützt der Opera nicht? Ich nutze Opera 9.63.

CSS:

* {
	margin:0;
	padding:0;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	color: #999999;
}

html, body {
	height:100%;
	width:100%;
}

body {
	background-color:#000000;
	background-repeat:no-repeat;
	background-position: center top;
	background-image: url(../images/Hintergrund.jpg);
	height:100%;
	width:100%;
	text-align:center;
}

.menu {
}

.inhalt {
	width:380px;
	height:500px;
	text-align: left;
	margin-top: 50px;
}

Edit: Wieso wird das eigendlich so kommich in Farben angezeigt? Mal ist der Befehl farbig, mal nicht...

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>deinStyling</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="menu">
                    (menu hier)
	</div>

    <div class="inhalt"> 
                 (inhalt hier)
    </div>
</body>
</html>

Vielen Dank im Vorraus!

Duellking

Sven Mintel · 24. Dezember 2008

Opera zeigt bei mir alles so an, wie du es angegeben hast.
Ein horizontal zentriertes Hintergrundbild und das div#menu, dessen Text zentriert ist, weil es die Eigenschaft vom body erbt.

Nicht zentriert ist der Text in div#inhalt, weil du dort für text-align left notiert hast.

Vermutlich willst du es so haben:

Code:

* {
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    color: #999999;
}
 
html, body {
    height:100%;
}
 
body {
    background-color:#000000;
    background-repeat:no-repeat;
    background-position: center top;
    background-image: url(../images/Hintergrund.jpg);
    height:100%;
}

.menu{
  text-align:center;
}

 
.inhalt {
    width:380px;
    height:500px;
    position:relative;
    left:50%;
    margin-left:-190px;
    margin-top: 50px;
}

Die Erklärung, wie das zentrieren der Box selbst(nicht des Textes) funktioniert, findest du hier:
http://www.tutorials.de/forum/html/331133-text-richtig-auf-grafik-positionieren.html
....oder in dem von dir gestern eigens dafür erstellten Thema;-]
http://www.tutorials.de/forum/css/331162-von-der-mitte-x-pixel-nach-links-rechts.html

deepthroat · 24. Dezember 2008

Hi.

Duellking hat gesagt.:
Der Internet Explorer 6 zeigt alles soweit richtig an wie bei mir im Dreamweaver auch.

Ob das "richtig" ist was der IE 6 anzeigt wage ich zu bewzeifeln

Duellking hat gesagt.:
Der Opera hingegen setzt es links an den Rand, obwohl mittig angegeben.

Was meinst du damit? Was setzt er links an den Rand? Du hast doch explizit angegeben, das der Text in der Inhaltsbox linksbündig sein soll... ?

Duellking hat gesagt.:
Edit: Wieso wird das eigendlich so kommich

Kommich? Ich hoffe du sprichst nicht so wie du schreibst

Duellking hat gesagt.:
in Farben angezeigt? Mal ist der Befehl farbig, mal nicht...

Anscheinend darf für den Highlighter nach dem Doppelpunkt kein Buchstabe stehen.

Gruß

Dkl764 · 24. Dezember 2008

Ich glaube Ihr versteht mich falsch. Der Div-Container ist mittig plaziert mit einer Breite von 380 Pixeln (width:380px

,wird jedoch im Opera 9.63 links an den Rand geschoben. Das der Text linksbündig ist soll natürlich so sein, aber der Div-Container soll nicht linksbündig sein...

Unten ein Anhang mit einem Bild wie ich es bei mir sehe mit beiden Browsern.

Hier nochma die aktuellen CSS + HTML (jetzt PHP) CODES:

CSS:

* {
	margin:0;
	padding:0;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	color:#999999;
}

html, body {
	height:100%;
	width:100%;
}

body {
	background-color:#000000;
	background-repeat:no-repeat;
	background-position: center top;
	background-image: url(../images/Hintergrund.jpg);
	height:100%;
	width:100%;
	text-align:center;
}

.menu {
	position:relative;
	top:30px;
	left:-220px;
}

.search {
	position:relative;
	top:12px;
	left:250px;
	text-align:50;
}

.searchbox {
	height:29px;
	width:207px;
	background: url(../images/search.jpg);
	border: 0;
	color: #fff;
}

.inhalt {
	position:relative;
    width:380px;
    height:500px;
    text-align: left;
    margin-top: 280px;
	margin-left:-210px;

}

HTML:

<?php
//require ('lib/connect.lib.php');
if (!isset($_GET['file']) || empty ($_GET['file'])) { $_GET['file'] = '/intern/startseite'; }

if (!file_exists('files'.$_GET['file'].'.php')) { $_GET['file'] = '/error/no_page'; }
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>deinStyling</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="menu">
  		<p><a href="index.php?file=home"><img src="images/Home.jpg" alt="Home" name="Home" border="0" id="Home" /></a>&nbsp;
		
		<a href="index.php?file=referenzen">
        <img src="images/Referenzen.jpg" alt="Referenzen" name="Referenzen" border="0" id="Referenzen" /></a>&nbsp;
  		  
  		  <a href="index.php?file=home">
          <img src="images/Preise.jpg" alt="Preise" name="Preise" width="45" height="16" border="0" id="Preise" /></a>&nbsp;
  		  
  		  <a href="index.php?file=home">
	      <img src="images/Aboutus.jpg" alt="&Uuml;ber uns" name="AboutUs" width="70" height="16" border="0" id="AboutUs" /></a>&nbsp;
		  
		  <a href="index.php?file=home">
        <img src="images/Contact.jpg" alt="Kontakt" name="Contact" width="60" height="16" border="0" id="Contact" /></a></p>
	</div>
	
	<div class="search">
		<?php include("lib/box/search.php"); ?>
	</div>

    <div class="inhalt">

(habe es in einen HTML-Tag gepostet da es ja um den HTML-Code und weniger um den PHP Code geht)

- Duellking -

Sven Mintel · 24. Dezember 2008

text-align richtet Text aus, wie der Name schon sagt, und keine Boxen.

Die Lösungen kannst du meinem vorrangegangenen Posting entnehmen.

Dkl764 · 24. Dezember 2008

Ok, danke funktioniert

Nur fällt mir jetzt auf das der IE6 es wieder falsch anzeigt, er schiebt das Body-Hintergrund mit nach rechts und so...

✔ Opera zentriert nicht?!

Dkl764

Sven Mintel

Mitglied

deepthroat

Erfahrenes Mitglied

Dkl764

Anhänge

Sven Mintel

Mitglied

Dkl764

Neue Beiträge