ComputerBase Menü
Aktuelles

[HTML] Verhindern von Tabellenverschiebungen?

PC Freak

PC Freak

Ensign
Registriert
Nov. 2003
Beiträge
233
hi ;->

Ich habe bei mir auf der Homepage heute ein newsscript eingebaut und dann natürlich das Design der News an meine Homepage angepasst, so das die news folgendermassen aussehen (gekürzt)

prob_pic1.jpg


Wenn man nun aber die ganze Neuigkeit lesen will und auf read more klickt verschiebt sich das linke Bild natürlich nach unten ... wie kann ich das verhindern und einstellen, dass das Bild auf der linken seite auf der gleichen höhe bleiben soll wie bei der Vorschau ????

prob_pic2.jpg


Hier der Code des Newsscript Templates:

HTML: 
<div id="main">
  <div id="main_big_center">
    <div class="box ">
      <div class="boxcontent">
        <table cellSpacing="0" cellPadding="0" width="479" border="0">
          <tr>
            <td width="535">
            <table cellSpacing="0" cellPadding="0" width="212" border="0">
              <tr>
                <td width="535">
                <table height="238" cellSpacing="0" cellPadding="0" width="162" border="0">
                  <tr>
                    <td width="574" background="http://pcfreak.funpic.de/template%20Dateien/fb-top.gif" height="20">
                    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="105%" id="AutoNumber7">
                      <tr>
                        <td width="68%"><font color="#000000"><b>
                        <font face="Verdana" size="1">  {newstitel}</font></b></font></td>
                        <td width="32%"><b>
                        <font color="#000000" face="Verdana" size="1">                      </font></b></td>
                      </tr>
                    </table>
                    </td>
                  </tr>
                  <tr>
                    <td width="574" background="http://pcfreak.funpic.de/template%20Dateien/fb-kachel.gif" height="48">
                    <table cellSpacing="0" cellPadding="0" width="633" border="0">
                      <tr>
                        <td vAlign="top" align="left" width="589">
                        <table id="AutoNumber2" style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="128" cellSpacing="0" cellPadding="0" width="105%" border="0">
                          <tr>
                            <span style="FONT-WEIGHT: 100; FONT-FAMILY: Verdana">
                            <td width="25%" height="1"><center>
                            <table id="AutoNumber6" style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="105" cellSpacing="0" cellPadding="0" width="87%" border="1">
                              <tr>
                                <td width="50%" bgColor="#ffffff" height="105">
                                <p align="center">
                            <span style="FONT-WEIGHT: 100; FONT-FAMILY: Verdana">
                                <font size="1" face="Verdana">
                                {icon}</font></span></p>
                                <p align="center"><font size="1" face="Verdana">
                                {kommentare}</font></td>
                              </tr>
                            </table>
                            </center>
                            <p align="center"><b>
                        <font color="#000000" face="Verdana" size="1"> </font></b><span style="FONT-WEIGHT: 100; FONT-FAMILY: Verdana"><font color="#000000" face="Verdana" size="1">({datum})</font></span></p>
                            <p align="center">
                            <font face="Verdana" size="1" color="#000000">
                            <font color="#336699">{link}
                            </font></font></p>
                            <p> </td>
                            </span>
                            <td width="75%" height="1">
                            <div id="main">
                              <div id="main_big_center">
                                <div class="box ">
                                  <div class="boxcontent">
                                    <div id="main">
                                      <div id="main_big_center">
                                        <div class="box ">
                                          <div class="boxcontent">
                                            <div id="main0">
                                              <div id="main_big_center0">
                                                <div class="box ">
                                                  <div class="boxcontent">
                                                    <font size="1" face="Verdana">
                                                    {news}</font></div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            </td>
                          </tr>
                        </table>
                        </td>
                      </tr>
                    </table>
                    </td>
                  </tr>
                  <tr>
                    <td width="574" height="3">
                    <img src="http://pcfreak.funpic.de/template%20Dateien/under.gif" border="0" width="633" height="20">
                    <font color="#FFFFFF" size="1" face="Verdana">-</font></td>
                  </tr>
                </table>
                </td>
              </tr>
            </table>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

Vielen Dank bin nicht grad der beste in programmieren usw. :D
 
Zuletzt bearbeitet von einem Moderator: (Bei HTML bitte das HTML- statt des CODE-Tag verwenden)
Re: Verhindern von Tabellenverschiebungen ?

