Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1747 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

A few CSS problems, looking for a few answers!

Thread title: A few CSS problems, looking for a few answers!
Closed Thread  
Page 1 of 2 1 2 >
    Thread tools Search this thread Display Modes  
08-25-2005, 02:21 AM
#1
Stan is offline Stan
Status: Member
Join date: Aug 2005
Location:
Expertise:
Software:
 
Posts: 269
iTrader: 0 / 0%
 

Stan is on a distinguished road

Send a message via AIM to Stan

  Old  A few CSS problems, looking for a few answers!

http://www.redorigin.net/portfolio/dbolt/

Problem list:

Browser Issues.. but they are last on my list for fixing, but most obvious.

Images are being overlapped by my footer

Flash is very invalid, anyone know a link to a tut on embedding flash through java or xhtml? the one i read i was clueless to.

And finally I could use some advice on how I should slice my boxes, should i make all of the places where content in one slice, or should i slice up each individually and when the content is there, it will overlay the bg image?

The XHTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Team Deadbolt Design. Copyright Red Origin 2005.</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />	
	<meta name="author" content="Stan Warren" />
	<meta name="copyright" content=" Stanley Warren and Red Origin Media Group 2005." />
	<meta name="description" content="Red Origin Design Group" />
	<meta name="keywords" content="digital art, counterstrike website design, website design, design firm, gaming movies, esports media" />
	<link rel="stylesheet" type="text/css" href="images/dbolt.css" />
	
</head>

<body>

<!-- Header -->

<div id="header">
</div>

<div id="navbar">

	<ul>
		<li><img src="images/nav_left.gif" width="18" height="54" alt="nav_left" /></li>
		<li><a href="about.html" id="about"></a></li>
		<li><a href="forums.html" id="forums"></a></li>
		<li><a href="media.html" id="media"></a></li>
		<li><a href="sponsors.html" id="sponsors"></a></li>
		<li><img src="images/nav_right.gif" width="18" height="54" alt="nav_right" /></li>
		<li><img src="images/nav_bar.gif" width="7" height="54" alt="1" /></li>
		<li><img src="images/logo.gif" width="225" height="54" alt="logo" /></li>
		
	</ul>

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

<!-- Main Content -->

<div id="wrap">


<div id="leftcontent">
	<br />
	<img src="images/roster.gif" alt="" />
	<br />
	<img src="images/irc.gif" alt="" />
	<br />
	<img src="images/matches.gif" alt="" />
	<br />
</div>

<div id="centercontent">

<p>

<!--url's used in the movie-->
<!--text used in the movie-->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="517" height="186" id="db_headlines" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="db_headlines.swf" />
<param name="menu" value="false" />
<param name="quality" value="best" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<embed src="db_headlines.swf" menu="false" quality="best" wmode="transparent" bgcolor="#ffffff" width="517" height="186" name="db_headlines" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

</p>
</div>

<div id="rightcontent">
	<br />
	<img src="images/sbox.gif" alt="" />
	<br />
	<img src="images/matches.gif" alt="" />
	<br />
	<img src="images/matches.gif" alt="" />

</div>
	

<div id="clearfooter"></div></div>
<div id="footer"><p><img src="images/contact.gif" alt="contact" /></p></div>



</body>
</html>
The CSS:
Code:
/* General Stuff */

html, body {
margin: 0;
padding: 0;
height: 100%; /* Required for footer to stick */
}



body {
background: #2d2d2c url(bg.gif) repeat-y 50% 0px;
background-attachment: fixed;
margin: 0;
padding: 0;
}

/* Structure */


#wrap {
position:relative;
min-height: 100%;
}

* html #wrap {
height:100%;
}

#clearfooter {
height:50px;
overflow:hidden;
}

#footer {
height: 33px;
position: relative;
bottom:0;
margin:auto;
background: url('foot_bg.gif') repeat-x;
}



#navbar {
background-color: #ECE9D8;
background-image: url('head_bg.gif');
background-repeat: repeat-x;
height: 54px;
margin: 0;
padding: 0;
}

#navbar ul {
  margin:0;
  padding:0;
  list-style:none;
}
#navbar li {
  float:left;
  margin:0;
  padding:0;
}

