Hallo Zusammen,
habe mich etwas mit den Runden Ecken der Seite
http://www.webreference.com/programming/css_borders/2.html beschäftigt und habe versucht es in meine Seite einzubinden. Ist mir auch eigentlich gelungen.
Nur nimmt dieser Farbhintergrund fast die geamte Breite des Bildschirms ein. So wenn versuche es kleiner zu machen, so ist unten und oben ein strich der trotzdem die ganze Bilschirmbreite einnimmt. Ich habe dort drei DiV-Tags die einander sind: also <div><div<div></div></div</div>
Hier mein CSS-Code:
Also wie kann ich das Farbsegment kleiner machen ohne, daß er mir oben und unten ausbricht?
Kann mir vielleicht Jemand einen rat geben? Sitz seit Stunden vor diesem Problem und kommt nicht weiter
Gruß Aleks
habe mich etwas mit den Runden Ecken der Seite
http://www.webreference.com/programming/css_borders/2.html beschäftigt und habe versucht es in meine Seite einzubinden. Ist mir auch eigentlich gelungen.
Nur nimmt dieser Farbhintergrund fast die geamte Breite des Bildschirms ein. So wenn versuche es kleiner zu machen, so ist unten und oben ein strich der trotzdem die ganze Bilschirmbreite einnimmt. Ich habe dort drei DiV-Tags die einander sind: also <div><div<div></div></div</div>
Hier mein CSS-Code:
HTML:
******************************************************************************************************************************
/*KLASSEN für die runden ecken */
*******************************************************************************************************************************
.raised {
background:transparent;
width:400px;
}
.raised h1, .raised p {
margin:0 10px;
}
.raised h1 {
font-size:2em;
color:#fff;
}
.raised p {
padding-bottom:0.5em;
}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {
display:block;
overflow:hidden;
font-size:1px;
}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {
height:1px;
}
.raised .b2 {
background:#ccc;
border-left:1px solid #fff;
border-right:1px solid #eee;
}
.raised .b3 {
background:#ccc;
border-left:1px solid #fff;
border-right:1px solid #ddd;
}
.raised .b4 {
background:#ccc;
border-left:1px solid #fff;
border-right:1px solid #aaa;
}
.raised .b4b {
background:#ccc;
border-left:1px solid #eee;
border-right:1px solid #999;
}
.raised .b3b {
background:#ccc;
border-left:1px solid #ddd;
border-right:1px solid #999;
}
.raised .b2b {
background:#ccc;
border-left:1px solid #aaa;
border-right:1px solid #999;
}
.raised .b1 {
margin:0 5px;
background:#fff;
}
.raised .b2, .raised .b2b {
margin:0 3px;
border-width:0 2px;
}
.raised .b3, .raised .b3b {
margin:0 2px;
}
.raised .b4, .raised .b4b {
height:2px; margin:0 1px;
}
.raised .b1b {
margin:0 5px; background:#999;
}
.raised .boxcontent {
display:block;
background:#ccc;
border-left:1px solid #fff;
border-right:1px solid #999;
width:600px;
}
***********************************************************************************************************************************
/*Allgemeine Klasen */
***********************************************************************************************************************************
body, p a {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
padding: 1em;
min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
h1 {
font-size: 1.5em;
margin: 0 0 0.7em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge silver;
}
html>body h1 {
border-color: gray; /* Farbangleichung an den Internet Explorer */
}
div.inhalt input,select
{
display:inline;
position:absolute; left:300px;
width:10.5em;
}
div.inhalt label
{
padding-left:10px;
display:block;
}
div.inhalt
{
width:400px;
margin: 0 8em 0 2em;
padding: 0 1em;
/* border: 1px dashed silver; */
}
* html div.inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
}
div.inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div.inhalt p {
font-size: 10pt;
margin-top:0;
padding-bottom:1em;
padding-right:1em;
}
.textfeld{
position:absolute;left:250px;
}
.tag {
position:absolute;left:150px;
}
.inhalt.tag {
width:5.5em;
}
.monat
{
position:absolute;left:195px;
}
.inhalt.monat
{
width:5.5em;
}
.jahr {
position:absolute;left:240px;
}
.inhalt.jahr
{
width:5.5em;
}
.inhalt.textfeld2
{
width:2em;
}
.textfeld2
{
position:absolute;left:190px;
}
.text
{
position:absolute;left:230px;
}
.inhalt.text
{
width:20em;
}
.checkbox {
position:absolute;left:-3px;
}
.inhalt.checkbox
{
width:1em;
}
.text2 {
position:relative;left:140px;top:-5px; font-size:10pt;
}
.inhalt.text2
{
width:20em;display:block;
}
#button
{
margin-left:30em;
}Kann mir vielleicht Jemand einen rat geben? Sitz seit Stunden vor diesem Problem und kommt nicht weiter
Gruß Aleks
Was nun?
