[Solved] Problem with my Website, Appreciate Some Help

[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:
[img]http://i29.photobucket.com/albums/c265/seph-53/des.jpg[/img]

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

Html:

Code:

Code:

@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" wrote:

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:

Code:

.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;

Code:

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.

[Author]

Posts