Gestaltungsproblem mit SQL Abfrage

chavez_039

Hallo zusammen,

und zwar habe ich folgendes Problem,
Ich habe Einträge in einer Datenbank, die sobald sie ausgelsen werden in einem eigen DIV untergebracht werden.

Dies geschieht ohne PHP usw. so:

HTML

<div class='title'>
                    <h1>
                       ".$row['name']."
                    </h1>
                     <b class='left'>
                     </b>
                     <b class='right'>
                     </b>
                 </div>                

                <div class='post'>
                Datum:".$row['date']."
                Adresse:".$row['place']."
                Name/Motto:".$row['name']."
                Eintritt:".$row['admission_price']."
                Verpflegung:".$row['catering']."
                Veranstalter:".$row['who']."
                </div>
                <div class='clear'>
                </div>

Alles anzeigen

Soweit funktioniert es auch, wenn ich darunter nun via HTML einen zweiten Eintrag setze, funktioniert es auch.

Der Code lautet dann

HTML

<div class='title'>
                    <h1>
                       ".$row['name']."
                    </h1>
                     <b class='left'>
                     </b>
                     <b class='right'>
                     </b>
                 </div>                

                <div class='post'>
                Datum:".$row['date']."
                Adresse:".$row['place']."
                Name/Motto:".$row['name']."
                Eintritt:".$row['admission_price']."
                Verpflegung:".$row['catering']."
                Veranstalter:".$row['who']."
                </div>
                <div class='clear'>
                </div>

                <div class='title'>
                    <h1>
                       ".$row['name']."
                    </h1>
                     <b class='left'>
                     </b>
                     <b class='right'>
                     </b>
                 </div>                

                <div class='post'>
                Datum:".$row['date']."
                Adresse:".$row['place']."
                Name/Motto:".$row['name']."
                Eintritt:".$row['admission_price']."
                Verpflegung:".$row['catering']."
                Veranstalter:".$row['who']."
                </div>
                <div class='clear'>
                </div>

Alles anzeigen

Das Ergebnis sieht dann so aus

Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

Jetz möchte ich aber das der neue DIV automatisch erstellt wird, meines Wissens nach mache ich das so:

PHP

include 'includes/connect.php' ;
                $sql = 'SELECT date, place, name, admission_price, catering, who FROM event';
                $result = $db->query($sql);
                if (!$result) {
                die ('Etwas stimmte mit dem Query nicht: '.$db->error);
                }
                while ($row = $result->fetch_assoc()) {  
                echo "<div class='title'>
                    <h1>
                       ".$row['name']."
                    </h1>
                     <b class='left'>
                     </b>
                     <b class='right'>
                     </b>
                 </div>                

                <div class='post'>
                Datum:".$row['date']."
                Adresse:".$row['place']."
                Name/Motto:".$row['name']."
                Eintritt:".$row['admission_price']."
                Verpflegung:".$row['catering']."
                Veranstalter:".$row['who']."
                </div>
                <div class='clear'>
                </div>";
                }
                $result->close();
                unset($result);

Alles anzeigen

Wenn nur ein Eintrag in der Datenbank vorhanden ist klappt das auch soweit, sobald aber 2 oder mehr da sind sieht es so aus:

Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

Wie bekomme ich es hin das der "Titel" immer links ausgerichtet ist?

MFG chavez_039

P.S. Die Inhalte der CSS datei sind wie folgt:

Code

.post
{
    float:left;
    width:440px;
    min-height:250px;
    margin-left:68px;
    margin-top:-10px;
    border: #CCC 1px solid;
}


.clear
{
    width:440px;
    margin-left:68px;
    height:60px;
    float:left;
}


.title
{
height:109px;
background:url(../img/background-title.png) repeat-x center top;
float:left;
position:relative;
margin-left:68px;
text-shadow:#000 0px 2px 0px;
}


.title h1
{
font-size:38px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-shadow:#fff 0px 1px 0px;
margin-top:15px;
padding-left:5px;
padding-right:5px;
color:#FFF;
}


.title b
{
height:93px;
width:36px;
position:absolute;
top:0px;
}


.title b.left
{
background:url(../img/background-title.png) top left;
left:-36px;
}


.title b.right
{
background:url(../img/background-title.png) top right;
right:-36px;
}

Alles anzeigen

Archonius

Wo genau der Fehler leigt kann ich dir nicht sagen aber vielleicht helfen dir diese Tipps weiter:
Soweit ich weiß werden "leere" Tags von manchen Browsern ignoriert da hilft es ein   für das tag einzufügen.
Soweit ich mich erinnern kann, darf man float nur auf nicht positionierte Elemente anwenden, bin mir nur nicht mehr sicher ob das nur für absolut positionierte Elemente gilt.

matmö

