# with: 100% minus x Px



## Koehdaniel (25. Januar 2011)

Hallo,

Ich habe ein Problem:
Ich möchte gerne ein Bild mit CSS so ausrichten:

```
left:50%-400px;
```
Also, die halbe Bildschirmbreite minus 400px.
Wie geht das?
--
MfG Koehdaniel


----------



## hela (25. Januar 2011)

Hallo,
versuch es mal so:

```
right: 400px;
```
Vielleicht ist es das, was du möchtest.


----------



## Frezl (25. Januar 2011)

Hey,

ab CSS3 kann man mit der Funktion calc() solche Berechnungen anstellen:
http://aktuell.de.selfhtml.org/weblog/css3-calc-vs-box-sizing

Allerdings würd ich das noch net produktiv einsetzen, weils die wenigsten Browser verstehen.

Viele Grüße,
Fred


----------



## dreifragezeichen (26. Januar 2011)

hela hat gesagt.:


> versuch es mal so:
> 
> ```
> right: 400px;
> ```


... in Verbindung mit 

```
position:absolute;
```


----------



## Koehdaniel (26. Januar 2011)

Hallo..

Sorry, ich war gestern abend nich mehr ganz wach xD
Ich meinte natürlich 
50%-400px
ich guck mir mal das von >Frezl< an....
--
MfG Koehdaniel


----------



## Koehdaniel (26. Januar 2011)

Ich bins nochmal.....
also, ich habs jetzt so:

```
left:calc(100%-400px);
```
aber es klappt irgendwie nicht...
Die seite: http://radio.koehlucas.bplaced.de
Die Style.css: http://radio.koehlucas.bplaced.de/style.css


----------



## dreifragezeichen (26. Januar 2011)

Bist du nun ganz wach? Was nun? 50% - 400px? Oder doch 100% - 400px?

Entweder wird calc() noch immer nicht von den Browsern interpretiert, oder ist nicht für left geeignet.


----------



## dreifragezeichen (26. Januar 2011)

```
#box {
position:absolute;
left:50%; 
margin-left:-400px;
}
```
... erfüllt (mit CSS2) deine Vorstellung.


----------



## Koehdaniel (26. Januar 2011)

Man bin ich blöd ^^
Nein, ich bin noch nicht wach xD
Ich meine natürlich

```
left:calc(50%-400px);
```
Aber ich hab grad was entdeckt:


> calc() wird von keinem einzigen Browser unterstützt.


Gibt es noch eine andere möglichkeit?


----------



## dreifragezeichen (26. Januar 2011)

Siehe mein letzter Post für Ausgeschlafene ;-)


----------



## Koehdaniel (26. Januar 2011)

Danke >dreifragezeichen<
Es klappt!!

Vielen dank
--
MfG Koehdaniel


----------



## Koehdaniel (26. Januar 2011)

Ich bins nochmal...
Also, ich habe noch ein Problem...
In einem div-Tag names #wrap
Der Code:

```
#wrap {
left:50%; 
margin-left:-400px;
margin-top:120px;
width:800px;
}
```
Er nimmt das left:50% irgendwie nicht an...
Die seite: http://radio.koehlucas.bplaced.de
Die Style.css: http://radio.koehlucas.bplaced.de/style.css

//INFO: Die Angaben hier können von der Style.css abweichen,
z.B. ist margin-left:400px, damit man es trotzdem lesen kann.
--
MfG Koehdaniel


----------



## dreifragezeichen (28. Januar 2011)

In deinem Regelblock fehlt nun plötzlich dieses hier:


```
position:absolute;
```

Siehe auch:



dreifragezeichen hat gesagt.:


> ```
> #box {
> position:absolute;
> left:50%;
> ...


----------



## Koehdaniel (29. Januar 2011)

Juhu!!
Es klappt 
Aber wenn die Seite zu lang ist, also der Scrollbalken da ist,
dann ist alles ca. 5px nach links verschoben (die breite vom Scrollbalken).
Kann man das irgendwie umgehen?
--
MfG Koehdaniel


----------



## Koehdaniel (29. Januar 2011)

Hallo,

Ich habe mal die Suchfunktion genutzt und bin da auf was gestoßen :
http://www.tutorials.de/css/347123-seite-verschiebt-sich-durch-scrollbalken.html
Nur jetzt hab ich das Problem, das ich da dann 2 Scrollbalken hab 
Wie kann man das umgehen?


----------



## Frezl (29. Januar 2011)

Ich hab gelernt, dass man im Body die height="101%" setzt in Verbindung mit der von dir angegebenen CSS-Einstellung. Dann ist der Scrollbalken immer ausgegraut sichtbar undes  verschiebt sich nix, wenn die Seite länger wird...

Probleme mit nem doppelten Scrollbalken hatte ich nie. Zeig mal deinen Code...

Grüße,
Frezl


----------



## dreifragezeichen (29. Januar 2011)

Koehdaniel hat gesagt.:


> Nur jetzt hab ich das Problem, das ich da dann 2 Scrollbalken hab
> Wie kann man das umgehen?


Indem du dich einfach an die entdeckte Vorgabe hälst, und diese vermutlich deklarierte Regel

```
html,body { overflow-y:scroll; }
```
entsprechend in diese 

```
html { overflow-y:scroll; }
```
oder alternativ in diese umformulierst

```
body { overflow-y:scroll; }
```




Frezl hat gesagt.:


> Ich hab gelernt, dass man im Body die height="101%" setzt in Verbindung mit der von dir angegebenen CSS-Einstellung. Dann ist der Scrollbalken immer ausgegraut sichtbar undes  verschiebt sich nix, wenn die Seite länger wird...


Die angesprochene *overflow:scroll*-Regel ist hier völlig ausreichend, damit trotz geringem Inhaltsumfang die ausgegraute (inaktive) Scrolllaufleiste im Browserfenster sichtbar ist, um das Versetzen des Seiteninhalts zu unterbinden.

Ehrlich gesagt, gibt's in meinen Augen graviererende Mäkel in der Seitengestaltung, wie dieses "natürliche" Browserverhalten.



Frezl hat gesagt.:


> Probleme mit nem doppelten Scrollbalken hatte ich nie. Zeig mal deinen Code...


Siehe meine Annahme bzgl. der gruppierten Selektoren *html* und *body*, die gepaart mit *overflow:scroll* einen doppelten Scrollbalken im Viewport zu Tage fördern.


----------



## Koehdaniel (30. Januar 2011)

Hallo,

Ich habe in der Style.css aber NUR in html {overflow-y:scroll;}
(Siehe hier: http://radio.koehlucas.bplaced.de/style.css )


----------



## dreifragezeichen (30. Januar 2011)

Koehdaniel hat gesagt.:


> Ich habe in der Style.css aber NUR in html {overflow-y:scroll;}
> (Siehe hier: http://radio.koehlucas.bplaced.de/style.css )


 
Was du nicht sagst ;-)

Dafür existiert im weiteren Verlauf deines  HTML- und CSS-Codes ein <div>-Tag namens *#scrollbar*, das in sich den (scrollfähigen) Seiteninhalt  (<div id="inhalt"></div>) beheimaten soll, und entsprechend mit dieser *overflow*-Formatierung ausgestattet ist:


```
#scrollbar   {position:absolute; width:100%; height:100%; top:0; overflow:auto; z-index:2;}
```

Das Stylesheet und vermutlich ebenso der HTML-Code stammen offensichtlich wohl nicht (in Gänze) aus deiner eigenen Feder, sondern stellen ein "Patchwork" aus diversen Coderesourcen dar, was dann auch deine fehlende Übersicht erklären würde. 

Oder leidest du  seit Eröffnung dieses Themas unter akuter Sclhlaflosigkeit, dass es dir an der gehörigen Portion Wachsamkeit mangelt, deinen Quellcode zu überblicken?


doppelt-gemoppelt-sorgt-fuer-zweispurigen-scrollverkehr.png

In diesem Sinne: 

*Weidmanns heil! Weidmanns dank!* :suspekt:


----------



## Koehdaniel (30. Januar 2011)

Juhu!
Klappt.. danke.
Danke an alle!
Ihr habt mir damit echt sehr geholfen.
Ich bin immer wieder überrascht,
das es noch so gute Communities gibt,
in denen einem immer geholfen wird.
--
MfG Koehdaniel


----------

