<div> anstatt von <table> - schön, nur wie?

Übersicht Ressourcen Grafik & Design

Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten.

Xaymar

ehemals "Cgamer"

Betreff: <div> anstatt von <table> - schön, nur wie?

 BeitragMi, Aug 10, 2011 20:25
Antworten mit Zitat
Benutzer-Profile anzeigen
Da das ja immer wieder gesagt wird das man <div> anstelle von <table> nehmen sollte für bild platzierung, aber es absolut keiner erklären möchte. Deshalb machte ich mich auf die suche mit google, ob ich nicht doch eine lösung finde. Nichts... naja war ja eig. schon klar, die ergebnisse auf google sind seit ein paar wochen mist.
Also wie würdet ihr dies lösen?:
Ich habe vorher <table> für den üblichen bildrand um ein element genommen, allerdings kommt dann immer das "nimm <div> anstatt von <table>!"(und derjenige der das schreibt antwortet nicht mehr).
Dann dachte ich, das kann doch nicht so schwer sein, das zu erstellen. Und tatsächlich, ich kam auch auf eine Idee. Die wiederum an dynamischen Inhalt scheiterte.
Derzeit löse ich das so:
Code: [AUSKLAPPEN]
         <div class="lnContent-Header">
            <div>
               <!--<div class="lnShapeBorder-tl"></div>
               <div class="lnShapeBorder-tc"></div>
               <div class="lnShapeBorder-tr"></div>
               <div clear=all>-->
               <div class="lnShapeBorder-cl" style="height: 60px;"></div>
               <div class="lnShapeBorder-cc" style="height: 60px;"><img src="http://levelnull.de/images/LogoText.png"></div>
               <div class="lnShapeBorder-cr" style="height: 60px;"></div>
               <div clear=all>
               <div class="lnShapeBorder-bl"></div>
               <div class="lnShapeBorder-bc"></div>
               <div class="lnShapeBorder-br"></div>
               <div clear=all>
            </div>
         </div>

funktioniert... bei statischen inhalt. Da aber der obige Code nicht mehr beim Content-Body funktionieren wird wusste ich schon da ich die höhe und breite festlege.
Wie soll ich das mit dynamischen inhalten machen, dessen höhe und breite sich verändert(und dadurch auch das <div> drumherum)?


Voller code:
Code: [AUSKLAPPEN]
<!DOCTYPE html>
<html>
   <head>
      <style type="text/css">
         .lnBody {
            padding: 0px;
            margin: 0px;
            
            background: #000 url('image/sitebg.png') no-repeat top center;
            color: #000;
         }
         
         .lnContent {
            width: 1024px;
            min-height: 400px;
            
            padding: 0px;
            margin: 0px;
            
            position: fixed;
            left: 50%;
            margin-left: -512px;
         }
         
         .lnContent-Header {
            width: 1024px;
            min-height: 128px;
         }
         
         .lnShapeBorder-tl {
            background: url('image/shape/border/tl.png') repeat center center;
            width: 16px; height: 16px;
            min-width: 16px; min-height: 16px;
            float:left;
            margin: 0px; padding: 0px;
         }
         .lnShapeBorder-tc {
            background: url('image/shape/border/tc.png') repeat center center;
            width: 992px; height: 16px;
            min-width: 16px; min-height: 16px;
            float:left;
            margin: 0px; padding: 0px;
         }
         .lnShapeBorder-tr {
            background: url('image/shape/border/tr.png') repeat center center;
            width: 16px; height: 16px;
            min-width: 16px; min-height: 16px;
            float:left;
            margin: 0px; padding: 0px;
         }
         .lnShapeBorder-cl {
            background: url('image/shape/border/cl.png') repeat center center;
            width: 16px; height: 16px;
            min-width: 16px; min-height: 16px;
            float:left;
            margin: 0px; padding: 0px;
         }
         .lnShapeBorder-cc {
            background: url('image/shape/border/cc.png') repeat center center;
            width: 992px; height: 16px;
            min-width: 16px; min-height: 16px;
            float:left;
            margin: 0px; padding: 0px;
         }
         .lnShapeBorder-cr {
            background: url('image/shape/border/cr.png') repeat center center;
            width: 16px; height: 16px;
            min-width: 16px; min-height: 16px;
            float:left;
            margin: 0px; padding: 0px;
         }
         .lnShapeBorder-bl {
            background: url('image/shape/border/bl.png') repeat center center;
            width: 16px; height: 16px;
            min-width: 16px; min-height: 16px;
            float:left;
            margin: 0px; padding: 0px;
         }
         .lnShapeBorder-bc {
            background: url('image/shape/border/bc.png') repeat center center;
            width: 992px; height: 16px;
            min-width: 16px; min-height: 16px;
            float:left;
            margin: 0px; padding: 0px;
         }
         .lnShapeBorder-br {
            background: url('image/shape/border/br.png') repeat center center;
            width: 16px; height: 16px;
            min-width: 16px; min-height: 16px;
            float:left;
            margin: 0px; padding: 0px;
         }
      </style>
   </head>
   <body class="lnBody">
      <div class="lnContent">
         <div class="lnContent-Header">
            <div>
               <!--<div class="lnShapeBorder-tl"></div>
               <div class="lnShapeBorder-tc"></div>
               <div class="lnShapeBorder-tr"></div>
               <div clear=all>-->
               <div class="lnShapeBorder-cl" style="height: 60px;"></div>
               <div class="lnShapeBorder-cc" style="height: 60px;"><img src="http://levelnull.de/images/LogoText.png"></div>
               <div class="lnShapeBorder-cr" style="height: 60px;"></div>
               <div clear=all>
               <div class="lnShapeBorder-bl"></div>
               <div class="lnShapeBorder-bc"></div>
               <div class="lnShapeBorder-br"></div>
               <div clear=all>
            </div>
         </div>
         <div class="lnContent-Body">
            lnContentMain
         </div>
      </div>
   </body>
