PDA

View Full Version : Please help me! CSS


siord
06-07-2011, 12:21 PM
Hello every one, I am new to the forum and would like to ask a few DW questions if you all dont mind.

I have currently built a large site using DW and I just need to tweak it up!

I am desperate to learn CSS, I have tried various tutorials and to be honest they havent helped.

I need to know what codes to write in my CSS and then how to link all the pages to that CSS

I know how to actually create a CSS ie file new css name it mystylesheet.css

I just need to know what codes to write in it and how to make it worl for all my pages.

Can anyone help me please?

gentleone
06-07-2011, 12:35 PM
Hi siord, Welcome to the forum! Do you work in Design View? I can explain to you how to do it in code view, but not in design view. It's been way too long for me that I've been there :)

siord
06-07-2011, 12:42 PM
Hi gentleone, thank you for responding to me, and for your welcome to the forum.

To do usually use disgn view just because its easier, but i believe that when you write a CSS it goes into code view?

I can type it in code view to be honest i am rather desperate!!!!... sorry I must sound really stupid, but i am at th moment changing all my pages in my site nmanually and when you have 10 pages plus that is a lot of time and effort.

gentleone
06-07-2011, 01:09 PM
Okay... let's go into code view, but before that create a sub directory called css (to keep everything nice & ordered) and save your stylesheet in there.

From within your HTML you'll have to link to your stylesheet. Look at the top you'll see the head tag and between the opening <head> and closing </head> tag there is a bunch of stuff such as meta tags.

Place the following on a new line in between the head tags as well:
<link rel="stylesheet" type="text/css" href="css/mystylesheet.css" />
I assume that you've called your stylesheet 'mystylesheet.css', but if it's different then change the name. That's it!

siord
06-07-2011, 01:18 PM
i dont think that worked?

