Grafiken überlappend positionieren

bichi · 16.04.2013

Liebe Leute,
ich möchbte eine Website so gestalten:

Aber ich kriege es nicht hin, die beiden kleinen Grafiken so zu positionieren :-(
Habe den ganzen Tag das Internet durchschaufelt. Was ich gefunden habe ist auf SelfHTML etwas zu position. Aber das positioniert die Grafik ja in Bezug auf den Bildschirmrand, ich möchte sie aber innerhalb der Tabelle in Bezug zu den anderen Grafiken platzieren. Oder versteh ich da was überhaupt nicht ?
Kann mir jemand helfen?
Vielen Dank!

leveler · 16.04.2013

AW: Grafiken überlappend positionieren

ich möchte sie aber innerhalb der Tabelle in Bezug zu den anderen Grafiken platzieren.

Gestaltest Du das Layout mit Tabellen? Wenn ja, setze Dich mit dem Boxmodel auseinander.Tabellen sind für tabellarische Inhalter sinnvoll, aber nicht mehr für ein Layout.
Den nötigen Code kann ich jetzt spontan nicht aus dem Ärmel schütteln , aber über den z-Index kannst Du Elemente/Grafiken übereinander legen, ähnlich wie in PS mit Ebenen.

cebito · 16.04.2013

AW: Grafiken überlappend positionieren

leveler schrieb:
aber über den z-Index...

Unnötig, denn der Berg ist ja nicht Contentrelevant. Demnach reicht es, ihn als Hintergrundbild einzusetzen.

patrick_l · 16.04.2013

AW: Grafiken überlappend positionieren

bichi schrieb:
Habe den ganzen Tag das Internet durchschaufelt. Was ich gefunden habe ist auf SelfHTML etwas zu position.

Finger weg von SelfHTML. Diese Dokumentation ist höchstes noch als Nachschlagewerk zu gebrauchen. Das auch nur wenn du bereits HTML beherrschst. Du solltest dich also mit HTML und CSS gründlich auseinander und dir nötiges Grundlagenwissen aneignen. Dann klappt es auch mit dem Stappeln und Positionieren von Bildern und anderen Inhalten.

Zum Lernen gibt es neben entsprechender Fachlektüre auch im Internet viele hilfreiche Ressourcen. Sowohl ganze Bücher als auch detaillierte Dokumentationen mit weiteren hilfreichen Quellen. Hier einmal paar Adressen:

- HTML5-Handbuch - Webkompetenz
- Mozilla Developer Network | Lerne HTML, CSS & JS
- Einführung in XHTML, CSS & Webdesign (Michael Jendryschik)
- Little Boxes | Webseiten gestalten - HTML & CSS (Peter Müller)

leveler schrieb:
Tabellen sind für tabellarische Inhalter sinnvoll, aber nicht mehr für ein Layout.

Tabellen waren für Layouts noch nie sinnvoll

Liebe Grüße, Patrick

leveler · 16.04.2013

AW: Grafiken überlappend positionieren

Tabellen waren für Layouts noch nie sinnvoll

Welchen Browser hast Du denn vor 10 - 15 jahren benutzt? Lynx?

Welche Alternative gab es da zum Layouten abseits von Tabellen? Aber gut, das sind olle Kamellen

bichi · 16.04.2013

AW: Grafiken überlappend positionieren

Danke für die Hinweise. Ich schau mir das boxmodel mal an.

Finger weg von SelfHTML. Diese Dokumentation ist höchstes noch als Nachschlagewerk zu gebrauchen. Das auch nur wenn du bereits HTML beherrschst. Du solltest dich also mit HTML und CSS gründlich auseinander und dir nötiges Grundlagenwissen aneignen. Dann klappt es auch mit dem Stappeln und Positionieren von Bildern und anderen Inhalten.

Ja, ein Grundlagenwissen habe ich schon, bis jetzt habe ich halt einfachere Layouts gemacht, das ging mit dem was ich wusste. Danke für die Literatur - und Quellentipps, ich werde gerne versuchen damit weiterzukommen.

Liebe Grüsse bichi

patrick_l · 16.04.2013

AW: Grafiken überlappend positionieren

leveler schrieb:
Welchen Browser hast Du denn vor 10 - 15 jahren benutzt? Lynx?
Welche Alternative gab es da zum Layouten abseits von Tabellen? Aber gut, das sind olle Kamellen

Ich will es mal so sagen, es hat sich zu dem Zeitpunkt keiner wirklich Gedanken darüber gemacht. Ja, ich weiß das es im Nachhinein leicht gesagt ist.

Eben olle Kamelen

Liebe Grüße, Patrick

hub · 17.04.2013

AW: Grafiken überlappend positionieren

Moin moin,
so was kannst du z.B. mit absolut positionierten div-Elementen an der richtigen Stelle erschlagen. Um konkreter zu werden müsstest du mal deinen bisherigen Code zeigen, oder einen Link zur Seite.

Gruß Ulli

ullihantke · 17.04.2013

Ich würde das obere Bild auch als hintergrundgrafik einfügen. Das wäre die einfachste Variante.

Mit DIV's und css kannst du dann den Rest gestalten.

Ich würde dir auch von Tabellen abraten.

Sent from my iPhone using Tapatalk

bichi · 17.04.2013

AW: Grafiken überlappend positionieren

Das ist der Code wie er im Moment ist. Ich habe versucht, das Bild als Hintergrundbild einzufügen, aber dann kachelts und ich habs im CSS nicht hingekriegt das no repeat wirksam zu machen. Mit Layern habe ich noch keine Erfahrung, konnte es zwar als Layer platzieren aber nicht als Hintergrund positionieren.
Schande.

<body class="background">
<table class="tableFrame" border="0" cellpadding="0" cellspacing="0" align="center">
<tr class="header">
<td align="left" colspan="2"><img src="images/header.jpg" style="padding-left:15px" /> </td>
</tr>
<tr>
<td ><table class="tableFrame" border="0" cellpadding="0" cellspacing="0">
<tr class="menubar" >
<td width="50%" id="navbar" ></td>
<td width="14%" align="center" id="navbar"><ul>
<li onmouseover=""><a >Leistungen</a>
<ul id="navmenu">
<li><a href="" >Software Entwicklung</a></li>
<li><a href="">Consulting</a></li>
<li><a href="team.htm">Websites</a></li>
</ul>
</li>
</ul></td>
<td width="10%" align="center" id="navbar"><ul>
<li onmouseover=""><a style="color:#f96b0c">Über uns</a>
<ul id="navmenu">
<li><a style="color:#FFCC00;" href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
</ul></td>
<td width="14%" align="center" id="navbar"><ul>
<li onmouseover=""><a>Projekte</a>
<ul id="navmenu">
<li><a href="brazilian.htm">Firmen</a></li>
<li><a href="kampfkunst.htm">Entwicklung</a></li>
<li><a href="nextlevel.htm">Websites</a></li>
</ul>
</li>
</ul></td>
<td align="center" width="25%"></td>
<td width="5%"><div align="center" id="navbar" style="padding-right:10px">Kontakt</div></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="6" class="menuLine"></td>
</tr>
<tr>
<td class="main" width="960" height="600" ><p style="padding:25px; padding-top:0px; font-size:12px;">bla blab lab alb alb alba<br/>
vVLku kU iueznSNC
</td>
<td><div style="position:absolute; top:300px; left:100px; width:300px;
background-color:#FFFFE0; border:1px solid #804000; padding:10px">bla bla blabal</div>
<div style="position:absolute; top:360px; left:520px;"> <img src="images/software.jpg" width="180" height="180" alt=""/></div>
<div style="position:absolute; top:360px; left:820px;"> <img src="images/sps2.jpg" width="180" height="180" alt="SPS"/> </div></td>
</tr>
</table>

leveler · 17.04.2013

AW: Grafiken überlappend positionieren

Ich habe versucht, das Bild als Hintergrundbild einzufügen, aber dann kachelts und ich habs im CSS nicht hingekriegt das no repeat wirksam zu machen.

-->
http://www.css4you.de/backgroundproperty.html

°°°°°°°°°°°°
http://www.css4you.de/workshops.html

bichi · 17.04.2013

AW: Grafiken überlappend positionieren

aahhhh...! Viielen Dank für die Links, die sind super.
Aber was hab ich denn die ganze Zeit gemacht??!?:kopfpatsch:
Na auf jeden Fall euch allen vielen Dank ich habe viel gelernt und viele Anstösse bekommen. Es wird nicht mein letztes Mal sein...

Liebe Grüsse bichi

Curanai · 19.04.2013

AW: Grafiken überlappend positionieren

Da gruselt mich der Content im Zeitalter von Mobilgeräten, Traffic, überteuerten Tarifen und damit unnötigen Dingen zum Laden ja mal wieder richtig ... wenn Du also nicht auf Deine geliebte Table verzichten willst/kannst, lege so viel extern (CSS; da geht bei Dir einiges!!) wie nur möglich. Ich persönlich, der noch aus IE3 und NN4 kommt (aaahhhh ... Kamellen!!!), fand aber Mischwerte (%, px) schon immer "besorgniserregend" im Verhalten der jeweiligen Browser.

Teste mit allen Browsern - nicht nur mit Deinem Lieblingsbrowser. Empfehlung: Standardinstallation (also keine Settings mehr nachlegen Deinerseits). Schau Dir Dein Werk in allen gängigen Browsern an, welche angeblich derzeit folgende sind: IE, FF, Opera, Safari, Chrome ... persönlich suchst Du Dir dann noch ein oder zwei repräsentative Exoten (ich nehme K-Meleon, Maxthon, Sleipnir und was aus China) ...

Und: Opera Mobile interpretiert einen "background" im body-Tag aktuell (!) nicht immer wie erwartet. Habe da im Moment auch recht abenteuerliche Ergebnisse: Identische Seitenaufbauten, gleiches CSS, gleiches Verzeichnis - das eine mit Bild, das andere ohne. Aber das ist "mobile" ...

Viel Erfolg.

ullihantke · 19.04.2013

Meine größten sorgen macht mir der IE. Wenn in diesem Browser alles geht wir es soll, dann hast du schon mal die halbe Miete. Aber auch schon so oft erwähnt, Tabellen sind für tabellarische Zwecke da wie Listen und und und, aber nicht für ein Gerüst von Websites. Es lohnt sich an dieser stelle die bekannte Technik zu verlassen und neues zu versuchen.

Sent from my iPhone using Tapatalk

Curanai · 19.04.2013

AW: Grafiken überlappend positionieren

Offtopic: Ich habe irgendwie nie Probleme mit IE ... ich hab immer nur exotische Probleme oder der dreckige Safari spackt mit den Standards rum.

ullihantke · 19.04.2013

Hmm ich persönlich habe mit Safari keine Probleme. Bei was hast du da Probleme?

Sent from my iPhone using Tapatalk

Curanai · 19.04.2013

AW: Grafiken überlappend positionieren

Du bist Apfel-Jünger - ich bin so ziemlich das Gegenteil (daher auch meine Wortwahl zu dem Browser). Es ging damals (aktuell liegt nix vor) um einen "mitwachsenden Hintergrund (DIV) inkl. background-color" - alle Browser konnten es ... nur der Safari nicht.

Musste das dann "anders" lösen - klappte ja auch (aber eben nicht wirklich mehr W3C - sondern "dirty"). Aber wo ein Apfel drauf ist, kann auch mal ein Wurm drin sein ...

bichi · 23.04.2013

AW: Grafiken überlappend positionieren

Das mit dem Testen stimmt auf jeden Fall! Ich teste während dem Programmieren ständig mit IE und Safar, die andern Browser muss man sich da z.T. selbst installieren oder aber auf einem dieser Onlineprogramme ausprobieren. Dazu muss man es aber auch bereits irgendwo aufgeschaltet haben.

Im Moment gehts bei mir halt noch am besten mit Tabellen, zuzeit tut es auch alles wie es soll. Werde mich dann aber sicher auch an Neues wagen...