versuchs mal auf der linken seite mit zwei tabellen... zeilen... eine wo das bild drin ist und eine die leer ist. die ohne bild deklarierst auf 100% oder so... praktischt drückt die dann die andere immer nach oben... glaub ich, ;)

Probieren geht über Studieren...

Cheers

Pacco

----------------

Okay ich bekomms net in so ein tolles Fenster wie du, aber nimm das *g*... wie auf ner Müllkippe hier ;)

HTML: 
<div id="main">  <div id="main_big_center">  <div class="box ">  <div class="boxcontent">  <table cellSpacing="0" cellPadding="0" width="479" border="0">  <tr>  <td width="535">  <table cellSpacing="0" cellPadding="0" width="212" border="0">  <tr>  <td width="535">  <table height="238" cellSpacing="0" cellPadding="0" width="162" border="0">  <tr>  <td width="574" background="http://pcfreak.funpic.de/template%20Dateien/fb-top.gif" height="20">  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="105%" id="AutoNumber7">  <tr>  <td width="68%"><font color="#000000"><b>  <font face="Verdana" size="1"> {newstitel}</font></b></font></td>  <td width="32%">&nbsp;</td>  
</tr>  </table>  </td>  </tr>  <tr>  <td width="574" background="http://pcfreak.funpic.de/template%20Dateien/fb-kachel.gif" height="48">  <table cellSpacing="0" cellPadding="0" width="633" border="0">  <tr>  <td vAlign="top" align="left" width="589">  <table id="AutoNumber2" style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="128" cellSpacing="0" cellPadding="0" width="105%" border="0">  <tr>  <span style="FONT-WEIGHT: 100; FONT-FAMILY: Verdana">  <td height="1"><center>  <table id="AutoNumber6" style="BORDER-COLLAPSE: collapse" borderColor="#111111" height="105" cellSpacing="0" cellPadding="0" width="87%" border="1">  <tr>  <td bgColor="#ffffff" height="105">  <p align="center">  <span style="FONT-WEIGHT: 100; FONT-FAMILY: Verdana">  <font size="1" face="Verdana">  {icon}</font></span></p>  <p align="center"><font size="1" face="Verdana">  {kommentare}</font></td>  </tr>  </table>  
  
</center>  <p> </td>  </span>  <td width="72%" rowspan="2">  <div id="main">  <div id="main_big_center">  <div class="box ">  <div class="boxcontent">  <div id="main">  <div id="main_big_center">  <div class="box ">  <div class="boxcontent">  <div id="main0">  <div id="main_big_center0">  <div class="box ">  <div class="boxcontent">  <font size="1" face="Verdana">  {news}</font></div>  </div>  </div>  </div>  </div>  </div>  </div>  </div>  </div>  </div>  </div>  </div>  </td>  </tr>
                                  <tr>
                                    <td width="28%" height="100%"><span style="FONT-WEIGHT: 100; FONT-FAMILY: Verdana">
                                      <p align="center"><span style="FONT-WEIGHT: 100; FONT-FAMILY: Verdana"><font color="#000000" face="Verdana" size="1">({datum})</font></span></p>
                                      <p align="center"> <font face="Verdana" size="1" color="#336699"> {link} </font></p>
                                    </span></td>
                                  </tr>
</table>  </td>  </tr>  </table>  </td>  </tr>  <tr>  <td width="574" height="3">  <img src="http://pcfreak.funpic.de/template%20Dateien/under.gif" border="0" width="633" height="20">  <font color="#FFFFFF" size="1" face="Verdana">-</font></td>  </tr>  </table>  </td>  </tr>  </table>  </td>  </tr>  </table>  </div>  </div>  </div> </div>
 
Zuletzt bearbeitet von einem Moderator:
Re: Verhindern von Tabellenverschiebungen ?

habs mal eingebaut aber klappt auch nicht :rolleyes:

trotzdem vielen dank schonmal

hat noch jemand eine idee ??? :)

PS: @ PaccoDD um den code in so ein fenster wie ich zu bekommen einfach folgendes eingeben ["HTML]hier der html code[/HTML"] ohne "
 
Re: Verhindern von Tabellenverschiebungen ?

Du könntest es ohne Tabelle machen und zwei divs per float:left nebeneinander setzen.
Außerdem wäre es wohl auch kein Fehler die Seite etwas standardkonformer zu machen...
 
