Problem with CSS display: Grid (grid-template-areas) - css

So I want to make a table using CSS-Grid, but it isn't working out the way the elements are displayed, it should be a 6x6 box with the two tables being only one header and one row each.
here is a imagem of the error: https://imgur.com/gallery/VDl6WVv
What I want is: First table should be like:
Nome Espécie Raça Sexo Idade Descrição
Teto Rara Céu Azul Masculino 19 Fashion
Second table should be like:
Nome Espécie Raça Sexo Idade Descrição
Wiu Pitbull Limão Masculino 18 Frio
Nome, Espécie, Raça, Sexo, Idade and Descrição are the headers.
body {
background-image: linear-gradient(to bottom right, yellow, #b3ecff, #cc66ff);
margin: 0;
padding: 0;
font-family: "Times New Roman", Times, serif;
}
.item1 {
grid-area: item1;
}
.item3 {
grid-area: item3;
}
.item5 {
grid-area: item5;
}
.button1 {
grid-area: button1;
}
.headernome1 {
grid-area: headernome1;
}
.headernome2 {
grid-area: headernome2;
}
.headerespecie1 {
grid-area: headerespecie1;
}
.headerespecie2 {
grid-area: headerespecie2;
}
.headerraca1 {
grid-area: headerraca1;
}
.headerraca2 {
grid-area: headerraca2;
}
.headersexo1 {
grid-area: headersexo1;
}
.headersexo2 {
grid-area: headersexo2;
}
.headeridade1 {
grid-area: headeridade1;
}
.headeridade2 {
grid-area: headeridade2;
}
.headerdescricao1 {
grid-area: headerdescricao1;
}
.headerdescricao2 {
grid-area: headerdescricao2;
}
.celnome1 {
grid-area: celnome1;
}
.celnome2 {
grid-area: celnome2;
}
.celespecie1 {
grid-area: celespecie1;
}
.celespecie2 {
grid-area: celespecie2;
}
.celraca1 {
grid-area: celraca1;
}
.celraca2 {
grid-area: celraca2;
}
.celsexo1 {
grid-area: celsexo1;
}
.celsexo2 {
grid-area: celsexo2;
}
.celidade1 {
grid-area: celidade1;
}
.celidade2 {
grid-area: celidade2;
}
.celdescricao1 {
grid-area: celdescricao1;
}
.celdescricao2 {
grid-area: celdescricao2;
}
.item2 {
grid-area: item2;
}
.item4 {
grid-area: item4;
}
.item6 {
grid-area: item6;
}
.button2 {
grid-area: button2;
}
.grid-container {
display: grid;
background-image: linear-gradient(to bottom, #FFFFD2, #AA96DA, #FFFFD2);
padding: 5px;
grid-template-areas: "item1 item1 item1 item1 item1 item1" "item3 item3 item3 item3 item3 item3" "item5 item5 item5 item5 item5 item5" "headernome1 headerespecie1 headerraca1 headersexo1 headeridade1 headerdescricao1" "celnome1 celespecie1 celraca1 celsexo1 celidade1 celdescricao1" "button1 button1 button1 button1 button1 button1" "item2''item2 item2 item2 item2 item2" "item4 item4 item4 item4 item4 item4" "item6 item6 item6 item6 item6 item6" "headernome2 headerespecie2 headerraca2 headersexo2 headeridade2 headerdescricao2" "celnome2 celespecie2 celraca2 celsexo2 celidade2 celdescricao2" "button2 button2 button2 button2 button2 button2";
}
.grid-container>div {
background-image: linear-gradient(to bottom right, yellow, #b3ecff, #cc66ff);
text-align: center;
padding: 5px 0;
font-size: 30px;
}
.caixa {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-image: linear-gradient(to bottom right, yellow, #b3ecff, #cc66ff);
width: 85%;
border: 2px solid #99ccff;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<div class='caixa'>
<?php
$codigo = 1;
$dois = 2;
echo "<div class='grid-container'>";
echo "<div class='item1'>" . 'Foto do Pet' . "</div>";
echo "<div class='item2'>" . 'Foto do Pet' . "</div>";
echo "<div class='item3'>" . "<input form='editfoto' type='file' name='foto$codigo' accept='image/*'>" . "</div>";
echo "<div class='item4'>" . "<input form='editfoto' type='file' name='foto$dois' accept='image/*'>" . "</div>";
echo "<div class='item5'>"; "<img name='imagem$codigo' id='NOVOimagem$codigo' src='https://www.w3schools.com/images/w3schools_green.jpg' width=300 height=320 />";"</div>";
echo "<div class='item6'>"; "<img name='imagem$dois' id='NOVOimagem$dois' src='https://www.w3schools.com/images/w3schools_green.jpg' width=300 height=320 />";"</div>";
echo "<div class='button$codigo'>;<button type='button' id='botao_salvar' onclick='salvar_registro($codigo)'>" . 'Salvar' . "</button>;</div>";
echo "<div class='button$dois'>;<button type='button' id='botao_salvar' onclick='salvar_registro($dois)'>" . 'Salvar' . "</button>;</div>";
echo "<div class='headernome$codigo'>" . 'Nome' . "</div>";
echo "<div class='headerespecie$codigo'>". 'Espécie' ."</div>";
echo "<div class='headerraca$codigo'>". 'Raça' ."</div>";
echo "<div class='headersexo$codigo'>". 'Sexo' ."</div>";
echo "<div class='headeridade$codigo'>". 'Idade' ."</div>";
echo "<div class='headerdescricao$codigo'>". 'Descrição' ."</div>";
echo "<div class='headernome$dois'>" . 'Nome' . "</div>";
echo "<div class='headerespecie$dois'>". 'Espécie' ."</div>";
echo "<div class='headerraca$dois'>". 'Raça' ."</div>";
echo "<div class='headersexo$dois'>". 'Sexo' ."</div>";
echo "<div class='headeridade$dois'>". 'Idade' ."</div>";
echo "<div class='headerdescricao$dois'>". 'Descrição' ."</div>";
echo "<div class='celnome$codigo'>" . 'Teto' . "</div>";
echo "<div class='celespecie$codigo'>". 'Rara' ."</div>";
echo "<div class='celraca$codigo'>". 'Céu Azul' ."</div>";
echo "<div class='celsexo$codigo'>". 'Masculino' ."</div>";
echo "<div class='celidade$codigo'>". '19' ."</div>";
echo "<div class='celdescricao$codigo'>". 'Fashion' ."</div>";
echo "<div class='celnome$dois'>" . 'Wiu' . "</div>";
echo "<div class='celespecie$dois'>". 'Pitbull' ."</div>";
echo "<div class='celraca$dois'>". 'Limão' ."</div>";
echo "<div class='celsexo$dois'>". 'Masculino' ."</div>";
echo "<div class='celidade$dois'>". '18' ."</div>";
echo "<div class='celdescricao$dois'>". 'Frio' ."</div>";
?>
</div>
</div>
</center>
</body>
</html>

Related

How to display correctly my DataTables table?

I have created a Datatables table using AJAX, but when I try to render it, the <tr> inside the <tbody>, are shorter than those in the <thead>.
There are 2 pages: the first one is the form and the header of the table, hidden by default. When the user clicks on the search button, it displays the header and loads the table body via AJAX. The result is the following:
style.css
.outcomeResearchTable {
z-index: 100;
background-color: white;
display: none;
}
.outcomeResearchTable th {
/*padding:1.0rem; */
width: 100px !important;
/* border-bottom:1px solid lightgray; */
background-color: #FFFFFF;
}
.outcomeResearchTable th:first-of-type {
padding: 1rem;
width: 80px !important;
}
.outcomeResearchTable th:last-of-type {
padding: 1rem;
width: 80px !important;
}
#OUTCOME_RESEARCH_TABLE thead {
display: none;
}
.outcomeResearchTable td {
padding: 1rem;
width: 100px;
}
.outcomeResearchTable td:first-of-type {
padding: 1rem;
width: 80px !important;
}
.outcomeResearchTable td:last-of-type {
padding: 1rem;
width: 80px !important;
}
page1.php
<td colspan="2">
<button class="btn btn-primary" onclick="assetSearch();" tabindex="4">Ricerca</button>
<?php
echo "<table id=\"OUTCOME_RESEARCH_TABLE\" class=\"display outcomeResearchTable\" cellspacing=\"0\" width=\"100%\">\n";
echo "<thead>\n";
echo "<tr>\n";
echo "<th>IDConfig</th>\n";
echo "<th>Nome</th>\n";
echo "<th>Tipo</th>\n";
echo "<th>Stato</th>\n";
echo "<th>Ambiente</th>\n";
echo "<th>Aggregatore</th>\n";
echo "<th>Locazione</th>\n";
echo "<th>Modello</th>\n";
echo "<th>Contratto</th>\n";
echo "<th>Valida Dal</th>\n";
echo "<th>Valida Al</th>\n";
echo "<th>Dettagli</th>\n";
echo "</tr>\n";
echo "</thead>\n";
echo "</table><br />\n";
?>
</td>
assePageScript.js
function assetSearch() {
var validation = checkForSelectedFields();
if (validation == "KO") {
return;
}
var arrForm = [];
arrForm.push(document.getElementById("name").value); // 0
//arrForm.push(document.getElementById("idConfig").value);
arrForm.push(document.getElementById("serialNumber").value); // 1
arrForm.push(document.getElementById("tipo").value); // 2
arrForm.push(document.getElementById("ambiente").value); // 3
arrForm.push(document.getElementById("modello").value); // 4
arrForm.push(document.getElementById("locazione").value); // 5
arrForm.push(document.getElementById("vendor").value); // 6
arrForm.push(document.getElementById("gruppo").value); // 7
arrForm.push(document.getElementById("stato").value); // 8
arrForm.push(document.getElementById("classe").value); // 9
arrForm.push(document.getElementById("securityLevel").value); // 10
arrForm.push(document.getElementById("aggregatore").value); // 11
$.ajax({
url: "asset_GestAsset.php",
type: "POST",
data: {
"fieldValue": JSON.stringify(arrForm)
},
success: function(data) {
var outcomeResearchTable = document.getElementById("OUTCOME_RESEARCH_TABLE");
outcomeResearchTable.style.display = "flex";
var outComeRT = $('#OUTCOME_RESEARCH_TABLE').DataTable({
paging: true,
"bAutoWidth": false,
"dom": 'ltipr',
"data": data,
"destroy": true,
"pageLength": 100,
"scrollY": 400,
"scrollX": true,
"ordering": true
});
},
error: function(err) {
alert("Errore " + err);
}
});
}

How can i post my website content to wordpress and blogger sites

How do i share my website content to wordpress blog and google's blogger like facebook share, twitter share, without any third party tool.
Thanks

Step 1:
Go to your theme’s function.php file and paste below code. This will add sharing button at the bottom of the post
function crunchify_social_sharing_buttons($content) {
if(is_singular() || is_home()){
// Get current page URL
$crunchifyURL = get_permalink();
// Get current page title
$crunchifyTitle = str_replace( ' ', '%20', get_the_title());
// Get Post Thumbnail for pinterest
$crunchifyThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
// Construct sharing URL without using any script
$twitterURL = 'https://twitter.com/intent/tweet?text='.$crunchifyTitle.'&url='.$crunchifyURL.'&via=Crunchify';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$crunchifyURL;
$googleURL = 'https://plus.google.com/share?url='.$crunchifyURL;
$bufferURL = 'https://bufferapp.com/add?url='.$crunchifyURL.'&text='.$crunchifyTitle;
// Based on popular demand added Pinterest too
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$crunchifyURL.'&media='.$crunchifyThumbnail[0].'&description='.$crunchifyTitle;
// Add sharing button at the end of page/page content
$content .= '<div class="crunchify-social">';
$content .= '<h5>SHARE ON</h5> <a class="crunchify-link crunchify-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';
$content .= '<a class="crunchify-link crunchify-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
$content .= '<a class="crunchify-link crunchify-googleplus" href="'.$googleURL.'" target="_blank">Google+</a>';
$content .= '<a class="crunchify-link crunchify-buffer" href="'.$bufferURL.'" target="_blank">Buffer</a>';
$content .= '<a class="crunchify-link crunchify-pinterest" href="'.$pinterestURL.'" target="_blank">Pin It</a>';
$content .= '</div>';
return $content;
}else{
// if not a post/page then don't include sharing button
return $content;
}
};
add_filter( 'the_content', 'crunchify_social_sharing_buttons');
Step 2:
Open style.css file of your WordPress theme and put below code for better styling.
.crunchify-link {
padding: 4px 8px 6px 8px;
color: white;
font-size: 12px;
border-radius: 2px;
margin-right: 2px;
cursor: pointer;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
-moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
}
.crunchify-link:hover,.crunchify-link:active {
color: white;
}
.crunchify-twitter {
background: #00aced;
}
.crunchify-twitter:hover,.crunchify-twitter:active {
background: #0084b4;
}
.crunchify-facebook {
background: #3B5997;
}
.crunchify-facebook:hover,.crunchify-facebook:active {
background: #2d4372;
}
.crunchify-googleplus {
background: #D64937;
}
.crunchify-googleplus:hover,.crunchify-googleplus:active {
background: #b53525;
}
.crunchify-buffer {
background: #444;
}
.crunchify-buffer:hover,.crunchify-buffer:active {
background: #222;
}
.crunchify-pinterest {
background: #bd081c;
}
.crunchify-pinterest:hover,.crunchify-pinterest:active {
background: #bd081c;
}
.crunchify-social {
margin: 20px 0px 25px 0px;
-webkit-font-smoothing: antialiased;
font-size: 12px;
}
If you want to show Sharing button at the top of the post then use this code:
function crunchify_social_sharing_buttons($content) {
if(is_singular() || is_home()){
// Get current page URL
$crunchifyURL = get_permalink();
// Get current page title
$crunchifyTitle = str_replace( ' ', '%20', get_the_title());
// Get Post Thumbnail for pinterest
$crunchifyThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
// Construct sharing URL without using any script
$twitterURL = 'https://twitter.com/intent/tweet?text='.$crunchifyTitle.'&url='.$crunchifyURL.'&via=Crunchify';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$crunchifyURL;
$googleURL = 'https://plus.google.com/share?url='.$crunchifyURL;
$bufferURL = 'https://bufferapp.com/add?url='.$crunchifyURL.'&text='.$crunchifyTitle;
// Based on popular demand added Pinterest too
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$crunchifyURL.'&media='.$crunchifyThumbnail[0].'&description='.$crunchifyTitle;
// Add sharing button at the end of page/page content
$variable .= '<div class="crunchify-social">';
$variable .= '<a class="crunchify-link crunchify-twitter" href="'. $twitterURL .'" target="_blank">Twitter</a>';
$variable .= '<a class="crunchify-link crunchify-facebook" href="'.$facebookURL.'" target="_blank">Facebook</a>';
$variable .= '<a class="crunchify-link crunchify-googleplus" href="'.$googleURL.'" target="_blank">Google+</a>';
$variable .= '<a class="crunchify-link crunchify-buffer" href="'.$bufferURL.'" target="_blank">Buffer</a>';
$variable .= '<a class="crunchify-link crunchify-pinterest" href="'.$pinterestURL.'" target="_blank">Pin It</a>';
$variable .= '</div>';
return $variable.$content;
}else{
// if not a post/page then don't include sharing button
return $variable.$content;
}
};
add_filter( 'the_content', 'crunchify_social_sharing_buttons');
Take a look here

Wordpress WP_Filesystem() doesn't rewrite file

I'm trying to generate dynamicly css file.
global $my_options;
WP_Filesystem();
global $wp_filesystem;
$css = '';
$file = './css/compile.css';
$css .= '
a{
color: '. $my_options['link-color']['regular'] .';
}
a:hover{
color: '. $my_options['link-color']['hover'] .';
}
';
if(!$wp_filesystem->put_contents($file, $css, FS_CHMOD_FILE)) {
echo 'Generating CSS error!';
}
var_dump($wp_filesystem->get_contents($file));
var_dump returns string(69) " a{ color: #81d742; } a:hover{ color: #1e73be; } ", but when I observing file compile.css - it hasn't any changes. I can't figure out what is the reason for this problem.

try with replacing two lines:
global $my_options;
global $wp_filesystem;
WP_Filesystem();
$css = '';
$file = './css/compile.css';
$css .= '
a{
color: '. $my_options['link-color']['regular'] .';
}
a:hover{
color: '. $my_options['link-color']['hover'] .';
}
';
if(!$wp_filesystem->put_contents($file, $css, FS_CHMOD_FILE)) {
echo 'Generating CSS error!';
}
var_dump($wp_filesystem->get_contents($file));
i have the same problem, solved by doing this
thanks

replace
$file = './css/compile.css';
with
$file = plugin_dir_path( __FILE__ ).'css/compile.css';
it will work fine..

Issues with image alignment in CSS & PHP

I'm very new to the process of CSS & PHP but with Wordpress & the widgets I'm trying to get better with my plugins.
I am trying to get my little twitter bird to appear next to my twitter content message, but it continues to be at the top of the messages.
An example of what I'm trying to achieve can be located here. http://globe-trekking.com/twitter_ideal.jpg (can't add image because this is my first post)
How can I over come this.
My relevant PHP code is:
$widgetContent .= "<span class='entry-content'><img class='twitter_bird' src='http://globe-trekking.com/running/wp-content/themes/newscast/images/bird_blue_16.png'>{$entryContent}</span>";
the full PHP code is:
$widgetContent .= '<ul>';
if ( ! is_array( $tweets ) || count( $tweets ) == 0 ) {
$widgetContent .= '<li class="wpTwitterWidgetEmpty">' . __( 'No Tweets Available', $this->_slug ) . '</li>';
} else {
$count = 0;
foreach ( $tweets as $tweet ) {
// Set our "ago" string which converts the date to "# ___(s) ago"
$tweet->ago = $this->_timeSince( strtotime( $tweet->created_at ), $args['showts'], $args['dateFormat'] );
//$entryContent .= '<li>';
$entryContent = apply_filters( 'widget_twitter_content', $tweet->text, $tweet );
$widgetContent .= "<span class='entry-content'><img class='twitter_bird' src='http://globe-trekking.com/running/wp-content/themes/newscast/images/bird_blue_16.png'>{$entryContent}</span>";
$widgetContent .= " <span class='entry-meta'>";
$widgetContent .= "<span class='time-meta'>";
$linkAttrs = array(
'href' => "http://twitter.com/{$tweet->user->screen_name}/statuses/{$tweet->id_str}"
);
$widgetContent .= $this->_buildLink( $tweet->ago, $linkAttrs );
$widgetContent .= '</span>';
if ( 'true' != $args['hidefrom'] ) {
$from = sprintf( __( 'from %s', $this->_slug ), str_replace( '&', '&', $tweet->source ) );
$widgetContent .= " <span class='from-meta'>{$from}</span>";
}
if ( !empty( $tweet->in_reply_to_screen_name ) ) {
$rtLinkText = sprintf( __( 'in reply to %s', $this->_slug ), $tweet->in_reply_to_screen_name );
$widgetContent .= ' <span class="in-reply-to-meta">';
$linkAttrs = array(
'href' => "http://twitter.com/{$tweet->in_reply_to_screen_name}/statuses/{$tweet->in_reply_to_status_id_str}",
'class' => 'reply-to'
);
$widgetContent .= $this->_buildLink( $rtLinkText, $linkAttrs );
$widgetContent .= '</span>';
}
$widgetContent .= '</span>';
if ( 'true' == $args['showintents'] ) {
$widgetContent .= ' <span class="intent-meta">';
$lang = $this->_getTwitterLang();
if ( !empty( $lang ) )
$linkAttrs['data-lang'] = $lang;
$linkText = __( 'Reply', $this->_slug );
$linkAttrs['href'] = "http://twitter.com/intent/tweet?in_reply_to={$tweet->id_str}";
$linkAttrs['class'] = 'in-reply-to';
$linkAttrs['title'] = $linkText;
$widgetContent .= $this->_buildLink( $linkText, $linkAttrs );
$linkText = __( 'Retweet', $this->_slug );
$linkAttrs['href'] = "http://twitter.com/intent/retweet?tweet_id={$tweet->id_str}";
$linkAttrs['class'] = 'retweet';
$linkAttrs['title'] = $linkText;
$widgetContent .= $this->_buildLink( $linkText, $linkAttrs );
$linkText = __( 'Favorite', $this->_slug );
$linkAttrs['href'] = "http://twitter.com/intent/favorite?tweet_id={$tweet->id_str}";
$linkAttrs['class'] = 'favorite';
$linkAttrs['title'] = $linkText;
$widgetContent .= $this->_buildLink( $linkText, $linkAttrs );
$widgetContent .= '</span>';
}
//$widgetContent .= '</li>';
if ( ++$count >= $args['items'] )
break;
}
}
$widgetContent .= '</ul>';
My CSS code is:
.widget_twitter div {
padding:0;
width:280px;
}
.widget_twitter ul li {
margin-bottom:5px;
margin-left:0px;
clear:both;
}
.widget_twitter a {
text-decoration:none;
color:#333333;
margin: 0 10px 10px 0;
}
.widget_twitter a:visited {
text-decoration:underline;
color:#FF00FF;
}
.widget_twitter a:hover {
text-decoration:underline;
color:#0000CC;
}
.widget_twitter .follow-button,
.widget_twitter .xavisys-link {
margin:0 10px 10px 25px;
}
.widget_twitter .entry-content {
width:260px;
display: inline-block;
line-height:22px;
margin-top:10px;
margin-left: 13px;
}
.widget_twitter .entry-content twitter_bird {
vertical-align:middle;
}
.widget_twitter .entry-meta {
display:block;
font-size:80%;
margin-bottom: 10px;
margin-left: 13px;
}
.widget_twitter .intent-meta a {
background-image: url('images/everything-spritev2.png'); /** from Twitter resources */
display: inline-block;
text-indent: -9999px;
margin: 0 10px 10px 0;
height: 16px;
width: 16px;
}
.widget_twitter .in-reply-to-meta {
margin: 0 10px 10px 0;
}
.widget_twitter .intent-meta a.in-reply-to {
background-position: 0 center;
}
.widget_twitter .intent-meta a:hover.in-reply-to {
background-position: -16px center;
}
.widget_twitter .intent-meta a.favorite {
background-position: -32px center;
}
.widget_twitter .intent-meta a:hover.favorite {
background-position: -48px center;
}
.widget_twitter .intent-meta a.retweet {
background-position: -80px center;
}
.widget_twitter .intent-meta a:hover.retweet {
background-position: -96px center;
}
Any assistance would be greatly appreciated. I've managed to get it to a "decent" appearance, but otherwise, this is the last step that I've tried a number of things on.
Regards,
Daniël

Sorry for fast answer, may be me wrong, but try to use float:left for bird image.

Installing existing site Navigation into blog script?

You will probably consider me a spoil sport for not working with wordpress for this purpose.
However I just want to use a flatfile blog system for a small site. I am using ozjournals-3.2 blog system.
I am seeking to install a header and a site navigation at the top of the blog page so that it coordinates with the existing site. I have had some success with the header but the navigation is making me struggle! I want navigation to position underneath the header as attached image demonstrates. Currently the task is presenting two problems that i need to find a work around for:
Nav will not center on page but keeps left even when I margin:auto; ?
Cannot get it to position at the foot of the header image!
My nav css is as follows:
.nav {
width: 950px;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3b3b44; /*Navigation Active Background*/
border-top: 1px solid #ccf;
border-bottom: 1px solid #ccf;}
.nav ol {
list-style: none;
width: 950px;
margin: 0 auto;
padding: 0; }
.nav li {
float: left; }
.nav li a {
display: block;
padding: 2px 20px;
text-decoration: none;
font-family: Helvetica, arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #fff; /*Active Text Color*/
border-right: 1px solid #ccf; }
.nav li:first-child a {
border-left: 0px solid #ccf; }
.nav li a:hover {
color: #000; /*Active Hover Color*/
background-color: #8db3ff; } /*Navigation Hover Background*/
#header {
height: 185px;
margin-top: 15px;
background: url(zitemplateChange.jpg);
border-bottom: 30px solid #cc0; /*showing where I want navigation to position*/
}
and the index.php
<!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">
<head>
<link rel="stylesheet" href="themes/default/zitemplateChange.css" type="text/css" media="screen" />
</head>
<body>
<div class="nav">
<ol>
<li>Home</li>
<li>About</li>
<li>Book Preview</li>
<li>Guestbook</li> <li>Tell a Friend</li>
<li>Contact</li>
<li>Support</li>
</ol>
</div>
<?php
/********************************************************************************************************
OZJournals Version 3.2 released by Online Zone <https://sites.google.com/site/onlinezonejournals>
Copyright (C) 2006-2011 Elaine Aquino <elaineaqs#gmail.com>
This program is free software; you can redistribute it and/or modify it
under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or (at your option)
any later version.
********************************************************************************************************/
# For the session
ob_start();
# For function file inclusion
include "functions.php";
# For language file inclusion
$langfile = file_get_contents("lang/index.php");
$eachlang = explode("\t", $langfile);
$oklang = $eachlang[1];
$uselang = file_get_contents("lang/$oklang.php");
$lang = explode("\n", $uselang);
# Clean the GET variablezzz
$clean['show'] = string_filter_nospace($_GET['show']);
$clean['id'] = int_filter($_GET['id']);
$clean['p'] = string_filter_nospace($_GET['p']);
$clean['f'] = int_filter($_GET['f']);
$clean['pn'] = int_filter($_GET['pn']);
# Printer-friendly view
if($clean['show'] == "printpreview") {
if(isset($clean['id'])) {
$id = super_filter($clean['id']);
if(file_exists("$datadirectory/$id.php")) {
$pfile = file_get_contents("$datadirectory/$id.php");
$what = explode("\t", $pfile);
die("<html><head><title>$what[1]</title></head><body onload=\"window.print()\"><h1>$what[1]</h1><h5>Posted by $what[4] [ $what[5] ]<br />Date: ".date($timeformat, $what[2])."<br />Category: $what[6]</h5><p>$what[3]</p><h5>Source URL: <script>document.writeln(self.location)</script></h5></body></html>");
}
}
}
# RSS view
if($clean['show'] == "rss") {
die(generaterss());
}
# Theme Picker
$themefile = file_get_contents("themes/index.php");
$eachtheme = explode("\t", $themefile);
$oktheme = $eachtheme[1];
include "themes/$oktheme/advanced.php";
$header = implode(" ", file("themes/$oktheme/header.php"));
$header = str_replace("{blogtitle}", $blogtitle, $header);
$header = str_replace("{subtitle}", subtitle($clean["show"], $clean["p"], $clean["f"]), $header);
$header = str_replace("{metakeywords}", $metakeywords, $header);
$header = str_replace("{metadescription}", $metadescription, $header);
$header = str_replace("{author}", $auth, $header);
//$header = str_replace("{header}", $blogheader, $header);
$header = str_replace("{mainlinks}", $mainlinks, $header);
$header = str_replace("{add-ons}", $addons, $header);
$header = str_replace("{search}", $search, $header);
$header = str_replace("{categories}", $categories, $header);
$header = str_replace("{archives}", $archives, $header);
$header = str_replace("{miscellaneous}", $miscellaneous, $header);
$header = str_replace("{adminmenu}", "", $header);
$header = str_replace("{usermenu}", "", $header);
$header = str_replace("{footer}", $blogfooter, $header);
echo $header;
# Signing out Initial
if($clean['show'] == "signout") {
session_start();
session_destroy();
header("Location: index.php?show=signout2");
}
# Signing out Part 2
if($clean['show'] == "signout2") {
adminpanel("$lang[1]<br /><br />");
}
# Sign-in
elseif($clean['show'] == "signin") {
echo "<h3>$lang[2]</h3>\n";
echo "<form name=\"e\" method=\"post\" action=\"index.php?show=signinok\">\n";
echo "<table border=\"0\">\n";
echo "<tr><td width=\"40%\">$lang[3]</td>";
echo "<td width=\"60%\"><input type=\"radio\" name=\"mode\" value=\"admin\" checked=\"checked\" /> $lang[4] \n";
echo "<input type=\"radio\" name=\"mode\" value=\"user\"> $lang[5] </td></tr>\n";
echo "<tr><td width=\"40%\"> $lang[6] </td>";
echo "<td width=\"60%\"><input type=\"text\" name=\"username\" /></td></tr>\n";
echo "<tr><td width=\"40%\"> $lang[7] </td>";
echo "<td width=\"60%\"><input type=\"password\" name=\"password\" /></td></tr>\n";
echo "</table><br />\n";
echo "<button type=\"submit\"> $lang[8] </button> \n";
echo "<button type=\"reset\"> $lang[9] </button> \n";
echo "</form><br /><br />\n";
}
# Blog
elseif($clean['show'] == "" OR $clean['show'] == "main" OR $clean['show'] == "index") {
$fortitle=$tagline;
$pn = $clean['pn'];
if($total > 0) {
if($total >= $displaynumber) {
if($pn == "") {
$pn = $total;
echo display ($displaynumber, $datadirectory, $total, $pn);
echo "<p> </p>\n";
}
else {
$pn = $clean['pn'];
echo display ($displaynumber, $datadirectory, $total, $pn);
echo "<p> </p>\n";
}
}
else {
echo display ($displaynumber, $datadirectory, $total, $pn);
echo "<p> </p>\n";
}
}
else {
blogviewer("$lang[10]<br />\n\n", $blogtitle);
}
}
# Pages
elseif($clean['show'] == "pages") {
$totalpages = countfiles("pages");
$currentpage = super_filter($clean['f']);
if(file_exists("pages/$currentpage.php")) {
$cc = file_get_contents("pages/$currentpage.php");
$eachcc = explode("\t", $cc);
if($totalpages > 0) {
echo "<h3>".$eachcc[1]."</h3>\n";
echo "<h5>$lang[12] ".$eachcc[4]." $lang[11] ".date($timeformat, $eachcc[2])." </h5>\n";
echo "<p> ".stripslashes($eachcc[3])." </p>\n\n";
}
else {
blogviewer("$lang[13]<br />\n\n", $blogtitle);
}
}
else {
blogviewer("$lang[81]<br />\n\n", $lang[80]);
}
}
# Complete archives
elseif($clean['show'] == "archives") {
if($total > 0) {
$theyear = int_filter($_GET['y']);
$themonth = $_GET['m'];
$thecategory = $_GET['c'];
$p = $clean['p'];
if($p == "main") {
echo adisplayall ($datadirectory, $total);
}
else {
if(isset($theyear) AND isset($themonth)) {
echo adisplaymonthandyear ($datadirectory, $total, $themonth, $theyear);
}
elseif(isset($thecategory)) {
echo adisplaycategory ($datadirectory, $total, $thecategory);
}
elseif(file_exists("$datadirectory/$p.php")) {
for($e=1; $e <= $total; $e++) {
if($p == $e) {
echo displayeach($datadirectory, $p);
}
}
}
else {
blogviewer("$lang[81]<br />\n\n", $lang[80]);
}
}
}
else {
blogviewer("$lang[14]<br />\n\n", $blogtitle);
}
}
# Comment poster
elseif($clean['show'] == "postcomments") {
$date = date_and_time($timezone, "", "", "", "", "", "", "");
$name = string_filter($_POST['vname']);
$vemail = string_filter_email($_POST['vemail']);
$location = string_filter_url($_POST['vlocation']);
$comment = string_filter_comment($_POST['vcomment']);
$verify = string_filter_nospace($_POST['verify']);
$p = $clean['p'];
// (1) Block if there's no name, email and comment
if($name !== "" && $vemail !== "" && $comment !== "") {
// (2) Block if it doesn't have a valid email addie
if(ValidEmail($vemail)) {
$filecont = file_get_contents("comments/$p.php");
if($location == "") {
$all = "<?php /*\t".str_replace("\r\n", "<br />", $comment)."\t".$name."\t".$date."\tnone\t".$vemail."\t*/ ?>\n";
}
else {
if(substr($location, 0, 7)!=="http://") {
$all = "<?php /*\t".str_replace("\r\n", "<br />", $comment)."\t".$name."\t".$date."\thttp://".$location."\t".$vemail."\t*/ ?>\n";
}
else {
$all = "<?php /*\t".str_replace("\r\n", "<br />", $comment)."\t".$name."\t".$date."\t".$location."\t".$vemail."\t*/ ?>\n";
}
}
// (3) Block if the referrer is different from blog address in settings
if($_SERVER["HTTP_REFERER"]=="$blog/index.php?show=archives&p=$p") {
// (4) Verify session first before posting the comment.
if($verify!=="") {
session_start();
if($verify==$_SESSION['verify']) {
// (5) Block comment if it contains bad words
if(!strpos($comment, $badwords)) {
// (6) Do not post comment if the exact same comment and name already exists.
if(!preg_match("/\\t$comment\\t$name/", file_get_contents("comments/$p.php"))) {
$handle = fopen ("comments/$p.php", "a+");
fwrite ($handle, $all);
fclose ($handle);
// Email after comment has been posted. Negative (-) if not emailed.
if($emailcomments!=="yes") {
blogviewer($name.", $lang[15]<br />$lang[16]. -<br />\n\n", $blogtitle);
}
else {
$comment = str_replace("<br />", "\r\n", $comment);
if(mail($vemail, $lang[84], "$lang[85] $user,\r\n\r\n$name ($vemail) $lang[86] ($blogtitle). $lang[87]:\r\n\r\n------------\r\n\r\n$comment\r\n\r\n------------\r\n\r\n$lang[88]:\r\n$blog/admin.php?show=editdeletecomments\r\n\r\n$lang[89]\r\n\r\n$lang[90]", "From: $blogtitle <$email>")) {
blogviewer($name.", $lang[15]<br />$lang[16]. +<br />\n\n", $blogtitle);
}
else {
blogviewer($name.", $lang[15]<br />$lang[16]. -<br />\n\n", $blogtitle);
}
}
}
else {
blogviewer("$name, $lang[92]<br />$lang[21]<br />\n", $blogtitle);
}
}
else {
blogviewer("$name, $lang[93]<br />$lang[21]<br />\n", $blogtitle);
}
}
else {
blogviewer("$lang[17]<br />$lang[21]<br />\n", $blogtitle);
$session_degenerate_id;
}
}
else {
blogviewer("$lang[18]<br />$lang[21]<br />\n", $blogtitle);
$session_degenerate_id;
}
}
else {
blogviewer("$lang[19]<br />$lang[21]<br />\n", $blogtitle);
$session_degenerate_id;
}
}
else {
blogviewer("$lang[20]<br /><br />$lang[21]<br />\n", "$blogtitle");
$session_degenerate_id;
}
}
else {
blogviewer("$lang[22] <b>$lang[23]</b>, <b>$lang[24]</b>, $lang[25] <b>$lang[26]</b>.<br /> $lang[27]<br /><br />$lang[21]", "$blogtitle");
}
}
# Signed in
elseif($clean['show'] == "signinok") {
$mode = string_filter_nospace($_POST['mode']);
if($_POST['username'] !== '' AND $_POST['password'] !== '') {
# Administrator Mode
if($mode == "admin") {
$newsessionuser = md5($_POST['username'].mktime());
$newsessionpass = md5($_POST['password'].mktime());
if($newsessionuser == md5($user.mktime()) AND $newsessionpass == md5($pass.mktime())) {
session_destroy();
session_start();
$_SESSION['user'] = $user;
$_SESSION['mode'] = "admin";
adminpanel("$lang[28], <b>$auth</b>! <br /><br /> $lang[29]<br />$lang[30] $lang[31].<br />\n\n");
session_write_close();
}
else {
adminpanel ("$lang[32]<br />$lang[33] $lang[34].<br />\n\n");
$session_degenerate_id;
}
}
# User Mode
elseif($mode == "user") {
$usersdb = file_get_contents("usersdb.php");
$ida = explode($_POST['username']."\t", $usersdb);
$idb = str_replace("<?php /*\t", "", $ida[0]);
$idc = $idb - 1;
$passa = explode("\n", $usersdb);
$passb = explode("\t", $passa[$idc]);
$passc = $passb[4];
if(strpos($usersdb, $_POST['username']) !== FALSE AND $passc == md5($_POST['password'])) {
session_destroy();
session_start();
$_SESSION['user'] = $_POST['username'];
$_SESSION['mode'] = "user";
blogviewer("$lang[28], <b>".$_SESSION['user']."</b>! <br /><br /> $lang[29]<br /> $lang[30] $lang[35].<br />\n\n", "User's Panel");
session_write_close();
}
else {
blogviewer("$lang[32]<br />$lang[33] $lang[34].<br />\n\n", "User's Panel");
$session_degenerate_id;
}
}
# Anything else is invalid
else {
blogviewer("$lang[83] <br />\n\n", $lang[82]);
}
}
else {
blogviewer("$lang[36] <br />$lang[33] $lang[34].<br />\n\n", $lang[82]);
}
}
# Load 404 Page
else {
blogviewer("$lang[81]<br />\n\n", $lang[80]);
}
# Simple statistics
if(file_exists("counter.php")) {
$counterfile = file_get_contents("counter.php");
$counterdata = explode("|", $counterfile);
$countermagic = count($counterdata);
$h = fopen("counter.php", "a+");
fwrite($h, $_SERVER['REMOTE_ADDR']."|");
}
# Footer
$footer = implode(" ", file("themes/$oktheme/footer.php"));
$footer = str_replace("{blogtitle}", $blogtitle, $footer);
$header = str_replace("{subtitle}", subtitle($clean["show"], $clean["p"], $clean["f"]), $header);
$footer = str_replace("{metakeywords}", $metakeywords, $footer);
$footer = str_replace("{metadescription}", $metadescription, $footer);
$header = str_replace("{author}", $auth, $header);
$footer = str_replace("{header}", $blogheader, $footer);
$footer = str_replace("{mainlinks}", $mainlinks, $footer);
$footer = str_replace("{add-ons}", $addons, $footer);
$footer = str_replace("{search}", $search, $footer);
$footer = str_replace("{categories}", $categories, $footer);
$footer = str_replace("{archives}", $archives, $footer);
$footer = str_replace("{miscellaneous}", $miscellaneous, $footer);
$footer = str_replace("{adminmenu}", "", $footer);
$footer = str_replace("{usermenu}", "", $footer);
$footer = str_replace("{footer}", $blogfooter, $footer);
echo $footer;
# End flush for the session
ob_end_flush();
?>
All help appreciated.

Here's a fiddle with what I think is working.
Your problem was you had the div with a width of 950px, and inside that was a ol of 950px. When there's no room for a margin, auto will pick 0.
To fix this, remove the float from the outside div and set it to width:100%;. Then put all the background stuff in the ol. Finally put something at the end of the ol with clear: both;. A <br /> is the most common choice.
UPDATE:
Here's a full screen preview, in case the regular fiddle doesn't give you 950px.

Resources