box

[boersencoach.com]

Hallo,

ich habe mal wieder eine Frage. Auf unserer Startseite von Boersencoach | Aktientipps und mehr möchte ich den mittleren Text " Erfolg ist unsere Referenz usw." ebenfalls in eine Box packen, wie ich dies rechts bereist erfolgt ist.

Was muss ich an meinem CSS-Code ändern damit der Mainbereich auch einen Rand und Hintergrund bekommt?

Vielen DANK!

 

[Wustersoss]

Für Ränder ist das CSS-Attribut border zuständig und für Hintergrundfarbe background-color.


Du musst nur die Referenz des HTML-Element auswählen, welches du verändern willst und die Attribute einfügen.

zum Beipiel:

#maintext{padding:0px 0px 20px 0px;  border:2px solid red; background-color:rgb(255,204,102)
}

malt einen 2px breiten Rahmen in Rot und färbt den Hintergund in Orange ein.
siehe auch:Hintergrundbilder: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

 

[boersencoach.com]

Super! Vielen Dank, es hat super funktioniert.

Kann man diesen Hintergrund auch leicht transparent machen?

 

[maria1]

#maintext{padding:0px 0px 20px 0px;  border:2px solid red; background-color:transparent;}

 

[Wustersoss]

Kann man diesen Hintergrund auch leicht transparent machen?

Ja, kann man.

Statt rgb nimmt man rgba und einen 4. Attributwert für die Transparenz der Farbe.
Da ältere Browser sowie die IE 8 und kleiner dies nicht verstehen(also rgba für transparente Farben) müssen wir erst eine Hintergrundfarbe wählen, die dann im 2. Schritt von unserem neuem RGBA Wert einfach überschrieben wird.


sieht dann so aus für alle Browser, inklusive Fallback für ältere Browser:

#maintext {
    padding: 0px 0px 20px 0px;
    border: 2px solid red;
    background: rgb(255, 204, 102);
       background: rgba(255, 204, 102, 0.2);
}

Wir müssen hier nur background schreiben, damit ältere Browser das auch umsetzen.
Der 4. Wert gibt hier übrigens den Sättigungsgrad in % an. Hier demnach 20% Sättigung gleich 80% Transparenz für die gewählte Farbe.