Beiträge von Sailor

Sailor

Wäre ganz gut, wenn man mal den Quellcode von dem was du schon hast sehen könnte.
Ansonsten solltest du es auch mal versuchen den mittleren DIV mit position: fixed; zu positionieren, sonst scrolled der dir weg, wenn du mehr Inhalt auf der Seite hast.

Sailor

Hallo,
machbar ist alles und du brauchst dafür auch nicht unbedingt zwei Seiten und eine Benutzerabfrage. Das kannst du mit HTML und CSS und PHP alles 'automatisieren'.
Als erstes... ganz wichtig... musst du im <head> deiner Seite folgendes anführen.

HTML

<meta name=viewport content="width=device-width, initial-scale=1">

und dann überlegst du dir, für welche Displaygrößen du deine Seite optimieren willst - Displaygröße ist allerdings nicht gleich der Auflösung der Anzeige im Browser!
Bewährt hat sich bei mir folgende Aufteilung:
größer (breiter) 1024 Pixel, damit erwischt du alles was größer ist als der alte Standard VGA Standard (1024x768 )
800 bis 1024 Pixel, damit erwischt du alles, was sich mit dem alten Standard und dem noch älteren Standard (800x600 )
kleiner 800 Pixel
Mit den von dir ausgewählten Werten erzeugst du dann mit einer @media query sowas wie eine CSS Weiche

HTML

<link rel="stylesheet" type="text/css" href="stylez/gross.css" media="screen and (min-width: 1024px)">
<link rel="stylesheet" type="text/css" href="stylez/mittel.css" media="screen and (max-width: 1023px) and (min-width: 800px)">
<link rel="stylesheet" type="text/css" href="stylez/klein.css" media="screen and (max-width: 799px)">

Du kannst natürlich auch mehr oder weniger 'Weichen' nutzen und wie gesagt die 'width-Werte' nach deinen Vorstellungen anpassen - es dürfen sich nur keine Lücken oder Überschneidungen ergeben!
Jetzt musst du natürlich die entsprechenden Stylesheets erzeugen, die dann deine Seite in den zugehörigen Größen formatieren sollen.
Dinge, die dann in den einzelnen Größen nicht angezeigt werde soll, kannst du einfach mit 'display: none;' ausblenden!
Viel Spaß beim basteln!

- - - Aktualisiert - - -

Wenn ihr unsicher seid, was denn die Pixelauflösung eures Browsers bei den diversen 5.2'' und 8'' und Tablets und Smartphones und und ...ist, dann klickt mal auf diesen Link! Mit dem Gerät, das ihr abfragen wollt.

http://s414653727.online.de/tab_test/screen_test.php

Ihr bekommt dann die Werte, die der Browser tatsächlich anzeigt und das ist unabhängig von der Displaygröße!

Sailor

Leider kenne ich mich mit diesen Baukasten Webseiten Programmen nicht aus - aber es gibt im Netz einige Mitmenschen, die ihr Wissen gerne teilen.
Hier zum Beispiel:

https://vimeo.com/album/1573897

und in dem Tutorial 8 geht es, wenn ich das richtig gesehen habe, genau um dein Problem.

Sailor

Ohne den gesamten Quellcode zu sehen bin ich auf Rätselraten angewiesen.
Aber der schwarze Hintergrund muss die CSS Eigenschaft eines 'Containers' sein (evtl. ein div) in dem deine Kästchen eingebettet sind. Es könnte sich dabei um ein Element handeln, dass mit der id="content" ausgezeichnet ist. Das schließe ich zumindest aus den Eintragungen in deinem Stylesheet, denn dort werden (fast) alle die im Code vorkommenden Klassen (class="irgendwas") mit dieser vorgestellten ID formatiert.
Beispiel:

#content .item{
...
}

heißt im Klartext, diese Formatierung gilt für alle Elemente mit der Klasse item (class="item"), die sich in einem Element mit der ID content befinden.

