Jump to content

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.



Link to comment
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.




Link to comment
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
Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
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.

Link to comment
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?

Link to comment
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.

Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...