Jump to content

back again...still learning


Recommended Posts

Hi folks, I know it's been forever and a day since I've been around here. Life has been very busy and I've not had a lot of time to work on my project site nor been able to learn how to fix a few things still driving me batty. But this last weekend, I managed to steal some time, and I've tweaked a bit here and there.The site is: http://www.comicsgal.comMy biggest headache right now is the spaces caused by using <p> </p> in order to stay compliant with XHTML. I don't want the spaces above and below the red line dividing the top links from the body with the three divs. I tried putting it in the top nav with the <p></p>, but that wasn't working either. I took them out to get rid of the one space, but then I'm not validating. You'll notice that I haven't yet converted the other pages like the main, so the one space is missing below the line so that the links/center content div/scraps at least line up at the top. But when that isn't there, the validator says I need...shoot..forgot the word, qualifier? object? Something like that. And the recommendations list things like <p> <ins> etc.I tried doing a vertical-align in the CSS, but that didn't fly (oops...been too long since my research and I totally forgot about that.) I did manage to get the h1 "I offer a hearty..." in the center div to line up better using a negative in the CSS. Maybe that's the answer for the divs overall? For some reason when I try to look through the w3 tutorials, I'm not finding stuff on divs that's any help there. It's probably right in front of my nose though.This is the code lines I'm referring to:

<!--top nav-->       <!-- logo -->        <div id="logopanel">        <img src="img/logo.jpg" alt="logo" />       </div>        <!-- update -->        <div id="updatepanel">        <img src="img/cgupdate.jpg" alt="last update 3 November 2007" />        </div>        <!-- recently read banner -->       <div id="banner">        <img src="img/latestreads.gif" alt="latest reads" />	     </div>       <!-- links -->             <div id="links"> <a href="about.html"><img src="img/aboutb.jpg" alt="about" /></a><a href="athand.html"><img src="img/athandb.jpg" alt="at hand" /></a><a href="http://comicsgal.com/comicsgalreads/"><img src="img/blogb.jpg" alt="blog" /></a><a href="contact.html"><img src="img/contactb.jpg" alt="contact" /></a><a href="links.html"><img src="img/linksb.jpg"  alt="links" /></a></div><!--top nav ends--><p><img src="img/red.jpg" alt="" style="width: 100%; height: 2px;" /></p><!--center body text-->

I'm also having trouble with the divs as far as not getting center spillover when the two side divs aren't as long. The last tie I researched this (months ago), apparently it was a problem for a lot of folks. I don't know if anything has changed since then.Any help on this matter would be greatly appreciated. And if you have any general comments on the site as well, have at it. :)

Link to post
Share on other sites

Somebody will be along to say it soon but i'll get in first. You need to present your links as an unordered list.also instead of using an image for the red line give the links div a red border on the bottom.#links{border-bottom: 2px solid red;}

Link to post
Share on other sites
Somebody will be along to say it soon but i'll get in first. You need to present your links as an unordered list.also instead of using an image for the red line give the links div a red border on the bottom.
I'll look up unordered lists again. (So easy to forget things when you're not doing this on a regular basis.)I need to look at div labeling as well, because I can see how that would work, but I need to have it in front of me so my brain kicks in on that point. I'll try to get to these this week and post back.Thank you for taking the time to clue me in. :)
Link to post
Share on other sites

you already have #links in your css so you just need to add the border-botom: 2px solid red;as for the list you will need to style it a bit to get them to be in a horizontal line i think cssplay should have some help for you.

Link to post
Share on other sites
http://cssplay.co.uk has some excellent Menus and also a very good Tutorial on styling Horizontal menus WITHOUT using ul/li tags.Yes, without the ul/li tags. It might be simpler for you to start there and as you commit to strengthening your CSS semantics, then adding the ul/li would be a good place to start.The UL tag is a Block level item, so you need not wrap it in a Div tag, either... so that is one advantage to using the ul's... :)To adjust the spacing, you might use a declaration for the margins of the paragraphs to reduce the default spacing you are getting.Example:
p { margin-top: .15em 1 em .15em 1 em; } // top / right / bottom / left

Or add a class to some of them:

p.styled { margin-top: .25em 1 em .25em 1 em; } // top / right / bottom / left  for paragraphs class="styled"

Link to post
Share on other sites
  • 2 weeks later...

If you want your side divs to be a minimum height to prevent the other divs moving, no matter what the minimum amount of content in there is, try the following code in your CSS:

min-height:300px; height:auto !important; height:300px;

This appplies min-height to normal browsers and tells IE the height buts also tells it that if the content of the div is more than the height to stretch to acommodate it.I don't know if that's exactly what you were looking for but hope it helps.EG

Link to post
Share on other sites
  • 2 months later...

Hi. Just toured your site. The issues you talked about look visually as if they have been resolved. I'm looking at your site and thinking there is a lot of text and the other observation is that you lose the navigation idea when you hit the blog part - there the viewer is trapped and the way out is not obvious. I hit the back button which I never like the idea of (dont ask me why but a lot of people feel like that - for some reason it is an annoying thing to have to do). Another observation, and please do't be offended - after all it is only my opinion and who am I - You have a lot to say and a lot you want to say but your site does not allow the user to rest their brain or eyes - you need illustrations / pictures to break the text. Not everyone is - I think - a captivated ethusiast and you need to cater for them too? As a viewer I would like to 'hear' what you have to say - really - but I want to browse your thoughts not have them thrown at me without choice? Where are the subject headers and natural breaks which we all enjoy and welcome? My assessment is that you are trying sooooo hard to get the code right that youv'e forgotton a bit about your potential viewers. At the moment it's a bit like a tatooist's site verbosing on the merits of design and so on but forgetting to place examples of their work on the site? Good luck :)

Link to post
Share on other sites
  • 1 month later...

It all feels really cramped together.I feel like your center content could use a bit more padding or margin on the sides.All 3 columns need more margin at the top at a minimum. I would want the 2 side columns to line up horizontally with the bottom of the word enthusiast in your center header.I would do my links so that when linked to the ABOUT page, the ABOUT link is replaced by a link to my HOME page. (the AT HAND link is replaced by HOME on the AT HAND page, etc.) That way visitors have the choices of using their back button, going back to the home page, or linking to one of the other pages. It's not much use having a link to the page you are already on!

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

Guest
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.

Loading...
×
×
  • Create New...