Klassenanwendung h2

stevie99

Hallo,

ich habe folgenden Code eingebaut:

PHP

<div class="ueberschrift-kuenstler-sidebar">Künstler(in) der Woche</div>


<div class="sidebar-artikel"> 
<?php query_posts('cat=14&showposts=1'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="cats">


<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> 
<div class="sidebar img">
<?php the_excerpt_reloaded(34, '<img>'); ?>


<?php endwhile;?>
</div>
</div>
</div>

Alles anzeigen

Nun habe ich das Problem, dass ich extra für diese Ausgabe die Überschrift (h2) in besonderer Form verändern möchte.

Wie teile ich dieser Überschrift eine Klasse zu und wie müsste diese Klasse im CSS aussehen, damit ich die Überschrift getrennt editieren kann ?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Syntronica

Z.B.:

HTML

h2.extra
{
color:rosarot-grün-gepunktet;
}

Diese könntest du in die Style.css packen

Einfügen in deinem Fall

HTML

<h2 class="extra">blablabla</h2>

marX

Warum nicht so?

Code

.sidebar-artikel h2 {
color:#abcdef;
}

Betrifft alle h2-Überschriften innerhalb des Containers mit der Klasse .sidebar-artikel (der ja vorhanden ist).

Natürlich vorausgesetzt, dass dieser Container auch nur für diese Art Überschrift verwendet wird. Sonst eine weitere Klasse einfügen, wie Syntronica es bereits schrieb.

stevie99

Ich hatte das so gemacht, aber es hat sich nichts geändert an der Überschrift
An welcher Stelle muss dem im Code diese Classe stehen ? (kommt ja schon h2 drin vor beim Permalink)

Astrid

Versuche mal:

Code

.sidebar-artikel .cats h2 a {
....
}

spickzettel

Ist ja alles wilde Spekulation, aber ich würde ein

Code

#sidebar .sidebar-artikel h2 ...

probieren.

Astrid

Ja Spekulationen, aber das "a" ist interessant, weil die Überschrift verlinkt wird. Theoretisch sollte es funktionieren.

stevie99

Ich kann Euch beruhigen. Nichts davon funktioniert ! Was nun ?

spickzettel

Ohne Link zur Site oder zumindest zur vollständigen CSS-Datei wird das schwierig, weil man nicht weiß, was dort noch für Angaben drin stehen.

stevie99

Hier wäre die CSS (in zwei Teilen, zu lang für auf einmal:

Code

body {
font-size : 62.5%;
font-family : 'Lucida Grande', Verdana, Arial, Sans-Serif;
background : #d5d6d7;
color : #333;
}
#page {
background-color : white;
text-align : left;
}
#header {
background : url('images/header.jpg') no-repeat bottom left;
}
#headerimg {
margin : 0 0 0;
height : 80px;
width : 780px;
}
#content {
font-size : 1.2em;
}
.narrowcolumn .entry {
line-height : 1.25em;
font-size : 1.015em;
color : black;
font-family : Verdana, 'Lucida Grande', Arial, Sans-Serif;
margin : -5px 0 50px 0;
}
.widecolumn .entry {
line-height : 1.25em;
font-size : 1.015em;
color : black;
font-family : Verdana, 'Lucida Grande', Arial, Sans-Serif;
}
.narrowcolumn a:link {
color : #c00;
}
.narrowcolumn a:visited {
color : #c00;
}
.narrowcolumn a:hover {
color : #c00;
}
.narrowcolumn img {
width : 120px;
margin: 4px 6px 0 0;
}
.widecolumn .entry img {
width : 200px;
}


.sidebar img {
width : 120px;
margin: 4px 6px 0 0;
}


.narrowcolumn .postmetadata {
text-align : center;
}
.alt {
background-color : #f8f8f8;
border-top : 1px solid #ddd;
border-bottom : 1px solid #ddd;
}
#footer {
border : none;
}
small {
font-family : Arial, Helvetica, Sans-Serif;
font-size : 0.9em;
line-height : 1.5em;
}
h1, h2, h3 {
font-family : 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-weight : bold;
}
h1 {
font-size : 4em;
text-align : center;
}
#headerimg .description {
font-size : 1.2em;
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, #headerimg .description {
text-decoration : none;
color : white;
}
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
color : #c00;
font-family : Verdana, 'Lucida Grande', Arial, Sans-Serif;
font-size : 1.16em;
}
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;
}
.entry p a:visited {
color : #b85b5a;
}
.commentlist li, #commentform input, #commentform textarea {
font : 0.9em '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 : 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.commentmetadata {
font-weight : normal;
}
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 : 0.07em;
}
a, h2 a:hover, h3 a:hover {
color : #06c;
text-decoration : none;
}
a:hover {
color : #147;
text-decoration : underline;
}
#wp-calendar #prev a, #wp-calendar #next a {
font-size : 9pt;
}
#wp-calendar a {
text-decoration : none;
}
#wp-calendar caption {
font : bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
text-align : center;
}
#wp-calendar th {
font-style : normal;
text-transform : capitalize;
}
body {
margin : 0 0 0 0;
padding : 0;
}
#page {
background-color : white;
margin : 0;
padding : 0;
width : 780px;
border : 0;
}
#header {
margin : 0 0 0 0;
padding : 0;
height : 80px;
width : 780px;
}
#headerimg {
margin : 0;
height : 80px;
width : 780px;
}
.narrowcolumn {
float : left;
padding : 0 0 20px 0;
margin : 10px 0 0 15px;
width : 404px;
}
.widecolumn {
float : left;
padding : 0 0 20px 0;
margin : 40px 0 0 15px;
width : 486px;
}
.post {
margin : 0 0 40px;
text-align : left;
}
.post hr {
display : block;
}
.widecolumn .post {
margin : 0;
}
.narrowcolumn .postmetadata {
padding-top : 5px;
}
.widecolumn .postmetadata {
margin : 30px 0;
}
.widecolumn .smallattachment {
text-align : center;
float : left;
width : 128px;
margin : 5px 5px 5px 0;
}
.widecolumn .attachment {
text-align : center;
margin : 5px 0;
}
.postmetadata {
clear : left;
}
#footer {
margin : 0;
width : 780px;
clear : both;
}
#footer p {
margin : 0;
padding : 40px 15px 20px 15px;
color : silver;
font-size : 1.18em;
line-height : 1.4em;
text-align : center;
}
#footer a:visited {
color : silver;
}
#footer a:hover {
color : silver;
}
h1 {
padding-top : 70px;
margin : 0;
}
h2 {
margin : 10px 0 5px 0;
}
h2.pagetitle {
margin-top : 30px;
text-align : center;
}
h3 {
padding : 0;
margin : 30px 0 0;
}
h3.comments {
padding : 0;
margin : 40px auto 20px;
}
p img {
padding : 4px 6px 10px 0;
}
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;
}
html > body .entry ul {
margin-left : 0;
padding : 0 0 0 30px;
list-style : none;
padding-left : 10px;
text-indent : -10px;
}
html > body .entry li {
margin : 7px 0 8px 10px;
}
.entry ul li:before, #sidebar ul ul li:before {
content : "\00BB \0020";
}
.entry ol {
padding : 0 0 0 35px;
margin : 0;
}
.entry ol li {
margin : 0;
padding : 0;
}
.postmetadata ul, .postmetadata li {
display : inline;
float : left;
list-style-type : none;
list-style-image : none;
}
#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;
}
#sidebar ul ul li, #sidebar ul ol li {
margin : 3px 0 0;
padding : 0;
}
#searchform {
margin : 10px auto;
padding : 5px 3px;
text-align : center;
}
#sidebar #searchform #s {
width : 108px;
padding : 2px;
}
#sidebar #searchsubmit {
padding : 1px;
}
.entry form {
text-align : center;
}
select {
width : 130px;
}
#commentform input {
width : 170px;
padding : 2px;
margin : 5px 5px 1px 0;
}
#commentform textarea {
width : 100%;
padding : 2px;
}
#commentform #submit {
margin : 0;
float : right;
}
.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;
}
#sidebar {
float : right;
border : 1px solid silver;
margin : 50px 7px 30px 0;
width : 336px;
}
#sidebar form {
margin : 0;
}
#sidebar2 {
float : right;
padding : 20px 0 20px 0;
border : 1px solid #666666;
margin : 50px 7px 30px 0;
width : 254px;
}
#sidebar form {
margin : 0;
}
#sidebar form {
margin : 0;
}
#wp-calendar {
empty-cells : show;
margin : 10px auto 0;
width : 155px;
}
#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 {
background-color : #fff;
}
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;
}
.center {
text-align : center;
}
hr {
display : none;
}
a img {
border : none;
}
Pre-Navigation .navigation {
display : block;
text-align : center;
margin-top : 10px;
margin-bottom : 60px;
}
div#prenavmenu {
text-align : right;
height : 20px;
width : 773px;
background-color : white;
}
div#prenavmenu ul {
margin : auto;
padding : 2px;
text-align : right;
font-family : 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size : 0.9em;
line-height : 20px;
background : #f9f9f9 repeat-y fixed 773px 0%;
}
div#prenavmenu li {
list-style-type : none;
display : inline;
}
div#prenavmenu li a {
text-decoration : none;
padding : 5px 0 0 1px;
color : #666666;
}
div#navmenu li a:hover {
color : #114477;
}
.nav .table {
display : table;
float : right;
margin : 50px 7px 0 0;
}
.nav .select, .nav .current {
margin-right : 0;
padding : 0;
list-style : none;
display : table-cell;
white-space : nowrap;
}
.nav li {
margin : 0;
padding : 0;
height : 26px;
float : left;
}
.nav .select a {
display : block;
height : 30px;
float : right;
background : url(images/navi-raster.gif);
padding : 0 15px 0 15px;
text-decoration : none;
line-height : 28px;
white-space : nowrap;
color : white;
}
.nav .current a {
display : block;
height : 30px;
float : right;
background : url(images/navi-raster-visited.gif);
text-decoration : none;
line-height : 23px;
white-space : nowrap;
color : #fff;
}
.nav .current a b {
display : block;
padding : 0 30px 0 15px;
background : url(images/navi-raster-vistited.gif) right top;
}
.nav .select a:hover, .nav .select li:hover a {
background : url(images/navi-raster-visited.gif);
cursor : pointer;
color : #fff;
}
.nav .select a:hover b, .nav .select li:hover a b {
display : block;
float : right;
background : url(images/navi-raster-visited.gif) right top;
cursor : pointer;
}
.nav .select_sub {
display : none;
}
.nav table {
border-collapse : collapse;
margin : -1px;
font-size : 1em;
width : 0;
height : 0;
}

Alles anzeigen

stevie99

Teil 2:

Code

.nav .sub {
display : table;
margin : 0 auto;
padding : 0;
list-style : none;
}
.nav .sub_active .current_sub a, .nav .sub_active a:hover {
background : transparent;
}
.nav .select :hover .select_sub, .nav .current .show {
display : block;
position : absolute;
width : 773px;
top : 100px;
background : url(images/submenu-background.gif);
padding : 0;
z-index : 100;
left : 0;
text-align : left;
}
.nav .current .show {
z-index : 10;
}
.nav .select :hover .sub li a, .nav .current .show .sub li a {
display : block;
float : left;
background : transparent;
padding : 0 5px 0 5px;
margin : 5px;
white-space : nowrap;
border : 0;
color : #c11919;
}
.nav .current .sub li.sub_show a {
color : #088;
cursor : default;
background : url(images/menu.gif);
}
.nav .select :hover .sub li a:hover, .nav .current .sub li a:hover {
visibility : visible;
}
.nav ul {
display : inline-block;
}
.nav ul {
display : inline;
}
.nav ul li {
float : left;
}
.nav {
text-align : left;
}
.nav .select a:hover b, .nav .select li:hover a b {
float : none;
}
.nav .select li, div.nav ul.curent li {
display : inline;
}
.nav .select li a, div.nav ul.curent li a {
float : left;
}
.kategorie-start {
font-family : Verdana, 'Lucida Grande', Arial, Sans-Serif;
font-size : 0.9em;
border-bottom : 1px solid #666666;
padding-bottom : 0.2em;
border-color : black;
font-weight : bold;
color : black;
margin : 40px 0 0 0;
}
.cats li.cat-item a {
margin : 0;
}
.ueberschrift-kuenstler-sidebar {
font-family : Verdana, 'Lucida Grande', Arial, Sans-Serif;
font-size : 1em;
background : #cccccc;
font-weight : bold;
padding : 0;
color : black;
padding : 1px 7px 1px 7px;
}


.ueberschrift-schlager-sidebar {
font-family : Verdana, 'Lucida Grande', Arial, Sans-Serif;
font-size : 1em;
background : #cccccc;
font-weight : bold;
padding : 0;
color : black;
padding : 1px 7px 1px 7px;
margin: 7px 0 0 0;
}




.ueberschrift-werbung-content-ad {
font-family : Verdana, 'Lucida Grande', Arial, Sans-Serif;
font-size : 1em;
background : #cccccc;
font-weight : bold;
padding : 0;
color : black;
padding : 1px 7px 1px 7px;
margin: 7px 0 0 0;
}


.sidebar-artikel {
font-family : Verdana, 'Lucida Grande', Arial, Sans-Serif;
background : #efefef;
font-size : 1em;
margin : -10px 0 0 0;
padding : 0 7px 14px 7px;
}
.sidebar-artikel img {
width : 100px;
}


.content-ad {
background : #efefef;
font-weight : bold;
padding : 0;
color : black;
padding : 5px 7px 5px 7px;
text-align: center;
}


.ueberschrift-kuenstler-a-z {
font-family : Verdana, 'Lucida Grande', Arial, Sans-Serif;
font-size : 1em;
background : #cccccc;
font-weight : bold;
padding : 0;
color : black;
padding : 1px 7px 0px 7px;
margin: 7px 0 0 0;
}


.kuenstler-a-z {
margin: 0 0 0 0;
}


.kuenstler-a-z img {
text-align: center;
width: 336px;
margin: -9px 0 0 0;
}


.ueberschrift-dcrs-news-rss-feed {
font-family : Verdana, 'Lucida Grande', Arial, Sans-Serif;
font-size : 1em;
background : #cccccc;
font-weight : bold;
padding : 0;
color : black;
padding : 1px 7px 0px 7px;
margin: -16px 0 0 0;}


.dcrs-news-rss-feed {
background : #efefef;
font-weight : bold;
padding : 0;
color : black;
padding : 2px 0px 5px 0px;
text-align: left;
}


.ueberschrift-tag-cloud {
font-family : Verdana, 'Lucida Grande', Arial, Sans-Serif;
font-size : 1em;
background : #cccccc;
font-weight : bold;
padding : 0;
color : black;
padding : 1px 7px 0px 7px;
margin: 9px 0 0 0;}




.tag-cloud {
background : #efefef;
padding : 0;
padding : 2px 7px 5px 7px;
text-align: center;
}


.ueberschrift-hithaus-user-charts {
font-family : Verdana, 'Lucida Grande', Arial, Sans-Serif;
font-size : 1em;
background : #cccccc;
font-weight : bold;
padding : 0;
color : black;
padding : 1px 7px 0px 7px;
margin: 9px 0 0 0;}




.hithaus-user-charts img {
text-align: center;
width: 336px;
margin: -9px 0 -10px 0;
}

Alles anzeigen

Astrid

Code

.sidebar-artikel .cats h2 a {
    color: #000;
}

...funktioniert aber. H2 a wurde an anderer Stelle schon formatiert. Deshalb mußt Du die Zeile drunter schreiben oder besser ans Ende der Datei setzen b.z.w. Du löscht alle vorherigen Formatierungen.

Du kannst natürlich noch mit den Pseudoformaten arbeiten:

Code

.sidebar-artikel .cats h2 a:link {
 }
sidebar-artikel .cats h2 a:visited {
 }


u.s.w.

stevie99

Ja, Farbe und Schrifgröße funktionieren auch, nur margin lässt er mich nicht machen und ich bräuchte aber einen anderen Abstand nach oben und nach unten

Astrid

Na das mußt Du dann ohne das "a" formatieren, da ein "a" kein Blockelement ist. Nur in Blocklevel-Elementen kannst Du Abstände setzen:

Entweder so:

Code

.sidebar-artikel .cats h2 {
    margin-top: 100px;
}

Oder so:

Code

.sidebar-artikel .cats h2 a {
    display: block;
    margin-top: 100px;
}

Nachtrag:
Irgendwas stimmt mit meinen PM´s nicht. Du hattest mir eine Frage gestellt. Da ich aber viele Fragen bekomme, weiß ich echt nicht mehr, worum es dort ging. Kannst Du die Frage nicht nochmals ins Forum stellen oder im Notfall, falls sich dafür wahrscheinlich niemand interessiert, via E-Mail?

stevie99

Ok wunderbar.
Danke

Passt !

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Klassenanwendung h2

Jetzt mitmachen!