</html>
Warbseite

ZEVS

 BeitragMi, Aug 10, 2011 20:49
Antworten mit Zitat
Benutzer-Profile anzeigen
Der Begriff "bild platzierung" ist durchaus schwammig, sodass mir nicht klar ist, was du meinst.
Prinzipiell fällt mir an deinem Code folgendes auf:
1. Du stellst nicht alle Attribut-Werte in Anführungsstriche. Das ist absoluter Blödsinn, man kann es schlechter lesen, man kann darin keinen Whitespace benutzen und es ist ein großes Problem für XHTML-Kompatibilität.
2. Niemals für bestimmte Bildschirmauflösungen schreiben! Du scheinst dich da auf width=1024px festgelegt zu haben, Leute mit Smartphones werden sich schön ärgern...
3. Du brauchst keine Klassen für den body vergeben, der Selektor "body" tut es auch.
4. Du benutzt sehr viele <div>-Bereiche.
5. Deine Klassen lnShapeBorder-* sind stark redundant. Probiere doch mal
Code: [AUSKLAPPEN]
.lnShapeBorder {
  width: 16px;
  height: 16px;
  width: 16px; height: 16px;
  min-width: 16px; min-height: 16px;
  float:left;
  margin: 0px; padding: 0px;
}

Die width kannst du natürlich wieder überschreiben.
Die Klassennamen finde ich persönlich erstaunlich nichtssagend (was heißt ln, wofür steht t, c, b bzw. l, c, r?)
Wieso schmeißt du denn die ganzen Bilder nicht in einen einzigen div-Bereich?
Ein paar Erklärungen und ein Upload zum Spielen mit der Firebug wären wünschenswert.
ZEVS

Xaymar

ehemals "Cgamer"

BeitragMi, Aug 10, 2011 21:35
Antworten mit Zitat
Benutzer-Profile anzeigen
Mit "Bild platzierung per <table>" meine ich so etwas (worauf du auch selbst hättest kommen können):
Code: [AUSKLAPPEN]
<table>
  <tr>
    <td class="tl"></td>
    <td class="tc"></td>
    <td class="tr"></td>
  </tr>
  <tr>
    <td class="cl"></td>
    <td class="cc"></td>
    <td class="cr"></td>
  </tr>
  <tr>
    <td class="bl"></td>
    <td class="bc"></td>
    <td class="br"></td>
  </tr>
</table>

