Grafiken formatieren html/css

*Sheep

*Sheep

des Unterseepudels Kern
Ich bin nicht so der html-h4xXx0r, darum brauche ich ein bisschen hilfe.
Code: 
<html>
<body>
+---------++--------+
|         || Bild_B |
| Bild_A  |+--------+
|         || Bild_C |
+---------++--------+
</body>
</html>

Ich möchte drei Grafiken, wie in der Skizze zu sehen, anordnen. Geht es auch ohne Tabellen?
Wenn ja wie?
 
Hi Sheep, also entweder feste Positionierung:

Code: 
<div style="position:absolute; left:0px; top:0px;">
  <img src...>
</div>
<div style="position:absolute; left:100px; top:0px;">
  <img src...>
</div>
<div style="position:absolute; left:100px; top:100px;">
  <img src...>
</div>

oder schau dir mal die float-Style in dagnus Link an.
 
Vielen Dank für den Schubser in die die richtige Richtung. =)

Das bringt ein akzeptables Ergebnis:
Code: 
<div style="position:relative; left:0px; top:0px;">
<img ...
</div>
<div style="position:relative; left:95px; top:-34px;">
<img...
</div>
<div style="position:relative; left:95px; top:-30px;">
<img....
</div>

Ist es auch ein guter Stil?
 
Wo wir gerade schon mal beim Thema HTML und CSS sind, stell ich hier meine Frage und mach nicht extra nen neuen Thread auf.
Es geht hier auch im Layout. Folgendes: Man hat links eine Navigation und rechts davon sollen die Inhalte der Links erscheinen. So, wie bekomme ich es nun hin, dass die Inhalte auch dort angezeigt werden aber die Navigation nicht neu geladen werden muss? Um's ganz einfach zu machen, habe ich bisher immer die Navigation in die verlinkten Seiten mit reingepackt. Aber wenn man mal ein paar mehr Seiten zu basteln hat, ist das ein Riesenaufwand...
Vielleicht kann mir ja jemand einen Tip geben. Hab auch schon gegoogelt, weiß aber nicht so recht wonach ich suchen soll.
 
*Sheep schrieb:
...
Ist es auch ein guter Stil?
Zum Vergrößern anklicken....
Ich würde sagen, nein. Denn es setzt gewisse Fensterbreiten vorraus. Guter stil wäre eher wenn du float verwendest, das bricht um sobald kein Platz mehr da ist.

@zuglufttier
Entweder müsstest du frames verwenden oder den content in ein iframe packen. Allerdings ist es im Grunde genommen guter stil das Navigation immer neu mitgeladen wird. Der zusätzliche Traffic ist im vergleich zu Grafiken irrelevant. Dafür können auch Suchmaschinen deine Seiten lesen.
 
zuglufttier schrieb:
So, wie bekomme ich es nun hin, dass die Inhalte auch dort angezeigt werden aber die Navigation nicht neu geladen werden muss? Um's ganz einfach zu machen, habe ich bisher immer die Navigation in die verlinkten Seiten mit reingepackt. Aber wenn man mal ein paar mehr Seiten zu basteln hat, ist das ein Riesenaufwand...
Zum Vergrößern anklicken....
Für größere Seiten nehme ich dem Falle Frames, weil es einfach zu umständlich ist, den Navigationsbereich in dutzenden Dateien zu ändern. Das mit dem Neuladen ist da eigentlich eher weniger ein Problem.

Man kann das sicher auch über ein CGI-Skript machen, welches einfach die HTML-Datei mit dem Navigationsbereich und zusätzlich eine zweite HTML-Datei mit dem Inhalt, der im Navigationsbereich ausgewählt wurde, ausgibt. Sowas kann man mit einem Bourne-Shell-Skript machen. Dann braucht man keine Frames.
 
Frames sind Teufelswerk :D Naja, das klappt halt nicht mit Textbrowsern und so, ist nicht soo wichtig aber ich will halt komplett barrierefrei was machen, ist schließlich nur Hobby von mir und dann soll auch ein bisschen Herzblut mit einfließen :)
Also ist das nicht alleine mit HTML möglich? Schade... Wenn man nämlich zehn Seiten hat, dann ist das ne Menge Arbeit, nur weil ein Link geändert werden soll. Ok, in 10 Minuten ist das auch gegessen aber halt nicht so schön. Hmm, will dann auch nur XHTML und CSS einsetzen, damit's halt jeder ohne Einschränkungen lesen kann. Und mit cgi kenn ich mich nun überhaupt nicht aus.
 
