Hi people. New here and new to CSS so please be gentle.
A picture says a thousand words, so please go to http://truvotes.net to see my problem. The CSS is in the content area of the site, and you can view the HTML via the source.
Simple problem really but I cannot get my head around it. You will see the whitespace between the banner and navbar. The certificate link on the banner is what’s causing the problem.
All I need is the navbar to sit directly under the banner pixel perfect like the content area does to the navbar. Have mucked about on jsfiddle to no avail, and any help will be appreciated…
p.s The site is in its infancy, so I don’t need comments on its design thanks
Hi. I simply made the banner a background image, and was then able to position the link image by position: relative. With a few adjustments everything slotted into place automatically.
Thanks for your reply though. No doubt I’ll need help later
{position:relative} on #banner is appropriate as it creates a context for positioning the certification thingy.
{position:relative} on the cert image should be changed to {position:absolute} even now. With that change, it would have worked with the banner in the foreground. The other relatively positioned elements were compounding the problems on the page.
{position:relative} is most commonly used to create the context for elements inside it that are {position:absolute}. While one can use {position:relative} to move an object (as you did), the “catch” is that {position:relative} does not “release” the space that was originally occupied by that element, whereas {position:absolute} removes the object from the normal flow of the page and thus frees the original space.
{position:relative} is a good property, but easily misunderstood. The CSS Reference does a better job of explaining the nuances of {position:relative} .
I am under the impression that position: absolute takes its position from the browser window. As such, with cross browser incompatibility, I don’t like to use position: absolute unless absolutely necessary. It was just my lack of CSS knowledge that caused the problem.
When clicked, the certification uses position: absolute for the popup, and in that context I feel it is used in its correct context.
You’re confusing {position:absolute} with {position:fixed}.
{position:fixed} is positioned relative to the first containing block which is usually the viewport (browser window).
{position:absolute} takes its initial position as its containing block.
{position:relative} creates the containing block for {position:absolute} other than the browser window.
FYI, shorten the height of your browser window a lot. You will find that the top and bottom of the certificate are obscured. One cannot view the cert with the aid of the vertical scrollbar.
Out of curiosity, why is #banner assigned {position:relative} ? What purpose does it serve? (That’s a rhetorical question… no need to answer. )
Yes, you’re correct about fixed and absolute, my mistake ( shows my infancy in CSS). And I guess the pos: rel in #banner was a legacy of me trying to find a solution to my original question. It served no purpose, and I’ve removed it now.
There are probably many other mistakes in there too, and I will correct them as I progress with the site. So much to learn, and this is only the beginning…(sheesh). At least i’ve made a start.
Thanks for your help…
Would you mind sharing a little more info with me? Your code shows this to be a fixed width page, 1000px. Do you intend for this to remain a fixed width page or do you have fluid or responsive aspirations in the wings? I am asking because, if you are sticking with a fixed with, I will put together a simple demo using the layout strategy that I was talking about with an appropriate arrangement of {position:absolute} and {position:relative} properties. It won’t be a complicated demo, just enough to demonstrate the strategy and give you something you can use to find a “cross-browser conflict” (which I don’t believe you will find ). Are you interested?
To be honest, I would prefer to use %ages. I think this is the way to go as things move forward. In saying that, I am not competent enough yet to work totally in that way. My HTML is from many years ago, and so am catching up with HTML5. I am not finding the transition from tables to CSS too hard. I know it is possible to use both, but I prefer to move on to CSS exclusively. See http://bigwallbling.com for my site using tables and SSI, and the same address on a phone for it to be suitable for mobiles using CSS and SSI.
One of the main problems I had was with graphics. Graphics are constructed at a fixed width, and I had difficulty understandin how to apply that to %. Now however, learning how to stretch graphics has been a boon. ( That’s why the banner graphic is a bit blurry. It’s streched). The background graphic is also stretched, but seems to work better.
As for the site in total, there’s a huge amount of stuff outside of HTML and CSS that I have to learn and experiment with. MySql, Javascript, and others to name a couple.
I do appreciate your offer, and may take it up a bit later. I simply need to learn too much other stuff to be pedantic about the front page. What I tend to do is keep going back to review things when I hit a tough spot and get sick of hitting a brick wall.
Nevertheless I will PM you if I need help. That would take some weight off my mind…
Thank you again…
Just until a moderator happens along who can approve it. Unfortunately, there is something amiss with our auto-mod system, and it sometimes puts perfectly innocuous posts - like yours - into the moderation queue, for no apparent reason. As the forums will be moving to different software in the near future, there’s no point trying to fix this, so we can only ask you to bear with us and be patient.
On of the major mistakes that beginners to CSS make is that they mis-use positioning as pointed out by Ron and that they keep putting heights on containers that are holding fluid content like text.
You can’t put a 500px height on your Content section unless you are going to control the overflow and force a scrollbar when content exceeds that dimension. However scrollbars on inner elements are ugly and hard to use so you don’t want to do that.
You should be looking to let content dictate the height of that element so that it can shrink and grow as required. Otherwise if you fix the height then the element can never grow and that means should you change the content (or if the content is dynamic) you will run into problems. However, the most important reason for not using height on that section is that you simply don’t know what height you need to contain the text content that you are placing there. This will vary depending on what the user has chosen for their font-size (or indeed on what font they are using) and the height will be different for all users not to mention those that have simply zoomed the text in the browser. The main thing to remember is that containers that hold fluid content like text should not be controlled with a fixed height. If its just a word or two such as a heading then height may be ok to use but even then it should be in ems (not px) so that the element will grow with the font size.
If you need an initial height then use min-height instead or use a design methodology that doesn’t require the page to be propped open as such.
I sent compass1312 a draft of a fluid version of his page. Tested on my PC in Firefox 29, Chrome 34, Opera 18, and IE 11. “Breaks” in IE 8 (as expected).
However, it appears that the round-ish “certified domain” seal that is supposed to be near the lower left corner of the banner is out of position (possibly resting against the top left corner of the banner container, #banner) when viewed on an iPhone 3gs with Chrome and Safari browsers and an Android table using Chrome. It is positioned correctly on a Samsung Galaxy Note 3.
The usual dilemma… I can’t debug a problem that I can’t see. The code is creatively mine, so feel free to slice and dice.
The seal seems to be in the right place on my iphone. Indeed as you haven’t used the viewport meta tag you will basically be getting a shrunk version of the normal desktop site anyway.
I don’t see anything that would cause it to be misplaced but it would be better if the viewport meta tag was added and media queries used to make the display better for small devices rather than letting it get shrunk small anyway.
I intentionally delayed including the viewport meta tag and media queries pending more information from compass1312 about his ambitions for the page (and because I sometimes proceed in smaller steps in an attempt to play “teacher” ).
I didn’t think to ask if he was testing with actual devices or a simulator. That could be the key to the rogue seal that he sees.
The shots of the mobile devices are not what I was expecting to see It appears that the seal is dropping too far in the mobile devices. Margin-bottom not being rendered the same as in the desktop view.
compass1312 is experimenting with the code, so the above results cannot be replicated at this time.
It looks to me as though the seal is in the same place but the banner is shrunk. If you are using a fixed px margin-top or something like that then that may account for the difference. As you say the site has changed so I can’t check. Those screenshots don’t match my iphone results I looked at earlier.
However, I have to say that there until the viewport meta tag is added you will get unreliable results as browsers try to scale things down. That’s why the text has a gap at the side in one of your screenshots.
A mobile view of a website should not be the desktop site just shrunk down as that is pointless and virtually unusable and expending effort to make it look the same is a waste of resources when you could be creating a better mobile experience instead (I know you know all this Ron but I’m just putting it out there :))
I was aware of the cause of the gap in the android shot, but not necessarily about unexpected results unrelated to framing and text.
and it’s well worth repeating. :). compass1312 has not mentioned how he wants the page to appear on small devices. His attempt to use percents to make his page fit mobile devices didn’t work out so well so I pitched in to try to help and there could be errors. I have added the viewport tag to the code in the dropbox. If he returns, he may wish to give it a go. It would be enlightening to find that the lack of the viewport tag was buggering up the position of the seal.
.
As the forums will be moving to different software in the near future, there’s no point trying to fix this, so we can only ask you to bear with us and be patient.