Box mit runden Ecken, Bild richtig Positionieren

Phantasielos · #1 (**permalink**) 25.04.2010, 20:30

Hi Community

Ich bitte euch um Hilfe bei folgendem Problem.

Eine Box mit runden Ecken hat als Inhalt ein Bild. Der Abstand links und rechts beträgt 10px (wird korrekt dargestellt). Oben und unten ist der Abstand aber unteschiedlich (offenbar auf beiden Seiten keine 10px). Das Hauptproblem ist das der Abstand vom oberen Rand des Bildes bis zum oberen Rand der Box einfach zu groß ist. Genau genommen ist die Höhe der Box zu groß. Wie kann ich das Bild weiter nach oben setzten und die Höhe der Box Richtigstellen?

Auszug CSS:

Zitat:

/* Basado en CSS Rounded Corners example - redmelon.net */
/* set millions of background images */

.rbroundbox { background: url(../images/sponsors_background_c.gif) repeat; }
.rbtop div { background: url(../images/sponsors_background_lo.gif) no-repeat top left; }
.rbtop { background: url(../images/sponsors_background_ro.gif) no-repeat top right; }
.rbbot div { background: url(../images/sponsors_background_lu.gif) no-repeat bottom left; }
.rbbot { background: url(../images/sponsors_background_ru.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 10px;
}
.rbcontent {
margin-left: 10px;
}

Eines der Boxen in dem das Bild angezeigt werden soll:

Zitat:

Duderinho · #2 (**permalink**) 26.04.2010, 14:05

Du hast da viel zu viele <div>, sortier die mal... Was macht das:
<div></div>
Denn für einen Sinn?

Wieso weißt du die css Angaben nicht der Klasse zu sondern schriebst sie in deine html/php Datei?

Phantasielos · #3 (**permalink**) 26.04.2010, 17:01

Zitat:

Zitat von Duderinho

Du hast da viel zu viele <div>, sortier die mal... Was macht das:
<div></div>
Denn für einen Sinn?

Die Frage hat was.
Tatsache ist das ich mir das Ganze aus dem Internet geholt habe (der Link ist in meinem ersten Beitrag zu sehen) und nicht wirklich verstanden habe. Ich habe versucht die überflüssigen <div> zu entfernen, dann hat das Ganze ausgesehen wie ein Sternspritzer.

Zitat:

Zitat von Duderinho

Wieso weißt du die css Angaben nicht der Klasse zu sondern schriebst sie in deine html/php Datei?

Meine CSS Kentnisse sind begrenzt. Was genau meinst du?

Ich habe jetzt (mit Anleitungen) folgendes hinbekommen, das funktioniert genau so wie ich es möchte:

Mein Template:

Zitat:

Die Datei css.css:

Zitat:

div {
margin:0;
}

.ro {
background:url(../images/roundedbox_ro.gif) top right no-repeat;
}

.lo {
background:url(../images/roundedbox_lo.gif) top left no-repeat;
}

.ru {
background:url(../images/roundedbox_ru.gif) bottom right no-repeat;
}

.lu {
background:url(../images/roundedbox_lu.gif) bottom left no-repeat;
}

.inhalt {
margin:0;
padding: 10px 10px 10px 10px;
}

.inhalt p {
margin:0;
padding:0;
}

Duderinho · #4 (**permalink**) 26.04.2010, 17:22

Jetzt hast du alle offenen divs geschlossen, ob das so wie es da steht nun schön ist sei mal dahingestellt. Kommt halt auch drauf an, was da drum rum noch steht bzw. ergänzt wird.

Das was du nach style=" stehen hast kannst du alles der entsprechenden Klasse in der .css Datei zuordnen. Macht deinen html-Code übersichtlicher und du hast alle Style-Parameter zentral gelagert.

Phantasielos · #5 (**permalink**) 26.04.2010, 17:26

Der HTML Code ist ein Template das mehrmals aufgerufen wird. Dadurch ändert sich natürlich immer die Position. Deshalb muss ist das im HTML Code lassen und kann es nicht in der .css Datei speichern.

Oder hast du etwas völlig anderes gemeint?

Duderinho · #6 (**permalink**) 26.04.2010, 17:28

Nein, habe ich so gemeint

Hättest du einen Link zum Beispiel angegeben... :P

Phantasielos · #7 (**permalink**) 26.04.2010, 17:41

Wenn das so ist danke ich für dein Interesse.

Ich habe den Link nicht gepostet weil diese Webseite relativ jung ist und bei einer Suche im Google nur recht wenige relevante Treffer ausgegeben werden.
Ich möchte nicht das nach der Webseite selbst dieses Forum hier als Suchergebnis erscheint in dem ich Fragen zum Design stelle

Wenn du den Link haben will kann ich ihn dir per PN schicken.

Zitat:

...ob das so wie es da steht nun schön ist sei mal dahingestellt.

Was CSS angeht bin ich nicht sehr kompetent, wenn du Vorschläge hast wie die Qualität dieses Teiles der Homepage erhöht werden kann höre ich sie mir gerne an.

hubspe · #8 (**permalink**) 27.04.2010, 09:08

Zitat:

Zitat von Phantasielos

Was CSS angeht bin ich nicht sehr kompetent, wenn du Vorschläge hast wie die Qualität dieses Teiles der Homepage erhöht werden kann höre ich sie mir gerne an.

Little Boxes durcharbeiten hilft.

Eine flexible Box mit runden Ecken ist nichts für Anfänger.

Ein Forum bietet immer nur Hilfe zur Selbsthilfe an. Da wirst du schon auch selber mit ranmüssen.
Andersfalls steht es dir natürlich frei ein Jobangebot hier reinzusetzen.

Phantasielos · #9 (**permalink**) 27.04.2010, 09:14

Zitat:

Zitat von hubspe

Little Boxes durcharbeiten hilft.

Danke für den Link.

Zitat:

Zitat von hubspe

Ein Forum bietet immer nur Hilfe zur Selbsthilfe an. Da wirst du schon auch selber mit ranmüssen.

Das mach ich auch, ich hab auch eigenständig eine Lösung präsentiert.

Als Anfänger würde ich mich nicht bezeichnen. Es gibt aber noch Teile die ich nicht auf Anhieb schaffe.

Duderinho · #10 (**permalink**) 27.04.2010, 09:51

Was ich meinte ist, dass du nur hier was drin stehen hast:

Code:

<div class="inhalt">
<img src="./data/sponsors/images/$sponsor[0]" border="0" alt="$sponsor[1]">
</div>

Die divs drum rum haben zwar andere Stylesheets aber keinen echten COntent. Sind die dann nötig? Wie gesagt, ohne zu wissen was da rein kommt bzw wie die Seite aussieht kann ich da nur spekulieren und dich vlt. zum Nachdenken anregen

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bild in Div positionieren mit Position	saschaopp	CSS	2	28.01.2009 10:40
Bild im Main frei zu positionieren	\|SONY\|	CSS	8	25.12.2006 20:48
Ein Bild "rechts unten" positionieren	bueno	CSS	5	04.04.2006 14:47
div mit runden ecken?!	psycho_dmr	CSS	3	29.12.2004 19:34
Runde Box (bzw. runde Ecken)	l2107	CSS	3	08.02.2004 03:19