Please help me with my Layout

2 replies [Last post]

Thu, 2009-07-02 14:40

eddie22487

Offline

Regular

Timezone: GMT-6

Joined: 2009-05-13

Posts: 13

Points: 6

Hello, I'm new to CSS and realize that I probably didn't structure my DIV tags correctly. I was wondering if someone could please help me out with this. It is a bit harder it seems than normal webpages, because my employer wants a frame around the body of the text to constantly be there with all of the buttons. So it has to be fixed images. Right now it is in a really rough draft, I just need help organizing this better. Thank you so much.

HTML:

<!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>
<link href="style.css" rel="stylesheet" type="text/css" />
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Myachigon Website</title>
 
 
 
</head>
 
<body>
 
 
<!-- Background Framework -->
 
 
 
<div id="left">
	<div id="bottom_left_border"></div>
	<div id="left_border_bars"></div>
	<div id="top_left_corner_panel"></div>
</div>
 
 
<div id="right">
<div id="bottom_right_border"></div>
<div id="right_border_bars"></div>
<div id="top_right_corner_panel"></div>
</div>
 
 
<div id="top_cross_bar"></div>
<div id="banner"></div>
<div id="top_bg"></div>
<div id="crowd"></div>
 
 
<!-- Buttons w/ Hover in style.css -->
<a id="Home" href="index.html" title="Home"> <span id="home_btn"> </span></a>
<a id="Store" href="store.html" title="Store"> <span id="store_btn"></span></a>
<a id="Tricks" href="tricks.html" title="Tricks"><span id="tricks_btn"></span></a>
 
<!-- Commercial Movie Clip -->
<embed type="video/quicktime" src="http://media.revver.com/qt;sharer=88328/635350.mov" pluginspage="http://www.apple.com/quicktime/download/" scale="aspect" cache="False" height="175" width="180" autoplay="False"></embed>
 
<div id="cam1"></div>
<div id="cam2"></div>
 
 
<div id="container">
<h1> Myachi Industries Corporation </h1>
<p> Hello Myachi World! </p>
<p class="news"> Check out the newest user submitted art on Myachi's <a href="http://www.myachi.com/Art.html" target="new">Art Page</a></p>
<p class="news2"> New PICS from MyachiGon!!! <a href="http://www.myachi.com/slideshow/slideshow.html">Click Here</a>!!!</p>
<p class="news"> Myachigon LIVE Webcams!! <br /><br /> Check out the Myachi Masters and Fans Jam at FAO -- Anytime!!!  <a href="http://www.myachi.com/jamcams.html" target="new">Click Here!</a>
<br />
<br /> Username: Myachi <br /> Password: Myachi<br /><br />
 
 Just choose a camera and log in!</p>
 
 
<p class="news2"> Watch Myachi Martha Stewart Episode!!!! <a href="http://www.marthastewart.com/article/myachi-101" target="new">Click Here</a>!</p>
<p class="news"> 
EXTRA! EXTRA!! The Myachi Boyz make the <a href="http://www.nytimes.com/2008/08/12/nyregion/12myachi.html?pagewanted=1&_r=1&sq=myachi&st=nyt&scp=1" target="new">New York Times</a>!!!
</p>
 
<p class="news2"> 
There is some really important News Feed Here.
<!--http://rss.api.ebay.com/ws/rssapi?FeedName=SearchResults&dfsp=32&from=R6&nojspr=y&output=RSS20&saaff=afepn&siteId=0&afepn=5336329323&customid=&satitle=Myachi&fbfmt=1&sabfmts=0&sascs=0&fsop=32&fsoo=2 --></p>	
</div>
<div id="footer"><p><a href="/storeLocator.html">Store Locator</a> - About the Masters - Contact Us - Myachi Worldwide - Disclaimer <!-- AddThis Button BEGIN -->
<a href="http://www.addthis.com/bookmark.php?v=250&pub=myachi" onmouseover="return addthis_open(this, '', '[<a href="http://www.myachi.com" rel="nofollow">www.myachi.com</a>]', '[Myachi Industries Corporation]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s7.addthis.com/static/btn/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=myachi"></script>
<!-- AddThis Button END -->
 
</p></div>
 
</body>
</html>

CSS:

body {
	background-image: url(images/rep_metal.png);
  text-align: center;
  background-color: white;
  margin-top:10px;
  margin-bottom:10px;
  color: black;
 
}
 
body a:link { color:#FF0; }
body a:hover {color:#F60;}
body a:active {color:#F00;}
body a:visited {color: #F90;}
 
 
#bottom_left_border {
	background-image: url(images/bottom_left_border.png);
	background-repeat: no-repeat;
	position: fixed;
	left: 30px;
	bottom: 0px;
	width: 110px;
	height: 171px;
	z-index: 3;
}
 
#bottom_right_border {
	background-image: url(images/bottom_right_border.png);
	background-repeat: no-repeat;
	position: fixed;
	right: 15px;
	bottom: 0px;
	width: 110px;
	height: 171px;
	z-index: 3;
}
 
#left_border_bars {
	background-image: url(images/left_border_bars.png);
	background-repeat: repeat-y;
	position: fixed;
	left: 60px;
	bottom: 0px;
	width: 46px;
	height: 100%;
	z-index: 1;
}
 
#right_border_bars {
	background-image: url(images/right_border_bars.png);
	background-repeat: repeat-y;
	position: fixed;
	right: 50px;
	bottom: 0px;
	width: 46px;
	height: 100%;
	z-index: 1;
}
 
#top_left_corner_panel {
	background-image: url(images/top_left_corner_panel.png);
	background-repeat: no-repeat;
	position: fixed;
	left: 0px;
	top: 0%;
	width: 205px;
	height: 193px;
	z-index: 99;
}
 
