Hallo
ich würde gerne wisen wie ich aus meinem eckigen ein rundes layout machen kann?
Danke schon mal(;
Carsten
Runde Ecken
-
Entweder: Mit Grafiken
Oder: Mit den Elemente -moz-border-radius und -khtml-border-radius, die aber nur in Mozilla (FF) und KHTML(Safari...) funktionieren.
Ist auch (noch) kein valides CSS.LG
-
könntest du mir vllt. sagen wie ich das machen muss oder mir ein link zu einem tut schicken am besten eins mit der grafik methode...
Ich habe erst vor 4 Tagen angefangen Html und CSS zu lernen
Carsten
-
<!-- m --><a class="postlink" href="http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/">http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/</a><!-- m -->
für die grafiken
und
<!-- m --><a class="postlink" href="http://www.css4you.de/moz-border-radius.html">http://www.css4you.de/moz-border-radius.html</a><!-- m -->
für das andere, einfach für moz noch mal das gleiche mit khtml hinufügen.
LG
Laura -
Kein Problem
-
Hallo na wie gehts??(:
könntest du mir vllt versuchen zu erklären wie das mit dem runden ecken(grafik typ) funktioniert...
z.B. kann ich das layout im nachhinein bearbeiten oder muss ich wieder von vorne anfangen???Tut mir Leid für so dumme fragen aber ich hab erst vor ein paar tagen angefangen....
Html-Code
HTML
Alles anzeigen<!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" xml:lang="de" lang="de"> <head> <title>Titel</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" /> <link href="style.css" type="text/css" rel="stylesheet" /> </head> <body bgcolor="grey"> <div id="wrapper" > <div id="kopf" > <p> </p> </div> <div id="steuerung"> <li><a href="index.htm"> Start</a></li> <li><a href="index.htm"> Start2</a></li> </div> <div id="infotext"> <h3 align="center">Unsere Öffnungszeiten</h3> <p>hallo</p> <p>hallo</p> <p>hallo</p> </div> <div id="inhalt"> <p><h1> Hallo und Herzlich Willkommen</h1></p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam id erat at tellus tincidunt mollis. Praesent mattis tortor eu est. Donec congue sagittis arcu. Etiam viverra erat ut nulla. Donec hendrerit tortor et metus. Maecenas rhoncus dapibus leo. Donec vel ipsum ut felis vestibulum varius. Mauris ipsum nisl, accumsan eget, gravida non, mattis nec, nunc. Pellentesque pellentesque erat a arcu. Nulla semper, metus ac volutpat congue, ipsum felis mattis felis, sed placerat dolor velit ac urna. Nunc convallis. Donec non ligula nec nunc accumsan consequat. Ut in mauris. Vestibulum vitae neque sed eros convallis molestie. Phasellus quis ligula non tortor mattis mollis. Vestibulum sit amet ipsum ut ligula iaculis tincidunt. </p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> Etiam id erat at tellus tincidunt mollis. Praesent mattis tortor eu est. Donec congue sagittis arcu. Etiam viverra erat ut nulla. Donec hendrerit tortor et metus. Maecenas rhoncus dapibus leo. Donec vel ipsum ut felis vestibulum varius. Mauris ipsum nisl, accumsan eget, gravida non, mattis nec, nunc. Pellentesque pellentesque erat a arcu. Nulla semper, metus ac volutpat congue, ipsum felis mattis felis, sed placerat dolor velit ac urna. Nunc convallis. Donec non ligula nec nunc accumsan consequat. Ut in mauris. Vestibulum vitae neque sed eros convallis molestie. Phasellus quis ligula non tortor mattis mollis. Vestibulum sit amet ipsum ut ligula iaculis tincidunt. </p> </div> <div id="steuerung2"> halli </div> </div> </body> </html>CSS-Code
Code
Alles anzeigen*{ margin:0; padding:0; } #wrapper{ width:950px; background:#f00; margin:20px auto; } #kopf{ background-image: url(test/indextestbild.gif); height:90px; } #steuerung{ background-color: orange; } li{ display: inline; border-right: 1px solid black; padding-left:1em; padding-right:1em; margin-right:1em; width:26%; left:50%; } #infotext{ width: 26%; min-width: 10em; float: right; padding: 20px 1% 1em 1%; margin: 1em 1% 0 1%; border-left: 1px dotted #aaa; font-size: 0.9em;} #inhalt{ background-color: white; padding-left:2em; padding-right:2em; min-height:850px; max-height:1200px; } #steuerung2{<!-- m --><a class="postlink" href="http://img515.imageshack.us/img515/2731/test2h.jpg">http://img515.imageshack.us/img515/2731/test2h.jpg</a><!-- m -->
schönen tag noch
carsten
-
Sry, aber hier muss ich passen.
Wenns dir wichtig ist, kann ich mich in das Thema einarbeiten, aber ich würde dir empfehlen,
das mit den CSS-Attributen zu machen, wenn dus unbedingt machen willst.
Andernfalls würde ich sagen einfach drei Hintergrundgrafiken,
eine für oben, eine für die mitte und eine für unten, wobei die in der mitte y-repeated wird.
für die anderen grafiken würde ich sagen entweder ein div oder ein p als block-element.
Schau dir mal den Link an, dort wirds eigentlich ganz gut erklärt.
Oder.
guck mal auf <!-- w --><a class="postlink" href="http://www.ohne-css.gehts-gar.net">http://www.ohne-css.gehts-gar.net</a><!-- w -->
da ist glaub ich auch ein eintrag zu
LG
Laura -
mal sehn, vielleicht in den nächsten tagen. schau trotzdem mal auf ohne css gehts gar net
-
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!