|
CSS - Having Trouble Aligning Ads And Login Box
www.devwebsites.com is the url. You wil see the login box below teh ads and I am trying to get the login stuff to be next to the ads.
heres my code Code: <table cellspacing="0" cellpadding="0" border="0" style="padding-left:12px;margin-top:-9px; padding-top:3px;"> <tr> <td class="header"> <script type="text/javascript"><!-- google_ad_client = "pub-0405738179168907"; /* 468x60, created 9/20/08 */ google_ad_slot = "6289309218"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <form method="post" id="commentform" action="" name="smelogin"> Username : <div><input type="text" id="username" size="11" name="username" style="background-image:url(/images/u.gif); background-position:left; background-repeat:no-repeat ; height: 18px; width:15%; display:block; border-bottom:#000000 solid 1px; padding-left:18px;" maxlength="21" /></div> <div> Password : <input type="password" style="background-image:url(/images/p.gif); background-position:left; background-repeat:no-repeat ; height: 18px;width:15%; display:block; border-bottom:#000000 solid 1px; padding-left:18px;" id="password" size="11" name="password" maxlength="25" /></div> </td> </tr> </table> <div align="center"><input type="submit" name="login" value=" Login "> </div> <p><a style="font-size: 8pt;background:transparent;padding:0px;" href="/register.html"><div>[ Signup ]</div></a> Help? Similar TutorialsI'm working on a new page at http://www.plumeriawebdesign.com/webdevgirl/ and am having problems aligning the middle div column. In IE it shows approximately 25px below the dark blue date bar while it shows correctly in FF. I'm also having problems with it extending further than the 100% wrapper div. Here is my HTML Code:
<body>
<div id="wrapper">
<div id="top" align="center"><img src="images/webdev_02.gif" alt="Exceptional web design made affordable"/></div>
<div id="nav">
<?php
$today = date("D M d Y");
echo "$today\n";
?>
</div>
<div id="left">left column</div>
<div id="right">right column</div>
<div id="middle">middle column</div>
</div>
</body>
CSS is he Code:
/* CSS Document */
html {
height: 100%;
}
body {
margin: 0px 0px 0px 0px;
background-color:#333;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
position: relative;
min-width: 600px;
width: 100%;
height: 100%;
color: #333;
}
#wrapper {
width: 100%;
height: 100%;
}
html>body #wrapper {
height: 100%;
}
#left {
float: left;
left:0px;
top:113px;
width:12%;
background-color: #a2cde3;
border-right: 2px solid #333;
padding: 5px 5px;
}
#middle {
top: 0px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 12%;
margin-right:12%;
padding: 5px 5px;
height: 100%;
min-width: 360px;
width: 76%;
background-color: #626262;
color: #000;
}
html>body #middle {
margin-left: 12%;
margin-right:12%;
}
#right {
float: right;
top: 0;
width:12%;
background-color: #a2cde3;
border-left: 2px solid #333;
padding: 5px 5px;
}
#top {
min-width: 600px;
width: 100%;
height: 100px;
background-color: #FFF;
color: #FFF;
voice-family: "\"}\"";
voice-family: inherit;
}
html>body #top {
height:100px;
}
#nav {
top: 100px;
left: 0;
min-width: 600px;
width: 100%;
height: 12px;
background-color: #005698;
color: #e4e4e4;
vertical-align: bottom;
text-align:left;
text-indent: 5px;
clear: both;
}
Hi everyone, I'm having some trouble positioning this footer to the bottom of the page. I'd like for the footer box to display directly under the content/navigation bar, with a gap of four pixels between the respective boxes. In action: http://www.stabhead.com/css/index.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Layout</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
color: blue;
text-align: center;
margin: 5px 0px 0px 0px;
}
#container {
position: relative;
width: 981px;
border: 0;
padding: 0;
margin: 0;
text-align: left;
}
#topbar {
position: absolute;
width: 981px;
height: 95px;
top: 0px;
background-color: #DDDDDD;
}
#loginbox {
position: absolute;
width: 249px;
height: 92px;
top: 97px;
background-color: #FFBD72;
}
#adbar {
position: absolute;
top: 97px;
left: 251px;
width: 730px;
height: 92px;
background-color: #949494;
}
#navbar {
position: absolute;
top: 193px;
left: 0px;
width: 117px;
background-color: #DDDDDD;
}
#content {
position: absolute;
top: 193px;
left: 121px;
width: 860px;
background-color: #DDDDDD;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 64px;
background-color: #DDDDDD;
}
-->
</style>
</head>
<body marginheight="0" marginwidth="0">
<div align="center">
<div id="container">
<div id="topbar">topbar</div>
<div id="loginbox">loginbox</div>
<div id="adbar">adbar</div>
<div id="navbar">navbar</div>
<div id="content">content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
The content may consist of something that is 500 pixels in height, or 10,000 pixels - it totally depends on how many words or images are in there, so the footer needs to grip on to the bottom of the content and stretch across the whole of the bottom of the page. If anyone could help me out here, it would be greatly appreciated. Here's the html and css for http://www.pxgo.com/lifepak-prime.php - What I really need help with is aligning the footer (I know absolute positioning is bad for me, but relative doesn't work either) and floating my image (which for some reason vanished once I added the floatleft class). Thanks in advance for any help! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD><TITLE>Lifepak Prime</TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css"></HEAD>
<BODY>
<?php
include ("include/head.txt");
?>
<?php
include ("include/menu.txt");
?>
<div id="content"><h2>Lifepak Prime</h2><img class="floatleft" src="graphics/lifepak-prime.bmp" width="192" height="192" alt="Lifepak Prime" />
Lifepak Prime contains all the nutrition in Lifepak anti-aging formula <i>and more</i>. Add quality years to your life by providing the vitamins, minerals, and trace elements your body needs to protect and regenerate cells.
<br><br>Lifepak Prime all-natural dietary supplements addresses the specific needs of men over 40 and post-menopausal women with BioGinkgo 27/7 extract (ginkgo biloba), milk thistle, glutathione, alpha-lipoic acid, coenzyme Q10, and grape seed extract.
<br><br>Lifepak Prime provides 150 IU, or 500 % daily value, of vitamin E, increased levels of B6, B12, and zinc for optimal nutrition intake. Lifepak Prime also provides unique dietary components for bone health, as well as those that support memory and circulation.
<br><br>My family uses Lifepak so I'll be happy to answer questions about Lifepak on the <a href="http://www.pxgo.com/discuss/viewforum.php?f=9">Lifepak message board</a>. We'd also love to hear from other people who are using Lifepak.
<br><h2>Lifepak information</h2>Lifepak Prime is optimized for men over 40 and post-menopausal women. There is also a Lifepak for pregnant and lactating women (Lifepak PreNatal), Lifepak for woomen from 18-menopause (<a href="lifepak-women.php">Lifepak Women</a>), and adults from 18 to 40 (<a href="lifepak.php">Lifepak anti-aging formula</a>).
<br><br>Lifepak is a vitmain, mineral, phytonutrient supplement. Lifepak is much more than a multiple although it does address common deficincies:
<ul><li>Vitamins A, E, and B6
<li>Zinc, iron, calcium, and magnesium for healthy bones
<li>Alpha-lipoic acid, vitamins B9 (folic acid), B12, C, E, flavinoids, and carotenoids for the anti-aging processes of cellular protection and cellular regeneration.
</ul></div>
<br><br>
<?php
include ("include/ads.txt");
?><br><br>
<?php
include ("include/footer.txt");
?>
</BODY></HTML>
Code: BODY { margin-left: 0%; margin-right: 0%; margin-top: 0%; font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR:#000000; BACKGROUND-COLOR:#ffffff; }
A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
FONT {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 13px; FONT-FAMILY: verdana, arial, sans-serif}
.titular {COLOR: #000000; background-color:#238c13;}
.negro {background-color:#000000; color: #FFFFFF; FONT-SIZE: 12px; FONT-FAMILY: verdana, arial, sans-serif; font-weight:bold;}
.floatleft {float: left; border=1; padding=1; margin: 4px;}
a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
#head {
font-family:verdana, arial, sans-serif;
color:#000000;
font-size:16px;
font-weight:800;
background:#238c13;
padding:0px;
}
#head h1 {
margin:0px 0px 0px 0px;
padding:20px;
color:#000000;
font-size:18px;
font-weight:800;
z-index:1;
}
#head a,
#head a:link,
#head a:visited,
#head a:active,
#head a:hover {
margin:0px 0px 0px 0px;
padding:20px;
color:#000000;
font-family:verdana, arial, sans-serif;
font-size:18px;
font-weight:800;
text-decoration: none;
}
/* All the content boxes belong to the content class. */
#content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:200px;
margin:30px 170px 20px 220px;
border:0px;
background-color: #ffffff;
padding:10px;
color: #000000;
font:bold 15px verdana, arial, sans-serif;
z-index:5;
}
#content h2 {font:bold 16px verdana, arial, sans-serif; padding:15px;}
#content a:link { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:visited { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:active { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:hover { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
#navi {
position:absolute;
width:200px;
top:120px;
left:20px;
border-right:#238c13 2px dotted;
background-color:#ffffff;
padding:0px;
color:#238c13;
font:bold 13px verdana, arial, sans-serif;
z-index:2;
}
#navi A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
#ads {
position:absolute;
width:130px;
top:100px;
right:10px;
border-left:#238c13 2px dotted;
background-color:#ffffff;
padding:10px;
z-index:3;
}
#footer {
position:absolute;
width:100%;
top:730px;
margin:10px 0px 0px 0px;
padding:10px 0px 0px 0px;
border-top:#238c13 2px dotted;
background-color:#ffffff;
z-index:4;
}
#footer A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
The problem that I am having stems from attempted compatability for 1. IE/other browsers, and 2. Not scrolling or having an absurd amount of dead space on different resolutions. Given that I'm currently using a 16:9 laptop, anything that I make for my resolution is very likely to scroll vertically on anything else. I would like to preface this by saying that, while I am a young person and am .. relatively web savvy, I'm also pretty miserable at CSS. I'll pick it up whenever I need to use it, but these times generally end up being a year plus apart, and so I generally .. forget everything that I picked up the last time, and have to re-learn. I am very good at nesting tables, and using an absurd number of them to get things to look how I want, but .. I really want to get away from that. CSS is cleaner and less .. well, less flat out dumb than using seven tables in one page to align things the way you want them? The Actual Problem I Have: (Do ignore the hideously coloured background, the green/blue combo is temporary until I get the code working properly. Anyway, so apparently I can't post URLs so: clocktock.com is the website in question, code on it is Code: <html> <head> <link rel="stylesheet" type="text/css" href="poing.css"> <link rel="icon" type="image/png" href="img/RL16.png"/> <title>[ eroding.net ]</title></head> <body> <table cellspacing="0" cellpadding="0" class="main" height="100%" width="100%" valign="bottom"><tr><td width=100% align=center valign="bottom"> <table border="0" cellspacing="0" cellpadding="0" height="90%"> <tr><td background="img/top_left.png" width=14 height=39></td> <td background="img/top.png" width=622 height=39><img src="img/top_left2.png" border=0></td> <td background="img/top_right.png" width=14 height=39></tr></td> <tr><td background="img/left.png" width=14 height=1></td> <td bgcolor="black" width="700" height="800" border=0 cellspacing=0 cellpadding=0 background="img/table_bg_grunge.png" valign="top"> <br><br> <center> aaa <br><br> </center> </td><td background="img/right.png" width=14></tr></td></table> </tr></td></table> </body></html> CSS Code: body { font-style: normal; font-variant: normal; font-weight: normal;
font-size: 12px;
font-family: Tahoma, Arial; background-color: #0F0F0F;
color:
#424242; background: url(img/damask.png);
background-attachment:
fixed; background-repeat: repeat; margin-bottom: 0px; vertical-align:
bottom;}
table { color: #424242; font: 11px Tahoma, Arial; margin: 0px;
}
sm {font-size: 0.9em; }
a:link { color: #424242; }
a:visited { color: #595959; }
a:hover { color: #424242; text-decoration:none; }
a:active { color: #424242; }
What I would, ideally, like to have is for the box to take a percentage of space. Say, vertically 80 or 90%, and then a blank remainder on the top. Horizontally, say, 10 or 15% on either side and then 70 or 80% for the "box." But, google as I might, I just can't find the right CSS commands to do it. It just gets funny looking and shrinks all my border images (Though I erased the code that caused that). Hi everyone, I am having trouble aligning my content to the edge of the table somehow it shows 20pixels down and I cann't figuere out how to bring it up. Any help will be greatly appreciate. thanks Code:
<style>
ul { list-style-type: none; margin: 1.0em 0 0 0px; padding: 0; position:relative; overflow: visible; height: auto; text-decoration: none; color: #33FF00;}
ul li { text-decoration: none; width: 230px; color: #000; }
ul li a, ul li a:visited {height: 1.2em; width: 200px; display: block; text-decoration: none; background: blue; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px; color: #000;}
ul li a:hover { height: 1.2em; display: block; background-color:#FF0000; color: #fff000;}
ul li a.currentpage, ul li { height: 1.2em; text-decoration: none; background: #00ffff; padding: 3px; color: #fff;}
</style>
<table width="234" border="1">
<tr>
<td width="230" height="85">
<ul><li><a href="">HOME</a></li>
<li><a href="">LINK TWO</a></li>
</ul>
</td>
</tr>
<tr><td></td></tr>
</table>
Hi I have an issue aligning some links. i have it perfect in FF but it is not the same in IE. http://www.sun-awnings-direct.co.uk/the-carino-p-29.html It is the white breadcruumb trail in question. Can anyone advise what IE is doing differently and how I can solve it? Thanks a lot After browsing through w3schools and learning most of what css has to offer I for some reason can't figure out a way to align items using css. I was just wondering if someone could help me with the correct tag. www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please. CSS LINK http://www.devwebsites.com/estilos.css HI there I am wondering if anyone can help with a css issue I am strugging to resolve. The url is simplyroomsandsuites co uk (forward slash) blog You can see where the footer image is floating left.. I have tried to float it centrally but it disappears. Thanks for any help. .footerArea {float: left; display: inline; width: 950px; background: url(/images/main_area_bottom_curve.png) top left no-repeat; padding: 30px 0 20px 0;} Hi, I'm relatively new to CSS and while I'm aware that you should code for Firefox and fix for IE, I'm having problems with what I am sure is a very simple bit of coding. The css is just a simple layout: Code:
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
background-image : url(../_images/grad_bkg.jpg);
color : #000000;
}
#wrapper {
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
padding : 15px 0 0 0;
width : 888px;
}
#header {
text-align : center;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 83px;
background-image : url(../_images/gbc_banner.jpg);
}
#navigation {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 25px;
background-image : url(../_images/menu.gif);
background-repeat : no-repeat;
}
#mainimage {
display:inline;
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 331px;
}
#divide {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 5px;
background-color : #000000;
}
#content {
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
}
#footer {
clear : both;
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
width : 888px;
height : 218px;
background-image : url(../_images/footer.jpg);
}
but in the mainimage div I am inserting the following table and it is not displaying correctly in FF: Code:
<table width="835" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="215" height="270"><img src="_assets/_images/rangemaster_img_link.jpg" width="215" height="270" /></td>
<td width="190" height="270"><img src="_assets/_images/falcon_img_link.jpg" width="190" height="270" /></td>
<td width="232" height="331" rowspan="2"><img src="_assets/_images/aga_img_link.jpg" width="232" height="331" /></td>
<td width="198" height="331" rowspan="2"><img src="_assets/_images/rayburn_img_link.jpg" width="198" height="331" /></td>
</tr>
<tr>
<td colspan="2" height="61" bgcolor="#000000"><img src="_assets/_images/companion_txt.gif" width="405" height="61" /></td>
</tr>
</table>
s anyone able to give me a pointer? Thanks.... ive searched google throughout and im blank on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
div
{
width:70%;
margin:0 auto;
height:20em;
border:.4em solid black;
}
p
{
border:.4em solid black;
margin:0 auto;
line-height:8em;
display:inline;
width:55%;
height:8em;
}
span
{
display:block;
color:red;
font-size:2em;
width:60%;
margin:0 auto;
text-align:center;
}
</style>
</head>
<body>
<div>
<p>
<span>X</span>
</p>
</div>
</body>
</html>
I need the outer box to be vertiacllly aligned within the viewport, the other boxes vertically aligned within each other. does that make sense? I thought u could do it with line-height but i can't get it working. fresh eyes? Edit: New code there. So what I want is to have 2 forms with buttons aligned horizontally. <form><input type="submit"></form> <form><input type="submit"></form> They should be like this: [Button 1] [Button 2] But instead, they go like this: [Button 1] [Button 2] And I don't know the CSS for it, so thanks in advance. Whta's the best way to do this? I'm tryiong to avoid using tables. but i cant think of a more liquid way to do it... .........key:value someOtherKey:someOthervalue ...more keys:more values ...........k:v (the periods are just placeholders for whitespace) Thanks! I am not sure if this is a problem that can be solved with css or not. I have recently switched from straight html to php and have no experience in css. Basically I split my pages into 5 separate areas. Header, footer, right column, left column and center column. The problem that I am running into is that the header and footer are in the right spot on the page but the left, right and center columns are way off. Here is a link to my site OWPT I have my problem, with an example, explained in more detail. Any help would be greatly appreciated. ok... im making a site with CSS... this is my css code - Quote: a:link {color:white} a:visited {color:white} a:hover {color:black} a:active {color:white} body {background-color: #666666} #head{ position: relative; top: 7px; left: 140px; width: 707px; font-family: verdana; font-size: 12px; color:white; background-color: #666666; background-image: url(wavy.jpg); } #content { position: relative; top: 7px; left: 140px; width: 697px; font-family: verdana; font-size: 12px; text-align: justify; color:white; background-color: #666666; background-image: url(image/back.jpg); padding: 5px; } #foot{ position: relative; left: 140px; width: 707px; font-family: verdana; font-size: 9px; text-align: center; color:white; background-color: 666666; background-image: url(wavy.jpg); } and this is my code for my PHP page, which reads the css - Quote: <html> <head> <link rel="stylesheet" type="text/css" href="fula.css" /> </head> <body> <div id="head"><img src="image/head.jpg"></div> <div id="content"> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div> <br> <div id="foot">Graphics & Design by "NO NAMED DESIGNS" - Copyright 2006 "KLSOON2BE"</div> </body> </html> ok... now, if you look at it in firefox... everything aligns just fine but if you look at it in I.E its out of place... any help would b greatly appreciated! to view the page this problems on - http://www.outlawz.frihost.net/fula/test2.php I'm trying to align an image, header, and some text that is right aligned all on the same row. I've been reading so much about inline and block elements that my head feels like it's going to explode. It would look like this: Code: Picture - Header Text over here I'm not sure if everything should be span inside one class or what. I'm very confused. Please help a noob. I know I'm probably still thinking in terms of tables... I have a <div> container with several more <divs> stacked up inside it. They have varying widths. I would like some (maybe not all) to be centered within the primary <div>. Now, I know I can do this: <div align="center">, but align isn't a property in a style sheet, is it? I have a full css site that im in the mits of creating. It has 3 colums across in the main part of the site as you will see in the link below that some of my divs dont seem to be lining up w/ the top of the page... http://www.pollutionpaintball.com/version3/dennis_wells.html I have the first column that contains the thumbnails floating right with a margin-left of the navgition width and the profile div width. Next I have the navigation floated left Then I have the profile section in a div w/ a left - margin the size of the navigations width... any pointers would help... Hi all, I am having trouble getting my third column to sit in place correctly. Here is the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0051)http://www.jonra.com/css-demos/css-layout-demo.html --> <HTML><HEAD><TITLE>CSS layout using divs</TITLE> <META http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <META content="" name=Keywords> <META content="" name=Description> <STYLE type="text/css" media="all"> @import url( css/commonSite.css ); </STYLE> <META content="MSHTML 6.00.2900.2668" name=GENERATOR></HEAD> <BODY> <DIV class="panelS"> <DIV class="colOne"><IMG src="images/nav_sites.gif" align="right" alt=""> <DIV class="colTwo"> <DIV class="linkS"> <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> </DIV> <DIV class="colThree"></DIV> </DIV> </DIV> </DIV> </BODY></HTML> Code:
.panelS
{
BACKGROUND-COLOR: #adadad;
WIDTH: 760px;
position: absolute;
}
.colOne {
FONT-WEIGHT: bold;
FONT-SIZE: medium;
LEFT: 0px;
WIDTH: 85px;
COLOR: #ffffff;
HEIGHT: 21px;
position:relative;
}
.colTwo {
FONT-SIZE: medium;
LEFT: 85px;
WIDTH: 475px;
HEIGHT: 21px;
background-color:#FF6633;
position:relative;
}
.colThree {
FONT-SIZE: medium;
LEFT: 560px;
WIDTH: 200px;
COLOR: #ffffff;
HEIGHT: 21px;
position:relative;
background-color:#00CCCC;
}
.linkS
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:link
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:visited
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:hover
{
FONT: bold 10px Verdana;
COLOR: #0055c3;
TEXT-ALIGN: right;
TEXT-DECORATION: underline
}
I was wanting all the columns side by side. Any ideas where i might be going wrong? Cheers I'm building a site: www.bunjareecottages.com.au At the moment, the middle column (which is the only variable sized bit on the page) is set to a min height of 495px. This works ok on larger resolutions, but creates a scroll even when no content reaches that length on smaller resolutions. That's as expected. What I want to have the middle section having a min height of 110px from the top of the page, and 10px from the bottom. So if the content was very little, the yellow background would still be 10px from the bottom, but if content was really long and there was a scoll, the end of the yellow was 10px from the bottom. Currently the yellow content area is relatively positioned from top by 110px, with margins of the correct sizes on each side. Everything else is absolutely positioned. Any ideas? |
|||||||