zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild am Bildrand eines anderen ausrichten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.04.2015, 23:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2015
Beiträge: 4
lcrms befindet sich auf einem aufstrebenden Ast
Standard Bild am Bildrand eines anderen ausrichten

Hallo zusammen,

ich arbeite im Moment an einer Webseite und komme an diesem Punkt einfach nicht weiter. Ich habe in der HTML-Datei ein großes Bild eingefügt, das das Hintergrundbild sein soll. Dann habe ich vier kleinere Bilder hinzugefügt, das sind Links zu den Unterseiten und sie mit dem z-index hervorgehoben, damit sie über dem großen Bild liegen. Die vier kleinen Bilder sollen wie ein Menü untereinander direkt am linken Rand des unteren Bildes liegen.
Zuerst habe ich dem Bild eine feste Position gegeben und so auch einfach die vier "Menüpunkte" angepasst, in dem sie den selben linken Seitenabstand bekommen haben, wie das große Bild.
Jetzt soll das große Bild aber doch zentriert in der Mitte des Browserfensters liegen und ich komme einfach nicht darauf, wie ich die Menüpunkte jetzt am linken Rand des großen Bildes fixieren kann, so dass sie sich mit bewegen, wenn man das Fenster vergrößert/verkleinert... ich hab schon ein bisschen mit position:relative und absolute rumprobiert, kriege es aber einfach nicht hin
Kann mir da jemand weiterhelfen?

Liebe Grüße,
lcrms
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.04.2015, 03:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Kann mir da jemand weiterhelfen?
Dazu hälst du uns leider zu viele Informationen vor.

1. Deinen bisherigen Quelltext?

2. Deine fünf Bilder?

3. Soll das Hintergrundbild über die gesamte Seite Seite gehen oder nur hinter der Navigation liegen?

4. Wie sich das ganze bei kleineren Bildschirmen/Fensterbreiten verhalten soll?

Im Moment hört sich deine Beschreibung nach veraltetem Layout aus dem vorigen Jahrtausend an.

Hintergrundbilder und eine Navigation mit Bildern sind extrem benutzerunfreundlich und werden deshalb heutzutage nur noch in Ausnahmefällen verwendet.

Mangels Info von dir weiß ich nicht, ob das bei dir zutrifft: Aber Text solle als Text eingefügt werden und nicht als Bild.

Technisch sehe ich in deiner Beschreibung eine einfache ungeordnete Liste, wobei das ul-Element das Hintergrundbild enthält und die li-Elemente (in deinem Fall vier) die Navigation mit jeweils einem Bild.

HTML-Code:
<ul>
   <li><a href="#"><img src="" alt=""></a></li>
   <li><a href="#"><img src="" alt=""></a></li>
   <li><a href="#"><img src="" alt=""></a></li>
   <li><a href="#"><img src="" alt=""></a></li>
</ul>
Wenn es sich um die Hauptnavigation handelt wird die Liste zusätzlich in ein nav-Element gebettet.

Den Rest erledigt dann das passende CSS.

z-index, position: relative, position: absolute haben in diesem Zusammenhang überhaupt nichts verloren.

Ich habe mal eine Testseite mit frei verfügbaren Bildern erstellt, so wie ich sie nach deinen bisherigen Infos sehe:

HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Bildernavigation mit Hintergrundbild</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>

      /*Grundeinstellungen*/
      @media all {
         * {
            -moz-box-sizing: border-box;
            box-sizing: border-box;
         }
         html {
            font-size: 100%;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
         }
         body {
            padding: 0;
            margin: 0;
         }
         li {
            list-style-type: none;
         }
         a {
            text-decoration: none;
         }
      }

      /*Anordnung und Abstände, Fonts*/
      @media all {
         ul {
            width: 90%;
            padding: 0.5rem;
            margin: 0 auto;
         }
         nav ul li a img {
            width: 150px;
            height: 100px;
            border: 0 none;
         }
      }

      /*Farben, Hintergrundbilder*/
      @media all {
         ul {
            color: red;
            background-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Keswick,_Cumbria_Panorama_1_-_June_2009.jpg/1280px-Keswick,_Cumbria_Panorama_1_-_June_2009.jpg");
            background-repeat: no-repeat;
            /* Von den folgenden drei Möglichkeiten jeweils die gewünschte als letzte eintragen */
            background-size: contain; /* komplettes Bild ohne Verzerrung, aber mit Rand */
            background-size: 100% 100%; /* Vollbild, aber verzerrt */
            background-size: cover; /* beschnittenes Bild ohne Verzerrung */
         }
      }

   </style>
</head>
<body>
   <header>
   </header>
   <nav>
      <ul>
         <li><a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Auto_Union_1000s-02.JPG" alt="DKW"></a></li>
         <li><a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/7/7c/Desfile_de_Autos_Clasicos_y_Antiguos%2865%29.JPG" alt="LKW"></a></li>
         <li><a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/e/e4/Desfile_de_Autos_Clasicos_y_Antiguos%2861%29.JPG" alt="Oldtimer"></a></li>
         <li><a href="#"><img src="https://c2.staticflickr.com/4/3091/2789464563_589862125f_z.jpg?zz=1" alt="Mustang"></a></li>
      </ul>
   </nav>
   <main>
   </main>
   <footer>
   </footer>
</body>
</html>
Gruss

MrMurphy

Geändert von MrMurphy (05.04.2015 um 05:10 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.04.2015, 00:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.04.2015
Beiträge: 4
lcrms befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank erstmal für deine schnelle Antwort und für die Mühe!

Ich gebe zu, die Beschreibung war nicht optimal, aber trotzdem war deine Beispielseite genau so, wie meine vom Prinzip her sein sollte! Als ich die Vorgehensweise mit der Liste dann aber auf meiner Seite anwenden wollte, hat es nicht funktioniert, irgendwas hab ich da immer falsch gemacht oder vergessen.

Ich hab mir dann aber nochmal was zu position:absolute und relative angeguckt (CSS position relative ? absolute kombinieren | mediaevent.de) und das Problem damit jetzt auch in den Griff gekriegt. Ich hab das Hintergrundbild zentriert in einen relativ positionierten Div-Block gesetzt und in diesem Block noch vier absolut positionierte Div-Blöcke erstellt, die die kleinen Bilder enthalten. Jetzt kann ich, so wie ich vorher alle Inhalte durch Abstände am Fenster orientiert hab, alles am Hintergrundbild orientieren. Die Seite selbst sieht jetzt aus wie deine Beispielseite (nur halt mit den entsprechenden Bildern) und verhält sich auch beim vergrößern/verkleinern genau so. Ich hätte wahrscheinlich genauer beschreiben sollen, was ich mit position:absolute und position:relative erreichen wollte.

Ich weiß nicht, ob das eine unübliche Vorgehensweise ist, aber für meine Zwecke reicht es und ich muss so nur wenig am Code ändern, da ich die Abstände zumindest in der Höhe beibehalten kann. Dein Code hat mir trotzdem geholfen, da ein paar Zusammenhänge zu verstehen und den Fehler zu finden, wegen dem es gestern einfach nicht funktionieren wollte. Also vielen, vielen Dank trotzdem für die Mühe, auch wenn ich die Listenidee so jetzt nicht übernehmen konnte...

Liebe Grüße,
lcrms
Mit Zitat antworten
  #4 (permalink)  
Alt 07.04.2015, 10:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Ein Hinweis noch: position:absolute wird in 99% der Fälle, wo es eingesetzt wird, nicht gebraucht. Auch hier nicht. Falls du also später in deinem Webprojekt mal auf Fehler stößt, dann liegt der Fehler ziemlich sicher daran
Mit Zitat antworten
Antwort

Stichwörter
absolute, bild, positionierung, relative, zentrieren

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Text neben Bild ausrichten nuni83 CSS 1 19.07.2009 02:00
Bild im Fliesstext unten rechts ausrichten FinalAngel CSS 3 08.01.2009 09:29
Verflixter Rahmen um ein Bild Webelix CSS 6 22.07.2007 13:32
Text mittig neben Bild ausrichten prm CSS 5 10.02.2007 11:19
bild soll sich an footer ausrichten member31 CSS 13 30.01.2007 10:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:47 Uhr.