embed, .embed {
	position: fixed;
	height: 147px;
	width: 173px;
	top: 20px;
	left: 5px;
	z-index: 100;
}
 
 
 
#top_right_corner_panel {
	background-image: url(images/top_right_corner_panel.png);
	background-repeat: no-repeat;
	position: fixed;
	right: 0px;
	top: 0%;
	width: 185px;
	height: 193px;
	z-index: 100;
}
 
#top_cross_bar {
	background-image: url(images/top_cross_bar.png);
	background-repeat: repeat-x;
	position: fixed;
	height: 40px;
	width: 100%;
	top: 60px;
	left: 0px;
	z-index: 90;
}
 
 
#home_btn {
	background-image: url(images/home_btn.png);
	background-repeat: no-repeat;
	position: fixed;
	height: 40px;
	width: 116px;
	top: 30px;
	left: 15%;
	z-index: 95;
}
 
#home_btn:hover { background-position: -0 -40px; }
#home_btn:active { background-position: -0 -80px; }
 
#store_btn {
	background-image: url(images/store_btn.png);
	background-repeat: no-repeat;
	position: fixed;
	height: 40px;
	width: 116px;
	top: 30px;
	left: 25%;
	float: left;
	z-index: 95;
}
 
#store_btn:hover { background-position: -0 -40px; }
#store_btn:active { background-position: -0 -80px; }
 
#tricks_btn {
	background-image: url(images/tricks_btn.png);
	background-repeat: no-repeat;
	position: fixed;
	height: 40px;
	width: 116px;
	top: 30px;
	right: 30%;
	z-index: 95;
}
 
#tricks_btn:hover { background-position: -0 -40px; }
#tricks_btn:active { background-position: -0 -80px; }
 
 
 
 
#container {
	background-color: black;
	color: white;
	position: center;
	margin-top: 160px;
	height: auto;
	margin-left: 16%;
	margin-right: 16%;
	margin-bottom: 30px;
	border: outset;
	border-width: thick;
	border-color: #333;
	padding: 20px;
	z-index: 0;
 
}
 
p { color: white; 
	text-align: justify;
	margin: 20px;}
 
 
h1 { color: #FDE829; }
 
h2 { 
	color: #FDE829;
	text-decoration: underline;
	text-align: justify;
	}
 
#top_bg {
	background-image: url(images/top_bg.png);
	position: fixed;
	height: 96px;
	width: 100%;
	top: 0%;
	left: 30px;
	background-repeat: repeat;
	z-index: 1;
}
 
#crowd { background-image: url(images/crowd.gif);
		width: auto;
		height: auto;
		position: fixed;}
 
#left { float: left; 
		height: auto;
		width: auto; 
		z-index: 0;}
 
#right { float: right;
		height: auto;
		width: auto;
}
 
#cam1 {
	background-image: url(images/Animated_Gif_Camera1.gif);
	background-repeat: no-repeat;
	position: fixed;
	height: 74px;
	width: 73px;
	left: 3%;
	top: 190px;
	z-index: 98;
}
 
#cam2 {
	background-image: url(images/Animated_Gif_Camera2.gif);
	background-repeat: no-repeat;
	position: fixed;
	height: 74px;
	width: 73px;
	right: 3%;
	top: 190px;
	z-index: 98;
}
 
p.news{ background-image: url(images/logo_mini.png);
		background-position: 5px 5px; 
		background-repeat: no-repeat;
		padding-left: 115px;
		padding-top: 9px;
		height: auto;
		min-height: 30px;
		width: auto;
		margin-top: 10px;
		}
 
p.news2{ background-image: url(images/logo_mini.png);
		background-position: 5px 9px; 
		background-repeat: no-repeat;
		background-color: #333;
		padding-left: 115px;
		padding-top: 11px;
		height: auto;
		min-height: 30px;
		width: auto;
		}
 
div#footer { 
		margin-left: 16%;
		margin-right: 16%;
		height: 30px;
		width: auto;	
		margin-bottom: 2px;
		background-color: #C00;
		text-align: center;
		line-height: 30px;
		z-index: 1;
}
 
img#digg {
	left: 0px;
	background-repeat: no-repeat;
	position: fixed;
	top: 300px;
	height: 77px;
	width: 158px;
	z-index: 100;
}

Tags:

CSS Layouts

Thu, 2009-07-02 17:34

ljbailey

Offline

Enthusiast

Timezone: GMT+1

Joined: 2009-01-10

Posts: 220

Points: 55

Rather than us having to

Rather than us having to look at your id's and classes in the html, then in the css and constantly jump back and forth to try and work out what you are trying to achieve it would be easier if you could post a link so that we can see the look you are going for and direct you on a better way to go about it.

Liam Bailey can make web pages look exactly how he wants using CSS, and learns a little more every site he codes. You can view his latest design for his SEO Copywriting services company, and the latest design he has done, which is for the company blog.

Thu, 2009-07-02 19:15

eddie22487

Offline

Regular

Timezone: GMT-6

Joined: 2009-05-13

Posts: 13

Points: 6

Absolutely! Sorry about

Absolutely! Sorry about that!

www.myachi.com/TEST/myachigonsite/

Let me forewarn you. I know this looks like a 90's site, but it's the design that my boss wants. I'm still designing a banner for it, etc. I just need a better way to lay it out. Also, I know that IE6 doesn't support fixed images, is there a better way to get that static frame?

Thanks so much, and I really appreciate your help!

Please help me with my Layout

Rather than us having to

Absolutely! Sorry about

New forum topics

User login

Navigation