Wrapper will nicht so wie ich will

MadMaid

Also, ich will eine Tabelle erstellen, die mobile in der Reihenfolge gelesen wird, wie sie im Code steht und für die Desktop-Ansicht soll sich die Anordnung über das css ändern.

Unten folgt der Code den ich habe und ich habe jetzt folgendes Problem: Aktuell steht die centerCol ganz unten im Code, soll aber als erstes stehen. Setze ich den ganzen div jedoch an oberster Stelle wird die Tabelle auseinander gerissen. Der centerCol ist dann zwar immer noch in der Mitte, aber die anderen beiden Boxen sind dann rechts und links schräg drunter und nicht mehr alles in einer schönen Tabelle/ auf einer Ebene.

Weiß wer was ich falsch mache?
Ich bin auch für alternativen offen.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>


<style>
‪#‎wrapper‬ {
width: 610px;
margin: 0 auto;
}


‪#‎leftCol‬ {
float: left;
width: 200px;
}


‪#‎centerCol‬ {
margin: 0 205px;
}


‪#‎rightCol‬ {
float: right;
width: 200px;
}


.box {
border: 1px solid #000;
margin-bottom: 5px;
text-align: center;
}


</style>


</head>


<body>
<div id="wrapper">
<div id="leftCol">
<div class="box"><p><strong>Header 1</strong></p></div>
<div class="box"><table border="0"><tbody><tr><td><b>Mo.-Fr.:<br>Sa.:</b></td><td>00:00 bis 00:00 Uhr<br>00:00 bis 00:00 Uhr</td></tr></tbody></table></div>
<div class="box"><table border="0"><tbody><tr><td><font color="#696969">Fon:</font></td><td>+49 (0000) 000000</td></tr></tbody></table></div>
</div>


<div id="rightCol">
<div class="box"><p><strong>Header 3</strong></p></div>
<div class="box"><table border="0"><tbody><tr><td><b>Mo.-Fr.:<br>Sa.:</b></td><td>00:00 bis 00:00 Uhr<br>00:00 bis 00:00 Uhr</td></tr></tbody></table></div>
<div class="box"><table border="0"><tbody><tr><td><font color="#696969">Mail:</font></td><td>info@mail.de</td></tr></tbody></table></div>
</div>


<div id="centerCol">
<div class="box"><p><strong>Header 2</strong></p></div><div class="box"><table border="0"><tbody><tr><td>Straße 00-00<br>00000 Stadt</td></tr></tbody></table></div>
<div class="box"><table border="0"><tbody><tr><td><font color="#696969">Fax:</font></td><td>+49 (0000) 0000000</td></tr></tbody></table></div>
</div>


</div>


</body>
</html>

Alles anzeigen

PS: Wenn mir wer sagen kann, warum der Adresstext unter Header2 nur so pseudo-zentriert ist hilft mir auch schon weiter.

MadMaid

Wer sich wundert, dass der code keine beschriebene Tabellenoptik ausgibt, den kann ich beruhigen. Ich faule Socke hatte die Anfrage erst auf fb gestellt und dann hier rein kopiert. Damit ich gleich lerne, dass man sowas nicht tut, ist der style blockiert. Leider habe ich keine Ahnung wie man dass ohne abtippen wieder aufhebt. Dafür bin ich nun der Lösung näher gekommen, die ich wenn ich fertig bin poste.

Gastl

Grausiglich der Quelltext. Die Tabelle ist überflüssig und dann noch alles in einzelne DIVs zerstückelt, ne.

Google mal nach responsive Design und schmeiß weg, was du da hast. Lerne neu und dazu. Die Arbeit deinen Quellcode abzuspeichern, damit man sehen kann, was du gemacht hast, erspart sich wohl jeder. Stell deine Seite Online und verlinke sie bitte.

MadMaid

Jetzt fühle ich mich dezent auf den Schlipps getreten.

Da ich blutiger Anfänger bin habe ich wohl gegoogelt und neu gelernt und das war mein Zwischenschritt mit dem besagten Problem. Zu dem Zeitpunkt spielte die responsive-optimierung noch überhaupt keine Rolle, weil ich ja schon an der Grundansicht scheiterte. So fern ich den Code nicht funktionabel in der richtig Reihenfolge runter geschrieben gekrigt hätte, spielte alles weitere keine Rolle mehr, da der lernaufwand zu hoch gewesen wäre um es bezahlt zu kriegen. Das Problem habe ich jetzt durch bessere positionierungsbeschreibungen gelöst. Da erst konnte ich mit dem monitoring beginnen.

Die Div kommen daher, dass das ganze in eine JTLShopseite eingebunden werden soll und das ist meines wissens nach so doof gelöst.

Die Table richtet die Tage und Uhrzeiten an einander aus und soll demnach überall zu gleichem Ergebniss führen. Wenn Du da was eleganteres weißt, immer gerne.

