Wahnsinniges Layout - wie ist das hier machbar

Levare Patria

Moin.

So, jetzt kommt's dicke! Dieses schöne Stück Blog-Geschichte soll ein komplettes Redesign, in Form eines virtuellen Blog-Magazins bekommen. Preview-Ansicht hier zu sehen: http://www.qwertzwerk.de

Nicht erschrecken. :-) Wie lässt sich das am schnellsten erledigen? Welches Template eignet sich für diesen Aufbau am besten zur Modifikation?

Eigentlich müsste es ganz einfach sein, denn das komplette Teil ist EINE einzige Grafik. Jetzt soll nur der Blogtext ÜBER diese Grafik laufen und zwar ab den Links "Impressum | Werkphilosophie ..." abwärts.

Die Bilder zu den Einträgen sollen Links davon erscheinen.
Rechts ist praktisch die Sidebar wie im Kubrick, mit den Kategorien, etc..
Ganz unten sind einfach weitere fixe Links. Vorerst.

Wie lässt sich das ohne großartige Programmierkenntnisse erledigen? Wer es mir freiwillig fertig macht (momentan ist alles noch auf Kubrick aufgebaut: https://wpde.org/www.qwertzwerk.de/index.php), bekommt einen Ehreneintrag auf der Seite, mit Verlinkung. ;-) Coding sucks.

Greetz
Lev

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

ratterobert

so, wie ich das sehe, dürfte es reichen, kubrick anzupassen.

Levare Patria

Evtl.. Aber bei Kubrick läuft doch kein Text über Grafik, oder? Ist das nicht das größte Problem? Außerdem ist bei Kubrick oben keine Linkleiste, wie bei anderen Templates. hmm...

ratterobert

der text läuft auch im kubrick über grafik. der hintergrund des contentbereichs ist eine schmale grafik.
die linkliste kannst du ja in die header.php einbauen.
ich würde dir ja wirklich gerne auch mit tat zur seite stehen, aber ich habe noch so meine probleme mit gimp.

copernica

Dürfte nicht allzu schwierig sein. Layout mit zwei Spalten, links die Einträge, rechts das Menü. Oben die Headergrafik und dann einen Wrapper, der Menü und die Einträge beinhaltet. Im css gibst du für diesen Wrapper folgendes an:

Code

background:url(http://Pfad zur Hintergrundgrafik]/hintergrundgrafik.jpg) no-repeat #fff;

Edit: Ach ja, dann brauchst du noch einen Fußteil, da legst du dann eine grafik rein, die den Balken links fortsetzt bis zum Ende der Seite. Du könntest unten noch eine grafik reinlegen für einen schönen Abschluß der Seite.

Levare Patria

Ok, ich hab mal angefangen. Komischerweise wird nun die Body-Grafik gar nicht angezeigt, sondern es bleibt alles Weiß (https://wpde.org/www.qwertzwerk.de/index.php):

Hier der Quelltext (den Tag-/Nacht-Headerwechsel kann man ignorieren):

PHP

<style type="text/css" media="screen">
	body { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/Qbody.jpg) no-repeat #fff;}	




	#footer { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.jpg") no-repeat bottom; border: none;}
<?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single())) { ?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/Qbody.jpg) no-repeat #fff;}	


<?php } else { // No sidebar ?>
	#body { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/Qbody.jpg) no-repeat #fff;}	
	#footer { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter2.jpg") no-repeat bottom; border: none;}
<?php } ?>
	/* #footer { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.jpg") no-repeat bottom; border: none;} /*


<?php 
      $time = date("H") - 1; //defininiert die Uhrzeit 
      if($time > 7 && $time < 21) //die erste Zahl ist die Startzeit die Zweite die Endzeit 
      {$img = "day";} //Angabe für den oben definierten Zeitraum 
      else{$img = "night";} //Angabe für alles außerhalb des Zeitraums ?>


      @import url( <?php bloginfo('stylesheet_url'); ?> ); /* kann man rausnehmen, ich benutz lieber <link> */ 
