zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden divs für wordpress theme

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.02.2009, 16:36
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.03.2008
Beiträge: 45
zeitgeisth befindet sich auf einem aufstrebenden Ast
Standard divs für wordpress theme

hallo,

ich arbeite an einem wordpress theme, das noch einen weißen hintergrund für die ausgabe der blog-einträge benötigt.

bis jetzt sieht das theme wie folgt aus:
http://img22.imageshack.us/img22/8826/istgb8.jpg

der code dazu (die wichtigen einträge habe ich markiert):
index.php
Code:
<?php get_header(); ?>

<div id="content">



    <?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(); ?>

    </div>
  </div>
<?php get_footer(); ?>
style.css
Code:
/*
Theme Name: Kaspian Shore

*/

body {
  background-color: #000000;

}


#sidebar {
        position: absolute; top: 0px;
        left: 50%;
        margin-left: -460px;
margin-top:22.5em;
}


h3 {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font color= #ffffff; font-weight:bold;
text-decoration: none;

}

h3 a:link, h3 a:hover, h3 a:visited{
    color: #655153;
}

.item {
    /* padding: 20px; */

margin-bottom: 5em;
}


div#content{
 width: 470px;
  background: url(http://www.kaspianshore.com/post.png) top left repeat-y;
 padding: 80px 80px 30px 30px;
text-align:left;
font-family: Verdana, Arial, Helvetica, sans-serif, sans-serif; font-size: 14px; /* padding: 20px; margin: 0px; */ color:#ffffff;
        position: absolute; top: 0px;
left: 50%;        
margin-left: -200px;
        margin-top:22em;
    }


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

a, a:link {
    padding: 2px;
    color: #655153;
    text-decoration: none;
}

a:hover {
    color: #ffffff;
    text-decoration: none;
    ;
}

h1 {
    font-family: monospace;
    /*font-weight: bold;*/
    font-size: 190%;
    padding-top: .1em;
    padding-bottom: .5em;
}


h2 {
    font-family: Arial;
    font-weight: bold;
        font-color: #ffffff
    font-size: 170%;
}




h4 {
    font-size: 140%;
font-color: #ffffff
}

#hd{
    text-align: center;
    padding-top: 24px;
    padding-bottom: 24px
}
#hd h1{
    font-size: 290%;
    color: #000000;

}

#hd h1 a{
    text-decoration: none;
    color: #ffffff;
}



.itemhead{
    padding-top: 5px;
    padding-bottom: 5px;
/*margin:0 0 20px 0;  dieser Wert */
background: url(http://kaspianshore.com/postline.png) bottom left no-repeat;    
margin-bottom: 20px;
  padding-bottom: 20px;
}

.itemhead h3{
    display: inline;
}


input{
    font-size: 80%;
}


.commentlist p {
    clear: both;
    font-size: 95%;
}


cite{
    font-size: 95%;
}

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

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

.commentmetadata {
    font-size: 80%;
    float: right;

}
.commentlist {
    margin-top: 5px;
}
.commentlist li {
    padding: 2px;
    border-top: 1px solid #FFFFFF;
}


#ft {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #000000;
}

#ft a:link, #ft a:hover, #ft a:visited{
    color: #000000;
}
header.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php
if(function_exists('language_attributes')) {
    language_attributes();
}else{
    echo "<h1>Oops:</h1><font color=\"red\">This theme only works with WordPress 2.1.* or higher. You seem to have an <b>outdated version</b> of wordpress. Please download the latest <a href=\"http://www.wordpress.com\">WordPress</a> to use this theme and also get the latest security patches.</font>";
//    exit();
}
?>>
<head profile="http://gmpg.org/xfn/11">


<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory') ?>/reset-fonts-grids-tabs.css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="doc3" class="yui-t7">


<!--   -->
 

 <div id="nav">
<img src="http://kaspianshore.com/nav.jpg" alt="" border="0" width="" height="" usemap="#menu">
<map name="menu">
<area shape="rect" coords="55,177,231,246"
href="http://www.kaspianshore.com/"
alt="Home"
title="Home"

<area shape="rect" coords="235,267,297,308"
href="http://www.kaspianshore.com/about/"
alt="About"
title="About"

<area shape="rect" coords="312,267,408,308"
href="http://www.kaspianshore.com/gallery"
alt="Portfolio"
title="Portfolio"

