Forums

Cyanoxide

First off my friended suggested that I ask for some help on here so I want to apologise in advance incase I've posted in the wrong forum or anything like that.

Well let me get onto the point and see if you can help me. I've been making a portfolio website from scratch and now I'm stumped, I'm trying to line up some text boxes and images and I've tried a few ways and I can't seem to find a way to do it. I will post a photoshoped image so you can see how I'm trying to get it to look and I will also post a live feed and the css and html coding.

I would also appreciated it if you point out anything I should change to make the site more efficient but that's not as important so don't feel you have to do this.

Example:
http://i29.photobucket.com/albums/c265/seph-53/des.jpg

Live feed: http://cyanoxide.co.uk/Prototype/

Html:

<!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>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Cyanoxide's Portfolio</title>
<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" />
<script src=\"Scripts/swfobject_modified.js\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf(\"#\")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf(\"?\"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload=\"MM_preloadImages('Images/Buttons/HomeOver.png','Images/Buttons/WorkOver.png','Images/Buttons/MiscOver.png','Images/Buttons/AboutOver.png','Images/Buttons/ContactOver.png')\">
<div class=\"banner_repeat\"> 
<div class=\"container\"> 
<div class=\"banner\">
  <table width=\"100%\" border=\"0\">
    <tr>
      <td width=\"49%\" height=\"145\">&nbsp;</td>
      <td width=\"51%\"><p><a href=\"#\" onmouseout=\"MM_swapImgRestore()\" onmouseover=\"MM_swapImage('Home','','Images/Buttons/HomeOver.png',1)\"><img src=\"Images/Buttons/Home.png\" alt=\"Back to the start\" name=\"Home\" width=\"105\" height=\"55\" border=\"0\" id=\"Home\" /></a><a href=\"#\" onmouseout=\"MM_swapImgRestore()\" onmouseover=\"MM_swapImage('About','','Images/Buttons/AboutOver.png',1)\"><img src=\"Images/Buttons/About.png\" alt=\"Who I am\" name=\"About\" width=\"105\" height=\"55\" border=\"0\" id=\"About\" /></a><a href=\"#\" onmouseout=\"MM_swapImgRestore()\" onmouseover=\"MM_swapImage('Contact','','Images/Buttons/ContactOver.png',1)\"><img src=\"Images/Buttons/Contact.png\" alt=\"Where to find me\" name=\"Contact\" width=\"105\" height=\"55\" border=\"0\" id=\"Contact\" /></a><a href=\"#\" onmouseout=\"MM_swapImgRestore()\" onmouseover=\"MM_swapImage('Work','','Images/Buttons/WorkOver.png',1)\"><img src=\"Images/Buttons/Work.png\" alt=\"Latest Projects\" name=\"Work\" width=\"105\" height=\"55\" border=\"0\" id=\"Work\" /></a></p>
        <p><a href=\"#\" onmouseout=\"MM_swapImgRestore()\" onmouseover=\"MM_swapImage('Home','','Images/Buttons/HomeOver.png',1)\"><a href=\"#\" onmouseout=\"MM_swapImgRestore()\" onmouseover=\"MM_swapImage('Work','','Images/Buttons/WorkOver.png',1)\"></a></p></td>
      </tr>
  </table>
</div>
<a href=\"#\" onmouseout=\"MM_swapImgRestore()\" onmouseover=\"MM_swapImage('Misc','','Images/Buttons/MiscOver.png',1)\"></a></div>
</div>
<div class=\"FlashBg\"> 
<div class=\"FlashContainer\"> 
<div class=\"FlashBorder\">
  <table width=\"100%\" border=\"0\">
    <tr>
      <td height=\"226\"><object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"840\" height=\"208\" id=\"FlashID\" >
        <param name=\"movie\" value=\"Pageflashcs3.swf\" />
        <param name=\"quality\" value=\"high\" />
        <param name=\"wmode\" value=\"opaque\" />
        <param name=\"swfversion\" value=\"9.0.45.0\" />
        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
        <param name=\"expressinstall\" value=\"Scripts/expressInstall.swf\" />
        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
        <!--[if !IE]>-->
        <object type=\"application/x-shockwave-flash\" data=\"Pageflashcs3.swf\" width=\"840\" height=\"208\">
          <!--<![endif]-->
          <param name=\"quality\" value=\"high\" />
          <param name=\"wmode\" value=\"opaque\" />
          <param name=\"swfversion\" value=\"9.0.45.0\" />
          <param name=\"expressinstall\" value=\"Scripts/expressInstall.swf\" />
          <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
          <div>
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
            <p><a href=\"http://www.adobe.com/go/getflashplayer\"><img src=\"http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif\" alt=\"Get Adobe Flash player\" width=\"112\" height=\"33\" /></a></p>
          </div>
          <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object></td>
    </tr>
  </table>
