L.B.
Ensign
- Registriert
- Juni 2010
- Beiträge
- 209
Hallo Community,
seit längerer Zeit betreibe ich einen Online-Blog auf Basis von Wordpress. Ich habe mich letztens entschieden, ein eigenes Theme für die Seite zu schreiben und bin auch schon recht weit. Auf der Testseite ist der aktuelle Stand zu sehen: http://hls-projekt.co.de/ Wie man sehen kann, funktionieren die Kernfunktionen (Posts auslesen, Kommentarfunktion, etc.) bereits ganz gut, lediglich beim Design gibt es noch ein paar kleinere Probleme, die ich selbst nach stundelangem Probieren nicht gelöst habe. Ich liste sie einfach mal auf.
1.) Die Positionierung des Menüs ist suboptimal gelöst. Ganz oben befindet sich das 41px hohe Header-Div, darunter folgt der 35px hohe "menu-link" Container und dann kommt der "navigation" Container, der aber eigentlich im "menu-link" Container liegt. Diesen habe ich einfahc mit margin-top 20px nach unten geschoben. In manchen Browsern sieht es dann gut aus, in anderen, ist plötzlich eine Pixel-Zeile zuviel Platz. Besser wäre es, wenn ich einen Container hätte, der so hoch wäre, wie der Hintergrund-Balken (76px).
2.) Beim Ausklappen des Menüs schiebt sich der ganze Main-Wrapper nach unten, also auch die Sidebar. Besser wäre es, wenn die Sidebar an ihrer Position bleiben würde und nur die Hauptspalte nach unten geschoben würde.
3.) Der Inhalt des Menüs (die ul-Listen) lässt sich nicht zentrieren.
########## Quellcode ##################
index.php
style.css
Ich weiß, das sind viele Probleme, aber ich bin sicher, ihr habt eine Lösung. Ich komme da nämlich irgendwie nicht wirklich weiter.
Danke schonmal.
seit längerer Zeit betreibe ich einen Online-Blog auf Basis von Wordpress. Ich habe mich letztens entschieden, ein eigenes Theme für die Seite zu schreiben und bin auch schon recht weit. Auf der Testseite ist der aktuelle Stand zu sehen: http://hls-projekt.co.de/ Wie man sehen kann, funktionieren die Kernfunktionen (Posts auslesen, Kommentarfunktion, etc.) bereits ganz gut, lediglich beim Design gibt es noch ein paar kleinere Probleme, die ich selbst nach stundelangem Probieren nicht gelöst habe. Ich liste sie einfach mal auf.
1.) Die Positionierung des Menüs ist suboptimal gelöst. Ganz oben befindet sich das 41px hohe Header-Div, darunter folgt der 35px hohe "menu-link" Container und dann kommt der "navigation" Container, der aber eigentlich im "menu-link" Container liegt. Diesen habe ich einfahc mit margin-top 20px nach unten geschoben. In manchen Browsern sieht es dann gut aus, in anderen, ist plötzlich eine Pixel-Zeile zuviel Platz. Besser wäre es, wenn ich einen Container hätte, der so hoch wäre, wie der Hintergrund-Balken (76px).
HTML:
<div id="menu-link">
<a href="#">Menü ></a>
<div id="navigation">
<div id="navigation-content">
"Inhalt des Menüs in unsortierten Listen"
<div class="clear"></div>
</div><!-- navigation-content -->
</div><!-- navigation -->
</div><!-- menu-link -->
Code:
div#navigation {
margin-top: 20px;}
2.) Beim Ausklappen des Menüs schiebt sich der ganze Main-Wrapper nach unten, also auch die Sidebar. Besser wäre es, wenn die Sidebar an ihrer Position bleiben würde und nur die Hauptspalte nach unten geschoben würde.
3.) Der Inhalt des Menüs (die ul-Listen) lässt sich nicht zentrieren.
########## Quellcode ##################
index.php
HTML:
<?php
$args = array(
'numberposts' => 10,
'offset' => 0,
'category' => 0,
'orderby' => 'post_date',
'order' => 'DESC',
'include' => NULL,
'exclude' => NULL,
'meta_key' => NULL,
'meta_value' => NULL,
'post_type' => 'post',
'post_status' => 'publish',
'suppress_filters' => true );
$last_posts = wp_get_recent_posts($args);
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<a href="http://projects.lb-home.de/"><img id="logo" src="<?=get_stylesheet_directory_uri()?>/images/logo.png" /></a>
<div id="wrapper">
<div id="header">
<div id="search">
<?php get_search_form(); ?>
</div>
<div class="clear"></div>
</div>
<div id="main">
<div id="menu-link">
<a href="#">Menü ></a>
<div id="navigation">
<div id="navigation-content">
"Inhalt des Menüs in unsortierten Listen"
<div class="clear"></div>
</div><!-- navigation-content -->
</div><!-- navigation -->
</div><!-- menu-link -->
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="article">
<div class="title">
<a href="<?php the_permalink();?>"><h2><?php the_title(); ?></h2></a> <span class="author"><?=get_the_author();?></span>
</div>
<div class="clear"></div>
<div class="entry">
<?php the_content('+ weiterlesen'); ?>
</div>
<div class="info">
<?=get_the_date('d. F Y'); ?> <?php if(current_user_can('edit_posts')) echo ' | <a href="'.get_edit_post_link().'">Bearbeiten</a>'; ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php comments_template(); ?>
<div id="footer">
<div id="footer-icons">
<a href="http://projects.lb-home.de/rss"><img src="<?=get_stylesheet_directory_uri()?>/images/rss_button.jpg" class="footer-icon" /></a>
<a href="http://www.youtube.com/user/LBHomeprojects"><img src="<?=get_stylesheet_directory_uri()?>/images/youtube_button.jpg" class="footer-icon" /><div id="youtube-button"></div></a>
</div>
<div id="footer-text">
Copyright © Lukas Bommes 2012<br />
<a href="http://projects.lb-home.de/impressum/">Impressum</a> | <a href="http://projects.lb-home.de/kontakt/">Kontakt</a> | <a href="http://projects.lb-home.de/wp-admin">Administration</a>
</div>
<div class="clear"></div>
</div><!-- footer -->
</div><!-- content -->
<div id="sidebar">
<h2 id="news-title">Neue Artikel</h2>
<ul>
<?php foreach($last_posts as $cur_post) { ?>
<a href="<?=bloginfo('siteurl')?>/?p=<?=$cur_post['ID']?>"><li>
<?php if (strlen($cur_post['post_title']) > 25) { echo substr($cur_post['post_title'], 0, 25) . '...'; } else { echo $cur_post['post_title']; } ?>
<small id="recent-post-date">(<?=get_the_time('d. F', $cur_post['ID']); ?>)</small></li></a>
<?php } ?>
</ul>
</div><!-- sidebar -->
<div class="clear"></div>
</div><!-- main -->
</div><!-- wrapper -->
</body>
</html>
style.css
Code:
/* Container */
hmtl, body {
height: 100%;
padding: 0;
margin: 0;
background: #efefef url('images/background.png') repeat-x;
font-size: 12px;
font-family: Arial,Helvetica,sans-serif;
}
/* Containers */
#header {
height: 41px;
}
#search {
width: 260px;
padding-top: 30px;
float: right;
}
#wrapper {
position: relative;
min-height: 100%;
width: 1000px;
background: none;
margin: 0 auto;
padding: 0;
}
#main {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#content {
padding-top: 40px;
padding-right: 10px;
width: 720px;
font-size: 12px;
height: 100%;
float: left;
}
#sidebar {
margin-top: 40px;
width: 240px;
min-height: 100%;
float: right;
padding: 10px;
border: 1px solid #ddd;
background: #fff;
}
#footer-icons {
float: left;
margin-right: 10px;
height: 32px;
}
#footer-text {
padding: 4px 0;
float: none;
height: 32px;
line-height: 12px;
font-size: 11px;
}
.footer-icon {
margin-right: 5px;
}
#footer {
border-top: 1px solid #ccc;
margin-top: 30px;
padding: 10px 0;
}
/* Some stuff for positioning the footer */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/* Article */
.entry p img {
max-width: 698px;
}
.article {
padding: 10px;
border: 1px solid #ddd;
background: #fff;
margin-bottom: 15px;
}
.article .author {
float: right;
}
.article h2 {
display: inline;
}
.article .title {
width: 100%;
padding: 0 0 5px 0;
border-bottom: 1px solid #ddd;
}
.article .title a {
color: #000;
}
.article .title a:hover {
text-decoration: none;
color: #777;
}
.article .info {
font-size: 0.8em;
}
/* Navigation */
div#navigation {
margin-top: 20px;
font-size: 12px;
background: #3f3f3f;
float: left;
overflow: hidden;
width: 720px;
height: 0px;
transition: height 1s;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
}
div#menu-link:hover div#navigation {
height: 170px;
}
div#navigation-content {
}
ul.toplevel {
padding: 0;
list-style: none;
}
ul.submenu {
padding: 10px 0 10px 0;
list-style: none;
}
ul.toplevel li {
padding-left: 40px;
float: left;
font-weight: bold;
margin: 0 auto;
}
ul.submenu li {
padding-left: 0;
line-height: 20px;
float: none;
font-weight: normal;
}
ul.toplevel li a, ul.toplevel li a:active, ul.toplevel li a:visited {
text-decoration: none;
color: #fff;
}
ul.toplevel li a:hover {
text-decoration: underline;
color: #fff;
}
ul.submenu li a, ul.submenu li a:active, ul.submenu li a:visited {
text-decoration: none;
color: #fff;
}
ul.submenu li a:hover {
text-decoration: underline;
color: #fff;
}
div#menu-link {
width: 720px;
height:35px;
}
div#menu-link a, div#menu-link a:active, div#menu-link a:visited, div#menu-link a:hover {
color: #fff;
font-size: 12px;
}
/* Misc */
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
img#logo {
position: absolute;
top: 86px;
left: 10px;
margin-right: 10px;
}
a.more-link, a.more-link:active, a.more-link:visited {
color: #000;
}
a.more-link:hover {
text-decoration: none;
color: #777;
}
/* 404 Fehler */
img#img404 {
display: block;
margin: 0 108px 35px;
}
div#admin404-text {
font-style: italic;
}
/* Headers */
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
}
/* Links */
a, a:active, a:visited {
color: #188aeb;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Searchform */
form#searchform {
background-color: #ffffff;
border: 1px solid #ddd;
width: 258px;
height: 28px;
}
input#s {
background: none;
border: none;
font-size: 14px;
height: 22px;
padding: 3px;
width: 220px;
position:relative;
}
input#searchsubmit {
border: none;
height:28px;
width:28px;
margin:0 auto;
position:relative;
float: right;
background:#ffffff url(images/search.png) no-repeat;
transition: background-color .15s linear;
-moz-transition: background-color .15s linear;
-webkit-transition: background-color .15s linear;
-o-transition: background-color .15s linear;
}
input#searchsubmit:hover {
background:#8c8c8c url(images/search.png) no-repeat;
border: none;
}
/* Sidebar: Recent posts */
h2#news-title {
padding-bottom: 5px;
border-bottom: 1px solid #ddd;
}
#recent-post-date {
float: right;
}
div#sidebar ul{
padding: 0;
margin: 0;
list-style: none;
line-height: 25px;
}
div#sidebar ul li {
margin-top: 5px;
padding: 0 10px 0 10px;
border: 1px solid #ddd;
}
div#sidebar ul a li, div#sidebar ul a li:active, div#sidebar ul a li:visited {
text-decoration: none;
color: #000;
background-color: #fff;
transition: background-color .15s linear;
-moz-transition: background-color .15s linear;
-webkit-transition: background-color .15s linear;
-o-transition: background-color .15s linear;
}
div#sidebar ul a li:hover {
text-decoration: underline;
border-color: #aaa;
background-color: #ccc;
}
/* Comments-Style */
div#kommentar-formular {
padding: 10px;
border: 1px solid #ddd;
background: #fff;
margin-bottom: 15px;
}
h2#respond {
width: 100%;
padding: 0 0 5px 0;
border-bottom: 1px solid #ddd;
}
input#author, input#email, input#url {
border: 1px solid #aaa;
width: 180px;
}
textarea#comment {
border: 1px solid #aaa;
resize: vertical;
width: 696px;
min-height: 190px;
}
input#submit {
background-color: #eee;
border: 1px solid #aaa;
height: 30px;
width: 180px;
}
input#submit:hover {
background-color: #ccc;
border: 1px solid #aaa;
height: 30px;
width: 180px;
-moz-transition: background-color .15s linear;
-webkit-transition: background-color .15s linear;
-o-transition: background-color .15s linear;
}
div#kommentare {
padding: 10px;
border: 1px solid #ddd;
background: #fff;
margin-bottom: 15px;
}
div#nocomments {
padding: 10px;
border: 1px solid #ddd;
background: #fff;
margin-bottom: 15px;
}
.comment {
width: 100%;
padding-top: 10px;
border-top: 1px solid #ddd;
}
p#comment-warning {
font-weight: bold;
padding: 5px 5px 5px 5px;
border: 1px solid #aaa;
background-color: #feff80;
}
a.url {
color: #000;
}
Ich weiß, das sind viele Probleme, aber ich bin sicher, ihr habt eine Lösung. Ich komme da nämlich irgendwie nicht wirklich weiter.
Danke schonmal.
Zuletzt bearbeitet: