nicht angemeldet
runde ecken in <div>-tags oder tabellen
hallo,
ich habe da mal zwei fragen zu "runden ecken":
auf der seite http://bildblog.de/ sind die inhalte ja in <div>-tags und sie enthalten eine abgerundete umrandung.
wie geht das?
ich kann mir zB die möglichkeit vorstellen, das zu realisieren, indem man eine tabellenzelle nimmt und in die ecken und die randlinien mit grafiken ausstatten (8 insgesamt: 4 ecken + 4 ränder).
das ist zwar auf der oben genannten seite nicht der fall, aber ich bekomme auch das nicht hin, bzw. es ist alles andere als komfortabel.
-
Hi,
auf der seite http://bildblog.de/ sind die inhalte ja in <div>-tags und sie enthalten eine abgerundete umrandung.
wie geht das?schau doch nach und Du wirst finden:
<div id="content"><div id="content2"><div id="content3">
im CSS werden vermutlich die runden Eckengrafiken als Hintergrund gesetzt und die restlichen Rahmen über border definiert.ich kann mir zB die möglichkeit vorstellen, das zu realisieren, indem man eine tabellenzelle nimmt und in die ecken und die randlinien mit grafiken ausstatten (8 insgesamt: 4 ecken + 4 ränder).
oder eben verschachtelte DIVs. (Allerdings meinst Du sicher eine Tabelle und keine einzene Zelle.)
es ist alles andere als komfortabel.
damit hast Du freilich recht - zumindest solange es noch keine allgemeingültige CSS-Eigenschaft für abgerundete Ecken gibt.
freundliche Grüße
Ingo-
tatsächlich, da werden einfach 3 layer (oder <div>-tags, wie heissen diese dinger eigentlich richtig?) übereinander gelegt:
#content {
width:485px;
float:left;
background:#fff url("http://www.blogblog.com/rounders2/corners_main_bot.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:#000;
font-size:97%;
line-height:1.5em;
}
...uswdas ist ja witzig gemacht. (ist ja quasi "geschummelt").
und ich sehe im .css gerade, dass content dort mit einer # raute angegeben ist.
ich friemel mich da gerade erst rein, habe aber letzten gerade sachen gemacht, wobei ich klassen definiert habe, die einen . punkt vorweg trugen. bei den <div>-tags wird ja aber auch nicht class="content" gesagt, sondern id="content"wo ist denn da der unterschied?
-
so, ich habe jetzt gerade ein problem, denn ich versuche das gerade mal selbst nachzubauen, muss aber mal wieder an dem syntax scheitern.
wie übersetze ich denn die folgende zeile, wenn ich auf eine datei im selben verzeichnis, wie die html-datei verweisen will?
und was bedeutet #fff??background:#fff url("http://www.blogblog.com/rounders2/corners_main_bot.gif") no-repeat left bottom;
so geht es nicht:
background:"oben.gif" no-repeat left bottom;
ich habe diese schreibweise auch noch nicht vorher irgendwo gesehen.
ach herrjeh, wieso ist das alles immer so kompliziert :(-
kleines sytaxproblem?
da hilft ein blick ins handbuch :-)
http://de.selfhtml.org/navigation/css.htm#hintergrundViel Spaß,
CirTap--
You can have programs written fast, well, and cheap, but you only get to pick 2 ...
"Jeder der noch keinen Fehler gemacht hat, hat noch nie etwas Neues ausprobiert." (A. Einstein)-
zum thema syntax kann ich nur sagen, dass ich früher viel pascal und c++ programmiert habe, das dann, nach ende meiner schulzeit leider aufgeben musste.
und die syntax in html +css +javascrip undsoweiterundsofort finde ich, zumal das ganze sowieso ja "nur" script-sprache ist (und wo zum teufel ist denn die hauptschleife ;) ) wirklich viel viel schwieriger, als eine "normale" programmiersprache.
natürlich fehlt mir einfach die übung und ich möchte mich jetzt aus meinen fehlern nicht rausreden, aber dieses "umdenken" ist echt kompliziert.-
also, ich glaube ich bin irgendwie zu blöd. mein code sieht jetzt so aus:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>test</title>
<link href="main.css" rel="styleSheet" type="text/css">
</head><body bgcolor="#ffffff">
<div class="content1"><div class="content2"><div class="content3">
<p>test</p></div id="content1"></div id="content2"></div id="content3">
</body></html>
die main.css
.inhalt1 {
width:485px;
float:left;
background-image:url:("oben.gif") no-repeat left bottom;
margin:15px 0 0;
padding:0 0 10px;
color:#000;
font-size:97%;
line-height:1.5em;
background-color: green;
}.inhalt2 {
float:left;
width:485px;
background-image:url:("unten.gif") no-repeat left top;
padding:10px 0 0;
background-color: green;
}
.inhalt3 {
background-image:url:("mitte.gif") repeat-y;
padding:0;
background-color: green;
}alle dateien liegen im gleichen verzeichnis und alles, was angezeigt wird ist "test" auf weissem grund. aber warum?
-
ohh, es tut mir so leid.
"erst denken, dann posten", ich vergesse es immer wieder, erm....
sorry, aber es ist schon spät und die weizen fliessen.
nein, ganz ehrlich, ich wollte eigentlich wirklich nicht so unüberlegt und voreilig posten.
*verlegen sei*
-
-
natürlich fehlt mir einfach die übung und ich möchte mich jetzt aus meinen fehlern nicht rausreden, aber dieses "umdenken" ist echt kompliziert.
deswegen ja: ein Blick ins Handbuch hilft oft weiter - und hält das Hirn frei. Wenn ich mir all den Kram mit dem ich hier täglich arbeite auch noch merken müsste ... :-)
Lade dir die CHM-Version von SelfHTML runter. Mit dem Volltextindex ist das Werk dann schon fast als Referenz zu gebrauchen.Viel Spaß,
CirTap--
You can have programs written fast, well, and cheap, but you only get to pick 2 ...
"Jeder der noch keinen Fehler gemacht hat, hat noch nie etwas Neues ausprobiert." (A. Einstein)
-
-
-
-
Hi,
das prinzip ist u.a. auch hier beschrieben:
http://alistapart.com/articles/onionskin/"wahrhaft" runde Ecken können zur Zeit nur Geckos über ihr proprietäres
-moz-border-radius
http://www.xulplanet.com/references/elemref/ref_StyleProperties.html-
Hi,
das prinzip ist u.a. auch hier beschrieben:
http://alistapart.com/articles/onionskin/wowie,
das nenn ich mal ne chice site für design :)
das prinzip ist ja wirklich denkbar simpel. das ist mal wieder eine dieser situationen, bei denen man denkt, dass man das selbst auch gekonnt hätte. zumindest prinzipiell...
einer meiner prof's denkt sich das ebenfalls zu allerlei krams und nörgelt rum, dass er noch keinen nobelpreis bekommen hat...
vielen dank, ich wurstel mich da mal durch :)
-
-
-
-
Hi ultros,
ich habe da mal zwei fragen zu "runden ecken":
auf der seite http://bildblog.de/ sind die inhalte ja in <div>-tags und sie enthalten eine abgerundete umrandung.
wie geht das?zu diesem Thema gibt es einen Artikel bei den Tipps&Tricks:
Runde Ecken mit CSS
FunktionsprinzipGrüße,
Roland