#headerimg, #headerimg a{background-image:url(<?php bloginfo('template_directory'); ?>/images/Qheader.jpg);} 
		
	#header { margin: 0 !important; margin: 0 0 0 1px; padding: 0px; height: 304px; width: 877px; } 
	#headerimg { margin: 0px 0px 0; height: 306px; width: 879px; }

Alles anzeigen

Außerdem: Müsste ich nicht drei Spalten haben? Die Bilder sollen ja jeweils links neben dem Eintrag stehen und eine feste Breite haben.

copernica

Nein, zwei Spalten reichen - rechts die Navi und links die Beiträge.

Um zu erreichen, dass in den Beiträgen die Bilder links stehen und daneben der Text steht, mußt Du im css mit float:left arbeiten.

[...]/images/Qbody.jpg) no-repeat #fff;}[...]

Hinter Qbody.jpg fehlen die "

Levare Patria

Ok, danke soweit.

Schritt für Schritt ... :-)

Jetzt rutscht das Hintergrundbild (Qbody.jpg) nach links oben in die Ecke. Habe bereits versucht in der Header.php und im style.css mit den Margins zu spielen, das hat aber alles nix gebracht. Veränderungen waren immer nur in der Kopfgrafik zu sehen. :-(

EDIT: Stimmt nicht ganz. QBody ist nun 2 Mal zusehen. Einmal mittig passend, aber zu weit oben, und einmal links oben völlig falsch. :-)

Levare Patria

Boah, verzweifel!

Ich erbitte nochmals Hilfe. Hier das bisherige Ergebnis: http://www.qwertzwerk.de/index.php (Bodygrafik fängt zwar etwas weiter unten an, aber nicht direkt unterm Grafikhead, wie links an der kleinen Ecke zu sehen).

Maße Headgrafik: 879x306 px
Maße Qbody.jpg: 879x994 px

Hier die Einträge in der Style.css:

Code

/* Begin Structure */
body {
    margin: 0 auto;
    padding: 0;     
    height: 994px;
    width: 879px;
    }


#page {
    background-color: white;
    margin: 7px auto;
    padding: 0;
    width: 879px;
    border: 0px solid #000000;
    }
    
#header {
    padding: 0;
    margin: 0px;
    height: 306px;
    width: 100%;
    background-color: #ffffff;
    }


#headerimg {
    margin: 0;
    height: 306px;
    width: 100%;
    }

Alles anzeigen

Und hier die Stelle in der Header.php. Die eine "body background"-Angabe musste ich wegslashen, da sonst das Hintergrundbild 2 Mal aufploppt. grr:

PHP

<style type="text/css" media="screen">
 /* body { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/Qbody.jpg") no-repeat #fff margin: 0 0 0 1px; padding: 0px; height: 994px; width: 879px;} */
        
    #footer { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.jpg") no-repeat bottom; border: none;}
<?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single())) { ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/Qbody.jpg") no-repeat #fff;}    


<?php } else { // No sidebar ?>
    #body { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/Qbody.jpg") no-repeat #fff;}
    #footer { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter2.jpg") no-repeat bottom; border: none;}
<?php } ?>
    /* #footer { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.jpg") no-repeat bottom; border: none;} /*


<?php 
      $time = date("H") - 1; //defininiert die Uhrzeit 
      if($time > 7 && $time < 21) //die erste Zahl ist die Startzeit die Zweite die Endzeit 
      {$img = "day";} //Angabe für den oben definierten Zeitraum 
      else{$img = "night";} //Angabe für alles außerhalb des Zeitraums ?>


      @import url( <?php bloginfo('stylesheet_url'); ?> ); /* kann man rausnehmen, ich benutz lieber <link> */ 
    #headerimg, #headerimg a{background-image:url(<?php bloginfo('template_directory'); ?>/images/Qheader.jpg);} 
        
    #header { margin: 0 !important; margin: 0 0 0 1px; padding: 0px; height: 304px; width: 877px; } 
    #headerimg { margin: 0px 0px 0; height: 306px; width: 879px; } 
    
