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 ist Messy, weiß ich...Wird alles danach noch aufgeräumt ;-)
Danke euch schonmal!
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 ist Messy, weiß ich...Wird alles danach noch aufgeräumt ;-)
Danke euch schonmal!
