|
|||
Hintergrundbild, Content richtig positionieren
Hallo Community,
ich habe 2 Probleme beim Programmieren meiner Homepage. Das Design beruht auf einem alten Fernseher. Die Knöpfe links sind die Navigation und der Bildschirm der Contentbereich. Der Fernseher ist als Hintergrundbild integriert. Jetzt will ich die Navigation und den Contentbereich so positionieren, dass sie an der richtigen Stelle auf dem Fernseher sind. Dies klappt auch, ist bei Verwendung einer anderen Auflösung aber total verschoben. Gibt es eine Möglichkeit die Navigation und den Contentbereich in Relation zum Hintergrundbild zu positionieren? Mein 2. Problem bezieht sich ebenfalls aufs Hintergrundbild. Der Fernseher sollte wenn möglich immer komplett zu sehen sein, falls der Bildschirm zu klein ist soll man scrollen können. Dies ist aber nicht der Fall. Ist der Bildschirm zu klein ist das Hintergrundbild unten einfach abgeschnitten. Kann man das ändern? Ich sollte vielleicht noch darauf hinweisen, dass ich mit dem Foundation Framework arbeite! Schonmal Danke für eure Antworten und viele Grüße Foma |
Sponsored Links |
|
|||
Webseiten werden geschrieben, nicht programmiert
Zitat:
Wenn das Element, dessen Hintergrundbild einen alten Fernseher zeigt, einen containing block erzeugt, kannst du andere Elemente, die sich darin befinden an beliebeige Bereiche des Elements verschieben. Zitat:
Zitat:
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Sponsored Links |
|
|||
Danke für die schnelle Antwort. Dann gebe ich mal die fehlenden Infos:
Also hier erstmal meine CSS Datei: Code:
#index { background-image:url(../img/TVStartseite.jpg); background-repeat:no-repeat; background-position:top; } #content { position:absolute; margin-top:300px; margin-left:125px; } a.bilder:hover img{ border: none; padding: 0px; filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; } a.bilder img{ border: none; filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; } Und mein HTML Code: Code:
<body id="index"> <div id="container"> <div class="row" id="content"> <div class="three columns"> </div> <div class="two columns" id="navi"> <a href="navi.html" class="bilder"><img src="img/Button-Idstein.png" height="15" width="15" align="left"> <p>Navigation1</p> </a> <br> <a href="navi.html" class="bilder"><img src="img/Button-Koeln.png" height="15" width="15" align="left"> <p>Navigation2</p> </a> <br> <a href="navi.html" class="bilder"><img src="img/Button-Hamburg.png" height="15" width="15" align="left"> <p>Navigation3</p> </a> <br> <a href="navi.html" class="bilder"><img src="img/Button-Muenchen.png"height="15" width="15" align="left"> <p>Navigation4</p> </a> </div> <div class="seven columns" id="inhalt"> </div> </div> </div> Welcome to Foundation Die Navigation soll egal wie groß der Bildschirm ist in der grauen Fläche über dem Lautsprecher sitzen. Und der Bildschirm des Fernsehers soll wie gesagt den Content darstellen. Gibt es da eine Möglichkeit? (Ist ja zur Zeit noch sehr verschoben, passt nur bei der Auflösung meines Laptops) Außerdem fehlt der untere Teil des Fernsehers bei kleinen Bildschirmen wie meinem Laptop, kann man einbauen, dass dann gescrollt werden kann? Ich habe jetzt etwas zum Containing Block gegooglet und auch vom Prinzip her glaube ich verstanden wie es geht, habe es aber nicht geschafft es auf meinen Code anzuwenden. Tut mir leid, wenn ich etwas viel frage, bin vor allem an CSS noch nicht sonderlich lange dran. Viele Grüße Foma Geändert von Foma (14.08.2012 um 13:20 Uhr) |
|
|||
Hi,
natürlich ist es möglich, alles nach deinen Wünschen hinzubekommen 1. erstelle eine Box (<div>) in der größe deines Hintergrundbildes und gib ihr das Bild als Hintergrund 2. diese Box zentrierst du per margin: 0 auto; 3. in dieser Box befindet sich dann deine Navi und dein Content 4. positioniere die Navi mit margin so, das sie im gewünschten Bereich ist und lass sie links floaten (Breitenangabe nicht vergessen) 5. positioniere den Content per margin so, das er im gewünschten Bereich ist und passe ihn an die Größe des Bereiches an. overflow: auto; nicht vergessen, dann hast du evtl. zwar zwei Scrollbars, kannst aber auch längere Inhalte, die nicht auf den "Bildschirm" passen als Content einfügen. Hook Geändert von Hook (14.08.2012 um 16:02 Uhr) |
|
||||
Hi,
ein Menü ist eine Aufzählung von Links und gehört semantisch in eine ungeordnete Liste. Die von die gebastelten farbigen Listenzeichen gehören per CSS in den Hintergrund und nicht als img ins Markup, weil es Schmuckgrafiken sind. Hier mal ein Tut dazu.. Bevor du überhaupt anfängst mit CSS zu gestalten, sollte der komplette Quelltext geschrieben werden, d.h. mit Überschriften, navi, Inhalten, usw.. Außerdem solltest du das CSS mit einem Prolog beginnen, siehe dazu CSS-FAQ Punkt 1. Wenn du grad erst mit CSS angefangen hast halte ich ein Framework für keine so gute Idee. Du solltest dir erstmal die Basics aneignen. Da führt kein Weg an Little Boxes vorbei.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
|||
Hook, ich danke dir! Du warst eine riesige Hilfe! Die Navi sitzt gut, der Content ebenfalls. Und auch das Hintergrundbild wird gescrollt. Alles so, wie ich es haben wollte
@Hubspe: Ja ich muss mich auf jeden Fall nochmal in CSS reinknien und werde mir deine Links mal zu Gemüte führen, sehen echt sehr hilfreich aus! ja durch die ganzen Margin Änderungen etc., wurde das Framework auch ziemlich über den Haufen geworfen. Aber das es zumindest schon einmal funktioniert wie ich will, ist ein riesiges Erfolgserlebnis für mich Das noch einmal schön aufzuziehen, dürfte der nächste Schritt sein. Ach ja, der Prolog ist schon vom Framework in einer anderen CSS Datei beschrieben, ich weiß: nicht schick und tierisch faul Geändert von Foma (14.08.2012 um 17:19 Uhr) |
|
|||
Ich weise dich auch gerne darauf hin, dass -moz-opacity seit ca. 8 Jahren unnötig ist
__________________
Über Internet Explorer 8: Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt. Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt. Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt. Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Text richtig positionieren | Nagazi | CSS | 5 | 18.04.2012 15:30 |
Buttons richtig positionieren | joergi | CSS | 1 | 28.06.2011 03:17 |
Hintergrundbilder hinter li-Element richtig positionieren | css_on_fire | CSS | 5 | 01.05.2011 21:10 |
Über Hintergrundbild positionieren sinnvoll? | Ria | CSS | 6 | 02.03.2011 17:02 |
Seite links ausrichten | like.no.other | CSS | 10 | 26.01.2011 02:10 |