completely new [Archive] - Dynamic Drive Forums

bonafidetees

11-02-2006, 03:41 PM

I have a store on Printfections.com and I want to make it look really professional and this person from http://www.printfection.com/advfilms suggested here, and I THOUGHT I could figure it out thinking designing my space would be something like designing MySpace but it's not nearly as easy. I have no idea what I am doing and I would really appreciate some help. This is what I need so far.

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/

That's the layout I would like to use. I am choosing that one because the main area is fluid (which I am assuming is resizeable and what not), but I don't know how to get the code to work. I was searching around the forums and noticed that it might have to be changed to HTML code but how do I do that?

I don't need help with colors because I can figure that out, but how do I do that?

Also, I want drop down menus and professional looking stuff because my site kinda looks like crap and it's not helping. Some advice??

bonafidetees

11-02-2006, 10:28 PM

Okay, I read the two tutorials but I'm still a little lost.

When linking from the HTML, do I just put the file name of the CSS file? I did that and it's just not working. I tried a path as well. Or am I missing something?

<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>

<body>
<body bgcolor="#353130">

<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>

<h1>
<font size="4" face="Kartika" color="e4dbcd">
This is a paragraph.
This is a header 1
</font> </h1>
<hr />

<p>
<font size="4" face="Kartika" color="e4dbcd">
okay testing 1 2 3
</font>
</p>

<p>
<font size="4" face="Kartika" color="e4dbcd">
<a href="page2.htm"
target="_blank">This is a link</a>
</font> </p>

</body>
</html>

thats the html

and this is the css

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #2.1- (Fixed-Fluid)</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #2.1- (Fixed-Fluid)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>200px</em></b> <script type="text/javascript">filltext(15)</script></div>

</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</div>
</body>
</html>