hi,

Code: 
<div style="heigth:200px;width:200px;padding:0px;">
<img style="float:left;" width="100px " height="200px" src="image1.jpg" alt="Trallalla" />
<img width="100px " height="100px" src="image2.jpg" alt="Trallalla" />
<img width="100px " height="100px" src="image3.jpg" alt="Trallalla" />
</div>

CU

Martin
 
Also ist das nicht alleine mit HTML möglich? Schade... Wenn man nämlich zehn Seiten hat, dann ist das ne Menge Arbeit, nur weil ein Link geändert werden soll. Ok, in 10 Minuten ist das auch gegessen aber halt nicht so schön.
Zum Vergrößern anklicken....
Wenn du in 10 oder wie vielen Seiten auch immer deine Navigation einbettetest, dann
sollte die überall identisch sein und ein Suchen / Ersetzen braucht selbst bei über 1000
Seiten sicherlich keine 10 Minuten.
 
Da mich das mit dem CGI jetzt interessiert hat, mußte ich doch unbedingt ein bißchen basteln. Das ist eigentlich auch gar nicht so schwer umzusetzen. Folgendes ist eine Minimalversion mit einer Navigationsleiste (links) und zwei Dateien, die nach Auswahl aus der Navigationsleiste rechts daneben dargestellt werden.

Start.sh
Code: 
#!/cgi-bin/sh

PATH=/cgi-bin
IFS="
"
eval $QUERY_STRING

echo 'Content-type: text/html
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
      <HTML>
      <HEAD>
            <TITLE>BLA</TITLE>
      </HEAD>
      <BODY>

      <TABLE BORDER=0 SPACING=0 CELLPADDING=0>
             <COL WIDTH=20%>
             <COL WIDTH=80%>
      <TR VALIGN=TOP>
          <TD BGCOLOR=#DFE5FF>'
              cat Navigation.html
echo '    </TD>
          <TD>'
              if [ -n "$PAGE" ]
                 then cat "$PAGE"
                 else cat ERSTESEITE.html
              fi
echo '    </TD>
      </TR>
      </TABLE>
      </BODY>
      </HTML>'

exit
Das war dann eigentlich auch schon der "schwierige" Teil. Aber jeder, der Shell-Skripten schreiben kann, kommt damit klar. Jetzt braucht man nur noch die Datendateien, einfaches HTML, ohne <HEAD> und <BODY>:

Navigation.html
Code: 
<P><A HREF=Start.sh?PAGE=ERSTESEITE.html>ERSTESEITE</A><BR>
<A HREF=Start.sh?PAGE=ZWEITESEITE.html>ZWEITESEITE</A></P>
ERSTESEITE.html
Code: 
<P>Das ist die Datei ERSTESEITE.html!</P>
ZWEITESEITE.html
Code: 
<P>Das ist die Datei ZWEITESEITE.html!</P>
Es geht also relativ bequem auch ohne Frames. Man spart sich damit sogar den ganzen <HEAD>-Kram in den einzelnen Datendateien. Man braucht nur eine Bourne-Shell und ein cat(1) in seinem CGI-Verzeichnis.

Beim Stichwort "barrierefrei" muß ich allerdings passen, ich bin nicht der HTML-Crack. Keine Ahnung, ob Tabellen barrierefrei sind. Auf jedenfall haben Textbrowser jetzt keine Probleme mehr :)
 
0815Chaot schrieb:
Für größere Seiten nehme ich dem Falle Frames, weil es einfach zu umständlich ist, den Navigationsbereich in dutzenden Dateien zu ändern. Das mit dem Neuladen ist da eigentlich eher weniger ein Problem.
Zum Vergrößern anklicken....

Dafür verwendet man normalerweise Templates. Vorausgesetzt einem steht PHP oder eine andere Scriptsprache zur Verfügung.
 
