• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

div (daten kommen per ajax) zentrieren

L

lohkoppelweg

Neues Mitglied
Hallo,
ich hab da ein kleines Problem.....!
Ich will umsteigen von <Table> auf <div> System
Ich Kriege dies mit und auf css nicht gebacken.

Habe 3 div´s nebeneinander und dies klappt auch. in der mittleren div soll nun die div ajaxeingabe/ajaxausgabe
zentriert ausgegeben werden. Die Ausgabe erfolgt z.Z links oben(mittlere div) und ganz links(mittlere div).

per Ajax werden sie Skripte geholt
z.B
<a ONCLICK="send_xmlhttp('ajaxausgabe','<?PHP echo DIR_FS_SERVICE?>service.php?service=bdsg');">Datenschutzbestimmungen.....

dies klappt wunderbar (wenn die Ausrichtung noch klappen würde).
ich hoffe das dieses Problem gelöst werden kann.


vielen dank für eure Mühe

Ab hier ist die index.php und ein auszug der *.css
dazu noch ein Skript das geladen wird.




<style>
.radius5{
border:ridge 1px;
border-radius:5px;
-moz-border-radius:5px;
box-shadow:1px 2px 4px rgba(0,0,0,.4)
}
.radius10{
border:ridge 1px;
border-radius:10px;
-moz-border-radius:10px;
box-shadow:1px 2px 4px rgba(0,0,0,.4)
}

/* verschiedene class Div */
.div{
margin: 0;
padding:0;
}
.arbeitsbereich{width:1024px;margin:0 auto; }
.banner{
width:1024px;
height:109px;
margin-top:14px;
background-image:url(../images/top_logo.jpg);
background-repeat:no-repeat
}
.status{
width:1024px;
height:20px;
margin-top:5px;
background-color:#efefef
}
.wrapper{
width:1024px;
margin-top:5px
}

.links{
float:left;
width:200px;
margin: 0;
padding:0;
background-color:transparent
}
.content {
width:624px;
height:700px;
margin:auto;
background-color:transparent;
display:block;
}
.rechts {
float: right;
width:200px;
margin: 0;
padding:0;
background-color:transparent
}
.footer{
width:1024px;
height:30px;
margin-top:5px;
text-align:right;
background-color:#efefef
}
</style>

die index.php
------------------------------------------------------------------------
<?php
$t_start = array_sum(explode(' ', microtime())); ;
$lokal ="";
if (!file_exists("includes/initialize.php")) {
$lokal= "../";
}
if (!file_exists($lokal."includes/initialize.php")) {
$lokal+="../";
}
define("DIR_FS",$lokal); unset($lokal);
define("SEITE","HauptMenue");
include_once(DIR_FS."includes/initialize.php");
include_once("inc/func.inc");
include_once(DIR_FS_INCLUDES."header.php");
?>
<body>
<div class="arbeitsbereich no-color">
<div class="banner radius10"></div>
<div id="status" class="status radius10"><?PHP statusline("HauptMenue")?></div>
<div class="wrapper">
<div id="links" class="links"><?PHP div_anzeige("links")?></div>
<div id="rechts" class="rechts"><?PHP div_anzeige("rechts")?></div>
<div id="content" class="content">
<!--- ****** Hier ist der Knackpunkt
der einzufügende Teil (eine div) sollte vertical mittig und margin-top=14px -->

<div id="ajaxausgabe" style="display: inline-block, none"></div> (geht nicht)
<div id="ajaxeingabe" style="display: inline-block, none"></div> (geht nicht)

<!--************************** -->
</div>
<div style="clear: both;"></div>
</div>
<div id="footer" class="footer radius10"><?PHP include_once(DIR_FS_INCLUDES.'footer.php')?></div>
</div>
</body>
</html>
<script src='<?PHP echo DIR_FS_JS?>global.js'></script>
<script src='<?PHP echo DIR_FS_JS?>httprequest.js'></script>
-----------------------------------------------------------------------------------------------
ende der index.php



