View Full Version : HTML/CSS help
I need some help with a few things. This is what I want it to look like:
http://img801.imageshack.us/img801/199/design1redo.th.jpg (http://img801.imageshack.us/f/design1redo.jpg/)
It looks like this in both IE and Firefox at the moment:
http://img852.imageshack.us/img852/9154/ffprtscn.th.jpg (http://img852.imageshack.us/i/ffprtscn.jpg/)I can't get the text in the blue navigation bar to go in the center (like the design), and the navigation bar won't start from the very left so I can't get them all on one line. The other grey navigation bar at the top is all out of line as you can see :P, I don't know how to get them in one line and all top-bottom allign etc. Anyone know/have any ideas on how to fix these issues? I can send you the code if you want to help. :)
iGoD ReLeNtLeS
23-04-11, 15:16
pm'd @catrain
Warning: Something's Not Right Here!
img801.imageshack.us contains content from s3.harrenmediagroup.com, a site known to distribute malware. Your computer might catch a virus if you visit this site.
Google has found that malicious software may be installed onto your computer if you proceed. If you've visited this site in the past or you trust this site, it's possible that it has just recently been compromised by a hacker. You should not proceed. Why not try again tomorrow or go somewhere else?
We have already notified s3.harrenmediagroup.com that we found malware on the site. For more about the problems found on s3.harrenmediagroup.com, visit the Google Safe Browsing diagnostic page.
If you understand that visiting this site may harm your computer, proceed anyway. Oops:picard:
Added after 2 minutes:
you need to set the margin and padding of the wrapper around the nav bar to 0px,
Oops:picard:
Added after 2 minutes:
you need to set the margin and padding of the wrapper around the nav bar to 0px,
I don't know what you mean. :P There isn't any margin or padding set, but both of the nav bars are indented as if they have a margin.
Set a fixed width to the width of the containing element. And btw if your setting 0 margin or padding you don't need to put px at the end just 0 ;)
Edit:
Also float it left.
Sent from my HTC Desire HD using Tapatalk
When I set the width of the blue nav bar to 760px, which is the width of the whole page, it still starts indented. It is floated left and I've tried "margin:0 auto;". I tend to put px even when it's 0. :)
could you pos post a html snippet of the nav along with the css of the container and nav itself. might just have set a property wrong or missed one.
im guessing its list (ul li etc etc) so looks like you missed a property :)
EDITTTTTTT
the problem may also lie with that fact your using s...weaver.
get off that program and do it in Notepad or Notepad++.
seriously you will learn alot more, will understand things better, and the code will be cleaner and easier to edit in the long run.
HTML:
<div id="nav"><!-- start nav div -->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Finance, Management & Corporate IT</a></li>
<li><a href="#">CeFS/DipFS</a></li>
<li><a href="#">Enrichment</a></li>
<li><a href="#">How to apply</a></li>
<li><a href="#">Tutors</a></li>
</ul>
</div><!-- end nav div -->
CSS: (the margin-left:-40px; is Q'ed out because it was almost perfect using that, but I shouldn't have to use that, should I?)
/*start nav */
#nav {
Qmargin-left:-40px;
margin:0 auto;
}
#nav li {
list-style-type:none;
float:left;
}
#nav a {
display:block;
font-size:11px;
text-align:center;
color:#fff;
text-decoration:none;
background-color:#00467f;
font-weight:bold;
width:89px;
border-right:1px solid #FFFBF0;
height:45px;
}
#nav a:hover {
background:#999;
}
/*end nav */
try setting #nav ul { list-style-type: none; }
Toonshorty
02-05-11, 20:04
the problem may also lie with that fact your using s...weaver.
get off that program and do it in Notepad or Notepad++.
seriously you will learn alot more, will understand things better, and the code will be cleaner and easier to edit in the long run.
That's not true.
I use Dreamweaver but I use it in code view and do everything manually, I don't actually use any of the tools given to me.
I just like the way I can keep everything organised with DW.
In regards to the OP, try:
#nav ul { margin: 0; }
if u dont use the tools than theres no point in spending the money as i see it. Might aswell use a free program.
Notepad++ has to be the best coding program in my opinion unless u count dreamweaver for doing everything for you in terms of html/css. i cant stand it at all with php, always made me try doing things i didnt want to and just irritated me. lol
"#nav ul { list-style-type: none; }" does nothing, and "#nav ul { margin: 0; }" moves the nav bar to the top of the div. This is really annoying me now. :P
Toonshorty
02-05-11, 20:10
if u dont use the tools than theres no point in spending the money as i see it. Might aswell use a free program.
Notepad++ has to be the best coding program in my opinion unless u count dreamweaver for doing everything for you in terms of html/css. i cant stand it at all with php, always made me try doing things i didnt want to and just irritated me. lol
I bought the master collection since I'm a student I could get the whole lot for £400.
I use Photoshop daily and the occasional After Effects too.
#nav li {line-height:23px;}
Might need to play around with that value but I think that does what you want.
#nav li {line-height:23px;}Might need to play around with that value but I think that does what you want.
That is what I want, but I don't want the "Finance, Management & Corporate IT" text to move down. I want all the others to be in the middle, if it's possible.
Mmmh... could you PM me the address so I can have a play? Chears,
I haven't got it up. I could .rar it up and send it to you, but I'd need it back tonight or tomorrow morning. Let me know if you want to have a go at it. :)
try setting #nav ul { list-style-type: none; }
Nope. Just need #nav ul {padding:0;} as ul have padding as default.
A really good way of avoiding these problems is to put:
* {
margin:0;
padding:0;
}
At the start of your CSS file, works wonders.
Also I don't put the px when I don't need to so my CSS is as streamlined as possible which in a large stylesheet can decrease load times. Its a habit worth getting into. Same goes for many other things like hex colours work in pairs so #fff works the same as #ffffff and margin:2px 4px; is the same as margin:2px 4px 2px 4px;
:)
Sent from my HTC Desire HD using Tapatalk
Nope. Just need #nav ul {padding:0;} as ul have padding as default.
A really good way of avoiding these problems is to put:
* {
margin:0;
padding:0;
}
At the start of your CSS file, works wonders.
Also I don't put the px when I don't need to so my CSS is as streamlined as possible which in a large stylesheet can decrease load times. Its a habit worth getting into. Same goes for many other things like hex colours work in pairs so #fff works the same as #ffffff and margin:2px 4px; is the same as margin:2px 4px 2px 4px;
:)
Sent from my HTC Desire HD using Tapatalk
You are a hero! #nav ul {padding:0;} sorted them both. :D Thanks.
You are a hero! #nav ul {padding:0;} sorted them both. :D Thanks.
Glad to be of help :)
Sent from my HTC Desire HD using Tapatalk
One last thing and I think it will be finished, how do I set the nav to highlight the current page being viewed? Here is the HTML and CSS for the nav:
<div id="nav"><!-- start nav div -->
<ul>
<li class="navtext"><a href="home.html">Home</a></li>
<li class="navtext"><a href="level2.html">Level 2</a></li>
<li class="navtext"><a href="level3.html">Level 3</a></li>
<li><a href="http://www.guernseycollege.ac.gg/financeandmanagement.html">Finance, Management & Corporate IT</a></li>
<li class="navtext"><a href="cefsdipfs.html">CeFS/DipFS</a></li>
<li class="navtext"><a href="enrichment.html">Enrichment</a></li>
<li class="navtext"><a href="apply.html">How to apply</a></li>
<li class="navtext"><a href="tutors.html">Tutors</a></li>
</ul>
</div><!-- end nav div -->
/*start nav */
#nav {
margin:0 auto;
}
#nav ul {
padding:0;
margin:0;
margin-top:5px;
}
#nav li {
list-style-type:none;
float:left;
}
#nav a {
display:block;
font-size:11px;
text-align:center;
color:#fff;
text-decoration:none;
background-color:#00467f;
font-weight:bold;
width:94px;
border-right:1px solid #FFFBF0;
height:45px;
}
#nav a:hover {
background:#999;
}
/*end nav */
I set a class of li called current and style it differently in CSS.
Sent from my HTC Desire HD using Tapatalk
indeed, you can either use a server side scripting language such as PHP and ASP to add a class to the elament, or use javascript, not complicated at all.
So you'd have a selected class
.selected {
background:red;
}
and then for each of the nav items...
<li class="navtext<?php if($_SERVER['PHP_SELF'] == "/home.html" echo ' selected'; ?>"><a href="home.html">Home</a></li>
etc...
That's not true.
I use Dreamweaver but I use it in code view and do everything manually, I don't actually use any of the tools given to me.
I just like the way I can keep everything organised with DW.
I find the SVN is a bit flakey, but the auto put on file save in the new one is excellent, no more "did I upload that or not". I code pretty much all my php work in Dreamweaver, there's no denying it's the industry standard.
if u dont use the tools than theres no point in spending the money as i see it. Might aswell use a free program.
Notepad++ has to be the best coding program in my opinion unless u count dreamweaver for doing everything for you in terms of html/css. i cant stand it at all with php, always made me try doing things i didnt want to and just irritated me. lol
There are a number of tools out there as well as Notepad++, but if you intend on going into the code/design business, you'll have to get to grips with the industry standards. You'll need it on your CV at the very minimum. It's fine taking what I would consider the moral high ground to use open-source, but once you get into the job market you simply just need to have experience of the industry standards. And as much as it pains me to say, that's not going to be Notepad++ !!
DT.
You don't need javascript or anything if you're building just straight html pages with no content management system. Say you want the home option to be highlighted when on the home page. Open up that html file and change the li that contains the home link to be <li class="current"> and in your CSS do an li.current {blah} where 'blah' is your different styles.
If however you are using a content managed site then yea scripting is the way to go as it needs to be added in dynamically.
EDIT:
Doesn't have to be the li btw, could be the <a> if you wanted. You'd just put the class on the <a> instead and add the necessary css.
Considering that 99% of servers have php installed, it would be silly not to.
And yes Aidan, you're right, i'm not thinking again tonight, if they're static pages, you can jsut add that bit in :L
I find the SVN is a bit flakey, but the auto put on file save in the new one is excellent, no more "did I upload that or not". I code pretty much all my php work in Dreamweaver, there's no denying it's the industry standard.
Not sure you could necessarily make that claim for PHP and dreamweaver, I'd say that Zend Studio (or more generally Eclipse) is the most widely accepted IDE for PHP. Personally I'm not a fan though.
There are a number of tools out there as well as Notepad++, but if you intend on going into the code/design business, you'll have to get to grips with the industry standards. You'll need it on your CV at the very minimum. It's fine taking what I would consider the moral high ground to use open-source, but once you get into the job market you simply just need to have experience of the industry standards. And as much as it pains me to say, that's not going to be Notepad++ !!
DT.
Agreed, it's worth learning an IDE or two, even if you don't necessarily use them all the time. For me it depends on the task in hand, if I can just do it in VIM then I will, if I really need to do some heavy refactoring or a lot of work with classes then it's time to break out the heavy tools, although personally I prefer NetBeans to Eclipse or dreamweaver.
I work with a recruitment agency, I see the job specs and without almost without exception every job order for web development has the word Dreamweaver in it. Even the perl jobs! I go with what I see, I hated Eclipse when used it before on a project. If only VisualStudio had decent support, because as a tool I find vs2010 is streets ahead. I find myself missing the dual monitor support the most in pretty much all apps now since using VS2010 for c#.
Sorry for the thread hijack ! :lol:
It didn't work, I have this:
<div id="nav"><!-- start nav div -->
<ul>
<li class="current"><a href="home.html">Home</a></li>
<li class="navtext"><a href="level2.html">Level 2</a></li>
<li class="navtext"><a href="level3.html">Level 3</a></li>
<li><a href="http://www.guernseycollege.ac.gg/financeandmanagement.html">Finance, Management & Corporate IT</a></li>
<li class="navtext"><a href="cefsdipfs.html">CeFS/DipFS</a></li>
<li class="navtext"><a href="enrichment.html">Enrichment</a></li>
<li class="navtext"><a href="apply.html">How to apply</a></li>
<li class="navtext"><a href="tutors.html">Tutors</a></li>
</ul>
</div><!-- end nav div -->
li.current {
background-color:#00467f;
}
I already have a <li class="navtext"> to center all text apart from FM&CIT, but I just replaced that class for now with the "current" class to see if it worked.
<div id="nav"><!-- start nav div -->
<ul>
<li class="current"><a href="home.html">Home</a></li>
<li class="navtext"><a href="level2.html">Level 2</a></li>
<li class="navtext"><a href="level3.html">Level 3</a></li>
<li class="navtext current"><a href="http://www.guernseycollege.ac.gg/financeandmanagement.html">Finance, Management & Corporate IT</a></li>
<li class="navtext"><a href="cefsdipfs.html">CeFS/DipFS</a></li>
<li class="navtext"><a href="enrichment.html">Enrichment</a></li>
<li class="navtext"><a href="apply.html">How to apply</a></li>
<li class="navtext"><a href="tutors.html">Tutors</a></li>
</ul>
</div><!-- end nav div -->
Elements can have more than one class.
Sent from my HTC Desire HD using Tapatalk
<div id="nav"><!-- start nav div -->
<ul>
<li class="current"><a href="home.html">Home</a></li>
<li class="navtext"><a href="level2.html">Level 2</a></li>
<li class="navtext"><a href="level3.html">Level 3</a></li>
<li class="navtext current"><a href="http://www.guernseycollege.ac.gg/financeandmanagement.html">Finance, Management & Corporate IT</a></li>
<li class="navtext"><a href="cefsdipfs.html">CeFS/DipFS</a></li>
<li class="navtext"><a href="enrichment.html">Enrichment</a></li>
<li class="navtext"><a href="apply.html">How to apply</a></li>
<li class="navtext"><a href="tutors.html">Tutors</a></li>
</ul>
</div><!-- end nav div -->
Nothing has changed?:P
Elements can have more than one class.
Sent from my HTC Desire HD using Tapatalk
Ok, but it still doesn't work just trying to use the "current" class.
Well in 3 years of being a web designer, using a current class to highlight the current page has never failed me lol so idk what you are doing
Also if you're having problems with getting two classes on the li to work then why not make the <a> have the current styles. So have an a.current instead.
Another thing, why do the li need a class of navlist anyway. They are in a div called nav so just do
#nav li {}
to style them?
Cleans up you code and will make your life easier.
..unless something else is targeting the class of navlist?
Sent from my HTC Desire HD using Tapatalk
give each menu item a unique class (eg 1, 2, 3...). Give this class to the body tag, too. Then, use:
body .1 #nav li .1, body .2 #nav li .2 {background:red;}
This says:
IF the page number EQUALS the page on the navigation menu STYLE this background red.
One small thing, you need to have this style after the style that sets the background for all the menu items, otherwise this style will be overridden.
Let me know how bad I am at explaining!
give each menu item a unique class (eg 1, 2, 3...). Give this class to the body tag, too. Then, use:
body .1 #nav li .1, body .2 #nav li .2 {background:red;}
This says:
IF the page number EQUALS the page on the navigation menu STYLE this background red.
One small thing, you need to have this style after the style that sets the background for all the menu items, otherwise this style will be overridden.
Let me know how bad I am at explaining!
That's very bad coding practice. Leads to many classes and differences across pages that you have to keep up to date when you make changes and is unnecessary.
What you aim for when writing HTML and CSS is use the fewest amount of tags and style rules to get the result.
Example:
<div id="nav">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="otherpage.html">Other Page</a></li>
</ul>
</div>
#nav {
nav div style
}
#nav ul {
ul style
}
#nav li {
li stlye
}
#nav a {
a stlye
}
li.current { /* If you have any other li tags in your site that need the class of current then declare here as #nav li.current {} instead to make sure these styles specifically target the current class in #nav only */
current style
}
Shouldn't need any more than that. AVOID having separate classes for all the links, thats such an unnecessary ball ache believe me.
I ended up having seperate classes for the links, because I couldn't get the other way whic I think I understand how to get it to work, but for some reason it didn't and I don't have anymore time to work on it. I tested it in IE 8 & 9, Chrome, Safari 5, Opera 11?(the latest) and Firefox 3.6 & 4, in both XP and 7 and it works in all. I tried it in Firefox 3.6 & 4 in Ubuntu which had lots of problems, and in Firefox 4, Chrome and Opera in Mac 10.5.5 they all had lots of problems too. The only problem I can see with it, is that two of the pages seem to move right a few pixels when they are viewed, not sure why that happens.
I ended up having seperate classes for the links, because I couldn't get the other way whic I think I understand how to get it to work, but for some reason it didn't and I don't have anymore time to work on it. I tested it in IE 8 & 9, Chrome, Safari 5, Opera 11?(the latest) and Firefox 3.6 & 4, in both XP and 7 and it works in all. I tried it in Firefox 3.6 & 4 in Ubuntu which had lots of problems, and in Firefox 4, Chrome and Opera in Mac 10.5.5 they all had lots of problems too. The only problem I can see with it, is that two of the pages seem to move right a few pixels when they are viewed, not sure why that happens.
The pages moving is to do with the scroll bar appearing and disappearing. Are the pages that move quite short? There's a way of making the scroll bar always appear. Google it and find the CSS that does it coz I can't remember off the top of my head :P
Sent from my HTC Desire HD using Tapatalk
overflow:scroll in the body and html tag?
html {overflow:scroll; } did the job. Thanks for the help and +rep. :)
html {overflow:scroll; } did the job. Thanks for the help and +rep. :)
Yea that's code I was on about :)
Sent from my HTC Desire HD using Tapatalk
Just an update, you can view it at www.clemos.co.cc/businessandfinance/
Suggestions:
Move the student opinion into a sidebar or something!
On http://www.clemos.co.cc/businessandfinance/level2.html and http://www.clemos.co.cc/businessandfinance/level3.html, sort the table out.
Using images for a menu with hover effects is NASTY! See http://www.cssplay.co.uk/menus/.
Is "finance, management, and corporate IT" meant to link to the official collage website?
The footer might want something doing to it.
The section above the header just looks... out of place. Not sure what (if anything) you can do about it, though.
The collage logo should be PNG'd and given a transparent background.
The header is well designed. The menu, although it should be CSS based not image based, looks nice. The "tutors" page works well.
I can't spend any more time on it for my college unit, although I think I will anyway to learn how to code better.
There was supposed to be 3 or so student opinions, so I was going to have the in a row.
Yes the tables could do without all the borders around the content inside them.
I used CSS for the menu...
Yep "FM&CIT " is meant to link to the college site, because that is part of business. The site I made is going to replace this page http://www.guernseycollege.ac.gg/thebusinessschool.html
Thanks for the feedback though. :)
Powered by vBulletin® Version 4.1.12 Copyright © 2012 vBulletin Solutions, Inc. All rights reserved.