Nun ja, sowas wie "Templates" habe ich mit meiner oben geposteten CGI-Variante ja umgesetzt. Finde ich mittlerweile ehrlich gesagt sogar besser als dieses Frame-Gefriemel. Aber PHP? :zitter: Da bleibe ich doch lieber bei einer statisch gelinkten Bourne-Shell.
 
Ob man das nun mit PHP oder CGI macht sollte hierbei keine Rolle spielen.

0815Chaot schrieb:
Keine Ahnung, ob Tabellen barrierefrei sind. Auf jedenfall haben Textbrowser jetzt keine Probleme mehr :)
Zum Vergrößern anklicken....

Tabellen sollte man nur verwenden wenn man wirklich Tabellen darstellen will. Oftmals werden Tabellen als Designelement zur Seitenstrukturierung missbraucht. Hier sollte man lieber auf divs ausweichen. Obwohl es teilweise ein Krampf ist alles ohne Tabellen hinzubekommen :rolleyes:
 
Herrmann schrieb:
Ob man das nun mit PHP oder CGI macht sollte hierbei keine Rolle spielen.
Zum Vergrößern anklicken....
Ähem, CGI ist eine standardisierte Server-Schnittstelle. Als CGI-Backend kann im Prinzip jedes ausführbare Programm laufen, seien es Skripten (Shell, PHP, Perl) oder Binäranwendungen (C, C++, Java).

Herrmann schrieb:
Tabellen sollte man nur verwenden wenn man wirklich Tabellen darstellen will. Oftmals werden Tabellen als Designelement zur Seitenstrukturierung missbraucht. Hier sollte man lieber auf divs ausweichen. Obwohl es teilweise ein Krampf ist alles ohne Tabellen hinzubekommen :rolleyes:
Zum Vergrößern anklicken....
Ja, ich weiß, und doch verwende ich Tabellen zur Umsetzung eines gewünschten Designs. Mich würde interessieren, wie man zum Beispiel mein oben gepostetes CGI-Skript ohne Verwendung von <TABLE> schreiben würde - natürlich mit dem gleichen Design-Ergebnis.
 
0815Chaot schrieb:
Mich würde interessieren, wie man zum Beispiel mein oben gepostetes CGI-Skript ohne Verwendung von <TABLE> schreiben würde - natürlich mit dem gleichen Design-Ergebnis.
Zum Vergrößern anklicken....

Ganz grob. Man müsste noch die Einrückungen der Listenelemente rausnehmen und so weiter. Erst erscheints kompliziert, aber der Code wird wesendlich lesbarer, wenn die Styleangaben dann in einer css Datei verschwinden.

Code: 
<ul style="width:20%;float:left;">
  <li>Erster Navipunkt</li>
  <li>Zweiter Navipunkt</li>
</ul>
<div style="margin-left:20%;">
  Pipapo und Trallalla, ich bin der Content
</div>

Schau dir mal den Quälcode von http://www.pronix.de/pronix-11.html an. Dort ist das Style bis auf den Kopf wie gewünscht. Das ist übrigens auch ein Programm übers CGI

Das mit den Tabellen und Behindertengerecht ist eine Sache für sich. Wir, die sehen können, bringen die Tabellenfelder in den richtigen Zusammenhang. Für einen Nichtsehenden schauts da anders aus, weil er nicht wissen kann, ob die Elemente einer Zeile zusammengehören, oder die einer Spalte. Es ist keine logische Strukturierung mehr vorhanden. Beschreibe mal die Position des dritten Navigationspunktes von oben nur mit Sprache.
In der Liste stellt sichs anders da. "In der ersten Liste das dritte Element" Und Navigationspunkte sind Auflistungen. Es ist ziemlich sinnvoll für jeden Zweck das html Element zu nehmen, dass dafür vorgesehen ist.
Wenn wir also mit einem Textbasierten Browser eine Seite erfassen können, heisst das noch lange nicht, dass ein Nichtsehender damit klarkommt.

CU

Martin
 
Folgendes sollte auch funktionieren.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <title>title</title>
    <style type="text/css">
      body {
        margin:0px; }
      #navigate {
        width:20%;
        float:left; }
      #content {
        width:80%;
        float:left; }
    </style>
  </head>
  <body>
    <div id="navigate">
      dummy
    </div>
    <div id="content">
      dummy
    </div>
  </body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben