nur links und rechts farbe, in relation zum zentrierten inhalt

zeitgeisth

hallo,

ich möchte einen schwarzen hintergrund aufrufen, der einen bestimmten pixelbereich nicht ausfüllt.
konkret geht es um ein wordpress theme. in der header.php gebe ich eine grafik über

Code

body {
  background: url(xyz.jpg) top center no-repeat;
}

aus.

der content bereich (index.php) schließt mittig an der header grafik an, der hintergrund ist weiß. header und index werden für jede auflösung zentriert im browser dargestellt.

nun das problem. in der index.php soll der linke und rechte bereich ebenfalls schwarz sein.
wie kann ich in beiden dateien die äußeren seiten schwarz halten?

meine idee:
die header grafik (960px breit) könnte man auch zentriert über

Code

position: absolute; top: 0px;
        left: 50%;
        margin-left: -480px;

ausgeben.

könnte man dann nicht einen befehl aufrufen, der den mittleren bereich nicht einfärbt? also background black abzüglich

Code

position: absolute; top: 0px;
        left: 50%;
        margin-left: -480px;

?

viele dank für eure antworten!

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

Design-Maker

warum macht’s du das nicht über margin-left: auto; margin-right:auto;

Da ist der Header immer mittig.

Was den Rest angeht, verstehe ich nicht ganz was du meinst.

Ich denke aber mal das immer body schwarz sein soll und der Bereich vom Text soll weis sein.

Dann must du das so in den entsprechenden Containern definieren.

zeitgeisth

danke für deine antwort.

bis jetzt sieht das theme wie folgt aus:
http://img8.imageshack.us/img8/2513/istgu2.jpg

den schwarzen hintergrund rufe ich in der style.css auf.
die header grafik positioniere ich über einen div container ebenfalls in der style.css.

Code

#nav {
        position: absolute; top: 0px;
        left: 50%;
        margin-left: -480px;}

den content gebe ich über einen div container in der index.php aus

PHP

<?php get_header(); ?>


 <div id="[I][U][B]ltColumn[/B][/U][/I]"> 


    <?php if (have_posts()) : ?>


        <?php while (have_posts()) : the_post(); ?>
<!-- item -->
                <div class="item entry" id="post-<?php the_ID(); ?>">
                          <div class="itemhead">
                           <img src="http://kaspianshore.com/posticon.png"> <h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title();  ?></a></h3>
                            <div class="chronodata"><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></div>
                          </div>
                          <div class="storycontent">
                                <?php the_content('Read more &raquo;'); ?>
                          </div>
                     <!--     <small class="metadata">
                             <span class="category">Filed under: <?php the_category(', ') ?> <? if(!is_single()) echo "|"; ?> <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('Comment (0)', ' Comment (1)', 'Comments (%)'); ?></span>
                             <?php if ( function_exists('wp_tag_cloud') ) : ?>
                             <?php the_tags('<span class="tags">Article tags: ', ', ' , '</span>'); ?>
                             <?php endif; ?>
                          </small> -->
                 </div>
<!-- end item -->


<?php comments_template(); // Get wp-comments.php template ?> 


        <?php endwhile; ?>


        <div class="navigation">
            <div class="alignleft"><?php next_posts_link('&laquo; Previous Entries') ?></div>
            <div class="alignright"><?php previous_posts_link('Next Entries &raquo;') ?></div>
            <p> </p>
        </div>


    <?php else : ?>


        <h2 class="center">Not Found</h2>
        <p class="center">Sorry, but you are looking for something that isn't here.</p>


    <?php endif; ?>
<!-- end content -->
<!-- 2nd sidebar -->


<!-- end 2nd sidebar -->
            </div>
        </div>
    </div>
    <div class="yui-b" id="secondary">


 <?php get_sidebar(); ?> 
<?php get_fidebar(); ?>
    </div>
  </div>
<?php get_footer(); ?>

Alles anzeigen

definiert in der style.css hinsichtlich position und größe

Code

[U][B][I]div#ltColumn[/I][/B][/U]{
 width: 470px;
  background: url(xyz) top left repeat-y;
  padding: 80px 80px 30px 30px;


text-align:left;
font-family: Verdana, Arial, Helvetica, sans-serif, sans-serif; font-size: 14px;  color:#ffffff;


        position: absolute; top: 0px;
left: 50%;        
margin-left: -200px;
        margin-top:22em;    }

Alles anzeigen

es soll aber so aussehen:
http://img209.imageshack.us/img209/5483/sollsb7.jpg

Design-Maker

könntest du mir mal die ganze css-datei schchicken und die index.php mit header.php und footer.php. denn da mus man mal schauen was du schon eingebunden hast. und wie das ganze von dir aufgebaut ist.
denn ich würde jetzt einfach um das ganze einen weiteren container legen der genau die selbe breite hat wie der header und im die Grafik als hintergrund geben.

Monika

das da in die style.css

Code

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}


.clearfix {display: inline-block;}


/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Alles anzeigen

und dem Div, das bis nach unten gehen sollte die css class clearfix geben

könnt hilfreich sein der Hack

zeitgeisth

Zitat von design-maker.de

warum macht’s du das nicht über margin-left: auto; margin-right:auto;
Da ist der Header immer mittig.

der header ist nicht mittig, sondern links ist mehr platz als rechts. gibt es noch einen anderen code?

Design-Maker

wie schon gesagt, da müste ich alles sehen. nicht nur die auszüge die du hier geschrieben hast.

zeitgeisth

ok. hier ist der "komplette" code, samt ergebnis: http://forum.wordpress-deutschland.org/theme-entwickl…html#post229169

Willkommen! Melden Sie sich an oder registrieren Sie sich.

nur links und rechts farbe, in relation zum zentrierten inhalt

Jetzt mitmachen!