✔ Runde Ecken ohne Bilder

aleks · 9. April 2006

Erst mal Danke für diwe Antwort es funktioniert.

Ich hab da noch was: in meinem Farbsegment hab ich zwei Checkboxen die sind auch ok, nur der IE verschieb die nach links (siehe anhang) etwas 70px schätze ich. Hier noch mal der Quellcode dazu:

HTML:

.checkbox {
	    margin-left:0;
        margin-top:15px;
	   }

.inhalt.checkbox
		{
		 width:1em;
		}

.text2 {
	position:relative;left:130px;top:-5px;  font-size:10pt;
       }
.inhalt.text2
		{
		 width:20em;display:block;

und der HTML Code:

HTML:

<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>

Wie gesagt der IE verschieb die Checkboxen nach links beim Firefox und Opera ist es ok.
Ich versucht mit CSS-Hacks zu arbeiten hatte aber bisher keinen Erfolg damit.
Vielleicht weis ja einer von euch rat.

Gruß
Aleks

Maik · 9. April 2006

Wenn ich im CSS-Code zwischen den Klassennamen ein Leerzeichen notiere, schiebt der IE bei mir die Checkboxen an die gewünschte Position.

Code:

.checkbox {
	    margin-left:0;
        margin-top:15px;
	   }

.inhalt .checkbox
		{
		 width:1em;
		}

.text2 {
	position:relative;left:130px;top:-5px;  font-size:10pt;
       }
.inhalt .text2
		{
		 width:20em;display:block;
       }

aleks · 14. April 2006

Hallo Zusammen,
erst einmal frohe Ostern!

Ich hätte noch ein kleines Problem mit meinem runden ecken ich hab noch eine zweite Klasse gemacht "inhalt2". Im Firefox und Opera ist alles ok, aber der IE bricht aus (siehe Graphik). Was kann ich da mache? Hier jedenfalls der Quellcode:

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

form {
width: 602px;

margin-left: 200px;
margin-top: 50px;
}

div.inhalt2 textarea
{
 width:25em;
 height:15em;
 margin-left:-11em;
}

div.inhalt input, div.inhalt select
{
 display:inline;
 position:absolute; left:500px;
 width:10.5em;
}

div.inhalt label
{ 
 padding-left:10px;
 display:inline;
}

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;
 			 display:block;
 			
            }
.textfeld{
          position:absolute;left:250px;
         }
.tag     {
	      position:absolute;left:0;
         }
.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;
	    }
* html input.inhalt.textfeld2
{
  width:2em;
}
 .inhalt.textfeld2
	{
	  width:2em;
	}
.textfeld2
	   {
	   position:absolute;left:190px;
	   }
.text
	   {
             position:absolute;left:230px;
	   }
.inhalt.text
	     {
	      width:20em;
             }
.checkbox {
	    margin-left:0;
        margin-top:0;
	   }

.inhalt .checkbox
		{
		 width:1em;
		}

.text2 {
		position:relative;left:110px;top:-12px; font-size:10pt;
       }
.inhalt .text2
		{
		 width:20em;display:block;

		}

 p.fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #fed; border: 1px solid silver;
  }
  
**********************************************************************************
/* Klasse für Checkboxen und Label, Allgemeines der Klasse */
**********************************************************************************
  



div.inhalt2 input
{

 
 width:1em;
}



div.inhalt2
{   
    
 width:400px;
 margin: 0 8em 0 2em;
 padding: 0 10em;
 /*   border: 1px dashed silver; */
}
* html div.inhalt2 
                 {
                  height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet  Explorers */
                 }
div.inhalt2 h2 {
    			font-size: 1.2em;
    			margin: 0.2em 0;
              }
div.inhalt2 p 
			{
   
 
             font-size: 10pt;
 			 margin-top:0;
 			 padding-bottom:1.5em;
 			 padding-right:1em;
 			 display:block;
 			
            }
            
**********************************************************************************
/*Eigenschaften von Input und Label*/
**********************************************************************************

.spalte1 {
    position:absolute;
    left:20em;
   
  } 

span.spalte1 input
  				{
  				     position:absolute;
    				 left:20em;
					
					
				}  



span.spalte1 label
			  {
				position:absolute;
                left:22em;
				
			  }



.spalte2 {
    position:absolute;
    left:29em;
  }
  

span.spalte2 input
					{
						position:absolute;
    				    left:0;
					}

span.spalte2 label
			  {
				position:absolute;
                left:2em;
              }


.spalte3 {
    position:absolute;
    left:38em;
  }


 span.spalte3 input
					{
						position:absolute;
    				    left:0;
					}
					

span.spalte3 label
			  {
				position:absolute;
                left:2em;
              }

.spalte4 {
    position:absolute;
    left:47em;
    
  }
  

  span.spalte4 input
					{
						position:absolute;
    				    left:0;
					}
					

span.spalte4 label
			  {
				position:absolute;
                left:2em;   
              }

#button {
    margin-left:30em;
  }

Hat Jemand einen Tipp für mich, wäre sehr dankbar dafür.
Gruß Aleks

Maik · 14. April 2006

Du kannst doch die CSS-Klasse .inhalt mehrmals in der Seite verwenden?

✔ Runde Ecken ohne Bilder

aleks

Mitglied

Anhänge

Maik

aleks

Mitglied

Anhänge

Maik

Neue Beiträge