alignment help

Ninjakreborn · June 5, 2006

[b]SOLVED-The problem has been totally solved, thanks for all the help[/b]

I need help figuring out 2 things, here is my coding for the html, css, follow by link to the site, and what I am trying to do I can't figure out.

[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=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="funnyemails.css" />
<meta name="Description" content="If you have a funny email, feel free to put it into our database, to send to all the people signed up to recieve funny emails" />
<meta name="Keywords" content="funny, emails, email, fowards, joke, video, song, poem, picture, yellow pages, services" />
<meta name="author" content="A service of Yellow Pages Online" />
<title>Funny Email Forwards</title>
</head>
<body>
<div id="header">
<img src="images/logo.gif" /><br />
<p id="headertext">The web's directory of funny Email forwards<br />
<a href="http://www.yellowpagesservices.com" id="headerbelow" title="The Yellow Pages Services" target="_blank"><img src="images/ypol.gif" /></a></p>
</div>
<div id="containleftright">
<div id="leftdiv">
<h3>Add Something Funny:</h3>
<form name="submitinformation" id="submitinformation" action="post">
<label for="type">What Type of Funny is it:</label>
<select tabindex="1"name="type" id="type">
<option>Video</option>
<option>Picture</option>
<option selected="selected">Joke</option>
<option>Song</option>
<option>Poem</option>
<option>Story</option>
</select><br />
<label for="name">Name the Funny:</label>
<input tabindex="2" name="name" id="name" type="text" maxlength="80" /><br />
<label for="keywords"><a href="keywords.htm">Keywords:</a></label>
<input tabindex="3" name="keywords" id="keywords" type="text" maxlength="80" /><br />
<label for="file">Upload your file here:</label>
<input tabindex="4" name="file" id="file" type="file" /><br />
<input tabindex="5" name="submit" id="submit" type="submit" value="Do It!" />
</form>
</div>
<div id="middlediv">
<p>OR</p>
</div>
<div id="rightdiv">
<h3>Search For Something Funny:</h3>
<form name="search" id="search">
<label for="searchfield">What would you like to search for?</label>
<input tabindex="6" name="searchfield" id="searchfield" type="text" size="33" maxlength="80" /><br />
<input tabindex="7" name="search" id="search" type="submit" value="Do It!" />
</form>
</div>
</div>
<div id="wrapbottom">
<h3 id="directory">Directory of Listings:</h3>
<div id="upperleft">
<h3 id="specialheader1">VIDEOS</h3>
<ul>
<li>Link Number one will go here</li>
<li>Link Number two will go here</li>
<li>Link Number three will go here</li>
</ul>
</div>
<div id="uppermid">
<h3 id="specialheader2">PICTURES</h3>
<ul>
<li>Link Number one will go here</li>
<li>Link Number two will go here</li>
<li>Link Number three will go here</li>
</ul>
</div>
<div id="upperright">
<h3 id="specialheader3">JOKES</h3>
<ul>
<li>Link Number one will go here</li>
<li>Link Number two will go here</li>
<li>Link Number three will go here</li>
</ul>
</div>
<div id="lowerleft">
<h3 id="specialheader1">SONG</h3>
<ul>
<li>Link Number one will go here</li>
<li>Link Number two will go here</li>
<li>Link Number three will go here</li>
</ul>
</div>
<div id="lowermid">
<h3 id="specialheader2">POEM</h3>
<ul>
<li>Link Number one will go here</li>
<li>Link Number two will go here</li>
<li>Link Number three will go here</li>
</ul>
</div>
<div id="lowerright">
<h3 id="specialheader3">STORY</h3>
<ul>
<li>Link Number one will go here</li>
<li>Link Number two will go here</li>
<li>Link Number three will go here</li>
</ul>
</div>
</div>
<div id="copyright">
<ul id="bottomnav">
<li><a href="about.htm" tabindex="8" title="The About Page">About!</a></li>
<li><a href="signup.php" tabindex="9" title="Sign up for the newsletter">Sign Up!</a></li>
<li><a href="contactus.php" tabindex="10" title="Contact Us">Contact Us!</a></li>
</ul>
<p>copyright 2000-2006 funnyemailfowards.com a service of yellowpages online.  All rights reserved.</p>
</div>
</body>
</html>[/code]

[code]body /* This part styles the body, and prepares it for the content */
{
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
font-family:Arial, Helvetica, sans-serif; /*this sets the font type*/
font-size:15px; /*This sets the general setup of the text on the site*/
}

h3
{
font-weight:bold;
text-decoration:underline;
}

img /* this removes borders around linked images */
{
border:none;
}

/*Everything in this section below here controls the form field boxes, this allows them to all be spaces properly and make them all look even from the form names */
#type
{
margin-left:50px;
}

#name
{
margin-left:100px;
}

#keywords
{
margin-left:142px;
}

#file
{
margin-left:75px;
}

/* End working with form fields */
/* Below starts working with the header, situating the text, and the images for the header, and getting it all aligned and set up properly */
#header
{
padding-left:10px;
padding-top:10px;
}

#headertext
{
padding-left:15px;
text-indent:0px;
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
font-weight:bold;
}

#headerbelow
{
padding-left:20px;
}
/* End header modification */

/*Everything in the following sections lays the foundation for the main body set up.  What happens here is I set the 3 main sections in the middle, below the header.  I wrapped them in something, and put them all in a container, and working with all 3 I set them up to style correctly, and made it easier to make any types of modifications on any of the 3 elements in the containment div */
#containleftright
{
padding:0px;
width:900px;
margin-top:20px;
margin-left:8px;
}

#leftdiv
{
float:left;
margin-right:4px;
}

#middlediv
{
font-weight:bold;
float:left;
margin-right:80px;
margin-top:30px;
}

#rightdiv
{
float:left;
margin-top:4px;
}

/*end structuring main sections */\

/* everything in this section is going to set up the way the stuff looks at the bottom, and how it is all organized. This whole part may seem confusing, what it does to wrap the entire section at the bottom in 1 div, then it has 6 different sections for new divs, I made it this way so someone could very easily add in more rows if necessary with only having to change around a few tag names, and working a little bit adding some to the css.  This way also allows it to wrap around as it minimizes, it just adds more rows for people with smaller browser windows. */
#wrapbottom
{
width:900px;
clear:both;
}

#upperleft
{
float:left;
}

#uppermid
{
float:left;
}

#upperright
{
float:left;
}

#lowerleft
{
float:left;
}

#lowermid
{
float:left;
}

#lowerright
{
float:left;
}

#specialheader1
{
background-color:#000099;
color:#FFFFFF;
text-decoration:none;
font-size:1em;
width:300px;
}

#specialheader2
{
background-color:#000099;
color:#FFFFFF;
text-decoration:none;
font-size:1em;
width:300px;
}

#specialheader3
{
background-color:#000099;
color:#FFFFFF;
text-decoration:none;
font-size:1em;
width:400px;
}
/* end bottom structuralization */

/* This below here is goign to kill some of the obnoxious parts out of the lists, removing the bullets, pulling away the padding on the left hand side ex cetera. */
li
{
list-style-type:none;
margin-left:0px;
padding-left:0px;
}
/* end the part with messing around with the lists */

/* this is just random styling, and doing things here and there to the general structure of the site */
#copyright
{
clear:both;
}

#bottomnav li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

#directory
{
margin-bottom:0px;
}[/code]

[a href=\"http://www.funnyemailforwards.com/\" target=\"_blank\"]Website I am working on[/a]

Ok Here are the things I am trying to do, I just can't figure out, at the bottom, I created a list with navigation, I can't get it to center, or the thing below it, I tried text-align:center in css, I rely mostly on CSS, and I REALLY don't want to use html to position, I want to be able to do this in, CSS, is it possible for me to find a way to get those centered.
ANY help I would be greatly appreciative.

rpm · July 25, 2006

dear friend just replace this code in your css,it works in IE and FF
bye.

#copyright
{
clear:both;
text-align:center;
}

Sign In

alignment help

Recommended Posts

Ninjakreborn

Link to comment

Share on other sites

rpm

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information