[Erledigt] Designprobleme

Der Gamer · 28.12.2010, 22:48

Hallo zusammen,
ich hätte da eine Frage. Ich versuche gerade ein Design zu bauen.
Hier mal drei provisorische Bilder davon:

Bild 1

Bild 2

Bild 3

Das 1. sowie das 3. Bild werden nur einmal gebraucht. Das mittlere Bild soll so oft eingefügt bzw. in der Höhe gestreckt werden, wie der Text lang ist, der sich im weißen Feld befindet. Dabei soll das Design in einer index.php landen und ins weiße Feld soll eine weitere php-Datei includet werden.

Hätte ich nur einen einfachen Text, würde ich die Zeichen zählen und nach X Zeichen einfach ein weiteres Mal das zweite Bild anhängen. Da hier aber eine php-Datei includet wird, bin ich mir nicht sicher wie ich das lösen soll.
Einfach Zeichen zählen dürfte nicht funktionieren, da die Datei die includet wird ja sowohl Bilder als auch Tabellen/Divs enthalten kann. Zwar könnte man alle html-Tags entfernen, allerdings würde dann die vorgegebene Höhe einer Tabelle beispielsweise nicht berücksichtig.

Vielleicht habe ich ja einfach ein Brett vor dem Kopf und sehe die einfachste Lösung nicht, dennoch wäre ich für jeden Tipp dankbar.

Mfg
der Gamer

Trainmaster · 28.12.2010, 22:54

Das hat nichts mit PHP zu tun, sondern CSS: 1px hohe Grafik als Hintergrund und repeat-y.

Der Gamer · 29.12.2010, 13:12

Wenn doch nur alles so einfach wäre...

Funktioniert soweit perfekt, vielen Dank

Ein kleines Problem hab ich jetzt noch. Vor und nach dem div befindet sich jetzt jeweils eine leere Zeile. Ich versteh nich ganz, wo die herkommen.
Hängt das pauschal mit dem repeat zusammen oder ist der Fehler wo anders im Code?

Der Validator (http://validator.w3.org/) hat zwar ein paar Fehler gefunden, die dürften damit aber nichts zu tun haben.

PHP-Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>Projekt</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>

<body>
  <div style="position:absolute; top:30px;right:30px;">
     <?php
     //sprachwahl
     $get_page=secure($_GET["page"]);
     print '<a href="?page='.$get_page.'&lang=de_DE">DE</a>';
     print ' / ';
     print '<a href="?page='.$get_page.'&lang=en_GB">EN</a>';
     ?>
  </div>
  <div style="height:100%;width:800px; margin:auto;">
     <div style="position:relative; width:800px;height:200px; background:url(images/neu_1.png);">
        &nbsp;
     </div>
     <div style="position:relative; width:800px;height:50px; background:url(images/neu_2.png); text-align:center;">
        <a href="?page=start"><?php $lang=1;$text=lang($lang);print $text;?></a>
        <a href="?page=contact"><?php $lang=2;$text=lang($lang);print $text;?></a>
        <a href="?page=guestbook"><?php $lang=3;$text=lang($lang);print $text;?></a>
        <?php
        //menu
        if($_SESSION["login"]==0)
          {
           ?>
           <a href="?page=login"><?php $lang=5;$text=lang($lang);print $text;?></a>
           <?php
          }
        if($_SESSION["login"]==1)
          {
           $lang=113;$text=lang($lang);print $text;
           print ': '.$_SESSION["nick"].' ';
           print '<a href="?page=user_start">';$lang=6;$text=lang($lang);print $text;print '</a> ';
           print '<a href="?page=board">';$lang=4;$text=lang($lang);print $text;print '</a> ';
           print '<a href="?page='.$get_page.'&logout=1">';$lang=115;$text=lang($lang);print $text; print '</a>';
          }
        ?>
     </div>
     <div style="position:relative; width:800px;height:200px; background:url(images/neu_3.png);">
        &nbsp;
     </div>//leere zeile nach diesem div!
     <div style="position:relative; width:800px; background-image:url(images/neu_4.png); background-repeat:repeat-y;">
        <div style="position:relative; margin-left:20px;margin-top:20px;margin-right:20px;margin-bottom:20px; width:760px; text-align:left;">
           <?php
           //auswahl der seite die includet werden soll
           $get_page=secure($_GET["page"]);
           if($get_page=='start' OR $get_page=='')
             {
              $get_page='start';
             }
           if(file_exists('pages/'.$get_page.'.php'))
             {
              include('pages/'.$get_page.'.php');
             }
           else{include("error.php");}
           ?>
        </div>
     </div>//leere zeile nach diesem div!
     <div style="position:relative; width:800px;height:150px; background:url(images/neu_5.png);">
        &nbsp;
     </div>
     <div style="position:relative; width:800px;height:200px; background:url(images/neu_6.png); text-align:center;">
        <?php
        $sql_select="SELECT ipadress,browser,date FROM log_counter";
        $number=mysql_num_rows(mysql_query($sql_select));
        $today = date("Y-m-d");
        $sql_select2="SELECT ipadress,browser,date FROM log_counter WHERE datetime LIKE '".$today."%'";
        $number2=mysql_num_rows(mysql_query($sql_select2));
        ?>
        <table style="position:relative; top:50px;">
           <tr>
              <td style="text-align:left;"><?php $lang=106;$text=lang($lang);print $text;?>:</td>
              <td><?php print $number;?></td>
           </tr>
           <tr>
              <td style="text-align:left;"><?php $lang=107;$text=lang($lang);print $text;?>:</td>
              <td><?php print $number2;?></td>
           </tr>
        </table>
     </div>
  </div>


</body>
</html>

Wenn man per CSS (border-style:solid) Rahmen um die div's legt, dann ist das Problem weg.
Aber das ist ja eigentlich nicht die wünschenswerte Lösung mit schwarzen Streifen im Design.

Mir kam gerade noch eine Idee. Ich hab marin-top auf -70px gesetzt und margin-bottom auf 0px. Damit wäre das Problem behoben. Allerdings meine ich erst zuletzt etwas gelesen zu haben, dass negative Werte nicht so optmial sein sollen. Stimmt das bzw gibt es eine bessere lösung?

Asipak · 29.12.2010, 16:17

Zitat:

nicht die wünschenswerte Lösung mit schwarzen Streifen im Design.

"Streifen" müssen ja nicht schwarz sein.

Aber das eigentliche Problem stellst du am besten mit Firebug fest.

Zitat:

Der Validator hat zwar ein paar Fehler gefunden, die dürften damit aber nichts zu tun haben.

Das ist oft genug ein Irrtum.

Der Gamer · 29.12.2010, 17:04

Ah Firebug war ein guter Tipp.

Das <h1></h1> welches in jeder Datei, die includet wird, ganz am Anfang steht war schuld. Der Platz der über und unter der Überschrift frei gelassen wird hat dafür gesorgt, dass die leeren Zeilen entstanden. Wenn ein Rahmen drum rum lag, hat der das wohl verhindert.

Nunja, ich hab <h1> durch ein <font> mit entsprechenden Angaben ersetzt. So gehts. Damit fallen auch die negativen margin-Werte weg.

Vielen Dank für die Hilfe euch beiden und nen guten Rutsch

Asipak · 29.12.2010, 17:37

Zitat:

Nunja, ich hab <h1> durch ein <font> mit entsprechenden Angaben ersetzt. So gehts.

HTML funktioniert anders. Es zeichnet Inhalte aus - nicht mehr und nicht weniger. Für die Gestaltung ist CSS zuständig. Damit kannst du Innen-, Außenabstände oder Rahmen beliebig anpassen. Einfach ein anderes Tag zu verwenden und zu meinen, dass damit das Problem gelöst sei, zeigt nur, dass du HTML nicht kapiert hast.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

28.12.2010, 22:48
Der Gamer Neuer Benutzer Registriert seit: 23.01.2010 Beiträge: 12 PHP-Kenntnisse: Anfänger	[Erledigt] Designprobleme Hallo zusammen, ich hätte da eine Frage. Ich versuche gerade ein Design zu bauen. Hier mal drei provisorische Bilder davon: Bild 1 Bild 2 Bild 3 Das 1. sowie das 3. Bild werden nur einmal gebraucht. Das mittlere Bild soll so oft eingefügt bzw. in der Höhe gestreckt werden, wie der Text lang ist, der sich im weißen Feld befindet. Dabei soll das Design in einer index.php landen und ins weiße Feld soll eine weitere php-Datei includet werden. Hätte ich nur einen einfachen Text, würde ich die Zeichen zählen und nach X Zeichen einfach ein weiteres Mal das zweite Bild anhängen. Da hier aber eine php-Datei includet wird, bin ich mir nicht sicher wie ich das lösen soll. Einfach Zeichen zählen dürfte nicht funktionieren, da die Datei die includet wird ja sowohl Bilder als auch Tabellen/Divs enthalten kann. Zwar könnte man alle html-Tags entfernen, allerdings würde dann die vorgegebene Höhe einer Tabelle beispielsweise nicht berücksichtig. Vielleicht habe ich ja einfach ein Brett vor dem Kopf und sehe die einfachste Lösung nicht, dennoch wäre ich für jeden Tipp dankbar. Mfg der Gamer


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

28.12.2010, 22:54
Trainmaster Erfahrener Benutzer Registriert seit: 25.05.2010 Beiträge: 852 PHP-Kenntnisse: Anfänger	Das hat nichts mit PHP zu tun, sondern CSS: 1px hohe Grafik als Hintergrund und repeat-y.

29.12.2010, 13:12
Der Gamer Neuer Benutzer Registriert seit: 23.01.2010 Beiträge: 12 PHP-Kenntnisse: Anfänger	Wenn doch nur alles so einfach wäre... Funktioniert soweit perfekt, vielen Dank Ein kleines Problem hab ich jetzt noch. Vor und nach dem div befindet sich jetzt jeweils eine leere Zeile. Ich versteh nich ganz, wo die herkommen. Hängt das pauschal mit dem repeat zusammen oder ist der Fehler wo anders im Code? Der Validator (http://validator.w3.org/) hat zwar ein paar Fehler gefunden, die dürften damit aber nichts zu tun haben. PHP-Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Projekt</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body> <div style="position:absolute; top:30px;right:30px;"> <?php //sprachwahl $get_page=secure($_GET["page"]); print '<a href="?page='.$get_page.'&lang=de_DE">DE</a>'; print ' / '; print '<a href="?page='.$get_page.'&lang=en_GB">EN</a>'; ?> </div> <div style="height:100%;width:800px; margin:auto;"> <div style="position:relative; width:800px;height:200px; background:url(images/neu_1.png);">   </div> <div style="position:relative; width:800px;height:50px; background:url(images/neu_2.png); text-align:center;"> <a href="?page=start"><?php $lang=1;$text=lang($lang);print $text;?></a> <a href="?page=contact"><?php $lang=2;$text=lang($lang);print $text;?></a> <a href="?page=guestbook"><?php $lang=3;$text=lang($lang);print $text;?></a> <?php //menu if($_SESSION["login"]==0) { ?> <a href="?page=login"><?php $lang=5;$text=lang($lang);print $text;?></a> <?php } if($_SESSION["login"]==1) { $lang=113;$text=lang($lang);print $text; print ': '.$_SESSION["nick"].' '; print '<a href="?page=user_start">';$lang=6;$text=lang($lang);print $text;print '</a> '; print '<a href="?page=board">';$lang=4;$text=lang($lang);print $text;print '</a> '; print '<a href="?page='.$get_page.'&logout=1">';$lang=115;$text=lang($lang);print $text; print '</a>'; } ?> </div> <div style="position:relative; width:800px;height:200px; background:url(images/neu_3.png);">   </div>//leere zeile nach diesem div! <div style="position:relative; width:800px; background-image:url(images/neu_4.png); background-repeat:repeat-y;"> <div style="position:relative; margin-left:20px;margin-top:20px;margin-right:20px;margin-bottom:20px; width:760px; text-align:left;"> <?php //auswahl der seite die includet werden soll $get_page=secure($_GET["page"]); if($get_page=='start' OR $get_page=='') { $get_page='start'; } if(file_exists('pages/'.$get_page.'.php')) { include('pages/'.$get_page.'.php'); } else{include("error.php");} ?> </div> </div>//leere zeile nach diesem div! <div style="position:relative; width:800px;height:150px; background:url(images/neu_5.png);">   </div> <div style="position:relative; width:800px;height:200px; background:url(images/neu_6.png); text-align:center;"> <?php $sql_select="SELECT ipadress,browser,date FROM log_counter"; $number=mysql_num_rows(mysql_query($sql_select)); $today = date("Y-m-d"); $sql_select2="SELECT ipadress,browser,date FROM log_counter WHERE datetime LIKE '".$today."%'"; $number2=mysql_num_rows(mysql_query($sql_select2)); ?> <table style="position:relative; top:50px;"> <tr> <td style="text-align:left;"><?php $lang=106;$text=lang($lang);print $text;?>:</td> <td><?php print $number;?></td> </tr> <tr> <td style="text-align:left;"><?php $lang=107;$text=lang($lang);print $text;?>:</td> <td><?php print $number2;?></td> </tr> </table> </div> </div> </body> </html> Wenn man per CSS (border-style:solid) Rahmen um die div's legt, dann ist das Problem weg. Aber das ist ja eigentlich nicht die wünschenswerte Lösung mit schwarzen Streifen im Design. Mir kam gerade noch eine Idee. Ich hab marin-top auf -70px gesetzt und margin-bottom auf 0px. Damit wäre das Problem behoben. Allerdings meine ich erst zuletzt etwas gelesen zu haben, dass negative Werte nicht so optmial sein sollen. Stimmt das bzw gibt es eine bessere lösung? Geändert von Der Gamer (29.12.2010 um 15:55 Uhr).

29.12.2010, 17:04
Der Gamer Neuer Benutzer Registriert seit: 23.01.2010 Beiträge: 12 PHP-Kenntnisse: Anfänger	Ah Firebug war ein guter Tipp. Das <h1></h1> welches in jeder Datei, die includet wird, ganz am Anfang steht war schuld. Der Platz der über und unter der Überschrift frei gelassen wird hat dafür gesorgt, dass die leeren Zeilen entstanden. Wenn ein Rahmen drum rum lag, hat der das wohl verhindert. Nunja, ich hab <h1> durch ein <font> mit entsprechenden Angaben ersetzt. So gehts. Damit fallen auch die negativen margin-Werte weg. Vielen Dank für die Hilfe euch beiden und nen guten Rutsch Geändert von Der Gamer (29.12.2010 um 17:11 Uhr).