<area shape="rect" coords="422,267,469,308"
href="http://www.kaspianshore.com/"
alt="Blog"
title="Blog"

<area shape="rect" coords="491,267,585,308"
href="http://www.kaspianshore.com/purchase"
alt="Purchase"
title="Purchase"

<area shape="rect" coords="595,267,674,308"
href="http://www.kaspianshore.com/contact"
alt="Contact"
title="Contact"

<area shape="rect" coords="863,331,911,341"
href="http://www.twitter.com/kaspianshore"
alt="Twitter"
title="Twitter"
>

<area shape="rect" coords="878,345,938,362"
href="http://kaspianshore.com/feed"
alt="RSS Feed"
title="RSS Feed"
>  
  </map>


</div>

</div>
wie in dem bild zu sehen ist, läuft die header grafik weiß aus. die blog-einträge liegen in einer tranparenten grafik und beginnen auf halber höhe der header grafik.
dort, wo die header grafik weiß ausläuft, soll ein div container mit weißer farbe anfangen, soweit, wie die blog-einträge ausgegeben werden.
bisher ist es mir aber nicht gelungen, die <div id="content"> so zu verschachteln, dass dort, wo die header grafik aufhört, der hintergrund weiß ist.
vielleicht liegt es an den verschiednen divs, die sich gegenseitig beeinflussen?

weiß jemand rat? vielen dank!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.02.2009, 18:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Hab ich das richtig verstanden, dass das Bild hinter dem ersten Blogeintrag noch die Headergrafik ist?

Ach ich sehe grade du hast da ein png, was halbtransparent ist. OK - Machbar. Aber ihm IE < 7 nicht ohne JS nutzbar, da kein voller PNG-Support.

Ich hätte aber anders angesetzt. Ich hätte deine Headergrafik noch in verschiedene Teile zerschnitten und jeweils als Hintergrund für den Content und Sidebar gesetzt. Somit hast du im Content dann ein Bild, was nach weiß verläuft und wenn deine background-color für content auf #fff steht, ist der rest dann einfach weiß.

P.S.: Wieso positionierst du so viel absolut? Dein Template kann imo ohne diesem auskommen

