3 replies [Last post]
logancl
logancl's picture
Offline
newbie
Last seen: 9 years 10 weeks ago
Timezone: GMT-7
Joined: 2013-03-19
Posts: 2
Points: 3

theoldfashioned.squarespace.com

Just setting up a "Coming Soon" splash page with SquareSpace, and running in to a slight issue. I know it's due to my complete lack of knowledge in CSS, so hopefully you guys can help.

I'm trying to have the submit button, submit field, and the text right above it, to all be horizontally aligned. Basically to have it be dead center of the page and lining up with the logo above it.

Currently each object seems to be off just a bit.

Not sure if this helps, but here's the current CSS I've added:

form input[type=submit] {
background : url("http://i3.photobucket.com/albums/y96/LoganCl/Submit-Button-1.png") no-repeat center center !important;
display: block;
margin-left: auto;
margin-right: auto;
width : 100px;
height : 50px;
border : none;
color : transparent;
text-indent: -9999px;
background-size: 100%;
}

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

Fixed?

It appears centered to me. Did you fix it? If not, be more specific about how it's "off", and are there different results depending on the browser?

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.

logancl
logancl's picture
Offline
newbie
Last seen: 9 years 10 weeks ago
Timezone: GMT-7
Joined: 2013-03-19
Posts: 2
Points: 3

Thanks so much for the quick

Thanks so much for the quick response Gary. While for the most part it is centered, if you look closely you'll notice each item is off. The easiest to notice is the submit button at the bottom. If you mentally draw a line straight down the middle of the diamond, and go down, you'll notice the submit button is pushed a tad to the left.

I'm assuming it has to do with the way squarespace treats that as a object in the footer. I was able to move it some, I'm just wondering what I need to put in CSS to tell it too follow the center of the site, not of the footer box it is in.

Hope this helps, sorry I'm quite the amateur!

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

Blech!

I haven't convinced myself that anyone could fix that steaming pile of markup and css. I did find this:

.sqs-layout > .sqs-row {
  margin-left: -25px;
  margin-right: -25px;
  }

If you delete the margin-left, it seems to center. The thing is, this is a totally trivial page*. You have a heading and a form. These are simply centered, except. Except that someone has sold you a bill of goods. There is nothing sane about the markup. Is that Yahoo!'s crap?

Well, try the change I suggested.

cheers,

gary

* Well, you do need back-end stuff to handle the form's action and to generate the email, but in a sane world none of that will have jack to do with the front-end markup. Likewise, javascript can be used to pre-validate form input, but it does not belong in the html.

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