| Autor |
Nachricht |
Feingeist
Threadersteller
Dabei seit: 26.09.2010
Ort: Deutschland
Alter: 36
Geschlecht: 
|
Verfasst Di 05.06.2012 13:07
Titel Simple Background-Homepage |
  |
|
Hallo liebe Non-Printler,
mein HTML ist leider etwas eingerostet, daher frage ich bezüglich einer Website nach.
Was habe ich vor?
Und zwar möchte ich eine Website designen mit einem großen Hintergrundbild als JPG in der Auflösung 1920x1080 um es auch auf großen Monitoren voll auszufüllen. Wenn kleinere Auflösungen verwendet werden soll es einfach vom Browser begrenzt angezeigt werden.
Das wichtige ist, dass ein Logo und 3 Links (Als Image-Map oder so) immer in der Mitte angezeigt werden, egal in welchem Browser und welcher Auflösung.
Anbei ein paar Screenshots zu Veranschaulichung was ich vor habe.
Hier der Background den ich verwenden möchte.
Uploaded with ImageShack.us
Ich würde ihn dann auf 1920x1080 aufblasen.
----
Das ist das Logo was ich verwenden möchte:
Uploaded with ImageShack.us
---
Hier abschließend ein Mockup mit dem Hintergrund auf FullHD aufgeblasen. Dem Logo mit einem Ebenenmodi drauf (Also denke ich muss man es als ein reduziertes Background Image hochladen oder?) ... und 3 Textblöcken die zu Links werden sollen. Als Map oder Hotspot oder so.
Uploaded with ImageShack.us
Das wichtige ist einfach, dass Logo und Links in jedem Browser immer genau in der Mitte sind.
Ich hoffe ihr könnt mir helfen!?
Beste dank und viele grüße!
Feingeist 
|
|
| |
  |
 |
Manulein
Dabei seit: 06.07.2010
Ort: Kölle
Alter: 39
Geschlecht: 
|
Verfasst Di 05.06.2012 13:16
Titel
|
|
|
Ganz simpel:
#grafikmitte {
position: absolute;
left: 50%; /*absoluten mittelpunkt suchen*/
top: 50%;
width: 300px; /* Breite der Grafik */
height: 200px; /* Höhe des Grafik */
margin-left: -150px; /* Breite des Grafik durch zwei! */
margin-top: -100px; /* Höhe des Grafik durch zwei! */
}
Da gibts aber noch andere Methoden, diese hat zumindest im IE ein problem wenn das browserfenster kleiner ist das das mittigplatzierte Element
|
|
| |
|
|
|
Anzeige
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 05.06.2012 13:43
Titel
|
|
|
Allerdings sollte diese Deko-Grafik nicht per img kommen, sondern als background-image, und mit background-position: 50% 50%; kann man sich die ganze Rechnerei sparen 
Den Teil, der explizit im HTML steht, zentriert man am besten per display: table; für html und table-cell für body, dann muss noch nicht mal die Höhe des zu zentrierenden Elementes bekannt sein (IE 7 & 6 brauchen kleinen Hack).
|
|
| |
|
|
Feingeist
Threadersteller
Dabei seit: 26.09.2010
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Di 05.06.2012 13:48
Titel
|
|
|
| Manulein hat geschrieben: | Ganz simpel:
#grafikmitte {
position: absolute;
left: 50%; /*absoluten mittelpunkt suchen*/
top: 50%;
width: 300px; /* Breite der Grafik */
height: 200px; /* Höhe des Grafik */
margin-left: -150px; /* Breite des Grafik durch zwei! */
margin-top: -100px; /* Höhe des Grafik durch zwei! */
}
Da gibts aber noch andere Methoden, diese hat zumindest im IE ein problem wenn das browserfenster kleiner ist das das mittigplatzierte Element |
Ah, vielen dank für deine rasche Antwort Manulein...
Das sieht doch schonmal gut und einleuchtend aus!
Also empfiehlst du ein großes Hintergrundbild zu machen möglichst gut optimiert mit Logo und Links und das dann so einzubauen? Mit welchem Attribut krieg ich denn das Image da rein? Background-img:"" ?
Und wie bekomme ich dann die Links gemapped!?
Für weitere Hilfe wäre ich sehr dankbar!
Liebe Grüße
Feingeist 
|
|
| |
|
|
Feingeist
Threadersteller
Dabei seit: 26.09.2010
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Di 05.06.2012 13:51
Titel
|
|
|
| heiko_rs hat geschrieben: | Allerdings sollte diese Deko-Grafik nicht per img kommen, sondern als background-image, und mit background-position: 50% 50%; kann man sich die ganze Rechnerei sparen
Den Teil, der explizit im HTML steht, zentriert man am besten per display: table; für html und table-cell für body, dann muss noch nicht mal die Höhe des zu zentrierenden Elementes bekannt sein (IE 7 & 6 brauchen kleinen Hack). |
Hallo Heiko,
danke für deine schnelle Antwort.
Wie baue ich dieses display: table und table-cell denn am besten ein!? Wie gesagt, ich bin leider nie der King in HTML gewesen!?
Ich freue mich über deine Antwort..
Liebe Grüße
Feingeist
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 05.06.2012 13:58
Titel
|
|
|
| Code: | html {
height: 100%;
width: 100%;
display: table;
} |
etc.
Zuletzt bearbeitet von heiko_rs am Di 05.06.2012 13:58, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Feingeist
Threadersteller
Dabei seit: 26.09.2010
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Di 05.06.2012 14:09
Titel
|
|
|
| heiko_rs hat geschrieben: | | Code: | html {
height: 100%;
width: 100%;
display: table;
} |
etc. |
Ah okay, ich glaube ich verstehe!
Empfiehlst du mir dann noch eine separate CSS Datei anzulegen oder soll ich das alles in meiner index.html machen!?
Beste Grüße
Feingeist
|
|
| |
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Di 05.06.2012 14:51
Titel
|
|
|
|
Wenn mehr als eine Seite dieses Design bekommen, CSS separat.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Preis für simple html Homepage?
simple gallerie
Simple Navi
Simple Fotogalerie
Homepage Creator oder Homepage Baukasten
JavaScript: Simple Rechnung mit if-else?!?
|
|
Willkommen auf dem Portal für Mediengestalter
