css help with centering and text boxes [Archive]

View Full Version : css help with centering and text boxes

Raztat

07-11-2007, 05:52 AM

Hey how would I center the navigation menu?
Also is there a way to add a text box in the middle of the site? also if i can use a txt box is there a way i could use an outside file to be displayed in that box?
Also when i make my bottom links they appear in the middle how can i position them to the bottom? the codes are below.

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 rel="stylesheet" type="text/css" href="css/main.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bkconway.com</title>
</head>

<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div class="container" id="navCircle">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
<p> </p>
<p><img src="images/bkconway.png" width="225" height="51" class="logo"/></p>
<p><img src="images/akcrate2.png" width="490" height="535" class="bkconway"/></p>
<p class="bottomlinks">

</body>
</html>

CSS

body {
font:"Times New Roman", Times, serif;
color: black;
background-color: white;
font-size:16px;
}

* { margin: 0; padding: 0; }

a:link {
text-decoration: none;
color: #000000;
font-size:16px;
}

a:visited, a:hover, a:active {
text-decoration:line-through;
color: red;
}

.center {
text-align: center;
}

p {

text-align: left;
font-size:16px;
}

h1{
font-size:18px;
font-weight:600;
margin-bottom: 10px;
}

/* container */

.container {
height: 5px;
width: 800px;
padding: 15px;
margin-top: 3px;
border: 1px solid #ccc;
background: white;
}

/* circle */

#navCircle {
padding: 0 0 20px 10px;
vertical-align:middle;
outline:none;
border:hidden;
}

#navCircle li {
display: inline;
list-style-type: circle;
border:hidden;
text-align:center;
outline:hidden;

}

#navCircle a:link, #navCircle a:visited {
float: left;
font-size: 16px;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
color: #000000;
border:hidden;
outline:hidden;

}

#navCircle a:active, #navCircle a:hover {
color: #000;
}

/* images */

img.bkconway {
position: absolute;
left: 4px;
top: 314px;
z-index:1;
}

img.logo {
position:absolute;
left: 10px;
top: 22px;
}

/* container 2 */

.container2 {
width: 850px;
padding: 109px 15px 15px 15px;
margin-top: 250px;
border: 1px solid #ccc;
border-width: 0 1px 1px 1px;
background: #FFCCFF;
}

/* bottom links */

p.bottomlinks {
margin: 70px auto 14px auto;
text-align: center;
font-size:13px;
}

riptide

07-11-2007, 02:36 PM

if you have a link to your site you should post it. also are you talking about an Iframe or a form element

Raztat

07-11-2007, 06:32 PM

i don't no i am relatively new to css. the site is http://www.bkconway.com I decided to redo my site and I cant figure out how to make color spaces and to put txt into them.

Raztat

07-11-2007, 06:34 PM

also if i view the site in IE it looks really different. the ak picture is a diff color and the blue space is gone.

alexjewell

07-11-2007, 07:40 PM

To center the navigation:

#navCircle2{
text-align: center;}

#navCircle2 ul{
margin: 0px auto;}

And then in the HTML:

<div class="container" id="navCircle">
<div id="navCircle2">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</div>

For putting an external file into a textarea, you could use a server side language, like PHP:

<textarea name="something"><?php include('something.html'); ?></textarea>

You would have to change the page extension to .php, though, that you put that in.

Also, for the two images, you need a space before the "/>:

<p><img src="images/bkconway.png" class="logo" /></p>
<p><img src="images/akcrate2.png" class="bkconway" /></p>

I also put their widths/heights in the css:

img.bkconway {
position: absolute;
left: 4px;
top: 314px;
z-index:1;
width: 225px;
height: 51px;}

img.logo {
position:absolute;
left: 10px;
top: 22px;
width: 490px;
height: 535px;}

Now, the reason the images look different in IE is IE doesn't support PNG transparency well. There isn't a whole lot you can do about that - except use transparent gif's instead. Or drop transparency entirely until IE supports it better.

Raztat

07-12-2007, 01:23 AM

thanks for the help ill try all that out once i get my comp in working order, it died on me today so i had to reinstall windows.