[HTML] Runde Box

C

countryking

Mitglied
Hellooow,

auch wenn das nicht unbedingt ein HTML Forum ist, vielleicht kann mir ja doch jemand helfen.

Ich versuche schon seit geraumer Zeit einen abgerundetes Rechteck zu basteln.

So zB :
-als Kontentbox : http://www.centos.org/docs/5/html/yum/sn-managing-packages.html
oder
-als Menu-/Infobox (links oben, "unser Service"):
http://www.trade-a-game.de/


Ich habe es mit Tabellen versucht, bei der ich in die oberste Zeile einfach eine große (oder 2 kleine) abgerundete Grafik/en eingefügt habe. Allerdings konnte ich die Grafik nicht so platzieren, dass es nach was aussah.


In erster Linie solls natürlich gut aussehen, wenn es aber noch einen etwas professionelleren Code beinhaltet, wäre es natürlich noch besser ;)

Vielleicht kann mir dabei jemand helfen?


Danke
 
Wenn du dir den HTML-Code der Seite anschaust, siehst du ziemlich genau wie die das gemacht haben bzw. es gibt genug Tutorials fuer "runde" Ecken im Internet.

Schau mal hier.
 
Kurztipp noch:

Lass bloß diesen Quatsch mit "Ich verwende Tabellen für Seitenlayout und Positionierung".

Schreibe semantisches HTML. (noch besser natürlich XHTML)

In deinem Fall: div-Tags + CSS zur Positionierung.
 
Hallo,

das Bsp. hab ich auch gefunden. Hast du das allerdings mal versucht umzusetzen?
Nichts von einem Rechteck, oder seinen Ecken zu sehen ;)
 
du musst natürlich die pfadangaben auch anpassen zu den images und diese müssen vorhanden sein !
 
Danke für die zahlreichen Antworten.
Damit lässt sich bestimmt was schickes basteln ;)


Tschüß'
 
Hallo,

Du könntest "-moz-border-radius" Verwenden allerdings spielt hier der Internet Explorer nicht mit.

Code: 
<html>

<head>

<title>Runde Ecken</title>

<style type="text/css">

body {
	margin: 0;
}

div#main {
	position: relative; margin: 0 auto;
	width: 50%; height: 50%;
	margin-top: 15%;
	-moz-border-radius: 10px;
	border: 1px solid #000;
}

div#main p {
	text-align: jusitfy;
	width: 50%;
	margin: 25% auto;
}

</style>

</head>

<body>

<div id="main">
<p>Ich bin ein Layer mit Runden Ecken. 
Ich funktioniere aber leider nicht im Internet Explorer.</p>
</div>

</body>


</html>
 
Zuletzt bearbeitet:
c0re schrieb:
Hallo,
Du könntest "-moz-border-radius" Verwenden allerdings spielt hier der Internet Explorer nicht mit.
Zum Vergrößern anklicken....
Und dazu ist diese Option alles andere als W3C Konform.
Einfach wie oben beschrieben Hintergrundbild mit Runden Ecken.

Hab das bei mir mit zwei divs gemacht.
Code: 
<div class='boxtitle_left'>Menu</div>
<div class='boxcontent_left'>
   <p>blablabla<br>
        blablabla<br></p>
</div>
Und dann im CSS
Code: 
   div.boxtitle_left { background-image:url('../img/layout/box_top.png'); height:27px; width:187px; color:white; font-size:13px;
                  padding:2px 0px 0px 10px; float:left; }
   div.boxtitle_left[class] { width:178px; }
   div.boxcontent_left { background-color:#e5e5e5; background-image:url('../img/layout/box_bottom.png'); background-position:bottom;
                    background-repeat:no-repeat; padding:0px 0px 10px 5px; width:187px; float:left; margin:0px 0px 15px 0px; }
   div.boxcontent_left[class] { width:183px; }

Sieht dann so aus, wie bei www.sim4000.de auf der linken Seite.
 
Anmelden, um zu antworten.

Neueste Themen

Zurück
Oben