</div>
</div>
</div>


<script type=\"text/javascript\">
<!--
swfobject.registerObject(\"FlashID\");
//-->
</script>
<div class=\"BodyContainer\">
<div class=\"BodyBg\"></div>
</div>
</div>
<div class=\"BodyFoot\">
</div>
</body>

</html>

@charset \"utf-8\";
/* CSS Document */
body{
	background-color:#5894ae;
	margin:0;
	padding:0;
	text-align:center;
}
.banner_repeat{
	width:100%;
	height:147px;
	background-image:url(Images/BannerBg.jpg);
	background-repeat:repeat-x;
}
.banner{
	width:856px;
	height:136px;
	background-image:url(Images/Banner.jpg);
}
.container{
	width:856px;
	padding-top:2px;
	margin-left: auto;
	margin-right: auto;
	text-align:left;
	align:center;
	font-family:Tahoma;
	font-size:11px;
	color:#fff;
}

.FlashContainer{
	
	width:1008px;
	margin-left: auto;
    margin-right: auto;
	padding-top:0px;
	text-align:center;
	align:center;
}
.FlashBorder{
	width:1008px;
	height:256px;
	background-image:url(Images/FlashBorder.jpg);
}
.FlashContainer{
	
	width:1008px;
	margin-left: auto;
    margin-right: auto;
	padding-top:0px;
	text-align:center;
	align:center;
}
.BodyBg{
	width:1008px;
	height:203px;
	background-image:url(Images/Base.jpg);
	margin-left: auto;
    margin-right: auto;
}
.BodyContainer{
	
	width:1008px;
	padding-top:0px;
	margin-left: auto;
    margin-right: auto;
	text-align:left;
	font-family:tahoma;
	font-size:11px;
	color:#666;
	line-height: 120%;
}
.heading{
	font-family:\"Century Gothic\";
	font-size:14px;
	color:#0e6e9e;
	font-style:normal;
}
.Read{
	align:Right;
}

apostrophe

Link doesn't work.

TheDoc

"apostrophe" said:
Link doesn't work.

Fixed.

Cyanoxide

No help so far and I've included everything it says to in the sticky.

apostrophe

What's the problem? the boxes on the page I'm looking at are the same as the boxes in your picture.

Also, this is a CSS forum, and I noticed you're using Tables for layout, what's the reason for this?

Cyanoxide

I have tried many different ways to make the web boxs including css, I was advised that it would be easier to do the boxes in css.

Brido

What browser are you looking at the problem in? Because it looks fine in the browsers I am using, which are firefox, safari, and chrome....

TheDoc

Cyanoxide, it looks like the only thing missing now is a little bit of padding on the text and pushing the Read More button down and to the right, is that correct? Or is there more to it that you're missing?

Cyanoxide

That's exactly what I'm having trouble with, I can't seem to shift the button into the right place without messing up the text, I've recently tried to make the button with css rather than dreamweave'rs html button option and I could get the button to line up using "margin-left" but when I tried to us "margin-top" to move it down it locked in place and wouldn't go down.

That's the css code I'm curently using:

.rollover a {
margin-left:240px;
margin-top:15px;
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url(\"Images/Read.jpg\") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover { 
background-position: 0 -35px;
color: #049;
background: url(\"Images/ReadDown.jpg\") 0 0 no-repeat;
}
.rollover a:active {
background-position: 0 -70px;
color:#fff;
}

AshtonSanders

They best way I've found for things to line up on the "bottom" is with CSS positioning.

Here's a good tutorial on how that works: http://www.barelyfitz.com/screencast/ht ... sitioning/

xhtmlit

Hi Cyanoxide

This is probably a little bit of topic but looking at your site, I think your main menu and other areas might use the outline rule;


a {outline:none;}

Makes it more cleaner then having the general outline of a link show up when clicked on. Hope that helps and just a thought. :ugeek:

Cyanoxide

I have fixed the problems now, the tutorial you gave me was most helpful AshtonSanders, it didn't solve the problem but it helped me find a way around it, also I have been looking for ages for a fix to the outline around my flash, I just assumed there was nothing I could do about it so thank you for that as well xhtmlit.

Feel free to lock this thread now.

AshtonSanders

Excellent. Glad it helped.

treehouse : what would you like to learn today?

Forums

[Solved] Problem with my Website, Appreciate Some Help