html trick

darkcobalt · 30.01.2010, 08:33

hallo. ich habe eine statische html seite die nur aus einem hintergrundbild besteht. das bild ist 803px hoch.

jetzt habe ich das problem dass bei einigen 13" lapis das bild untern abgeschnitten wird. es ist so ausgerichtet dass es horizontal zentriert und vertikal an der oberkante das browsers ausgerichtet ist.

ich brauche das bild als hintegrundbild weil als normales bild am linken rand ein kleiner weisser rand entsteht und das bild beschnitten wird.

wie kann ich jetzt tricksen, dass ich trotzdem den browser zwinge die vertikalen scrollbalken anzuzeigen, damit ich die 803px anscrollen kann. hoffentlich habe ich mich verständlich ausgedrückt

T.dot · 30.01.2010, 09:45

Das Bild als <img ...> statt als background einbinden?

darkcobalt · 30.01.2010, 18:15

Zitat:

Zitat von T.dot

Das Bild als <img ...> statt als background einbinden?

habe oben ja geschrieben dass ich das nicht kann weil ich sonst am linken rand des bildes einen weissen streifen sehe und die grafik nicht komplett bis zum browserrand läuft. oder kann man diese weisse pixellinie unterdrücken? danke für die hilfe!

noch eine frage zu den scroll balken. vor einigen jahren habe ich eine website gesehen bei der die scrollbalken eingefärbt waren. geht das heute auch unabhängig von browser, IE, Firefox und Chrome, Safari oder nicht?

T.dot · 30.01.2010, 18:43

margin auf 0 setzen

<html>
<head />
<body style="margin:0px">
<img src="ursuperbild.jpg" />
</body>
</html>

zu bunten Scrolleisten musst du Google fragen, afaik gehts nicht...

zAPPEL · 31.01.2010, 08:04

Zitat:

Zitat von darkcobalt

noch eine frage zu den scroll balken. vor einigen jahren habe ich eine website gesehen bei der die scrollbalken eingefärbt waren. geht das heute auch unabhängig von browser, IE, Firefox und Chrome, Safari oder nicht?

Das kann glaube ich nur der IE und ist hässlich

lg

darkcobalt · 31.01.2010, 10:43

Zitat:

Zitat von T.dot

margin auf 0 setzen

<html>
<head />
<body style="margin:0px">
<img src="ursuperbild.jpg" />
</body>
</html>

zu bunten Scrolleisten musst du Google fragen, afaik gehts nicht...

perfekt, so werd ich es machen

NACHTAG: funktiniert wunderbar nur habe ich noch ein problem mit der ausrichtung des bildes.

<img src="logo.jpg" align="center top"/>

das bild ist 2800px x 800px gross und soll so dargestellt werden dass immer genau die mitte des bildes also der bereich um 1400px dagestellt wird. die vertikale ausrichtung soll am oberen rand sein.

nur bei mir beginnt das bild immer am linken rand. was mache ich falsch?

darkcobalt · 31.01.2010, 12:18

als hintergrundbild definiert funktioniert es mit folgenden werten:
background-position:center top;

aber dann kann ich nicht scrollen. hier mal der html code:

===============================================
body {
background-color: #FFFFFF; overflow-x:hidden;
}
-->
</style></head>

<body style="margin:0px">
<img src="logo.jpg" align="center top"/>
</body>

===============================================

T.dot · 31.01.2010, 12:30

Du kannst wahrscheinlich den Image nen negativen Margin geben, aber das würd dann auch nur passen, wenns Browserfenster immer gleich breit ist...

probier mal folgendes:
<html>
<head />

<body style="background-image:url('riesiges_bild.jpg');background-position:top center;background-repeat:no-repeat">

<div style="height:5000px;">

</div>
</body>
</html>

darkcobalt · 31.01.2010, 13:06

Zitat:

Zitat von T.dot

Du kannst wahrscheinlich den Image nen negativen Margin geben, aber das würd dann auch nur passen, wenns Browserfenster immer gleich breit ist...

probier mal folgendes:
<html>
<head />

<body style="background-image:url('riesiges_bild.jpg');background-position:top center;background-repeat:no-repeat">

<div style="height:5000px;">

</div>
</body>
</html>

danke, so gehts!!!!

30.01.2010, 08:33	#1
darkcobalt Des moch ma in da Post... Registriert seit: 24.10.2001 Beiträge: 2.451	html trick hallo. ich habe eine statische html seite die nur aus einem hintergrundbild besteht. das bild ist 803px hoch. jetzt habe ich das problem dass bei einigen 13" lapis das bild untern abgeschnitten wird. es ist so ausgerichtet dass es horizontal zentriert und vertikal an der oberkante das browsers ausgerichtet ist. ich brauche das bild als hintegrundbild weil als normales bild am linken rand ein kleiner weisser rand entsteht und das bild beschnitten wird. wie kann ich jetzt tricksen, dass ich trotzdem den browser zwinge die vertikalen scrollbalken anzuzeigen, damit ich die 803px anscrollen kann. hoffentlich habe ich mich verständlich ausgedrückt ____________________________________ thanks D\|C .::: DARKCOBALT :::.

31.01.2010, 12:18	#7
darkcobalt Des moch ma in da Post... Registriert seit: 24.10.2001 Beiträge: 2.451	als hintergrundbild definiert funktioniert es mit folgenden werten: background-position:center top; aber dann kann ich nicht scrollen. hier mal der html code: =============================================== body { background-color: #FFFFFF; overflow-x:hidden; } --> </style></head> <body style="margin:0px"> <img src="logo.jpg" align="center top"/> </body> =============================================== ____________________________________ thanks D\|C .::: DARKCOBALT :::.

30.01.2010, 09:45	#2
T.dot Master Registriert seit: 13.08.2003 Beiträge: 624	Das Bild als <img ...> statt als background einbinden?

30.01.2010, 18:43	#4
T.dot Master Registriert seit: 13.08.2003 Beiträge: 624	margin auf 0 setzen <html> <head /> <body style="margin:0px"> <img src="ursuperbild.jpg" /> </body> </html> zu bunten Scrolleisten musst du Google fragen, afaik gehts nicht...

31.01.2010, 12:30	#8
T.dot Master Registriert seit: 13.08.2003 Beiträge: 624	Du kannst wahrscheinlich den Image nen negativen Margin geben, aber das würd dann auch nur passen, wenns Browserfenster immer gleich breit ist... probier mal folgendes: <html> <head /> <!-- image als hintergrund fuer body, top-center, no-repeat --> <body style="background-image:url('riesiges_bild.jpg');background-position:top center;background-repeat:no-repeat"> <!-- fake diff, damits immer ne scrollbar gibt --> <div style="height:5000px;"> </div> </body> </html>

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)