Ik weet dat HTML 5 bestaat uit header ,navigation,content-area,aside ,article en footer secties.
nu mij vraag is:
Is het mogelijk om de Content.area in 3 Secties of Divisies te delen in Index.php.
Mij doel is:
ik wil in deze 3 Secties of 3 Divisies 3 Borders naast elkaar te zetten met width:300px en height:300px !
Mij index.php code is:
<?php
/**
* The main template file.
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* @link https://codex.wordpress.org/Template_Hierarchy
*
* @package garage
*/
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if ( have_posts() ) :
if ( is_home() && ! is_front_page() ) : ?>
<header>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>
<?php
endif;
/* Start the Loop */
while ( have_posts() ) : the_post();
/*
* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_format() );
endwhile;
the_posts_navigation();
else :
get_template_part( 'template-parts/content', 'none' );
endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
get_sidebar();
get_footer();
Ik denk het moet kunnen.
Welke Divisie Code ik moet hier toevoegen om deze Content-area Class in 3 Divisies te verdelen?
dank u wel
johan
[size=xsmall]Toevoeging op 01/07/2016 21:22:53:[/size]
Dank U Wel,
ik heb op deze manier geprobeerd om mij dole te breiken:
In Page.php ik heb deze dDivisies toegevoegd:
get_header(); ?>
<div id="primary" class="content-area1">
<div id="primary" class="content-area2">
<div id="primary" class="content-area3">
<main id="main" class="site-main" role="main">
<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
</div>
</div>
<?php
get_sidebar();
get_footer();
In Style.CSS ik heb deze code toegevoegd als test:
.content-area1{
border:1px solid red;
width:200px;
height:300px;
margin-top:200px;
margin-left:172px;
}
.content-area2{
border:1px solid red;
width:200px;
height:300px;
margin-top:1px;
margin-left:400px;
}
.content-area3{
border:3px solid red;
width:200px;
height:300px;
margin-top:1px;
margin-left:500px;
}
1-Als U gaat naar:http://webdesignleren.net
U ziet dat bij derde border in 3e Sectie bovenste lijn van de 3e border heeft een beetje afwijking .
Wat zou hier de probleem zijn en hoe ik kan het oplossen?
2- Mij 2e vraag is als U kijkt goed in CSS Code bij 2e en 3e Content.area Class:
.content-area2{
border:1px solid red;
width:200px;
height:300px;
margin-top:1px;
margin-left:400px;
}
.content-area3{
border:3px solid red;
width:200px;
height:300px;
margin-top:1px;
margin-left:500px;
}
Ik moest bij 2e en 3e Class van COntent-area margin-top:1px; gebruiken om alle 3 borders aan gelijke lijn te krijgen.
Terwijl ik heb bij Content-area1(top-margin=200px gebruikt).
Wat zou de oorzaak zijn dat ik bij 1-e Content-area ik moest Top-Margin=200px gebruiken terwijl bij 2e en 3e Top-Margin= 1px gebruiken om alle 3 borders aan gelijke lijn te krijgen?
johan
[size=xsmall]Toevoeging op 02/07/2016 12:33:54:[/size]
hallo,
ik heb de probleem zelf opgelost op deze manier :
1- ik heb deze code toegevoegd in Single.php
<div id="primary" class="content-area1">
<div id="primary" class="content-area2">
<div id="primary" class="content-area3">
<main id="main" class="site-main" role="main">
<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
the_post_navigation();
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
</div> </div>
<?php
get_sidebar();
get_footer();
2-ik heb deze code toegevoegd in Style.CSS
.content-area1 {
border:1px solid grey;
margin-top: -200px;
width:500px;
height:200px;
margin-left:172px;
}
.content-area2 {
border:1px solid grey;
margin-top:-200px;
width:400px;
height:200px;
margin-left:692px;
}
3- ik heb deze code toegevoegd in wordpress Home pagina:
<!DOCTYPE html>
<html>
<body>
<div class="content-area1">
</div>
<div class="content-area2">
</div>
</body>
</html>
en dat is gelukt u kunt kijken de resultaat op : http://webdesignleren.net
johan
[size=xsmall]Toevoeging op 02/07/2016 12:35:32:[/size]
hallo,
ik heb de probleem zelf opgelost op deze manier :
1- ik heb deze code toegevoegd in Single.php
<div id="primary" class="content-area1">
<div id="primary" class="content-area2">
<div id="primary" class="content-area3">
<main id="main" class="site-main" role="main">
[code]<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
the_post_navigation();
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
</div> </div>
<?php
get_sidebar();
get_footer();
2-ik heb deze code toegevoegd in Style.CSS
.content-area1 {
border:1px solid grey;
margin-top: -200px;
width:500px;
height:200px;
margin-left:172px;
}
.content-area2 {
border:1px solid grey;
margin-top:-200px;
width:400px;
height:200px;
margin-left:692px;
}
3- ik heb deze code toegevoegd in wordpress Home pagina:
<!DOCTYPE html>
<html>
<body>
<div class="content-area1">
</div>
<div class="content-area2">
</div>
</body>
</html>
en dat is gelukt u kunt kijken de resultaat op : http://webdesignleren.net
johan