8 replies [Last post]
benbenben6
benbenben6's picture
Offline
newbie
Last seen: 3 years 6 weeks ago
Timezone: GMT-7
Joined: 2008-02-16
Posts: 5
Points: 0

Hi there,

I suppose this is really more of a layout question, but I'm very new at CSS so I thought this would be a good place to start. Ok, what I'd like to know, is how to have the search bar work like the one on CSS Creator, when applied to this template: http://www.freecsstemplates.org/preview/differential

HTML:

CSS:

/* Header */

#header {
width: 904px;
height: 100px;
margin: 0 auto;
padding: 0 0 0 0;
background-repeat: no-repeat;
}

/* Menu */

#menu {
float: left;
}

#menu ul {
margin: 0;
padding: 53px 0 0 0;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
height: 25px;
padding: 10px 15px 0 15px;
text-transform: lowercase;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}

#menu a:hover {
background: #0C7AC7 url(images/img2.gif) repeat-x;
}

/* Search */

#search {
float: right;
padding: 63px 0 0 0;
}

#textfield1 {
width: 175px;
background: #FFFFFF;
border: none;
}

#submit1 {
height: 19px;
background: #6F9303;
border: none;
text-transform: lowercase;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}

That is, if the site widthwise is smaller than the content, it is placed near the far right (so that its always visible on screen, probably 15px padding or so), but if the page width exceeds the content size, the search bar no longer follows.

If that question isn't specific enough, the area that I can't seem to figure out is how to stop it from going past a certain point. At least not if the content floating right.

Any help would be much appreciated,
Thanks,

-Benjamin Romvari

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

So what's different about

So what's different about the free template you've linked to?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

benbenben6
benbenben6's picture
Offline
newbie
Last seen: 3 years 6 weeks ago
Timezone: GMT-7
Joined: 2008-02-16
Posts: 5
Points: 0

Difference

Well, on the free template the search bar does not conform to the view window (the one with the little green search button. It remains static on the page. What I would like is the follow the size of the view window, but only until it reaches the edge of the content.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Put it in an element with a

Put it in an element with a width of 100% of the window and the rest goes in an element with a width smaller than that.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

benbenben6
benbenben6's picture
Offline
newbie
Last seen: 3 years 6 weeks ago
Timezone: GMT-7
Joined: 2008-02-16
Posts: 5
Points: 0

Still a little stuck

Hmm, ok. Do you mean like this?

#form1 { top: 1px; width: 100%; }

#header {
width: 904px;
height: 100px;
margin: 0 auto;
padding: 0 0 0 0;
background-repeat: no-repeat;
}

Right now its still within the header div, one line below usual, but its still seems to be static. Should I change the position of this element to be absolute?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I don't actually think

I don't actually think having the search form floating around wider than the rest of the header is a good idea, but anyway: #header will need to be 100% wide and any bits that aren't s'posed to be full width you'll need to put in a wrapper and give it a smaller width, except of course the form.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

benbenben6
benbenben6's picture
Offline
newbie
Last seen: 3 years 6 weeks ago
Timezone: GMT-7
Joined: 2008-02-16
Posts: 5
Points: 0

Hmm, I'm not sure I want the

Hmm, I'm not sure I want the search form doing that either. In fact, what I would like it to do is to move around exactly like the little white icon on your site that says "Skip to content"(http://www.tyssendesign.com.au/articles/css/htmlcss-newbie-faqs/)

Also, I checked the CSS reference, but did not find anything about wrappers. Where is the best place to learn about them?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Well that's inside the main

Well that's inside the main container which has a width of 98% and a max-width of 74em. I don't think you'll find any references on wrappers themselves because they can be so variable.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

benbenben6
benbenben6's picture
Offline
newbie
Last seen: 3 years 6 weeks ago
Timezone: GMT-7
Joined: 2008-02-16
Posts: 5
Points: 0

ah.. thank you! I had done

ah.. thank you! I had done it that a while back and it hadn't worked, but now I know why.. I was publishing it to IE 6.. I fixed that, and now it works perfectly. Apparently IE 6 isn't capable of using the max-width method in publishing mode.