/    Sign up×
Community /Pin to ProfileBookmark

CSS align

Copy linkTweet thisAlerts:
Feb 02.2007

[URL]http://www.matthewdesmond.com/twocolumn.html[/URL]

within the header i have 2 searchbars..is there any way to align them all to the middle so the button isnt up a space?

sorry, and my UL arent lining the way they should be… help please!

to post a comment
CSS

17 Comments(s) ↴

Copy linkTweet thisAlerts:
@RezonFeb 02.2007 — There is a way... and it's a little bizarre.

In your style sheet, set the button to vertical-align: bottom;
Copy linkTweet thisAlerts:
@absolutmgd13authorFeb 02.2007 — i dont have a button anywhere in my stylesheet.. the search field are in a form.
Copy linkTweet thisAlerts:
@esaiwebteamFeb 02.2007 — the simplest way to handle this might be using list

<ul id="searchboxes">

<li>first text box</li>

<li>second text box</li>

<li>button</li>

</ul>

#searchboxes li {

list-style-type: none;

display: inline;

}

that will do the trick.
Copy linkTweet thisAlerts:
@CentauriFeb 03.2007 — i dont have a button anywhere in my stylesheet.. the search field are in a form.[/QUOTE]

The button is an input element, so to implement Rezon's suggestion, try adding [CODE]#search input {
vertical-align:bottom;
}[/CODE]
to your stylesheet.

Cheers

Graeme
Copy linkTweet thisAlerts:
@absolutmgd13authorFeb 03.2007 — i would but they have to be side by side by request..
Copy linkTweet thisAlerts:
@CentauriFeb 03.2007 — i would but they have to be side by side by request..[/QUOTE]

??????
Copy linkTweet thisAlerts:
@absolutmgd13authorFeb 03.2007 — if i do a list theyll be on top of eachother...
Copy linkTweet thisAlerts:
@CentauriFeb 03.2007 — Forget the list - have you tried the css I posted?
Copy linkTweet thisAlerts:
@absolutmgd13authorFeb 03.2007 — yea..didnt work out too well...but i have an idea im trying now..
Copy linkTweet thisAlerts:
@absolutmgd13authorFeb 03.2007 — err... cant get this to line up!
Copy linkTweet thisAlerts:
@CentauriFeb 03.2007 — yea..didnt work out too well...but i have an idea im trying now..[/QUOTE]

What happened? if I put the following css into your css file, the button lines up [CODE]#search input {
vertical-align:bottom;
}[/CODE]
Copy linkTweet thisAlerts:
@absolutmgd13authorFeb 03.2007 — idk..its not doing anything for me... did you change anything else?
Copy linkTweet thisAlerts:
@CentauriFeb 03.2007 — I looked at the link - additional css is not there....
Copy linkTweet thisAlerts:
@absolutmgd13authorFeb 03.2007 — show me what you did..
Copy linkTweet thisAlerts:
@CentauriFeb 03.2007 — In [I]that[/I] link, there is no #search element like there is in the first example. In this last example, change the css to :[CODE][COLOR="Red"]#searchboxes[/COLOR] input {
vertical-align:bottom;
}
#searchboxes li {
list-style-type: none;
display: inline;
}[/CODE]

:rolleyes:
Copy linkTweet thisAlerts:
@absolutmgd13authorFeb 03.2007 — haha..thanks i got it..im a css newbie..
×

Success!

Help @absolutmgd13 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...