Ansatzproblem mit Bilderanzeige und "Rahmen" dazu

M

Muckel1986

Erfahrenes Mitglied
Guten Morgen,

bin aktuell dabei für ein kleines Projekt ein Layout zu erstellen, was ich an sich auch hinbekomme. Jedoch gibt es eine Idee/Wunsch, bei der ich noch nicht wirklich weiß, wie ich jene umsetzten kann.

Zwischen dem horizontalen Hauptmenue und dem beginn der eigentlichen Seite soll es eine "Reihe" mit Bildern geben. Damit jenes aber etwas besser aussieht, wurde der Wunsch geäußert, dass man dort herum die "Ränder" eines Filmstreifens hat. Also habe ich mir so eine Grafik gesucht und sie als Hintergrundbild eingefügt, was auch funktioniert.

In dem vorhandenen div könnte ich nun auch Grafiken einbinden. Das Problem ist nur, dass diese Grafiken ja nicht automatisch in die Felder des "Filmstreifens" passen. Ich könnte nun die Bilder direkt in die Grafik bauen und somit nur eine Grafik haben, das ist aber nicht so gut, da ich zum einen wechselnde Bilder haben möchte und es je Bild eine Verlinkung geben soll.

Da ich zurzeit nur lokal arbeiten kann (nur eine ISDN-Verbindung und kein FTP), habe ich nur diesen Screen von dem Testobjekt (siehe Anhang).

Habt ihr eine zündende Idee?

Liebe Grüße
Muckel/Tobias
 

Anhänge

  • background.jpg
    background.jpg
    14 KB · Aufrufe: 17
Moin,

besitzen die Bilder, die da präsentiert werden sollen, eine einheitliche Dimension?

mfg Maik
 
Hallo Maik,

bislang haben jene noch unterschiedliche Größen. Aber die Höhe würde ich vorher noch Vereinheitlichen, so dass "nur" die Breite unterschiedlich ist/wäre. Wenn das aber ein "no go" wäre, dann müsste ich eben jene Grafiken/Bilder raussuchen, die die gleiche Höhe haben.

MfG
Muckel
 
Da ja die Größen des Filmstreifens bis ins Detail fix sind, wären hier einzelne umfliessende Blöcke, oder auch eine horizontale Liste mit entsprechender CSS-Formatierung denkbar, die sich über das "Rastermaß" legen, und in denen mit text-align:center die Grafikelemente horizontal zentriert werden.

Ansonsten hättest du auch die Möglichkeit, mit der margin-Eigenschaft für die Elemente einen Außenabstand festlegen, um sie auf dem Filmstreifen ins rechte Licht zu rücken. Wenn die Bildbreite variiert, ist für jedes Bild sein zugeschnittener Wert festzulegen.

mfg Maik
 
Moin,

ja, wenn meine Auflösung des div mit dem Hintergrund-Filmstreifen gleichbleibt, also fix ist, müsste das gehen. Doch wenn ich unterschiedliche Auflösungen habe, bekomme ich ein Problem, da sich ja dann auch die Breite des Filmstreifens ändert und somit auch die Breit des einzelnen "Feldes".

Mir ist aber eben die Idee gekommen, dass ich dieses "Lochstreifenmuster" des Filmstreifens oben und unten als Hintergrundbild einfüge und die einzelnen Bilder dann auch per float zB nebeneinander lege und ihnen jeweils einen Seitlichen schwarzen Rahmen gebe, dann müsste es ja ähnlich aussehen.

Danke für deinen Ansatz!


Wie mein Versuch aussieht, kann man dem Bild im Anhang entnehmen. Der html-Teil sieht so aus:
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>Muckels Internetseite</title>
<link rel="shortcut icon" href="Grafiken/favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="oben">
<ul>
    <li><a href="#oben">Startseite</a></li>
    <li>der Autor</li>
    <li>Jugendbewegtes</li>
    <li>Rheuma</li>
    <li>Lyrik</li>
    <li>G&auml;stebuch</li>
    <li>Impressum</li>
</ul></div>
<div id="kopf">
    <div id="dia-oben">&nbsp;
    <div id="dia-unten">&nbsp;
    <img src="Bilder/buendisches/Kothe/F2B24.jpg" alt="Kothe" />
    <img src="Bilder/Personen/platzhalter2.jpg" alt="person" /></div></div></div>
<br style="clear:both;" />
<div id="links">Linke Spalte
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
<div id="rechts">Rechte Spalte
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
<div id="mitte">Mitte</div>
<div id="fuss">Fuss</div>
</body>
</html>
und der CSS-Bereich so:
Code: 
body {
    padding:0;/*oben, rechts, unten, links */
    margin:0;/*oben, rechts, unten, links */
    overflow:auto;
    /*background-color:#2B2B2B;
    color:#999;*/
    font-family: Calibri, "Sans Serif", "Century Gothic";}

#oben {
    display:block;
    padding:0;/*oben, rechts, unten, links */
    margin:0;/*oben, rechts, unten, links */
    background-color:#000;
    height:2.0em;
    width:100%;
}

#links {
    float:left;
    display:block;
    padding:0;/*oben, rechts, unten, links */
    margin:0 0 0 0;/*oben, rechts, unten, links */
    width:15%;
    border:1px solid darkred;
}

#rechts {
    float:right;
    display:block;
    padding:0;/*oben, rechts, unten, links */
    margin:0 0 0 0;/*oben, rechts, unten, links */
    width:15%;
    border:1px solid darkred;
}

#kopf {
    display:block;
    margin:0;/*oben, rechts, unten, links */
    padding:0;/*oben, rechts, unten, links */
    text-align:center;
}

#dia-oben {background: url(Bilder/allgemeines/Dia-06-oben.jpg) center top no-repeat;border:none;padding:0;margin:0;}
#dia-unten {background: url(Bilder/allgemeines/Dia-06-unten.jpg) center bottom no-repeat;border:none;padding:0;margin:0;}

#mitte {
   
}

#fuss {
    clear:both;
    display:block;
    text-align:center;
}

/*ListenMenues*/
#oben ul {
    list-style-type:none;
    margin:0 0.5em 0 0.5em;/*oben, rechts, unten, links */
    padding:0;/*oben, rechts, unten, links */
    color:#ccc;
    font-size:1.2em;
}

#oben li {
    float:left;
    display:block;
    margin:0.25em;}

#oben li a {color:#ccc;}

#oben li a:hover  {font-weight:bold;}

/*Bilder*/

#kopf img {float:left;display:block;height:10em;margin:0.25em;padding:0;border:1px solid darkred;}

Problem aktuell ist, dass diese "Lochstreifen"-Grafiken nicht richtig positioniert sind und nicht über die Gesamte Breite gehen. Aber ich versuche es weiter.

LG
Muckel
 

Anhänge

  • background2.jpg
    background2.jpg
    30,1 KB · Aufrufe: 14
Steht die Seite irgendwo online zur Verfügung, um sie incl. der eingebundenen Grafikdateien begutachten zu können?

mfg Maik
 
Derweil hab ich mal mit dem Attachment aus deinem ersten Post etwas zusammengewerkelt :-)

mfg Maik
 

Anhänge

Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück