Please HELP!!!

nate2099 · #21 Jul 29th, 2007, 03:48

OK, I see.

Just a few things,

Firstly, I'd get rid of the IE6 hacks completely. Get it working the way you want in a proper browser first, then hack for IE. Never test in IE.

I can see what you want to do with the header, but remember not everyone has flash enabled, and you can do what you are trying to do with CSS image rollovers anyway, if you google it there are heaps of tutes around for this.

Im not a webdesigner, so someone may correct me, but I never use absolute positioning unless it's absolutely neccessary, in this case it's not,

Also you haven't closed the #framecontentTop{ div (it's missing the last }) but I don't think this is your problem.

The flash is embedded in the framecontentleft div, which is set as 103px wide with overflow hidden, so you can only see the first 103px of it.

I'd also throw an index.html file in all your directories ("You are not authorized to view this directory"). Make it a bit harder to steal your flash files!!

BTW, I prefer the look of the first one!! and I love that waterfall flash!!

Lchad · #22 Jul 29th, 2007, 12:33

No Mike your code cannot be fixed. Use what Nate has given you. What Nate worked up for you is exactly what I was suggesting you try to do when we spoke yesterday.

I agree with Nate, for a simple layout like you have, There is NO need for absolute positioning.

Mike if you can find the book CSS the Missing Manual, I would purchase it. It's such a great book loaded with tutorials that would give you a better understanding, step by step on how to code.

Nate.. great job with this thread! Thanks a million!

ICEMINISTRIES · #23 Jul 29th, 2007, 19:35

Hello Nate and Linda,

Thanks for all your suggestions and if i were more knowledgeable I would be able to make the changes that you suggest. Unfortunately, me and code are not getting along and when I try to make changes I end up messing up the whole layout.

I know, I need to take the time to learn CSS and codes and trust me this experience is making me want to take the time because I'm attempting to start a web design/web hosting firm and I need as much information as possible to assist me in this endeavor. That said, let me now get down to the matter at hand.

I sat up all night playing around with this template and I managed to shift the header but it appears that it needs to somehow be sent to the back so that it does not cover the side bars. In response to your suggestions regarding the IE hacks, are you saying that I should go throughout the codes and take out every where that IE hack is? Please advise me on this, anyway here is the code that I've been working on:

Code: Select all

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Website names goes here</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
width:<100%>
max-height: 100%; 
background-color: #f8ebf1;
}

#framecontentLeft{
    position: absolute;
    top: -10px;
    left: 0px;
    width: 102px; /*Width of left frame div*/
    height: 100%;
    overflow: hidden;
    color: #f8ebf1;
    background-image: url(images/left3.jpg);
    z-index: 1;
}

#framecontentRight{
    position: absolute;
    top: -10px;
    width: 107px; /*Width of left frame div*/
    height: 100%;
    overflow: hidden;
    color: #f8ebf1;
    background-image: url(images/right2.jpg);
    z-index: 1;
    left: 915px;
}

#framecontentTop{
    position: relative;
    top: -10px;
    left: 102px; /*Set left value to WidthOfLeftFrameDiv*/
    right: 170px; /*Set right value to WidthOfRightFrameDiv*/
    width: 813px;
    height: 133px; /*Height of top frame div*/
    overflow: hidden;
    color: #f8ebf1;
    background-color: #f8ebf1;
    background-image: url(flash/header2.swf);

#maincontent{
    position: fixed;
    top: 175px; /*Set top value to HeightOfTopFrameDiv*/
    left: 100px; /*Set left value to WidthOfLeftFrameDiv*/
    right: 600px; /*Set right value to WidthOfRightFrameDiv*/
    bottom: 0;
    overflow: high;
    background-color: #f8ebf1;
    width: 804px;
    margin-right: 300px;
    padding-right: 500px;
}

.innertube{
    left: 10px;
}

* html body{ /*IE6 hack*/
padding: 120px 150px 0 200px; /*Set value to (HeightOfTopFrameDiv WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

* html #framecontentTop{ /*IE6 hack*/
width: 121%;
}

</style>

<link href="CSS/extra.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="framecontentLeft">
<div class="innertube">
  <p align="center" h1="right">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1100" height="134">
      <param name="movie" value="flash/header2.swf">
      <param name="quality" value="high">
      <embed src="flash/header2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1000" height="134"></embed>
    </object>
    </h1>
  </p>
  </div>
</div>

<div id="framecontentRight">
<div class="innertube">



</div>
</div>

<div id="framecontentTop"></div>


<div id="maincontent">
<div class="innertube">

<h1 align="center">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="771" height="160" title="Waterfall">
    <param name="movie" value="waterfalls.swf">
    <param name="quality" value="high">
    <embed src="flash/waterfalls.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="771" height="160"></embed>
  </object>
</h1>
<h1 align="center">    Your text goes here</h1>
<p align="center" style="text-align: center">&nbsp;</p>
<p align="center" style="text-align: center">&nbsp;</p>
<p align="center" style="text-align: center"><a href="http://www.yourdomainname.com">Your webdesign name and link go here</a></p>
</div>
</div>


</body>
</html>

Please be patient with me as I AM trying to learn!! Thanks for all your help!!!

nate2099 · #24 Jul 29th, 2007, 21:18

Code: Select all

 
* html body{ /*IE6 hack*/
padding: 120px 150px 0 200px; /*Set value to (HeightOfTopFrameDiv WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}
 
* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}
 
* html #framecontentTop{ /*IE6 hack*/
width: 121%;
}

I would get rid of all of this.

nate2099 · #25 Jul 29th, 2007, 21:22

Code: Select all

 
position: absolute;
    top: -10px;
    left: 0px;

Also any code like this that sets an absolute position for an element. Your better of moving them around the page using other means.

Just for tersting, you may want to change the background color of your divs. It will be much easier to see where they are..

ICEMINISTRIES · #26 Jul 29th, 2007, 22:24

Quote:

Originally Posted by nate2099

Code: Select all

 
position: absolute;
    top: -10px;
    left: 0px;

Also any code like this that sets an absolute position for an element. Your better of moving them around the page using other means.

Just for tersting, you may want to change the background color of your divs. It will be much easier to see where they are..

So, you're saying that I should go throughout the codes and every place that I see the above-mentioned codes, delete them?

Is that going to fix the problem with the header?

ICEMINISTRIES · #27 Jul 29th, 2007, 22:40

ok, I did what you requested and it made the images disappear completely. Am I supposed to replace the word "absolute" with something else?

ICEMINISTRIES · #28 Jul 29th, 2007, 22:47

[quote
The flash is embedded in the framecontentleft div, which is set as 103px wide with overflow hidden, so you can only see the first 103px of it.[/quote]

Should the overflow be changed to something other than "hidden"?

ICEMINISTRIES · #29 Jul 29th, 2007, 23:08

Quote:

Originally Posted by nate2099

Code: Select all

 
position: absolute;
    top: -10px;
    left: 0px;

Also any code like this that sets an absolute position for an element. Your better of moving them around the page using other means.

Just for tersting, you may want to change the background color of your divs. It will be much easier to see where they are..

Change the background colors to what?

sannbe · #30 Jul 29th, 2007, 23:25

Quote:

Change the background colors to what?

a differnt color from the rest of the coding. That way they will stand out while you review your coding. I always do that as it makes it easier to make corrections and changes. Fyi...I don't believe there is a set color you have to use.

nate2099 · #31 Jul 30th, 2007, 00:28

Ok, had another play this morning.. this is how I would do it, any questions feel free to ask!!

I have again used one background image length wise, but repeated down the page.. this is a lot easier.

When you see the layout with the colors, delete the colors and uncomment the background image file call..

In the same directory as your index page, create a directory called "css" and save this file as "master.css" in the directory you just created.

Code: Select all

/* CSS Document */
body {
    font-family: Arial, Helvetica, Verdana, Sans-serif;
    font-size: 12px;
    color: #000000;
    text-align: center;
    }

html, body {
    margin: 0;
    padding: 0;
    background: #FFFFFF;
    }

#header {
    width: 818px;
    height: 150px;
    background:  yellow /*url('http://www.tcnls.com/test/images/header2.jpg')*/;
    margin: auto;
    }
    


#topbar {
    width: 1022px;
    height: 20px;
    background: white;
    }
    
#bottombar {
    width: 1022px;
    height: 20px;
    background: white;
    }

#container2 {
    width: 1022px;
    background:   red /*url('http://www.tcnls.com/main.jpg')*/;
    overflow: hidden;
    margin: auto;
    }

#content {
    width: 818px;
    height: 500px;
    background: pink;
    margin: auto;
    }

The index page is

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<script type='text/javascript'></script>
<title>Your Website Name</title>
<meta http-equiv="Content-type" content="text/html; charset=us-ascii"/>
<meta http-equiv="Content-Language" content="en-us"/>
<style type="text/css" media="all">@import url('css/master.css');</style>
</head>

<body>
<div id="container2">
    <div id="topbar">This is just a spacer Div</div>
    <div id="container2">
    <div id="header">Header Div - Put your flash header embed code here (personally I wouldn't use flash for this.</div>
    <div id="content">Content Div - Put your waterfall flash embed code here.</div>
    <div id="bottombar">This is just a spacer Div</div>
</div>

</body>
</html>

ICEMINISTRIES · #32 Jul 30th, 2007, 01:59

How do I save the file as master.css?

nate2099 · #33 Jul 30th, 2007, 02:10

if you right click on empty space on desktop, new TXTFILE. Copy and paste text, save as > make sure the bottom box says "all file types" Save as master.css

If it saves as master.css.txt just rename it and delete the .txt of the end.

ICEMINISTRIES · #34 Jul 30th, 2007, 03:00

I opened up a css stylesheet in DW and saved it as master.css and created the directory as you suggested. I'm running into a problem with putting in the flash embed codes. I'm putting them in the place where you suggest but when I look at them in my browser they do not appear. The colors, can they be changed to look like what I created with the colors on the side bars?

nate2099 · #35 Jul 30th, 2007, 03:20

You mean the gold colors??

You will have to play around in photo-shop to create a background image that is 1022px wide, that has the left bars on the left, right bars on the right, and ur background color as fill. Make it say 100px high (height dosen't really matter as it repeats down the page anyway - but don't make it to small).

As far as the flash goes, if your running it locally, your browser may be blocking it.. I know mine does that, very annoying. or just double check your directory structure.. make sure your flash files are in a directory called flash in the same directory as ur index file.

This might sound like a silly question, you are embedding the flash in the html file and not the css file??

Are neither flash files working??

ICEMINISTRIES · #36 Jul 30th, 2007, 03:26

You were right about putting the flash files in the same directory, now everything is showing. I'm now in the process of replacing the side bars, will keep you updated. Thanks for your help!!

ICEMINISTRIES · #37 Jul 30th, 2007, 03:29

Here's a question - if I want to replace the red side bars with jpegs that I created, where do I make those changes, in the master.css document or in the index.html document?

ICEMINISTRIES · #38 Jul 30th, 2007, 03:32

I have the codes but they say "absolute" -

#framecontentLeft{
position: absolute;
top: -10px;
left: 0px;
width: 102px; /*Width of left frame div*/
height: 100%;
overflow: hidden;
color: #f8ebf1;
background-image: url(images/left3.jpg);
z-index: 1;
}

Can I use this?

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Please HELP!!!