Wordpressanpassung bzw. Vorlage
lima-city → Forum → Die eigene Homepage → Homepage Allgemein
angabe
anweisung
auto
bereich
besondere problem
bild
button
code
frage
gleichen stelle
header
hintergrundbild
http
internet
krieg
problem
quellcode
tabelle
url
verzichten
-
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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.
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.. -
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.
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. -
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.
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 -
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 -
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 ... -
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 -
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
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 -
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.
-
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> </p> <p> </p> </div> <p></p> <p></p> </body> </html>
Beitrag zuletzt geändert: 12.3.2012 19:40:48 von cellowich -
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
cellowich schrieb:
Im Internet Explorer komischerweise nicht
muhaaa... der IE macht (fast) immer irgendwas anders.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
