|
CSS - 2 Positioning Types
I really don't think this is possible, but I'll ask anyways,
can I have position fixed for the horizontal alignment of an element, but position absolute for its vertical alignment? Similar TutorialsI have a style that I want to use, but it only seems to work in mozilla browsers. I have looked around on the internet but can't find any simular posts. Here is what I have: Code:
<div class="border1" style="width: 150px;">
<div class="title">
title
</div>
<div class="content">
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
</div>
</div>
and the styles Code:
body {
font-size: 12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.border1 {
border: 1px solid #666;
border-color: #999;
margin: 5px;
}
.title {
border: 1px outset #999;
background-color:#4D77A8;
padding: 2px 5px;
color: white;
}
.content {
border: 1px outset #999;
background-color:#F9F9F9;
padding: 5px;
}
.content a{
text-decoration: none;
padding: 2px 3px;
display: block;
color: #333333;
}
.content a:hover{
border: 1px solid #333;
background-color: #84A1C3;
padding: 1px 2px;
color: white;
}
in IE the only border style that seems to work is "solid". If anyone can help I would appreciate it. Thx when using unordered lists, is there any way to get more than 3 different bullet designs as you go into deeper nests? after the 3rd nest, the same bullet design is used over and over again. I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo If you view the following site in Firefox http://mtm324php.info/nasdaq.xml you can see this... NASDAQ 100 Current quotes then the date because this is the order of the data in the XML document... Well let's suppose I want it like this... http://mtm324php.info/nasdaq.bmp with the date on the very top. How would I do this in CSS? It has to be in CSS as that is the requirement. Thank you. Can somebody help me. I have been dealing with IE6 bugs for awhile, and I know that IE6 has trouble with floating divs. I have listed the code below. It would be easier to look at the page on the website because it is very simple, but I am not allowed to post a URL Why does IE6 push the "main" div (yellow) down below everything. If I make the width 874px it takes its normal place just under the red "top" div, but it does not stretch all the way to the edge of the blue "container" div. It looks perfect in IE7, Firefox. Can anybody tell me why? Thanks so much in advance, Mike Code:
<style type="text/css">
body {background-color: #CCCCCC;}
#container {width:980px;height:1000px;margin:0px auto 0px auto;background-color:#0000FF;padding:0;}
#top {height:81px;width:980px;background-color:#FF0000;padding: 0px;}
#leftColumn {float:left;background-color:#8781bd;height:5001px;width:103px;z-index: 20;border-bottom:1px solid #000;}
#main {margin:0;padding:0;float:left;height:500px;width: 877px;background-color:#FFFF00;}
</style>
</head>
<body>
<div id="container">
<div id = "top"></div>
<div id = "leftColumn">
</div> <!--end of #leftColumn-->
<div id="main">
</div>
</div>
Hi all, I'm trying to get the two <ul> tags in div#header to sit on top of each other (horizontally), and for both of them to sit next to the <h1> title tag. The problem is that the second <ul> floats left underneath the <h1>. Any suggestions? Relevant HTML: Code: <div id="header"> <h1>Athena:</h1> <ul> <li><a href="library.php" alt="Browse Library">Library</a></li> <li><a href="project.php" alt="Browse Projects">Projects</a></li> <li><a href="personal.php" alt="Browse Personal Section">Personal</a></li> </ul> <br /> <ul> <li><a href="" alt="">Subhead1</a></li> <li><a href="" alt="">Subhead2</a></li> </ul> </div> Relevant CSS: css Code: Original - css Code #header { width:98%; margin:0px auto; background-color: #2E5C8A; border:solid #2E5C8A; 2px; border-width: 0px 5px 0px 5px; color:#fff; padding:5px; } #header a { text-decoration:none; color:#fff; } #header a:visited { text-decoration:none; color:#fff; } #header h1 { font-size: 3em; margin: 0px; display:inline; } #header ul { list-style-type: none; display: inline; } #header li { vertical-align: top; display: inline; padding: 0px 5px 0px 5px; margin: 0px 5px 0px 5px; border:solid #49496e 1px; background-color:#8699ad; font-size: 1em; font-weight: bold; } #header ul li:before { content: "\2606 \0020"; } #header li:hover { border:solid #fff 1px; background:#49496e; } #header ul li:hover:before { content: "\2605 \0020"; }
Also - is there anyway of getting the <li>'s to be the same width? Thanks heaps, --Simon This is a snippet of what I have in my css: Code:
#page-body {
width:100%;
background:#000 url(bg_night.jpg) bottom left repeat-x scroll;
margin:0;
padding:0 0 125px 0;
border:1px solid red;
border-top:33px solid #cfad34;
color:#fff;
clear:both;
}
The css above works great but now I want to include an image in the lower left-hand corner of the page-body also. So while I have something like the following: Code:
<html>
<body>
<div id="page-body>
.....
</div>
</body>
</html>
I am hoping to create a class where I can position this second image. I don't want to use absolute positioning because the page body will increase in height size based on the growth on the content inside. Any suggestions? Thanks in Advance. stupid question I have a three column layout I picked up from the web here and there and I am trying to be clever and of course, since I am not a CSS pro...I am blowing it! the css I am messing with is as follows: container holds the three columns and the header and footer. in the header section..which is called #top, I have an image which is the logo for the page. The top is 95 px high. what I wanted to do was split the TOP div into two sections, with the second one starting at 340px from the left and go about 250 px across. naturally, I tried to use: #new_section { margin-left: 323px; margin-right: 0px; margin-top:55px;---bottom of #TOP div--- padding:0px 0px 40px 0px; border-bottom:2px solid #D7C8AC; background-color:#E2DCDC; } all the variations I used either worked in IE and not NS or vice versa. I know it is just a simple positioning issue I am overlooking. any help would be appreciated greatly. thanks! jpm226@comcast.net ************************** #container { width:auto; margin:0px 0px 0px 0px; background-color:transparent; color: #333; line-height: 130%; background-image:url(bg.gif); background-position:left; background-repeat:repeat-y; } #top { padding:0px; height:95px; border-bottom:2px solid #E2DCDC; background-color:#F5F5F5; background-image:url(header.gif); background-repeat:no-repeat; background-position:left; } .text{ padding:4px; fontalatino linotype; color:#000; text-align:justify; } #leftnav { float: left; width: 322px; margin-top:0px; padding:0px; } #rightnav { float: right; width: 214px; margin-top:149px; margin-right:2px; padding:0px; background-color:transparent; /*border-left:1px solid green; border-right:1px solid green;*/ } .news { margin: 0px 10px 0px 10px; background-color:transparent; /*height:235px;*/ border: 2px solid #fff; } #image { margin-left: 323px; margin-right: 0px; margin-top:0px; padding:0px 0px 96px 0px; border-bottom:2px solid #D7C8AC; background-color:#E2DCDC; background-image:url(desk.gif); background-position:right; background-repeat:no-repeat; } #content { margin-left:323px; margin-right: 216px; margin-top:0px; padding:10px 0px 30px 0px; max-width: 36em; border-left:1px solid red; border-right:1px solid red; background-color:transparent; } .content2 { position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */ width:auto; min-width:120px; margin:20px 8px 10px 8px; border-top:2px solid #fff; border-bottom:2px solid #fff; background-color:#F5F5F5; padding:10px; z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */ } #footer { clear: both; margin: 0; padding:0px; color: #333; border-top: 1px solid #fff; background-color:#EEE8E8; } Hello friends, Need some help with CSS layer positioning, which for the last couple of days has been the cause of much frustration. I am updating my site, and am converting some of my code to be more semantic. The test page, which looks 'right' is here. The semantic version, which now places the footer and sidebar within their own divs is here (I have removed the javascript and other text to keep things as simple as possible): The problems I am experiencing: The side bar, shaded blue for clarity is now 'outside the box', see the first link to see how it should be; There is a gap between the bottom of the extra div and the top of the footer div; The positioning of the sidebar is affecting the header/nav - try mousing over 'contact'; In short, I am trying to convert my existing layout to this, but can't seem to get there. Here is what I am striving for: Code: |------------------------------------ | Navigation | |------------------------------------ |Breadcrumbs <p> | ------------------------------------- | | | | Content | Sidebar | | | | ------------------------------------- | Optional Extra | ------------------------------------- | Footer | ------------------------------------- Any help much appreciated! Okay I need help with this CSS, I am very new with CSS I am having trouble positioning this Navigation Bar to the right, it is stuck to the left, and I need it to be so it will always stay on top of everything. My HTML Page The Code. Code: <head><noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script SRC="http://mytubeforum.webs.com/jquery-1.3.2.min.js"></SCRIPT>
<script type="text/javascript">
function nav(){
$('div#nav ul li').mouseover(function() {
$(this).find('ul:first').show();
});
$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').hide();
});
$('div#nav ul li ul').mouseleave(function() {
$('div#nav ul li ul').hide();;
});
};
$(document).ready(function() {
nav();
});
</script>
<style type="text/css">
/*NAVBAR CODE*/
#nav{
width: 460px;
padding:460px;
float: right;
align: right;
position: absolute;
background:url(http://i34.tinypic.com/5bzbmd.png);
background-repeat: no-repeat;
height:38px;
line-height:32px;
padding:0 10px;
}
#nav ul,
#nav ul li
{
margin:0;
padding:0;
list-style:none;
}
#nav ul li{
float:left;
display:block;
}
#nav ul li a:link,
#nav ul li a:visited{
color:#000000;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 30px 0 10px;;
margin-top:3.5px;
display:block;
}
#nav ul li a:hover{
color:#3b414c
}
#nav ul li ul li{
float:none;
display:block;
}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
color:#444;
font-size:12px;
font-weight:bold;
text-decoration:none;
padding:0 20px;
clear:both;
border-bottom:solid 1px #DEDEDE;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
#nav ul li ul li a:hover{
color:#3b414c;
background:#EBEFF7;
}
.submenu {
position: absolute;
width: 140px;
background: #efefef;
padding:20px;
border:solid 1px #b2b2b2;
border-top:none;
z-index: 1000;
display:none;
line-height:26px;
padding: 15px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">MyTube</a>
<ul class="submenu">
<li><a href="/forum.htm">Home</a></li>
<li><a href="/portal.htm">Portal</a></li>
<li><a href="/arcade-f12/">Arcade</a></li>
<li><a href="/calendar.htm">Calendar</a></li>
<li><a href="/search.forum">Search</a></li>
<li><a href="/faq.htm">FAQ</a></li>
<li><a href="/memberlist.forum">Members</a></li>
<li><a href="/groupcp.forum">Groups</a></li>
<li><a href="/MyTube-Chat-h2.htm">Chatbox</a></li>
</ul>
</li>
<li><a href="#">Messages</a>
<ul class="submenu">
<li><a href="/msg.forum?folder=inbox">Inbox</a></li>
<li><a href="/msg.forum?folder=sentbox">Sentbox</a></li>
<li><a href="/msg.forum?folder=outbox">Outbox</a></li>
<li><a href="/msg.forum?folder=savebox">Saved Mail</a></li>
</ul>
</li>
<li><a href="#">Profile</a>
<ul class="submenu">
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile">Information</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=preferences">Preferences</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=signature">Signature</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=avatars">Avatar</a></li>
<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=friendsfoes">Friends & Foes</a></li>
</ul>
</li>
<li><a href="#">Log In | Out</a>
<ul class="submenu">
Under Construction<hr>
<li><a href="/profile.forum?mode=register">Register</a></li>
<li><a href="/login.forum?connexion">Login</a></li>
</ul>
</li>
</div>
Please Help Me, Thank you. I am having some problems getting this to perform properly. I want this to look like this: http://img108.imageshack.us/img108/8540/newestdesign5qd.jpg But it is displaying like this: http://img119.imageshack.us/img119/8716/problem1qk.jpg Could you guys tell me what is causing that, and maybe any other touch ups in the code I should do. I will gladly list anyone that helps out in the site credits. BTW, HTML in Next Post, the post was too long with it. Here is the CSS: Code:
ul{
display: inline;
list-style-type: none;
}
li{
display: inline;
list-style-type: none;
}
BODY {
background: #104080 url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/bg.gif) repeat-x;
color: #000000;
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
margin: 0px 0px 0px 0px;
padding: 0px;
}
a:link {
font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvectica, sans-serif;
color: #a4a4a4;
font-weight: bold;
}
a:visited {
font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvectica, sans-serif;
color: #a4a4a4;
font-weight: bold;
}
#wrapper {
width: 740px;
color: #FFFFFF;
background: url(images/sidebar_all.jpg) repeat-y;
}
#logo_2 {
float: left;
}
#logo_3 {
float: right;
}
#logo_3 IMG {
border: none;
}
#ads {
margin-left: 216px;
margin-top: 0px;
background-color: #FFFFFF;
}
#sidebar {
margin-top: 0;
background: url(images/side_bg.gif) repeat-y;
float: left;
width: 187px;
height: 100%;
}
.content-title {
background: url(images/content.jpg);
width: 554px;
float: right;
height: 28px;
}
.content-title-text {
padding-left: 2px;
margin-top: -7px;
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #7489b9;
float:left;
}
.content-title-text a:link {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #7489b9;
}
.content-title-text a:visited {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #7489b9;
}
.content-title-text a:hover {
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #a6c1ff;
}
.postmetadata {
background: url(images/content_2.jpg);
width: 554px;
height: 22px;
float: right;
}
.postmetadata-text {
color: #bdc4d9;
font-family: verdana, arial, sans-serif;
font-size: 10px;
font-weight: bold;
margin-top: 1px;
}
.post {
font-family: verdana, arial, sans-serif;
font-size: 10px;
color: #000000;
float: right;
}
.entry {
margin-left: 187px;
}
#footer {
margin-left: 187px;
width: 554px;
}
.contentcol {
width: 554px;
}
#sidebar_fix {
background: url(images/side_bg.gif) repeat-y;
height: 100%;
}
#left_bg {
background: url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/pagebg_l.gif) repeat-y;
float:left;
}
#right_bg {
background: url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/pagebg_r.gif) repeat-y;
float:right;
}
#sidebar ul li ul li {
color: #666666;
list-style-type: square;
list-style-image: none;
}
.side_exp {
background: url(images/side_bg.gif) repeat-y;
}
.categories {
float: left;
margin: 0;
}
I've created a site with a static background.gif "body" element, then a container (div) where I'm putting my stuff. I want the container to roll up and down against the nice static background in the body margins.(there is an example of what I'm trying to do at CSS garden http://www.csszengarden.com - check out Gothica #027)The problem is that when I use absolute positioning for the elements - the container ignores the content and doesn't size properly. But when I use relative positioning, I can make everything work out OK - except it generates tons of extra space that gets dumped at the bottom of the pages. So my question is - does anyone know how to get rid of the space? BTIA ok Hey guys, I am in need of a bit of help. The following URL incurs some pretty bad busts in IE (Mac and PC), that busts differently depending on the version. If I could get some feedback on what is happening and if possible maybe some posting of the code that fixes the problems. URL: http://clients.gravitydigital.com/pure_excitement/welcome.html Thanks for your help in advance, Collin Hello, I've got a div tag that I want to position tags off of using css's margin attribute. The data amount is variable, so sometimes the tags that position off of the first tag end up in different locations depending on the amount of data placed in the div tag. I've tried setting a static height attribute, but it doesn't appear to work for me. Any ideas? CSS is very new to me so if someone can help me with my problem i would very much appreciate it. I am using a background image that is 1024 x 768px. I have positioned this using... Code: body
{
background-color:#000000;
background-image:url('images/homebg.jpg');
background-repeat:no-repeat;
background-position:center top;
}
As i am new to css i am using tables to position my content over the top of the background image. If the browser is adjusted in size the content appears to be going over the edge of the background image instead of staying with in it. is there any way i can lock the 2 (background image and content) in position so that when the browser is made smaller or the site is viewed in different resolutions it will remain together without the content going over the edge of the background. Or am i doing this wrong. I have read about wrappers and such but i don't really understand them. An example of what i am trying to achieve is at www.blue-leaf.co.uk Hi bit of a newbie but confused by following code; The images all display ok and the rounded gif work ok but I get a gap between the divs (highlighted below). Is it margins/paddings? Pulling hair out! Thanks, Bill. .child { width: 200px; background-color:green; background-image: url(unt.bmp) ; } .parent {margin: 0; padding: 0} .bl1 {background: url(_round_bl.gif) bottom left no-repeat ;background-color: blue;width: 200px } .br1 {background: url(_round_br.gif) bottom right no-repeat;} .tl1 {background: url(_round_tl.gif) top left no-repeat;} .tr1 {background: url(_round_tr.gif) top right no-repeat;} </style> </head> <body> <div class="parent"> <div class="child"> <div class="tl1"> <div class="tr1"> <h2>Hello </h2> </div> </div> </div> /* When displayed in browser the above is separated from the following by a gap of around 20 odd px */ <div class="bl1"> <div class="br1"> <h2>Hello</h2> </div> </div> </div> </body> </html> Hi, I am a newbie to CSS and I need some help. Unfortunately I have not got a domain name for the site as yet, so I am unable to show you the actual site. However I have pasted the relevant CSS and HTML for the index page below. I want to position the two items in red at the bottom of the side bars. The first image is on the left (sidebar) and the other is on the right (sidebar b) Many thanks Dave. **** CSS **** /*LEFT CONTENT*/ #sidebar { float : left; width: 140px; margin : 0 0 0 0; padding: 10px; color : #000000; background : #ffffff; } /*RIGHT CONTENT*/ #sidebar-b { float : right; width : 140px; margin : 0; padding : 10px; background : #ffffff; color : #000000; } HTML <div id="sidebar" style="height: 372px"> <p> </p> <p> </p> <p> </p> <div><img alt="Help for Heroes" height="51" src="img/helpforheroes_logo.jpg" width="120" /></div> <p> </p> <p> </p> <p> </p> <p> </p> <div> <a href="no url"> <img style="border:0;width:88px;height:31px" src="vcss.gif" alt="Valid CSS!" /> </a></div> </div> <div id="sidebar-b" style="height: 372px"> <script type="text/javascript"> /* Live Date Script- For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, */ var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday") var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December") function getthedate(){ var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym var hours=mydate.getHours() var minutes=mydate.getMinutes() var seconds=mydate.getSeconds() /*var dn="AM" if (hours>=12) dn="PM" if (hours>12){ hours=hours-12 }*/ var dn = ""; /*if (hours==0) hours=12*/ if (minutes<=9) minutes="0"+minutes if (seconds<=9) seconds="0"+seconds //change font size here var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn +"</b></font></small>" if (document.all) document.all.clock.innerHTML=cdate else if (document.getElementById) document.getElementById("clock").innerHTML=cdate else document.write(cdate) } if (!document.all&&!document.getElementById) getthedate() function goforit(){ if (document.all||document.getElementById) setInterval("getthedate()",1000) } </script> <span id="clock"></span> <p> </p> <p> </p> <h2>Squadron News</h2> <div class="scroll"> <script type="text/javascript"> //new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds) new pausescroller(pausecontent, "pscroller1", "someclass", 3000) document.write("<br />") </script> </div> <div> <img src="img/next_gen.jpg" alt="Next Generation" title="Next Generation" height="80" width="136"/> </div> <p> </p> <p> </p> <p> </p> </div> Here is my CSS
Code: .container {
margin-top: 0;
width: 100%;
\width: 100%;
w\idth: 100%;
border: 1px solid gray;
}
.banner {
background-color: rgb(213, 219, 225);
top: 0px;
left: 0px;
width: 100%;
left: 0;
top: 0;
position: relative;
}
.content {
margin-left: 200px;
background-color: gray;
height: 100%;
left: 0;
top: 0;
position: relative;
}
.sidebar-a {
float: left;
width: 200px;
\width: 200px;
w\idth: 200px;
background-color: rgb(235, 235, 235);
height: 100%;
left: 0;
top: 0;
position: relative;
}
.footer {
clear: both;
padding: 0;
margin-top: 0;
background-color: rgb(213, 219, 225);
}
And it outputs...this . I was wondering how I get rid of the white spaces around the banner. Thanks. I have a select menu that I want to sit on the bottom of the page regardless of the length of the page. How can this be achieved? Height of menu is 235px and width is 150px. Hi all.. I just stumbled onto this site via a google search. I'm having a problem with some "div" work and postitioning of a graphic. I'm working on a site and have decided to do all the positioning via CSS. The positioning shows fine in Firefox but the last portion is shifted down 10 or so pixels in Internet Explorer. Here's a quick show of the error: URL Here's the HTML with CSS below: Code: <div id="Table_01"> <div id="hdr-main_"> <img id="hdr_main" src="images/hdr_main.jpg" width="557" height="161" alt="" /> </div> <div id="hdr-mnu-left_"> <img id="hdr_mnu_left" src="images/hdr_mnu_left.jpg" width="5" height="20" alt="" /> </div> <div id="hdr-mnu-bg_"> <img id="hdr_mnu_bg" src="images/hdr_mnu_bg.jpg" width="547" height="20" alt="" /> </div> <div id="hdr-mnu-right_"> <img id="hdr_mnu_right" src="images/hdr_mnu_right.jpg" width="5" height="20" alt="" /> </div> <div id="hdr-mnu-bottom_"> <img id="hdr_mnu_bottom" src="images/hdr_mnu_bottom.jpg" width="557" height="5" alt="" /> </div> </div> </body> </html> I've also pasted the CSS code: Code: #Table_01 {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:768px;
}
#hdr-main_ {
position:absolute;
left:228px;
top:41px;
width:557px;
height:161px;
}
#hdr-mnu-left_ {
position:absolute;
left:228px;
top:202px;
width:5px;
height:20px;
}
#hdr-mnu-bg_ {
position:absolute;
left:233px;
top:202px;
width:547px;
height:20px;
}
#hdr-mnu-right_ {
position:absolute;
left:780px;
top:202px;
width:5px;
height:20px;
}
#hdr-mnu-bottom_ {
position:absolute;
left:228px;
top:222px;
width:557px;
height:5px;
}
Does anyone know why my graphic is turning out the way it is in IE and not in Firefox? This is my first serious attempt at positioning with CSS.. so bear with me Thanks all... Jason |
|||||||