PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Besonderer Inhalt
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Design für Wordpress - Sidebars verschieben sich?!
Beitrag
<blockquote data-quote="cHrIzZz" data-source="post: 1434066" data-attributes="member: 12390"><p>Hallo!</p><p></p><p>Sitze gerade an der Umsetzung eines Designs für eine AutoFit Werkstatt.</p><p></p><p>Bei meinem HTML Layout sieht alles super aus - nur hapert es jetzt bei der Umsetzung in Wordpress.</p><p>Fertig ist das Wordpress Design natürlich noch nicht, diverse Style und sowas fehlen...</p><p></p><p>Aber mein Hautproblem im Moment ist, dass die Dynamischen Seitenleisten sich verschieben...</p><p></p><p>Habe mal zwei Screenshots angehängt und sende euch hier mal den CSS File mit.</p><p></p><p>Screenshot HTML: </p><p></p><p>Screenshot WP: </p><p></p><p>[code]/* @override http://localhost:8888/wordpress/wp-content/themes/sandbox/style.css */</p><p></p><p>/*</p><p>THEME NAME: Sandbox</p><p>THEME URI: http://www.plaintxt.org/themes/sandbox/</p><p>DESCRIPTION: Rich with powerful and dynamic semantic class selectors, Sandbox is a canvas for CSS artists</p><p>VERSION: 1.6.1</p><p>AUTHOR: <a href="http://andy.wordpress.com/">Andy Skelton</a> &amp; <a href="http://www.plaintxt.org/">Scott Allan Wallick</a></p><p>AUTHOR URI:</p><p>TAGS: sandbox, microformats, hcard, hatom, xoxo, widgets, blank slate, starter theme, minimalist, developer</p><p>*/</p><p></p><p>body {</p><p> background-color: #fff;</p><p> background-image: none;</p><p> color: #000;</p><p> font: .8em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;</p><p>}</p><p></p><p>div#header {</p><p> background: url(img/logo_autofitsk.jpg) no-repeat;</p><p> width: 960px;</p><p> height: 280px;</p><p>}</p><p></p><p>div#header img {</p><p> padding-top: 96px;</p><p>}</p><p></p><p></p><p>/*</p><p>LAYOUT: Three-Column</p><p>DESCRIPTION: Three-column fluid layout with two sidebars on both sides of content</p><p>*/</p><p></p><p>div#wrapper {</p><p> width: 960px;</p><p> margin-right: auto;</p><p> margin-left: auto;</p><p> margin-top: 5px;</p><p></p><p>}</p><p></p><p>div#container {</p><p>float:left;</p><p>width:960px;</p><p>}</p><p></p><p>div#content {</p><p>margin:0 207px;</p><p>padding-right: 3px;</p><p>padding-left: 3px;</p><p>padding-top: 10px;</p><p>background: #ececec url(../img/border.jpg) repeat-x;</p><p>height: 500px;</p><p>}</p><p></p><p>div.sidebar {</p><p>float:left;</p><p>overflow:hidden;</p><p>width:200px;</p><p>}</p><p></p><p>div#primary {</p><p> margin:0 0 0 -100%;</p><p> padding-right: 3px;</p><p> padding-left: 3px;</p><p> padding-top: 10px;</p><p> background: #ececec url(img/border.jpg) repeat-x;</p><p>}</p><p></p><p>* html div#primary {</p><p>left:20px;</p><p>position:relative;</p><p>}</p><p></p><p>div#secondary {</p><p>margin:0 0 0 -200px;</p><p> padding-right: 3px;</p><p> padding-left: 3px;</p><p> padding-top: 10px;</p><p> background: #ececec url(../img/border.jpg) repeat-x;</p><p> height: 500px;</p><p> width: 200px;</p><p>}</p><p></p><p>div#footer {</p><p>clear:left;</p><p>width:100%;</p><p>}</p><p></p><p>/* Just some example content */</p><p>div.skip-link {</p><p>position:absolute;</p><p>right:1em;</p><p>top:1em;</p><p>}</p><p></p><p>div#menu {</p><p>background:#EEE;</p><p>height:1.5em;</p><p>margin:1em 0;</p><p>width:100%;</p><p>}</p><p></p><p>div#menu ul,div#menu ul ul {</p><p>line-height:1;</p><p>list-style:none;</p><p>margin:0;</p><p>padding:0;</p><p>}</p><p></p><p>div#menu ul a {</p><p>display:block;</p><p>margin-right:1em;</p><p>padding:0.2em 0.5em;</p><p>text-decoration:none;</p><p>}</p><p></p><p>div#menu ul ul ul a {</p><p>font-style:italic;</p><p>}</p><p></p><p>div#menu ul li ul {</p><p>left:-999em;</p><p>position:absolute;</p><p>}</p><p></p><p>div#menu ul li:hover ul {</p><p>left:auto;</p><p>}</p><p></p><p>.entry-title,.entry-meta {</p><p>clear:both;</p><p>}</p><p></p><p>div#container,div#primary {</p><p>margin-top:2em;</p><p>}</p><p></p><p>form#commentform .form-label {</p><p>margin:1em 0 0;</p><p>}</p><p></p><p>form#commentform span.required {</p><p>background:#fff;</p><p>color:#c30;</p><p>}</p><p></p><p>form#commentform,form#commentform p {</p><p>padding:0;</p><p>}</p><p></p><p>input#author,input#email,input#url,textarea#comment {</p><p>padding:0.2em;</p><p>}</p><p></p><p>div.comments ol li {</p><p>margin:0 0 3.5em;</p><p>}</p><p></p><p>textarea#comment {</p><p>height:13em;</p><p>margin:0 0 0.5em;</p><p>overflow:auto;</p><p>width:66%;</p><p>}</p><p></p><p>.alignright,img.alignright{</p><p>float:right;</p><p>margin:1em 0 0 1em;</p><p>}</p><p></p><p>.alignleft,img.alignleft{</p><p>float:left;</p><p>margin:1em 1em 0 0;</p><p>}</p><p></p><p>.aligncenter,img.aligncenter{</p><p>display:block;</p><p>margin:1em auto;</p><p>text-align:center;</p><p>}</p><p></p><p>div.gallery {</p><p>clear:both;</p><p>height:180px;</p><p>margin:1em 0;</p><p>width:100%;</p><p>}</p><p></p><p>p.wp-caption-text{</p><p>font-style:italic;</p><p>}</p><p></p><p>div.gallery dl{</p><p>margin:1em auto;</p><p>overflow:hidden;</p><p>text-align:center;</p><p>}</p><p></p><p>div.gallery dl.gallery-columns-1 {</p><p>width:100%;</p><p>}</p><p></p><p>div.gallery dl.gallery-columns-2 {</p><p>width:49%;</p><p>}</p><p></p><p>div.gallery dl.gallery-columns-3 {</p><p>width:33%;</p><p>}</p><p></p><p>div.gallery dl.gallery-columns-4 {</p><p>width:24%;</p><p>}</p><p></p><p>div.gallery dl.gallery-columns-5 {</p><p>width:19%;</p><p>}</p><p></p><p>div#nav-above {</p><p>margin-bottom:1em;</p><p>}</p><p></p><p>div#nav-below {</p><p>margin-top:1em;</p><p>}</p><p></p><p>div#nav-images {</p><p>height:150px;</p><p>margin:1em 0;</p><p>}</p><p></p><p>div.navigation {</p><p>height:1.25em;</p><p>}</p><p></p><p>div.navigation div.nav-next {</p><p>float:right;</p><p>text-align:right;</p><p>}</p><p></p><p>div.sidebar h3 {</p><p>font-size:1.2em;</p><p>}</p><p></p><p>div.sidebar input#s {</p><p>width:7em;</p><p>}</p><p></p><p>div.sidebar li {</p><p>list-style:none;</p><p>margin:0 0 2em;</p><p>}</p><p></p><p>div.sidebar li form {</p><p>margin:0.2em 0 0;</p><p>padding:0;</p><p>}</p><p></p><p>div.sidebar ul ul {</p><p>margin:0 0 0 1em;</p><p>}</p><p></p><p>div.sidebar ul ul li {</p><p>list-style:disc;</p><p>margin:0;</p><p>}</p><p></p><p>div.sidebar ul ul ul {</p><p>margin:0 0 0 0.5em;</p><p>}</p><p></p><p>div.sidebar ul ul ul li {</p><p>list-style:circle;</p><p>}</p><p></p><p>div#menu ul li,div.gallery dl,div.navigation div.nav-previous {</p><p>float:left;</p><p>}</p><p></p><p>div#header,div#footer {</p><p>text-align:center;</p><p>}</p><p></p><p>input#author,input#email,input#url,div.navigation div {</p><p>width:50%;</p><p>}</p><p></p><p>div.gallery *,div.sidebar div,div.sidebar h3,div.sidebar ul {</p><p>margin:0;</p><p>padding:0;</p><p>}[/code]</p><p></p><p>Code ist Messy, weiß ich...Wird alles danach noch aufgeräumt ;-)</p><p></p><p>Danke euch schonmal!</p></blockquote><p></p>
[QUOTE="cHrIzZz, post: 1434066, member: 12390"] Hallo! Sitze gerade an der Umsetzung eines Designs für eine AutoFit Werkstatt. Bei meinem HTML Layout sieht alles super aus - nur hapert es jetzt bei der Umsetzung in Wordpress. Fertig ist das Wordpress Design natürlich noch nicht, diverse Style und sowas fehlen... Aber mein Hautproblem im Moment ist, dass die Dynamischen Seitenleisten sich verschieben... Habe mal zwei Screenshots angehängt und sende euch hier mal den CSS File mit. Screenshot HTML: Screenshot WP: [code]/* @override http://localhost:8888/wordpress/wp-content/themes/sandbox/style.css */ /* THEME NAME: Sandbox THEME URI: http://www.plaintxt.org/themes/sandbox/ DESCRIPTION: Rich with powerful and dynamic semantic class selectors, Sandbox is a canvas for CSS artists VERSION: 1.6.1 AUTHOR: <a href="http://andy.wordpress.com/">Andy Skelton</a> & <a href="http://www.plaintxt.org/">Scott Allan Wallick</a> AUTHOR URI: TAGS: sandbox, microformats, hcard, hatom, xoxo, widgets, blank slate, starter theme, minimalist, developer */ body { background-color: #fff; background-image: none; color: #000; font: .8em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; } div#header { background: url(img/logo_autofitsk.jpg) no-repeat; width: 960px; height: 280px; } div#header img { padding-top: 96px; } /* LAYOUT: Three-Column DESCRIPTION: Three-column fluid layout with two sidebars on both sides of content */ div#wrapper { width: 960px; margin-right: auto; margin-left: auto; margin-top: 5px; } div#container { float:left; width:960px; } div#content { margin:0 207px; padding-right: 3px; padding-left: 3px; padding-top: 10px; background: #ececec url(../img/border.jpg) repeat-x; height: 500px; } div.sidebar { float:left; overflow:hidden; width:200px; } div#primary { margin:0 0 0 -100%; padding-right: 3px; padding-left: 3px; padding-top: 10px; background: #ececec url(img/border.jpg) repeat-x; } * html div#primary { left:20px; position:relative; } div#secondary { margin:0 0 0 -200px; padding-right: 3px; padding-left: 3px; padding-top: 10px; background: #ececec url(../img/border.jpg) repeat-x; height: 500px; width: 200px; } div#footer { clear:left; width:100%; } /* Just some example content */ div.skip-link { position:absolute; right:1em; top:1em; } div#menu { background:#EEE; height:1.5em; margin:1em 0; width:100%; } div#menu ul,div#menu ul ul { line-height:1; list-style:none; margin:0; padding:0; } div#menu ul a { display:block; margin-right:1em; padding:0.2em 0.5em; text-decoration:none; } div#menu ul ul ul a { font-style:italic; } div#menu ul li ul { left:-999em; position:absolute; } div#menu ul li:hover ul { left:auto; } .entry-title,.entry-meta { clear:both; } div#container,div#primary { margin-top:2em; } form#commentform .form-label { margin:1em 0 0; } form#commentform span.required { background:#fff; color:#c30; } form#commentform,form#commentform p { padding:0; } input#author,input#email,input#url,textarea#comment { padding:0.2em; } div.comments ol li { margin:0 0 3.5em; } textarea#comment { height:13em; margin:0 0 0.5em; overflow:auto; width:66%; } .alignright,img.alignright{ float:right; margin:1em 0 0 1em; } .alignleft,img.alignleft{ float:left; margin:1em 1em 0 0; } .aligncenter,img.aligncenter{ display:block; margin:1em auto; text-align:center; } div.gallery { clear:both; height:180px; margin:1em 0; width:100%; } p.wp-caption-text{ font-style:italic; } div.gallery dl{ margin:1em auto; overflow:hidden; text-align:center; } div.gallery dl.gallery-columns-1 { width:100%; } div.gallery dl.gallery-columns-2 { width:49%; } div.gallery dl.gallery-columns-3 { width:33%; } div.gallery dl.gallery-columns-4 { width:24%; } div.gallery dl.gallery-columns-5 { width:19%; } div#nav-above { margin-bottom:1em; } div#nav-below { margin-top:1em; } div#nav-images { height:150px; margin:1em 0; } div.navigation { height:1.25em; } div.navigation div.nav-next { float:right; text-align:right; } div.sidebar h3 { font-size:1.2em; } div.sidebar input#s { width:7em; } div.sidebar li { list-style:none; margin:0 0 2em; } div.sidebar li form { margin:0.2em 0 0; padding:0; } div.sidebar ul ul { margin:0 0 0 1em; } div.sidebar ul ul li { list-style:disc; margin:0; } div.sidebar ul ul ul { margin:0 0 0 0.5em; } div.sidebar ul ul ul li { list-style:circle; } div#menu ul li,div.gallery dl,div.navigation div.nav-previous { float:left; } div#header,div#footer { text-align:center; } input#author,input#email,input#url,div.navigation div { width:50%; } div.gallery *,div.sidebar div,div.sidebar h3,div.sidebar ul { margin:0; padding:0; }[/code] Code ist Messy, weiß ich...Wird alles danach noch aufgeräumt ;-) Danke euch schonmal! [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?
Antworten
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Design für Wordpress - Sidebars verschieben sich?!
Oben