|
|||
Positionierung ohne Scrollbalken
Hallo zusammen,
ich habe ein kleines Problem und ich komme irgendwie nicht weiter, leider find ich auch kein passenden Beitrag bzw. weiss nicht wach ich googlen sollt. zum Problem, ich möchte auf meiner Homepage ein Bild im Hintergrund an einer bestimmten Stelle haben: Code:
#page1 { min-height: 600px; height: 100%; min-width: 950px; position: relative; } #page1 .moon_1 { height: 100%; width: 100%; top: 300px; left: 900px; position: absolute; background-repeat: no-repeat; background-image: url('../images/moon_1.png'); } Ich hoffe ihr Profis könnt mir hier helfen Thx and cya |
Sponsored Links |
|
|||
Hi PositiverHeld
Normalerweise werden für Hintergrundbilder auch keine Scrollbalken gesetzt. Da du jedoch eine extra Div gemacht hast (Vermutung auf Grund des CSS-Codes), werden für die Div Scrollbalken erzeugt. Denn dort hast du ja Höhe und Breite angegeben. Warum setzt du das Hintergrundbild nicht direkt in den Body? TIPP: "background-position:" ist dein Freund. Gruß Webcoder |
Sponsored Links |
|
|||
Hi Webcoder,
thx für die schnelle Antwort, leider ist das nicht ganz die Lösung. Ich hab schon einen Hintergrund (einen Farbverlauf von 1px breite der sich dann immer wiederholt), ist auch ein DIV da ich 4 Seiten nacheinander darstelle. Code:
#page1{ color: #bfd8e7; background-color: #0c0e1a; background-image: url('../images/page1_bg.png'); background-position: bottom left; background-repeat: repeat-x; } cya Thommy |
|
|||
Zitat:
Ein weiterer Tipp wäre sonst die CSS-Eigenschaft: "overflow:hidden;". |
|
|||
leider ist die Seite noch nicht Online, das kommt erst am kommenden WE
aber ich kann dir denn Quellcode zeigen: HTML: HTML-Code:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- css --> <link href="css/basic.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/navigation.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <!-- page 1--> <div id="page1"> <div class="moon_1"></div> <div class="top" > <div class="logo"> </div> <div class="nav_bg"> <div class="nav"> GoTo: <a href="#page1" class="anchorLink">Start</a> | <a href="#page2" class="anchorLink">Bilder</a> | <a href="#page3" class="anchorLink">der Thommy</a> | <a href="#page4" class="anchorLink">Kontakt</a> </div> </div> </div> <div class="bottom"> </div> </div> <!-- page 2 --> <div id="page2"> <!-- ... --> </div> </body> </html> Code:
body,html { height: 100%; } body { margin: 0; font-size: 11px; } /* page */ #page1, #page2, #page3, #page4 { min-height: 600px; height: 100%; min-width: 950px; position: relative; } .top { background-repeat: no-repeat; background-position: top left; } .bottom { position: absolute; left: 0; bottom: 0; width: 100%; background-repeat: no-repeat; background-position: bottom left; } /* page1 */ #page1{ color: #bfd8e7; background-color: #0c0e1a; background-image: url('../images/page1_bg.png'); background-position: bottom left; background-repeat: repeat-x; } #page1 .top { height: 300px; background-image: url('../images/page1_top_bg.png'); } #page1 .moon_1 { height: 100%; width: 100%; top: 300px; left: 700px; position: absolute; background-repeat: no-repeat; background-image: url('../images/moon_1.png'); } Code:
#page1{ color: #bfd8e7; background-color: #0c0e1a; background-image: url('../images/page1_bg.png'); background-position: bottom left; background-repeat: repeat-x; } Code:
#page1 .top { height: 300px; background-image: url('../images/page1_top_bg.png'); } und nun hab ich noch ein Bild darüber gelegt: Code:
#page1 .moon_1 { height: 100%; width: 100%; top: 300px; left: 700px; position: absolute; background-repeat: no-repeat; background-image: url('../images/moon_1.png'); } ich hoffe der Code ist halbwegs verständlich thx and cya |
|
|||
Ja, z.B. funpic .de oder ohost ( der gleiche Anbieter, denke ich).
Es gibt wohl noch mehr, aber für einen Testspace sollte es reichen.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
Danke für die schnellen Antworten,
so hier nun der link zu meiner halb fertigen Seite. PositiverHeld 3.0 Das Problem liegt im Mond der oben angezeigt wird. thx and cya Thommy |
Sponsored Links |
|
|||
Warum stapelst du so viele transparente PNGs übereinander?
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Stichwörter |
kein scrollbalken, ohne scrollbalken, positionierung |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
"margin" für scrollbalken bei overflow:auto, overflow:scroll ? | Stadtmensch | CSS | 0 | 29.05.2009 15:58 |
Positionierung z-index und IE | Blub | CSS | 4 | 09.12.2007 16:51 |
Habe die Scrollbalken meines Inlineframes nicht im Griff :-( | Dullivan | Site- und Layoutcheck | 6 | 13.12.2005 21:36 |
Fixed Leiste verdeckt Sprungziel | steele | CSS | 4 | 26.10.2005 15:50 |