[CSS + HTML] kleinere Probleme Webseite

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).

HTML:
<div id="menu-link">

		<a href="#">Men&uuml; &gt;</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&uuml; &gt;</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 &copy; 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. :rolleyes:
Danke schonmal. ;)
 
Zuletzt bearbeitet:
Also als erstes, die Sidebar schiebt sich in Chrome zum Beispiel nicht mit runter, und im IE tut sie das zwar, aber da funktioniert die Webkit animation nicht.
Eine einfache Lösung wäre doch das Menu-Div in das Content-Div schieben.
Dadurch müsste doch die Sidebar, die daneben ist, nicht mehr mit nach unten geschoben werden.

Für die Zentrierung, nutze doch einfach ein Span-Tag darum, und aligne das doch dann zentral.

p.s.
schöne strukturierung deines posts.
 
Zuletzt bearbeitet:
Danke schonmal für die Antwort. ;)
Das Menu-div in den Content Bereich zu schieben, habe ich schonmal probiert, das sah allerdings auch nicht gut aus. Auch die Zentrierung der <ul> Elemente funktioniert nicht mit align (das ist doch nur für Text?).
Ich experimentiere einfach nochmal ein bisschen.
 
für den moment finde ich die idee mit dem menü sehr gut, also wie du es mit dem balken gelöst hast find ich super, aber es ist relativ schwer zu erreichen, meiner meinung nach.
eventuell könntest du den bereich darüber onmouseovern, sodass schon beim überfliegen dieses bereiches das menü herunterfährt, fände ich besser zu nutzen.

Noch ne idee mit der sidebar, setz das ganze in ne tabelle, mach die sidebar dann colspan=2, das sollte funktionieren oder nicht?
 
Schade, zu spät gelesen, jetzt habe ich es wieder umgebaut. Der Balken war eigentlich nur eine Übergangslösung und aufgrund der von dir angesprochenen "Usability-Probleme" habe ich wieder eine Lösung mit einem etwas größeren, seitlich angordneten Container umgesetzt, die aber deutlich besser funktioniert als die erste Variante. ;)

Im Code sieht das ganze so aus:

style.css
Code:
/* Navigation */

div#navigation span {
	margin-top: 35px;
    	font-size: 12px;
	background: #3f3f3f; 
	overflow: hidden;
	float: left;
	width: 720px;
	height: 0px;
	transition: height 1s;
	-moz-transition: height 1s;
	-webkit-transition: height 1s; 
	-o-transition: height 1s;
}

div#open-nav:hover div#navigation span{
	height: 170px; 
}

div#open-nav {
	width: 90px;
	height: 35px;
	background: #f00; 
}

index.php
Code:
<div id="main"> 

	       <div id="open-nav">

		 <div id="navigation">	
  
		   <span>
 
                  "Menü-Inhalt"

		    </span>

                 <div class="clear"></div>		            

 		</div><!-- navigation --> 

	      </div><!-- open-nav -->

Mit der Farbe probiere ich noch ein bisschen herum. Ein hoher Kontrast ist an dieser Stelle mit Sicherheit sinnvoll, sonst findet man das Menü nachher nicht. :D

Mit der Sidebar muss ich jetzt noch mal gucken. Tabelle hört sich in diesem Zusammenhang recht altmodisch an, aber eventuell klappt es damit ja.

P.S. Wenn du bezüglich des restlichen Designs noch Ideen, Kritik, etc. hast, sag Bescheid. ;)
 
Zuletzt bearbeitet:
wie wärs denn mit #ffb33c als farbe dafür? sieht bei mir gar net mal so schlecht aus...
und mach das mal 30-25px hoch, sieht irgendwie besser aus:)
 
#ffb33c macht schon was her, da muss ich dir recht geben. Rot ist doch etwas zu viel des Guten. Mir persönlich gefällt es allerdings sehr gut, dass der Button bis zum unteren Rand geht, aber da werde ich noch ein paar weitere unabhängige Tester fragen. ;)

Edit: Nach meinen Anpassungen des Menüs sieht die Seite in Firefox und Chrome schonmal fast identisch aus :) (nur fokussierte Eingabefelder werden in Chrome markiert, aber das lässt sich bestimmt ändern). Im Internet Explorer 8 ist die Seite jetzt aber gar nicht mehr zu gebrauchen (???) die Container hängen sonstwo in der Gegend rum und nichts passt mehr. Dass es mit dem IE Probleme gibt, ist mir bekannt, aber dass die Seite überhaupt nicht mehr funktioniert, finde ich dann doch etwas seltsam. :rolleyes:
 
Zuletzt bearbeitet:
Dass eine Website im Internet Explorer nicht funktioniert, wenn sie webkit benutzt ist doch schon Standart^^
Wie wärs mit der Idee, den Button nicht dunkler sondern heller/rötlicher werden zu lassen, wenn man darüber hovert?
Außerdem reicht es bei nicht betrieblichen/öffentlich rechtlichen Seiten, wenn sie in Chrome, Mozilla, Safari und Opera funktioniert. Damit hast du 98% der Nutzer abgedeckt, die HTML5 mit ihren Browsern verstehen.
 
Ok, der Fehler (das total "zerhackte" Layout) war ein "!" zu viel in einem Kommentar-Ende-tag. :freak: Zum Glück habe ich ihn nach 2 Minuten gefunden. An so etwas sitzt man ja sonst meistens mehrere Stunden und findet nichts. :D Neuere Browser interessiert so etwas scheinbar nicht, aber den IE schon.
Dass die Transistion-Effekte im IE nicht funktionieren, ist mir relativ egal, schließlich nutzen nur 5% meiner Leser den IE und viele werden mit Sicherheit auch den IE 9 haben. Außerdem bin ich nicht gewillt, Technologiebremsen auch noch zu unterstützen. :D Was ich mir vorstellen könnte, wäre ein Skript, das die Browserversion überprüft und bei einer veralteten Version einen Hinweis evtl. mit Download-Link zur aktuellen Version ausgibt.

Mit der Hover-Farbe des Buttons werde ich nochmal ein bisschen herumprobieren.
 
ich finde die abgerundeten ecken persönlich nicht so toll, sie passen meiner meinung nach einfach nicht in das sonstige design
auch fand ich persönlich das erste menü schöner, das neue ist aber minimal übersichtlicher...
auch ist jetzt plötzlich eine änderung im layout der seite wenn das menü herunterfährt, weil der scrollbalken dann sichtbar wird, das ist wirklich unschön(auf 1920x1080)
 
Zuletzt bearbeitet: (menü)
Mit den Ecken muss ich mir noch etwas überlegen. Wenn ich sie nicht abrunde, sieht es irgendwie "billig" aus.
Das Menü gefällt mir persönlich so deutlich besser als vorher, denn vorher lag es ja einfach nur unformatiert im Menü-Div. Jetzt ist es zentriert und es kommt nicht mehr zu unschönen Darstellungsfehlern, wenn man die Link-Beschriftung im Menü verändert.
Meinst du mit "Änderung im Layout" das Verschieben der Seite, wenn der Scrollbalken sichtbar wird? Wenn ja, dann liegt das nur daran, dass die Sidebar jetzt weiter nach unten reicht als vorher. Ich kann ja mal gucken, ob es für das Problem eine Lösung gibt, denn das stört mich auch ein bisschen. Vor allem kommt es zu einer "grafischen Rückkopplung", wenn man die Maus knapp rechts neben den Menü-Button positioniert. :D

P.S. Was hälst du von der Idee einer Slideshow auf der Startseite?


Edit: Das Problem mit dem Scrollbalken ist schonmal gelöst:
Code:
html { overflow-y:scroll; }
 
Zuletzt bearbeitet:
Du kannst ja auch damit rumexperimentieren, dem Menüknopf einen plastischen Effekt zu geben. Über box-shadow sind ein paar echt geniale Sachen möglich. Ein kleines Highlight hier, ein Schatten da, schon hat es ne moderne 3D-Glass-Optik.

Ach ja, wenn du sowieso mit recht modernen Mitteln wie Transitions arbeitest, dann könntest du dem Suchfeld oben <input type="search"...> verpassen, statt type="text". Alte Browser verhalten sich dann trotzdem wie text, neue (insbesondere Chrome) bieten dann aber ein recht interessantes Verhalten, was Auto-Ausfüllen und so angeht.
 
die slideshow passt super, ich würde sie aber noch irgendwie dominanter machen, auch wenn ich keinen plan habe wie. eventuell mit ner anderen schrifthintergrundfarbe oder so.
die grafische rückkopplung hat sich mit dem overflow-y aufgelöst nehm ich an? bei mir ist sie nämlich nicht da.
im menü verusch doch mal die linkunterstreichung in einem dunklerem grau zu machen, könnte ich mir sehr gut vorstellen und es hat nicht mehr diesen excel-look
 
@Daaron: Ich habe mal ein bisschen mit Schatteneffekten experimentiert, das wirkt meines Erachtens aber etwas zu verspielt, zumal ich sonst nirgendwo auf der Seite Schatten verwende. Das kann aber auch daran liegen, dass ich den falschen Schatten genommen habe. Ich werde mich damit nochmal auseinandersetzen.
Für das Suchfeld habe ich "search" als Type genommen. Auf den ersten Blick habe ich zwar keinen Unterschied erkannt, aber wenn du sagst, man sollte das besser so machen, glaube ich das mal. ;)

@Apfelring: Die Unterstreichungen im Menü habe ich jetzt etwas dezenter gestaltet, das sieht wirklich besser aus. Das overflow-y verhindert die "Rückkopplung", weil sich die Seite nicht mehr verschiebt, was auch besser so ist. :D

Die Slideshow wurde noch etwas vergrößert und mit besseren Bildern gefüllt. Ich denke, das Ergebnis kann sich sehen lassen. Es handelt sich übrigens um eine Modifikation dieser Slideshow.
 
L.B. schrieb:
Für das Suchfeld habe ich "search" als Type genommen. Auf den ersten Blick habe ich zwar keinen Unterschied erkannt, aber wenn du sagst, man sollte das besser so machen, glaube ich das mal. ;)
Der Unterschied ist auch nicht groß zwischen text und search, aber er ist da. Erstmal ist es syntaktisch besser. Im Anwendungsfall sieht man die Wirkung am ehesten in Chrome/Chromium, der kann die neuen Input-Types am besten handhaben. Bei "search" entsteht im Chrome am rechten Rand des Eingabefelds ein kleines X, sobald man etwas eintippt. Damit kann man die Sucheingabe bequem mit einem Klick löschen.
 
Ich habe das Design jetzt auf meine richtige Webseite aufgesetzt und es macht sich meines Erachtens ziemlich gut. :) Zwar gibt es hier und da noch kleinere Bugs, z.B. bei der Zählung der Suchergebnisse, im großen und ganzen, läuft aber alles rund. Der Bug bei den Suchergebnissen wundert mich ein bisschen, weil das auf dem anderen Webspace problemlos funktioniert hat.
 
Zurück
Oben