Jump to content
Killersites Community
cbraxton

Help With Positioning Text

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

 

 

 

Share this post


Link to post
Share on other sites

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 by cbraxton

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

The link isn't working.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Now it's working.

 

That spinning globe is so 1995 --- just sayin' :blink:

 

In your html, you still have the following mistakes:

 

  1. incomplete doctype
  2. an h tag should not be inclose inside a p tag
  3. 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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×