|
CSS - Ie Positioning Nightmare
So I'm working on this site.
deborahgunn-interiors dot com (new user issue) my problem is that everything works acceptably well in most browsers. IE on the other hand is a freaking nightmare, throwing everything out of position and even things outside of my div container making me scroll considerably just to view the content. If anyone could take a look and give me some pointers that would be great. Similar TutorialsI have a menu bar that is positioned by css. It works exactly as it should on all browsers, except IE7 http://www.firstpokertips.co.uk/ In IE7 the menu is offset up and to the right of where it should be. Can anyone help. I have been trying for many many hours but just cant work out what is wrong. Hi All, I'm new to the forum and hoping someone can help me. This is the first page I have done using CSS for defining my layout so some patience would be appreciated. I also apologize if this has been discussed somewhere else on the board - I'm not entirely sure what to search for. On the page I have a background set - a nifty little drop shadow effect to frame the main content. Everything works until I try a lower screen resolution - the effect gets cut off depending on the size of the browser window even though the content goes well beyond. I have tried everything I can think of to solve this! Please tell me there is a fix! If not - maybe a fellow web devloper could offer an alternative solution? The website is: iconoclast-band.com/new I've posted a screen of the problem: iconoclast-band.com/new/iconoclast-argh.jpg Stylesheet is at: iconoclast-band.com/new/css/style.css Positioning css is: html, body { min-height: 100%; height: 100%; } body { font: 11px/1.6 Arial, sans-serif; background: url(../images/bg2.png) top center repeat-x !important; background: url(../images/bg2.gif) top center repeat-x; /*stoopid ie*/ padding-left: 1px; margin: 0 auto; overflow: -moz-scrollbars-vertical; } body, h1, h3, p { padding: 0; margin: 0; } #container { background: url(../images/container2.png) top center repeat-y !important; background: url(../images/container2.gif) top center repeat-y; /*stoopid ie*/ width: 791px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; /*stoopid ie*/ } #left { float:left; width: 200px; padding-top: 91px; background: url(images/bg2.png) top center repeat-x !important; background: url(images/bg2.gif) top center repeat-x; /*stoopid ie*/ } #header { background: url(../images/headbg.png) top center no-repeat; background: url(../images/headbg.gif) top center no-repeat; /*stoopid ie*/ height: 91px; width: 361px; padding-left: 30px; margin-bottom: 0 !important; } #content { width: 361px; padding-left: 15px; } #footer { text-align: center; width: 361px; padding-bottom: 20px; } #right { float:left; width:200; margin-top: 81px; } Dear all, I have the following in a web page: A menu (let's call it Menu1) with several links and by its side another menu (Menu2) with some links also. Menu2 is a drop down menu that drops down on top of Menu1 when you click the Menu2 button. Well, it works for Internet Explorer but not for Firefox. The problem: when I try to click on Menu1's links they are not clickeable .............. My divs: #divMenu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:1;} #divMenu2 {position:absolute; width:242px; height:218px; top:76px; left:705px; z-index:2;} Obviously if I do: #divMenu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:2;} #divMenu2 {position:absolute; width:242px; height:218px; top:76px; left:705px; z-index:1;} I cannot click on Menu2's links because the drop down disappears behind Menu1. How can I solve it?? Below, the code. Thanks a lot in advance! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
<!--
html {background-color:transparent;}
body {
background-color:transparent;
margin-left: 0px;
margin-top: 0px;
}
#Menu1 {position:relative; left:701px; top:58px; width:234px; height:485px; z-index:1; background-color:yellow;}
#Menu2 {position:absolute; width:0px; height:0px; top:76px; left:705px; z-index:2;}
-->
</style>
</head>
<body>
<div id="Menu1">
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF0</a><br>
<a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF0</a><br>
<a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF1</a><br>
<a href="http://www.yahoo.se" target="_blank">CANNOT click this link in FF2</a><br>
<a href="http://www.yahoo.es" target="_blank">CANNOT click this link in FF3</a><br>
<a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF4</a><br>
<a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF5</a><br>
<a href="http://www.yahoo.se" target="_blank">CANNOT click this link in FF6</a><br>
<a href="http://www.yahoo.es" target="_blank">CANNOT click this link in FF7</a><br>
<a href="http://www.yahoo.it" target="_blank">CANNOT click this link in FF8</a><br>
<a href="http://www.yahoo.fr" target="_blank">CANNOT click this link in FF9</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF1</a><br>
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF2</a><br>
<a href="http://www.yahoo.it" target="_blank">Can click this link in FF3</a><br>
<a href="http://www.yahoo.fr" target="_blank">Can click this link in FF4</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF5</a><br>
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF6</a><br>
<a href="http://www.yahoo.it" target="_blank">Can click this link in FF7</a><br>
<a href="http://www.yahoo.fr" target="_blank">Can click this link in FF8</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF9</a><br>
<a href="http://www.yahoo.es" target="_blank">Can click this link in FF10</a><br>
<a href="http://www.yahoo.it" target="_blank">Can click this link in FF11</a><br>
<a href="http://www.yahoo.fr" target="_blank">Can click this link in FF12</a><br>
<a href="http://www.yahoo.se" target="_blank">Can click this link in FF13</a><br>
</div>
<div id="Menu2">
<iframe src="http://www.vlogplaza.com/test/flash/menu.html" id="ifrmenu2" name="ifrmenu2" scrolling="no" width="262px"
height="218px" frameborder="0" allowtransparency="yes">
</iframe>
</div>
</body>
</html>
Alright, here we go again. The page in question... Various screenshots I'm working up a sample for a job I came across. The scenario: He wants a simple layout: top header, left column, mid (main), right column, and bottom header. The width of the body should be no more than 650 pixels and centered. However, he wants the html flow to be in order of: main, top header, left column, bottom header, right column. Obviously is going to require absolute positioning, right? So, using Win XP, I got it to look descent in IE 6, Net 7, and FF 1. Those are the three browser brands he's concerned about; the last two versions of each (didn't specify operating system). Basically, I'm just asking for someone to look at the source code and tell me if there's a simpler way. The way it's set up now, it renders poorly on several different versions of IE, Net, and Moz under other operating systems (which you can view in the screenshots URL above). Plus, the heights are not constant. Meaning that he will always be adding/changing content meaning he'll always have to mess with the positioning. Is this absolutely worthless? Problem is I don't want to give up because it is fun to learn (plus there's two other potential jobs behind it). It's starting to seem, however, that there will be no easy fix and perhaps the answer is unachievable in this situation. Any advice? Have been bashing my head against the wall now for a few hours trying to solve this, as it's "the last piece of the puzzle" at the moment. Here is the issue: Code: http://img5.imageshack.us/my.php?image=iebugtj3.jpg (Sorry about this, had to put it in code to post the link) As you can see, it works perfectly in "all" other browsers, but... yeah... you know... >.> Nore sure how much of the code is needed to fix this, but here is the most relative code... HTML Code: <style type="text/css" media="screen">
#selectedTab
{
background: url("./images/layout/tabSelected.png") no-repeat;
height: 66px;
width: 129px;
position: relative;
top: -89px;
left: <?PHP echo $tabPos ?>px;
z-index: 5;
}
#selectedTab a
{
position: relative;
/* Special fix for the "ISO-sertifikat" string */
<?php
if ($_GET['nav'] == "isosert")
echo "top: 10px;";
else
echo "top: 15px;";
?>
left: <?PHP echo $tabTxtPos ?>px;
}
</style>
<!-- END CUSTOM MENU STYLE -->
<body>
<div id="pattern">
<!-- START HEADER -->
<div id="bg_layer2_header">
<div id="banner">
<div id="menu">
<div id="subtabs">
<ul class="menuTabText">
<li class="menuNudge"><a href="home.phtml?nav=omoss">Om Oss</a></li>
<li class="menuNudge"><a href="home.phtml?nav=nyheter">Nyheter</a></li>
<li class="menuNudge"><a href="home.phtml?nav=tjenester">Tjenester</a></li>
<li class="menuNudge"><a href="home.phtml?nav=kurs">Kurs</a></li>
<li class="menuNudge"><a href="home.phtml?nav=isosert">ISO-sertifisering</a></li>
<li class="menuNudge"><a href="home.phtml?nav=kunder">Kunder</a></li>
<li class="menuNudge"><a href="home.phtml?nav=forhandlere">Forhandlere</a></li>
<li class="menuNudge"><a href="home.phtml?nav=referanser">Referanser</a></li>
<li><a href="home.phtml?nav=jobb">Jobb</a></li>
</ul>
</div>
<div id="selectedTab"><a href="home.phtml?nav=<?PHP echo $_GET['nav'] ?>"><?PHP echo $linkName ?></a></div>
</div>
</div>
</div>
<!-- END HEADER -->
CSS Code: /**==--__ Global __--==**/
*
{
margin: 0;
padding: 0;
}
/**==--__ Layout __--==**/
body
{
background: #636363 url("../images/layout/bg_layer1.png") repeat-x;
height: 100%;
}
#pattern
{
background: url("../images/layout/bg_pattern.png") repeat;
position: absolute;
top: 0px;
left: 0px;
height: auto;
min-height: 100%;
width: 100%;
z-index: -3;
}
/* START HEADER */
#bg_layer2_header
{
background: url("../images/layout/bg_layer2_header.png") no-repeat;
height: 216px;
width: 980px;
margin: 0 auto;
position: relative;
z-index: -4;
}
#banner
{
background: url("../images/layout/banner.png") no-repeat;
height: 184px;
width: 909px;
margin: 0 auto;
position: relative;
top: 32px;
z-index: -2;
}
#menu
{
background: #000 no-repeat;
height: 25px;
width: 877px;
border-top: 1px solid #cbcbcb;
margin: 0 auto;
position: relative;
top: 158px;
}
#subtabs
{
background: url("../images/layout/bg_subMenu.png") no-repeat;
height: 48px;
width: 812px;
position: relative;
top: -28px;
margin: 0 auto;
z-index: -1;
}
#subtabs .menuTabText li
{
list-style: none;
display: inline;
}
.menuTabText /* Subtab links positioning */
{
position: relative;
top: 5px;
left: 16px;
}
.menuNudge
{
margin-right: 44px;
}
/* END HEADER */
im using this currently for internet explorer on a mouse over but it doesnt do anything.. the mozilla one works just fine IE Code: filter.progid:DXImageTransform.Microsoft.Alpha(opacity=70); progid:DXImageTransform.Microsoft.MotionBlur(strength=13, direction=310) progid:DXImageTransform.Microsoft.Blur(pixelradius=2) progid:DXImageTransform.Microsoft.Wheel(duration=3); Firefox Code: -moz-opacity: 0.7; 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 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;
}
Hi, I can't figure out why my top nav won't stay in place in ie. Here's what I have for my nav. Works everywhere but ie, its position (just the height) it's off. Thanks much for any help. Simone div.navigation { position: relative; left:160px; top: 140px; line-height:0; border : 0 solid #000000; overflow : auto; width : 50%; font-size : 20px; font-weight: bold; margin: 0px 0 0 0px; } div.left { width : 45%; float : left; } div.right { width : 30%; float : right; } a.navigation { border-bottom : 5px solid #99c37f; text-decoration : none; color : #4c2110; font-size: 20px; } a.navigation:hover { border-bottom : 5px solid #99c37f; text-decoration : none; color : #4c2110; font-size: 20px; } 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. 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'm trying to build an example layout that I plan to use in a website. My goal is simple, I want a content section to grow as the the content gets bigger and place a footer after that division that is as wide as the page. Here's the code I'm currently using: (the problem I'm having right now is that the footer section is rendering at the top.. How can I get this to be placed at the bottom of the page, after the content section?) Help me please <html> <head> <title>TESTING 1 2 3</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #mrbig { background: #f0f; width: 800px; } #header { position: absolute; background: #0f0; width: 800px; height: 100px; } #leftcol { position: absolute; background: #f00; top: 100px; width: 150px; height: 500px; } #content { background: #fff; position: absolute; float: left; width: 650px; top: 100px; left: 175px; height: 500px; } #footer { position: relative; left:111px; background: #00f; width: 800px; height: 100px; } --> </style> </head> <body> <div id="mrbig"> <div id="header">Header Section</div> <div id="leftcol">Left Section</div> <div id="content">Content SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent Section Content SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent SectionContent Section</div> </div> <div id="footer">Footer Section</div> </body> </html> 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 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; } 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. 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 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> G'day all, I am hoping some here can help me with a problem I am having with positioning. I have a content div with dynamically generated text, next I have a side-bar div that i'd ideally like to centre vertically but this seems to be bad practice so my other thought, if possible would be to have the side-bar position itself relative, x position from top with the dynamic text to wrap around the side-bar div. What I have currently is: Code:
<div id="main-content">
<div class="side-bar">
<div class="side-bar_header">Content Header</div>
<div class="side-bar_content">
<ul>
<li>Side-bar info</li>
</ul></div>
</div>
{dynamic_content_tag}
</div>
Code:
#main-content {
height: auto;
width: 630px;
}
.side-bar {
background-color: #CCC;
float: left;
width: 180px;
position: relative;
top: 50%;
margin-right: 10px;
margin-bottom: 20px;
}
.side-bar_header {
background-color: #666;
text-align: center;
padding: 5px;
}
.side-bar_content {
padding-left: 5px;
}
Any help would be much appreciated. 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> 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> |
|||||||