</style>


<?php wp_get_archives('type=monthly&format=link'); ?>


<?php wp_head(); ?>
</head>
<body>


<div id="page">


<div id="header">

Alles anzeigen

copernica

Um das Ganze so originalgetreu wie möglich herstellen zu können, würde ich das so im css aufteilen, siehe dazu die angehängte Grafik:

rot: haeder
grün: haederimg
hellblau: noch einzufügender div-container für das Menü oben mit Impressum und so
dunkelblau: page
lila: content
gelb: sidebar

in die page legst du dann das bild qbody.jpg und in haederimg natürlich qhaeder.jpg.

sidebar, content und des noch zuerstellen menücontainers oben weist du dann keine Hintergrundfarbe zu. Mit background: transparent; sollen einige Browser Schwierigkeiten haben.

Edit: habe noch den Footer, in grau dargestellt, eingefügt...

Levare Patria

Wow, danke dir.

Nur, bevor ich jetzt anfange die Grafik neu zu zerhäckseln: Warum wird eigentlich zwischen HEader und Headerimg unterschieden? Und warum ist (zumindest im Beispiel) Header größer als Headerimg?

Das Hellblaue, also den DIV-Container, gibt's in der Form ja noch gar nicht in der CSS, oder?

Levare Patria

Alsooo ... der Stand der Dinge ist folgender: http://www.qwertzwerk.de/index.php
Kurz: Bodygrafik immer noch zu weit oben (bis unter den Header). Headergrafik stimmt sonst.

Ich habe jetzt auch die Anweisungen hier beachtet und einige Codezeilen ins CSS integriert. Ohne Veränderung. Die Linkleiste hab ich sogar erstmal weggelassen. Footer auch erstmal wurscht. Header.php hab ich nochmal nach Standardvorgaben überarbeitet. Was nun? Ratlosigkeit stellt sich ein.

Hier die aktuellen Codeabschnitte:
Header.php

PHP

<style type="text/css" media="screen">
		
/*	body { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/Qbody.jpg"); no-repeat #fff; top center; }	*/
<?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single())) { ?>
 	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/Qbody.jpg") no-repeat top center; border: none; } 
<?php } else { // No sidebar ?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/Qbody.jpg") no-repeat #fff; border: none; } 
<?php } ?>
	#header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/Qheader.jpg") no-repeat bottom center; } 
	#footer { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter2.jpg") no-repeat bottom; border: none;}




/*	Because the template is slightly different, size-wise, with images, this needs to be set here
	If you don't want to use the template's images, you can also delete the following two lines. */		
/*	#header 	{ margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 306px; width: 879px; }
	#headerimg 	{ margin: 0px 0px 0; height: 304px; width: 877px; }    */


</style>
<?php wp_get_archives('type=monthly&format=link'); ?>


<?php wp_head(); ?>
</head>
<body>


<div id="page">




<div id="header">
  <a href="<?php echo get_settings('home'); ?>">
   <div id="headerimg">
     <h1><?php bloginfo('name'); ?></h1>
      <div class="description">
          <?php bloginfo('description'); ?>
      </div>
    </div>
  </a>
</div>
<hr />




Hier die Style.css:


/* Begin Structure */
body {
	margin: 0 auto;
	padding: 0; 	
	height: 994px;
	width: 879px;
	}


#page {
	/* background-color: white; */
	background: url("<?php bloginfo('stylesheet_directory'); ?>/images/Qbody.jpg") no-repeat #fff; }
	margin: 7px auto;
	padding: 0;
	width: 879px;
	border: 0px solid #ffffff;
	}
	
#header {
	padding: 0;
	margin: 0px;
	height: 306px;
	width: 100%;
	background-color: #ffffff;
	}


