Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Forced to learn CSS and struggling... BADLY!

MacBoobsPro

MacBoobsPro

macrumors 603
Original poster
Jan 10, 2006
5,114
6
Sorry for the crap title but I'm tired and very pissed off.

My boss has asked (forced) me to redesign our fecking huge website (3000+ pages) even though I know jack about web design. He sent me off on a basics dreamweaver course which covered VERY basic CSS. The course was very good and having the guy show you how to do stuff made it seem easier than it actually is, because now I'm on my own I am struggling to do the most simple of things and I am getting extremely pissed about it.

So far (after about 3 hours) I am working on my own template from scratch and I have managed to create a 'container' div tag and have created a relative divtag to place my logo in and have it where I want it to display and it all seems fine. Now I am trying to create a simple text nav menu. By simple I mean:

Welcome

About

Quote

Contact


I have this text in a relative divtag and used CSS to I can get it to look roughly how I would like in Dreamweaver but when I preview the leading is much smaller. Can someone please tell me why the text keeps ******* moving?

Basically its going from:

Welcome

About

Quote

Contact


To:

Welcome
About
Quote
Contact


:mad:

I absolutely detest web design! :mad:


EDIT: If you can recommend some CSS forum sites for me to look at please do because (and its probably because I don't know what I'm looking for) I can't find the answers to my problems.
 
could you post html/css, or even better a link to a demo/live site where we could look at it?

you would usually have this type of menu in a <ul>

so your syntax would be

Code: 
<div>
<ul>
<li>Welcome</li>
<li>About</li>
<li>Quote</li>
<li>Contact</li>
</ul>
</div>

then you can give either your div, ul, or li elements a class or id and specify css styles

probably the easiest would be add a class to the <ul>

Code: 
<ul class="nav-menu">
<li>etc...</li>
</ul>

in your css you would have

Code: 
ul.nav-menu li{height:2em;}

or something to specify the height of the li elements, you could also use
Code: 
line-height:2em;

just change the 2em to whatever size/units you want the spacing to be

that is how I am understanding your question, I apologize if it was not what you were looking for

-Sam
 
My suggestion is that you take the time to at least learn the basics with HTML/CSS. You will undoubtedly struggle continuously if you don't. I know you had the Dreamweaver class and that's a good start, but you need more. No offense meant at all, but if you're already struggling at the Navbar, your problems in building a 3,000+ page are only beginning.

Sure you could post on the forums and the people here are quite helpful, but the process will be so much more painful for you if you go that route. I would suggest you check out this book. It taught me all the basics with CSS and was absolutely HUGE in my learning. I'm not affiliated with the book in any way, feel free to check out the other popular CSS books on Amazon, I'm sure they would all be helpful, but I prefer that book. And who knows, maybe with a solid foundation you may actually enjoy web design. I'm betting that your dislike for it stems from a lack of a solid understanding. Just my two cents...

To answer your question, my preferred method for making horizontal nav is to use the usual unorder list (<ul> and <li>) and then set the li to display:inline. Then give the li some padding to separate the words a bit.

So if you had a div around the nav, the html would look like this:
<div id="nav">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>

Then the css would be:

#nav li {
display:inline;
padding:12px;
}

This simply tells the unordered list to display horizontally, and by default, removes the default bullets found in a traditional, unstyled unordered list. That should be what you need and the code is pretty easy to make sense of.

Good luck!
 
As an Amazon Associate, MacRumors earns a commission from qualifying purchases made through links in this post.
Hey, I know exactly what you're going through, and to be honest, if your boss is wanting you to build this sort of site, you are going to need a lot more than a basic dreamweaver class.

I would suggest that he buys you a years subscription to the likes of lynda.com for example, where you can get video tutorials on pretty much everything you will need to know. It's a very good place to start.

Learning html / css is like learning c++, it's just a language, and if you can master the basic fundamentals for structuring your code, life will be so much easier.

Also, if it helps, always test your designs in Firefox first, then work towards Safari, then IE8, IE7 and last but not least, the nightmare of IE6.

Any problems, feel free to give me a shout.
 
People on this site are amazingly helpful. And you do have to start learning somewhere....

But if you are having these many problems already, you are going to be asking for a LOT of help. At this stage in the game, it just might not be possible to do a 3000+ page site in only CSS when you don't even know some of the basics.

I am no expert, but I bought some books and started out switching my personal sites to CSS. I then moved onto smaller client sites. At this point I was able to really take advantage of the help on this forum (and others) when I had a grasp of some of the foundations. Now I am progressing to larger sites, but feel like I am just starting to get some knowledge.

My only other suggestion would be to maybe look at some CSS templates? Try to take a look through them and adjust them for your own needs? It's not a solution, but it may help.
 
Hmm...So forcing you to learn CSS huh? Well, really what it comes down to, is learning how to create "divisions" in CSS. First you create a wrapper, and then you work your way down, if you understand what I mean. Everything should be contained inside of the main wrapper, where you'll have several "divisions" inside. If you can grasp this concept, then you'll know exactly how to build the website.

Anyway, CSS isn't something that you can learn overnight, unless you're a quick learner like me. :p I basically forced myself to learn CSS in a few hours, and I was up and running. You really need to learn the basics of tags. HTML is simple, and CSS can be simple once you learn how HTML pages are created. All it is is tag after tag after tag.

And really, if you're boss is forcing you to learn CSS, then you'd better run away if you don't know how to design... ;)
 
I was going through the same thing when I started learning HTML/CSS about 5 years ago. It takes a lot of patience and a lot of practice to entirely learn the languages. What really helped me learn HTML/CSS was just buying some basic books like Web Design for Dummies and CSS for Dummies. Check out your library or bookstore for some more. Just takes patience. Could you maybe post the HTML code and the CSS code you currently have written. I could try and help you with specific problems you may be having.
 
First off, hang in there! I have been working with HTML for nearly 15 years now. I have taught standards-based xHTML/CSS at the college level. I still run into problems that make me pound my head on the desk!

but, I actually wanted to take a step back:

Today, a 3000+ page website that does not run upon content management is just plain wrong. With the fabulous, mature open-source CMS engines available today, even small sites benefit from content management. A site with as many pages as yours practically requires it!

If you are saddled with a project of this scope, I would actually spend some time looking at CMS engines like Drupal or Joomla, seeking out pre-designed templates that are close to the design you want, THEN apply your HTML/CSS knowledge to modify the templates to customize the design to your company's needs.

As for more general advice, I agree that Lynda.com is a good resource, as is a outside consultant, if the budget allows, who you can turn to when you really get stuck.

When you are really fed up, comfort yourself knowing that you are learning a very marketable skill.
 
It wouldn't apply for this site, but for people learning CSS Flux is a pretty neat program to check out. It takes a completely different approach than most web editors I have used. Especially when it comes to working with CSS.
 
A little late, but thanks for the replies.

I am under pressure to finish the site and have now decided to do it the 'pikey' way of slicing up images in PS then taking them into Dreamweaver.

:eek:
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back