✔ Runde Ecken ohne Bilder

aleks · 8. April 2006

Hmm... dann hat der Firefox wohl einen Linuxfehler werde das mal unter Windows mal testen. Arbeite nähmich unter Suse 10.0.

Maik · 8. April 2006

Das Formular-Element besitzt in deinem gezeigten CSS-Code keine feste Breitenangabe. Somit wird es auf die gesamte Fensterbreite ausgedehnt (width=100%), woraus die 'Striche' am oberen und unteren Elementrand resultieren. Deshalb auch der Tipp mit der Breitenangabe.

Vielleicht solltest du zudem das form-Element in das DIV.inhalt packen?

aleks · 8. April 2006

Hallo michaelsinterface!
Also ich hab das mal unter Windows mal getestet aber ich bekomme trotzdem den selben Fehler (habe <form> in den div.inhalt eingefügt).Könntest mir viellecht den Quellcode deines Screenshot zur Verfügung stellen. Wäre verdammt cool;-)

Gruß Aleks

Maik · 8. April 2006

Code:

******************************************************************************************************************************
/*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  */
  }

form {
width: 602px;
}

div.inhalt input, div.inhalt 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;
	}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>

<link rel="stylesheet" href='css/formular_box.css' type="text/css" type='text/opera;charset=utf-8'>
</head>
<body>

<h1>CSS-basierte Layouts</h1>

<form>
<div class="raised"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<div class="inhalt">
<p ><label for="login">Login</label><input type="text" name="login" value="" ></p>
<p><label for="pass1">Passwort</label><input type="text" name="pass1" value="" ></p>
<p><label for="pass2">Passwort bestätigen</label><input type="text" name="pass2" value="" ></p>
<p><label for="vorname">Vorname</label><input type="text" name="vorname" value="" ></p>
<p><label for="nachname">Nachname</label><input type="text" name="nachname" value="" ></p>
<p><label for="geschlecht">Geschlecht</label><select name="geschlecht">
  <?php
  print("<option value=maennlich>männlich</option>\n");
  print("<option value=weiblich>weiblich</option>\n");
  ?>
  </select></p>
<p><label for="geburtsdatum">Geburtsdatum </label><span class="tag"><select name="tag"  class="tag inhalt">
<?php

    echo'<option value ="'.$_POST['tag'].'"selected>Tag</option> ';
    for( $i=1; $i<=31; $i++ ) {
    if($_POST['tag'] == $i) {
            echo '<option value="'.$i.'" selected>'.$i.'</option>';
    }
      else {
            echo '<option value="'.$i.'">'.$i.'</option>';
    }
    }
?>
</select></span><span class="monat">


<select name="monat" class="monat inhalt">
<?php
    echo'<option value="'.$_POST['monat'].'"selected>Monat</option> ';
        for( $i=1; $i<=12; $i++ ) {
    if($_POST['monat'] == $i) {
            echo '<option value="'.$i.'" selected>'.$i.'</option>';
    }
    else {
            echo '<option value="'.$i.'">'.$i.'</option>';
    }
    }
?>
</select> </span><span class="jahr">



<select name="jahr" class="jahr inhalt">
<?php
    echo'<option value="'.$_POST['jahr'].'"selected>Jahr</option> ';
        $aktuellesJahr = date('Y');
    for($i=($aktuellesJahr - 100); $i<=$aktuellesJahr; $i++ ) {
    if($_POST['jahr'] == $i) {
            echo '<option value="'.$i.'" selected>'.$i.'</option>';
    }
    else {
            echo '<option value="'.$i.'">'.$i.'</option>';
    }
    }
?>
</select> </span>   </p>
<p><label for="strasse">Strasse</label><input type="text" name="strasse" value="" ><span class="text inalt"><label for="nr" class="text" >Nr.</label></span><span class="textfeld2 "><input type="text" name="nr" value="" class="textfeld2 inhalt"  size="5" maxlength="5"></span></p>
<p><label for="land">Land</label><input type="text" name="land" value="" ></p>
<p><label for="plz">PLZ</label><input type="text" name="plz" value="" ></p>
<p><label for="ort">Ort</label><input type="text" name="ort" value="" ></p>
<p><label for="email">E-Mail</label><input type="text" name="email" value="" ></p>
<p><label for="nutzbedingungen">Nutzbedingungen</label><span class="checkbox"><input type="checkbox" name="nutzbedingungen" value="checkbox" class="inhalt checkbox"></span><div class="text2"><label class="inhalt text2" for="text1">Ich habe die <a href="bedingungen.html">Nutzungsbedinugungen</a> gelesen und bestätige sie.</label></div></p>
<p><label for="agbs">AGB's</label><span class="checkbox"><input  class="inhalt checkbox" type="checkbox" name="agbs" value="checkbox" ></span><div class="text2"><label class="text2 inhalt " for="text2">*Ich habe die <a href="agbs.html">AGBs</a> gelesen und erkläre mich damit einverstanden.</label></div></p>


