Horizontale Scrollbalken durch bestimmtes Bild verhindern?

Doombringer · 14.09.2012

Hallo!

Ich habe eine kleine Frage:

Ist es möglich, horizontale Scrollbalken für ein einzelnes Element zu verhindern?
Dass generell horizontal gescrollt werden kann, wenn der Content zu breit für das Fenster ist, ist in Ordnung, aber ich möchte ein bestimmtes Bild davon ausschließen, Scrollbalken zu erzeugen. Geht das?

LG

randacek_pro · 14.09.2012

AW: Horizontale Scrollbalken durch bestimmtes Bild verhindern?

Hallo,

ja, du kannst per CSS festlegen, dass auch nur für ein bestimmtes Element keine horizontale Scrollleiste angezeigt wird.
Die Scrollleiste kannst du nur für Block-Elemente unterdrücken.
Das heißt, entweder, du schachtelst das Bild in ein <div>, oder nimmst es als HG für ein <div>.
Bsp.

HTML:

<div id="widepic">
<img name="überbreites Bild" src="img/meinbild.jpg"  
title="testbild" alt="hier ist zum Test ein Bild definiert, das zu breit für die Seite ist, aber ohne vertikalen Scrollbalken angezeigt werden soll">
</div>

Dann kannst du im CSS definieren:

Code:

#widepic [COLOR=#88FF88][B]{[/B][/COLOR]
          overflow-y: hidden;
          [COLOR=#88FF88][B]}[/B][/COLOR]

Damit wird nur der DIV mit der ID "widepic" angesprochen; über "overflow-y" sprichst du nur das vertikale Scrollen an und mit "hidden" wird dann eben der Balken unterdrückt...
Wenn du das nur auf dein <img> anwenden wölltest, passiert einfach gar nix...

Du kannst natürlich alternativ diese Eigenschaft gleich auch im Markup notieren:

HTML:

<div style="overflow-y: hidden;">
<img name="überbreites Bild" src="img/meinbild.jpg"  
title="testbild" alt="hier ist zum Test ein Bild definiert, das zu breit  für die Seite ist, aber ohne vertikalen Scrollbalken angezeigt werden  soll">
</div>

Je nachdem, ob du Stylesheet und Markup strikt voneinander trennen möchtest, oder nicht.

Wobei noch die Frage bleibt, warum du nicht zB. das Bild in der Größe anpasst, oder warum es nicht so schlimm ist, dass man es nicht komplett sieht?

Lieber Gruß

Doombringer · 14.09.2012

AW: Horizontale Scrollbalken durch bestimmtes Bild verhindern?

Heya!

Stylesheet und Markup sind bei mir getrennt.

Vielen Dank für die rasche Antwort, aber leider hat es nicht funktioniert...
Ich hatte den selben Ansatz, ich hab es auch mit einem HG probiert, aber die Scrollbalken erscheinen trotzdem...

Es geht um die Navigationsleiste, die ist etwas breiter als der Content, welcher von einem "Rahmen" umschlossen wird, an dem die Leiste anknüpft. Die kann also ruhig aus dem Bild geraten (die Buttons bleiben natürlich erhalten!), soll aber eben keine Scrollbalken auslösen, das macht dann der eigentliche Content.

LG

patrick_l · 14.09.2012

AW: Horizontale Scrollbalken durch bestimmtes Bild verhindern?

Es wäre vielleicht ganz hilfreich wenn du uns mal einen Link zu deiner Website posten würdest. Dann könnte man sich das nochmal genauer anschauen und gegeben falls weitere Tipps geben.

Grüße Patrick

Doombringer · 14.09.2012

AW: Horizontale Scrollbalken durch bestimmtes Bild verhindern?

Die Seite ist noch nicht online, aber vielleicht hilft ja der Code weiter...?

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Farbverlauf</title>

<style type="text/css">
@import url("css/farbverlauf.css") screen;
</style>
</head>
<body>
<div id="navi">
<img src="gfx/png/navi.png" id="center_navi" alt=""/>
</div>

<div id="content">
<img src="gfx/png/logo.png" id="logo" alt="" width="221" height="254"/>
<img src="gfx/png/banner.png" id="banner" alt=""/>
<!--<img src="gfx/png/gradient_head.png" id="gradient-top" class="stretch_gradient" alt="" height="1063px"/>-->
<img src="gfx/png/shade_l.png" id="shade_l" alt="" width:="45px"/>
<img src="gfx/png/shade_r.png" id="shade_r" alt="" width:="45px"/>
<!--<img src="gfx/png/shade.png" class="shade" alt="" width:="1368px"/>-->

<!--<a href="URL" target="blank"> -->
    <img src="gfx/png/b_home.png" id="b_home" alt=""/>
<!--</a>-->
<!--<a href="URL" target="blank"> -->
    <img src="gfx/png/b_shop.png" id="b_shop" alt=""/>
<!--</a>-->
<!--<a href="URL" target="blank"> -->
    <img src="gfx/png/b_info.png" id="b_info" alt=""/>
<!--</a>-->
<!--<a href="URL" target="blank"> -->
    <img src="gfx/png/b_contact.png" id="b_contact" alt=""/>
<!--</a>-->
<!--<a href="URL" target="blank"> -->
    <img src="gfx/png/b_forum.png" id="b_forum" alt=""/>
<!--</a>-->
<img src="gfx/png/text_home.png" id="text_home" alt=""/>
<h1><img src="gfx/png/title_news.png" id="title_news" alt="News"/></h1>
<img src="gfx/png/thumbs.png" id="thumbs" alt=""/>

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

Code:

@charset "utf-8";
/* CSS Document */

html{
    height:100%;
    }

body{
    background-image: url(../gfx/png/gradient_head.png);
    background-position:50% 0px;
    background-repeat:no-repeat;
    background-color:#FFFFF;
    height:100%;
    }

/*HOME////////////////////////////////////////////////*/
    
#content{
    position:relative;
    overflow:auto;
    width:1025px;
    height:1360px;
    margin:0px auto;
    padding:0px;
    }

