kasten mit runden ecken ausrichten

danjo · 03. Aug. 2006

was muss ich korrigieren um den grünen kasten genau auf die 4 ecken auszurichten, damit insgesamt
runde ecken entstehen...?

http://www.sb-installationen.de/test/rundeecken.htm

Code:

<!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>
<title>Beispiel Runde Ecken</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--

/* grundlegende Seiteneinstellungen */

body {
	font:100% Verdana, Arial, Helvetica, sans-serif;
	background-color:#4D3E2A;
	margin:0 5%;
}

h1,h2,h3 {
	font-family:"Times New Roman", "Trebuchet MS", Georgia, serif;
	font-weight:normal;
	color:#fff;
}

h1 {
	font-size:250%;
}

h2 {
	font-size:200%;
}

h3 {
	font-size:150%;
}

/* hier beginnt das für die Box relevante CSS  */

div {
	margin:0;
}

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

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

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

.lu {
	background:url(roundedbox_lu.gif) bottom left no-repeat;
[COLOR=Blue]}

.inhalt {
  
	margin:0;
	padding:2.5em 2.5em 3.5em 2.5em;
}

.inhalt p {
  background-color:#97C000;
	margin:0;
	padding:1em 1em 1em 1em;
}
[/COLOR]
-->
</style>
</head>

<body>
<h1>Beispielseite "Runde Ecken" </h1>
<h2>Fertige Box </h2>
<div class="ro"> 
  <div class="lo">
    <div class="ru"> 
      <div class="lu"> 
        <div class="inhalt"> 
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
            nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
            volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
            ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
            at vero eros et accumsan et iusto odio dignissim qui blandit praesent
            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
          <p> </p>
          <p>Li Europan lingues es membres del sam familie. Lor separat existentie
            es un myth. Por scientie, musica, sport etc., li tot Europa usa li
            sam vocabularium. Li lingues differe solmen in li grammatica, li
            pronunciation e li plu commun vocabules. Omnicos directe al desirabilit‡ de
            un nov lingua franca: on refusa continuar payar custosi traductores.
            It solmen va esser necessi far uniform grammatica, pronunciation
            e plu sommun paroles.</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

dkdenz · 03. Aug. 2006

Probiere mal dieses Beispiel aus: (ohne Grafiken)
http://forum.jswelt.de/218597-post9.html

danjo · 03. Aug. 2006

Danke für den Tip!

Wobei es doch interessant wäre zu wissen was man hätte ändern müssen... :grin:

dkdenz · 03. Aug. 2006

Hier hast Du mal ein paar Beispiele mit Grafiken. Kannst ja vergleichen.
http://www.sovavsiti.cz/css/corners.html
http://www.redmelon.net/tstme/4corners/
http://kalsey.com/2003/07/rounded_corners_in_css/

Dein Versuch an die Sache heranzugehen, verwirrt mich etwas und lässt mich zweifeln,
ob es mit diesem Ansatz überhaupt hinzukriegen ist.
Ich lasse mich aber immer gerne eines Besseren belehren.

planet4 · 03. Aug. 2006

Guten Abend!

wenn ich mal kurz meinen Senf dazu geben darf

Du hast grundsätzlich alles richtig gemacht, nur dass dein div.inhalt ein padding hat,
das die Absätze mit dem Text von seinem Rand entfernt

wenn du dieses padding auf 0 setzt, sieht es so aus wie es wahrscheinlich aussehen soll...

planet4.

dkdenz · 03. Aug. 2006

Naja, nicht so ganz...
Der Container liegt dann einfach über den Grafiken und dessen Ecken überdecken die runden Ecken der Grafiken.

planet4 · 03. Aug. 2006

klar, du hast mal wieder recht, hab ich nicht richtig hingeschaut

