...

View Full Version : Alignment Issue



JJackson
11-06-2010, 06:12 AM
I'm having an issue with the alignment of my site. Have a look: http://freelancejohn.com/freelancejohn/. The header and portfolio wraps both have the same width (960px), but they aren't aligning (if you look at the sides, you'll see what I'm talking about).

Any idea why this is happening?

Chris Hick
11-06-2010, 06:23 AM
That would be your content, buddy. It doesn't fill your entire 960px.

JJackson
11-06-2010, 06:44 AM
Any idea what I can do to fix it?

Chris Hick
11-06-2010, 07:57 AM
I'm sure you can add some more margin space between your sample pics. ^_^

JJackson
11-06-2010, 12:48 PM
I don't understand why it has the exact spacing as it did in Photoshop between each image and doesn't turn out right. :confused:

abduraooft
11-06-2010, 03:39 PM
#portfolio h1 {
color:#545454;
/*float:left;*/
font-family:Arial;
font-size:20px;
font-weight:bold;
margin-top:13px;
}
#recent-work-1{
...........
float:left;
/*margin-right:20px;*/
..........
}
#recent-work-2{
............
float:right;
..........
}
#recent-work-3{
..........
/*float:left;*/
margin:13px auto 0 auto;
}

JJackson
11-08-2010, 05:02 AM
#portfolio h1 {
color:#545454;
/*float:left;*/
font-family:Arial;
font-size:20px;
font-weight:bold;
margin-top:13px;
}
#recent-work-1{
...........
float:left;
/*margin-right:20px;*/
..........
}
#recent-work-2{
............
float:right;
..........
}
#recent-work-3{
..........
/*float:left;*/
margin:13px auto 0 auto;
}


Thanks! That fixed the alignment issue. But it created another problem (http://freelancejohn.com/freelancejohn/). Now there's a space between the top background and the middle background.

abduraooft
11-08-2010, 06:34 AM
I don't see any such gap in FF3.6. Which is your browser?

JJackson
11-08-2010, 09:08 PM
I don't see any such gap in FF3.6. Which is your browser?

I'm running the latest stable release of Firefox. Here's a screenshot of the gap... http://screencast.com/t/Ha8u1HaHoyS

teedoff
11-08-2010, 09:15 PM
I see the gap. When I disable your background image....the grey image called banbg.png you can see it disappear. You should download and use firebug for firefox....its a great tool that will really help debug such issues.

JJackson
11-08-2010, 09:22 PM
I see the gap. When I disable your background image....the grey image called banbg.png you can see it disappear. You should download and use firebug for firefox....its a great tool that will really help debug such issues.

Of course it will disappear if you remove the background image... but how does that help me?

teedoff
11-08-2010, 09:25 PM
Of course it will disappear if you remove the background image... but how does that help me?

It gives you part of the equation that says something is going on between the image and your header...lol...I havent figure out yet what it is, but it should give you something to work with as well.

Hey just noticed you're in NC too!....cool

teedoff
11-08-2010, 09:33 PM
Its coming from your <h1> tag...you have a top margin of 13px set. Remove that and you will see.

I love firebug! lol...As I said, if you download it, you could have found this issue in a matter of minutes. Good luck!

JJackson
11-08-2010, 09:35 PM
Its coming from your <h1> tag...you have a top margin of 13px set. Remove that and you will see.

I love firebug! lol...As I said, if you download it, you could have found this issue in a matter of minutes. Good luck!

Yup, I'm from NC. :)

And thanks for helping. I should have added padding instead of margin. :)

JJackson
11-09-2010, 09:20 PM
Does anyone know why my contact box (located at the bottom of the page) does not line up properly? It's supposed to look like this: http://screencast.com/t/DGGvwnlAUq -- and here's how it looks now: http://freelancejohn.com/freelancejohn.

aaronE
11-10-2010, 12:19 AM
Yep...its your padding...you have a textarea.message with padding:10px 10px 0 and a height of 202px which makes the total height of 212px. You need the height to really be 140px with padding of 10px on the top. Also your padding is messing with your width.

Good luck.

A

teedoff
11-10-2010, 12:48 AM
Hey another Carolinian! Welcome!

aaronE
11-10-2010, 01:13 AM
Hey thanks Teedoff...awesome name by the way!...I see you're a database admin...check out my C-tech sinks (http://zigsbyskitchen.com/c-tech-kitchen-sinks.html) site if you get a chance...I don't have tons of experience with databases...but you can see a little in action.

Sorry to highjack the thread...hopefully JJackson can figure it out with the css info previously posted.

~ A

teedoff
11-10-2010, 01:21 AM
Hey thanks Teedoff...awesome name by the way!...I see you're a database admin...check out my C-tech sinks (http://zigsbyskitchen.com/c-tech-kitchen-sinks.html) site if you get a chance...I don't have tons of experience with databases...but you can see a little in action.

Sorry to highjack the thread...hopefully JJackson can figure it out with the css info previously posted.

~ A

Nice site! What server-side script are you using? php I would assume? I've so far been more into Coldfusion, but learning php as well.

Well the database stuff has been out of neccessity for a site I've been employed to design.

aaronE
11-10-2010, 01:27 AM
Yep...php it is...it's actually a magento platform I edited heavily. Yea, I generally stick with MySQL and PHP, occasionally getting into asp but I have never ventured into the cold fusion arena...honestly I have always been hesitant to learn it because I have heard it is very different.

JJackson
11-10-2010, 01:27 AM
Tried that. The width edit fixed it a little bit, but it's still not looking like the image.

aaronE
11-10-2010, 02:06 AM
JJackson...ok...make sure your .budget to float:left and your .submit is {float:left; clear:left;}. That was to take care of your button...right now it is trying to clear both which will not work as you have it placed in your image. Then adjust your height of .message to 140px with a 10px top margin.

That should do it.

~A

JJackson
11-10-2010, 04:31 AM
JJackson...ok...make sure your .budget to float:left and your .submit is {float:left; clear:left;}. That was to take care of your button...right now it is trying to clear both which will not work as you have it placed in your image. Then adjust your height of .message to 140px with a 10px top margin.

That should do it.

~A

That changed it a little bit, but it didn't do it. :P

abduraooft
11-10-2010, 07:44 AM
Change your markup to
<form action="#" method="post">
<div>
<textarea class="message" onblur="this.value=!this.value?'Do you have any comments?':this.value;" onfocus="this.select()" onclick="this.value='';" cols="auto" rows="4">Do you have any comments?</textarea>
<input type="text" value="What is your name?" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'What is your name?':this.value;" class="name"><input type="text" value="Please enter your email address." onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Please enter your email address':this.value;" class="email">
<input type="text" value="What is your budget?" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'What is your budget?':this.value;" class="budget">


<input type="submit" class="submit">
</div>
</form>
and then set float:right; to textarea.message instead of float:left;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum