I've tried a couple things and I can't seem to get this to update instead of recreating the file.
With A LOT of help from users here I created a menu template for our chef here at my facility. He enters his information and it creates a menu automatically with an image all kinds of fancy things.
What I'm hoping now is if he needs to change a menu item he doesn't have to retype every days information back in. I've read up on FILE_APPEND as well as fopen but don't seem to be doing what I need.
Here's the script I'm utilizing.
<?php
$MessageMondayMain = $_POST['MessageMondayMain'];
$MessageTuesdayMain = $_POST['MessageTuesdayMain'];
$MessageWednesdayMain = $_POST['MessageWednesdayMain'];
$MessageThursdayMain = $_POST['MessageThursdayMain'];
$MessageFridayMain = $_POST['MessageFridayMain'];
$MessageMonday = $_POST['MessageMonday'];
$MessageTuesday = $_POST['MessageTuesday'];
$MessageWednesday= $_POST['MessageWednesday'];
$MessageThursday = $_POST['MessageThursday'];
$MessageFriday = $_POST['MessageFriday'];
$MessageDate = $_POST['MessageDate'];
ob_start();
?>
<META http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<html>
<head>
<title>GCH Cafe Menu</title>
<style>
.menu {
padding-top: 22px;
padding-right: 350px;
box-sizing: border-box;
margin: 0 auto;
line-height: 100%;
color: black;
overflow-y: scroll;
}
.menu h1 {
padding-top: 1px;
font-size: 40px;
font-family: candara;
position: relative;
}
.menu h2 {
z-index:3
font-size: 30px;
font-family: Time New Roman;
text-decoration: Underline;
color: black;
text-transform: uppercase;
color: rgb(54,113,91);
}
.menu h3 {
z-index:3
font-size:25px;
font-family: candara;
text-transform: uppercase;
text-weight: bold;
color: rgb(152,180,155);
}
.menu h4 {
z-index:3
font-family: candara;
font-size: 18px;
line-height:100%;
width: 650px;
color: gray;
}
.container {
position:absolute;
}
.outline {
position: absolute;
left: -570px;
z-index:1
}
.chef {
position: absolute;
top: 90px;
left: 150px;
z-index:2
}
.date {
position: absolute;
top: 810px;
right: 210px;
z-index:2
}
</style>
</head>
<body bgcolor="#f2f2f2">
<center>
<div class="container">
<img class="outline" src="plain.png" height="825" width="750">
<img class="chef" src="chef.png" height="690" width="450">
</div>
<div class="menu">
<h1><img src="cafe2.png" height="100" width="225"></h1>
<br>
<h2>Monday</h2>
<h3>-<?php echo nl2br ($MessageMondayMain);?>-</h3>
<h4><?php echo nl2br($MessageMonday); ?></h4>
<h2>Tuesday</h2>
<h3>-<?php echo nl2br ($MessageTuesdayMain);?>-</h3>
<h4><?php echo nl2br($MessageTuesday); ?></h4>
<h2>Wednesday</h2>
<h3>-<?php echo nl2br ($MessageWednesdayMain);?>-</h3>
<h4><?php echo nl2br($MessageWednesday); ?></h4>
<h2>Thursday</h2>
<h3>-<?php echo nl2br ($MessageThursdayMain);?>-</h3>
<h4><?php echo nl2br($MessageThursday); ?></h4>
<h2>Friday</h2>
<h3>-<?php echo nl2br ($MessageFridayMain);?>-</h3>
<h4><?php echo nl2br($MessageFriday); ?></h4>
<div class="date">
<h2>Menu Date:<br><br><?php echo ($MessageDate);?></h2>
</div>
</div>
</div>
</center>
</body>
</html>
<?php
$html = ob_get_contents();
ob_end_clean();
$filename = "menu.html";
file_put_contents($filename, $html);
echo file_get_contents("menu.html");
?>
Related
I am currently making a bio section for a website and so far I have a way to "edit the profile". What I want to happen is the text that is inserted be saved into a file I have already created. Here's the current code that I have with their according names.
Profile Editing Page (editprofile.php)
<?php
session_start();
if (!isset($_SESSION['username'])) {
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
$username = $_SESSION['username'];
$file = "extra/" . $username . ".png";
if (!file_exists($file))
$file = 'extra/defaultProfile.png';
?>
<html>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Downloads</li>
<li>Chat</li>
<li>Profile</li>
<li class="logout">Logout</li>
</ul>
</nav>
</div>
</header>
<body>
<div class="profileimg">
<img src=<?php echo $file; ?> width="125" height="125">
</div>
<div class="profilename">
<p style="position: absolute; top: 8px; left: 130px; color: white; font-size: 30px;"><?php echo $username ?></p>
</div>
<div class="biotext">
<textarea style="position: absolute; top: 75px; left: 132.5px; width: 450px; height: 87px;"></textarea>
</div>
</body>
<footer>
<div class="status">Currently logged in as <?php echo $username ?></div>
</footer>
</html>
The Display Profile Page (profile.php)
<?php
session_start();
if (!isset($_SESSION['username'])) {
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
$username = $_SESSION['username'];
$file = "extra/" . $username . ".png";
if (!file_exists($file))
$file = 'extra/defaultProfile.png';
?>
<html>
<title> Home Page </title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Downloads</li>
<li>Chat</li>
<li>Profile</li>
<li class="logout">Logout</li>
</ul>
</nav>
</div>
</header>
<body>
<div class="profileimg">
<img src=<?php echo $file; ?> width="125" height="125">
</div>
<div class="profilename">
<p style="position: absolute; top: 8px; left: 130px; color: white; font-size: 30px;"><?php echo $username ?></p>
</div>
<div class="biotext">
<iframe width=25% height=9.5% src="getbio.php" background-color='white' style=" position: absolute; top: 75px; left: 132.5px;"></iframe>
</div>
<p>Edit Your Profile</p>
</body>
<footer>
<div class="status">Currently logged in as <?php echo $username ?></div>
</footer>
</html>
The Part to get the bio text from a file (getbio.php)
<?php
session_start();
if (!isset($_SESSION['username'])) {
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}
$username = $_SESSION['username'];
$bioFile = "bio/" . $username . ".txt";
if (!file_exists($bioFile))
$bioFile = 'bio/defaultBio.txt';
?>
<style>body {background-color: #f1f1f1;}
</style><body><?php echo nl2br( file_get_contents($bioFile) );
?></body>
CSS (main.css)
body {
margin: 0;
background: #222;
font-family: arial;
font-weight: 500;
}
.container {
width: 100%;
margin: 0 auto;
}
header {
background: #55d6aa;
}
header::after {
content: '';
display: table;
clear: both;
}
nav {
float: left;
width: 100%;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav li:hover {
color: #000;
}
nav li::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav li:hover::before {
width: 100%;
}
.logout {
float: right;
margin-right: 50px;
}
.status {
position: absolute;
bottom: 5px;
right: 5px;
color: green;
}
.download {
display: inline-block;
text-decoration: none;
list-style: none;
}
.download a{
color: lime;
text-decoration:none;
padding-left: 50px;
}
.download a:hover{
color: green;
text-decoration:none;
}
.download li {
display: inline;
float: right;
padding-top: 17.5px;
}
The CSS is just for good viewing of the website and the other parts are for reference. I'm not sure how to save the text from the textarea (part of the editprofile.php) to files inside a folder called /bio. If anyone can help me, I'd be really thankful.
What is missing from your code is a way to send the data entered on the edit page to the server for processing and saving. Obviously, you cannot open a file that has not been created.
The html element used to send data to a server is <form> which interacts with editing (input) elements such as <textarea>.
I suggest some learning on your part. Here is one place to start.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
For some reason no matter what I put in the max-width option I'm not getting any change.. I had it working and randomly it stopped so I'm not sure what happened. Hopefully I'm just missing a simple ; somewhere or something. I'm not too verse in css but I'm learning as I'm going.
<?php
$MessageMondayMain = $_POST['MessageMondayMain'];
$MessageTuesdayMain = $_POST['MessageTuesdayMain'];
$MessageWednesdayMain = $_POST['MessageWednesdayMain'];
$MessageThursdayMain = $_POST['MessageThursdayMain'];
$MessageFridayMain = $_POST['MessageFridayMain'];
$MessageMonday = $_POST['MessageMonday'];
$MessageTuesday = $_POST['MessageTuesday'];
$MessageWednesday= $_POST['MessageWednesday'];
$MessageThursday = $_POST['MessageThursday'];
$MessageFriday = $_POST['MessageFriday'];
ob_start();
?>
<META http-equiv='Content-Type' content='text/html; charset=UTF-8'>;
<html>
<head>
<title>GCH Cafe Menu</title>
<style>
.menu {
background: url(chef2.jpg);
width: 1200px;
height: 850px;
box-sizing: border-box;
padding-top: 80px;
padding-right: 605px;
margin: 0 auto;
color: black;
line-height: 100%;
}
.menu h1 {
font-size: 40px;
font-family: candara;
position: static;
}
.menu h2 {
font-size: 22px;
font-family: Arial;
text-decoration: Underline;
color: green;
text-transform: uppercase;
}
.menu h3 {
font-family: candara;
text-transform: uppercase;
}
.menu h4 {
font-family: candara;
font-size: 16px;
max-width: 450px;
line-height:90%;
}
</style>
</head>
<body>
<center>
<div class="menu">
<h1>GCH Cafe Menu</h1>
<br><br>
<h2>Monday</h2>
<h3><?php echo nl2br ($MessageMondayMain);?></h3>
<h4><?php echo nl2br($MessageMonday); ?></h4>
<h2>Tuesday</h2>
<h3><?php echo nl2br ($MessageTuesdayMain);?></h3>
<h4><?php echo nl2br($MessageTuesday); ?></h4>
<h2>Wednesday</h2>
<h3><?php echo nl2br ($MessageWednesdayMain);?></h3>
<h4><?php echo nl2br($MessageWednesday); ?></h4>
<h2>Thursday</h2>
<h3><?php echo nl2br ($MessageThursdayMain);?></h3>
<h4><?php echo nl2br($MessageThursday); ?></h4>
<h2>Friday</h2>
<h3><?php echo nl2br ($MessageFridayMain);?></h3>
<h4><?php echo nl2br($MessageFriday); ?></h4>
</div>
</div>
</center>
</body>
</html>
<?php
$html = ob_get_contents();
ob_end_clean();
$filename = "menu.html";
file_put_contents($filename, $html);
echo file_get_contents("menu.html");
?>
You can remove the max-width and manage the spacing with padding for .menu.
.menu{
padding: 80px 675px 0 70px;
}
There is a specific section of my website which had broken look due to bad CSS & PHP code, which I decided to fix today. With good luck fixed a lot of it(and learned CSS along the way).
The pages I fixed have dynamic content on them - Badges like we have here on stackoverflow. Depending on user level, some people may not have any badges.
The problem is, while pages that have badges look alright, the ones which don't look entirely broken, and the rest of the content on pages shifts when there are no badges.
Any thoughts on how should I go about fixing it?
CSS:
.ms-sellerprofile {
width: 100%;
align:center;
}
.ms-sellerprofile .seller-data {
width: 100%;
display: inline-block;
align:center;
}
.ms-sellerprofile .seller-data > div {
display: inline;
float: left;
}
.ms-sellerprofile .seller-data .avatar-box-img {
float:left;
width:250px;
display: inline-block;
margin-top:10px;
margin-bottom:10px;
}
.ms-sellerprofile .seller-data div.avatar-box {
margin-left: 10px;
width:250px;
text-align: left;
font-family: Helvetica, Arial, sans-serif;
font-size: 22px;
display: inline-block;
margin-top:10px;
margin-bottom:10px;
}
.ms-sellerprofile .seller-data .info-box {
margin-top: 10px;
margin-left: 290px;
text-align: right;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
}
.ms-sellerprofile .seller-data div.ms-badges {
border: 0;
margin-left: -240px;
margin-top: 40px;
}
.ms-sellerprofile .seller-data div.info-box p {
margin: 5px 0;
}
.ms-sellerprofile .seller-data div.info-box a {
color: #38B0E3;
text-decoration: underline;
}
.ms-sellerprofile .seller-description {
clear: both;
margin: 40px 0;
}
PHP:
<div class="ms-sellerprofile">
<div class="seller-data">
<div class="avatar-box-img"><img src="<?php echo $seller['thumb']; ?>" />
</div>
<div class="avatar-box"><?php echo $ms_catalog_seller_products; ?>
</div>
<div class="ms-badges"><?php foreach($seller['badges'] as $badge) { ?>
<img src="<?php echo $badge['image']; ?>" title="<?php echo $badge['description']; ?>" /></div>
<?php } ?>
<div class="info-box">
<?php if ($seller['country']) { ?>
<p><b><?php echo $ms_catalog_seller_profile_country; ?></b> <?php echo $seller['country']; ?></p>
<?php } ?>
<?php if ($seller['company']) { ?>
<p><b><?php echo $ms_catalog_seller_profile_company; ?></b> <?php echo $seller['company']; ?></p>
<?php } ?>
<?php if ($seller['website']) { ?>
<p><b><?php echo $ms_catalog_seller_profile_website; ?></b> <?php echo $seller['website']; ?></p>
<?php } ?>
<!-- <p><b><?php echo $ms_catalog_seller_profile_totalsales; ?></b> <?php echo $seller['total_sales']; ?></p> -->
<p><b><?php echo $ms_catalog_seller_profile_totalproducts; ?></b> <?php echo $seller['total_products']; ?></p>
</div>
</div>
</div>
You should handle the exception cases explicitly.
if($var==NULL){
//html without using $var
}
else{
//html with use of $var
}
First time trying this and I know I've got someting backwards or upside down. I have a feeling I have my loop a little messed up too because the styling changes with each blog post. It is weird.
My main question however = How do I get these posts to display horizontally and not vertically?? Is my loop messed up? Is my CSS the issue instead (my best guess).
Here is the div site
Here was my demo site for how I wanted it to turn out to look.
I'm just showing this site so you totally "visually" understand what I am trying to accomplish.
Here is my code. It's much appreciated if I can get any help at all with this issue as it has caused me so many headaches. This is my first time doing a Wordpress template from scratch, and is definitely a learning experience.
#blog_section {
float: none;
height: auto;
width: 100%;
position: relative;
top: 0px;
left: 0px;
z-index: 19;
margin-top: 0px;
margin-left: auto;
clear: none;
background-color: rgb(26, 26, 26);
min-width: 0px;
padding-top: 8%;
padding-bottom: 8%;
margin-right: auto;
padding-right: 5%;
padding-left: 5%;
}
.blog_image {
float: left;
width: auto;
max-width: 99.260651%;
height: auto;
color: rgb(0, 0, 0);
position: relative;
top: 0px;
left: 0px;
z-index: 21;
margin-top: 0px;
margin-bottom: 5px;
margin-left: 0%;
clear: none;
margin-right: 0%;
display: block;
}
.home_blog_title_content {
float: left;
font-size: 1em;
width: 100%;
height: auto;
text-align: left;
font-weight: normal;
line-height: 1em;
margin-left: 0%;
margin-top: 0px;
margin-bottom: 5px;
clear: both;
min-height: 0px;
}
.home_text_title {
font-family: open-sans;
color: rgb(255, 255, 255);
line-height: 1em;
font-size: 1.4em;
font-weight: 600;
margin-bottom: 15px;
}
.home_text_content{
margin-top: 15px;
margin-bottom: 15px;
font-family: open-sans;
}
.home_text_content a {
color: rgb(99, 130, 140);
font-family: open-sans;
line-height: 1.35em;
font-size: .85em;
}
.home_text_content a:active {
color: rgb(57, 155, 187);
}
.home_text_content a:hover {
color: rgb(57, 155, 187);
}
.home_text_content p{
font-family: open-sans;
color: rgb(212, 211, 209);
line-height: 1.35em;
font-weight: 100;
font-size: .85em;
}
<!-- BEGIN BLOG CALL-OUT SECTION-->
<div id="blog_section" class="clearfix">
<div class="blog_posts_container">
<?php
$rp_query = new WP_Query( 'showposts=3' );
if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>
<!-- Blog Thumbnail-->
<div class="blog_image image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s"><?php the_post_thumbnail('full'); ?></div>
<!-- Blog Post Date/time-->
<p class="post">
<span class="post_date">Posted <?php the_time('m/j/y g:i A') ?></span><br />
</p>
<!-- Blog Title-->
<p class="home_blog_title_content">
<span class="home_text_title"><?php the_title(); ?></span><br />
</p>
<!-- Blog Content-->
<div class="home_text_content">
<?php the_excerpt(); ?>
Read More</li>
</div>
<?php endwhile; ?>
<? endif; ?></div>
<?php wp_reset_postdata(); ?>
</div>
<!-- END BLOG CALL-OUT SECTION-->
you need to put some type of wrapping div around the individual posts
<!-- BEGIN BLOG CALL-OUT SECTION-->
<div id="blog_section" class="clearfix">
<div id="Blog_array_posts_container" class="clearfix">
<?php
$rp_query = new WP_Query( 'showposts=3' );
if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>
<div class="post-wrapping-div">
<div id="blog_image" class="image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s">
<li><?php the_post_thumbnail('full'); ?><b/>
</div>
<p class="home_blog_title_content">
<div class="home_text_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?><br/></span>
</p>
<div class="home_text_content">
</div>
<?php the_excerpt('Read More...'); ?>
Read More</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</ul>
<? endif; ?>
</div>
</div>
Then give that div a width and float them or display block however you choose to lay them out. Sorry just noticed your demo site so try
.post-wrapping-div { width:33%; float: left; padding:0 20px; }
I've created a blog main page using PHP and have included a sidebar and main area for the posts. When I add any more content to either the sidebar or the main content/posts area the content expands over the main div and the main div doesn't expand. How can I go about creating a div tag that will expand according to the content in the inner two divs.
Main Page:
<html>
<head>
<meta name="keywords" content="Mac user Ultan Casey TheCompuGeeks UltanKC">
<meta name="description" content="The Home of one of Ireland's budding Technology Reviewers Ultan Casey">
<title>Ultan.me - Home of Ultan Casey</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<style>
<!--
a {text-decoration:none}
//-->
</style>
</head>
<div id="main">
<!-- Menu Start -->
<div id="menu">
<ul>
<li>home</li>
<li>about me</li>
<li>archives</li>
<li>contact</li>
<li>gallery</li>
<div id="search">
<input type="text" name="q" value="search" />
<input type="button" name="Submit" value="Submit" />
</div>
</ul>
</div>
<!-- Menu End -->
<img src="images/banner.png" />
<div id="posts">
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');
$blog_postnumber = 5;
if (!isset($_GET['page']) || !is_numeric($_GET['page'])) {
$page = 1;
}
else {
$page = (int)$_GET['page'];
}
$from = (($page * $blog_postnumber) - $blog_postnumber);
$sql = "SELECT * FROM php_blog ORDER BY timestamp DESC LIMIT $from, $blog_postnumber";
$result = mysql_query($sql) or print ("Can't select entries from table php_blog.<br />" . $sql . "<br />" . mysql_error());
while($row = mysql_fetch_array($result)) {
$date = date("l F d Y", $row['timestamp']);
$title = stripslashes($row['title']);
$entry = stripslashes($row['entry']);
$id = $row['id'];
$get_categories = mysql_query("SELECT * FROM php_blog_categories WHERE `category_id` = $row[category]");
$category = mysql_fetch_array($get_categories);
?>
<p><?php echo "<p><strong>" . $title . "</strong></p>"; ?><br /><br />
<?php echo $entry; ?><br /><br />
<p>Posted in <?php echo $category['category_name']; ?> on <?php echo $date; ?></p>
<hr /></p>
<?php
}
?>
<div id="pages">
<?php
$total_results = mysql_fetch_array(mysql_query("SELECT COUNT(*) AS num FROM php_blog"));
$total_pages = ceil($total_results['num'] / $blog_postnumber);
if ($page > 1) {
$prev = ($page - 1);
echo "<< Newer ";
}
for($i = 1; $i <= $total_pages; $i++) {
if ($page == $i) {
echo "$i ";
}
else {
echo "$i ";
}
}
if ($page < $total_pages) {
$next = ($page + 1);
echo "Older >>";
}
?>
</div>
</div>
<!-- Sidebar Start -->
<div class="sidebar">
<!-- Item 1 -->
<div id="side-item">
<h2>
<a href="http://www.dailybooth.com/UltanCasey">
<img src="images/db-icon.jpg">Dailybooth
</a></h2>
<div id="side-item-content">
<center>
<img src="http://dailybooth.com/UltanCasey/latest/medium.jpg" />
</center>
</div>
</div>
<!-- Item 2 -->
<div id="side-item">
<h2><img src="images/connect.jpg" />Connect</h2>
</div>
<div id="side-item-content">
<div class="tweet-title"><p>Latest Tweet:</p></div>
<div id="tweet">
<?php
function getTwitterStatus($userid){
$url = "http://twitter.com/statuses/user_timeline/$userid.xml?count=1";
$xml = simplexml_load_file($url) or die("could not connect");
foreach($xml->status as $status){
$text = $status->text;
}
echo $text;
}
getTwitterStatus("UltanKC");
?>
</div>
<br>
<ul>
<li id="social">YouTube</li>
<li id="social">Twitter</li>
<li id="social">LastFM</li>
<li id="social">Email</li>
</ul>
</div>
<!-- Item 2 End-->
<div id="side-item">
<h2>Archives</h2>
</div>
<div id="side-item-content">
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');
$result = mysql_query("SELECT FROM_UNIXTIME(timestamp, '%Y') AS get_year, COUNT(*) AS entries FROM php_blog GROUP BY get_year");
while ($row = mysql_fetch_array($result)) {
$get_year = $row['get_year'];
$entries = $row['entries'];
echo "Entries from " . $get_year . " (" . $entries . ")<br />";
}
?>
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');
$result1 = mysql_query("SELECT * FROM php_blog_categories ORDER BY category_name ASC");
while($row = mysql_fetch_array($result1)) {
$result2 = mysql_query("SELECT COUNT(`id`) AS entries FROM php_blog WHERE category = $row[category_id]");
$num_entries = mysql_fetch_array($result2);
echo '' . $row['category_name'] . ' (' . $num_entries['entries'] . ')<br />';
}
?>
</div>
</div>
</div>
<!-- Sidebar End -->
</div>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #eeeeee;
height: 100%;
}
#menu {
background-color: #282828;
height:20px;
width: 840px;
padding: 10px;
}
#main {
width: 860px;
height: 100%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
-webkit-box-shadow: 2px 0px 5px #bbbbbb,-2px 0 5px #bbbbbb;
-moz-box-shadow: 2px 0px 5px #bbbbbb,-2px 0px 5px #bbbbbb;
}
#menu li {
display: inline;
list-style-type: none;
height: 20px;
margin-top: 10px;
margin-left: 5px;
}
#menu a, menu a:visited{
font-family: arial;
color: #ffffff;
text-decoration: none;
padding: 3px;
}
#menu a:hover{
font-family: arial;
color: #282828;
text-decoration: none;
padding: 3px;
background-color: #ffffff;
}
#search{
float: right;
}
.sidebar {
width: 260px;
height: 100%;
float: right;
margin-right: 4px;
}
#posts {
width: 590px;
height: 100%;
float: left;
}
#side-item h2 {
background-color: #282828;
width: 245px;
height: 30px;
font-size: 25px;
font-family: arial;
color: #ffffff;
padding: 5px;
padding-top: 6px;
padding-bottom: 4px;
}
#side-item-content{
border:1px solid #dadada;
padding: 5px;
width: 243px;
margin-bottom: 12px;
}
#side-item h2 img {
margin-right: 6px;
float: left;
}
#side-item h2 a:link {
text-decoration: none;
color: #ffffff;
}
#side-item h2 a:hover {
text-decoration: underline;
color: #ffffff;
}
#side-item h2 a:visited {
text-decoration: none;
color: #ffffff;
}
#social {
background-color: #282828;
width: 223px;
height: 20px;
font-size: 20px;
font-family: arial;
color: #ffffff;
display: block;
margin-top: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding: 10px;
}
/*#social img {
float: left;
padding-top: -12px;
}*/
#social a:link {
font-size: 20px;
font-family: arial;
color: #ffffff;
text-decoration: none;
}
#tweet {
width: 221px;
padding: 10px;
color: #242424;
background-color: #f5f5f5;
border:1px solid #282828;
margin-bottom: -8px;
font-family: arial;
}
#social a:hover{
font-size: 20px;
font-family: arial;
color: #ffffff;
text-decoration: underline;
}
#social a:visited {
font-size: 20px;
font-family: arial;
color: #ffffff;
text-decoration: none;
}
.tweet-title {
background-color: #2dbfe9;
color: #ffffff;
width: 231px;
height: 20px;
border-left:1px solid #282828;
border-right:1px solid #282828;
border-top:1px solid #282828;
font-size: 20px;
padding: 5px;
font-family: arial;
}
.tweet-title a:link, .tweet-title a:visited {
color: #ffffff;
text-decoration: none;
}
.tweet-title a:hover {
color: #2dbfe9;
text-decoration: none;
background-color: #ffffff;
}
#pages {
float: left;
}
Image:
First: Where are your <body> tags?
Ok here is how I made it works. It seems that #pages and #sidebar they should be in separate <div> tag. The code (I deleted PHP from it)
HTML:
<html>
<head>(content)</head>
<body> <!-- never forget about body tags!!!!!!!!!-->
<div id="main">
<!-- Menu Start -->
(...)
<!-- Menu End -->
<div id="content"> <!-- this is new -->
<div id="posts">
(content)
</div>
<div class="sidebar">
(content)
<!-- Sidebar End -->
<div class="clr" /> <this is new>
</div>
</div>
</body>
<
and CSS:
\*{
margin: 0px;
padding: 0px;
}
body{
background-color: #eeeeee;
}
\#menu {
background-color: #282828;
height:20px;
width: 840px;
padding: 10px;
position: relative;
}
\#main {
width: 860px;
margin: 0 auto;
background-color: #ffffff;
-webkit-box-shadow: 2px 0px 5px #bbbbbb,-2px 0 5px #bbbbbb;
-moz-box-shadow: 2px 0px 5px #bbbbbb,-2px 0px 5px #bbbbbb;
}
.clr{
clear: both;
}
\#content{
position: relative;
width: 860px;
}
.sidebar {
position: relative;
width: 260px;
float: right;
margin-right: 4px;
}
\#posts {
width: 590px;
position: relative;
float: left;
}
I believe this should do the work.
PS. Shadow doesn't work in Opera.
Best Regards,
ventus