[ASK] Mengatur layout website agar tingginya sesuai dengan isi contentnya

Beranda

...

Website, Webmaster, Webdeveloper
[ASK] Mengatur layout website agar tingginya sesuai dengan isi contentnya

putusaputra

21-08-2014 19:50

[ASK] Mengatur layout website agar tingginya sesuai dengan isi contentnya

Malem gan,

Ane lagi latihan membuat website. Website yang ane buat terdiri dari beberapa div. Ada div container, header, menu, content, dan footer. Untuk di content div nya ane bagi lagi jadi content kiri dan content kanan, content kiri untuk menyimpan isi content dan content kanan untuk menyimpan sidebar(atas, kiri, kanan). Content kiri dan kanan ane udah set heightnya auto agar bisa mengikuti isinya tapi dibagian footer akan tercipta jarak berwarna putih bila salah satu dari content kiri atau content kanan isinya lebih banyak daripada content yang disebelahnya. Berikut gambarnya :

Spoiler for gambar error:

[ASK] Mengatur layout website agar tingginya sesuai dengan isi contentnya

Berikut codingnya :

Spoiler for index.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title>
<?php
wp_title( '|', true, 'right' );
bloginfo( 'name' );
?>
</title>
<link rel="stylesheet" type="text/css" href="<?php bloginfo ('stylesheet_url');?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
wp_head();
?>

<style type="text/css">
#header {
background : url(<?php header_image(); ?> emoticon-Wink

;
}
.blogtitle a, .description {
color: <?php header_textcolor(); ?>
}
</style>

</head>

<body>
<div id="container">
<div id="header">
<h1 class="blogtitle"><?php bloginfo('name');?></h1>
<p class="description"><?php bloginfo('description');?></p>
</div>
<div id="menu">
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div>
<div id="content">
<div id="contentkiri">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_content('Baca Selengkapnya'); ?></p>
<div id="postmeta">Publish on <?php the_time('F jS, Y'); ?> under <?php the_category(', '); ?> by <?php the_author(); ?> |
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>
<?php edit_post_link('Edit','','|'); ?></div>
</div>
<?php comments_template(); ?>
<?php endwhile;?>
<?php endif;?>
</div>
<div id="contentkanan">
<?php if ( is_active_sidebar( 'contentkanan-atas' ) ) : ?>
<div id="atas">
<ul>
<?php dynamic_sidebar( 'contentkanan-atas' ); ?>
</ul>
</div>
<?php endif; ?>
<div id="kiri">
<ul>
<?php if ( ! dynamic_sidebar( 'contentkanan-kiri' ) ) : ?>
<li id="search" class="widget-container widget_search">
<?php get_search_form(); ?>
</li>

<li id="archives" class="widget-container">
<h3 class="widget-title">Arsip</h3>
<ul>
<?php wp_get_archives( 'type=monthly' ); ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
<div id="kanan">
<ul>
<?php if ( ! dynamic_sidebar( 'contentkanan-kanan' ) ) : ?>
<li id="meta" class="widget-container">
<h3 class="widget-title">Meta</h3>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
</div>
</div>
<div id="footer">
<p><a href="<?php bloginfo('url');?>"><?php bloginfo('name');?></a>
© 2014 menggunakan <a href="http://wordpress.or.id">WordPress</a><br/>
<?php if (!is_home()) { wp_title(''); } ?></p>
</div>
</div>
<?php wp_footer();?>
</body>
</html>

Spoiler for style.css:

/*
Theme Name: latihanwordpress2tema
Theme URI: http://saputrax.blogspot.com/
Description: Theme Latihan
Author: I Putu Saputra
Author URI: http://saputrax.blogspot.com/
Version: 1.0
*/

/* CSS Document */
*
{
margin:0;
padding:0;
}

#container
{
width:80%;
margin:0 auto;
}

#container #header
{
width:100%;
min-height:200px;
float:left;
background-color:#F00;
text-align:center;
}

#container #menu
{
width:100%;
min-height:50px;
background-color:#0F0;
float:left;
}

#container #menu ul
{
list-style:none;
}

#container #menu ul li
{
float:left;
padding:10px;
}

#container #menu ul li a
{
text-decoration:none;
color:#FFF;
}

#container #menu ul li a:hover
{
text-decoration:underline;
color:#FFF;
}

#container #menu ul li ul
{
display:none;
}

#container #content
{
width:100%;
min-height:500px;
float:left;
text-align:justify;
}

#container #content #contentkiri
{
width:60%;
background-color:#00F;
min-height:638px;
float:left;
text-indent:10px;
}

#container #content #contentkanan
{
width:40%;
float:left;
}

#container #content #contentkanan ul
{
list-style:none;
}

#container #content #contentkanan ul li
{

}

#container #content #contentkanan ul li a
{
text-decoration:none;
color:#FFF;
}

#container #content #contentkanan ul li a:hover
{
text-decoration:underline;
color:#FFF;
}

#container #content #contentkanan #atas
{
width:100%;
background-color:#FF0;
float:left;
}

#container #content #contentkanan #atas ul li
{
padding-left:10px;
}

#container #content #contentkanan #kiri
{
width:70%;
background-color:#0FF;
min-height:120px;
float:left;
}

#container #content #contentkanan #kanan
{
width:30%;
background-color:#F0F;
min-height:120px;
float:left;
}

#container #footer
{
width:100%;
min-height:10px;
background-color:#C99;
float:left;
text-align:center;
padding-top:10px;
}

Mohon pencerahannya master emoticon-Matabelo

Kutip

Balasan

Komentar yang asik ya

Mari bergabung, dapatkan informasi dan teman baru!

Website, Webmaster, Webdeveloper

23.5KThread•5.5KAnggota

Urutkan

Terlama

Komentar yang asik ya