Tabellenlayout in div geändert

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    Tabellenlayout in div geändert

    Hi,

    ich habe mal meinen ersten Versuch mit css und Div gestartet und habe mein ganzen Layout von Tabellen in div geändert.
    Nun wollte ich mal wissen was man daran noch verbessern könnte wo eventuell was zu viel ist etc etc.
    Die Css Styles sind momentan noch im Quelltext die werden aber noch ausgelagert.
    Auch habe ich noch eine Tabelle benutzt da ich dort das Bild mittig haben wollte.
    Hat leider nicht so ganz funktioniert vielleicht hat jemand ein Tip wie man das mit div machen kann.
    PHP-Code:
    <!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">
    <    head>
    <    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
    <    title>Site mit Css</title>
    <!--
    <    link rel="stylesheet" href="sitecss.css" type="text/css"></link>
    -->
    <    style type="text/css">
    <!--
    body {background-image: url(img/bg.gif); text-align:center;}
    #head
            {
                width: 775px;
                height: 107px;
                margin: 0px;
                padding: 0px;
                vertical-align: top;
                background-color:#990000;
                background-image:url(img/header_ganz.jpg);
                background-repeat:no-repeat;
        }
    #headtext
            {
                display: none;
    }

    .    copyright{
            background-color: #000000;
            color: #FFFFFF;
            font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
            font-size: 9px;
            font-weight: bold;
            text-align: left;
            left: 67px;
            top: 7px;
            position: relative;
    }

    .    copyright a:link{
            background-color: transparent;
            color: #FFFFFF;
            text-decoration: none;
    }

    .    copyright a:visited{
            background-color: transparent;
            color: #FFFFFF;
            text-decoration: none;
    }

    .    copyright a:hover{
            background-color: transparent;
            color: #FFFFFF;
            text-decoration: underline;
    }

    .    copyright a:active{
            background-color: transparent;
            color: #FFFFFF;
            text-decoration: none;
    }


    .    reddotline {
            height: 100%;
            background-image: url(img/reddottedline_bg.gif);
            background-repeat: repeat-y;
    }    


    -->
    </    style>
    </    head>
    <    body>
    <!--     Ausenrahmen -->
    <    div style="position: relative; width:775px;height:auto;min-height:575px; 
    margin: 0px auto 100px auto;text-align:center; padding:0px; 
    background-color:#FFFFFF; border:1px solid #000000; top:15px;"    >


    <!--     Header Anfang -->
    <    h1 id="head">
                <    span id="headtext">Header Text</span>
    </    h1>
    <!--     Header Ende-->

    <!--     Navigation Anfang -->
    <    div id="nav11" style="float:left;width:775px;left:0px; height:33px; 
    background-color:#FFF;"    >
    <    div id="navi_011" style="float:left;width: 244px;height:33px; 
    background-image: url(img/header_r3_c1.jpg); background-repeat:no-repeat;"    ></div>
    <    div id="navi_012" style="float:left;width: 42px;height:33px;  

    background-image: url(img/home.jpg); background-repeat:no-repeat;"    >
    </    div>
    <    div id="navi_013" style="float:left;width: 30px;height:33px;

    background-image: url(img/header_r3_c4.jpg); background-repeat:no-repeat;"    ></div>

    <    div id="navi_014" style="float:left;width: 55px;height:33px; 

    background-image: url(img/ximg1.jpg); background-repeat:no-repeat;"    ></div>
    <    div id="navi_015" style="float:left;width: 33px;height:33px;  
    background-image: url(img/header_r3_c6.jpg); background-repeat:no-repeat;"    ></div>

    <    div id="navi_016" style="float:left;width: 50px;height:33px;

     background-image: url(img/ximg2.jpg); background-repeat:no-repeat;"    ></div>
    <    div id="navi_017" style="float:left;width: 31px;height:33px;  
    background-image: url(img/header_r3_c8.jpg); 
    background-repeat:no-repeat;"    ></div>

    <    div id="navi_018" style="float:left;width: 51px;height:33px;  
    background-image: url(img/ximg3.jpg); background-repeat:no-repeat;"    >
    </    div>
    <    div id="navi_019" style="float:left;width: 31px;height:33px;  
    background-image: url(img/header_r3_c11.jpg); 
    background-repeat:no-repeat;"    ></div>

    <    div id="navi_0110" style="float:left;width: 62px;height:33px;  
    background-image: url(img/header_r3_c12.jpg); 
    background-repeat:no-repeat;"    ></div>
    <    div id="navi_0111" style="float:left;width: 146px;height:33px;  
    background-image: url(img/header_r3_c13.jpg); 
    background-repeat:no-repeat;"    ></div>


    </    div>
    <    div style="clear:left;"></div>

    <!--     Navigation Ende-->

    <!--     Laufleiste Anfang -->
    <    div id="main" style="float:left;width:775px;left:0px;background-color:#999999">
    <    img src="img/spacer.gif" height="10" alt="spacer" ></img>
    </    div>
    <!--     Laufleiste Anfang -->

    <    div style="clear:left;"></div>
    <!--     Menu Anfang -->
    <    div id="menu" style="float:left;width: 165px; 
    height:auto;left:0px; background-color:#FF0000;"    >&nbsp;menu</div>

    <!--     Menu Ende-->

    <!--     Trennleiste Anfang -->
    <    div id="menu_leiste" style="float:left; margin:0px; 
    padding:0px;width: 15px;height:auto;background-color:#FFF;"    >

    <    table class="reddotline" width="15" border="0" cellpadding="0" 
    cellspacing="0">
        <    tr>
          <    td class="reddotline"valign="middle">

    <    img src="img/reddottedline.gif" width="15" height="392" alt="spacer" >
    </    img></td>
        </    tr>
      </    table>
    </    div>

    <!--     Trennleiste Ende -->

    <!--     Main Content Anfang -->
    <    div id="content" style="float:left;width: 595px;top:0;background-color:#FF9999;">
     
    </    div>
    <!--     Main Content Ende-->
    <    div style="clear:left;"></div>

    <!--     Fusszeile -->
    <    div style="position:relative;width:775px;text-align:center;
    background-color:#FFF;"    >
    <    div style="float:left;width:531px; margin: 0px 
    ;height:26px;background-color:#000000; text-align: left;"    >
    <    span class="copyright">&nbsp;&nbsp;&copy; 2005 Dee&nbsp;&nbsp;|</span>
    </    div>

    <    div style=" position:absolute;left:531px;width:244px;height:33px;
    background-color:#FFF; background-image:url(img/footright.gif);"    >
    &    nbsp;</div>
    <    div style=" float:left; width:531px;height:7px; background-color:#FFFFFF;background-image:url(img/footbg.gif); 
    background-repeat:repeat-x; background-position:bottom;"    >
    <    img src="img/spacer.gif" width="33" height="7" alt="spacer">
    </    img></div>
    </    div>
    <!--     Fusszeile  Ende-->
    </    div>
    </    body>
    </    html> 
    Gruß
    Deejoy
    Zuletzt geändert von Deejoy; 22.05.2005, 15:04.
    Stichworte: -
  • #2
    1. Hier gehört es zur Nettique das man den Quellcode so formatiert das man nicht Horizontal scrollen muss.


    Auch habe ich noch eine Tabelle benutzt da ich dort das Bild mittig haben wollte.
    Für IE machst du es mit "text-align: center;" (vor dem Bereich, also nicht in dessen CSS), für die anderen mit "margin: 0 auto;" (das in die CSS des Bereiches).


    Auf http://www.css4you.de/ gibt es ein Tutorial zum Thema tabellenloses Layout was ich sehr empfehlen kann



    Floriam
    PHP Handbuch - MySQL Handbuch - PHP Einsteiger Tutorial - CSS Referenz - Browserunterstützung von CSS

    Kommentar

    • #3
      Original geschrieben von Floriam
      [B]1. Hier gehört es zur Nettique das man den Quellcode so formatiert das man nicht Horizontal scrollen muss.
      Ja da hast Du vollkommen Recht. Ist mir nicht aufgefallen da ich von den meisten Board mitlerweile gewohnt bin das sich das von selbst anpasst.Werde aber in Zukunft darauf achten. Hab es auch gleich mal korrigiert weil es nervt ja schon


      Für IE machst du es mit "text-align: center;" (vor dem Bereich, also nicht in dessen CSS), für die anderen mit "margin: 0 auto;" (das in die CSS des Bereiches).
      Ja hatte ich versucht wollte aber nicht so wie ich.

      Auf http://www.css4you.de/ gibt es ein Tutorial zum Thema tabellenloses Layout was ich sehr empfehlen kann
      Ja danke das kenne ich seit freitag wohl schon auswendig sowie diverse andere Seiten und Foren. Aber es dann selbst richtig zu machen ist ja dann immer noch was anderes deswegen wollte ich ja auch mal von Leuten wissen die sich damit besser auskennen als ich was man an meinem Quelltext noch verbessern kann.
      Ich bin wohl noch nicht in der Lage meine eigenen Fehler zu sehen.

      Gruß
      Deejoy

      Kommentar

      • #4
        Könntest du die Seite dazu posten? Es geht zwar auch ohne, aber wenn man nur den Quelltext sieht, ist es schwer elegantere Lösungen zu finden..

        Die ganzen Link-Styles kannst du einfach zu einem zusammenfügen (für alle Tags "a", also .copyright a {..}). Beim Hover machst du dann einfach eine Klasse mit den ergänzenden (!) Angaben.


        Das mal als kleiner Tipp, um das ganze zu durchsuchen (ohne das ich die Seite habe) ist mir ehrlich gesagt zu aufwändig


        Floriam
        PHP Handbuch - MySQL Handbuch - PHP Einsteiger Tutorial - CSS Referenz - Browserunterstützung von CSS

        Kommentar

        • #5
          Ja klar hier der link
          http://web27.netztitan.de/index_css.html
          Ist allerding ohne Grafik da ich die hier nicht zu hand habe.

          Die Navigation änder ich gerade in diesen Code um
          PHP-Code:
          <div id="navi" class="navi">
          <          ul>
          <          li><img src="img/header_r3_c1.jpg" alt="spacer" width="244" height="33" /></img></li>
          <          li><img src="img/home.jpg" width="42" height="33" alt="spacer" ></img></li>
          <          li><img src="img/header_r3_c4.jpg" width="30" height="33" alt="spacer" ></img></li>
          <          li><img src="img/xdsw.jpg" width="55" height="33" alt="spacer" ></img></li>
          <          li><img src="img/header_r3_c6.jpg" width="33" height="33" alt="spacer" ></img></li>
          <          li><img src="img/sddfg.jpg" width="50" height="33" alt="spacer" ></img></li>
          <          li><img src="img/header_r3_c8.jpg" width="31" height="33" alt="spacer" ></img></li>
          <          li><img src="img/gdhka.jpg" width="51" height="33" alt="spacer" ></img></li>
          <          li><img src="img/header_r3_c11.jpg" width="31" height="33" alt="spacer" ></img></li>
          <          li><img src="img/header_r3_c12.jpg" width="62" height="33" alt="spacer" ></img></li>
          <          li><img src="img/header_r3_c13.jpg" width="146" height="33" alt="spacer" ></img></li>
           </          ul>
           </          div> 

          Kommentar

          Vorherige template Weiter
          Lädt...
          X