| 

.NET C# Java Javascript Exception

0
Hallo,
ich möchte drei Grafiken im Seitenheader wie folgt nebeneinander positionieren:

  • Grafik 1, links oben, einmalig
  • Grafik 3, rechts oben, einmalig
  • Grafik 2 (ist 1 Pixel breit) soll sich direkt an Grafik 1 anschließen und so oft wiederholt werden, dass die gesamte Breite der Seite ausgefüllt ist

Wie mache ich das am geschicktesten? CSS?

Liebe Grüße, Tom
News:
13.09.2011
Metal-Frog
Metal-Frog
731 ● 7
Das hier kommt meiner Anforderung schon ziemlich nahe: http://www.ohne-css.gehts-gar.net/0029.php.
Leider kann ich die Lösung nicht bei mir anwenden, da die rechte Grafik einen transparenten Rand hat und man in diesem Fall die Grafik aus der Mitte "durch" sieht.
– Metal-Frog 13.09.2011
3 Antworten
3
Zuerst: +1 für spiike! Tabellen sind nicht zur Gestaltung da.

Von absoluten Positionen würde ich Abstand nehmen.
Meiner Meinung nach ist das eine Aufgabe für float.
Hier sind 2 Beispiele:

Das erste illustriert das Grundprinzip (Container mit fixer Höhe, zwei Bilder - oder auch divs mit Hintergrund, falls da noch Inhalt rein soll - mit fixen Dimensionen, die jeweils rechts und links gefloated sind.

Das zweite zeigt die Anpassung an deinen Spezialfall mit dem transparenten Hintergrund.
Durch einen Margin im Container und einen negativen Margin gleichen Betrages beim rechten img, kann das geladene Bild ruhig transparent sein, der Hintergrund scheint dann nicht mehr durch.
<html>
 <head>
  <style>
   #header{
    height:100px;
    background-color:#00f;
   }
   #header.transparent_right{
    margin-right:100px;
   }
   #header img.left{
    float:left;
    height:100px;
    width:200px;
    background-color:#0f0;
   }
   #header img.right{
    float:right;
    height:80px;
    width:200px;
    background-color:#f00;
   }
   #header.transparent_right img.right{
    margin-right:-100px;
   }
  </style>
 </head>
 <body>
  <div id="header">
   <img src="" class="left" alt="" />
   <img src="" class="right" alt="" />
  </div>
  <br/>
  <div id="header" class="transparent_right">
   <img src="" class="left" alt="" />
   <img src="" class="right" alt="" />
  </div>
 </body>
</html>


cu
huckepick
14.09.2011
huckepick
huckepick
842 ● 1 ● 8
Hallo huckepick. Vielen Dank!!! Das ist für mich die perfekte Lösung!
– Metal-Frog 14.09.2011
Hallo zusammen,

das sieht fast gut aus :) Jedoch muss das "id"-Attribut ein eindeutiger Wert sein. Bitte berücksichtigt das, sonst bekommt Ihr per ECMAScript/JavaScript Probleme bei document.getElementById().

Siehe dazu auch: http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

bzw.

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

Gruß Karl
– Karl 14.09.2011
Hallo Karl,
huckepick hat ja 2 Beispiele gebracht. In der Anwendung gibts den Header nur einmal. Aber trotzdem danke für den Hinweis. Gruß, Tom
– Metal-Frog 14.09.2011
0
Hallo,

probier mal:

<style>
  body, .mytable, mytable td {
    margin: 0px;
    padding: 0px;
  }
  .repeat {
    background-repeat: repeat;
  }
</style>

<table border="0" cellpadding="0" cellspacing="0" class="mytable" width="100%">
  <colgroup>
    <col width="grafik1 breite in pixeln" />
    <col width="*" />
    <col width=grafik2 breite in pixeln" />
  </colgroup>
  <tr>
    <td><img src="grafik1.jpg" /></td>
    <td><img src="pixel.png" class="repeat" /></td>
    <td><img src="grafik2.jpg" /></td>
  </tr>
</table>


Sollte passen, ungetestet.

Grüße
13.09.2011
Nicolai Schönberg
Nicolai Schönberg
2,3k ● 1 ● 8
Hallo, danke für deine Antwort. Konnte sie leider nicht erfolgreich anwenden. Und, eine Lösung nur mit CSS wäre mir lieber ...
– Metal-Frog 13.09.2011
0
Bullshit, Tabellen sind für Tabelleninhalte da und nicht um Grafiken zu positionieren.

Versuchs doch mal so:

Setzt Grafik_2 in den Hintergrund einer Div;
<div class="grafik2">
 <div class="grafik1"><img src="grafik1" /></div>
 <div class="grafik3"><img src="grafik3"</div>
</div>


Jetzt weiß ich nicht ob deine beiden Grafiken transparenten haben, aber du könntest dann mit position:absolute arbeiten und mit margin-left und margin-right die Elemente positionieren.

Solltest du transparenzen haben, so würde ich es so angehen:
<div class="holder">
 <div class="grafik1"><img src="grafik1" /></div>
 <div class="grafik2"></div>
 <div class="grafik3"><img src="grafik3" /></div>
</div>


Grafik 1 und 3 auf eine feste Breite. Beim laden der Seite einfach ein Javascript/jQuery Script schreiben was die berechnung der Abstände übernimmt.
13.09.2011
spiike
spiike
116 ● 5

Stelle deine Css-Frage jetzt!