12 replies [Last post]
sandysandy
sandysandy's picture
Offline
newbie
medford, ma
Last seen: 10 years 40 weeks ago
medford, ma
Timezone: GMT-5
Joined: 2011-12-27
Posts: 6
Points: 7

It would seem so simple, and yet I am unable to figure this out.

I would like the email text field to sit with the rest of the menu elements, on the same line, but no matter what I do to the CSS, it seems to always wrap to the next line.

Here is the link:

http://www.sousaontherez.com/mock/index_26_email.html

Any help would be wildly appreciated.
Thank you.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 3 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2053
Points: 2285

Could you please validate

sandysandy
sandysandy's picture
Offline
newbie
medford, ma
Last seen: 10 years 40 weeks ago
medford, ma
Timezone: GMT-5
Joined: 2011-12-27
Posts: 6
Points: 7

Validated, but not quite valid?

Indeed, I'd like to be able to put the FORM within the li so that it acts like a menu item.

I have validated and corrected those errors that I can see in the code, but some I can't match to the validator findings.
I have uploaded the file again: http://www.sousaontherez.com/Mock_1/index_26_email.html

Thank you very much for your time.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 3 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2053
Points: 2285

sandysandy wrote: Indeed, I'd

sandysandy wrote:

Indeed, I'd like to be able to put the FORM within the li so that it acts like a menu item. ...

So, why don't you?

sandysandy
sandysandy's picture
Offline
newbie
medford, ma
Last seen: 10 years 40 weeks ago
medford, ma
Timezone: GMT-5
Joined: 2011-12-27
Posts: 6
Points: 7

Doesn't work without bumping

Doesn't work without bumping the text field into next line, and why I am querying you all.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 3 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2053
Points: 2285

Well, you've got to get your

Well, you've got to get your markup straight before the styling begins so here's what I want you to do. Get rid of the extraneous /SPAN and try the form in an LI.

I'm not sure, semantically, that the FORM belongs in the list as it's not an actual part of the list of links but let's just try it.

I really want to mention not using dreamweaver's style# silliness but that can come about next.

sandysandy
sandysandy's picture
Offline
newbie
medford, ma
Last seen: 10 years 40 weeks ago
medford, ma
Timezone: GMT-5
Joined: 2011-12-27
Posts: 6
Points: 7

Somewhat resolved but

The elements are all sitting on one line now, have made the li div elements, but now I cannot for the life of me get all of the contents WITHIN the navbar to center.

http://www.sousaontherez.com/Mock_1/index_26_email.html
Again, thank you.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 3 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2053
Points: 2285

There's really no need for

There's really no need for the #navbar DIV You could just give the #navbar to the UL instead and toss out the extra DIV.

Regardless, to center it try this.
Change this:

#navbar {
	width: 991px;
	padding-top: 10px;
	padding-bottom: 5px;
	background-color: #222222;
	height: 30px;
	float: none;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

to this:
#navbar {
	padding-top: 10px;
	padding-bottom: 5px;
	background-color: #222222;
	height: 30px;
	float: none;
	margin-left: auto;
	margin-right: auto;
	display: table;
}

sandysandy
sandysandy's picture
Offline
newbie
medford, ma
Last seen: 10 years 40 weeks ago
medford, ma
Timezone: GMT-5
Joined: 2011-12-27
Posts: 6
Points: 7

That's true, the div is not

That's true, the div is not necessary, but it helps as a visual aid, and without it I can't add any left-padding, which seems to be the only way to push things to center over the main container image. Your suggestion, display:table, sadly didn't change anything. All of this seems counter-intuitive, and not particularly pretty.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 3 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2053
Points: 2285

sandysandy wrote: That's

sandysandy wrote:

That's true, the div is not necessary, but it helps as a visual aid, and without it I can't add any left-padding, which seems to be the only way to push things to center over the main container image. Your suggestion, display:table, sadly didn't change anything. All of this seems counter-intuitive, and not particularly pretty.

You're pushing it and centering it. Changing it locally centers it here.

Which part seems counter intuitive to you?

Change #navbar to this exactly:

#navbar { 
display: table;
height: 30px;
margin: auto;
padding-bottom: 5px;
}

sandysandy
sandysandy's picture
Offline
newbie
medford, ma
Last seen: 10 years 40 weeks ago
medford, ma
Timezone: GMT-5
Joined: 2011-12-27
Posts: 6
Points: 7

So great, that works once

So great, that works once uploaded, but in my page editor it still all sits flush left. Why the discrepancy?

THANK YOU! THANK YOU!

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 3 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2053
Points: 2285

sandysandy wrote: So great,

sandysandy wrote:

So great, that works once uploaded, but in my page editor it still all sits flush left. Why the discrepancy?

Don't know. A page editor isn't a web browser, I suppose.

sandysandy wrote:

THANK YOU! THANK YOU!

You're welcome.

wattachai
wattachai's picture
Offline
newbie
Last seen: 10 years 40 weeks ago
Timezone: GMT+7
Joined: 2011-12-31
Posts: 1
Points: 1

Thank You For Information

Thank You For Information