PDA

View Full Version : New to CSS, some help please..



ICC
10-14-2007, 08:18 PM
So I am a photographer and Ive decided to dump the flash and go with CSS. I have a fairly decent knowledge of html but I am 100% new to CSS. I have come up with the look I want and I also found a site with codes I want to incorporate.

I have chosen this as my basic layout (http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/2-column-css-layouts/fw-20-2-col/)
And I want to add this script to where it says navigation (http://www.cssplay.co.uk/menu/slide_show.html)
And I want this to be my navigation on the left (http://www.cssplay.co.uk/menus/flyout_horizontal.html)

Now my question is.... uh.. how do I make this all work? I know I dl the files and save them seperatly then I place the file link in the html in the <head> section. However, this dosent seem to be working for me. Can anyone maybe give a step by step instruction, or the finished code, or thoughts on the codes ive chosen?

boogyman
10-15-2007, 12:18 PM
my suggestion would be to do them one at a time. start with your structure, get that working, than work on your global navigation (second bar) than work on the local nav and body ... hint... use floats.

then after you get that looking how you want to begin with start to incorporate the two menu options. and if you have any questions about something specific we'll be here to help

ICC
10-15-2007, 07:54 PM
Ok thank you but I am 100% new to css so most of that didnt make sense. I have tried Ive spent about a day and a half on it it with no sucess. Should I post the coding?

ICC
10-15-2007, 08:16 PM
Ok so this is what the index.html looks like: --------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Width CSS Layouts - 2 Column - fw-20-2-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" media="all" type="text/css" href="css/flyout_h.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout_h_ie.css" />
<![endif]-->
</head>

<body>

<!-- Begin Wrapper -->
<div id="wrapper">

<!-- Begin Header -->
<div id="header">

This is the Header

</div>
<!-- End Header -->

<!-- Begin Navigation -->
<div id="navigation">

This is the Navigation

</div>
<!-- End Navigation -->

<!-- Begin Left Column -->
<div id="leftcolumn">
<ul>
<li><a href="../menu/index.html">DEMOS</a>
<ul>
<li><a title="The zero dollar ads page" href="../menu/zero_dollars.html">zero dollars</a> </li>
<li><a title="Wrapping text around images" href="../menu/embed.html">wrapping text</a> </li>
<li><a title="Styling forms" href="../menu/form.html">styled form</a> </li>
</ul>
</li>
<li><a href="index.html">MENUS</a>
<ul>
<li><a title="a coded list of spies" href="spies.html">spies menu</a> </li>
<li><a title="a horizontal vertical menu" href="vertical.html">vertical menu</a> </li>
<li><a title="an enlarging unordered list" href="expand.html">enlarging list</a> </li>
<li><a title="an unordered list with link images" href="enlarge.html">link images</a> </li>
</ul>
</li>
<li><a href="../layouts/index.html">LAYOUTS</a>
<ul>
<li><a title="Cross browser fixed layout" href="../layouts/bodyfix.html">Fixed 1</a> </li>
<li><a title="Cross browser fixed layout" href="../layouts/body2.html">Fixed 2</a> </li>
<li><a title="Cross browser fixed layout" href="../layouts/body4.html">Fixed 3</a> </li>
<li><a title="Cross browser fixed layout" href="../layouts/body5.html">Fixed 4</a> </li>
</ul>
</li>
<li><a href="../boxes/index.html">BOXES</a>
<ul>
<li><a title="a coded list of spies" href="spies.html">spies menu</a> </li>
<li><a title="a horizontal vertical menu" href="vertical.html">vertical menu</a> </li>
</ul>
</li>
<li><a href="../mozilla/index.html">MOZILLA</a>
<ul>
<li><a title="A drop down menu" href="../mozilla/dropdown.html">drop down menu</a> </li>
<li><a title="A cascading menu" href="../mozilla/cascade.html">cascading menu</a> </li>
<li><a title="Using content:" href="../mozilla/content.html">content:</a> </li>
</ul>
</li>
<li><a href="../ie/index.html">EXPLORER</a>
<ul>
<li><a title="Example one" href="../ie/exampleone.html">example one</a> </li>
<li><a title="Weft fonts" href="../ie/weft.html">weft fonts</a> </li>
<li><a title="Vertical align" href="../ie/exampletwo.html">vertical align</a> </li>
</ul>
</li>
<li><a href="../opacity/index.html">OPACITY</a>
<ul>
<li><a title="colour wheel" href="../opacity/colours.html">opaque colours</a> </li>
<li><a title="a menu using opacity" href="../opacity/picturemenu.html">opaque menu</a> </li>
<li><a title="partial opacity" href="../opacity/png.html">partial opacity</a> </li>
<li><a title="partial opacity II" href="../opacity/png2.html">partial opacity II</a> </li>
</ul>
</li>
</ul>
</div>
<!-- End Left Column -->

<!-- Begin Right Column -->
<div id="rightcolumn">

<a href="#">Download this CSS Layout</a>

</div>
<!-- End Right Column -->

</div>
<!-- End Wrapper -->

</body>
</html>


Notice in the header section I did attempt to put the link to the CSS file. This is the flyout_h[1] CSS file :-----------------------------------------

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout_horizontal.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
.container {width:695px; background:#fff url(hide_seek.jpg); margin:50px auto; padding:10px; border:1px solid #000;}
.menu {font-family: arial, sans-serif; width:131px; height:217px; position:relative; margin:0; font-size:11px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:120px; height:30px; border:1px solid #5a3; border-width:1px 1px 0 0; background:transparent url(../../opacity/opaque.png); line-height:29px; font-size:11px; padding-left:10px;}
.menu ul {padding:0; margin:0;list-style-type: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:131px; width:565px; background:transparent;}
.menu ul li:hover ul li {float:left;}
.menu ul li:hover ul li a {display:block; background:transparent url(../../opacity/opaque.png); color:#000; width:130px; float:left;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}


And the second one is flyout_h_ie[1] -------------------------------------------------------

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout_horizontal.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */

table {border-collapse:collapse; border:0; margin:0; padding:0;}

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a, .menu ul li a:visited {background:#d6e4d0;filter: alpha(opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
opacity:0.7;}
.menu ul li a:hover {color:#fff; background:#b3ab79;filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:131px; width:565px; background:#transparent;}
.menu ul li a:hover ul li {float:left;}
.menu ul li a:hover ul li a {display:block; background:transparent filter: alpha(opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
opacity:0.7; color:#000; float:left; width:130px;}
.menu ul li a:hover ul li a:hover {background:#dfc184;filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); color:#000;}


The main css file is this----------------------------------------------------

/*
Created by Keith Donegan of Code-Sucks.com

E-Mail: Keithdonegan@gmail.com

You can do whatever you want with these layouts,
but it would be greatly appreciated if you gave a link
back to http://www.code-sucks.com

*/

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 5px 0px;
background: #E7DBD5;
}
#navigation {
float: left;
width: 900px;
color: #333;
padding: 10px;
border: 1px solid #ccc;
margin: 0px 0px 5px 0px;
background: #BD9C8C;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 500px;
width: 195px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 678px;
display: inline;
position: relative;
}

I really dont know what to do. I downloaded the two css files and for the html he gave a link that was all text.

So basically where do I go once Ive downloaded? Im that new to CSS. This is my first encounter with it. I can change colours and sizing but thats it.

So do I put a link in the header? Or does some of the css go into the html? What is the process?

dog
10-16-2007, 06:48 PM
Hey,

Sounds like you really are new to CSS. I think the best thing to do might be to spend an hour or so on a CSS tutorial.

Here's a link to one:
http://www.w3schools.com/css/default.asp

Good luck.

One other thing:

Notice in the header section I did attempt to put the link to the CSS file. This is the flyout_h[1] CSS file

In the head section of your code you reference three CSS files

<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" media="all" type="text/css" href="css/flyout_h.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout_h_ie.css" />
<![endif]-->
I'm not sure what's going on with the last one. It looks like PHP to me. Am I right? Are you using PHP?

...where do I go once Ive downloaded? Im that new to CSS. This is my first encounter with it.
As you will read in the tutorial CSS can be brought-in in three ways.

1. In-line: By writing the CSS within a style attribute of an element you want to style. Eg:

Some CSS to make a span <span style="color: red;">red</span>.
2. In the Head section: By writing the CSS inside style tags in the head of your page. Eg:

<head>
<!-- other things in the head -->
<style type="text/css">
/* CSS written here */
</style>
</head>
3. In an external file: By saving the CSS in a document with the .css extension and linking to it via a link in the head. Eg:

<link rel="stylesheet" type="text/css" href="main.css" />

In your case it seems you are trying go with the third option. Save the CSS you have downloaded as filename.css and then reference it correctly. Many people save all their CSS files in a directory called css in which case your link might look something like this:

<link rel="stylesheet" type="text/css" href="css/main.css" />

Hope that helps.

Peace,
dog

PS Spend some time on the tutorial.