# Grauer Rand durch border-radius?



## Fuu (23. September 2009)

Hallo Leute,
ich baue gerade eine Seite mit HTML und CSS und habe ein kleines Problem bei dem ich den Fehler nicht finde bzw garnicht weiß ob das überhaupt ein Fehler ist oder ich damit leben muss.
Ich hab ein DIV als Kontainer der mit runden Ecken (für alle Browser die das können) ausgestattet ist. in diesem Div sind noch einige unterschiedliche Divs und eigentlich läuft alles so wie es soll.
allerdings hab ich im untersten Div ein img als Background eingefügt (weil ich es anders nicht mittig bekommen habe) dieses ist zentriert und unten.
nun habe ich aber einen grauen rand unten dort wo der border-radius anfängt. hab ich einen fehler gemacht oder ist das normal? wird durch border-radius etwas vom DIV entfernt oder hinzugefügt? 

ich hab als Anhang eine kleine Zeichnung wie ich das ganze meine und wo genau das Problem liegt.

ich hoffe das mir jemand von Euch helfen kann

Grüße Fuu


----------



## Maik (23. September 2009)

Hi,

ohne das jetzt live gesehen zu haben, versuch es mal mit display:block für das <img>-Element.

Gut möglich, dass da vom Browser "Whitespaces" im HTML-Code interpretiert werden.

mfg Maik


----------



## Fuu (23. September 2009)

das img steckt ja einfach nur in dem div.
soll ich nun dem div ein display:block geben oder für das img nochmal eine eigene id machen?


----------



## Maik (23. September 2009)

Von einem <div> hab ich hier nichts erwähnt.

Besitzt das umschliessende DIV einen ID- oder Klassenbezeichner?


```
#box img { display:block; }
```

mfg Maik


----------



## Fuu (23. September 2009)

das div in dem das img als Background liegt besitzt eine Klasse mit der es positioniert ist

ich hab nochmal 2 screens gemacht damit es deutlicher wird

bsp_1: so soll es aussehen
bsp_2: so sieht es aus


----------



## Maik (23. September 2009)

Also entnehme ich deinem Post, dass mein Vorschlag keine Besserung zu Tage gefördert  hat.

Steht das Ganze irgendwo online zur Verfügung?

mfg Maik


----------



## Fuu (23. September 2009)

naja nach deiner beschreibung weiß ich einfach nicht WO ich mit deinem neuen Codeschnipsel hinsoll 

html: 

```
.
.
<div class="content"></div>
.
```
css:

```
.content
{	
	background-image:url(../Bilder/Newsletter_09-09_09.jpg);
	background-position:center bottom;
	background-repeat: no-repeat;
	height:380px;				 
	margin: 0px auto;
}
```

nein gibt leider kein beispiel online


----------



## Maik (23. September 2009)

Sorry, hab das so verstanden, dass du ein <img>-Element verwendest :-(

Also alles nochmal zurück zu "Start".

Versteh ich das dann in deiner letzten Skizze richtig, dass das Hintergrundbild von *content* den Rahmen der umschliessenden Box überdecken soll?

Das wäre so technisch nicht möglich.

mfg Maik


----------



## Fuu (23. September 2009)

ja genauso dachte ich mir das

mhh das ist schlecht. gibts da irgendein trick um son häßlichen grauen rahmen zu umgehen?


----------



## Maik (23. September 2009)

Jo, so einen Trick gibt es da schon: Den unteren Rahmen einfach mittels border-bottom:0 ausblenden.

Oder die runden Ecken alternativ mit einer Hintergrundgrafik erzeugen (wie z.B. http://www.schillmania.com/projects/dialog2/), die sich dann auch vom Inhalt überdecken lässt.

mfg Maik


----------



## Fuu (23. September 2009)

ok vielen dank. ich werde da morgen gleich mal testen


----------



## Maik (23. September 2009)

Viel Erfolg 

mfg Maik


----------



## Fuu (24. September 2009)

mhh irgentwie klappt das nicht, ich glaube das hat was mit border-radius zu tun...
ich hab nicht wirklich lust die ganze seite nochmal zu bauen um den strich mit grafiken wegzubekommen, aber ich komm wohl nicht drum rum -.-


----------



## Maik (24. September 2009)

Mit border-radius hat dies nichts direkt zu tun, denn das gleiche Verhalten ergibt sich ebenfalls bei einem "normalen" Rahmen:

```
border:10px solid #ccc
```

Und vernachlässige bitte nicht unsere Netiquette bzgl. der erwünschten Groß- und Kleinschreibung - vielen Dank! 

mfg Maik


----------



## Fuu (25. September 2009)

Ich hab nun die Seite nochmal mit Bildern gebaut. allerdings bin ich damit nicht so gut wie mit dem code weil ich immer Slice- und Positionsprobleme habe. weil ich das programmieren aber gleich richtig lernen will /muss wollte ich mal nachfragen ob hier jmd bereit ist sich das anzugucken und mir konstruktive Kritik zum Quelltext zu geben.

Also was geht kürzer, was wäre logischer wenn man es zusammenfasst oder evtl auch anders!?
sollte ich das anders formatieren zur übersichtlichkeit etc..

ich hab die Bilder nochmal in photoshop übermalt mit irgentwelchen grafiken etc. so das man sieht wie die seite sein soll.

im css text hab ich bei meinen tags dahinter geschrieben wofür die abkürzungen stehen damit man schneller reinkommt. es ist nur eine seite ohne links, also nicht wirklich viel. aber da ich anfänger bin ist das für mich schon eine menge.

ich danke schonmal im voraus
Fuu


----------



## Maik (25. September 2009)

Hi,

wenn eine der Boxendimensionen (Breite, Höhe) fix ist, sind keine vier, sondern nur zwei, oder gar eine Grafik vonnöten, womit sich der HTML-Code spürbar verschlanken, und das CSS-Handling vereinfachen lässt 

Aber selbst vier abgerundete Ecken in einer horizontal und vertikal flexiblen Box liessen sich mit einer einzigen Grafik erzeugen, wie es http://www.schillmania.com/projects/dialog2/ eindrucksvoll demonstrierst - einfach mal die Browserfensterbreite skalieren, um den Effekt zu erkennen.

Der Name für einen ID- / Klassenbezeichner darf die deutschen Umlaute (ä, ö, ü) nicht enthalten.

mfg Maik


----------



## Fuu (25. September 2009)

ok Danke
Ich werde mal versuchen das mit einer Grafik zu machen und einige IDs umbenennen


----------

