CODEWITHSUNDEEP
htmlcss
Boris Callens
Boris Callens

Reputation: 93327

How can I put a break between two elements contained by a span using css?

I have the following HTML:

<form action="http://localhost:2689/" method="post">
    <span>
        <label for="SearchBag.PowerSearchKeys" id="Label1"> Key words</label>
        <input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />             
        <button id="powerSearchSubmitButton"  class="fancySubmitButton" type="submit"><span><em>Search</em></span></button>
        <a href="Search.mvc/EmptyAdvancedSearch" id="advancedSearchLinkButton"  class="fancyLinkButton"><span><em>Advanced</em></span></a>
    </span>        
</form>

The form's content needs to be centered over it's width (100% in this case).
The anchor needs to be directly under the button.

Because a picture can say a thousand words, here's the result of my awesome paint art skills:

alt text
(source: telenet.be)

And this whole block should be centered on the webpage.

--EDIT--
Because the content of all the controlls can varry greatly in length, I cannot give any element any width specifications (not even in %). Also, over estimating the width would leave confusing white spaces between elements. This too is not a desired effect.

Upvotes: 0

Views: 1514

Answers (6)

svanelten
svanelten

Reputation: 483

As much as i hate to say it, this is a case where use of tables might be considered. But I would try positioning - i made a quick & dirty solution here at JSbin

Basically you put your form into an element, center it with text-align and make the container position: relative. Then you use the id in the link to position it absolutely in reference to the parent. But it only works if the parent is an inline element.

Upvotes: 0

nickf
nickf

Reputation: 546035

Unless you change its display property (and you shouldn't), the span element should be an inline element, meaning that it exists in the flow of text. Putting block level elements inside an inline element isn't really a good idea.

You also have a lot of extraneous tags in there. Instead of this:

<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
    <span><em>Search</em></span>
</button>

why not just do this:

<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
    Search
</button>

The span does nothing, and the em can be emulated through CSS:

.fancySubmitButton { font-style: italic }`

Here's what I'd do:

<form>
    <label for="SearchBag.PowerSearchKeys" id="Label1">Key words</label>
    <input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />             
    <button id="powerSearchSubmitButton"  class="fancySubmitButton" type="submit">Search</button>
    <a href="Search.mvc/EmptyAdvancedSearch" id="advancedSearchLinkButton"  class="fancyLinkButton">Advanced</a>
</form>

with the CSS: 

form {
    text-align: center;
}
.fancySubmitButton, .fancyLinkButton {
    font-style: italic;
}
.fancyLinkButton {
    display: block;  /* this will put it on its own line */
}

Quick response to the comments: giving something the class "fancyLinkButton" doesn't imply that it has rounded corners. Anyway, if you want to put rounded corners on certain elements, I would still avoid using extraneous markup. If more wrapper elements are needed for whatever implementation you're using, then those should be added via Javascript. Remember that mozilla and webkit already support CSS rounded corners - eventually IE will too, and you'll be able to easily change your single javascript function, rather than wading through HTML to find everywhere where there are unneeded spans.

Upvotes: -1

cjk
cjk

Reputation: 46425

Why not just put a break in before the tag (
) then align the to the right?

Upvotes: 2

Jeremy DeGroot
Jeremy DeGroot

Reputation: 4506

I'd replace the <span> with a <fieldset> for semantic correctness (I don't think span brings a lot to the table in terms of functionality), and apply some styling to that fieldset to the tune of

fieldset {
    text-align: center;
    width: 100%;
    position: relative;
}

I can't tell for sure if that'll line up the anchor and the button correctly or not, but since the fieldset has position: relative set, you'll be able to position stuff if you need to with relative ease.

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532455

Try setting 'display: block' on each element that you want on a separate line. You may also need to play with the margin and padding to get them centered (like margin-left: 50%; padding-left: -[1/2 width of element]) and text-align: center.

Upvotes: 2

Erik
Erik

Reputation: 714

I usually float form elements (left), and if I want to put the next one on a new line i use clear:left.

Upvotes: 0

Related Questions