zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hintergrundbild, Content richtig positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.08.2012, 13:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2012
Beiträge: 4
Foma befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.08.2012, 18:07
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von Foma Beitrag anzeigen
ich habe 2 Probleme beim Programmieren meiner Homepage.
Webseiten werden geschrieben, nicht programmiert

Zitat:
Zitat von Foma Beitrag anzeigen
Gibt es eine Möglichkeit die Navigation und den Contentbereich in Relation zum Hintergrundbild zu positionieren?
Du zeigst und leider nicht deinen konkreten Code, daher kann man nur spekulieren.

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 von Foma Beitrag anzeigen
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?
Selbstverständlich. Das Element, dessen Hintgergrundbild einen Fernseher darstelllt, muss nur ausreichend dimensioniert werden.

Zitat:
Zitat von Foma Beitrag anzeigen
Ich sollte vielleicht noch darauf hinweisen, dass ich mit dem Foundation Framework arbeite!
Nein, du solltest die Hinweise für Fragende berücksichtigen und Live-Code bereitstellen
__________________
Ü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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.08.2012, 13:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2012
Beiträge: 4
Foma befindet sich auf einem aufstrebenden Ast
Standard

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>
Und noch ein Link zur Homepage:
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)
Mit Zitat antworten
  #4 (permalink)  
Alt 14.08.2012, 15:52
Benutzer
neuer user
 
Registriert seit: 14.09.2009
Beiträge: 88
Hook befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #5 (permalink)  
Alt 14.08.2012, 16:04
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 14.08.2012, 17:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.08.2012
Beiträge: 4
Foma befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #7 (permalink)  
Alt 14.08.2012, 19:24
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.820
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

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.
Mit Zitat antworten
Antwort

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:30 Uhr.