Abgerundete Ecken und Logo einfügen im Twenty Eleven Theme

Chaote

Hallo

ich sehe im Moment den Wald vor lauter Bäumen nicht.
Hab zwar schon die Suche bemüht, aber nicht genau dass gefunden was ich anscheinend benötige.

Ich darf gerade eine einfache Webseite für ein Hotel erstellen und dafür wäre es optisch schöner wenn man im Twenty Eleven Theme die Ecken abrunden würde.

Dazu habe ich folgenden Code verwendet, aber leider funktioniert dies nicht so wie ich möchte.

Code

<style type="text/css">div{font-size:12px;font-family:Verdana;position:absolute;width:100px;height:200px;background-color:#efefef;}.div1{border:3px solid #ff0000;left:10px;top:50px;-moz-border-radius:30px;-khtml-border-radius:30px;}.div2{border:1px solid #aaaaaa;left:200px;top:50px;-moz-border-radius:10px;-khtml-border-radius:30px;}</style><title>Rahmen mit abgerundeten Ecken</title></head><body><div class="div1">Beispiel 1</div><div class="div2">Beispiel 2</div>

Vermutlich habe ich diesen im style.css auch falsch gesetzt.

Desweiteren soll statt des Namens der Webseite, das Hotel Logo erscheinen.

Dazu habe ich diesen Thread gefunden, aber die Funktion klappt irgendwie nicht.

Einen Link zur Webseite kann ich diesbezüglich nicht nennen, da es lokal erstellt wird.

Würde mich freuen, wenn Ihr mir den passenden Denkanstoss geben könntet.

thx

Chaote

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

mit welchem Browser testest du? Versuche es mal mit

Code

-webkit-border-radius:30px;-moz-border-radius:30px;-khtml-border-radius:30px;border-radius:30px;

Chaote

Zitat von maxe
mit welchem Browser testest du? Versuche es mal mit
Code
-webkit-border-radius:30px;-moz-border-radius:30px;-khtml-border-radius:30px;border-radius:30px;

Ich teste mit
Firefox (aktuelle Version)
IE 9
Chrome (portable)

Leider hat der Code auch nicht funktioniert.
(Was aber nicht heißen soll, dass dieser Code nicht woanderst funktionieren könnte)

Ist nicht schlimm, ich werde das Ergebnis mal so präsentieren und werde zu den Radien nichts sagen. ;)

Die Page soll ja nur kpl. einfach strukturiert sein und kein Schnick und Schnack dabei sein.

Das Logo (Bild) habe ich in den Header kpl. integriert und dies funktioniert nun.

mfitzen

Maxes Code müsstest Du für #page und #site-generator anwenden.

M.I.O.

Hallo ich habe es bei meinem Blog soeben probiert es klappt mit
border-Radius: ?px ?px ?px ?px----
habe auch das twenty eleven... wie ist deine Domain, damit ich mir ein Bild machen kann

Chaote

Zitat von infected

Maxes Code müsstest Du für #page und #site-generator anwenden.

Danke für diesen Hinweis.
Muss gestehen, habe dies an der falschen Stelle implementiert und somit ging es nicht.

Nur irgendwie ist noch ein kleiner Fehler im Footer-Bereich (siehe Screenshot - vergrößert).

Zitat von M.I.O.

Hallo ich habe es bei meinem Blog soeben probiert es klappt mit
border-Radius: ?px ?px ?px ?px----
habe auch das twenty eleven... wie ist deine Domain, damit ich mir ein Bild machen kann

Ich baue die Webseite lokal auf, somit kannst Du die nicht anschauen ;)

mfitzen

Für #site-generator muss der Code so aussehen:

Code

#site-generator {
-webkit-border-radius:0 0 30px 30px;
-moz-border-radius:0 0 30px 30px;
-khtml-border-radius:0 0 30px 30px;
border-radius:0 0 30px 30px;
}

Die ersten 2 Angaben stehen für die oberen Ecken, die letzten beiden für die unteren. Siehe auch: http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Chaote

Zitat von infected
Für #site-generator muss der Code so aussehen:
Code
#site-generator {
-webkit-border-radius:0 0 30px 30px;
-moz-border-radius:0 0 30px 30px;
-khtml-border-radius:0 0 30px 30px;
border-radius:0 0 30px 30px;
}
Die ersten 2 Angaben stehen für die oberen Ecken, die letzten beiden für die unteren. Siehe auch: http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Da sieht man mal, ich bin blind.

Hab zwar Möglichkeiten durchprobiert, aber dass es so ist, wusste ich nicht.
Den Link gleich mal speichern.

Nochmals Danke für die Hilfe.

Morgen mal diese schöne Seite präsentieren (das grün ist übrigens der kpl. Hintergrund)

axel.hoernschemeyer

Hallo zusammen,

danke für den Tip. Funktioniert.
Wie sieht das mit dem Ecken oben um die Kopfzeile aus?
Wie bekomme ich die Rund?

Viele Grüße
Axel

mfitzen

Auch mit border-radius?

axel.hoernschemeyer

Hallo infected,

an welcher Stelle in der Styles.css?
Oder habe ich sowieso keinen Rand wenn ich oben
nur ein Bild habe?

mfitzen

Zitat

an welcher Stelle in der Styles.css?

Na an der wo der Header oder das Headerbild definiert ist.

Zitat

Oder habe ich sowieso keinen Rand wenn ich oben
nur ein Bild habe?

Hä? Verstehe nicht was Du meinst.

Wenn Du Hilfe benötigst, dann poste bitte einen Link zu Deinem Blog.

axel.hoernschemeyer

Link zum Blog http://www.tennis-vehrte.de/wordpress

Ich finde aber den Bereich wo das Bild definiert ist nicht.
Ich hatte gehofft, jemand schickt ein Codeschnipsel wo ich das
sehen kann?

Das mit dem Bild ist so gemeint. Im Layout habe ich "Headertext anzeigen"
deaktiviert. Wenn ich das mache, könnte es ja so sein das ich oben nichts
abrunden kann?

mfitzen

Da das Headerbild im DIV Page liegt und dafür ein Hintergrund definiert wurde (#fff), musst Du ein bisschen tricksen.

Vorausgesetzt Du bleibst bei einer Hintergrundfarbe (also kein Bild) für body, dann kannst Du dies machen:

Code

#branding {
    background-color: #E2E2E2;
    padding-bottom: 10px;
    position: relative;
    z-index: 9999;
}


#branding img {
    border-radius: 30px 30px 0 0;
    display: block;
    height: auto;
    width: 100%;
}

Alles anzeigen

axel.hoernschemeyer

Hallo infected,

das sieht sehr cool aus. Jetzt ist da noch ein grauer Strich drüber.
Wie bekomme ich den weg?

mfitzen

Bei #branding das border-top entfernen.

axel.hoernschemeyer

Hallo infected,

vielen Dank. So soll es sein.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Abgerundete Ecken und Logo einfügen im Twenty Eleven Theme

Jetzt mitmachen!