Problem: p (Absatz)

davidos_no.1

Steh hier gerade etwas auf dem Schlauch! Das "Problem" ist bestimmt sooo leicht zu lösen, aber ich sehe gerade den Wald vor lauter Bäumen nicht mehr...
Ich möchte gerne, dass der Absatz mit der Klasse .entry in blockelement ist. Mein Code sieht folgender maßen aus:

Code

.entry p {
display: block;
}

sejuma

Wozu?
p ist von Haus aus ein Blockelement: http://de.selfhtml.org/html/referenz/…#block_elemente

davidos_no.1

Zitat von sejuma

Wozu?
p ist von Haus aus ein Blockelement: http://de.selfhtml.org/html/referenz/…#block_elemente

Ja klar...hab aber das gleiche Problem, wenn ich es als inline-Element haben will. Die Formatierung wird einfach nicht übernehmen. Ist die Schreibweise ".entry p" falsch?

sejuma

versuch's mal umgekehrt:

Code

p.entry

davidos_no.1

Zitat von sejuma
versuch's mal umgekehrt:
Code
p.entry

Das bringt leider auch nichts...

sejuma

Dann sag mal konkret, was du vor hast.
Link zur Seite?

davidos_no.1

Zitat von sejuma

Dann sag mal konkret, was du vor hast.
Link zur Seite?

Einen Link habe ich nicht, da ich alles auf meinem lokalen Server mit Xampp laufen lasse.
Ich arbeite an einem Wordpress-Theme. Dafür will ich drei untereinander angeordnete Absätze formatieren - den 1. und 3. als inline-Element und den 2. als block-Element.

Code

.date p {
display: inline;
}


p .entry {
display: block;
}


.info p {
display: inline;
}

Alles anzeigen

Ich poste einfach mal meine gesamte CSS-Datei, vielleicht "überschneidet" sich irgendwo etwas (ist noch nicht so viel, da ich noch am Anfang bin).

Code

/* reset
--------------------------------------------------*/
* {
margin: 0px;
padding: 0px;
}


/* body
--------------------------------------------------*/
body {
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
font: 62.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
color: #111111;
}


/* div-container
--------------------------------------------------*/
#wrapper {
width: 750px;
height: auto;
margin: 0px auto;
}


    #header {
    width: 750px;
    height: auto;
    }


        #navigation {
        width: 360px;
        height: auto;
        float: left;
        padding: 0px 0px 0px 15px;
        text-align: left;
        }

        #search {
        width: 360px;
        height: auto;
        float: left;
        padding: 0px 15px 0px 0px;
        text-align: right;
        }

        #clear-header {
        clear: both;
        }


    #main {
    width: 750px;
    height: auto;
    margin-top: 40px;
    }

        #content {
        width: 550px;
        height: auto;
        float: left;
        padding: 0px 15px 0px 15px;
        text-align: justify;
        }

            .post {
            width: auto;
            height: auto;
            }

        #sidebar {
        width: 140px;
        height: auto;
        float: left;
        padding: 0px 15px 0px 15px;
        text-align: left;
        }

        #clear-main {
        clear: both;
        }

    #pagebar {
    width: 720px;
    height: auto;
    padding: 0px 15px 0px 15px;
    }    

    #footer {
    width: 720px;
    height: auto;
    padding: 0px 15px 0px 15px;
    }


/* headlines + links
--------------------------------------------------*/
#content .post h2 {
display: block;
padding: 0px 0px 5px 0px;
border-bottom: 1px groove #CCCCCC;
font-size: 2.2em;
letter-spacing: 2px;
}


    #content .post h2 a:link, #content .post h2 a:visited, #content .post h2 a:active, #content .post h2 a:hover {
    text-decoration: none;
    color: #111111;
    }


#sidebar h2 {
display: block;
padding: 0px 0px 5px 0px;
font-size: 1.2em;
letter-spacing: 2px;
}


    #sidebar h2 a:link, #sidebar h2 a:visited, #sidebar h2 a:active, #sidebar h2 a:hover {
    text-decoration: none;
    color: #111111;
    }

#sidebar h3 {
display: inline;
padding: 0px 0px 5px 0px;
font-size: 1.0em;
letter-spacing: 2px;
font-weight: bold;
}


    #sidebar h3 a:link, #sidebar h3 a:visited, #sidebar h3 a:active, #sidebar h3 a:hover {
    text-decoration: none;
    color: #333333;
    }


/* text + links
--------------------------------------------------*/
.date p {
display: inline;
}


p .entry {
display: block;
}


.info p {
display: inline;
}


.news p {
display: inline;
text-align: justify;
}


.footer p {
display: block;
text-align: justify;
}


/* lists
--------------------------------------------------*/
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}


    #navigation li {
    float: left;
    padding: 0px 10px 0px 0px;
    font-size: 1.3em;
    letter-spacing: 2px;
    }


    #navigation li a:link, #navigation li a:visited, #navigation li a:active, #navigation li a:hover {
    text-decoration: none;
    display: block;
    color: #333333;
    }

#sidebar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}


    #sidebar li {
    font-size: 1.0em;
    border-bottom: 1px dotted #CCCCCC;
    }

    #sidebar li a:link, #sidebar li a:visited, #sidebar li a:active, #sidebar li a:hover {
    text-decoration: none;
    color: #333333;
    }


/* searchform
--------------------------------------------------*/
#text {
width: 120px;
padding: 2px;
background-color: #EAEAEA;
border: 1px solid #CCCCCC;
color: #333333;
font-size: 1.0em;
}