</div>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>

<p>
  <input type="hidden" name="ueberpruefung" value="1">
  <input type="submit" name="Anmeldung" value="Weiter" id="button"></p>
</form>

<p class="fusszeile">Diese Fußzeile stellt über die CSS-Eigenschaft 'clear'
   den Elementenfluss wieder her.</p>


</body>
</html>

aleks · 9. April 2006

Hallo michaelsinterface, du bist ja spitze

Jetzt zeigt er mir alle Ecken rund an.

Ich hätte da noch ein kleines Problemchen: IE zeigt mir bei den Pulldown nicht die richtige größe an. Hab versucht das mit mit CSS-Hacks zulösen aber er reagirt nicht darauf

Hier meine versuche:

HTML:

.inhalt.tag  {
         	 width:5.5em;
               
             }
* html input.inhalt.tag
{
w\idth:5.5em;
}              
.monat   	
         {
          position:absolute;left:80px;
               
         }
.inhalt.monat
	     {
		width:5.5em;
	     }
* html input.inhalt.monat
{
width:5.5em;
}              
.jahr    {
         	position:absolute;left:160px;   
		 }

* html input.inhalt.jahr
{
width:5.5em;
}              
        
.inhalt.jahr
	    {
		width:5.5em;
	    }

Wäre nett wenn wir Jemand einen Tipp geben könnte.
Gruß Aleks

Maik · 9. April 2006

Vielleicht hilft es, wenn du im CSS-Code ein Leerzeichen zwischen den Klassennamen notierst?

Code:

/* aus */
.inhalt.tag  {
         	 width:5.5em;
               
             }

/* wird */
.inhalt .tag  {
         	 width:5.5em;
               
             }
 /* usw. */

aleks · 9. April 2006

Danke hab es selbst geschaft. Die Lösung sieht so aus.:

HTML:

.inhalt.tag  {
         	 width:5.5em;
               
             }
* html select.inhalt.tag
{
width:5.5em;
}              
.monat   	
         {
          position:absolute;left:80px;
               
         }
.inhalt.monat
	     {
		width:5.5em;
	     }
* html select.inhalt.monat
{
width:5.5em;
}              
.jahr    {
         	position:absolute;left:160px;   
		 }

* html select.inhalt.jahr
{
width:5.5em;
}              
        
.inhalt.jahr
	    {
		width:5.5em;
	    }

Getestet IE 6.0.
Danke für alle, die mir durch die Diskussion geholfen haben.

Ich schließe einfach mal das Thema.

Maik · 9. April 2006

aleks hat gesagt.:
Ich schließe einfach mal das Thema.

Anmerkung: das Thema ist nicht geschlossen, sondern als erledigt (gelöst) markiert

So besteht die Möglichkeit, daß weitere Beiträge gepostet werden können, oder du den Thread bei neu auftretenden Problemen fortsetzen kannst.

Das Schliessen eines Threads ist nur den Admins und Mods vorbehalten, und schliesst das Antworten bzw. Fortsetzen des Threads aus.

aleks · 9. April 2006

Danke werden in Zukunft darauf achten.
Mir ist da noch eine Frage eingefallen: welche Werte muß ich ändern bzw. ergänzen um mein rundes Farbsegment nach links oder nach unten zu verschieben? Habe schon allerhand Werte versucht mit margin zu ändern bloß es läßt sich nicht verschieben.
Wollte noch erwähnen ist er mich mit CSS noch nicht so lange beschäftigt habe.
Wäre nett wenn Jemand mir sagt was ich machen könnte.
Schon mal Dank imvoraus.

Gruß Aleks

Maik · 9. April 2006

Die margin-Angaben müssen in deinem Fall auf das Formular-Element angewendet werden, um die Box mit den runden Ecken zu verschieben:

CSS:

form {
width: 602px;
margin-left: 50px;
margin-top: 50px;
}

✔ Runde Ecken ohne Bilder

aleks

Mitglied

Maik

aleks

Mitglied

Maik

aleks

Mitglied

Maik

aleks

Mitglied

Maik

aleks

Mitglied

Maik

Neue Beiträge