I dont really know what you were talking about but i added it anyway...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Index</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #000;
background-image: url(images/backgroundimage.jpg);
background-color: #906;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #00F; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #906;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ This fixed width container surrounds all other divs ~~ */
.container {
width: 960px;
background: #FFFFFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ The header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo. ~~ */
.header {
background: #ADB96E;
}
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
*/
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 600px;
float: left;
}
.sidebar2 {
float: left;
width: 180px;
background: #EADCAE;
padding: 10px 0;
}
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
}
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the anchor block properties so it fills out the whole LI that contains it so that the entire area reacts to a mouse click. */
width: 160px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
background: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background: #ADB96E;
color: #FFF;
}
/* ~~ The footer styles ~~ */
.footer {
padding: 10px 0;
background: #CCC49F;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
/* ~~ Miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the .container) if the .footer is removed or taken out of the .container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.container .content h2 u {
color: #F00;
}
.container .content h1 u {
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}
.container .content h1 u {
color: #00F;
}
.container .sidebar1 .nav li a {
color: #00F;
}
.container .header div h1 em {
font-family: Tahoma, Geneva, sans-serif;
}
.container .header div h1 em u {
color: #F00;
}
.container .content p a {
color: #00F;
}
.container .content h1 a {
font-family: Courier New, Courier, monospace;
}
.container .content h1 {
font-family: Tahoma, Geneva, sans-serif;
}
.container .content h1 {
color: #800040;
}
.container .sidebar2 h4 {
color: #F00;
}
.container .content h3 {
color: #400080;
}
.container .header div h1 em u {
color: #000;
}
.container .header div h2 strong {
color: #400080;
}
.container .content h3 {
color: #000;
}
.container .content h2 {
color: #0000A0;
}
.container .content table {
color: #000;
}
.container .content h2 {
color: #F00;
}
.container .content h3 {
color: #F00;
}
.container .content h2 {
color: #000;
}
.container .sidebar1 .nav li a strong {
color: #00F;
}
.container .sidebar1 p marquee strong {
color: #F00;
}
.container .header div h1 em p {
color: #F00;
}
.container .header div h1 em u {
color: #F00;
}
.container .header div h2 strong {
color: #800080;
}
.container .header div h1 em u img {
color: #000;
}
.container .header div h1 em u {
color: #000;
}
.container .header div h3 strong em {
color: #400080;
}
.container .header div h1 em u strong {
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}
.container .header div h1 em u strong {
color: #000080;
}
.container .header div h1 em u strong {
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}
-->
</style>
<link href="file:///C|/Users/Angie's Laptop/Documents/WEBSITES/Unnamed Site 2/petsreunitedcss.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th {
color: #00F;
}
a:hover {
color: #F00;
}
a:active {
color: #FF0;
}
.container .header div h1 {
color: #000;
}
.container .content h3 {
color: #000;
}
.container .content h2 {
color: #F00;
}
</style>
</head>

gentleone
06-07-2011, 01:30 PM
Well, it's at the right spot only you have to transfer all your CSS styles what you have now on the page itself to your stylesheet.
So copy everything what's between <style type="text/css"> <!-- and </style> to your stylesheet. After that you can delete the styles on the page itself.

I also want to mention that you should define your site in Dreamweaver otherwise you get links that look like you have now (pointing to your harddrive) and don't work if you upload to your server.

http://www.dreamweaverclub.com/define-your-site.php

siord
06-07-2011, 02:22 PM
OH my god!!!!

What just happend there??

I copied and pasted the code like you said into my CSS and then deleted it from my home page/index page and all the colours and formatting went, all the headers and footers went

everything was gobbledy guk!!!

I tried to define my site but each time i went into my CSS folder my CSS file wasnt even showing...

GRRRRRRR

gentleone
06-07-2011, 02:28 PM
well, there is a back-up of your styles right in this thread. Can you see your stylesheet when you go through windows to your CSS folder?

siord
06-07-2011, 02:32 PM
Yes i have it saved in my documents folder on my computer and I can even open it in DW but when I am trying to add it when defining the site its not even recognising it,

i cant even define the site because it keeps saying someing about needs to be a root site what ever that means!

I dont think i will ever understand web design, maybe i should do my begineers course again even though i did get level 2 certificate..lol

gentleone
06-07-2011, 02:55 PM
If you use already an FTP program to upload your pages to your server, then you can skip the 'remote server' part. Do it for now only local. Just read it carefully... you probably missed a step.

siord
06-07-2011, 02:59 PM
oh god!!!!

If I know someone that knows DW in my local area, I would pay them to help me in person.

johnMoss
06-07-2011, 03:41 PM
If you don't mind using teamviewer I could show you a couple things that'll make life a lot easier with this. You just need to get a grasp on a couple tools regarding CSS that Dreamweaver has.
Teamviewer is a download that will let me see your screen, combination of that & a telephone for audio. Glad to help, don't worry about money.

siord
06-08-2011, 07:44 AM
Hi John,

Thanks for your message and for the offer to help. It is much appricaited.

I will look into downloading teamviewer later and let you know when this is done.

Is this a safe thing though? as you will have access to my computer?

Corrosive
06-08-2011, 09:55 AM
Teamviewer generates a fresh pass code every time you connect so, unless you give John that specific code, he won't just have random access to your computer.

Teamviewer is perfectly safe afaik!

John always seems like a trustworthy chap anyway.

siord
06-08-2011, 10:38 AM
Cant seem to download it anyway, it keeps coming up with an error code....

siord
06-08-2011, 10:39 AM
If you don't mind using teamviewer I could show you a couple things that'll make life a lot easier with this. You just need to get a grasp on a couple tools regarding CSS that Dreamweaver has.
Teamviewer is a download that will let me see your screen, combination of that & a telephone for audio. Glad to help, don't worry about money.


Hey John, can seem to download this application keeps coming up with an error message.

Corrosive
06-08-2011, 10:42 AM
Hey John, can seem to download this application keeps coming up with an error message.

What does the error say?

siord
06-08-2011, 11:21 AM
it says something like this::


Cserviceconfiguration:::installservice():create service failed error code = 6

siord
06-08-2011, 11:30 AM
it says something like this::


Cserviceconfiguration:::installservice():create service failed error code = 6

to be honest i give up!!! I am completly lost!!! :confused:

Oh well.....back to college i go then.....:(

Corrosive
06-08-2011, 11:30 AM
Cserviceconfiguration:::installservice():create service failed error code = 6

Hmmm.... That's pretty useless as an error message! Sorry, no clues on that one :(

siord
06-08-2011, 11:32 AM
Hmmm.... That's pretty useless as an error message! Sorry, no clues on that one :(

you and me both...grrrrrr

urm is there any other application like this that can be used instead on the teamviewer?

Corrosive
06-08-2011, 11:36 AM
urm is there any other application like this that can be used instead on the teamviewer?

Yeah, Log Me In is another one. We use it for remote IT Support but you'd better check with John that he is OK to use it before you go downloading it.

Oh well.....back to college i go then.....

I guess you know by now that getting good at web design is not an overnight thing but it is well worth persisting with :)

siord
06-08-2011, 11:42 AM
Yeah, Log Me In is another one. We use it for remote IT Support but you'd better check with John that he is OK to use it before you go downloading it.



I guess you know by now that getting good at web design is not an overnight thing but it is well worth persisting with :)

I know its no over night thing, but all i am seeming to do is go round in circles, I cant seem to find anyone that can help me with the problems i am having with DW i have created a site that i would like to get hosted but before i do that it has to be checked for spelling and errors etc and for consistancey

What i dont understand is if two pages have the same code why do they look different?

and why are the tables not lining up correctly etc, silly little things like that

At the moment everytime i make a change to the site i am having to change all the other pages manually and its very time consuming

Corrosive
06-08-2011, 11:50 AM
It's not really DW you are having the problems with, it is your approach. Tables are not for laying out a web page period. They are for tabular data. Websites should consist of semantic markup. Divs for layout, h tags for headers, p tags for paragraphs and so on. Div tags are used to lay pages out and these are controlled through CSS.

When you grasp CSS you can control the layout from one file that tells all pages how to display. That cuts out all the faffing with changing every page every time.

It is no wonder you feel like you are going round in circles... Wrong tools for the job.

You really need to step away from your current project and get your head around CSS based web design. Try a 'start to finish' tutorial like this one; http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/ (there are loads out there but avoid any that tell you to 'export from photoshop' 'cause you'll get in a real pickle then).

Once you have the theory down and have practised you can go back to your current project with a new approach and finish it up.

Sorry, but just learning this stuff is the only way IMO.

Corrosive
06-08-2011, 11:53 AM
I'm just gonna add that before I found this site and people like Ove, DavidJ and Rob set me on the right path, I was doing exactly what you are doing.

siord
06-08-2011, 12:01 PM
I'm just gonna add that before I found this site and people like Ove, DavidJ and Rob set me on the right path, I was doing exactly what you are doing.

Thank you for your advice.....

I have been trying to find something like this for ages, I will read through it and see if i can come to tterms with it.

If i cant use a table then what could I use that will display information that will look like a table and be in a form of a table?

I really appricaite all of your help...

Corrosive
06-08-2011, 12:14 PM
If i cant use a table then what could I use that will display information that will look like a table and be in a form of a table?



If it is tabular data, such as a list of sporting fixture results or coastal tide times, then a table is what you use. If you are laying out a web page then use div tags. That's the point. HTML has specific tags for specific jobs.

Try this; http://corrosiveonline.co.uk/tutorials_html_tag_guide.php bear in mind it is a couple of years old so HTML5 is not included. Now we have even more tags to make sense of a page; header, nav, article, aside and so on.

Basically, when you take away all the styles from a page it should still all make sense.

HTML is a language and, like all other languages, it has 'grammatical' rules to be followed so that the language makes sense. Don't forget that.

This website; http://www.alistapart.com also has some fantastic articles you should read.

johnMoss
06-08-2011, 02:28 PM
You're on a mac right? Couldn't help ya w/ that error either...

Corrosive
06-08-2011, 04:37 PM
If you are on a Mac are you sure you downloaded the right version? The Mac one is the second tab under downloads.

siord
06-08-2011, 06:15 PM
If you are on a Mac are you sure you downloaded the right version? The Mac one is the second tab under downloads.

Hi No i am not on a Mac, I am on a Laptop.

Right, I have deleted all my tables and added div tags.

But is there anyway of putting borders around the sections instead of having a horizontal Rule?

And now also my Pics are not working, I have tried to link them all up but saying there is error, do i want to copy etc, and then i say yes and then plac ethem size them and when i do run in IE 8 they are not showing?

siord
06-08-2011, 06:16 PM
You're on a mac right? Couldn't help ya w/ that error either...

Hi john,

Sorry I missed you again, No I am on a Laptop, not a Mac

Thanks

siord
06-08-2011, 06:21 PM
You're on a mac right? Couldn't help ya w/ that error either...

Hi john

sorry I missed you again.

I am not on a Mac i am on a laptop.

Thanks

Corrosive
06-08-2011, 06:22 PM
In order to style your div tags (give them borders etc) you need to give them an ID (can be used once on a page) or a class (can be used many times on a page). So, for example, you have a div tag for your sidebar;

<div id="sidebar">Content goes here</div>

(have used an ID because I only want one sidebar)

Then, in your external stylesheet (because your sidebar will remain constant throughout your website) you might have something like;

#sidebar {
border: 1px solid #000; /*makes a black border round the sidebar*/
width: 200px /*makes it 200 pixels wide*/
float: left; /*floats the sidebar to the left so it nestles up against the main content*/
}


Does that make any sense?

siord
06-08-2011, 06:26 PM
urm no sorry

i am not trying to change my side bar i am trying to put a border around the sections that have now been added to each of my pages

<div class="container">
<div align="left" dir="ltr" lang="en">
<div align="left" dir="ltr" lang="en">Lost or Found:</div>
<div align="left" dir="ltr" lang="en">Listing Reference:</div>
<img src="" width="100" height="145" hspace="0" border="2" align="left" style="background-color: #FFFFFF" /></div>
<div align="left" dir="ltr" lang="en"></div>
<div align="left" dir="ltr" lang="en">Area:</div>
<div align="left" dir="ltr" lang="en">Postcode:</div>
<div align="left" dir="ltr" lang="en">Type of Bird:</div>
<div align="left" dir="ltr" lang="en">Male or Female:</div>
<div align="left" dir="ltr" lang="en">Colour:</div>
<div align="left" dir="ltr" lang="en">Description:</div>
</div>

This is what i mean....

siord
06-08-2011, 06:27 PM
I still dont have a CSS as yet

I think that is what John was going to try and help me with
:(

Corrosive
06-08-2011, 06:36 PM
You know when I said;

If it is tabular data, such as a list of sporting fixture results or coastal tide times, then a table is what you use.

I actually think that would sit quite happily in a table and make sense semantically.

The way I square the use of tables in my mind is 'would I/could I put this in a MS Excel Spreadsheet? If the answer is 'yes' then I generally use a table.

What you have there is a table of information regarding a missing bird.

Sorry if I misled you (though I don't think I did) but I thought you were laying out your whole page with tables (and you might well be).

You still need to style your table with CSS though and the principal is the same;

table, td {
border: 1px solid #000; /*makes a black border round the table and individual table cells*/
}

DWcourse
06-08-2011, 06:40 PM
The way I square the use of tables in my mind is 'would I/could I put this in a MS Excel Spreadsheet? If the answer is 'yes' then I generally use a table.

That's absolutely the way to think of it!

siord
06-08-2011, 06:44 PM
Great so I just sat here for almost two hours Changing my tables to Divs? :mad:

If I knew how to create a CSS and input all the right codes etc and get it to work and link all my pages then I would have done by now, thats what my original posting was for help with a CSS.

Great now I am going to have to start all over again!!!! another two hour sitting here writing codes ...GRRRRRRRRRRRRRR!!!!!!:mad:

siord
06-08-2011, 06:45 PM
For the amount of hassle this is casuing me, i think i will just email it to a web designer and let them do all the work, be worth paying not to have all the hassle.

DWcourse
06-08-2011, 07:05 PM
I'm sorry to be jumping in here late but way back when you tried to add and link to a CSS file you had this in your code:

<link href="file:///C|/Users/Angie's Laptop/Documents/WEBSITES/Unnamed Site 2/petsreunitedcss.css" rel="stylesheet" type="text/css" />
<style type="text/css">

Which means you were hard linking to a file on your C drive which won't work when you upload to a server (and maybe not when you try to preview the site locally. That's usually the result of not setting up your site correctly, which should be your first step for any website.

It looks like you started from one of Dreamweaver's built in layouts (3 column fixed with header and footer). YOu could have created an external style sheet automatically if from the New Document dialog you had selected Create New File from the Layout CSS menu at the bottom right of the dialog.

I know it's frustrating to waste a couple hours of work but, if you're serious about creating websites, it won't be the last time it happens. I'm sure every one of the "pros" here still finds themselves "wasting" hours as they try to keep up with the changes in HTML/CSS/JavaScript, etc and to expand their skill sets. My solution (after I'm done cursing and pounding the desk) is to consider such "wasted" time as a learning experience.

domedia
06-08-2011, 07:19 PM
For the amount of hassle this is casuing me, i think i will just email it to a web designer and let them do all the work, be worth paying not to have all the hassle.

It depends :) There's a lot to learn in this field. And I mean a lot. If you have the time and the dedication, go ahead and keep learning, but if else, you might as well have someone that knows how to do it do it for you :)

siord
06-11-2011, 06:28 AM
great thanks for that bit of wisdom!!