Leider habe ich selbst keine Möglichkeit das zu hosten und werde mich hüten was unfertiges beim Kunden einzuspielen. Da ich das Problem wie gesagt gelöst habe und ich gleich nur das Endprodukt poste um zukünftige user die bei der Suche nach dem problem vielleicht hier drüber stolpern und was brauchbares vorfinden sollen, wird ein blankes posten des codes wohl voll ausreichen.

Ich hoffe ich trampel hoer nicht auf irgend einer netiquette, aber einen Anfänger der nach Hilfe fragt gleich ein schmeiß alles weg und lern mal was um die Ohrsn zu hauen finde ich schon ziemlich beleidigend.

- - - Aktualisiert - - -

Ist jetzt nen bissl messi, aber soweit stehts

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>


<style>
@media screen 
       and (min-width: 800px) {
#wrapper {
    height: 180px;
    background-color:red; 
    width: 800px;
    position: relative;
    top: 0px;
    margin: 10px;
}
#leftCol {
    background-color:grey;
    width: 33%;
    position: absolute;
    left: 0%;

    text-align: center;
}
#centerCol {
    background-color:green;
 
    width:34%;
    position: absolute;
    left: 33%;

    text-align: center;
}
#rightCol {
    background-color:blue;


    width:33%;
    position: absolute;
    left: 67%;


    text-align: center;
}


.box {
border: 1px solid #000;
margin: 5px;
text-align: center;
}


}
</style>
</head>


<body>
<div id="wrapper" class="box">
<div id="centerCol">
<div class="box"><p><strong>Header 2</strong></p></div>
<div class="box"><table border="0"><tbody><tr><td>Straße 00-00<br>00000 Stadt</td></tr></tbody></table></div>
<div class="box"><table border="0"><tbody><tr><td><font color="#696969">Fax:</font></td><td>+49 (0000) 0000000</td></tr></tbody></table></div>
</div>


<div id="leftCol">
 <div class="box">
   <p><strong>Header 1</strong></p>
 </div>
 <div class="box">
  <table border="0">
   <tbody>
    <tr>
     <td><b>Mo.-Fr.:<br>Sa.:</b></td>
     <td>00:00 bis 00:00 Uhr<br>00:00 bis 00:00 Uhr</td>
    </tr>
   </tbody>
  </table>
 </div>
 <div class="box">
  <table border="0">
   <tbody>
    <tr>
     <td><font color="#696969">Fon:</font></td>
     <td>+49 (0000) 000000</td>
    </tr>
   </tbody>
  </table>
 </div>
</div>


<div id="rightCol">
<div class="box">
<p><strong>Header 3</strong></p>
</div>
<div class="box"><table border="0"><tbody><tr><td><b>Mo.-Fr.:<br>Sa.:</b></td>
<td>00:00 bis 00:00 Uhr<br>
00:00 bis 00:00 Uhr</td></tr></tbody></table>
</div>
<div class="box"><table border="0" ><tbody><tr><td><font color="#696969">Mail:</font></td>
<td>info@mail.de</td></tr></tbody></table></div>
</div>










</div>


</body>
</html>

Alles anzeigen

Gastl

Wie jetzt? Du willst das wirklich verkaufen?

MadMaid

Hey, ich bekomme es bezahlt. Bin zwar Texter, aber würdest Du da Nein sagen? (Und im Grunde verkaufe ich das drum herum und nicht den code)

- - - Aktualisiert - - -

Und erhalte ich auch mal was konstruktives von Dir, oder bleibt es bei unterschwelligen Beleidigungen? Wo ist Dein Problem? Bin ja gerne für Kritik offen, aber von Dir kommt nur Bla.

Gastl

#3
alles gesagt. Wenn du damit Geld verdienst, was ich bezweifle, gut. Punkt, aus.

MadMaid

Wtf - schließt Du jetzt von nem bissl HTML auf meine Fähigkeiten als Texter? Was geht denn hier ab? Es tut mir leid hier evtl. in ein Fettnäpfchen getreten zu sein, aber meinst Du nicht, es ist sinnvoller das zu erklären, statt Deine Zeit mit leeren Fraßen zu verschwenden? Wie gesagt blutiger HTML Anfänger dafür mit anderen Qualitäten. Ich schreibe halt so viel für Webshops, eBay & Amazon, dass ich die letzten Jahre viel parametrieren gelernt habe. Nicht unbedingt die ITSpitzenqualifikation, aber ernsthaft: den Kram den ich so mache da würde keiner von Euch den Finger für krumm machen. Daher danke an jeden der dieses Thema mit Interesse gelesen hat, wo dieser doch überflüssig ist und es gelöst wurde, aber hier Leute so nieder zu machen find ich nicht OK.

Gastl

Zitat von MadMaid

den Scheiß den ich so mache da würde keiner von Euch den Finger für krumm machen.

Na da hast du doch deine Antwort schon selber gegeben.

MadMaid

Touché

Echt,..? So übel?

Gastl

Ja

Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

MrMurphy

Hallo MadMaid,

den Quelltext interessiert es leider überhaupt nicht ob du Anfänger bist oder nicht.

