Layout-Frage

Chayton

Guten Morgen:smile:

Ich möchte gern mein Theme in bisschen verändern und war folgendermassen:
http://i23.tinypic.com/24b29up.jpg

Der Header sollte links und rechts herausragen und das ganze sollte statt rechte, abgerundete Kanten haben. Das mit den abgerundeten Kanten hab ich mal auf SELFHTML nachgeschlagen bin aber nicht ganz schlau daraus geworden.

Kann mir das jemand kurz erklären wie ich das genau mache?

Vielen Dank :-D

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

Chayton

Ich wäre auch schon glücklich wenn jemand auf eine der beiden Fragen eine Antwort wüsste :)

puttee

Hi,

also ich würde das problem nicht durch HTML sondern durch Grafik umgehen. Mach doch den content teil genauso breit wie den header. Nur die Seiten (blau schrafiert, siehe anhang) sind transparent bzw. entsprechend dem background der gesamten seite. Quasi ne optische täuschung. Dadurch sparst du die den ganzen html kram.

nur ne idee :mrgreen:

JakoThAn

Hallo,

Zitat von Chayton

Der Header sollte links und rechts herausragen

Das lässt sich ganz gut via CSS lösen.
Bsp.:

Code

#header {
width: xx px;
position: absolute;
top:  xx px;  
}

Natürlich musst und kannst du auch weitere Angaben im #Header hinterlegen...

Diese Variante funktioniert bei mir ganz gut. Beachte aber, dass der "Content" um die Höhe des Headers nach unten verschoben werden sollte.

Code

#content {
margin-top: Höhe_des_Headers px;
}

Zitat von Chayton

das ganze sollte statt rechte, abgerundete Kanten haben. Das mit den abgerundeten Kanten hab ich mal auf SELFHTML nachgeschlagen bin aber nicht ganz schlau daraus geworden.

Wenn der Header eine fixe Breite und Höhe hat, würde ich auch auf eine Grafiklösung zurück greifen. Falls er skalierbar sein soll, wäre die Lösung von SelfHTML die bessere. Es gibt aber auch andere Seiten auf denen das beschriben wird. Einfach mal hier im Forum suchen oder gooooogle´n...

Gruß
Thomas

Chayton

Das ist natürlich auc eine Idee aber wenns mit CSS oder HTML geht wär mir dieser Weg fast lieber

JakoThAn

Hallo,

Zitat

Das ist natürlich auc eine Idee aber wenns mit CSS oder HTML geht wär mir dieser Weg fast lieber

Was meinst du? :-?

Chayton

lool sorry JakoThAn. Ich war im Büro und bin irgendwann am Morgen auf Wordpress.org und hab dann dass reply fenster geöffnet etwas geschrieben und dann kurz vor dem Mittag den submit button gedrückt...

Man sollte die seite vielleicht zuerst aktualisieren bevor man etwas schreibt :???::-D

Auf jeden Fall danke für deine Hilfe, ich werds gleich mal ausprobieren... bin ja jetzt zu Hause.

edit: hab dein Beispiel jetzt mal ausprobiert, grundsätzlich eine gute Idee aber es wäre noch schön wenn das ganze dynamisch bleiben würde, denn du gibst dem header ja eine absolute position...

JakoThAn

Hallo,

natürlich kannst du die werte entsprechend anpassen. Statt px kannst du ja auch % oder em verwenden.

Mit

HTML

{ position: absolute; }

regelst du ja quasi nur das Verhältnis zu den übrigen Ebenen...

Chayton

Ich brings leider nicht zu Stande :???:

In meiner style.css sind folgende Codes vorhanden (die den Header betreffen).

Code

#header
{
position: relative;
width: 100%;
height: 9em;
background: #2b2b2b url(images/topbg.jpg) repeat-x;
}


#headercontent
{
position: absolute;
bottom: 0em;
padding: 0em 2.0em 1.3em 2.0em;
}

Alles anzeigen

und

Code

#headerpic
{
position: relative;
height: 149px;
background: #fff url(images/header.jpg) repeat-x bottom left;
}

Ich hab also 2 Header pictures. Nun habe ich versucht mit "width: 110%;" die Breite zu vergrössern was auch geklappt hat allerdings ragte der Header dann immer nur rechts heraus und nicht auf beiden Seiten wie von mir gewünscht (siehe erster Beitrag).
Ich hab ein bisschen herumprobiert mithilfe von CSS4You doch leider ohne Erfolg bisher.

Es wäre super wenn mir jemand einen Lösungsvorschlag oder Tip geben könnte ;)

Chayton

Oder kennt jemand vielleicht ein Theme dass die von mir gewünschten Bedingungen standardmässig schon erfüllt? Dann könnte ich aufgrund dieser Vorlage erneut anfangen es meinen Wünschen entsprechend anzupassen

Chayton

:-|

Weiss niemand Bescheid?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Layout-Frage

Jetzt mitmachen!