Ansatzproblem mit Bilderanzeige und "Rahmen" dazu

Muckel

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

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

bei sowas gehts nicht anders

man kann in WP die Größe der Thumbs einstellen

und die muss so sein, dass die Thumbs da reinpassen.

es kann mal ein Bild zuwenig breit sein keine Problem

oder zuwenig hoch, aber man muss die Thumbs da reinbringen ;)

lg

Muckel

Guten Tag,

es geht nicht um die Galleriefunktion des WP, sondern um das Layouten an sich. Meine Idee ist nun, dass ich in dem div in dem die Bilder sind, dieses "Lochstreifenmuster" oben und unten anordne und dazwischen dann die Bilder habe. Jene sollten dann einen rechten und schwarzen Rahmen bekommen, damit man diese "Einteilungen" hat.

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>

Alles anzeigen

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;}

Alles anzeigen

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

Monika

du kennst meine Glaskugeln? die sind sowas von faul - aber die sind Mitglied der Glaskugel Gewerkschaft , da kannste fast nichts machen :-?

daher wäre ein Link zu dem *die Bilder tun nicht was ich will* sehr hilfreich fürs Helfen und so ....

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Ansatzproblem mit Bilderanzeige und "Rahmen" dazu

Jetzt mitmachen!