|
|||
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 |
Sponsored Links |
|
|||
Hallo
Zitat:
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> 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> MrMurphy Geändert von MrMurphy (05.04.2015 um 05:10 Uhr) |
Sponsored Links |
|
|||
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 |
|
|||
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
|
Stichwörter |
absolute, bild, positionierung, relative, zentrieren |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |