Need help with simple CSS! - Webmaster Forum - Web Design, Programming and SEO forums

06-24-2011, 04:50 AM

JoeDisone

Status: Junior Member
Join date: Jan 2009
Location:
Expertise:
Software:

Posts: 45

iTrader: 2 / 100%

JoeDisone is on a distinguished road

Need help with simple CSS!

hey guys.. If someone doesn't mind helping me with something really small I would greatly appreciate it..

Here is what I got going on..
www.tikihookahbar.com/frozec/coded

Here is what I need it too look like..
www.tikihookahbar.com/frozec

I cant get the background graphics to stay centered and to the top, and keep the logo centered about 100px down on top of that image.. I havent coded in awhile.. anyone know the best scenario to make this work? Here is the code..(not like there is much, haha)

here are the images im using..
www.tikihookahbar.com/frozec/coded/images

html

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dj Frozec</title>
<link rel="stylesheet" href="style.css" media="screen" />

</head>

<body>
<div id="wrapper">
 <div id="logo"></div>

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

here is the css

Code:

body {
  background: #000 url('images/main_bg.jpg') repeat;
}

#wrapper {
  margin: 0 auto;
  padding: 0px;
  height: 744px;
  width: 1100px;
  background:url('images/bg.jpg') no-repeat center;
}

#logo {
  margin: 83px auto;
  padding: 0px;
  width:369px;
  height: 209px;
  background:url('images/logo.png') no-repeat;
}

for anyone that helps me, I thank you in advance!

$0.05

06-24-2011, 12:10 PM

JoeDisone

Status: Junior Member
Join date: Jan 2009
Location:
Expertise:
Software:

Posts: 45

iTrader: 2 / 100%

JoeDisone is on a distinguished road

Anyone? Please?

06-24-2011, 01:31 PM

Michael C

Status: Senior Member
Join date: Jul 2006
Location: Scotland, East Lothian
Expertise:
Software:

Posts: 888

iTrader: 4 / 100%

Michael C is on a distinguished road

Code:

wrapper {
  text-align:center;
   padding:83px 0 0 0;
  height: 744px;
  width: 100%;
  background:url('images/bg.jpg') no-repeat top center;
}

#logo {
  margin: 0 auto;
  width:369px;
  height: 209px;
  background:url('images/logo.png') no-repeat;
}

The holding element should have text-align:center and the contained element you want centered margin:0 auto.

I always try to eliminate margins where possible and apply padding to the holding element as well. I guess that's a personal preference.

$0.12

06-24-2011, 01:53 PM

akshaytkd

Status: I'm new around here
Join date: Jun 2011
Location: New Delhi
Expertise: Javascript, CSS, HTML, jQuery
Software: Photoshop, Dreamweaver, Flash

Posts: 18

iTrader: 0 / 0%

akshaytkd is on a distinguished road

Code:

body {
  background: #000 url('images/main_bg.jpg') repeat;
}

#wrapper {
  margin: 0 auto;
  padding: 100px 0 0 0;
  height: 744px;
  width: 1100px;
  background:url('images/bg.jpg') no-repeat top;
}

#logo {
  margin: 0px auto;
  padding: 0px;
  width:369px;
  height: 209px;
  background:url('images/logo.png') no-repeat center;
}

first of all, in #logo, set top/bottom margin to 0.

Then in #wrapper div add a top-padding of 100px (or what ever height size you want).

$0.10