Zum "Lernen" von HTML / CSS hast du leider auf vollkommen veraltete Quellen zurückgegriffen und zusätzlich noch gestrichene Elemente verwendet bzw. andere Elemente sachlich falsch angewendet.

So ist zum Beispiel XHTML bereits 2006 offiziell begraben worden und wird entsprechend nicht mehr weiterentwickelt. Irgendwann werden die Browser XHTML als Altlasst streichen und nicht mehr anzeigen. Neue Seiten sollten deshalb nur mit HTML5 / CSS3 erstellt werden.

Das font-Element ist ersatzlos gestrichen worden und sollte deshalb auch nicht mehr verwendet werden.

Das b-Element und das strong-Element dienen nicht mehr der Fettschrift sondern haben eine semantische Bedeutung bekommen, die in deinem Beispiel nicht gegeben ist. Fette Schrift ohne semantische Bedeutung wird heutzutage über CSS dargestellt.

Tabellen sind nur für Tabellendaten zulässig und nicht um das Layout zu beinflussen. Du hast aber keine Tabellendaten. In diesem Zusammenhang muss zwischen Tabellen und tabellarischer Darstellung unterschieden werden. Eine tabellarische Darstellung ist häufig auch sinnvoll, wenn keine Tabellendaten vorliegen, zum Beispiel bei Listen. Die tabellarische Darstellung wird dann aber über CSS erzeugt.

Unnötige div sollten vermieden werden. Container sollten zudem durch geeignete Elemente erzeugt werden, zum Beispiel header, main, footer, article, section, aside, figure u.s.w.

Um dir konkret zu helfen sind deine Angaben zudem zu dürftig.

Trotzdem mal ein Beispiel wie deine Daten mit aktuellem HTML5 / CSS3 dargestellt werden können. Die Abstände und das Aussehen können natürlich noch angepasst werden:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Anordnung Layout 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 100%;
      }
      body {
         padding: 0;
      }
      footer {
         display: flex;
      }
      footer h1 {
         text-align: center;
      }
      footer>section>dl:nth-child(2)>dt {
         font-weight: bold;
      }
      footer>section>dl:nth-child(3)>dt {
         color: #696969;
      }
      footer>* {
         flex: 1 0 33.3%;
      }
      footer>:nth-child(1) {
         background-color: grey;
      }
      footer>:nth-child(2) {
         background-color: green;
      }
      footer>:nth-child(3) {
         background-color: blue;
      }
      footer>*>* {
         padding: 0.5rem;
         border: 1px solid black;
         margin: 0.5rem;
      }
      footer>* dl {
         display: flex;
         flex-wrap: wrap;
      }
      footer>* dl :nth-child(2n+1) {
         width: 30%;
      }
      footer>* dl :nth-child(2n+2) {
         width: 70%;
      }
      footer>*>* p,
      footer>*>* dt,
      footer>*>* dd {
         padding: 0;
         margin: 0;
      }
   }
   @media only screen and (max-width: 800px) {
      footer {
         flex-direction: column;
      }
      footer>* {
         flex: 1 0 100%;
      }
      footer>:nth-child(1) {
         order: 2;
      }
      footer>:nth-child(2) {
         order: 1;
      }
      footer>:nth-child(3) {
         order: 3;
      }
   }
   </style>
</head>
<body>
   <footer>
      <section>
         <h1>Header 1</h1>
         <dl>
            <dt>Mo.-Fr.:</dt>
            <dd>00:00 bis 00:00 Uhr</dd>
            <dt>Sa.:</dt>
            <dd>00:00 bis 00:00 Uhr</dd>
         </dl>
         <dl>
            <dt>Fon:</dt>
            <dd>+49 (0000) 000000</dd>
         </dl>
      </section>
      <section>
         <h1>Header 2</h1>
         <div>
            <p>Straße 00-00</p>
            <p>00000 Stadt</p>
         </div>
         <dl>
            <dt>Fax:</dt>
            <dd>+49 (0000) 000000</dd>
         </dl>
      </section>
      <section>
         <h1>Header 3</h1>
         <dl>
            <dt>Mo.-Fr.:</dt>
            <dd>00:00 bis 00:00 Uhr</dd>
            <dt>Sa.:</dt>
            <dd>00:00 bis 00:00 Uhr</dd>
         </dl>
         <dl>
            <dt>Mail:</dt>
            <dd>info@mail.de</dd>
         </dl>
      </section>
   </footer>
</body>
</html>

Alles anzeigen

Gruss

MrMurphy

MadMaid

OMG wie peinlich.
Ich hätte nicht mehr gedacht, dass hier noch wer drauf antwortet. Ich hätte echt eher wieder nachschauen sollen.

So langsam verstehe ich was gemeint war.
Vielen Dank für die Mühe, ich habe viel draus gelernt. (Und werde wohl auch noch)

Irgendwie beschleicht sich mir dennoch das Gefühl hier mit dem AntiKnigge in ein riesen Fettnäpfchen getreten zu sein.
Dafür möchte ich mich entschuldigen (Auch wenn ich nicht recht verstehe wofür).

Tags