aber dann muss man diese Hintergrundfarbe
background-color:#97C000;
einfach an den untersten Container abgeben, der div.inhalt bekommt ein padding, das
exakt so groß ist wie die "runden Ecken", nämlich 15 px, dann geht's -
und lässt sich sogar skalieren...

planet4.

dkdenz · 03. Aug. 2006

Einverstanden...

danjo · 04. Aug. 2006

Also soweit habe ich es...jedoch stimmt etwas noch nicht...die ecken müssen vor den inhalt...

http://www.sb-installationen.de/test/rundeecken.htm

Entschuldigt meine Begriffsstutzigkeit....

Das Buch:"Little Boxes. Webseiten gestalten mit CSS. Grundlagen" ist bereits auf dem Weg zu mir

Code:

div {
	margin:1;
}

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

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

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

.lu {
	background:url(roundedbox_lu.gif) bottom left no-repeat;
[COLOR=Blue]}

.inhalt {
    background-color:#97C000;
	margin:0;
	
}

.inhalt p {

	margin:0;
	padding:15px 15px 15px 15px;
}
[/COLOR]
-->
</style>
</head>

<body>
<h1>Beispielseite "Runde Ecken" </h1>
<h2>Fertige Box </h2>
<div class="ro"> 
  <div class="lo">
    <div class="ru"> 
      <div class="lu"> 
        <div class="inhalt"> 
		
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
            nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
            volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
            ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
            molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
            at vero eros et accumsan et iusto odio dignissim qui blandit praesent
            luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
          <p> </p>
          <p>Li Europan lingues es membres del sam familie. Lor separat existentie
            es un myth. Por scientie, musica, sport etc., li tot Europa usa li
            sam vocabularium. Li lingues differe solmen in li grammatica, li
            pronunciation e li plu commun vocabules. Omnicos directe al desirabilit‡ de
            un nov lingua franca: on refusa continuar payar custosi traductores.
            It solmen va esser necessi far uniform grammatica, pronunciation
            e plu sommun paroles.</p>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

planet4 · 04. Aug. 2006

Guten Morgen!

dass du deine runden_ecken nicht siehst, liegt nur daran, dass du die Hintergrundfarbe immer noch
darüber liegen hast... der erste Container in deiner HTML-Konstruktion, der mit der Klasse .ro, das
ist sozusagen der unterste und er muss die Hintergrundfarbe
background-color:#97C000;
bekommen.
der Container .inhalt bekommt diese Farbe nicht, sonst liegt sie über den Ecken.
Das padding von 15px kannst du entweder dem Absatz oder dem .inhalt zuweisen.

danjo schrieb:
Das Buch:"Little Boxes. Webseiten gestalten mit CSS. Grundlagen" ist bereits auf dem Weg zu mir

schön, sag mir später mal, ob's dir gefallen hat

planet4.

danjo · 04. Aug. 2006

Ja super...klappt ja gut....bin mir nicht ganz sicher, aber ich meine durch die 4 grafiken sind die ecken auch etwas bauchiger... als bei dem reinen CSS Konstrukt

http://www.sb-installationen.de/test/rundeecken.htm

Schaue heute mal in den Briefkasten...müsste heute kommen das gute Stück...

Code:

.ro {
	background:url(roundedbox_ro.gif) top right no-repeat;
	background-color:#97C000;
}

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

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

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

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

.inhalt p {

	margin:0;
	
}

-->
</style>
</head>

<body>
<h1>Beispielseite "Runde Ecken" </h1>
<h2>Fertige Box </h2>
<div class="ro"> 

  <div class="lo">
    <div class="ru"> 
      <div class="lu"> 
        <div class="inhalt">

danjo · 04. Aug. 2006

Das Buch ist da

kasten mit runden ecken ausrichten

danjo

New member

dkdenz

New member

danjo

New member

dkdenz

New member

planet4

New member

dkdenz

New member

planet4

New member

dkdenz

New member

danjo

New member

planet4

New member

danjo

New member

danjo

New member