Re: [css-d] Search Form Box Over Graphic
Lidia-Anain Bjorkquist wrote:
But I am still having trouble figuring out how to correctly place a
search box to line up just right with the graphic. I would also like
to use another graphic as the go button but cannot seem to do that
right either.
www.zenlovejoy.net
You can use absolute positioning for such a size-limited element, and it
will turn out fine in most cases and most browsers. However, you must
make it position relate to the page - not to the screen.
Adding this...
#bigbox {
position: relative; /* that's your page */
}
.searchbox {
left: auto; /* or simply delete existing 'left' */
right: 6px;
top: 50px;
}
...will stabilize the position.
---
Looks like you're mixing XHTML 1.0 syntax into a HTML 4.01 document.
img usemap=#logomap /
...should be written as...
img usemap=#logomap
...in 4.01.
Correcting such things will eliminate most validation-errors.
---
Suggestions:
Adding...
#content p {padding: 0 3px;}
span.window {margin: 0 3px 3px 0;}
...may line up paragraphs a little better IMO.
The 'span.window' styles can probably be moved onto the image, and the
span be removed.
Also: you're using a lot of span as inline-wrappers. Looks like
valid use, but it is probably not necessary to use such
inline-wrappers in most cases.
Try using headlines: h1 - h5 where appropriate.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Search Form Box Over Graphic
Hello, everyone. I am very new to web design (just started learning HTML in August and CSS this September). I have been reading and absorbing a lot both online and offline. But I cannot seem to find the answer to this question I have now anywhere. I am taking a friend's site out of tables (hooray) and the design was giving me some troubles in both FF and IE when I applied her e-commerce cart scripts but I got those fixed. If you all have suggestions on the layout I welcome it. But I am still having trouble figuring out how to correctly place a search box to line up just right with the graphic. I would also like to use another graphic as the go button but cannot seem to do that right either. Lofty goals I know for a beginner but hanging around with you pros will get me there in no time. My main concerns are that people with 800 x 600 resolution are having to scroll a lot and the box and the go button are not showing up where they should be. On bigger screens they seem to be in the right spot. Please advise me on anything that I coded wrong. Here are the links you will need to see my woes: www.zenlovejoy.net (the page that will eventually go on her site) www.zenlovejoy.net/abbaby.css (of course the css) Thanks again for your help. I find the community of designers that use web standards to be a very warm and welcoming group - Thank You! Lidia-Anain Bjorkquist www.zenlovejoy.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Search Form Box Over Graphic
snip
.searchbox {
left: 802px;
position: absolute;
color: #00;
font-size: 11px;
top: 65px;
margin: 0px;
padding: 0px;
z-index: 413;
width: 87px;
vertical-align: middle;
font-family: Verdana, Arial, Helvetica, sans-serif;
}/snip
You're positioning the searchbox absolutely.
I remember one particular person on this list trying to hammer into my thick
skull to steer clear from absolutely positioning items as much as possible.
It took me awhile to get it, but he was right.
You positioning your searchbox absolutely at 802px is why people with
800x600 screen resolution don't see it. It's positioned outside their
viewport.
Try floating it right, maybe in its own div, within the #bigbox.
HTH
Arno
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
