Sat, 2008-02-16 14:13
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
Sat, 2008-02-16 23:04
#1
So what's different about
So what's different about the free template you've linked to?
Sat, 2008-02-16 23:10
#2
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.
Sat, 2008-02-16 23:16
#3
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.
Sat, 2008-02-16 23:46
#4
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?
Sun, 2008-02-17 02:18
#5
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.
Sun, 2008-02-17 03:51
#6
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?
Sun, 2008-02-17 06:02
#7
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.
Sun, 2008-02-17 12:00
#8
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.