bkelly Posted April 25, 2009 Report Share Posted April 25, 2009 (edited) I am very new with CSS and slighly knowledgable with HTML. My goal is a simple web site that gets the point across. My CSS file has this section: ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } The index.htm file has this section: > </pre> <ul> ... several links are here... </ul> This is fine in that it creates a section on the left for links and the code wraps around it. The problem is that the entire page is indented on the left allowing for links all the way to the bottom. That means I lose a lot of real estate in the remainder of the page. I though the would reset the width back to normal. I tried changing the to class="navbar"> with no visible effect. What do I need to change to move the left margin back to the left side after the link area. if you want to see the page is it here: http://ww w.bke lly.ws Edited the URL per the comments on spam. Right clicking on it takes me to a site, but certainly not mine. I don't know what is going on here. Edited April 25, 2009 by bkelly Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted April 25, 2009 Report Share Posted April 25, 2009 You would need to remove the position: absolute and replace it with a 'float: left;'. ul.navbar { list-style-type: none; padding: 1em; // added some padding here for separation margin: 0; float: left; width: 9em } For positioning, check out the Tutorials about Floats, Padding and Margins. Hope this helps. Quote Link to comment Share on other sites More sharing options...
bkelly Posted April 25, 2009 Author Report Share Posted April 25, 2009 (edited) That almost works in that it sets an indented area around the links, but it leaves the remainder of the page indented to the left. I have updated the page and the effect is present: http://ww w.bke lly.ws (edited URL per comments on spam as I understand the intent) and wow, that was a fast response. Thank you. Edited April 25, 2009 by bkelly Quote Link to comment Share on other sites More sharing options...
virtual Posted April 25, 2009 Report Share Posted April 25, 2009 That is because you have no containing for the whole of your web page which you could then centre on the page using margin: 0 auto. When you set up a web page you should divide it into sections - to give you a basic idea Content for header goes here Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 25, 2009 Report Share Posted April 25, 2009 the last time I looked, that and, an 11em padding left on the body... Quote Link to comment Share on other sites More sharing options...
bkelly Posted April 25, 2009 Author Report Share Posted April 25, 2009 (edited) I must not be understanding something. It seems to me that when there are identifiers such as: > </pre> <ul> They make natural divisions. It seems like putting a around that section is redundant. Regardless, I edited index.htm and added divisions as I understand the reply. (Indicating I probably do not fully understand.) I tried looking at it on my computer and uploaded it to my site with identical results. I did not see any change in the display. Should I be changing the css file also? EDIT I have edited my css file a bunch trying things and not understanding everything. Maybe I have some things in there are are causing problem. I will include the test css file below. The index.htm file has no PDF or other such code. I think its code is fully visible on the web site so I won't post it here. /* A web page must have the following to reference this style sheet */ /* */ /* If it does, the use of the html tags that are defined here */ /* will invoke the characteristics defined for that tag. */ /* When the tag "body" is declared in a page, these */ /* characteristics will be applied to the page. */ body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; /* background-color: #C0C0C0 */ /* background="http://www.bkelly.ws/background3.gif" */ background-image: url(http://www.bkelly.ws/background3.jpg); } p {text-indent: 1cm} /* replace this navbar with the one below ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } end of original */ ul.navbar { list-style-type: none; padding: 1em; // added some padding here for separation margin: 0; float: left; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } /* ul = unordered list, the list items will not be numbered */ ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black position: left } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } address { margin-top: 1em; padding-top: 1em; border-top: thin dotted } table { border: 5px solid rgb( 000, 000,255); text-align : left; } td { border: 5px solid rgb( 100, 200, 100); padding:5px; text-align : left; } tr { text-align : left; } EDIT AGAIN (sigh, not getting anywhere fast) I found a tutorial on floats here: http://www.webreference.com/html/tutorial20/3.html and I added this section to my css file #LINKBOX { float: left; width: 40%; margin: 0.5em; background: #003399; border: solid thin #D7040B; color: #FFFFFF; } And I changed my navigation bar to look like this: ... my links go here ... class="navbar"> I did not detect any changes. Do I need to modify my file and put IDs in for every paragraph. Or maybe I have this so screwed up I ought to delete and start from scratch. LAST EDIT I don't know why, but when I put the changes on my site, it was not the same as in the directory on my computer. Now I am almost there. The ID = LINKBOX seems to work, and now the remainder of the page wraps around and back to the left below the box of links. But the border is a little box all by itself and is not around the links that I want in the box. Very strange to me. I tried editing the URL to my site per the post about spams but when I test it seems to direct me to some strange page. My site is www dot bkelly dot ws. It is okay to post like this? I have been here all morning and have other things to do so I will let this rest a few hours. Thanks for the ideas and help you have already provided. Edited April 25, 2009 by bkelly Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted April 25, 2009 Report Share Posted April 25, 2009 An unordered list is already a block-level container and should not require a wrapper div unto its own. also, by floating the container, even if it was not block-level, it becomes block-level. Go back to the code I supplied and remove the 11em margin on the content area to see if that is what you want, the text wrapping underneath the link area. Quote Link to comment Share on other sites More sharing options...
bkelly Posted April 26, 2009 Author Report Share Posted April 26, 2009 (edited) An unordered list is already a block-level container and should not require a wrapper div unto its own.also, by floating the container, even if it was not block-level, it becomes block-level. Go back to the code I supplied and remove the 11em margin on the content area to see if that is what you want, the text wrapping underneath the link area. I think I tried that. Here is the section from the CSS that I modified as I understood what you wrote as it looks now: ul.navbar { list-style-type: none; margin: 0; float: left; width: 9em } I removed the padding but saw little difference. It did not effect that empty box. The code that uses it now looks like this: > </pre> <ul> ... links removed from this location ... </ul>class="navbar"> As is, it is pretty close, but there remains an empty box to the left of all the links that has the characteristics I expect. The code is posted to my site and can be seen. I will read some more about those various parameters and see what I can learn. EDIT I removed the LINKBOX definition from the index.htm file and removed the box. The code now looks like this: > </pre> <ul> ... links removed from this location ... </ul>class="navbar"> I liked the box effect, but the text was not being put inside the box. It looks okay not, but I will read more about the box effect and see what I can come up with. So in summary, while I have a new toy to research and figure out, I do have what I asked for. Thanks for your help. Edited April 26, 2009 by bkelly Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 26, 2009 Report Share Posted April 26, 2009 Hi Here is basically the same as what your after. If you want it to be wider, then just make the container wider. Look how its all accomplished - should give you a leg up. http://www.visibilityinherit.com/code/style-practical.php Quote Link to comment Share on other sites More sharing options...
Wickham Posted April 26, 2009 Report Share Posted April 26, 2009 (edited) I haven't followed all the previous posts closely but I found several other things wrong. In Firefox the headings like Alaska Pictures and Software Pages were on the right of the menu but the p tag text relating to them was all below the headings and menu, while in IE7 the text followed the headings as they should. I found lots of other errors which I noted in the files and the html now validates. The way you have coded the menu on the left is that it floats inside the text generally, so I have left that the same although Eric's solution has a margin-left for all the headings and text so that they don't expand around the menu. See http://www.wickham43.com/forumposts/bkelly090426.html http://www.wickham43.com/forumposts/bkelly090426.css Here's an alternative more or less like Eric's:- http://www.wickham43.com/forumposts/bkelly090426-2.html http://www.wickham43.com/forumposts/bkelly090426-2.css Edited April 26, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
bkelly Posted April 26, 2009 Author Report Share Posted April 26, 2009 Eric, Wickham, jlhaslip, and virtual, Your help is much more than anyone could ask for or expect. I captured the files from Wickham and the link from Eric. I will be needing some time to go through them and understand what you have told me. Thanks so much for the time you have spent in my behalf. Bryan Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.