kostenloser Webspace werbefrei: lima-city


Wordpressanpassung bzw. Vorlage

lima-cityForumDie eigene HomepageHomepage Allgemein

  1. Autor dieses Themas

    c*******h

    Hallo,
    ich stehe vor folgendem Problem:
    Ich habe mir in Photoshop ein Desgin gebastelt, welches für einen Wordpressblog gedacht ist.
    Beim vorherigen Design stelle das anpassen mich nich vor große Probleme, man nur ein bisschen an den Grafiken im Default Theme rumbasteln musste.

    Das folgende Design, hat allerdings nun außer dem Header nun noch Buttons und ein Foto als Hintergrundbild ( sollte sich an das jeweilge Browserfenster anpassen,so dass nur der Content zum scrollen ist).
    Habe dafür folgende Lösung entdeckt,weiß allerdings nicht wie ich sie in Wordpress einbringen soll. http://www.pixxelpassion.de/blog/webdesign/automatisch-skalierende-hintergrundbilder-nur-mit-css-auch-ie

    Jetzt meine Frage, gibt es ein Theme (habe bereits gesucht) womit es mir leichter fallen sollte mein Design anzupassen?
    Über Hilfen zum Hintergrund wäre ich ebenfalls dankbar!

    http://img854.imageshack.us/img854/139/grundgerst.jpg
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Frage 1: Was nützt es dir, dein Hintergrundbild je nach Bildschirmauflösung zu skalieren? Wenn ich es richtig sehe, ist es auf eine 1024er Auflösung angepaßt. Kommt jetzt jemand mit einem 1920er HD-Screen und das Bild würde auf voller Breite skalieren, sähe das sicher recht bescheiden aus. :wink:

    Frage 2: Wo ist das besondere Problem (abseits des Background-Bildes) bei deinem gezeigten Design? Letztendlich sehe ich da nur eine einfache Headergraphik, eine Idee für ein Seitenmenü und viel freien Raum für den Content, über dessen Formatierung nix gesagt wird..
  4. Autor dieses Themas

    c*******h

    fatfreddy schrieb:
    Frage 1: Was nützt es dir, dein Hintergrundbild je nach Bildschirmauflösung zu skalieren? Wenn ich es richtig sehe, ist es auf eine 1024er Auflösung angepaßt. Kommt jetzt jemand mit einem 1920er HD-Screen und das Bild würde auf voller Breite skalieren, sähe das sicher recht bescheiden aus. :wink:

    Das Hintergrundbild wird in ner geeigneten Auflösung hochgeladen, dass das auch bei hochauflösenden Geräten halbwegs normal aussieht. Hatte an 1.920px × 1.080px gedacht.


    ]Frage 2: Wo ist das besondere Problem (abseits des Background-Bildes) bei deinem gezeigten Design? Letztendlich sehe ich da nur eine einfache Headergraphik, eine Idee für ein Seitenmenü und viel freien Raum für den Content, über dessen Formatierung nix gesagt wird.

    Ganz doofes Problem. Ich krieg die Sidebar nicht unter die Headergrafik verschoben und mit der Buttonleiste verknüpft.
  5. cellowich schrieb:
    Das Hintergrundbild wird in ner geeigneten Auflösung hochgeladen, dass das auch bei hochauflösenden Geräten halbwegs normal aussieht. Hatte an 1.920px × 1.080px gedacht.

    Das produziert aber heftige Ladezeiten. :wink:
    Aber ok, das mußt Du selbst wissen. Einen Lösungsansatz hast Du ja schon bekommen


    ]Ganz doofes Problem. Ich krieg die Sidebar nicht unter die Headergrafik verschoben und mit der Buttonleiste verknüpft.


    Hier mal ein einfaches Beispiel für ein funktionierendes Raster: http://www.bits2pics.de/public/grundraster.html
  6. Autor dieses Themas

    c*******h

    http://cellowich.lima-city.de/
    Bin jetzt schon mal nen ganzes Stück weiter gekommen.
    Jetzt bräuchte ich nur noch ne Lösung, dass nur der Content-Bereich gescrollt wird und das Hintergrundbild immer an der gleichen Stelle bleibt!
    Wie realisiere ich das?

    Beitrag zuletzt geändert: 11.3.2012 15:53:28 von cellowich
  7. cellowich schrieb:
    http://cellowich.lima-city.de/
    Bin jetzt schon mal nen ganzes Stück weiter gekommen.
    Jetzt bräuchte ich nur noch ne Lösung, dass nur der Content-Bereich gescrollt wird und das Hintergrundbild immer an der gleichen Stelle bleibt!
    Wie realisiere ich das?


    unter deinem Link gibt es gerade kein Hintergrundbild.........

    body {background: url(deinBild.jpg) no-repeat center center fixed; width: 100%; height: auto;}


    Ohne Gewähr. Sollte aber funktionieren.
    Und ersetze bitte die Tabellen im Quellcode durch Div's ...
  8. Autor dieses Themas

    c*******h

    pcw schrieb:
    cellowich schrieb:
    http://cellowich.lima-city.de/
    Bin jetzt schon mal nen ganzes Stück weiter gekommen.
    Jetzt bräuchte ich nur noch ne Lösung, dass nur der Content-Bereich gescrollt wird und das Hintergrundbild immer an der gleichen Stelle bleibt!
    Wie realisiere ich das?


    unter deinem Link gibt es gerade kein Hintergrundbild.........

    body {background: url(deinBild.jpg) no-repeat center center fixed; width: 100%; height: auto;}


    Ohne Gewähr. Sollte aber funktionieren.
    Und ersetze bitte die Tabellen im Quellcode durch Div's ...

    Ja dank der Tabellen hat sich das alles wieder zerschossen.
    Jetzt hab ichs mit Divs versucht, da ist aber irgendwas schief gelaufen. Die Buttons sind komisch skaliert usw :-/
    Hiiiilfe!
    <!DOCTYPE html>
    <html lang="de-DE">
    	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<meta charset="utf-8" />
    		<meta name="generator" content="Brain & Fingers" />
    		<title>test</title>
    		<style type="text/css">
    		
    		#header {
    			width: 1021px;
    			height: 264;
    		}
    		#navi {
    			width: 1021px;
    			height: 34;
    		}
    
    		#maincontent {
    			width: 1021px;
    			background-image: url(Bilder/index_10.gif);
    
    		</style>
    
    </head>
    <body>
    <div id="header"><img src="Bilder/index_01.gif" width="1021" height="264">
      <div id="navi"> <img src="Bilder/index_02.gif" alt="" width="71" height="34"><img src="Bilder/index_03.gif" alt="" width="107" height="34"><img src="Bilder/index_04.gif" alt="" width="147" height="34"><img src="Bilder/index_05.gif" alt="" width="146" height="34"><img src="Bilder/index_06.gif" alt="" width="104" height="34"><img src="Bilder/index_07.gif" alt="" width="146" height="34"><img src="Bilder/index_08.gif" alt="" width="229" height="34"><img src="Bilder/index_09.gif" alt="" width="71" height="34">  </div>
    <div id="maincontent">
      <table width="864" border="0" align="center">
        <tr>
          <td width="858"><?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <h2><a href="<?php the_permalink() ?>">
              <?php the_title(); ?>
            </a></h2>
            <div class="entry">
              <?php the_content(); ?>
            </div>
            <?php endwhile; endif; ?></td>
        </tr>
      </table>
    </div>
    </body>
    </html>


    Beitrag zuletzt geändert: 11.3.2012 22:26:40 von cellowich
  9. Das die Buttons "so komisch skalieren" liegt sicherlich an falschen width Angaben.

    Vielleicht solltest du als erstes mal das CSS resetten. Also mal googlen oder die einfachste Methode: als erste CSS-Anweisung:

    * {margin:0; padding: 0;}


    Was mir aufgefallen ist:
    -dein #header schließt erst am Ende der Seite (oder gar nicht?)
    - Dein #maincontent beinhaltet noch table Fragmente

    Bezüglich der Navi:

    Abgesehen davon, das die Links als Bilder eingebunden werden solltest du die Navi wie folgt aufbauen

    <nav>
    <ul>
    <li><a href="#"><img src="deinbild.jpg" alt="#"></a></li>
    <li><a href="#"><img src="deinbild.jpg" alt="#"></a></li>
    ....
    </ul>
    </nav>


    Alternative:
    <nav>
    <ul>
    <li><a class="link1" href="#">Link 1</a></li>
    <li><a class="link2" href="#">Link 2</a></li>
    ....
    </ul>
    </nav>


    Im CSS definierst du über die einzelnen Klassen die jeweiligen Hintergrundbilder für die Links.
    Die Linktexte kannst du dann im CSS mit text-indent aus dem sichtbaren Bereich schießen.

    Mit CSS und webfonts könntest du allerdings komplett auf die Bilder in der Navi verzichten.
    Ebenso braucht man für den content-bereich nicht unbedingt ein Hintergrundbild.
    #maincontent {
    background-color: white;
    border-left: 3px solid black; *
    border-right: 3px solid black; *
    }


    * Pixel grob geschätzt :wink:
    Würde genauso gehen und wieder einen HTTP-Request weniger.

    <meta charset="UTF-8">

    reicht einmal im <head>


    Beitrag zuletzt geändert: 12.3.2012 7:11:32 von pcw
  10. Diese Hintergrundgrafik kann man auch platzsparend hinbekommen. Den linken und rechten Rand als separate Hintergrundgrafik einbinden, dazwischen ein variabler, passender grauer Bereich über CSS. Den Inhaltsbereich mit Banner und Navi würde ich ebenfalls variabel machen und auf unnötige Grafiken (z. B. Navigrafiken) verzichten.
  11. Autor dieses Themas

    c*******h

    pcw schrieb:
    Vielleicht solltest du als erstes mal das CSS resetten. Also mal googlen oder die einfachste Methode: als erste CSS-Anweisung:

    * {margin:0; padding: 0;}


    Danke, bin jetzt schon mal soweit, dass es soweit dargestellt wird, wie ich mie das wünsche.
    Einziges Problem grade, trotz Css Resett wird in Opera und Firefox immer noch nen Abstand zwischen dein einzelnen Divs angezeigt (Im Internet Explorer komischerweise nicht).

    <!DOCTYPE html>
    <html lang="de-DE">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<meta name="generator" content="Brain & Fingers" />
    		<title>Ostwestfalensgloria</title>
    		<style type="text/css">
    			* {
    			margin:0;
    			padding:0;
    			}		
    			a img { border: none}
    		#header {
    			width: 934px;
    			height: 265;
    		}
    		#navi {
    			width: 880px;
    			height: 33;
    		}
    
    		#maincontent {
    			width: 873px;
    			background-color: white;
    			border-left: 3px solid black;
    			border-right: 3px solid black;
    
    }
    </style>
    
    </head>
    <body>
    <div id="header"><img src="Bilder/index_01.gif" width="934" height="265"></div>
    <div id="navi"><a href="#"><img src="Bilder/index_02.gif" alt="#"></a><a href="#"><img src="Bilder/index_03.gif" alt="#"></a><a href="#"><img src="Bilder/index_04.gif" alt="#"></a><a href="#"><img src="Bilder/index_05.gif" alt="#"></a><a href="#"><img src="Bilder/index_06.gif" alt="#"></a></div>
    <div id="maincontent">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    
    
    <p></p>
    <p></p>
    </body>
    </html>


    Beitrag zuletzt geändert: 12.3.2012 19:40:48 von cellowich
  12. Wenn du den Abstand zwischen Header und Naiv meinst, dann solltest du dir deine CSS Anweisung mal genauer ansehen....

    Da fehlt jeweils die PX Angabe hinter dem Wert von height!

    Ich denke daran liegt es.

    Alles in allem sieht es noch ganz schön zerschossen aus, aber nicht entmutigen lassen. Wird schon :wink:

    cellowich schrieb:
    Im Internet Explorer komischerweise nicht



    muhaaa... der IE macht (fast) immer irgendwas anders.
  13. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!