5 replies [Last post]
TimBob12
TimBob12's picture
Offline
newbie
Last seen: 9 years 40 weeks ago
Joined: 2013-02-19
Posts: 3
Points: 4

Hi there,

I have been working on a small little custom CMS which works fine. I then tried to add a basic design to it and I suck at design but I came up with this - http://www.tim-thompson.comuf.com/. Apologies for the crappy host. If it doesn't load the first time just reload a few times.

The index.php and portfolio.php pages use the same stylesheet and structure apart from some DIV's that make up the portfolio section.

The problem I am having is that the portfolio.php page is slightly shifted to the left once there is more than 1 portfolio entry.

I can't work out why this is happening although I am fairly certain it is something to do with the divisions. My CSS is terrible but any help you could give would be much appreciated Smile

Thanks in advance Smile

index.php

<!DOCTYPE HTML>
 
<html>
 
	<head>
 
		<title>Tim Thompson | <?php print $result["title"]; ?> </title>
 
		<link rel="stylesheet" type="text/css" href="style.css">
 
	</head>
 
	<body>
 
		<div id = "header">
			<img src = "images/header.png" />
		</div>
 
		<div id = "menu">
			<table>
			<tr>
			<?php
				while($result2 = mysql_fetch_array($query2))
				{
					print "<td>";
					print "<a href = \"index.php?id=";
					print $result2["id"];
					print "\">";
					print $result2["title"];
					print "</a>";
					print "</td>";
				}
			?>
			<td><a href = "portfolio.php">Portfolio</a></td>
			</tr>
			</table>
		</div>
 
		<div id = "page">
 
			<div id = "title">
				<?php print $result["title"]; ?>
			</div>
 
			<div id = "content">
				<?php print $result["content"]; ?>
			</div>
 
		</div>
 
		<div id = "footer">
			Coded and Designed by Tim Thompson
			<br><a href = "http://www.000webhost.com">000 Web Host</a></br>
		</div>
 
	</body>
 
</html>

portfolio.php

<!DOCTYPE HTML>
 
<html>
 
	<head>
 
		<title>Tim Thompson | Portfolio</title>
 
		<link rel="stylesheet" type="text/css" href="style.css">
 
	</head>
 
	<body>
 
	<div id = "header">
			<img src = "images/header.png" />
		</div>
 
		<div id = "menu">
			<table>
			<tr>
			<?php
				while($result2 = mysql_fetch_array($query2))
				{
					print "<td>";
					print "<a href = \"index.php?id=";
					print $result2["id"];
					print "\">";
					print $result2["title"];
					print "</a>";
					print "</td>";
				}
			?>
			<td><a href = "portfolio.php">Portfolio</a></td>
			</tr>
			</table>
		</div>
 
		<div id = "page">
 
			<div id = "title">
				Portfolio
			</div>
 
			<div id = "content">
 
			<? 
				if(isset($_REQUEST["id"]))
				{
					print $result["title"];
					print "<p>";
					print "Language - ";
					print $result["language"];
					print "<p>";
					print "<img src = \"";
					print $result["image"];
					print "\" />";
					print "";
					print "<p>";
					print $result["content"];
				}
				else
				{
					$sql = "SELECT * FROM portfolio";
					$query = mysql_query($sql, $conn);
 
					while($row = mysql_fetch_assoc($query))
					{
						print "<p>";
						print "<div class = \"portfolio\">";
							print "<div class = \"p_image\">";
								print "<img src = \"";
								print $row["image"];
								print "\" width = 150 height = 100 />";
							print "</div>";
 
							print "<div class = \"p_title\">";
								print $row["title"];
							print "</div>";
 
							print "<div class = \"p_summary\">";
								print $row["summary"];
							print "</div>";
 
							print "<div class = \"p_links\">";
								print "<a href = \"portfolio.php?id=";
								print $row["id"];
								print "\">View</a>";
							print "</div>";
						print "</div>";
						print "</p>";
					}
				}
			?>
			</div>
		</div>
 
	<div id = "footer">
		Coded and Designed by Tim Thompson
		<br><a href = "http://www.000webhost.com">000 Web Host</a></br>
	</div>
 
	</body>
 
</html>

style.css

body {
background-image: url('images/bg.png');
font-family: "Trebuchet MS", arial;
}
 
#header{
margin-left: auto;
margin-right: auto;
width: 960px;
padding-bottom: 7px;
}
 
#menu{
background-image: url('images/menu.png');
margin-left: auto;
margin-right: auto;
width: 940px;
font-size: 150%;
padding-left: 20px;
}
 
a:link {
text-decoration:none;
color: #ffffff;
}
 
#content a:link {
text-decoration:none;
color: #9E9E9E;
}
 
a:visited {
text-decoration:none;
color: #ffffff;
}
 
#content a:visited {
text-decoration:none;
color: #9E9E9E;
}
 
a:hover {
text-decoration:none;
color: #000000;
}
 
#content a:hover {
text-decoration:none;
color: #1FAFBF;
}
 
a:active {
text-decoration:none;
}
 
#menu td{
padding: 0px 15px 2px 15px;
}
 
#page{
background-image: url('images/content.png');
margin-left: auto;
margin-right: auto;
width: 960px;
margin-top:10px;
}
 
#title{
padding-left: 36px;
padding-right: 40px;
padding-top: 15px;
font-size: 200%;
}
 
#content{
padding-left: 38px;
padding-right: 40px;
padding-bottom: 40px;
padding-top: 5px;
}
 
#footer{
text-align: center;
margin-top: 25px;
font-size: 80%;
}
 
.portfolio {
background-color:#f7f7f7;
position: relative;
top: 5px;
right: 5px;
border: 2px solid;
border-radius: 15px;
padding-top: 15px;
padding-left: 15px;
padding-bottom: 15px;
padding-right: 15px;
height: 100px;
}
 
.portfolio:nth-child(odd){
background-color:#ffffff;
}
 
.p_title{
text-decoration: underline;
font-size: 125%;
position: relative;
top: -105px;
right: -170px;
}
 
.p_summary{
position: relative;
top: -105px;
right: -170px;
margin-right: 25%;
}
 
.p_links{
position: relative;
top: -120px;
right: -170px;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Delete the position, top, and

Delete the position, top, and right properties from .portfolio. Delete the empty p elements. If you want separation, use margins, e.g.

.portfolio {
  margin: 20px 0;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Zbee
Zbee's picture
Offline
Regular
Colorado Springs, CO, USA
Last seen: 9 years 38 weeks ago
Colorado Springs, CO, USA
Timezone: GMT-6
Joined: 2013-02-20
Posts: 11
Points: 11

Off-topic

I think Gary solved your problem, so I didn't think too much about it, but if you're still having trouble, just reply.

But, on another subject, may I suggest

#content img { max-width: 95%; }

That will keep your images from overflowing.

Nice design, by the way.

/* Zbee */

www.zbee.me

TimBob12
TimBob12's picture
Offline
newbie
Last seen: 9 years 40 weeks ago
Joined: 2013-02-19
Posts: 3
Points: 4

Fantastic Thanks a lot!

Fantastic Smile Thanks a lot!

EDIT: And thank you Zbee as well Smile

TimBob12
TimBob12's picture
Offline
newbie
Last seen: 9 years 40 weeks ago
Joined: 2013-02-19
Posts: 3
Points: 4

So after some testing it

So after some testing it seems that this fixed the problem for having two items on the portfolio list. However a third seems to recreate the problem.

It's probably something really stupid that I am missing :/

I'll post my updated style.css and the section of portfolio.php

Thanks again

body {
background-image: url('images/bg.png');
font-family: "Trebuchet MS", arial;
}
 
#header{
margin-left: auto;
margin-right: auto;
width: 960px;
padding-bottom: 7px;
}
 
#menu{
background-image: url('images/menu.png');
margin-left: auto;
margin-right: auto;
width: 940px;
font-size: 150%;
padding-left: 20px;
}
 
a:link {
text-decoration:none;
color: #ffffff;
}
 
#content a:link {
text-decoration:none;
color: #9E9E9E;
}
 
a:visited {
text-decoration:none;
color: #ffffff;
}
 
#content a:visited {
text-decoration:none;
color: #9E9E9E;
}
 
a:hover {
text-decoration:none;
color: #000000;
}
 
#content a:hover {
text-decoration:none;
color: #1FAFBF;
}
 
a:active {
text-decoration:none;
}
 
#menu td{
padding: 0px 15px 2px 15px;
}
 
#page{
background-image: url('images/content.png');
margin-left: auto;
margin-right: auto;
width: 960px;
margin-top:10px;
}
 
#title{
padding-left: 36px;
padding-right: 40px;
padding-top: 15px;
font-size: 200%;
}
 
#content{
padding-left: 38px;
padding-right: 40px;
padding-bottom: 40px;
padding-top: 5px;
}
 
#content img{ 
max-width: 95%; 
}
 
#footer{
text-align: center;
margin-top: 25px;
font-size: 80%;
}
 
.portfolio {
background-color:#f7f7f7;
border: 2px solid;
border-radius: 15px;
height: 120px;
margin: 20px 0px;
}
 
.p_image{
margin: 10px 10px;
max-width: 95%; 
}
 
.portfolio:nth-child(odd){
background-color:#ffffff;
}
 
.p_title{
text-decoration: underline;
font-size: 125%;
position: relative;
top: -105px;
right: -170px;
max-width: 95%; 
}
 
.p_summary{
position: relative;
top: -105px;
right: -170px;
margin-right: 25%;
}
 
.p_links{
position: relative;
top: -120px;
right: -170px;
}

portfolio.php

else
				{
					$sql = "SELECT * FROM portfolio";
					$query = mysql_query($sql, $conn);
 
					while($row = mysql_fetch_assoc($query))
					{
						print "<div class = \"portfolio\">";
							print "<div class = \"p_image\">";
								print "<img src = \"";
								print $row["image"];
								print "\" width = 150 height = 100 />";
							print "</div>";
 
							print "<div class = \"p_title\">";
								print $row["title"];
							print "</div>";
 
							print "<div class = \"p_summary\">";
								print $row["summary"];
							print "</div>";
 
							print "<div class = \"p_links\">";
								print "<a href = \"portfolio.php?id=";
								print $row["id"];
								print "\">View</a>";
							print "</div>";
						print "</div>";
					}
				}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 39 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Test page?

Let's see the page in action. Link to the updated version?

Youmust rid yourself of all instances of position, top, left, right, and bottom. There are gotchas that cascade with each iteration. It is critical that you understand the Visual formatting model; especially, in this case, the position property.

Also, the php source is not much help, as we don't have your environment to process the instruction set. Think of it as handing us a roll of exposed film. The pictures are in there in latent form. The trouble is, we don't have a darkroom.

Open the page in your browser, and view source. That's what we need to see.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.