a#about {
display:block;
width: 80px; height: 54px;
border-width: 0;
margin:0px;
background: url('about.gif');
}

a#about:hover {
width: 80px; height: 54px;
border-width: 0;
margin:0px;
background: url('about_over.gif');
}

a#forums {
display:block;
width: 71px; height: 54px;
border-width: 0;
margin:0px;
background: url('forums.gif');
}

a#forums:hover {
width: 71px; height: 54px;
border-width: 0;
margin:0px;
background: url('forums_over.gif');
}

a#media {
display:block;
width: 52px; height: 54px;
border-width: 0;
margin:0px;
background: url('media.gif');
}

a#media:hover {
width: 52px; height: 54px;
border-width: 0;
margin:0px;
background: url('media_over.gif');
}

a#sponsors {
display:block;
width: 94px; height: 54px;
border-width: 0;
margin:0px;
background: url('sponsors.gif');
}

a#sponsors:hover {
width: 94px; height: 54px;
border-width: 0;
margin:0px;
background: url('sponsors_over.gif');
}

#footer {
clear: both;
padding: 0px;
margin-top: 0 px;
background: url('foot_bg.gif);
}

a#foot {
border-width: 0;
margin: 0px;
}

#leftcontent {
position: absolute;
left: 6.3%;
width:200px;
border: 0px;
}

#centercontent {
position: absolute;
margin-left: 24%;
border: 0px;
/* IE HACK*/
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 24%;
}

html>body #centercontent {
margin-left: 24%;
}

#rightcontent {
position: absolute;
right: 4.3%;
width:200px;
border: 0px;
thanks in advance, also if anyone sees any really bad code or mistakes can you point them out and guide me on how i could fix them?

-Stan

08-25-2005, 02:30 AM
#2
jono1 is offline jono1
jono1's Avatar
Status: Non-conformist
Join date: Jul 2005
Location: Canberra, Australia.
Expertise:
Software:
 
Posts: 1,172
iTrader: 0 / 0%
 

jono1 is on a distinguished road

  Old

08-25-2005, 02:33 AM
#3
ismith is offline ismith
ismith's Avatar
Status: Member
Join date: Jun 2005
Location:
Expertise:
Software:
 
Posts: 262
iTrader: 0 / 0%
 

ismith is on a distinguished road

  Old

Don't use position in CSS. Use Margin/Padding along with float, it works for me.

#rightcontent { float: right; }
#leftcontent { float: left; }
#centercontent { float: inherit; }

Make sure in the XHTML, in order it goes left content, center, right content. See example here: http://ismithop.com/id/mirai that's mine, hope it loads server has some trouble

08-25-2005, 02:44 AM
#4
Stan is offline Stan
Status: Member
Join date: Aug 2005
Location:
Expertise:
Software:
 
Posts: 269
iTrader: 0 / 0%
 

Stan is on a distinguished road

Send a message via AIM to Stan

  Old

thanks a bunch guys, hopefully soon enough this site will be all done in css and xhtml

ive only been workin on it for 4/5 days, was out of town for a few, and had no knowledge of css before this, I think im doing pretty good.

Next part will be PHP...

08-25-2005, 02:50 AM
#5
ismith is offline ismith
ismith's Avatar
Status: Member
Join date: Jun 2005
Location:
Expertise:
Software:
 
Posts: 262
iTrader: 0 / 0%
 

ismith is on a distinguished road

  Old

I'm learning PHP, a very good book I'm currently reading is here: Amazon - PHP and MySQL Web Development

It's a fantastic book, I've already learned enough to build a smal but functional CMS, I'm not even on page 100

08-25-2005, 03:23 AM
#6
Stan is offline Stan
Status: Member
Join date: Aug 2005
Location:
Expertise:
Software:
 
Posts: 269
iTrader: 0 / 0%
 

Stan is on a distinguished road

Send a message via AIM to Stan

  Old

nvm

08-25-2005, 03:27 AM
#7
Stan is offline Stan
Status: Member
Join date: Aug 2005
Location:
Expertise:
Software:
 
Posts: 269
iTrader: 0 / 0%
 

Stan is on a distinguished road

Send a message via AIM to Stan

  Old

when i do float's everything goes haywire!

08-25-2005, 06:28 PM
#8
Stan is offline Stan
Status: Member
Join date: Aug 2005
Location:
Expertise:
Software:
 
Posts: 269
iTrader: 0 / 0%
 

Stan is on a distinguished road

Send a message via AIM to Stan

  Old

www.redorigin.net/portfolio/dbolt/

flash is fixed and valid; thanks everyone

my biggest problem now is alignment (next to browser compatibility!)

Code:
/* General Stuff */

html, body {
margin: 0;
padding: 0;
height: 100%; /* Required for footer to stick */
}

body {
background: #2d2d2c url(bg.gif) repeat-y 50% 0px;
background-attachment: fixed;
margin: 0;
padding: 0;
}

/* Structure */

#wrap {
min-height: 100%;
}

* html #wrap {
height:100%;
}

#clearfooter {
height: 33px;
overflow:hidden;
}

#footer {
height: 33px;
position: relative;
bottom:0;
margin:auto;
background: url('foot_bg.gif') repeat-x;
}

#navbar {
background-color: #ECE9D8;
background-image: url('head_bg.gif');
background-repeat: repeat-x;
height: 54px;
margin: 0;
padding: 0;
}

#navbar ul {
  margin:0;
  padding:0;
  list-style:none;
}
#navbar li {
  float:left;
  margin:0;
  padding:0;
}

a#about {
display:block;
width: 80px; height: 54px;
border-width: 0;
margin:0px;
background: url('about.gif');
}

a#about:hover {
width: 80px; height: 54px;
border-width: 0;
margin:0px;
background: url('about_over.gif');
}

a#forums {
display:block;
width: 71px; height: 54px;
border-width: 0;
margin:0px;
background: url('forums.gif');
}

a#forums:hover {
width: 71px; height: 54px;
border-width: 0;
margin:0px;
background: url('forums_over.gif');
}

a#media {
display:block;
width: 52px; height: 54px;
border-width: 0;
margin:0px;
background: url('media.gif');
}

a#media:hover {
width: 52px; height: 54px;
border-width: 0;
margin:0px;
background: url('media_over.gif');
}

a#sponsors {
display:block;
width: 94px; height: 54px;
border-width: 0;
margin:0px;
background: url('sponsors.gif');
}

a#sponsors:hover {
width: 94px; height: 54px;
border-width: 0;
margin:0px;
background: url('sponsors_over.gif');
}

#footer {
clear: both;
padding: 0px;
margin-top: 0 px;
background: url('foot_bg.gif);
}

a#foot {
border-width: 0;
margin: 0px;
}

#leftcontent {
margin: 0 0 0 6.3%;
width:200px;
border: 0px;
float: left;
}

p.left {
background: url('ros_bg.gif') repeat-y;
margin: 0 0 0 0;
padding: 0px;
text-align: center;
height: 30px;
}

#centercontent {
margin-left: 0 0 0 15%;
border: 0px;
float: inherit;
/* IE HACK*/
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 18%;
}

html>body #centercontent {
margin-left: 24%;
}

#rightcontent {
right: 0 0 0 10.3%;
width:200px;
border: 0px;
float: right;
}

what is wrong with alignment? i cant even get the headline thing to move nor the right content, how can i get them so all the tops are aligned

08-25-2005, 10:42 PM
#9
opserty is offline opserty
Status: I love this place
Join date: Jan 2005
Location: UK, Birmingham
Expertise:
Software:
 
Posts: 606
iTrader: 0 / 0%
 

opserty is on a distinguished road

Send a message via MSN to opserty

  Old

this might be your problem:

Code:
#rightcontent {
right: 0 0 0 10.3%; /* Change to margin-right:10.3%; */
width:200px;
border: 0px;
float: right;
}
However it sees odd to me why you are giving such precise percentages, why not pixels instead. (for positioning the left & right content only)

08-25-2005, 11:44 PM
#10
Stan is offline Stan
Status: Member
Join date: Aug 2005
Location:
Expertise:
Software:
 
Posts: 269
iTrader: 0 / 0%
 

Stan is on a distinguished road

Send a message via AIM to Stan

  Old

i got the right content already, thanks though but now, the middle content refuses to center...

Closed Thread  
Page 1 of 2 1 2 >


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed