|
CSS - Css Positioning Oddity. Could Use Some Help.
New member here. The dreaded conflict between IE, Firefox, and Safari. In IE, the content centers on the page, as planned. On Firefox and Safari, the content pushes to the left side of the screen, despite what is specified in the style sheet. Any assistance in understanding and resolving this will be greatly appreciated.
Here is the style and markup: Code: 1 <head runat="server">
2 <title></title>
3 <style type="text/css">
4 div#divMain {
5 text-align: center
6 }
7
8 div#content {
9 position: relative;
10 width: 250px;
11 height: 100px;
12 background: #dad;
13 }
14
15 div#logo {
16 background: #cfc;
17 text-align: left;
18 position: absolute;
19 top: 20px;
20 left: 25px;
21 margin: 0px;
22 padding:0px;
23 border: 0px;
24 width: 200px;
25 }
26 </style>
27 </head>
28 <body>
29 <form id="form1" runat="server">
30 <div id="divMain">
31 <div id="content">
32 <div id="logo">..</div>
33 </div>
34 </div>
35 </form>
36 </body>
In the above code, everything displayed exactly the same in IE, Firefox, and Safari until adding text-align: center to divMain. After that, divMain displays in the center of the window in IE with no problem but it is still lined up on the left side of the window in both Firefox and Safari. The ultimate design of the page calls for divMain to be centered on the page and maintain a centered position regardless of the size of the browser window or the brand of the browser. If someone can help me understand and resolve the problem in the above code, it will be very appreciated. Thanks, John Similar TutorialsMy page layout consists of a content section and a sidebar section. I'm attempting to match the style of the sidebar links to those within the content. Odd thing is, although the style of the links appears correctly within the content DIV, any links within the sidebar refuse to style correctly when declared with the content declaration. So, this works: Code: #content a, #copyright a, #footer a, .twitter a {background: #3cf; color: #fff; text-decoration: none; padding: 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition: all 0.3s ease-out;}
#sidebar a {background: #3cf; color: #fff; text-decoration: none; padding: 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition: all 0.3s ease-out;}
Whilst this does not: Code: #content a, #sidebar a, #copyright a, #footer a, .twitter a {background: #3cf; color: #fff; text-decoration: none; padding: 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-transition: all 0.3s ease-out;}
I'm at my wits end as to why the second (preferred) declaration will not style any sidebar links. Any ideas? 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 thanks for taking the time to read my question. I have a div that I want to float right, but it is staying on the left side, and I can't figure out why. HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Warren Persowich Humour Facilitator - Stand-Up Comedian Winnipeg Manitoba. Comedic entertainment performances laughter and insight. Fun professional development. A decade of stand-up experience." />
<meta name="keywords" content="Warren Persowich, Comedian, Comedic, Stand Up, Stand-Up, Comedy, Business, Winnipeg, Manitoba, Cancer, Entertainment, Funny, Hilarious, Interactive, Laughter, Psychology, Professional, Development" />
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ongXn98vPdWEemx2Lu5qZozNxw3CDdugXLIpK9XzOr4=" />
<title>2 Nations Female Hockey League:::::</title>
<script type="text/javascript" src="Javascript/coolmenu.js"></script>
<script type="text/javascript" src="Javascript/menu_items.js"></script>
<link rel="stylesheet" type="text/css" href="menu_styles.css">
<link rel="stylesheet" type="text/css" href="2NFHL.css">
</head>
<body>
<script type="text/javascript">var m1 = new COOLjsMenu("menu1", MENU_ITEMS)</script>
<div class="LogoDiv"><a href="Index.htm"><img class="Logo" src="Images/WOMENSHOCKEY CHOICE 1Small2.jpg" alt="Two Nations Female Hockey League"></a></div>
<div class="NavDiv">
<p class="TeamsNav">Teams: <a href="Team1">Coyotes</a> | <a href="Team2">Extreme</a> | <a href="Team3">Ice Cats</a> | <a href="Team4">Saints</a> | <a href="Team5">Mustangs</a> | <a href="Team6">Lightening</a> | <a href="Team7">On Edge</a></p>
</div>
<div class="ContentDiv">
<div class="prop"></div>
<div class="Welcome">
<p class="FirstLine">Welcome to the Two Nations Female Hockey Leage web site.</p>
<p>The Two Nations Female Hockey Leage is a Spring - Summer league that is comprised of female hockey teams hailing from both Canada and United States.</p>
<p>To learn more about the Two Nations Female Hockey League, click <a href="AboutUs.htm">here</a> or use the About Us link in the navigation bar above.</p>
</div>
<div class="TNFHLTW">
<p class="TNFHLTWP">This week in the TNFHL the Coyote's and On Edge faced off in Winnipeg, Manitoba. The teams skated to a 3 all tie.</p>
</div>
<div class="Banners">
<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
</div>
<div class="clearprop"></div>
</div>
<div class="BottomNavDiv">
<div class="BottomNavDivCont">
<p class="BottomNavLinkP"><a href="Index.htm" class="BottomNavLink">Home</a> | <a href="Index.htm" class="BottomNavLink">About Us</a> | <a href="Index.htm" class="BottomNavLink">Philosophy</a> | <a href="Index.htm" class="BottomNavLink">Teams</a> | <a href="Index.htm" class="BottomNavLink">Standings</a> | <a href="Index.htm" class="BottomNavLink">Schedule</a> | <a href="Index.htm" class="BottomNavLink">Contact Us</a> | <a href="Index.htm" class="BottomNavLink">Links</a><p/>
</div>
</div>
</body>
</html>
CSS: Code: html, body {
height: 100%;
padding: 0;
margin: 0;
}
.LogoDiv {
/*background-image:url("Images/WOMENSHOCKEY CHOICE 1Small2.jpg");
background-repeat: no-repeat;
background-position: top left;*/
margin: 2px auto;
padding: 0px;
height: 87px;
width: 800px;
display: block;
}
img.Logo {
border: 0px;
}
.Banners {
float: right;
width: 300;
margin: 20px 20px 0px 0px;
padding: 0px;
background-color: red;
/*clear: both;*/
}
.BannerCont {
width: 300;
height: 50px;
margin: 5px 0px 0px 0px;
padding: 5px 0px 0px 0px;
background-color:#362161;
}
.NavDiv {
background-image: url(Images/N2NavBar2.jpg);
background-repeat: repeat-x;
background-position: top left;
padding: 10px 0px 0px 0px;
margin: 0px 0px -13px 0px;
height: 80px;
width: 100%;
display: block;
}
.TeamsNav {
padding: 0px;
margin: 0px 0px 0px 400px;
font-size: 12px;
}
/*.prop and .clearprop are in here to create a min height of 400px*/
.prop {
height: 400px;
width: 1px;
float: right;
background-color: yellow;
}
.clearprop {
clear: both;
height: 1px;
overflow: hidden;
background-color: yellow;
}
.ContentDiv {
width: 800px;
/*height: 400px;*/
overflow: hidden;
background-image:url(Images/Background-Blue3.jpg);
background-repeat: no-repeat;
background-position: top left;
margin: 0px auto;
padding: 0px;
display: block;
position:static;
z-index: -1;
}
.TNFHLTW{
width: 212px;
overflow: hidden;
background-image:url(Images/TNFHLThisWeekShortNarrow.gif);
background-position: top left;
background-repeat: no-repeat;
margin: 50px 0px 0px 30px;
padding: 50px 0px 0px 0px;
}
.Welcome {
float: right;
margin: 10px 20px 0px 0px;
overflow: hidden;
width: 450px;
background-color: aqua;
}
.FirstLine {
font-size: 20px;
margin: 0px;
padding: 0px;
text-align: center;
}
.COC1 {
padding: 2px;
margin: 50px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}
.COC {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}
.OLHolder {
margin: 10px 0px 0px 30px;
padding: 2px;
float: left;
width: 700px;
}
.COCOL li {
margin-bottom: 10px;
}
.COCTitle {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-align: center;
font-weight: bold;
text-decoration: underline;
font-size:18px;
}
.LinkList li {
margin-top: 10px;
list-style-type:none;
}
p.TNFHLTWP {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 4px;
margin: -20px 0px 0px 0px;
font-size: 12px;
background-color: #ffffff;
}
.BottomNavDiv {
padding: 0px;
height: 72px;
width: 100%;
display: block;
border-top: 4px solid red;
margin: 0px;
height: 25px;
}
.BottomNavDivCont {
margin: 0px auto;
width: 800px;
overflow: hidden;
display: block;
height: 25px;
padding: 0px 0px 0px 20px;
}
/*.BottomNavDivCont ul li {
display: inline;
padding: 0px 10px 0px 0px;
font-size: 10px;
color: #ff0000;
margin: 0px;
}*/
.BottomNavLinkP {
font-size: 10px;
color: #ff0000;
display: block;
}
.BottomNavLink {
font-size: 10px;
color: #ff0000;
}
a.BottomNavLink:link{
text-decoration: none;
}
a.BottomNavLink:visited{}
a.BottomNavLink:hover{
text-decoration: underline;
}
a.BottomNavLink:active{}
p.TeamsNav a:link{
text-decoration: none;
color: #000099
}
p.TeamsNav a:visited{}
p.TeamsNav a:hover{
text-decoration: underline;
}
p.TeamsNav a:active{}
.LinkList li a:link {
text-decoration: none;
color: #000099;
}
.LinkList li a:visited {}
.LinkList li a:hover {
text-decoration: underline;
}
.LinkList li a:active {}
I put clear:both on .Banners but then it moves to the bottom under .prop I'd like .Banners to be under .Welcome The page displays the same in FF and IE7, but in IE6 .Banners stretches across most of the .ContentDiv help? I'm using a JS/CSS calender script found at http://www.dynarch.com/projects/calendar/. It works great except for one thing.. it wont position correctly in IE (6 & 7). I have a form with 20 text inputs strait down a page. As per instruction i place the following code just below my desired text input, say at tab index 12. Code:
<script type="text/javascript">
Calendar.setup({
inputField : "this_fieled_name", // id of the input field
ifFormat : "%Y-%m-%d", // format of the input field
showsTime : true,
timeFormat : "24"
});
</script>
When the page and script run, in Firefox its perfect, but in IE, the calender places almost 200px high than desired near tab index 6. My question is, how do i get IE to position as FF does? Here are i think the two most important files that may need affecting. Both are stock from download. http://www.empiresolutions.net/demo/calendar-setup.js http://www.empiresolutions.net/demo/theme.css Thanks much. Cesar Hello, I have a flash movie that keeps moving out of place when the browser size is altered. How can I make it so the movie stays in one spot no matter what the browser size? Hi all, hoping someone can help me with what feels like it should be a simple problem, but one I can't work out. Apologies if the problem seems too obvious to you, I'm a total noob at this. I basically have two div objects within a space beneath the header. These are a video player, which is fine, and a scrolling menu. Presently the menu (navigation.php) is off the bottom-right, beneath the video, and I simply want to force it to the TOP right, parallel with the player. My code is below, and I'm looking for an elegant css solution if possible. Any more info needed, just ask. I took a grab, but the forum won't let me post links. Cheers in advance. </style> </head> <body bgcolor="#B94F1F"> <div id="container"> <div id="header"><?php include("header.php"); ?></div> <div id="wrapper"> <p id='preview'>The player will show in this paragraph</p> Words here? <p>Paragraph <p>Paragraph <script type='text/javascript' src='swfobject.js'></script> <script type='text/javascript'> var s1 = new SWFObject('player.swf','player','640','380','9'); s1.addParam('allowfullscreen','true'); s1.addParam('allowscriptaccess','always'); s1.addParam('flashvars','file=xxx'); s1.write('preview'); </script> <div id="navigation" style="width:300px;height:430px;overflow:auto;border-width:1px;border-color:000000;border-style:solid;"> <font size=2> <div id="header"><?php include("navigation.php"); ?></div> </font></div> Hello all, i have a page setup which is working well in all browsers. I have a div layer positioined in the page at the moment it is positioned absolute, and it is in the correct place you can see it at www.loadedtechnologies.com/impact , the layer is id="demoImage", you can have a look at the css file in page source. I don't want this layer positioned absolute, i want it to be relative to the "MidTopContent" layer, so that when the ADMIN menu appears on the top of the page once logged in, the demoImage layer will follow down within MidTopContent, Please help THANKS 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>
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. 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? 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 need help laying out my page, and I can't seem to get this CSS stuff right. My page has a logo at the top left, a menu at the top right. Below the logo on the left, I have an image. To the right of that I have another image. The bottom of those two images need to line up. Below those 2 images, I have 3 smaller images I want to display from left to right. I tried to set up DIV blocks, and used CSS to position them. When it lays out on my page, and I scrunch the brower small, the images on the right side overlap and cover the images on the left. Also, the images on the bottom extend below the bottom of the browser, but I don't get a scroll bar to see them. I am told tables are not the way to do it anymore. I am not a web developer, so I need some help, pretty please. I wasn't sure how to title this problem as I'm not sure exactly what it is. I've only been learning CSS over the last few days and transformed an old site as I went. learnware .com . au/css/index .htm The page displays fine in IE7 and FF but in IE6 the left menu moves over and sits just over the top of the left hand edge of the green area in the middle. I'm not sure what code to post or which area to focus on. I'm hoping someone can assist me with what I should be looking at. I've spent all night looking at forums, etc trying to figure out where the problem lies but I can't even get that far! (Sorry if I've disobeyed any forum rules) 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; } 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> I am a beginner and I'm having trouble with getting the paragraph elements to behave the way I want them to in the header section of the page at the link below. I have the address paragraph staying in position. The hours paragraph, however, doesn't seem to be contained by the header div. It moves to the left as the browser window is resized to be larger. I tried adding right margin to the address paragraph but the hours paragraph doesn't seem to recognize that either. I know I'm doing something wrong but I can't seem to figure out what. The small weather widget has a similar, but not quite the same, problem. It moves to the right. (openrangeimaging(dot)com/Test/Gravity-Test/index-test01.html) I got an error saying I couldn't include links. I read the forum rules and didn't notice anything about that. Hope I'm not breaking the rules here. I'm hoping someone with css expertise can help me get this set up correctly. >>EDIT<< I was, (by luck), able to achieve what I wanted by adding the position: relative to the #container div. The file in link above has been updated with this change. I am a beginner at css. I aspire to have the most "correct" and cleanest code and conform to best practices. If what I have done is still not best practice and should be done in a different way I definitely want to know how it should be styled. Can anyone comment on if what I have done is proper technique? >>End Edit<< Thanks in advance for any help. 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 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. 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. |
|||||||