service.php
----------------------------------------------------------------------------------------------
<style>
.s-box{margin: 0 auto; background-color:#efefef}
.s-header{width:100%;height:11px;text-align:center;vertical-align:middle;background-color:#66ccff;border-radius:10px 10px 0 0}
.s-inhalt{width:500px;padding:14px 14px 0 14px}
.s-footer{width:100%;height:11px; background-color:#66ccff;border-radius:0 0 10px 10px}
</style>

<?PHP
if(isset($_GET['service'])){
ob_start();
echo "<div class='s-box radius10'><div class='s-header'></div>";
include_once('include/ich.php');
if($_GET['service']=='bdsg'){
$a = "Datenschutzbestimmungen";
$b = file_get_contents('Module/bdsg.php');
}
if($_GET['service']=='agb'){
$a = "Nutzungsbedingungen und Regeln (AGB)";
$b = file_get_contents('Module/agb.php');
}
if($_GET['service']=='imp'){
$a = "Impressum";
$b = file_get_contents('Module/imp.php');
}
echo "<br><center><font size=+2><b>".$a."</b></font></center><div class='s-inhalt'>".$b."<p/>Hamburg, den ".date("d. m Y")."</div><div class='text_schliessen'><<a onclick=\"anzeige_aus('ajaxausgabe')\">schliessen</a>></div><div class='s_footer'></div></div>";
ob_get_flush();
}
?>
----------------------------------------------------------------------------------------
ende von Service.php
 
Zuletzt bearbeitet:
lohkoppelweg schrieb:
Hallo,
ich hab da ein kleines Problem.....!
Ich will umsteigen von <Table> auf <div> System
Ich Kriege dies mit und auf css nicht gebacken.

Habe 3 div´s nebeneinander und dies klappt auch. in der mittleren div soll nun die div ajaxeingabe/ajaxausgabe
zentriert ausgegeben werden. Die Ausgabe erfolgt z.Z links oben(mittlere div) und ganz links(mittlere div).

per Ajax werden sie Skripte geholt
z.B
<a ONCLICK="send_xmlhttp('ajaxausgabe','<?PHP echo DIR_FS_SERVICE?>service.php?service=bdsg');">Datenschutzbestimmungen.....

dies klappt wunderbar (wenn die Ausrichtung noch klappen würde).
ich hoffe das dieses Problem gelöst werden kann.


vielen dank für eure Mühe

Ab hier ist die index.php und ein auszug der *.css
dazu noch ein Skript das geladen wird.




<style>
.radius5{
border:ridge 1px;
border-radius:5px;
-moz-border-radius:5px;
box-shadow:1px 2px 4px rgba(0,0,0,.4)
}
.radius10{
border:ridge 1px;
border-radius:10px;
-moz-border-radius:10px;
box-shadow:1px 2px 4px rgba(0,0,0,.4)
}

/* verschiedene class Div */
.div{
margin: 0;
padding:0;
}
.arbeitsbereich{width:1024px;margin:0 auto; }
.banner{
width:1024px;
height:109px;
margin-top:14px;
background-image:url(../images/top_logo.jpg);
background-repeat:no-repeat
}
.status{
width:1024px;
height:20px;
margin-top:5px;
background-color:#efefef
}
.wrapper{
width:1024px;
margin-top:5px
}

.links{
float:left;
width:200px;
margin: 0;
padding:0;
background-color:transparent
}
.content {
width:624px;
height:700px;
margin:auto;
background-color:transparent;
display:block;
}
.rechts {
float: right;
width:200px;
margin: 0;
padding:0;
background-color:transparent
}
.footer{
width:1024px;
height:30px;
margin-top:5px;
text-align:right;
background-color:#efefef
}
</style>

die index.php
------------------------------------------------------------------------
<?php
$t_start = array_sum(explode(' ', microtime())); ;
$lokal ="";
if (!file_exists("includes/initialize.php")) {
$lokal= "../";
}
if (!file_exists($lokal."includes/initialize.php")) {
$lokal+="../";
}
define("DIR_FS",$lokal); unset($lokal);
define("SEITE","HauptMenue");
include_once(DIR_FS."includes/initialize.php");
include_once("inc/func.inc");
include_once(DIR_FS_INCLUDES."header.php");
?>
<body>
<div class="arbeitsbereich no-color">
<div class="banner radius10"></div>
<div id="status" class="status radius10"><?PHP statusline("HauptMenue")?></div>
<div class="wrapper">
<div id="links" class="links"><?PHP div_anzeige("links")?></div>
<div id="rechts" class="rechts"><?PHP div_anzeige("rechts")?></div>
<div id="content" class="content">
<!--- ****** Hier ist der Knackpunkt
der einzufügende Teil sollte vertical mittig und margin-top=14px -->

<div id="ajaxausgabe" style="float:center; display:none"></div>
<div id="ajaxeingabe" style="float:center; display:none"></div>

<!--************************** -->
</div>
<div style="clear: both;"></div>
</div>
<div id="footer" class="footer radius10"><?PHP include_once(DIR_FS_INCLUDES.'footer.php')?></div>
</div>
</body>
</html>
<script src='<?PHP echo DIR_FS_JS?>global.js'></script>
<script src='<?PHP echo DIR_FS_JS?>httprequest.js'></script>
-----------------------------------------------------------------------------------------------
ende der index.php



service.php
----------------------------------------------------------------------------------------------
<style>
.s-box{margin: 0 auto; background-color:#efefef}
.s-header{width:100%;height:11px;text-align:center;vertical-align:middle;background-color:#66ccff;border-radius:10px 10px 0 0}
.s-inhalt{width:500px;padding:14px 14px 0 14px}
.s-footer{width:100%;height:11px; background-color:#66ccff;border-radius:0 0 10px 10px}
</style>

<?PHP
if(isset($_GET['service'])){
ob_start();
echo "<div class='s-box radius10'><div class='s-header'></div>";
include_once('include/ich.php');
if($_GET['service']=='bdsg'){
$a = "Datenschutzbestimmungen";
$b = file_get_contents('Module/bdsg.php');
}
if($_GET['service']=='agb'){
$a = "Nutzungsbedingungen und Regeln (AGB)";
$b = file_get_contents('Module/agb.php');
}
if($_GET['service']=='imp'){
$a = "Impressum";
$b = file_get_contents('Module/imp.php');
}
echo "<br><center><font size=+2><b>".$a."</b></font></center><div class='s-inhalt'>".$b."<p/>Hamburg, den ".date("d. m Y")."</div><div class='text_schliessen'><<a onclick=\"anzeige_aus('ajaxausgabe')\">schliessen</a>></div><div class='s_footer'></div></div>";
ob_get_flush();
}
?>
----------------------------------------------------------------------------------------
ende von Service.php
Zum Vergrößern anklicken....

1. Verwende CODE-Tags hier im Forum, damit dein Code auch lesbar ist.
2. Wieso erfindest du einfach CSS-Eigenschaften wie float:center? Wenn dann text-align:center.
3. ID's dürfen nur einmal im Code vorkommen. Du hast zweimal id="ajaxausgabe".
4. Du hast zwei Möglichkeiten Elemente zu zentrieren:

Bei fixen Breiten:

Code: 
#ajaxausgabe {
  width: 400px;
  margin: 14px auto;
}

Bei variablen Breiten:

Code: 
.content {
  text-align:center;
}
#ajaxausgabe {
  display:inline-block;
}
 
Hallo,
nächtesmal werden die Code-Tags benutzt. nur am Rande, ich habe 2 divs einer heisst ajaxeingabe und der ander ajaxausgabe.
bei deinem Vorschlag werden meine Texte(die formatiert sind) zentriert. die divs werden nicht mittig in der content gezeigt.
float:Center habe ich entfernt.

mfg
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben