CSS / Sidebar / Schrift

[zevv]

Theme: Steam 1.5, (etwas angepasst)

Hallo zusammen,

habe ein kleines Problemchen mit der CSS.

Der Blog sieht auf großen Bildschirmen bzw. mit hoher Auflösung OK aus, aber sobald man ein Notebook benutzt oder einen alten, kleinen Bildschirm, rutscht die ganze Sidebar unter den Text..., oder die Schrift geht über den Rand hinaus. Die Sidebar hab ich übrigens in eine Tabelle gepackt.

Ich weiß nicht wie ich den aktiven Link Highlighten kann. z.B. Orange. Hätte es gerne das z.B. wenn ich auf eine Unterkategorie klicke, die orange wird und die zugehörige Oberkategorie auch. Aber wie???

Weiß jemand weiter???

www.rettet-das-mittagessen.de/blog/

Login:
test/test123

Meine CSS:
...muß ich später posten



Edit:
#booklist {
margin: 2em 0 2em -1em;
padding-left: .5em;
padding-bottom: 4em;
border: 2px solid #000;
background: #fff;
color: #000;
display: block;
}

#booklist h4 {
color: #000;
font-size: inherit;
}

#booklist img{
margin-right: 1em;
margin-bottom: 1em;
border: 1px solid #000;
}

html>body .entry ul
{
margin-left: 0px;
padding: 0 0 0 30px;
list-style: none;
padding-left: 10px;
text-indent: -10px;
}

html>body .entry li
{
margin: 7px 0 8px 10px;
}

body
{
font-size: 62.5%; /* Resets 1em to 10px */
font-family : 'Bitstream Vera Sans', 'Lucida Grande', Verdana, Arial, 'sans-serif';
background-color: #d5d6d7;
color: #333333;
text-align: center;
margin: 0 auto;
padding: 0;
}

#header
{
background-color: #88D7F8;
padding: 0;
margin: 0px auto;
height: 95px;
width: 100%;
}

/* Darstellung des Gesamten Blogs */
#page
{
background-color: #fff;
/*border: 1px solid #959596;*/
text-align: left;
margin: 20px auto;
padding: 0;
width: 92%;
}

#content
{
font-size: 1.2em
}

#footer
{
background-color: #F4793B;
padding: 0;
margin: 0 auto;
width: 100%;
height: 64px;
clear: both;
}

#footer p
{
margin: 0;
padding: 20px 0;
text-align: center;
}

#sidebar
{
padding: 20px 0 10px 0;
/* margin-left vorher: 72 Prozent */
margin-left: 50%;
/*width vorher: 25 Prozent */
width: 28%;
font: 1em 'Bitstream Vera Sans', 'Lucida Grande', Verdana, Arial, 'sans-serif';
}



#sidebar h2
{
font-family: 'Bitstream Vera Sans', 'Lucida Grande', Verdana, Arial, 'sans-serif';
font-size: 1.2em;
}

#sidebar form
{
margin: 0;
}

#sidebar ul, #sidebar ul ol
{
margin: 0;
padding: 0;
}

#sidebar ul li
{
list-style-type: none;
list-style-image: none;
margin-bottom: 15px;
}

#sidebar ul p, #sidebar ul select
{
margin: 5px 0 8px;
}

#sidebar ul ul, #sidebar ul ol
{
margin: 5px 0 0 10px;
}

#sidebar ul ul ul, #sidebar ul ol
{
margin: 0 0 0 10px;
}

ol li, #sidebar ul ol li
{
list-style: decimal outside;
}

#sidebar ul ul li, #sidebar ul ol li
{
margin: 3px 0 0;
padding: 0;
}

#sidebar #searchform #s
{
width: 115px;
padding: 2px;
}

#sidebar #searchsubmit
{
padding: 1px;
}

#searchform
{
margin: 15px 15px;
padding: 0px 0px;
text-align: right;
}

.entry form
{ /* This is mainly for password protected posts, makes them look better. */
text-align:center;
}

select
{
width: 130px;
}

/* Begin Calendar */
#wp-calendar
{
empty-cells: show;
margin: 10px auto 0;
width: 130px;
}