#banner{
    position:absolute;
    width:1007px;
    height:120px;
    left:50%;
    top:7px;
    margin-left:-506px;
    z-index:2;
    }

#logo{
    position:absolute;
    width:221px;
    height:254px;
    left:50%;
    top:231px;
    margin-left:-505px;
    z-index:3;
    }
    
#text_home{
    position:absolute;
    width:676px;
    height:132px;
    left:50%;
    top:231px;
    margin-left:-180px;
    z-index:3;
    }
    
#title_news{
    position:absolute;
    left:50%;
    top:521px;
    margin-left:-505px;
    z-index:3;
    }
    
#thumbs{
    position:absolute;
    left:50%;
    top:586px;
    margin-left:-505px;
    z-index:3;
    }

#shade_l{
    position:fixed;
    width:45px;
    height:100%;
    left:50%;
    top:0px;
    margin-left:-684px;
    z-index:1;
    }

#shade_r{
    position:fixed;
    width:45px;
    height:100%;
    left:50%;
    top:0px;
    margin-left:639px;
    z-index:1;
    }
    
.shade{
    position:fixed;
    width:1368px;
    height:100%;
    left:50%;
    top:0px;
    margin-left:-684px;
    z-index:1;
    }

/*NAVI////////////////////////////////////////////////*/

[B][COLOR=Red]#navi{
    overflow-x:hidden;
    }
  [/COLOR]  
[COLOR=Red]#center_navi{
    position:absolute;
    width:1278px;
    height:51px;
    left:50%;
    top:148px;
    margin-left:-639px;
    z-index:3;
    }[/COLOR][/B]
    
#b_home{
    position:absolute;
    left:50%;
    top:141px;
    margin-left:-506px;
    z-index:4;
    }

#b_shop{
    position:absolute;
    left:50%;
    top:141px;
    margin-left:-389px;
    z-index:4;
    }
    
