HTML -->Header problem!

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • HTML -->Header problem!

    Hallo Leute,
    Ich habe folgendes Problem ich arbeite mit Dreamweaver CS5 und will die letzten Bilder des Header direkt am Header anordnen aber sie sind immer unterhalb des Headers.
    Bild: [Blockierte Grafik: http://www.abload.de/thumb/unbenannt-1xm16.jpg]

    Code:
    <table width="0" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <th scope="col"><img src="Bilder/cellspac3r_01.jpg" width="326" height="173"></th>
    <th scope="col"><img src="Bilder/cellspac3r_02.jpg" width="377" height="173"></th>
    </tr>
    </table>

    <table width="0" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <th scope="col"><img src="Bilder/cellspac3r_03.jpg" width="321" height="52"></th>
    </tr>
    <tr>
    <td><img src="Bilder/cellspac3r_04.jpg" width="14" height="32"><img src="Bilder/cellspac3r_05.jpg" width="32" height="32"><img src="Bilder/cellspac3r_06.jpg" width="8" height="32"><img src="Bilder/cellspac3r_07.jpg" width="32" height="32"><img src="Bilder/cellspac3r_08.jpg" width="8" height="32"><img src="Bilder/cellspac3r_09.jpg" width="32" height="32"><img src="Bilder/cellspac3r_10.jpg" width="195" height="32"></td>
    </tr>
    <tr>
    <td><img src="Bilder/cellspac3r_11.jpg" width="321" height="89"></td>
    </tr>
    </table>

    Ich wäre sehr erfreut wenn einer von euch mir helfen kann!

    Mit freundlichen Grüßen,
    Cellspac3r.

  • Quellcode

    1. <table width="0" border="0" cellpadding="0" cellspacing="0">
    2. <tr>
    3. <th scope="col"><img src="Bilder/cellspac3r_01.jpg" width="326" height="173"></th>
    4. <th scope="col"><img src="Bilder/cellspac3r_02.jpg" width="377" height="173"></th>
    5. </tr>
    6. </table>
    8. <table width="0" border="0" cellpadding="0" cellspacing="0">
    9. <tr>
    10. <th scope="col"><img src="Bilder/cellspac3r_03.jpg" width="321" height="52"></th>
    11. </tr>
    12. <tr>
    13. <td><img src="Bilder/cellspac3r_04.jpg" width="14" height="32"><img src="Bilder/cellspac3r_05.jpg" width="32" height="32"><img src="Bilder/cellspac3r_06.jpg" width="8" height="32"><img src="Bilder/cellspac3r_07.jpg" width="32" height="32"><img src="Bilder/cellspac3r_08.jpg" width="8" height="32"><img src="Bilder/cellspac3r_09.jpg" width="32" height="32"><img src="Bilder/cellspac3r_10.jpg" width="195" height="32"></td>
    14. <td><img src="Bilder/cellspac3r_11.jpg" width="321" height="89"></td>
    15. </tr>
    17. </table>
    Alles anzeigen

    So müsste es passen. Du musst anstatt einer neuen Table-Row einfach eine zweite Spalte (Table Data) angeben. Ich würde auch mit Tabellen Backgrounds arbeiten, mit Bildern kannst du dort nichts mehr drüberlegen. Tabellen-Designs sind aber sowieso böse.
    ~ mfg SeBa

    Ich beantworte keine PMs zu Computer-/Programmierproblemen. Bitte wendet euch an das entsprechende Forum.

    [Blockierte Grafik: http://i.creativecommons.org/l/by-sa/3.0/80x15.png]

  • SeBa Vielendank dir Kollege habe zwar eben nach dem problem gesucht und gefunden nun habe ich folgendes großes problem xD
    [Blockierte Grafik: http://www.abload.de/thumb/problem-2umae.jpg]
    Die auflösung ist zu klein..was könnte ich dagegen machen du kannst mir bestimmt helfen! könnten wir nicht eine große website erstellen und mit html irgendwie auf die auflösung des surfers anpassen?

    Mit freundlichen Grüßen,
    Cellspac3r.

  • So ich habe die seiten auflösung auf 1280x1024 gemacht nun steht bisschen der seite auf der rechten seite ab.
    [Blockierte Grafik: http://www.abload.de/thumb/unbenannt-3q5u5.jpg] wie mache ich es genau in der mitte ds ich nicht hin und her scrollen muss um die ganze zeit anzuschauen?

    Quellcode

    1. <title>Cellspac3r - iDevice Paradise</title>
    2. <script type="text/javascript">
    3. function MM_swapImgRestore() { //v3.0
    4. var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    5. }
    6. function MM_preloadImages() { //v3.0
    7. var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    8. var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    9. if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    10. }
    12. function MM_findObj(n, d) { //v4.01
    13. var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    14. d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    15. if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    16. for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    17. if(!x && d.getElementById) x=d.getElementById(n); return x;
    18. }
    20. function MM_swapImage() { //v3.0
    21. var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    22. if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    23. }
    24. </script>
    25. <body onLoad="MM_preloadImages('Bilder/rss_over.jpg','Bilder/facebook_over.jpg')"><table width="0" border="0" cellpadding="0" cellspacing="0">
    26. <tr>
    27. <th scope="col"><img src="Bilder/index_01.jpg" width="33" height="299"></th>
    28. <th scope="col"><img src="Bilder/index_02.jpg" width="395" height="299"></th>
    29. <th scope="col"><img src="Bilder/header.jpg" width="317" height="299"></th>
    30. <th scope="col"><table width="100" border="0" cellpadding="0" cellspacing="0">
    31. <tr>
    32. <th scope="col"><img src="Bilder/index_04.jpg" width="481" height="72"></th>
    33. </tr>
    34. <tr>
    35. <td><a href="http://twitter.com/cellspac3r" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Twitter','','Bilder/twitter_over.jpg',1)"><img src="Bilder/twitter.jpg" name="Twitter" width="32" height="32" border="0"></a><img src="Bilder/index_07.jpg" width="8" height="32"><a href="http://www.facebook.com/pages/Cellspac3r-iDevice-Paradise/121936307872965" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Facebook','','Bilder/facebook_over.jpg',1)"><img src="Bilder/facebook.jpg" name="Facebook" width="32" height="32" border="0"></a><img src="Bilder/index_09.jpg" width="8" height="32"><a href="http://www.google.de/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Rss','','Bilder/rss_over.jpg',1)"><img src="Bilder/rss.jpg" name="Rss" width="32" height="32" border="0"></a><img src="Bilder/index_11.jpg" width="369" height="32"></td>
    36. </tr>
    37. <tr>
    38. <td><img src="Bilder/index_12.jpg" width="481" height="195"></td>
    39. </tr>
    40. </table></th>
    41. <th scope="col"><img src="file:///C|/Users/Ich/Desktop/Cellspac3r/Bilder/index_05.jpg" width="395" height="299"></th>
    42. </table>
    Alles anzeigen


    Mit freundlichen Grüßen,
    Cellspac3r.

  • Du musst die absulten Zahlenangaben rausnehmen. Jedoch ist das was du dir da überlegst recht kompliziert, denn jeder Benutzer hat im Zweifelsfall eine andere Fensterbreite. Wenn es also bei dir passt, muss es nicht auch bei anderen passen. Die einzige Chance die du hast ist stuachen und strecken mit relativen angaben. Stauchen hat den Nachteil, du überträgst unnötig große Bilder und Strecken macht die Bildqualität schlechter.

    @n0x-f0x: Ich glaueb die Wolken sind genau KEIN Hintergrund, weswegen ich das schrieb.
    ~ mfg SeBa

    Ich beantworte keine PMs zu Computer-/Programmierproblemen. Bitte wendet euch an das entsprechende Forum.

    [Blockierte Grafik: http://i.creativecommons.org/l/by-sa/3.0/80x15.png]

  • SeBa schrieb:

    Du musst die absulten Zahlenangaben rausnehmen. Jedoch ist das was du dir da überlegst recht kompliziert, denn jeder Benutzer hat im Zweifelsfall eine andere Fensterbreite. Wenn es also bei dir passt, muss es nicht auch bei anderen passen. Die einzige Chance die du hast ist stuachen und strecken mit relativen angaben. Stauchen hat den Nachteil, du überträgst unnötig große Bilder und Strecken macht die Bildqualität schlechter.

    @n0x-f0x: Ich glaueb die Wolken sind genau KEIN Hintergrund, weswegen ich das schrieb.


    Wo kann ich die absoluten Zahlenangaben rausnehmen bitte hilf mir! Hast dann auch was großes bei mir gut, verprochen!

    Mit freundlichen Grüßen,
    BigBrain.

  • Hallo zusammen,

    könnte man das Problem nicht auch mit einem Stylesheet umgehen?
    Ich habe meine index.html und ein stylesheet, in diesem habe ich einen wrapper, mit dem ich das Format fetlegen kann z.B. 1024 X 768.

    Bsp. HTML

    Quellcode

    1. <html>
    2. <head>
    3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    4. <link rel="stylesheet" type="text/css" href="css/meine styles.css" />
    6. <title>xyz</title>
    7. </head>
    8. <body>
    9. <div id="wrapper">
    10. <div id="header">
    11. <div id="socials-icons">
    13. <a href="#"><img src="images/icon01.png" height="48" width="48" class="icon01" /></a>
    14. <a href="#"><img src="images/icon02.png" height="48" width="48" class="icon02" /></a>
    15. <a href="#"><img src="images/icon03.png" height="48" width="48" class="icon03" /></a>
    16. <a href="#"><img src="images/icon04.png" height="48" width="48" class="icon04" /></a>
    17. </div>
    19. <div id="logo">
    20. </div>
    22. </div><
    23. </div>
    26. </body>
    27. </html>
    Alles anzeigen

    Bsp. CSS

    Quellcode

    1. @charset "utf-8";
    2. body, html, div, img, td {
    4. margin: 0;
    5. padding: 0;
    6. border: 0;
    7. outline: none;
    8. }
    10. body {
    12. font-family: Arial, Helvetica, sans-serif;
    13. font-size: 12px;
    14. color: #fff;
    15. background: #FFF repeat-x;
    16. }
    18. #wrapper {
    20. margin: 0 auto;
    21. width: 955px; /*1024 X 768*/
    22. }
    24. #header {
    26. position: relative;
    27. }
    29. #logo {
    31. margin-top: 100px;
    32. }
    34. #socials-icons {
    36. float: right;
    37. margin-top: -80px;
    38. margin-right: 60px;
    39. }
    Alles anzeigen

    Im Stylesheet unter "social-icons" kann man den Abstand der icons zum Rand hin festlegen mit "float" an welcher Seite, im Bsp. rechts. Mit "magin-top", den Abstand zur Oberseite und mit "magin-right", den Abstand zum rechten Rand.
    Oder habe ich das Problem nicht verstanden :?:
    |Pinguine können zwar nicht fliegen - aber auch nicht abstürzen!|
    |MfG >>>js.spaceher0<<< |

  • Pion schrieb:

    Lerne richtiges CSS, lerne mit jeden Browser umzugehen
    Empfehle kein Tabellenlayout, schande auf dein Haupt
    Sag dem IE er soll CSS lernen ;)
    Mit jedem Browser umgehen heißt für mich für jeden Browser ein eigenes design schreiben was bei nem Netscape kompliziert werden kann...
    Er arbeitet mit DreamWeaver, der Designt mit Tabellen... Wenn du dem ordentliche Divs beibringst empfehle ich auch divs, aber bis der IE und die GeckoEngine did DIV's gleich interpretiern kann man ungestört Tabellendesigns nutzen. Gerade wenn man etwas nicht mit absoluten Zahlen haben will sollte man das mit Tabellen umsetzten...

    Aber schreib mir doch bitte ne PN wieso ich auf keinen Fall mit einer Tabelle Designen sollte, bis auf das es "Out" und "Oldschool" ist. Aber das ist hier echt Off Topic!
    </nobrain>

  • Najo das gehört dich sogar ganz gut hierher, warum du, der Treadersteller nicht mit Tabellen designen sollt findet ihr wohl wirklich genug Infos unter Google

    Lasst euren Browser nicht in den Quircksmodus umkippen, dass ist wichtig vorallem beim IE

    mfg
    Output Buffering :)

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Pion ()