cbraxton Posted September 29, 2013 Report Posted September 29, 2013 I am writing a simple site for use with my middle school Social Studies classes and I need some help with positioning the main text of the site. I want it to line up with the navigation bar at the top, leaving a left indentation roughly equal to the spinning globe image on the left top. The site is mrdsocialstudies.net. If anyone could look at the source code for my css and index.html pages and offer some suggestion, it would be much appreciated. I am attaching these files. Thanks for any help you might offer. index.html mrd.css Quote
Andrea Posted September 29, 2013 Report Posted September 29, 2013 I'm not clear what you are looking for. The html you attached is totally different than your site itself. Don't quite get what you're describing either. To me, 'lining up at the top' means your text and the navigation bar are next to each other which doesn't make sense. I played around with the attached HTML and CSS a bit, trying to guess what you may have meant. See here. The main things I did are: added doctype added wrapper, gave it a width and centered it added universal reset See if this helps you any and let me know if you have any more questions. Quote
cbraxton Posted September 29, 2013 Author Report Posted September 29, 2013 (edited) This may help quite a bit. I need to play with it some to see for sure. Yes, the files I attached have been modified quite a bit since I uploaded them last to the server. I forgot about that as I've been playing with the local files on my PC. I think that you did with #wrapper in the css file what I was trying to do with #maintext. The indentation is still not what I was going for--I was trying to indent the entire text to match the heading of the page, leaving a blank column down the left side equal to the width of the globe image (the green box in your example). What you have done seems to have indented the heading as well. I may be able to get it from here. Thank you for your help. Edited September 29, 2013 by cbraxton Quote
cbraxton Posted October 12, 2013 Author Report Posted October 12, 2013 I figured out what I was trying to do. You can see the result at mrdsocialstudies.com. As with most things in this area, the answer was simple, and staring me in the face. I just needed to make the div that holds the globe have a height of 100% to achieve the effect I wanted. I would like your thoughts on my solution, Andrea, and whether it is the "right" one for this situation. As I say, I am very much the amateur. Quote
cbraxton Posted October 13, 2013 Author Report Posted October 13, 2013 I seem to have a new problem now. I am working on a new color scheme, and the header for my page is showing up red, though that is not the color I've specified in the .css file. The changes have been uploaded in their entirety to the address at mrdsocialstudies.net. Any ideas as to why my header is red? I've looked through the .css and the index.html files with no luck identifying the problem. Quote
newseed Posted October 13, 2013 Report Posted October 13, 2013 Check your body css. It has that red color. That css will make all fonts red by default. Quote
cbraxton Posted October 13, 2013 Author Report Posted October 13, 2013 I'll look. I copied the majority of the .css from a site I did about a year ago. At the time, I knew what I was doing, more or less, as I had recently looked it all up and studied it. Now, though, not doing it all the time, I've forgotten much of the syntax, so I figured, just copy it and change as needed. Another question, though. If I substitute <h2> for <h1>, the css works and it is the color I want. Why would it do that if the body css is overriding the h1? Quote
cbraxton Posted October 13, 2013 Author Report Posted October 13, 2013 I'm sorry. I put .com it is mrdsocialstudies.net. I should really purchase the .com and direct it to the site as well. The link isn't working. Quote
cbraxton Posted October 13, 2013 Author Report Posted October 13, 2013 Check your body css. It has that red color. That css will make all fonts red by default. You were right. That fixed it. I still don't understand why the <h2> tag showed up the correct color, though, while the <h1> did not. Quote
Andrea Posted October 13, 2013 Report Posted October 13, 2013 Now it's working. That spinning globe is so 1995 --- just sayin' In your html, you still have the following mistakes: incomplete doctype an h tag should not be inclose inside a p tag h tags are meant for headers, not regular text. Regular text goes between p tags The reason your H1 isn't showing the bluish color you specified is because of a mistake in your CSS - where you define the #maintext, you are using round bracket - ( - instead of the curly ones '{' which keeps the browser from reading anything beyond that mistake. Quote
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.