#b_info{
    position:absolute;
    left:50%;
    top:141px;
    margin-left:-274px;
    z-index:4;
    }
    
#b_contact{
    position:absolute;
    left:50%;
    top:141px;
    margin-left:-159px;
    z-index:4;
    }
    
#b_forum{
    position:absolute;
    left:50%;
    top:141px;
    margin-left:-44px;
    z-index:4;
    }

Könnt ihr damit etwas anfangen?

patrick_l · 14.09.2012

AW: Horizontale Scrollbalken durch bestimmtes Bild verhindern?

Normalerweise müsste es ausreichen wenn du dem ganzen eine fixe Höhe und Breite geben würdest. Blicke da aber gerade nicht ganz durch. Mag auch daran liegen das meine Augen langsam zufallen

Was jetzt nicht zur Lösung deines Problems beiträgt, aber trotzdem mal kurz erwähnt werden will

Ich würde dein Stylesheet nicht über @import einbinden sonder mit

HTML:

<link rel="stylesheet" type="text/css" href="css/style.css">

Grüße Patrick

Myhar · 14.09.2012

AW: Horizontale Scrollbalken durch bestimmtes Bild verhindern?

Du bindest (nicht alle) Grafiken "falsch" ein. Grafiken wie Verläufe gehören mittels Hintergrund im CSS definiert. Warum? Weil sie keine Bilder sind, sondern Hintergrundgrafiken.
Wieso so viele verschiedene Grafiken und keine Sprites?
Alternativtexte fehlen dir auch für einige Grafiken.
Und weshalb erzeugst du Verläufe mit Grafiken? Sogar im IE6 kann man Verläufe ohne Grafiken erstellen. Zumindest zweifärbige, aber das sollte doch auch reichen?
Deshalb empfehle ich dir, dein Markup von Grund auf zu überdenken und ein sauberes Grundgerüst zu erstellen.
Was mir erst jetzt auffällt: Du verwendest fast nur position:absolute. Das gehört ausnahmslos raus, absolute positionierung wird nur in den seltensten Fällen benötigt. Bei deiner simplen Seite schon gar nicht. Position:absolute ist auch sicher die Ursache für dein Problem. Aber das fällt in: Erstelle ein sinnvolles Grundgerüst.

randacek_pro · 14.09.2012

AW: Horizontale Scrollbalken durch bestimmtes Bild verhindern?

Hallo noch mal

ich schließe mich Patrick und Myhar an.

Zu deiner Frage, warum es nicht funktioniert ist mir was aufgefallen...

Doombringer schrieb:

Hier gibst du einen Scrollbalken in vertikaler Richtung an, der nicht angezeigt werden soll - ich dachte aber, wir reden von einem horizontalen Scrollbalken

Dann müsste es heißen: "overflox-y: hidden;"

Das mal nur rein zu der Problematik, dass sich nix getan hat - vielleicht liegst ja da ran.

Lieber Gruß

Doombringer · 15.09.2012

AW: Horizontale Scrollbalken durch bestimmtes Bild verhindern?

Vielen Dank für die Antworten!
, das war des Rätsels Lösung!
Ich kenne x als horizontale Koordinate, das hat mich wohl etwas verwirrt.
, die Alternativtexte trage ich im Nachhinein ein, die hab ich nicht vergessen. Aber trotzdem danke für den Hinweis!
Was den Verlauf betrifft, der ist bei mir nicht gerade sondern wellig, daher lässt sich das anders (soweit ich weiß) nicht lösen.
Aber da das Problem gelöst ist bedanke ich mich und mache dann mal weiter. ^^

LG

Edit: Ich bin wohl nicht mehr ganz wach, das Problem besteht weiterhin...

randacek_pro · 16.09.2012

AW: Horizontale Scrollbalken durch bestimmtes Bild verhindern?

Hallo,

ja erst mal zu der x/y-Sache: in der Tat, beim Kartesischen Koordinatensystem ist die y-Achse die vertikale Achse und x steht für die Horizontale

Aber da dein Problem weiterhin besteht: es wird also immer noch ein Scrollbalken angezeigt?

Ich hab das mal nachgebaut - bei mir zeigt es so mit den Einstellungen auf dem Bild keinen Scrollbalken an... (habe natürlich ersatzweise ein anderes Bild mit Breite 1920px genommen)

Lieber Gruß

Doombringer · 16.09.2012

AW: Horizontale Scrollbalken durch bestimmtes Bild verhindern?

Heya!

Danke für die flinke Reaktion!

Jetzt, wo Du "auf dem Bild" unterstrichen hast, habe ich, glaube ich, meinen Denkfehler erkannt... Ich wollte den Scrollbalken durch das Bild im Browserfenster verhindern.
Inzwischen habe ich das Problem gelöst:
Ich bin dahinter gekommen, dass ich um meinen Content einen "Container" (oder "wrapper", wie ich gelesen habe) erzeugen muss, dem die overflow Eigenschaft zugewiesen wird.
Darauf bin ich nicht früher gekommen, weil ich dachte, dass es reichen würde, overflow auf dem Content ansich anzuwenden.

Jetzt funktioniert zwar alles so, wie es soll, dafür entsteht am Randbereich des Browserfensters nun eine kleine Lücke, d.h. die Grafik wird nun zum Rand hin abgeschnitten, anstatt optisch aus dem Bild zu laufen...
Wenn sich das noch lösen liesse, wäre ich wunschlos glücklich! ^^

LG

randacek_pro · 16.09.2012

AW: Horizontale Scrollbalken durch bestimmtes Bild verhindern?

Irgendwie ahnte ich, dass du den Scrollbalken bezogen auf den gesamten Content weg haben wolltest - deswegen hatte ich das mal unterstrichen

In den Style-Deklarationen für "#center_navi" (und nicht nur dort) ein "position: absolute" - Myhar hatte dich schon darauf hingewiesen.
Das könnte für dein Problem verantwortlich sein; wobei, du hast geschrieben, dass du mittlerweile ein wenig umgestellt hast - daher weiß ich jetzt nicht, wie dein Markup und dein CSS momentan aussehen.
Dort muss dann sicher entsprechend noch mal manches umgestellt werden.
Also kannst du es evtl. noch mal posten, also den momentanen Stand?

Lieber Gruß

Doombringer · 22.09.2012

AW: Horizontale Scrollbalken durch bestimmtes Bild verhindern?

Hallo ,

danke für Deine Antwort!
Ich habe zur Zeit leider ein paar private Schwierigkeiten, entschuldige bitte die verzögerte Reaktion...

Das Problem ist soweit behoben, ich hatte vergessen, dem body einen margin-Wert zuzuteilen, jetzt wird nichts mehr abgeschnitten (margin:0px; ).

Was die Positionierung betrifft, die relative Position ist der absoluten wohl vorzuziehen, daher werde ich das Gerüst nochmal umschreiben.
Bevor ich das poste, probier ichs erstmal selbst (mit Unterstützung von google und co. natürlich ;D), wenn ich soweit bin, stell ich das dann hier rein, dann kannst Du mal, sofern Du möchtest, gegenchecken, ob soweit alles noch brauchbar ist. ^^

LG

randacek_pro · 24.09.2012

AW: Horizontale Scrollbalken durch bestimmtes Bild verhindern?

Schön, dass du schon soweit gekommen bist!

Klar, du kannst gerne deinen weiteren Arbeitsfortgang hier posten.
Manchmal gibt es Fälle, da braucht man eine absolute Positionierung - generell hat sie aber ihre Tücken, wenn du ausschließlich nur absolut positionierst... Dann klappt eine Responsive Design nicht und es "zerpflückt" dir das schöne Layout sobald andere Bildschirmdimensionen ins Spiel kommen...
Lass dich halt nicht entmutigen, wenn etwas mal nicht ganz so läuft - du packst das bestimmt!

Lieber Gruß