Wenn nun diese content-Element mit dem schwarzen Hintergrund zu früh geschlossen wird - also bevor alle Elemente in diesem Container drin sind, dann liegen eben einige außerhalb des schwarze Hintergrundes :?.
Welchen Browser benutzt du? Die meisten Browser sind da ganz gut, wenn man solche Fehler suchen muss. Einfach mal Rechtsklick auf die angezeigte Seite im Browser und 'Quellcode anzeigen' auswählen.
Dann in dem Bereich, wo es zu den Problemen kommt mal genau hinschauen, ob da irgendwas anders aussieht - meist werden die Elemente, die dem Browser fehlerhaft erscheinen farblich (meist rot) markiert. Und dann mit dem Mauszeiger über die Stelle gehen, wo diese Markierung ist. Der Browser zeigt dann an, was ihm fehlerhaft erscheint.

Sailor

Guten Morgen Daisy,
als Erstes erkenne ich auf den Screenshots, dass dort ein Fehler sein muss, denn diese Liste mit den weißen Kästchen sollte so funktionieren, dass die Reihen immer aufgefüllt sind - also die gleiche Anzahl von Kästchen pro Reihe. Bei dir sieht es so aus, als hättest du in der vor-vorletzten Reihe 4.. dann 3... dann 1! Soll so nicht sein, erst wenn die oberen Reihen alle gleichmäßig aufgefüllt sind, kann die unterste Reihe mit den restlichen Elementen nur teilweise gefüllt sein. Kann im Moment nicht sagen woran das liegt - aber - in deinem Code sind Fehler!

HTML

<li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 12</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 12</h2>
          <div class="white">12</div>
        </div>
     </div>








<br clear="all">
<div class="item grid2x1">
<div class="green"><div align="center"><b>Überschrift</b></div><br />
<div align="justify"><font size="1,8">TEXT TEXT TEXT</font></div></div></div>


<div class="item grid2x1">
<div class="green"><div align="center"><b>Überschrift</b></div><br />
<div align="justify"><font size="1,8">TEXT TEXT TEXT</font></div></div></div>


<div class="item grid2x2">
<div class="green"><div align="center"><b>Überschrift</b></div><br />
<div align="justify"><font size="2">TEXT TEXT TEXT</font></div></div></div>


<div class="item grid2x3">
<div class="green">
[contact-form-7 id='425' title='Bestellungen']</div>
</div> </li>








</li>










</ul>


</div>
</body>

Alles anzeigen

Du hast die letzten 4 Boxen vor Ende der Liste mit den 12 weißen Boxen eingefügt .... das </li> und das folgende </ul> gehören nach oben. Vor das <br clear="all">. und dann ist da noch ein einsames </li>, dass da gar nicht hingehört.
Also so sollte es sein

HTML

...
  <li class="l_pop">
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 12</div>
        </li>
     </ul>
     <div class="permanent">
        <div class="item grid1x1">
          <h2>Text Text 12</h2>
          <div class="white">12</div>
        </div>
     </div>
 </li>
</ul>


<br clear="all">
<div class="item grid2x1">
<div class="green"><div align="center"><b>Überschrift</b></div><br />
<div align="justify"><font size="1,8">TEXT TEXT TEXT</font></div></div></div>


<div class="item grid2x1">
<div class="green"><div align="center"><b>Überschrift</b></div><br />
<div align="justify"><font size="1,8">TEXT TEXT TEXT</font></div></div></div>


<div class="item grid2x2">
<div class="green"><div align="center"><b>Überschrift</b></div><br />
<div align="justify"><font size="2">TEXT TEXT TEXT</font></div></div></div>


<div class="item grid2x3">
<div class="green">
[contact-form-7 id='425' title='Bestellungen']</div>
</div>


</div>
</body>

Alles anzeigen

Versuche das mal zu ändern und schau, ob sich dadurch was an deinem Fehler 'verbessert'.

... ach ja, die Formatierungen, die du da in deinen <div.. benutzt sind grottig 8).
Besser wäre eine CSS Anweisung in der Form ...<div style="text-align: justify; font-size: 1.5em;">TEXT TEXXT...</div>

Sailor