#headerimg {
	background: url("<?php bloginfo('stylesheet_directory'); ?>/images/Qheader.jpg") no-repeat top center; }
	margin: 0;
	height: 304px;
	width: 100%;
	}

Alles anzeigen

copernica

Zitat von Levare Patria

Warum wird eigentlich zwischen HEader und Headerimg unterschieden? Und warum ist (zumindest im Beispiel) Header größer als Headerimg?
Das Hellblaue, also den DIV-Container, gibt's in der Form ja noch gar nicht in der CSS, oder?

Ich habe das in meiner Grafik nur so dargestellt, um es besser erkenntlich zu machen. Normalerweise brauchst du nicht unbedingt Header und haederimg zusammen, aber das war halt in deinem Quelltext-Auszug so vorgegeben und deswegen habe ich es berücksichtigt.

Und den hellblauen div-Container unterhalb des Headers mußt du noch einfügen, das ist korrekt. Da müssen ja die Dinge rein wie Impressum, Werkphilosophie, Neuiigkeiten usw, um dem Original möglichst nahezukommen. Um das zu machen, mußt du später einzelne Beiträge auslagern mit exclude. Ich habe in meinem Blog auch so eine Menüzeile direkt unter dem Header.

Levare Patria

Ok, das hab ich soweit verstanden. Allerdings wäre mir erstmal geholfen, wenn ich wenigstens die QBodyGrafik weiter nach unten bekomme. Hier ist ja die Zielvorgabe: http://www.qwertzwerk.de aber so sieht es momentan aus https://wpde.org/www.qwertzwerk.de/index.php

Wenn ich das erstmal hingekriegt habe, dann ist ja vorerst alles gut. ;-)

Aber wie?? Ich hab bereits mit allen möglichen Werten gespielt, doch irgendwas schießt da quer.

copernica

Hi!

Versuchts doch mal so: setzt in die CSS für jedes Element einen 1px breiten Rahmen in einer anderen Farbe: border: 1px solid #[farbcode in hex] Dann sieht man nämlich ganz gut, wo sich was überschneidet oder wo was fehlt.
Bedenkt aber dabei, dass man borders immer dazuaddieren muß. Wenn man also einen Container die Breite von 500px gibt und der Rahmen rechts und links jeweils 1px breit ist, müssen diese insgesamt 2px zur Gesamtbreite dazurechnet werden bzw. vom Container abgezogen werden.

Und dann gibt es da noch das Boxmodell, wo der IE Probleme bereitet - ich bin mir fast sicher, dass es das bei Euch ist. Perun hat das in seinem Blog sehr anschaulichbeschrieben:

http://www.perun.net/2004/07/04/feh…e-im-boxmodell/

Dazu zeigt er Lösungsmöglichkeiten in Form von Hacks auf.

Monika

PHP

{ background: url("<?php bloginfo('stylesheet_directory'); ?>/images/Qbody.jpg"); no-repeat #fff; top center; }

das ist die Kurzschreibweise

99& aller Browser haben damit extreme Probleme
außerdem kommts bei dieser schreibweise drauf an, was in welcher Reihenfolge steht.

mache es einzeln, dann tust Du Dir einen großen gefallen und verzweifelst weniger rasch

Code

background-image{url....   ;}
background-color:#fff;}
background-repeat:no-repeat;}
background-position:top center;}

Du hast den bodx eine fixe Höhe gegeben,
magst Du mir den Grund erklären,

Dies zu tun ist eine der hohen Künste der CSS Technik
erfordert mindestens XYZ CSS Hacks und so wie ich Dich hier lese, bist Du damit überfordert.

außerdem ist das HTML der Seite absolut kaputt, gugg mal der Validator kann diese Seite nicht mal prüfen

wie sollte da je eine css Angabe richtig werden???
http://validator.w3.org/check?uri=http…wertzwerk.de%2F

lG

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Wahnsinniges Layout - wie ist das hier machbar

Jetzt mitmachen!