Die punkte 1-5 stecke ich erstmal in die Kategorie "Lokale Ordner->Trash", da die absolut nichts mit dem Problem zu tun haben, sondern auf fehler im Testdokument hinweisen und somit Invalid sind.
Ich dachte eigentlich das "lnShapeBorder" aufschlussreich genug sind um zu wissen was die abkürzungen dahinter heißen, aber hier nochmal: b->bottom, t->top, l->left, r->right, c->center.
Uploaden werde ich das garantiert nicht. Der Sourcecode ist das einzige was gebraucht wird, die Bilder sind nur extras zum Sourcecode. Zudem eigentlich jedes 16x16 bild für die "lnShapeBorder-*" infrage kommt und der hintergrund ein bearbeiteter windows hintergrund ist.

Mein problem hast du allerdings noch nicht behoben.
Warbseite

Eingeproggt

 BeitragMi, Aug 10, 2011 22:10
Antworten mit Zitat
Benutzer-Profile anzeigen
Ui, man merkt dass du dir schon sehr viele Gedanken gemacht hast weshalb ein "Quereinstieg" zumindest mir sehr schwer fällt...
Da ich jetzt leider nicht genau verstanden hab worum es dir geht, nur dass du einen Rahmen der aus CSS-background-images bestehen dürfte beliebig groß haben willst, mal ne allgemeine Antwort:

Ich hab mir so ein System von einem phpBB-Forum-Style abgeschaut und es sieht grob so aus (ausn Kopf, von daher wird der Code beim Ausprobieren nicht sofort das gewünschte Ergebnis liefern ^^):

Code: [AUSKLAPPEN]
<div class="links">
<div class="rechts">
<div class="oben">
<div class="unten>
<!-- Soweit zum Rahmen. Ecken wie rechts-oben usw könnte man auch noch einbauen. Aber frag bitte nicht in welcher Reihenfolge... muss man herum probieren -->
<div class="mitte">
  <!-- das is der Inhalt und beliebig groß -->
</div></div></div></div></div>


und CSS dazu sieht etwa so aus:

Code: [AUSKLAPPEN]
.rechts { background:url('rechts.png') top right repeat-y; }
.links { background:url('links.png') top left repeat-y; }
.oben { background:url('oben.png') top left repeat-x; }
.unten { background:url('unten.png') top left repeat-x; }


Was an den Eckpunkten zu Überschneidungen führt und wo man sich da natürlich was einfallen lassen muss. Also entweder in den Ecken irgendwelche extra Bilder drüber legen, oder mit padding und margin rumspielen (wobei ich das hasse ehrlich gesagt ^^)

Ist jetzt leider nur n allgemeiner Code ohne auf dein problem einzugehen... wie gesagt, fällt mir schwer mich in dein Problem zu versetzen Sad

mfG, Christoph.
Gewinner des BCC 18, 33 und 65 sowie MiniBCC 9

BladeRunner

Moderator

BeitragMi, Aug 10, 2011 22:14
Antworten mit Zitat
Benutzer-Profile anzeigen
Der Art und Formulierung deiner Antwort nach entnehme ich dass Dir die Hilfe und Ratschläge anderer zuwider sind.
Daher:
~GESCHLOSSEN~


Mal Klartext:
Zitat:
meine ich so etwas (worauf du auch selbst hättest kommen können)

Nicht jeder kann instant und automatisch deine Gedanken kennen. Die wenigsten werden es wollen.
Zitat:
Die punkte 1-5 stecke ich erstmal in die Kategorie "Lokale Ordner->Trash",

Genau das tue ich mit Dir, weil Du nicht in der Lage bist auf einen ernsthaften Hilfsversuch freundlich zu reagieren. Es muss dir nicht passen was Dir da vorgeschlagen wird, aber es ist kein Grund dermassen rotzfrech zu werden.
Zitat:

Mein problem hast du allerdings noch nicht behoben.

Und ich kann eigentlich jedem nur raten gründlich zu hinterfragen ob er jemandem der so einen Ton an den Tag legt helfen möchte.
Zu Diensten, Bürger.
Intel T2300, 2.5GB DDR 533, Mobility Radeon X1600 Win XP Home SP3
Intel T8400, 4GB DDR3, Nvidia GF9700M GTS Win 7/64
B3D BMax MaxGUI
Stolzer Gewinner des BAC#48, #52 & #92

Dieses Thema ist gesperrt, du kannst keine Beiträge editieren oder beantworten.


Übersicht Ressourcen Grafik & Design

Nach Oben

Gehe zu:

Powered by phpBB © 2001 - 2006, phpBB Group