Geändert von regloh (18.02.2009 um 18:05 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.02.2009, 18:30
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.03.2008
Beiträge: 45
zeitgeisth befindet sich auf einem aufstrebenden Ast
Standard

danke für deine antwort! danke auch für den hinweis, dass ie<7 kein png unterstützt.

Zitat:
Zitat von regloh Beitrag anzeigen
Hab ich das richtig verstanden, dass das Bild hinter dem ersten Blogeintrag noch die Headergrafik ist?
ja: http://img4.imageshack.us/img4/8787/layoutco3.jpg

das theme ist noch nicht fertig, so dass jede verbesserung umgesetzt werden kann.
die header grafik zu zerschneiden und auf die verschiedenen dateien aufzuteilen, finde ich einen interessanten ansatz, da ich stattdessen versucht hatte, vielleicht die verschiedenen div container über den z-index zu positionieren, so dass die blog-einträge die header grafik überlagern, der weiße hintergrund von der header-grafik überlagert wird. vielleicht kann man das umsetzen? dann könnte man sich doch das zerschneiden wiederrum sparen, da ich nur noch diesen einen weißen hintergrund benötigte, also so:
http://img209.imageshack.us/img209/5483/sollsb7.jpg

mit der positionierung absolute bin ich mir nicht ganz sicher. jedoch habe ich bis jetzt keine bessere möglichkeit gefunden, die einzelnen bereiche (sidebar, header, content) zu positionieren. wie könnte ich das anders umsetzen?

Geändert von zeitgeisth (18.02.2009 um 19:43 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 18.02.2009, 19:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Zitat:
die header grafik zu zerschneiden und auf die verschiedenen dateien aufzuteile
Man könnte auch die komplette Grafik nehmen und sie als Hintergrund in den einzelnen divs mit background-position so positionieren, dass der gewünschte Teil zu sehen ist.

Zitat:
da ich stattdessen versucht hatte, vielleicht die verschiedenen div container über den z-index zu positionieren, so dass die blog-einträge die header grafik überlagern
Ansich ja logisch gedacht, aber nicht gut umzusetzen. So, wie du die einzelnen Blöcke in deinem Schema darstellst, so sollten auch deine divs liegen. Versuche nicht, sie wild zu verschieben. Das wird meist nichts und bringt nur Ärger
Mein Vorschlag in Bezug auf dein Schema ist, dass du deine Grafik so zerschneidest, wie die Blöcke einzeln sind und jedem Block sein Hintergrundbild zuweist. Zum Schluss sieht es ja wieder aus wie eins und du brauchst dich nicht mit PNG-Transparenz rumschlagen. Und da dein Text für die Blogs einfach über dem Hintergrund liegt und nicht extra nochmal einen Hintergrund braucht, wird das auch klappen.

Zitat:
mit der positionierung absolute bin ich mir nicht ganz sicher. jedoch habe ich bis jetzt keine bessere möglichkeit gefunden, die einzelnen bereiche (sidebar, header, content) zu positionieren. wie könnte ich das anders umsetzen?
Arbeite mit float, margin und padding.

Code:
<div id="header"></div>
<div id="navi"><ul>...</ul></div>
<div id="content">...</div>
So stehen erstmal alle Blöcke untereinander. Für Header und Navi passt das auch. Content machst du einfach schmaler und schiebst es mit margin nach rechts. Um das ganze legst du dann evtl. noch einen Wrapper, den du zentrieren kannst. Das Grundgerüst sollte ansich eigentlich kein großer Aufwand werden.
Mit Zitat antworten
  #5 (permalink)  
Alt 19.02.2009, 00:58
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.03.2008
Beiträge: 45
zeitgeisth befindet sich auf einem aufstrebenden Ast
Standard

wie folgt funktioniert es jetzt:
statt zu zerschneiden, habe ich die transparente grafik auf den header und auf den index verteilt: die header grafik besitzt einen transparenten bereich (http://kaspianshore.com/header.jpg), der durch eine hintergrund grafik den transparenten bereich im content wiederholt (http://www.kaspianshore.com/postbg.jpg). dein tipp mit dem zerschneiden war der entscheidende auslöser.

doch ein problem scheint das nächste abzulösen. das gesamte theme ist leider nicht zentriert: links ist der abstand vom theme größer als rechts. der footer ist zentriert! hier noch einmal die code zeilen, um das problem zu lösen:

header.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php
if(function_exists('language_attributes')) { 
	language_attributes(); 
}else{
	echo "<h1>Oops:</h1><font color=\"red\">This theme only works with WordPress 2.1.* or higher. You seem to have an <b>outdated version</b> of wordpress. Please download the latest <a href=\"http://www.wordpress.com\">WordPress</a> to use this theme and also get the latest security patches.</font>";
//	exit();
}
?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory') ?>/reset-fonts-grids-tabs.css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="doc3" class="yui-t7">

<div id="header">  
<img src="http://kaspianshore.com/header.jpg" text-align: center alt="" border="0" width="" height="" usemap="#menu">
<map name="menu">
<area shape="rect" coords="55,177,231,246"
href="http://www.kaspianshore.com/"
alt="Home" 
title="Home"

<area shape="rect" coords="235,267,297,308"
href="http://www.kaspianshore.com/about/"
alt="About" 
title="About"

<area shape="rect" coords="312,267,408,308"
href="http://www.kaspianshore.com/gallery"
alt="Portfolio" 
title="Portfolio"

<area shape="rect" coords="422,267,469,308"
href="http://www.kaspianshore.com/"
alt="Blog" 
title="Blog"

<area shape="rect" coords="491,267,585,308"
href="http://www.kaspianshore.com/purchase"
alt="Purchase" 
title="Purchase"

<area shape="rect" coords="595,267,674,308"
href="http://www.kaspianshore.com/contact"
alt="Contact" 
title="Contact"

<area shape="rect" coords="863,331,911,341"
href="http://www.twitter.com/kaspianshore"
alt="Twitter" 
title="Twitter"
>

<area shape="rect" coords="878,345,938,362"
href="http://kaspianshore.com/feed"
alt="RSS Feed" 
title="RSS Feed"
>   
  </map> 

   
</div>
index.php
Code:
<?php get_header(); ?>


<div id="transparent">
<div style="width: 960px; top:300px">
<div id="content">


<?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(); ?> -->

        </div>
  </div>
<?php get_footer(); ?>
style.css
Code:
/*
Theme Name: WordPress Theme Generator 
*/

/* BODY FARBE */
body {
  background-color: #000000;
 
  } 

/*#ft {
background: url(http://kaspianshore.com/footer.jpg);
} */



/* HEADER */
#header{
text-align: center;
height: 150px;
/*  width: 100%;

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


  */
    }

/* CONTENT */
   #content{ 
  width: 400px;  
 padding: 180px 10px 30px 100px;  
font-family: Verdana, Arial, Helvetica, sans-serif, sans-serif; font-size: 14px; /* padding: 20px; margin: 0px; */ color:#ffffff;
 margin: 0px auto; }

  #transparent{
background: url(http://www.kaspianshore.com/postbg.jpg);
 width: 960px;  
/* padding: 1px 1px 1px 1px; 
margin: 0px auto; */
  } 


/* NEU */

a, a:link {
	padding: 2px;
	color: #906667;
	text-decoration: none;
}

a:hover {
	color: #ffffff;
	text-decoration: none;
	;
}

h1 {
	font-family: monospace;
	/*font-weight: bold;*/
	font-size: 190%;
	padding-top: .1em;
	padding-bottom: .5em;
}


h2 {
	font-family: Arial;
	font-weight: bold;
        font-color: #ffffff
	font-size: 170%;
}




h4 {
	font-size: 140%;
font-color: #ffffff
}

p {
	font-size: 80%;
	margin-bottom:1em;
font-color: #ffffff
}

strong, b {
	font-weight: bold;
}

em, i {
	font-style: italic;
}

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

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

a img {
	border: none;
}


#hd{
	text-align: center;
	padding-top: 24px;
	padding-bottom: 24px
}
#hd h1{
	font-size: 290%;
	color: #000000;

}