hast du das online irgendwo? dann kann ich dir das 100 % sagen woran es genau liegt. so jetzt vom drüberfliegen deines posts würde ich es mal mit clear:both in .title probieren. und dass die eigenliche klasse die fürs clearen zuständig ist (.clear) float:left drinstehen hat, soll so auch nicht sein, oder?

abgesenen davon ist mir noch was anderes aufgefallen: wenn du in deinem quelltext $row['name'] ausgibst, das direkt von der datenbank kommt, dann pack da noch htmlspecialchars drumrum (stichwort xss)

chavez_039

Okey, also ich hab das Problem gefunden, mehr oder weniger

Und zwar habe ich noch einen DIV-Tag rechts, eine Art Servicespalte, und mein Margin orientiert sich an diesem DIV.

Meine Frage ist jetzt ob es möglich ist via CSS meinen Eintrags DIV's zu sagen das sie sich eben NICHT an diesem DIV orientieren,

Das ist mein Quelltext incl. der CSS Datei

PHP

<!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=utf-8" />
<title></title>




<link href="css/main.css" rel="stylesheet" type="text/css" />




</head>
<body>


<div id="outerbox">


    <div id=content>


        <div id="container-top">
        </div>

              <div id="container">                

                <div id="sidebar">
                <h2>Test</h2>
                </div>



                <?php
                include 'includes/connect.php' ;
                $sql = 'SELECT date, place, name, admission_price, catering, who FROM event';
                $result = $db->query($sql);
                if (!$result) {
                die ('Etwas stimmte mit dem Query nicht: '.$db->error);
                }
                while ($row = $result->fetch_assoc()) {  
                echo "<div class='title'>
                    <h1>
                       ".$row['name']."
                    </h1>
                     <b class='left'>
                     </b>
                     <b class='right'>
                     </b>
                 </div>                

                <div class='post'>
                Datum:".$row['date']."
                Adresse:".$row['place']."
                Name/Motto:".$row['name']."
                Eintritt:".$row['admission_price']."
                Verpflegung:".$row['catering']."
                Veranstalter:".$row['who']."
                </div>
                <div class='clear'>
                </div>";
                }
                $result->close();
                unset($result);

                ?> 

      </div>

        <div id="container-bottom">
        </div>

  </div>
</div>


</body>
</html>

Alles anzeigen

Code

body
{
    background: url(../img/background-body-repeat.png) repeat-y top center;
}


#outerbox
{    
    width:905px;
    padding-left:28px;
    padding-right:28px;
    margin:0 auto;
    /*
    position:relative;
    */
    overflow:hidden;
    background-image:url(../img/background-top.jpg);
    background-position:top center;
    background-repeat:no-repeat;
    margin-top:-8px;
}


#container-top
{
    width:873px;
    height:92px;
    background:url(../img/background-main-top-bottom.png) top left;
    float:right;
}


#container
{
    width:873px;
    background:url(../img/background-main-repeat.png) repeat-y top left;
    float:right;
}


#container-bottom
{
    width:873px;
    height:78px;
    background:url(../img/background-main-top-bottom.png) no-repeat bottom left;
    display:block;
    float:right;
}


.post
{
    float:left;
    width:440px;
    min-height:250px;
    margin-left:68px;
    margin-top:-10px;
    border: #CCC 1px solid;
}


.clear
{
    width:440px;
    margin-left:68px;
    height:60px;
    float:left;
}


.title
{
    height:109px;
    background:url(../img/background-title.png) repeat-x center top;
    float:left;
    position:relative;
    margin-left:68px;
    text-shadow:#000 0px 2px 0px;
}


.title h1
{
    font-size:38px;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    text-shadow:#fff 0px 1px 0px;
    margin-top:15px;
    padding-left:5px;
    padding-right:5px;
    color:#FFF;
}


.title b
{
    height:93px;
    width:36px;
    position:absolute;
    top:0px;
}


.title b.left
{
    background:url(../img/background-title.png) top left;
    left:-36px;
}


.title b.right
{
    background:url(../img/background-title.png) top right;
    right:-36px;
}




#sidebar
{
    float:right;
    margin-right:33px;
    margin-top:5px;
    width:268px;
    margin-bottom:40px;
}


#sidebar h2
{
    font-size:18px;
    font-weight:bold;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    width:260px;
    height:33px;
    padding-left:8px;
    background-image:url(../img/background-sidebar-heading.png);
    background-repeat:no-repeat;
    background-position:top left;
    line-height:34px;
}

Alles anzeigen

matmö

Lad das HTML bitte mal auf einen Server damit man sich es da ansehen kann

chavez_039

Die Addresse ist http://milkandcoffee-music.de/

Die beiden letzten sind manuel mit HTML eingefügt, so solls später aussehen.

MFG chavez_039

matmö

ok, so gehts gleich viel einfacher

füge einfach in .title und in .post jeweils clear:both ins css ein und es sieht genau so aus wie du es haben willst

chavez_039

Perfekt

genauso wollt ich's haben.

Danke

MFG chavez_039

Jetzt mitmachen!