zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Positionierung ohne Scrollbalken

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.03.2011, 08:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2011
Beiträge: 7
PositiverHeld befindet sich auf einem aufstrebenden Ast
Standard 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');
	}
aber falls das Bild ausserhalb des sichtbaren Bereichs des Browser Fensters ist soll der Browser kein horizontalen Scrollbalken erstellen.
Ich hoffe ihr Profis könnt mir hier helfen

Thx and cya
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.03.2011, 09:18
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.03.2011, 09:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2011
Beiträge: 7
PositiverHeld befindet sich auf einem aufstrebenden Ast
Standard

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;
}
und wollte auf diesen Farbverlauf ein Bild darstellen. Und da es zum Hintergrund gehört soll auch kein Scrollbalken entstehen wenn das Bild nicht bzw. nicht vollständig im Browserfenster liegt.


cya Thommy
Mit Zitat antworten
  #4 (permalink)  
Alt 01.03.2011, 10:02
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von PositiverHeld Beitrag anzeigen
...
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.
...
Ok, hört sich komplizierter an, denn gib am besten mal einen Link zur Seite, sonst können wir nur fröhliches Rätselraten spielen.

Ein weiterer Tipp wäre sonst die CSS-Eigenschaft: "overflow:hidden;".
Mit Zitat antworten
  #5 (permalink)  
Alt 01.03.2011, 11:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2011
Beiträge: 7
PositiverHeld befindet sich auf einem aufstrebenden Ast
Standard

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>&nbsp;&nbsp;|&nbsp;
                            <a href="#page2"    class="anchorLink">Bilder</a>&nbsp;&nbsp;|&nbsp;                          
                            <a href="#page3"    class="anchorLink">der Thommy</a>&nbsp;&nbsp;|&nbsp; 
                            <a href="#page4"    class="anchorLink">Kontakt</a>
                        </div>
                    </div>   
                </div>
		<div class="bottom">   </div>
            </div>
            <!-- page 2 -->
            <div id="page2">
		<!-- ... -->
	    </div>
    </body>
</html>
CSS:
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');
	}
und nun ist es so das Page 1 ein Hintergrund von 1px breite hat der sich immer wiederholt:
Code:
#page1{
	color: #bfd8e7;
	background-color: #0c0e1a;
	background-image: url('../images/page1_bg.png');
	background-position: bottom left;
	background-repeat: repeat-x;
}
und ein Bild mit transparenz darüber:
Code:
	#page1 .top {
		height: 300px;
		background-image: url('../images/page1_top_bg.png');
	}
Dieses Bild ist auch breiter als das Browserfenster und es entsteht kein Scrollbalken (so wie es sein soll)

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');
	}
und Positionier und es kommt immer zu den Scrollbalken

ich hoffe der Code ist halbwegs verständlich

thx and cya
Mit Zitat antworten
  #6 (permalink)  
Alt 01.03.2011, 11:45
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von PositiverHeld Beitrag anzeigen
leider ist die Seite noch nicht Online, das kommt erst am kommenden WE
Siehe meine Signatur.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #7 (permalink)  
Alt 01.03.2011, 11:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2011
Beiträge: 7
PositiverHeld befindet sich auf einem aufstrebenden Ast
Standard

gibt es da kostenlose Seiten wo mann seine Beta Seiten (kostenlos) reinstellen kann?
Sorry ich bin leider noch ein Noob
Mit Zitat antworten
  #8 (permalink)  
Alt 01.03.2011, 12:16
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 01.03.2011, 12:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.03.2011
Beiträge: 7
PositiverHeld befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 01.03.2011, 12:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Warum stapelst du so viele transparente PNGs übereinander?
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
kein scrollbalken, ohne scrollbalken, positionierung

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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:35 Uhr.