4 replies [Last post]
trugamer
trugamer's picture
Offline
newbie
Last seen: 3 years 46 weeks ago
Timezone: GMT+1
Joined: 2010-10-26
Posts: 2
Points: 3

Hey geniuses a programmer here having some problems...I am unfamiliar with html, css and all the others, but I'm pretty competent in them all (or so i like to think)
I have been having some problems with a dummy site I am trying to create. As you can see I am trying to go for header > body with two left and right section on which menu is left and content is right, and a simple footer.
here is the 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>
meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
title>Mighty
link rel="stylesheet" href="style.css" type="text/css" media="screen" />

/head>
body>
div id="wrapper">

div id="header">
div id="slogan">
span>The Big Taste
/div>
div id="logo">
/div>

/div>

div id="main">
div id="leftMain">
ul>
li>Home

li>Products

li>About Us

li>Contact Us

/ul>
/div>

div id="rightMain">
/div>
/div>

div id="footer">
div id="disclosure">
br />
The purpose of this text is to fill a space whereby the text would normally contain
somekind of disclosue in this form. This is a MIGHTY brand copywrite.
2010 trade mark sports drink.
/div>
/div>

/div>

/body>
/html>

seemingly very simple no...

here is the css:
@charset "UTF-8";
/* CSS Document */
body {
/*layout*/
margin: 0;
padding: 0;
border: 0;
background-color: #000; /*background will be black, but div containers will be white for dynamic*/
}
/*the '#' signifies the definition of a custom class*/
#wrapper {
margin: 20px auto;
width: 733px;
text-align: left;
height: 100%; /*To be changed, I want mighty site to be simple and effective*/
}
#header {
background-color: #fff;
height: 150px;
}
#header div {
float: left;
clear: right;
height: 150px;
}
#slogan {
width: 185px;
font: Verdana, Geneva, sans-serif;
font-size: 20px;
}
#slogan span {
letter-spacing: 2px;
}
#logo {
width: 470px;
font: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 38px;
letter-spacing: 3;
background-image:url(images/mighty.jpeg);
background-repeat:no-repeat;
}
#footer {
background-color: #0f0;
height: 50px;
font:Verdana, Geneva, sans-serif;
font-size: 7px;
text-align:center;
}
#main {
}
#leftMain {
width: 185px;
height: 500px;
}
#rightMain {
height: 500px;
width: 548px;
background-color: #fff;
background-image:url(images/bottle.jpg);
background-repeat:no-repeat;
}
nothing amazing here...
I'm just not sure why my Main-Right is misbehaving....your time and help is much appreciated.
Thank you.

The images used are included...this should help you see what the problem is Smile

AttachmentSize
bottle.jpg51.4 KB
mighty.jpeg9.48 KB
regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 6 weeks 4 days ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 307
Points: 347

Missing tags

It may just be that when you posted your html some of the tags went missing. You have no opening < tag on any of the tags and there are no closing tags for the li's, the title and the span tag.

body>
div id="wrapper">
 
div id="header">
div id="slogan">
span>The Big Taste

should be written
<body>
<div id="wrapper">
<div id="header">
<div id="slogan">
<span>The Big Taste</span>
</div>

Start with that and then we can address the other errors.

trugamer
trugamer's picture
Offline
newbie
Last seen: 3 years 46 weeks ago
Timezone: GMT+1
Joined: 2010-10-26
Posts: 2
Points: 3

I removed the tags because it

I removed the tags because it didn't post up my code and i forgot to use the CODE function I will repost the code as it stands.

<!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>Mighty</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 
 
</head>
<body>
	<div id="wrapper">
 
        <div id="header">
        	<div id="slogan">
				<span><br /><br /><br /><br /><br />The Big Taste</span>
			</div> <!-- end slogan -->
            <div id="logo">
			</div> <!-- end logo -->
 
        </div> <!-- end header -->
 
		<div id="main">
        	<div id="leftMain">
            <ul>
	            <li>Home</li><br />
                <li>Products</li><br />
                <li>About Us</li><br />
                <li>Contact Us</li><br />
            </ul>
            </div> <!-- end leftMain -->
 
            <div id="rightMain">
            </div> <!-- end rightMain -->
        </div><!-- end main -->
 
        <div id="footer">
        	<div id="disclosure">
            <br />
            	The purpose of this text is to fill a space whereby the text would normally contain <br />
                		somekind of disclosue in this form. This is a MIGHTY brand copywrite. <br />
                    		2010 trade mark sports drink.
            </div>
        </div>
 
    </div> <!-- end wrapper -->
 
 
 
</body>
</html>

Now here is the css:

@charset "UTF-8";
/* CSS Document */
 
 
body {
	background-color: #000; /*background will be black, but div containers will be white for dynamic*/
}
 
/*the '#' signifies the definition of a custom class*/
#wrapper {
	width: 733px;
	height: 100%; /*To be changed, I want mighty site to be simple and effective*/
}
 
 
#header {
	background-color: #fff;
	height: 150px;
}
 
 
#header div {
	float: left;
	clear: right;
	height: 150px;
}
 
 
#slogan {
	width: 185px;
	font: Verdana, Geneva, sans-serif;
	font-size: 20px;
}
 
 
#slogan span {
	letter-spacing: 2px;
}
 
 
#logo {
	width: 470px;
	font: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 38px;
	letter-spacing: 3;
	background-image:url(images/mighty.jpeg);
	background-repeat:no-repeat;
}
 
 
#footer {
	background-color: #0f0;
	height: 50px;
	font:Verdana, Geneva, sans-serif;
	font-size: 7px;
	text-align:center;
}
 
 
#main {
	height: auto;
}
 
#leftMain {
	width: 185px;
	height: 500px;
}
 
 
#rightMain {
	height: 500px;
	width: 548px;
	background-color: #fff;
	background-image:url(images/bottle.jpg);
	background-repeat:no-repeat;
}

I have seriously messed about with a lot of things I could think of, coming from a programming background. Things like testing for small widths etc. as u can see the picture is very small, and the background is white...I'm just not sure what is going wrong.

regia
regia's picture
Offline
Enthusiast
San Diego
Last seen: 6 weeks 4 days ago
San Diego
Timezone: GMT-4
Joined: 2010-10-24
Posts: 307
Points: 347

I presume you want your site

I presume you want your site to center in the browser window with a white background for the content and black for the body background. So the first thing you need to do is put the background colour on the "wrapper" div and margin: 0 auto; which will center it.

I'm not sure what you want to do with the header. I would just define "header" and put your mighty.jpg image as a background image and give it a height. Then use a h1 tag for the text which you can also style in the css. You don't need to have all the extra divs and spans in that section. In the footer, you can get rid of the extra div you had and use "p" tags instead. You need to learn how to use the different html tags not just place divs wherever you need them, that's called "divitis"

You do not need "br" tags after li's, each new li tag will start a new line unless you tell it otherwise.

I think you need to study a little more as you don't yet understand the basics of floating elements. Read this article http://css-tricks.com/all-about-floats/ or Google for others

danlisa
Offline
newbie
Last seen: 3 years 34 weeks ago
Timezone: GMT+8
Joined: 2011-01-04
Posts: 6
Points: 7

is't a big problem ?sounds

is't a big problem ?sounds difficult...ha ha ..