I’m mainly a backend coder that’s gets stuck on some CSS issues once in a while - that must seem simple to real front-end developers. Here is my latest …
I’ve got most of my site laid out in a dev environment. Take a look:
Now my issue is, I’m trying to add a small bit of text as a MEMBER LOGIN prompt - at the bottom right of the header that looks like so:
Now please note, THIS page is a mockup of the site design I received from marketing. It is laid out in tables and with fully inline everything. Terrible, abysmally poor markup. So I wasn’t using that as my model.
I’m really only working with the header view element anyway. But the version I have on my index page right now looks like this: http://dev.bhglaar.com
I’ve got the header view element html below. But basically, I created a div just for that Member Login text and I’m trying to position it relatively - which I’ve succeeded at doing, but for some reason, I’m still taking up the 30+px of space and throwing my scrolling marquee off. I know its a {position:?;} thing … but I’d really love not to tear my hair out over it.
The real challenge for me is connecting to a 3rd party db to prompt an active session for the user.
If someone could help me with this, I’d really appreciate it. Thx.
I would change a few things around to give it a little structure and semantics and also remove any divs that aren’t doing anything.
Your header is a logo with the site name so I would use an h1 for that and use an image replacement technique to get some text into the html.
Then I’d tidy up the multiple divs that you have around things that don’t really need to be there.
As a rule of thumb don’t use relative positioning because it will rarely do what you expect. It doesn’t move anything physically it just moves them visually. The space that they previously occupied is always preserved as though the element hadn’t been moved at all. That’s what it’s job is - it’s not used to move structural elements around as such although it can with care.
As Raplh said you can absolutely place that header link and just let the rest of the page take up the flow.
Don’t use empty elements to make space as there is a never a need for that. Paddin g or margins will always do that job without extra markup.
You also seem to have 2 page wrappers when only one is needed.
Much neater and more succinct and easier to manage.
The css for that section would look like this (exisiting styles for those elements could be removed as they are using rules that are not applicable to the element concerned anyway).