Ich dachte eigentlich auch, dass meine Frage klar und mit allen erforderlichen Informationen versehen war.

Zitat von Sailor

Hat jemand eine Idee, wie man in HTML 5 die Darstellung so einrichten kann, wie es mit HTML 4.01 transitional war - also Zellenhöhe gleich Höhe des Inhalts?

Aber ich gestehe ein, dass der Hintergrund der Frage vielleicht nicht so richtig klar geworden ist.

Ich verwende gerne 'geslicete' Bilder und eine Tabelle ist eine einfach zu erstellende Möglichkeit, dieses Bild in einem Stück auf der Webseite einzubinden. Das hat nichts mit Missbrauch von Tabellenelementen zu Layoutzwecken zu tun, sonder dient mehr dem Schutz meiner Daten/Bilder.
Die Bilder können so nicht einfach durch Rechtsklick downgeloaded werden.
Finden sich auch nicht (als Ganzes) im Cache.
Können nicht verlinkt werden.
Bieten darüber die Möglichkeit, einzelne Bildsegmente als Hyperlink zu nutzen und unterschiedliche 'title' zu vergeben.
.. ach ja... und außerdem neige ich dazu, hin und wieder kleine Spielereien in Webseiten einzubauen. So wie diese hier..

http://s414653727.online.de/tab_test/slice_pic_401.php

Ich hoffe, damit sind jetzt wirklich alle Unklarheiten ausgeräumt.
Und mit Flexbox werde ich mich näher beschäftigen.

Sailor

ja... sehe ich. Ich denke, das liegt an der Formatierung in der CSS Datei Zeile 116++

Code

#content .item{
    margin-right: 8px;
    margin-bottom: 8px;
    float: left;
    position: relative;
    overflow: hidden;
}

Hier sind/waren die Werte für margin-right und margin-bottom auf 20px gesetzt! Das sorgt für die Abstände zwischen den weißen Boxen.
Getestet hab ich es jetzt mit 8px ... ob das für deinen Laptop reicht musst du ausprobieren.

Sailor

Hallo Daisy,
ist angekommen - habe die neuen Informationen mal auf der Testseite

http://s414653727.online.de/tab_test/pop_ups.html

verarbeitet. Könnte klappen (ohne Gewähr 8))

Sailor

Guten Morgen Daisy,
ja, das wäre sehr wichtig, wenn ich die CSS Datei mal sehen könnte, denn alles das, was mit diesem 'Popup' zu tu hat, wird ja durch CSS gesteuert.
Ist diese Seite schon irgendwo online, dass ich mir sie mal live anschauen kann?

Sailor

@Bandit
Danke für den Link - schon interessant und sicher kann man das gut verwenden. Allerdings sehe ich dort keinen Lösungsansatz für dieses 'Bild-in-Tabellenzelle-Problem', denn es soll ja nicht das 'Flex Item' (Bild) an den 'Flex Container' (Tabellenzelle) angepasst werden, sondern umgekehrt. Das Bild soll so bleiben wie es ist und nicht 'verzerren', sondern die Tabellenzelle soll sich an die Bildgröße anpassen und nicht von sich aus so eine Art Padding erzeugen.
Da allerdings alle Browser, die ich zum Testen benutze, dieses Verhalten zeigen, gehe ich davon aus, dass es von W3.org so gewollt ist und in irgendeiner Spezifikation so drin steht.

Sailor

Hallo Daisy,
leider habe ich von 'Wordpress' keinen blassen Schimmer ;-), da haben wir also was gemeinsam! Ich erstelle meine Webseiten immer 'von Hand' ohne die Verwendung irgendwelcher Webseitenerstellungsprogramme. Darum fällt es mir leicht, mal eben Dinge im Code zu ändern und solche Spielereien auszuprobieren.
Hast du denn Zugriff auf deine externe css Datei? Könntest du dort von Hand ein paar Zeilen Code einfügen? Eigentlich sollte das mit jedem x-beliebigen Texteditor gehen, denn css Dateien sind reiner Text.
Etwas schwieriger könnte es sein den Code für die weißen Kästchen in den Quelltext des HTML Dokumentes zu bekommen. Bietet Wordpress die Möglichkeit eigenen HTML Code einzufügen?
Wenn ja, dann kann ich dir die Elemente, die du benötigst, gerne noch mal näher erklären... wenn dir der Beispielcode aus meinem letzten Beitrag noch nicht ausreicht!

Sailor

Damit werde ich mich mal beschäftigen - kannst mir dazu einen passenden Link posten?
Bei mir klingelt bei dem Begriff 'Flex-Layout' im Kopf nur .. adaptives Webdesign und MediaQuerys. Aber vielleicht klingelt mein Kopf da ja nicht richtig.

Sailor

Ist nur eine grobe Idee - aber die Funktionalität könnte zu dem passen, was dir vorschwebt.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title>Tooltip Test</title>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<style type="text/css">
<!--
body {
  background-color: #aaaaaa;
  }
ul {
  margin-left: 0px;
  }


li {
  display: inline-block;
  list-style-type: none;
  }


li.upper {
  position: relative;
  top: -102px;
  left: -25px;
  }


div.permanent {
  width: 100px;
  height: 100px;
  background-color: #999999;
  border: 1px solid #000000;
  border-radius: 5px;
  }


div.pop_up {
  width: 80px;
  height: 100px;
  background-color: #cccccc;
  border: 1px solid #000000;
  border-radius: 5px;
  display: none;
  }


li:hover div.pop_up {
  position: absolute;
  display: inline-block;
  }


  -->
</style>
</head>
<body>
<p>Irgendein Text mit sehr viel bla bla<br><br>
<br>


nur eben groß genug, dass das Popup genügend Platz hat,<br>


<br>
</p>
<ul>
  <li>
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 1</div>
        </li>
     </ul>
     <div class="permanent"><h3 style="text-align: right">bla bla</h3>1</div>
  </li>
  <li>
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 2</div>
        </li>
     </ul>
     <div class="permanent"><h3 style="text-align: right">bla bla</h3>2</div>
  </li>
  <li>
     <ul>
        <li class="upper">
           <div class="pop_up">mit Text 3</div>
        </li>
     </ul><div class="permanent"><h3 style="text-align: right">bla bla</h3>3</div>
  </li>
</ul>
</body>
</html>

Alles anzeigen

Hab diese kleine Datei auch mal zum ausprobieren hochgeladen:
http://s414653727.online.de/tab_test/pop_ups.html

Sailor

Hallo,
beim Umstellen diverser Webseiten von HTML 4.01 transitional auf HTML 5 ist mir folgendes aufgefallen.
Tabellenzellen passen sich nicht mehr an den Inhalt an, sondern es erscheint, dass sie in der Höhe immer ein paar Pixel größer sind, als sie sein müssten/sollten.
Bei textbasierten Inhalten in der Zelle fällt das nicht so auf, jedoch bei graphischen Inhalten kann das störend sein.
Als Beispiel hier ein Bild, das in vier Teile aufgeteilt und in die 4 Zellen einer 2x2 Tabelle eingefügt ist.
So sieht es in einem HTML 5 Dokument aus

http://s414653727.online.de/tab_test/test_html5.html

zum Vergleich die Seite mit einem HTML 4.01 transitional Doctype

http://s414653727.online.de/tab_test/test_…ansitional.html

Der Code dieser beiden Seiten ist (bis auf den Doctype) identisch.

Hat jemand eine Idee, wie man in HTML 5 die Darstellung so einrichten kann, wie es mit HTML 4.01 transitional war - also Zellenhöhe gleich Höhe des Inhalts?

Bei den 'Strict-Varianten' älterer HTML Versionen war/ist die Darstellung von Tabellenzellen mit diesen Extrapixeln auch schon so, wie bei HTML 5. Ist mir nur nie aufgefallen, da ich meist 'transitional' genutzt habe.

Vielen Dank schon mal!

Sailor

Hallo BoneCrusher,
du könntest folgendes mal versuchen:
In deiner HTML Datei schreibst du sowas wie eine CSS Weiche

HTML

<link rel="stylesheet" type="text/css" href="style/style_großes_dissplay.css" media="screen and (min-width: 1024px)">
<link rel="stylesheet" type="text/css" href="style/style_mittlers_display.css" media="screen and (max-width: 1023px) and (min-width: 800px)">
<link rel="stylesheet" type="text/css" href="style/style_kleines_display.css"  media="screen and (max-width: 799px)">

Die entsprechenden 'width-Zuordungen' sollen natürlich an deine Bedürfnisse angepasst sein. Auch können natürlich mehrere (oder weniger) Stylesheets verlinkt werden. Nur aufpassen, dass die 'max-width' und 'min-width' Angaben zueinander passen und keine Lücken oder Überschneidungen entstehen.
In die entsprechenden Stylesheets schreibst du dann die Formate, die du dir bei den in Frage kommenden Bildern vorstellst.

z.B
groß - img {width: 300px;}
mittel - img {width: 33%;} /*für 3 Bilder in der Reihe*/
klein - img {width: 100%;}

die 100% bei 'klein' sorgen dann für eine Darstellung von Rand zu Rand.

Hoffe, das hilft dir weiter.

Sailor

Leider ist auf den Bildern nicht so genau zu erkennen, worum es geht, aber im Prinzip sollte dein Problem mit einem IFrame zu lösen sein.
Zunächst musst du deine Tabelle (oder was auch immer da 'scrollbar' werden soll) in einer eigenen HTML-Datei unterbringen, wo eben nur das drin ist, was anschließend im IFrame dargestellt werden soll... z.B meine_Tabelle.html
In die Hauptseite schreibst du dann an die Stelle, an der der Inhalt von 'meine_Tabelle.html' angezeigt werden soll, einfach folgendes:

Die Positionierung und Formatierung des IFrames sollte dann vorzugsweise mit CSS erfolgen. Zumindest HTML5 mag die Ergänzungen 'width', 'height' usw. im Tag selber nicht so gerne.

Näheres zu IFrames erfährst du hier..

http://wiki.selfhtml.org/wiki/Iframe#iframe

Sailor

Ich denke, du suchst so etwas..

http://wiki.selfhtml.org/wiki/Webserver/htaccess

liest sich anfangs etwas kompliziert, ist aber eigentlich ganz einfach zu realisieren. Du muss in deiner HP Struktur ein Verzeichnis anlegen, dass du mit htaccess schützen willst. In dieses Verzeichnis kommen dann die Seitenanteile, die zum Editieren der Texte notwendig sind (das Webformular)! Aber bitte nicht die Texte, die müssen außerhalb des geschützten Verzeichnisses gespeichert sein.
in dieses Verzeichnis musst du dann noch die eigentlichen 'Verzeichnis-Schutz-Dateien' hineinkopieren (.htaccess und .htpasswd). In diesen Dateien sind die Daten der zulässigen Nutzer, also Benutzername und Passwort hinterlegt.
Näheres dazu und wie man diese Dateien erstellt solltest du in der 'Hilfe' deines Providers finden - für 1&1 sieht das so aus.

https://hilfe-center.1und1.de/hosting/skript…-a10784800.html

Viel Spaß

Beiträge von Sailor

Best Way - Fixe Elemente mit flexibler Liste

Bestehende Webseite für mobile Geräte optimieren.

Wie Header ändern bei Social-Viral-Theme ?

onmouseover popup via css-only - tooltips?

onmouseover popup via css-only - tooltips?

Tabellen in HTML5

onmouseover popup via css-only - tooltips?

onmouseover popup via css-only - tooltips?

onmouseover popup via css-only - tooltips?

Tabellen in HTML5

onmouseover popup via css-only - tooltips?

Tabellen in HTML5

onmouseover popup via css-only - tooltips?

Tabellen in HTML5

Wie bekomme ich DAS responsive dargestellt

Tabelle scrollbar machen

Textdateien über Webformular mit sicheren Benutzerkonten bearbeiten