#wp-calendar #next a
{
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a
{
padding-left: 10px;
text-align: left;
}

#wp-calendar a
{
display: block;
}

#wp-calendar caption
{
text-align: center;
width: 100%;
}

#wp-calendar td
{
padding: 3px 0;
text-align: center;
}

#wp-calendar td.pad:hover
{ /* Doesn't work in IE */
background-color: #fff;
}

#wp-calendar #prev a
{
font-size: 9pt;
}

#wp-calendar a
{
text-decoration: none;
color: #f4793B;
}

#wp-calendar caption
{
font: bold 1.3em 'Bitstream Vera Sans', 'Lucida Grande', Verdana, Arial, 'sans-serif';
text-align: center;
}

#wp-calendar th
{
font-style: normal;
text-transform: capitalize;
}
/* End Calendar */

/* Aenderungen für die Singelansicht */
.widecolumn
{
line-height: 1.6em;
padding: 10px 0 20px 0;
/* margin: 5px 0 0 150px;*/
margin: 5px 0 0 120px;
/* 65% */
width: 80%;
}

.widecolumn .post
{
margin: 0;

}

.widecolumn .postmetadata
{
margin: 30px 0;
text-align: left;
}

.widecolumn .entry p
{
font-size: 1.05em;
}

.narrowcolumn
{
float: left;
padding: 0 5px 20px 45px;
margin: 0 0 0 0;
width: 65%;
}

.narrowcolumn .postmetadata
{
padding-top: 5px;
}

.narrowcolumn .entry, .widecolumn .entry
{
line-height: 1.4em;
}

.narrowcolumn .postmetadata
{
text-align: left;
}

/* Begin Comments*/
.commentlist li, #commentform input, #commentform textarea
{
font: 0.9em 'Bitstream Vera Sans', 'Lucida Grande', Verdana, Arial, 'sans-serif';
}

.commentlist li
{
font-weight: bold;
}

.commentlist cite, .commentlist cite a
{
font-weight: bold;
font-style: normal;
font-size: 1.1em;
}

.commentlist p
{
font-weight: normal;
line-height: 1.5em;
text-transform: none;
}


#commentform p
{
font-family: 'Bitstream Vera Sans', 'Lucida Grande', Verdana, Arial, 'sans-serif';
}

.commentmetadata
{
font-weight: normal;
}

.alt
{
margin: 0;
padding: 10px;
}

.commentlist
{
padding: 0;
text-align: justify;
}

.commentlist li
{
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}

.commentlist p
{
margin: 10px 5px 10px 0;
}

#commentform p
{
margin: 5px 0;
}

.nocomments
{
text-align: center;
margin: 0;
padding: 0;
}

.commentmetadata
{
margin: 0;
display: block;
}

#commentform input
{
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}

#commentform textarea
{
width: 100%;
padding: 2px;
}

#commentform #submit
{
margin: 0;
float: right;
}
/* End Comments */

.alt
{
background-color: #f8f8f8;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}

.navigation
{
display: block;
text-align: center;
margin: 10px 0;
padding: 10px 0;
clear: both;
}

.center
{
text-align: center;
}

.entry ol
{
padding: 0 0 0 35px;
margin: 0;
}

.entry ol li
{
margin: 0;
padding: 0;
}

.postmetadata ul, .postmetadata li
{
display: inline;
list-style-type: none;
list-style-image: none;
}

.description
{
text-align: center;
font-size: 1.2em;
}

.post
{
margin: 0 0 40px;
text-align: justify;
clear: both;
padding: 0 5px 0 0;
}

.entry p a:visited
{
color: #0066CC;
}

/* Begin Images */
p img
{
padding: 0;
max-width: 100%;
}

/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */

img.centered
{
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright
{
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft
{
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright
{
float: right;
}

.alignleft
{
float: left
}
/* End Images */

small
{
font-family: 'Bitstream Vera Sans', 'Lucida Grande', Verdana, Arial, 'sans-serif';
font-size: 0.9em;
line-height: 1.5em;
}

h1, h2, h3
{
font-family: 'Bitstream Vera Sans', 'Lucida Grande', Verdana, Arial, 'sans-serif';
font-weight: bold;
}

h1
{
font-size: 3em;
text-align: center;
}

h2
{
font-size: 1.6em;
}

h2.pagetitle
{
font-size: 1.6em;
}

h3
{
font-size: 1.3em;
}



h1, h1 a, h1 a:hover, h1 a:visited, .description
{
text-decoration: none;
color: white;
}


/* Ueberschriftenfarbe z.B. Kategorien, Meta...*/
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited
{
color: #333;
}




h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite
{
text-decoration: none;
}







small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike
{
color: #777;
}

code
{
font: 1.1em 'Courier New', Courier, Fixed;
}

acronym, abbr, span.caps
{
font-size: 0.9em;
letter-spacing: .07em;
}





a, h2 a:hover, h3 a:hover
{
color: #06c;
text-decoration: none;
}

/*
/*funktioniert nur fuer Meta und fuer links die links sind auf der hauptseite
a:active
{
color: #ff0106;
text-decoration: underline;
}
*/



/*hover fuer alle links in der sidebar*/
a:hover
{
color: #f4793b;
text-decoration: underline;
}


h1
{
padding-top: 10px;
margin: 0;
}

h2
{
margin: 30px 0 0;
}

/* Ueberschrift bold im Anzeigebereich */
h2.pagetitle
{
margin-top: 30px;
text-align: center;
color: #F4793B;
}

h3
{
padding: 0;
margin: 30px 0 0;
}

h3.comments
{
padding: 0;
margin: 40px auto 20px;
}

acronym, abbr, span.caps
{
cursor: help;
}

acronym, abbr
{
border-bottom: 1px dashed #999;
}

blockquote
{
margin: 15px 30px 0 10px;
padding-left: 20px;
border-left: 5px solid #ddd;
}

blockquote cite
{
margin: 5px 0 0;
display: block;
}

hr
{
display: none;
}

a img
{
border: none;
}




Danke schon mal

[Monika]

Zitat von zevv

Theme: Steam 1.5, (etwas angepasst)

Hallo zusammen,

habe ein kleines Problemchen mit der CSS.

Der Blog sieht auf großen Bildschirmen bzw. mit hoher Auflösung OK aus, aber sobald man ein Notebook benutzt oder einen alten, kleinen Bildschirm, rutscht die ganze Sidebar unter den Text..., oder die Schrift geht über den Rand hinaus. Die Sidebar hab ich übrigens in eine Tabelle gepackt.

das wirst Du nicht ändern können, die Angaben in der sidebar sind einfach zu breit, die müssen runterrutschen,
von der Tabelle sag ich mal nichts (! !)

Eine Unterkategorie zu highlighten ist Null Problem, bloß wieso sollte dann die Oberkategorie mit angezeigt werden?

wie es bei statischen Seiten funktioniert sahst Du..
lG
Monika