Re: Verhindern von Tabellenverschiebungen ?

jop standardkomformer muss ich die sowieso noch machen

bin auch schon dabei deshalb hatte ich auch in einer der letzten Threads nach einem Tool gefragt mit dem man gleich mehrere HTML seiten gleichzeitig verändern kann ;-> hab auch ein tool gefunden und klappt super

hab mal nach divs per float:left gegooglet und auch nen paar code gefunden aber irgendwie klappt es nicht wirklich :(
 
Re: Verhindern von Tabellenverschiebungen ?

Habe ne Frage er nutzt dort {link} usw was hat das zu bedeuten?
 
Re: Verhindern von Tabellenverschiebungen ?

das sind diese komischen variablen oder wie die heissen, die die news auslesen aus der mysql datenbank usw.
 
Re: Verhindern von Tabellenverschiebungen ?

hab mal versucht das newstemplate in divs umzucoden, jedoch seiht das ergebnis nicht grade gut aus:

http://pcfreak.pc.funpic.de/newstest.htm

1. der zeilenabstand ist ziemlich groß
2. Die News gehen nicht ganz bis zu rechten seite durch
3. ganz unten nach dem Footer (under.gif) fängt der hintergrund wieder an etc.

wie kann ich die fehler noch behen ? bin nicht grad der beste im coden, eher grad dabei zu lernen usw.
 
Re: Verhindern von Tabellenverschiebungen ?

Ich hab's mal versucht mit divs zu machen, sieht jetzt so auf die Schnelle natürlich nicht genau so aus wie dein "Tabellen-Original", aber ich denke das kannst du dann ja selber vollends anpassen.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 <head>
  <title>3-col layout via CSS</title>
	<style type="text/css">
	 /* <![CDATA[ */
		div.top {background-image:url(fb-top.gif);width:633px;height:20px;}
		div.bottom {background-image:url(under.gif);width:633px;height:20px;}
		div.newsbody {background-image:url(fb-kachel.gif);width:633px;}
		div.newslinks {width:133px;float:left;text-align:center;}
		div.newsrechts {width:450px;float:left;padding:5px;font-size:0.8em;}
		div.icon {width:100px;height:100px;border:1px solid black;background-color:white;margin:auto;margin-top:5px;}
   /* ]]> */
  </style>
 </head>
 <body>
  <div>
   <div class='top'>
    {newstitel}
   </div>
   <div class='newsbody'>
    <div class='newslinks'>
     <div class='icon'>
      <p>{icon}</p>
      <p>{kommentare}</p>
     </div>
     <p>({datum})</p>
     <p>{link}</p>
    </div>
    <div class='newsrechts'>
   	 Die ursprünglich für den OEM-Markt vorgesehene ATi Radeon X800 SE 
     wird nun auch im Retail-Markt erhältlich sein. Nachdem die X800 SE 
     bislang von Dell für die eigenen Komplettrechner produzierte, 
     steigen nun auch Sapphire und andere namhafte Hersteller ein. Die 
     X800 SE hat einen um 50 MHz reduzierten GPU-Takt gegenüber der X800 
     Pro und taktet mit 425 MHz; die 128 MB bzw. 256 MB 
     GDDR3-Grafikspeicher der Karte sind mit 256 bit angebunden und 
     werden mit realen 400 MHz (effektiv 800 MHz) betrieben. Die ersten, 
     bei Händlern aufgetauchten Karten sind jedoch mit Samsung 
     K4J55323QF-GC20-Chips bestückt, die ganz und gar für einen Takt von 
     500 MHz ausgelegt wurden. Da Samsung derzeit keine langsameren 
     Speicherchips im Programm hat, sollte hier, wenn auch weiterhin auf 
     2,0 ns-Chips gesetzt wird, großes Overclocking-Potential für den 
     Speicher bestehen. Die sechs Vertex Shader der X800-Serie werden 
     voll erhalten bleiben, nur die Pixel Shader werden von 12 (Pro) bzw. 
     16 (XT) auf acht reduziert. Somit dürfte die Leistung auf Niveau der 
     GeForce 6800 LE liegen. Wann mit der Verfügbarkeit der Karten in 
     Deutschland zu rechen ist, bleibt derzeit noch unklar. Preislich 
     wird die Karte mit der 6800 LE konkurrieren, deren empfohlener 
     Verkaufspreis bei 299 Euro liegt. In Japan wird die Karte mit AGP 
     derzeit für 39,770 Yen, also umgerechnet ca. 292 Euro, angeboten; 
     PCI Express-Varianten, wie sie bei Dell eingesetzt wer<a class="cnnews" href="?&amp;news_id=80">[ 
     read more ]</a>
    </div>
    <br style='clear:both' />
   </div>
  <div class='bottom'>bla</div>
  </div>
 </body>
</html>
 
Re: Verhindern von Tabellenverschiebungen ?

vielen dank habs mal vervollständigt, so das es so aussieht http://pcfreak.pc.funpic.de/111111.htm

wenn ich den code jz jedoch in den newsscript unter template einfüg werden die news vollkommen falsch auf der Homepage dargestellt ...

oben icon, da drunter steht kommentare, dann das datum und da drunter die nachricht usw.

komisch
 
Re: Verhindern von Tabellenverschiebungen ?

PC Freak schrieb:
vielen dank habs mal vervollständigt, so das es so aussieht http://pcfreak.pc.funpic.de/111111.htm
Zum Vergrößern anklicken....
Das sieht ja katastrophal aus (vom Code her), sind diese Unmengen an geschachtelten divs, Tabellen und font-Tags denn wirklich nötig? Mal ganz abgesehen davon ist das auch kein standardkonformer Code.

PC Freak schrieb:
wenn ich den code jz jedoch in den newsscript unter template einfüg werden die news vollkommen falsch auf der Homepage dargestellt ...

oben icon, da drunter steht kommentare, dann das datum und da drunter die nachricht usw.

komisch
Zum Vergrößern anklicken....
Ohne einen Link zur falsch dargestellten Homepage werde ich dir da nicht weiterhelfen können...
 
Re: Verhindern von Tabellenverschiebungen ?

ohne dass ich jetzt viel über den verunglückten Code sage ... ändere einfach den td-Tag an der Stellle folgendermaßen ab (deine Tabellenversion)

HTML: 
<tr>
    <td width="50%" bgColor="#ffffff" height="105" valign="top">
       <p align="center">
            <span style="FONT-WEIGHT: 100; FONT-FAMILY: Verdana">
               <font size="1" face="Verdana">{icon}</font>
            </span>
        </p>
          <p align="center">
            <font size="1" face="Verdana">{kommentare}</font>
          </p>
     </td>
  </tr>

btw. gleich einen Syntax-Fehler gefixed :o
 
Zuletzt bearbeitet:
Re: Verhindern von Tabellenverschiebungen ?

Oha, hier haben wir ja bereits einige Lösungsvorschläge entdecken können, der beste ist allerdings noch, einfach das Attribut valign in das <tr>-HTMLtag einzufügen und diesem den Wert "top" zuzuweisen.
Sprich: <tr valign="top">

Viel Erfolg weiterhin.

Update
Ups, mein Vorredner hat das bereits erkannt, jedoch in den <td>-Tag eingefügt. Sorry für die Wiederholung, hatte da nicht so d'rauf geachtet.
 
Zuletzt bearbeitet:
Re: Verhindern von Tabellenverschiebungen ?

vielen dank hab den fehler jz durch den <tr valign="top"> Tag gelöst

jetzt muss ich nur noch irgendwie die ganzen unnötigen codes usw. von meiner HP entfernen bzw. bearbeiten usw. Problem: ich kanns nicht wirklich X-D :(

naja wenn ich eine seite mit einem einigermassen guten code habe kann ich die anderen seiten auch mit dem code per software versehen ;) mal schauen was ich so hin bekomme
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

Nicodil
HTML Bulletpoint verschoben (HTML/CSS)
Antworten
7
Aufrufe
758
Fenatics
Fenatics
M
HTML/JS Buch-Konfigurator generiert kein DOCX Referenzfehler "docx is not defined"
Antworten
7
Aufrufe
943
Toaster
Toaster
CyborgBeta
CSS HTML-Tabelle aus DIVs, aber letzte "Zelle" mit auto width?
Antworten
11
Aufrufe
851
floq0r
floq0r
W
CSS: Formatierungsprobleme mit einer Tabelle
Antworten
9
Aufrufe
1.087
Nixdorf
Nixdorf
I
Formatierung simple HTML Tabelle
Antworten
4
Aufrufe
604
ipod86
I
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 187 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz