SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Divs for style, is there another way?

    Hello there,

    I've just been working on a website, and I have been particularly concerned with SEO and web standards. (To the best of my knowledge, and I don't know everything ) Anyways I've just finished writing this piece of code for a search box:

    Code:
    <div id="search-box">
    	<div id="search-box-top"></div>
    		<form action="#">
    			<fieldset>
    				<input type="text" />
    				<input type="submit" id="search-button" />
    			</fieldset>
    		</form>
    	<div id="search-box-bottom"></div>
    </div>
    The highlighted pieces of XHTML are replacements for an image, which I would like to be done with CSS so CSS degrading or turned off won't have any piece of the website design mixed in with the content.

    Is there a better way to do this? Something simpler or more semantically correct?

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you considered applying background images to #search-box, form, and fieldset?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Everything pretty much has an image applied to it with CSS except the form. But I would still need either the top <div id="search-box-top"></div> or the bottom for this particular situation to work.

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Have you considered applying background images to #search-box, form, and fieldset?
    That's my take on it too... There's at LEAST two too many DIV's in there.

    I'd probably keep the outer one for the top background, but I'd put the bottom one on the form itself - then you just put the center image (assuming there is one) on the fieldset.

  5. #5
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Every element with an id has image applied to it. It's a rather graphical search box. I would show the sample, but need to respect my clients privacy.

    Even with styling the form I would still have an div or image or something What I'm asking for help is there something better than using a div for that style rather than styling all the elements.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But neither the form nor fieldset have an ID. So does one of them already have a background image?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh yes, sorry. I have given that fieldset a background image. Not for the form, but even giving the form the top graphic or the bottom graphic still leaves me with one top or bottom graphic div.

    I think with CSS2 you can have more than one background. Can anyone shed some light on that for me? Thanks

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by design-a-lie View Post
    I think with CSS2 you can have more than one background. Can anyone shed some light on that for me? Thanks
    No, you cannot. With CSS3, however, it looks like you can have multiple background images for a single element.
    Birnam wood is come to Dunsinane

  9. #9
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <form class="search" action="">
     <p><input name="q"> <input type="submit" value="Search"></p>
    </form>
    Code:
    .search { background:url(search-background.png); }
     .search::before { content:url(search-top.png); display:block; }
     .search::after { content:url(search-bottom.png); display:block; }
    Simon Pieters


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •