Web Hosting Talk






PDA

View Full Version : divs and vertical alignment question

larwilliams
01-13-2009, 03:12 AM
Hi,
I am working on redesigning our site to be fully CSS/XHTML and have hit my head up against a wall it seems. I have tried some of the recommended ways of vertically aligning a div that is inside of another div to the middle, but nothing seems to work properly.
I am trying to position the top links (Home and Contact Us) and the domain search area in the middle of black area. They are 2 divs (floated) inside another wrapping div.
Here is the code:
template1.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>New Design</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="contentdiv">Content will go here.</div>
<div id="headerdiv">
<div id="menuarea">
<!-- begin menu and domain area -->
<div id="insidemenu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div>
<div id="domainarea">
<!-- start register domain table -->
<form action="cart.php?a=add&amp;domain=register" method="post">
Domain:<input name="sld" type="text" class="inputField" value="" />
<select name="tld" class="inputDropDown">
<option>.ca</option>
<option>.com</option>
<option>.net</option>
<option>.org</option>
</select><input name="go" type="submit" class="inputSubmit" value="GO" />
</form>
<!-- end register domain area -->
</div>
<!-- end menu and domain area -->
</div>
<div id="logocell"><img src="images/lcwsoft-v2_03.png" alt="" width="489" height="170" /></div>
<div id="clientlogincell">Client login stuff will go here</div>
</div>
</div>
</body>
</html>
style.css
@charset "utf-8";
/* CSS Document */
body {
padding: 0px;
margin: 0px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #C0C0C0;
text-align: center;/* FOR IE */
}
form {
margin: 0px;
padding: 0px;
}
input {
margin: 0px;
padding: 0px;
}
option {
margin: 0px;
padding: 0px;
}
select {
font-family: Tahoma;
font-size: 11px;
}
#wrapper {
text-align: left;/* for good browsers */
margin: 0px auto;
background-color: #FFFFFF;
border: solid 1px #000000;
width: 780px;
height: auto;
position: relative;
}
/* POSITIONING STUFF */
#headerdiv {
min-height: 254px;
height: 254px;
position: absolute;
top: 0px;
width: 100%;
clear: both;
}
#contentdiv {
margin-top: 254px;
width: 100%;
}
/* HEADER SECTIONS */
#menuarea {
width:100%;
clear:both;
min-height:45px;
height:45px;
color: #BECB37;
background-image:url(images/topleftmenu.png);
background-repeat:repeat;
}
#logocell {
float:left;
width:489px;
}
#clientlogincell {
float:right;
width:291px;
min-height:170px;
height:170px;
}
/* TOP AREA */
#insidemenu {
float:left;
width:489px;
}
#insidemenu ul {
list-style-type:none;
}
#insidemenu ul li {
display:inline;
padding-right:30px;
}
#insidemenu ul li a {
color: #BECB37;
text-decoration: none;
}
#insidemenu ul li a:visited {
color: #BECB37;
text-decoration: none;
}
#insidemenu ul li a:hover {
color: #FFFFFF;
text-decoration: underline;
}
#domainarea {
float:right;
width:291px;
}
#domainarea form {
padding:0px;
margin:0px;
}
.inputField {
width: 83px;
min-height: 17px;
height: 17px;
border: none;
}
.inputDropDown {
min-height: 17px;
height: 17px;
border: 0px;
margin: 0px;
padding: 0px;
}
.inputSubmit {
min-height: 18px;
height: 18px;
width: 60px;
color: #FFFFFF;
background-color: #828d0a;
border: solid 1px #FFFFFF;
font-size: 11px;
font-weight: bold;
}
Jaseeey
01-13-2009, 07:40 AM
Have you tried using: (?)
<div align="center">Text goes here</div>
colbyt
01-13-2009, 08:25 AM
That code and that CSS in IE7 yields this screenshot. (http://jkin.com/wht-ss.jpg)
What goes where and I will try to help you?
Is your black a bg image? No black in this at all.
Xenatino
01-13-2009, 09:49 AM
That code and that CSS in IE7 yields this screenshot. (http://jkin.com/wht-ss.jpg)
What goes where and I will try to help you?
Is your black a bg image? No black in this at all.
I'd guess that it is supposed to end up like http://www.lcwsoft.com/
larwilliams
01-13-2009, 10:16 AM
Have you tried using: (?)
<div align="center">Text goes here</div>
Hi Jaseeey, thanks but I am trying to center it vertically, not horizontally.
larwilliams
01-13-2009, 10:21 AM
I'd guess that it is supposed to end up like http://www.lcwsoft.com/
Yes. Like in the OP, it's just a redesign to be more CSS/XHTML :) I will post a modified version in a second that will show what my problem is.
larwilliams
01-13-2009, 10:23 AM
Here it is, CSS and all:
template1-5.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>New Design</title>
<style type="text/css">
/* CSS Document */
body {
padding: 0px;
margin: 0px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #C0C0C0;
text-align: center;/* FOR IE */
}
form {
margin: 0px;
padding: 0px;
}
input {
margin: 0px;
padding: 0px;
}
option {
margin: 0px;
padding: 0px;
}
select {
font-family: Tahoma;
font-size: 11px;
}
#wrapper {
text-align: left;/* for good browsers */
margin: 0px auto;
background-color: #FFFFFF;
border: solid 1px #000000;
width: 780px;
height: auto;
position: relative;
}
/* POSITIONING STUFF */
#headerdiv {
min-height: 254px;
height: 254px;
position: absolute;
top: 0px;
width: 100%;
clear: both;
}
#contentdiv {
margin-top: 254px;
width: 100%;
}
/* HEADER SECTIONS */
#menuarea {
width:100%;
clear:both;
min-height:45px;
height:45px;
color: #BECB37;
background-color:#000000;
}
#logocell {
float:left;
width:489px;
}
#clientlogincell {
float:right;
width:291px;
min-height:170px;
height:170px;
}
/* TOP AREA */
#insidemenu {
float:left;
width:489px;
}
#insidemenu ul {
list-style-type:none;
}
#insidemenu ul li {
display:inline;
padding-right:30px;
}
#insidemenu ul li a {
color: #BECB37;
text-decoration: none;
}
#insidemenu ul li a:visited {
color: #BECB37;
text-decoration: none;
}
#insidemenu ul li a:hover {
color: #FFFFFF;
text-decoration: underline;
}
#domainarea {
float:right;
width:291px;
}
#domainarea form {
padding:0px;
margin:0px;
}
.inputField {
width: 83px;
min-height: 17px;
height: 17px;
border: none;
}
.inputDropDown {
min-height: 17px;
height: 17px;
border: 0px;
margin: 0px;
padding: 0px;
}
.inputSubmit {
min-height: 18px;
height: 18px;
width: 60px;
color: #FFFFFF;
background-color: #828d0a;
border: solid 1px #FFFFFF;
font-size: 11px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="contentdiv">Content will go here.</div>
<div id="headerdiv">
<div id="menuarea">
<!-- begin menu and domain area -->
<div id="insidemenu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div>
<div id="domainarea">
<!-- start register domain table -->
<form action="cart.php?a=add&amp;domain=register" method="post">
Domain:<input name="sld" type="text" class="inputField" value="" />
<select name="tld" class="inputDropDown">
<option>.ca</option>
<option>.com</option>
<option>.net</option>
<option>.org</option>
</select><input name="go" type="submit" class="inputSubmit" value="GO" />
</form>
<!-- end register domain area -->
</div>
<!-- end menu and domain area -->
</div>
<div id="logocell"><img src="images/lcwsoft-v2_03.png" alt="" width="489" height="170" /></div>
<div id="clientlogincell">Client login stuff will go here</div>
</div>
</div>
</body>
</html>
I want want to center the items vertically like in the current design for our site, but it seems impossible to center a div inside another div. At least, none of the solutions I got from Google have worked so far. Please help :)
larwilliams
01-13-2009, 02:31 PM
Is my problem that hard to solve? :D
colbyt
01-13-2009, 10:06 PM
It can be done. I saved the source and will look at it in the morning.
CSS validated and looking like the site does now.
larwilliams
01-13-2009, 10:18 PM
It can be done. I saved the source and will look at it in the morning.
CSS validated and looking like the site does now.
Cool. I've tried everything I could Google and think of, to various degrees of success. Any insight is greatly appreciated.
larwilliams
01-14-2009, 04:15 PM
Anyone else?