#submit {
width: 40px;
padding: 2px;
background-color: #EAEAEA;
border: 1px solid #CCCCCC;
color: #333333;
font-size: 1.0em;
}


/* position
--------------------------------------------------*/
.sidebar-headline {
margin-top: 10px;
}

Alles anzeigen

sejuma

Müsste so funktionieren:

Code

<style type="text/css">
p.date {
display: inline;
color: magenta;
}


p.entry {
display: block;
color: red;
}


p.info {
display: inline;
color: green;
}


p.news {
display: inline;
text-align: justify;
color: blue;
}


</style>
</head>


<body>
<p class="date">18.01.2009</p>
<p class="entry">Entry</p>
<p class="info">Info</p>
<p class="news">News</p>
</body>
</html>

Alles anzeigen

Allerdings würde ich p nicht zum Inlineelement vergewaltigen, sondern besser span benutzen.

davidos_no.1

Da passiert immer noch nichts...komisch!

sejuma

Wie sieht denn dein HTML-Quelltext dazu aus?

davidos_no.1

Zitat von sejuma

Wie sieht denn dein HTML-Quelltext dazu aus?

Ist halt ein Wordpress-Template und das ist ja ein bisschen anders aufgebaut...

PHP

<?php get_header(); ?>
    <div id="main">
        <div id="content">
            <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>
            <div class="post">
                <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                <p class="date">
                    <?php the_time('F jS, Y') ?> &mdash; <?php the_time('g:ia') ?>
                    <?php edit_post_link('Edit','',''); ?>
                </p>
                <p class="entry">
                    <?php the_content('Continue reading &raquo;'); ?>
                </p>
                <p class="info">
                    Posted in: <?php the_category(', ') ?>    | 
                    <?php comments_popup_link('Comment &raquo;', '1 Comment', '% Comments;'); ?>
                </p>
            </div>
            <?php comments_template(); ?>
            <?php endwhile; ?>
            <?php else : ?>
            <div class="post">
                <h2>Not Found</h2>
                <p class="entry">
                    Sorry, but you are looking for something that isn't here.
                </p>
            </div>
            <?php endif; ?>
        </div>
        <div id="sidebar">
            <?php get_sidebar(); ?>
        </div>
        <div id="clear-main">
        </div>
    </div>
    <div id="pagebar">
    </div>
    <? get_footer(); ?>

Alles anzeigen

sejuma

Nach dieser Anordnung und Definition stehen alle Teile untereinander:
h2=Blockelement
.date ist zwar Inlineelement, ordnet sich aber wegen des vorangegangenen Blockelements h2 und des nachfolgenden Blockelements .entry ebenfalls unter h2 an.
für .info glilt das gleiche.
Lediglich .info und .news sollten nebeneinander stehen, weil hier zwei Inlineelemente in unmittelbarer Reihenfolge stehen.

davidos_no.1

Zitat von sejuma

Nach dieser Anordnung und Definition stehen alle Teile untereinander:
h2=Blockelement
.date ist zwar Inlineelement, ordnet sich aber wegen des vorangegangenen Blockelements h2 und des nachfolgenden Blockelements .entry ebenfalls unter h2 an.
für .info glilt das gleiche.
Lediglich .info und .news sollten nebeneinander stehen, weil hier zwei Inlineelemente in unmittelbarer Reihenfolge stehen.

Ähm sorry...ich verstehe nicht genau, was du meinst. Kannst du mir den Code mal bitte beispielshaft ändern?

sejuma

Kommt drauf an, wie du's haben willst.
Poste mal eine kleine Symboldarstellung, was nun neben- und was untereinander angeordnet werden soll.

davidos_no.1

Zitat von sejuma

Kommt drauf an, wie du's haben willst.
Poste mal eine kleine Symboldarstellung, was nun neben- und was untereinander angeordnet werden soll.

Es soll alles untereinander stehen. Habe die inline- bzw. block-Elemente nur gewählt, damit ich halt eine Ordnung in die Seite bekommen. Ist das zu umständlich gedacht, ein grundsätzlicher Denkfehler oder wie?!

sejuma

Ich finde, das ist zu umständlich gedacht.
Denn wenn alles untereinander stehen soll, dann ist weder display: block noch display: inline erforderlich.
Im Prinzip brauchst du überhaupt keine Klassen-Trennung, wenn es keine Formatierungsunterschiede gibt.

Wenn du die Klassen lediglich benötigst, um bestimmte Inhalte reinzuschreiben bzw. zu trennen, dann definiere sie eben mit einer identischen Schriftart oder was auch immer. Ich sehe darin aber keinen Sinn.

Leider kenne ich mich mit PHP nicht aus. Vermutlich willst du klassengemäße Inhalte in eine Datenbank schreiben. Ob dazu allerdings verschiedene Klassen erforderlich sind vermag ich nicht zu beurteilen.

davidos_no.1

Ähm ja...jetzt do du es sagst - ist schon umständlich/sinnlos. Ich versuch es mal auf eine andere Art. Falls es dann immer noch nicht klappt, melde ich mich nochmal. Vielen Dank!

davidos_no.1

So, habe letztendlich nicht herausgefunden, wieso es nicht geklappt hat. Um das zu umgehen, habe ich jetzt Div's verwendet in die Abstände mit margin bestimmt...ist die wohl einfachere Methode.

Tags