#hd h1 a{
	text-decoration: none;
	color: #ffffff;
}



#blogpost {
	/*padding-right: 20px;
	background-image: url(/); 
	background-repeat: repeat;
        border: 1px solid #FFFFFF;	 
        text-align:left;*/
        background-color: #FFFFFF;
	position: absolute; top: 0px;
        left: 50%;
        margin-left: -480px;
        margin-top:37em;
	}


.item ul {
	list-style-type: disc;
	padding-left: 15px;
	margin-left: 10px;
	font-size: 80%;
}


.item ol{
	list-style-type: decimal;
	padding-left: 15px;
	margin-left: 10px;
	font-size: 80%;
}

/* Abstand zwischen post title und post */
.itemhead{
	padding-top: 5px;
	padding-bottom: 5px;
/*margin:0 0 20px 0;  dieser Wert */
background: url(http://kaspianshore.com/postline.png) bottom left no-repeat;	
margin-bottom: 20px;
  padding-bottom: 20px; 
}


.chronodata {
	display: inline;
	text-align: right;
	margin-left: 2em;
	font-size: 80%;
}


.itemhead h3{
	display: inline;
}



h3 {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font color= #ffffff; font-weight:bold;
text-decoration: none;

}

h3 a:link, h3 a:hover, h3 a:visited{
	color: #906667;
}

.item {
	/* padding: 20px; */

margin-bottom: 5em; 
}
footer.php
Code:
<div id="ft">
<img src="http://kaspianshore.com/footer.jpg">

Geändert von zeitgeisth (19.02.2009 um 01:30 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 19.02.2009, 09:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

So gehts natürlich auch, wobei du dann den Contentbereich ja irgendwie in den Headerbereich ragen lassen musst und das erfordert eine Verschiebung und kann wieder zu problemen führen. Aber natürlich machbar.

Zitat:
doch ein problem scheint das nächste abzulösen. das gesamte theme ist leider nicht zentriert: links ist der abstand vom theme größer als rechts. der footer ist zentriert! hier noch einmal die code zeilen, um das problem zu lösen:
Nicht jedes Elemtent einzeln mit Auto-Margin zentrieren. Du legst einfach um alles nochmal einen Container und zentrierst diesen. Du hast ja schon den
Code:
<div id="doc3" class="yui-t7">
Aber dazu fehlt der CSS-Code.

Alternativ kannst du auch den Body zentrieren, was aber bei IE < 6 Probleme bereitetet (könnte sogar noch beim 6er passieren, bin mir aber grad nicht sicher)

btw: echt chices Design Gefällt mir echt super gut.
Mit Zitat antworten
  #7 (permalink)  
Alt 19.02.2009, 10:35
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.03.2008
Beiträge: 45
zeitgeisth befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von regloh Beitrag anzeigen
So gehts natürlich auch, wobei du dann den Contentbereich ja irgendwie in den Headerbereich ragen lassen musst und das erfordert eine Verschiebung und kann wieder zu problemen führen. Aber natürlich machbar.
ich hoffe, die lassen sich dann abschalten. benutzt heutzutage nicht eh die ganze welt firefox?

Zitat:
Zitat von regloh Beitrag anzeigen
Nicht jedes Elemtent einzeln mit Auto-Margin zentrieren. Du legst einfach um alles nochmal einen Container und zentrierst diesen. Du hast ja schon den
Code:
<div id="doc3" class="yui-t7">
Aber dazu fehlt der CSS-Code.
grundlage des themes sind Sandbox · plaintxt.org und Wordpress Theme Generator, d.h., hier und da sind noch einige codezeilen, die ich für mein theme nicht benötige, und somit das layout stören. und tatsächlich, deaktiviere ich
Code:
<div id="doc3" class="yui-t7">
, ist der header zentriert. nun ist der content bereich nicht mehr zentriert.

Zitat:
Zitat von regloh Beitrag anzeigen
Alternativ kannst du auch den Body zentrieren, was aber bei IE < 6 Probleme bereitetet (könnte sogar noch beim 6er passieren, bin mir aber grad nicht sicher)
vielleicht reicht es, wenn ich den content zentriere?!

Zitat:
Zitat von regloh Beitrag anzeigen
btw: echt chices Design Gefällt mir echt super gut.
danke für das kompliment. das design war der einfachere teil der arbeit.
Mit Zitat antworten
  #8 (permalink)  
Alt 19.02.2009, 10:57
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Zitat:
ich hoffe, die lassen sich dann abschalten. benutzt heutzutage nicht eh die ganze welt firefox?
Schön wärs

Zitat:
grundlage des themes sind Sandbox · plaintxt.org und Wordpress Theme Generator, d.h., hier und da sind noch einige codezeilen, die ich für mein theme nicht benötige, und somit das layout stören.
Was sagt uns das? Verzichte auf solche Tools. Ich arbeite auf meiner privaten Seite auch mit Wordpress und muss sagen, dass das Template-System echt gut und easy ist. Du kannst wirklich alles selbst bestimmen und nur der Inhalt ist fest. Ich hatte mir bei meinem ersten Template einfach das bestehende Standard-Temp genommen und daraus alle wichtigen Grundsachen kopiert. Ansonsten basiert mein Template auf eigenem Code. (kannst du unter www.meinschatzundich.de - Leben, Lieben, Streiten sehen) Überlegs dir. Es spart dir eine Menge Arger, wenn du weißt woher der Code kommt und das dieser überhaupt bewirkt. Erstelle dein Templalate erstmal so, dass es ohne WP funktioniert und passe es danach an WP an.

Zitat:
vielleicht reicht es, wenn ich den content zentriere?!
Dann ist dein Header am linken Rand und der Content in der Mitte? Machs erstmal so, wie mein obiger Code hier: http://xhtmlforum.de/55884-divs-f-r-...tml#post423139
und gib jedem Block einfach einen Rahmen. Dann baust du noch einen Container drum herum und zentrierst den.
Mit Zitat antworten
  #9 (permalink)  
Alt 19.02.2009, 19:30
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.03.2008
Beiträge: 45
zeitgeisth befindet sich auf einem aufstrebenden Ast
Standard

danke für die hinweise.
das komplette theme ist zentriert.

jetzt gilt es, das theme so fehlerfrei wie möglich zu betreiben.
opera 9.60 z.b. erkennt die image map nicht. ie habe ich noch gar nicht getestet.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.02.2009, 19:32
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

Zitat:
opera 9.60 z.b. erkennt die image map nicht.
Imagemap? :O Wo soll die denn sein?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hilfe bei Wordpress Theme sepp88 Site- und Layoutcheck 0 20.02.2010 20:44
Design/Technikcheck: Wordpress mit custom Theme auf YAML- Basis LichtAnd Site- und Layoutcheck 18 06.12.2009 19:50
WordPress Theme erstellen - Photoshop Tutorial darkiop Ressourcen 5 20.10.2008 20:11
Wordpress Theme - Internet Explorer hasst mich madMUHHH CSS 10 22.07.2007 21:38
Wordpress 2.0.2 Theme Sorcio CSS 0 16.05.2006 22:54


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:30 Uhr.