On this page:
http://ewh.ieee.org/r1/schenectady/New/
I have a <ul> element (the menu bar) followed by a <p> element (the main body text). Shouldn't the <p> be below the <ul> since it is a block element by default (instead of on the same line as it, as it is now)?
Thanks,
David
I'm not sure, but it seems you forget the closing </div> before you start with your <p> for the content.
Edit: Sorry, I see your closing </div's> is further down, so ignore.
But, should there not be a seperate opening <div> closing </div> for the horizontal menu within the container?
So I thought it would be ok to just have the menu and the main text inside the "whitebox" div. Is that not ok? I thought I should only make a new div if I want to change the style? Since I am styling the <ul> and the <p> inside the whitebox div, I didn't see a reason to start a new div. Is this not correct?
David
I don't know David, someone with more experience should answere that. As it is now, it looks like the <p> tag is not going to work. The 50% width in the stylesheet is also causing the last link (member benefits)on the menu to start in a new line. 70% is putting it inline next to the second menu item. Using <br/> tags will work if you insert about two of them just before the "maincontent" to create a blank line after menu content, but I don't know if you want to use that.
Yea, <br/> would probably work, but I heard that it is not staying "pure" to separating content from display (which I'm trying to do for learning purposes only). The only reason I used 50% width was that apparently centering doesn't work unless you specify a width, but I wasn't sure what number to use.
All of this seems very awkward and confusing - surely I am doing something wrong? It seems like I'm trying to only simple/basic things, no?
David,
David, change your <ul> width to 100% and give it a height attribute. Then the <p> will drop below.
A word of advice. It seems like you're trying to center your navigation bar using CSS. That's actually very easy to do provided you give the entire <ul> a fixed width. But, to make it look right you would also have to also give each <li> a fixed width. Trying to do it with flexible (auto width) <li> tags will drive you nuts at this stage in your learning CSS. Spend your time learning and understanding positioning, inheritance, and specificity. Once you get that it all falls into place.
I changed the ul width to 100% and gave it a height of 10% (what should this have been)? It is still left justified!!
By "fixed width" - do you mean specified in pixels (as opposed to percentage of the parent container?)
I am absolutely not trying to do anything fancy (the auto width li tags as you suggest) - I'm happy to change to the easiest method of getting this thing centered and the <p> to start below it :)
You'll need a fixed pixel width on the <ul>. Of course, you'll want to give your <li> tags a fixed width too.
Also, you'll need a fixed pixel height.
One other thing, David. I would advise you to get rid of all your inline CSS. Use your external stylesheets only. That will make it easier for you to view the CSS and not have inline styles clobbering what you thought you were trying to accomplish in your external stylesheets. You might want to try using Firefox and the web developer add-in to make it easier for you to see exactly what's going on.
This is actually a very simple page that you're trying to create. But you've built yourself a rats nest of CSS and added in unnecessary HTML. For example, you can use CSS to style your page's <html> and <body> tags and, by doing so, eliminate your <div class="bluegradient> altogether. Make the <html> gray and style the <body> with CSS to be the width and height and color that you'd like. Then just place the <div class="whitebox"> inside the body, giving it dimensions, color, etc. with CSS. Once you've got that working, separate your interior into 3 main <div> -- header, content, footer and style each accordingly. Make sure you give each a width and height. Make the width 100%, but don't forget to give the <body> tag a position="relative" statement. That way, when you tell your header (and the other) divs to be 100% width, they will be 100% width RELATIVE TO the body.
As for the 3 main divs (header, content, footer) don't forget to give the header and footer a fixed height (for now, it'll make life easier for you.) You can then let the interior (content) div size itself according to the content.
Oh.. don't use .pt for text size. .pt is used in print medium.. not on the web. Use px, em, or %.
All the above aside, try this. It'll give you a better understanding of your problem.
Using your existing HTML (no changes whatsoever) replace your existing style.css with the following. It's not the most elegant, and I can't overcome your existing inline css, such as your 40pt text in the header, but it will give you a better starting place from which to learn and experiment.
Hope this helps.
Jim
html {
width: 100%;
height: 101%;
margin-bottom: 1px;
background: grey;
}
body {
position: relative;
width: 80%;
height: 80%;
margin: 0 auto;
top: 10%;
background: blue;
}
div.bluegradient {
position: relative;
width: 80%;
height: 80%;
margin: 0 auto;
top: 10%;
background: white;
}
div.whitebox {
width: 100%;
height: auto;
background: transparent;
}
div.whitebox p:first-child {
width: 100%;
height: 80px;
background: transparent;
}
div.whitebox p:first-child a {
display: block;
width: 225px;
height: 76px;
float: left;
}
div.whitebox p:first-child span {
font-size: 10px;
}
ul#nav {
display: block;
width: 90%;
height: 40px;
margin: 0 auto;
}
ul#nav > li {
display: inline;
float: left;
width: 25%;
height: 100%;
}
ul#nav > li a {
display: block;
text-align: center;
}
ul#nav > li ul li a {
text-align: left;
}
div#footer {
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: auto;
}
Just took a quick peek at your website. You should consider removing the height:80%; style from your "lightbox" class. If you go to your upcoming events page, you'll see you have text continuing further down the line than the white content area.
Thanks Jim! I'm in the process of moving everything to the css per your recommendation. A couple of questions in the mean time:
1) height: 101%; - is this a typo? Or do you use 101 for a reason?
2) "Also, you'll need a fixed pixel height." - do you just mean use px units? I am very hesitant to do anything like that as I won't know how it will appear on multiple resolutions (without lots of experimenting).
Also, in some things you have used a dot:
div.whiteboxwhile in others you have used a # :
div#footerIs there a difference?
Ok, I removed the rats nest - as far as I can tell everything is done from the css file now. Please see:
http://ewh.ieee.org/r1/schenectady/New/style.cxx
and the result:
http://ewh.ieee.org/r1/schenectady/New/
The only thing I have not taken your suggestions on are the ul and li elements, as these I have styled using the css files that I got with the javascript to make the menus (dropdown and dropdown-horizontal) (in the /css/dropdown folder).
Is something in there messing up the centering of the menu? (as you can see it is still not centered).
I had a bunch of margin statements that you have removed because I wanted to be able to see a little bit of blue above the white box. To this, would I just add a "margin-top:100px;" to the whitebox element?
One last thing - in your footer element:
div#footer {
position: absolute;
left: 0;
bottom: 0;
}are "left", "bottom", etc referring to the position? I.e. would an equivalent statement be
div#footer {
position: absolute;
position-left: 0;
position-bottom: 0;
}?
I really appreciate all of your help so far!
David
1. I use height: 101%, as well as margin-bottom: 1px, to always generate a vertical scroll bar on the browser page. That stops that annoying shift that happens when pages resize themselves. Using it is strictly a matter of preference.
2. Yes, if you want to be able to horizontally center that navigation bar, you need to set a fixed pixel height to the <ul>. There's really not any way around it. If you find one, I'd love to know about it.
Designing websites is a lesson in give and take.
Of course there's a difference. The dot (.) stands for 'class' and the pound sign (#) for ID. I had to target your HTML the way you created it.
1)
I use height: 101%, as well as margin-bottom: 1px, to always generate a vertical scroll bar on the browser page. That stops that annoying shift that happens when pages resize themselves. Using it is strictly a matter of preference.
Would the height of 101% not do that on its own (i.e. without the 1px bottom margin)?
2)
I created a menu class with a fixed pixel height:
.menubar
{
margin-left: auto;
margin-right: auto;
text-align:center;
width: 100%;
height: 100px;
}and applied it to the ul:
<ul id="nav" class="dropdown dropdown-horizontal menubar">and that sucker is STILL not centered!!!
3)
I added a margin-top: 10px; to the whitebox class and it did not shift down to show some blue at the top as I would expect?
Ahhhh this is driving me a bit crazy!
David
Frustrating, isn't it. That's how you learn.
The answer is, as you might expect, somewhat simple to understand, but harder to fix. First, you have set a width of 100% to the <ul>. You can't center something that's already the entire width of the containing element. There's nothing to center.
Your real problem, however, is that your dropdown.css stylesheet is clobbering your style.css stylesheet. To see what I mean, just remove the dropdown.css stylesheet and set your .menubar class to something like 60%. The result is not going to be pretty, but you'll at least see that now it tries to center.
Good luck.
Jim
The answer is, as you might expect, somewhat simple to understand, but harder to fix. First, you have set a width of 100% to the <ul>. You can't center something that's already the entire width of the containing element. There's nothing to center.
Did you mean set a width LESS than 100%? Or are you saying that by default its width is just equal to the width of the content, so by telling it to be width=100% of the page then it has room to move the content around that bigger space?
Your real problem, however, is that your dropdown.css stylesheet is clobbering your style.css stylesheet. To see what I mean, just remove the dropdown.css stylesheet and set your .menubar class to something like 60%. The result is not going to be pretty, but you'll at least see that now it tries to center.
Yep you're right - it is centered now (though indeed ugly). I'll have to look into what dropdown.css is doing and make it place nice with my style.css. I'll have to get back to you on this one.
Ok, I've moved everything into http://ewh.ieee.org/r1/schenectady/New/style.css . The words of each button are centered, but the buttons are stretched across the whole page.
Any bright ideas?
Add the following to the existing ul.dropdown li selection:
ul.dropdown li {
height: auto;
width: auto;
}
The <p> </p> tag pairs enclose a paragraph.
A single <p> tag is not allowed to be used as a line break.
The <p> </p> tag pairs can not be directly inside <ul> </ul> tag pairs.
Only <li> </li> tag pairs are allowed to be directly inside the ul or ol tag pairs.
For a single line break, use the <br /> tag.
Thanks, this is the answer to the original question (also posted previously by Kraai). I'll have to distill my other problems a bit more :)
Hi david,
Height:101% is meaning less, Height:100% means it will fit the height to full screen.You can use PX in place of % because PX is the best one to use.And maximum try to use height:auto because the div increases its height based on the addition of content to that div.
It's not a good practice to use <p> within <ul> tag. Within <ul>, always use <li> tag. You can create css for <li> tag to make it look like the way you want.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.