|
CSS - Problem With Apsolutely Positioned Divs
Hi All,
I'm trying to re-order the divs in my code, so that when it is previewed, the main content div - which is my first div in code previews below the div containing the navigation, which appears below the main content div in code. I'm told that the closer the main content is to the top of the page in code,the better as far as search engine optimisation is concerned (styles will be in a separate document). I have managed to do this using both negative margins and absolutely positioned divs inside a relative div. my problem is that if the amount of text inside my content div increases, it throws off the margins/positioning so that the text actually appears on top of the navigation div. If anyone has any ideas I'd be grateful for your help. I've included a very simplified version of the page to help you picture the problem. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- #maincontent { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; background-color: #CCCCCC; width: 80%; margin-right: auto; margin-left: auto; position: relative; top: 25px; } #envelope { width: 100%; margin-right: auto; margin-left: auto; position: absolute; } #navigationbar { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; background-color: #0066CC; width: 80%; margin-right: auto; margin-bottom: 0px; margin-left: auto; top: -15px; position: relative; } --> </style> </head> <body> <div id="envelope"> <div id="maincontent"> Main content div variable sized content </div> <div id="navigationbar">Navigation bar the size of this area will be fixed</div> </div> </body> </html> Similar TutorialsI came here hoping you guys could lend some advice and suggestions towards getting what I am trying to accomplished solved. I am using google charts to generate 2 different charts and am using javascript and css to dynamically generate the divs for each of my charts for that data that I am pulling. However, I am running into some issues trying to get the divs positioned properly while doing this, and I was hoping you guys could lend some advice. I have a div that's my container, a div for the title of the line chart, a div for my line chart, and a div for my pie chart and the code for them is he Code: //==================================================================================================== ==
// Create our bodyDiv which acts as our Title for the Intersection
//------------------------------------------------------------------------------------------------------
bodyDiv = document.createElement('div');
bodyDiv.setAttribute('id', ("bodyDiv" + TempInt));
bodyDiv.style.width = 900;
bodyDiv.style.height = 400;
bodyDiv.style.margin = 0;
bodyDiv.style.padding = 0;
bodyDiv.style.position = 'relative';
bodyDiv.style.left = '0px';
bodyDiv.style.top = '0px';
//==================================================================================================== ==
// Append the Div to the HTML Document
//------------------------------------------------------------------------------------------------------
document.body.appendChild(bodyDiv);
titleDiv = document.createElement('div');
titleDiv.setAttribute('id', ("bodyDiv" + TempInt));
titleDiv.style.width = 900;
titleDiv.style.height = 5;
titleDiv.style.margin = 0;
titleDiv.style.padding = 0;
titleDiv.style.position = 'relative';
titleDiv.style.left = '0px';
titleDiv.style.top = '0px';
titleDiv.innerHTML = '<img src="http://www.suntransformer.com/peter/GoogleAPI3/test/bckgrnd.png"><h5>Intersection: ' + TempInt + '</h5>';
bodyDiv.appendChild(titleDiv);
//==================================================================================================== ==
// Create the timelineDiv which holds our TimeLine chart
//------------------------------------------------------------------------------------------------------
timelineDiv = document.createElement('div');
timelineDiv.setAttribute('id', TempInt);
timelineDiv.style.width = 350;
timelineDiv.style.height = 275;
timelineDiv.style.margin = 0;
timelineDiv.style.padding = 0;
timelineDiv.style.position = 'relative';
timelineDiv.style.left = '0px';
timelineDiv.style.top = '0px';
//==================================================================================================== ==
// Append the Div to the bodyDiv
//------------------------------------------------------------------------------------------------------
bodyDiv.appendChild(timelineDiv);
//==================================================================================================== ==
// Create the pieDiv which holds our Pie Chart
//------------------------------------------------------------------------------------------------------
var pieDivID = "Pie" + TempInt;
pieDiv = document.createElement('div');
pieDiv.setAttribute('id', pieDivID);
pieDiv.style.width = 500;
pieDiv.style.height = 300;
pieDiv.style.margin = 0;
pieDiv.style.padding = 0;
pieDiv.style.position = 'relative';
pieDiv.style.left = '0px';
pieDiv.style.top = '0px';
pieDiv.innerHTML = '<img src="http://www.suntransformer.com/peter/GoogleAPI3/test/bckvert.png">';
//==================================================================================================== ==
// Append the pieDiv to the bodyDiv
//------------------------------------------------------------------------------------------------------
bodyDiv.appendChild(pieDiv);
The charts are added to the divs later by creating the chart and setting its container options to the div. I am trying to get the title for the timeline chart div to show directly above the timeline chart div and then the pie chart div to show up right next to that. However, the divs are showing up stacking right up on top of each other. Any ideas? Hi, I have been puzzle for a while now working out how to do this. I have two fixed height divs which I want to appear on the same line (inline). However to maintain the fixed height they cannot be set as display: inline; (Well that works in IE but not in Firefox). Anyway I find out that setting one div to float left and the other to float right with another div with clear:both works fine. However when it comes to setting the position of the flash elements I want in each div element it works now in Firefox but not in IE. I currently have: <div id="diva"> <object id="face1" width="320" height="110"> <param name="face1" value="face1.swf"> <embed src="face1.swf" width="320" height="110"> </embed> </object> </div> <div id="divb"> <object id="face2" width="320" height="110"> <param name="face2" value="face2.swf"> <embed src="face2.swf" width="320" height="110"> </embed> </object> </div> <div id="clear"></div> With the relavent css: #div1 { background-image : url(images/bg1.gif); width: 381px; height: 346px; float: left; text-align : center; vertical-align : bottom; } #div2 { background-image : url(images/bg2.gif); width: 381px; height: 346px; float: right; text-align: center; vertical-align : bottom; } #clear { clear: both; } img { border: 0px; } #face1{ padding-top: 220px; left: 30px; } #face2{ position: relative; top: 220px; left: 10px; } Effectively what I want is: Where the divs are on the same line and are fixed height (as they have a background) and then each swf element releatively positioned inside the div...which will work in Firefox and IE! Thank you for your time. I'm working on a pet project on the off chance that I could be hired by a small business referral organization in the city where I live, so this isn't super urgent. I'm also not a web developer by trade, more IT, so if I make any obvious mistakes, feel free to point them out. I've got a simple absolute-positioned two-column layout and a two-color background that I want to tile vertically behind it. The problem seems to be that the browsers ( IE and FF, haven't tried chrome/safari/opera) seem to think that the body ends at the bottom of the logo I set on top, and won't tile it beyond the bottom of the image. HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hub City Business Network | Word-Of-Mouth Business Referrals in Hattiesburg, Mississippi | Home</title> </head> <body> <div id="content"> <div id="logo"><a href="index.htm"><img src="images/hcbnlogo1transparency.png" alt="Hub City Business Network" /></a></div> <div class="left"> <div id="navigation"> <ul> <li><a href="index.htm">Home</a></li> <li><a href="members/index.htm">Members</a></li> <li><a href="contact.htm">Contact Us</a></li> </ul> </div> <div id="leftinfo"> <p>We meet for breakfast every Tuesday,<br /> 7 - 8:30 AM. <br /> at the Neal House at<br /> 1311 East Hardy St.</p> </div> </div> <div class="right"> <p>Hub City Business Network (HCBN), is a Hattiesburg-based business networking group that meets every Tuesday for breakfast at 7:00 till 8:30 A.M. Our membership is composed of some of the finest and best-respected business men and women in Hattiesburg. Our networking model is predicated on the idea that people do business with people they know, trust, and like. Our members know that they can confidently refer business to a member and the referral will be handled in a timely, professional manner. In addition, we encourage members to meet outside of the weekly meetings for one-on-one Strategic Marketing Sessions (SMS). An SMS usually takes the form of a lunch or coffee, and gives members time to discover in a more relaxed environment things about other members that don't surface at the regular weekly meetings. </p> </div> <div id="footer"> <p>Site built by Robert Greenstreet</p> </div> </div> </body> </html> CSS: Code: html
{
width:100%;
}
#logo img
{
margin:10px 0px 0px 20px;
width:400px;
height:100px;
}
img
{
border:0px;
}
a:link
{
color:#29497f;
}
a:visited{
color:#5dd0c0;
}
body
{
width:650px;
margin-left:auto;
margin-right:auto;
background-color:#29497f;
}
#content
{
/*height:500px;*/
width:650px;
background-image:url('../images/bg1.png');
background-repeat:repeat-y;
background-attachment:fixed;
background-position:center;
margin-top:-10px;
}
.left
{
position:absolute;
left:auto;
top:120px;
width:15em;
margin-left:12px;
padding-left:0px;
}
.left ul
{
list-style-type:none;
margin-left:-33px;
font-family:sans-serif;
}
#leftinfo
{
margin-left:10px;
width:9em;
}
.right
{
position:absolute;
left:auto;
top:120px;
width:27em;
margin-left:12em;
font-family:sans-serif;
}
.right p
{
color:#000000;
}
#memberlist ul
{
margin-left:-40px;
}
#memberlist a:visited{
color:#6a92d4;
text-decoration:none;
}
#footer
{
position:absolute;
top:400px;
width:650px;
margin:0 auto;
}
Also, I'm working on getting that footer centered about 30px from the bottom of the page, without running up into whatever content may be above it. I think I might be able to figure that one out on my own, though. Like I said, no rush. This isn't a paid gig I'm using a relative-positioned div as a container for an image, which is absolute-positioned. I'm doing this so that the image will automatically scale down to fit inside the containing div (nothing else I've tried has done this for me- so if there is another way to achieve this, please fill me in). This part works fine, but the image isn't as wide as the containing div, so I would like to center the image inside the div- but I can't seem to get it to work. I tried the obvious text-align:center in the div. That actually worked... kinda. The image's left-side was in the center of the div, but obviously isn't the 'centering' that I'm looking for. I then tried setting margin-left and margin-right on the image to auto, and that did nothing. I suspect that the fact that I have my image absolute-positioned is the culprit here, but I don't know how to get around it- or IF I can get around it without drastically changing my approach. Admittedly, the container div resides inside a table cell. I know that isn't the best practice, but I spent so much time trying a div-only approach only to waste time and become frustrated that I went back to what I know works- at least for now. I tried removing the container div from the table and inserting the image directly to the table cell- but encountered more issues with the sizing of the image. Essentially, my code is something like this: CSS: Code:
td#CONTENTDISPLAY
{
width: 100%;
height: 100%;
text-align: left;
vertical-align: top;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
div#CONTENTBANNER
{
position: relative;
height: 100%;
padding: 0 0 0 0;
}
img.CONTENTIMG
{
position: absolute;
height: 100%;
}
HTML: Code:
...
<td id="CONTENTDISPLAY">
<div id="CONTENTBANNER">
<img class="CONTENTIMG" />
</div>
</td>
...
Nothing flashy, I know. One thing I should mention, however, is that the image is ALWAYS placed inside the container div using a Javascript function (it's a dynamic image). I doubt that makes a difference, but I figure it's worth mentioning. Can anyone help point me in the right direction? Thanks! - skubik Hello I'm running into a very simple CSS problem (IMHO). I'm hoping that someone will be able to help out. The problem is related to a div layer that I'm positioning. The layer is positioned fine, but there is a gap at the bottom of the page where the div was created, eventhough it's positioned else where. This gap only happens in IE, FireFox looks great (no gap). Basically the code is this: Code: <div id="right-footer"> <img src="images/logo_small.gif" border=0><br /> </div> This is at the bottom of the page, above the </body></html>. I have content on the page, so scrolling is necessary. The gap is approximately 40px tall. Here is the relevant section of the stylesheet: Code: #right-footer {
position: relative;
top: -100px;
left: 550px;
width: 100px;
height: 10px;
overflow: none;
z-index: 100;
padding: 0px;
margin: 0px;
}
As you can see, the layer will be positioned above where div is in the code and pushed to the left, it's height is 10px. I added the z-index, overflow, padding, margin in a desperate attempt to fix it. Commenting out the div block or setting position to absolute removes the gap, but my position is blown. Any ideas? Please let me know if you need any more information or code. Thanks! hanji Below is a simple test page that fails to load properly on the Mozilla browser. It appears to work properly in IE. Any suggestions to getting the span width to set properly, based upon the content of the span would be a great help. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Span test</title> <style TYPE="text/css"> .submenu { background-color: #FFFFFF; color: #D4BA6B; border-top: 0px solid #000000; border-left: 0px solid #000000; border-right: 0px solid #000000; border-bottom: 0px solid #000000; position: absolute; margin: 0px; padding: 0px; min-width: 100px; visibility: visible; z-index: 1; } .submenuItem { background-color: #FFFFFF; color: #000000; border-left: 2px solid #ff0000; border-right: 2px solid #ff0000; border-bottom: 2px solid #ff0000; border-top: 2px solid #ff0000; font-family: "arial narrow", arial, verdana, sans-serif; font-weight: normal; font-size: 12pt; padding-top: 2px; padding-bottom: 2px; padding-right: 5px; padding-left: 5px; position: absolute; z-index: 1; cursor: pointer; cursor: hand; } </style> <SCRIPT LANGUAGE="javascript"> function getWidth() { oSpan = document.getElementById("testSpan"); iWidth1 = oSpan.offsetWidth; alert ("Width1 = " + iWidth1); } </SCRIPT> </head> <body onload="getWidth()"> <div class="submenu"> <span class="submenuItem" id="testSpan">This is the item that I am testing today.</span> </div> </body> </html> I used a div for each individual section (id=section) and on the second row, instead of displaying three like the first row it displays one on the far right and then it displayes the other two on the next row in the left and center. It's probably a small problem but i cant figure it out. I know i coudl easily do this using an html table but i'm trying to divert from using tables on anything other than just text. Stylesheet code Code:
Body {
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 8pt;
font-weight: bold;
color:#666666;
text-align: center;
min-width: 911px;
background-image:url('/images/sq.jpg');
}
p.footer {
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 6pt;
color:#666666;
}
p.news {
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 10pt;
font-weight:900;
color:#CCCC99;
}
p.title{
font-family: "Lucida Sans Unicode",sans-serif;
font-size: 14pt;
font-weight:900;
color:#FF9933;
}
form {
font-family: "Lucida Sans Unicode",sans-serif;
font-size:8pt;
color:#666666;
}
#container{
width:911px;
height:100%;
border-style:solid;
border-width:1px;
border-color:#CCCCCC;
margin:0 auto;
text-align: left;
background-color:#FFFFFF;
}
#topbar {
width:911px;
height:299px;
padding-left:4px;
padding-right:4px;
padding-top:9px;
padding-bottom:9px;
background-color:#EEEEEE;
background-image:url("images/topbg.jpg");
}
#menubar {
width:911px;
height:34px;
border-width:0px;
}
#content{ width:911px;
min-height:502px;
border-color:#cccccc;
border-top-width:12px;
border-bottom-width:12px;
border-left-width: 0pt;
border-right-width: 0pt;
border-style:solid;
text-indent: 3px;
}
#section { padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
width: 240px;
float: left;
vertical-align: top;
border-width:0px; }
#rightbar{
width:174px;
height:263px;
}
#right_bot{
width:174px;
height:51px;
}
#footer {
width:780px;
height:50px;
}
#bottom {
width:600px;
height:35px;
}
#logos {
width:600px;
height:50px;
}
a:link {
color: #666666;
}
a:visited {
color: #666666;
}
a:hover {
color: #666666;
text-decoration: none;
}
a:active {
color: #333333;
}
#port div{display:none;}
p.port {
font-size:8pt;
}
html code Code: <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="Keywords" content="web development,php,scripts,web solutions,adrian wisernig,statc,cheap web design,mysql" /> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> <title>Statc.net- php.mysql.flash, and other premium web solutions</title> </head> <body> <div id="container"> <div id="topbar"> <center><img src="images/s9.jpg" alt="" height="278" width="873" border="0"/></center></div> <div id="menubar"> <img src="images/layout_08.jpg" alt="" height="32" width="45" border="0"/><img src="images/layout_09.jpg" alt="" height="32" width="84" border="0"/><img src="images/layout_10.jpg" alt="" height="32" width="93" border="0"/><img src="images/layout_11.jpg" alt="" height="32" width="122" border="0"/><img src="images/layout_12.jpg" alt="" height="32" width="126" border="0"/><img src="images/layout_13.jpg" alt="" height="32" width="132" border="0"/><img src="images/layout_14.jpg" alt="" height="32" width="146" border="0"/><img src="images/layout_15.jpg" alt="" height="32" width="129" border="0"/><img src="images/layout_16.jpg" alt="" height="32" width="34" border="0"/></div> <div id="content"><center> <br> <div id="section"> <img src="images/services.jpg" alt="" height="159" width="230" border="0"/><br/>View the large array of services we offer to ensure sucess for your business. </div> <div id="section"> <img src="images/portfolio.jpg" alt="Portfolio"> Assure yourself by viewing our past work and clients. </div> <div id="section"> <img src="images/contact.jpg" alt="Contact"> View contact information for our company. </div> <div nowrap="true"></div> <div id="section"> <img src="images/partners.jpg" alt="Partners"> View our partners. </div> <div id="section"> <img src="images/about.jpg" alt="About Statc"> Find out more information about our company.</div> <div id="section"> <img src="images/resources.jpg" alt="Resources"> View and download free resources to help your conquest for sucess. </div> </center></div> </div> </body> </html> i am currently working on a layout that isnt working out for me... the xhtml for the website so far (very simple form) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Tower C</title> </head> <body> <div id="header"></div> <div id="links"></div> <div id="body"> test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /> </div> <div id="side"></div> </body> </html> and the css code i have is Code: #header {
position: absolute;
background-color: #a7e83f;
height: 124px;
width: 92%;
left: 4%;
right: 4%;
padding: 0px;
top: 20px;
}
#links {
position: absolute;
color: #000000;
background-image:url(images/linkbg.gif);
height: 23px;
width: 92%;
left: 4%;
right: 4%;
padding: 0px;
top: 144px;
}
#body {
position: absolute;
font-family: Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #ede2da;
width: 57%;
left: 4%;
right: 39%;
padding: 0px;
top: 167px;
overflow: visible;
}
#side {
position: absolute;
font-family: Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #dad1c9;
width: 35%;
left: 61%;
right: 4%;
padding: 0px;
top: 167px;
overflow: visible;
}
when the body div has more text than would fit it expands because of the overflow option... my problem is that the side div will not resize with the body div or visa versa any chance anyone knows how i can fix this? here is a link so you can see http://people.brunel.ac.uk/~dt08ajm/towerc/ I'm having some difficulty with the divs in my new site and was wondering if you could take a look and point out where I'm going wrong. My site is located at http://www.rockapedia.co.uk and the stylesheet at http://www.rockapedia.co.uk/style.css Much appreciated, Bailz. hi, i'have only very basic idea of CSS i'm making a site. It has horizontal scrollor using jquery and very large gap between scrollor and content "Welcome to prince electronic". Please someone help me to reduce the space between these two. website is princelondon.com thank you very much... On the page http://www.thoroughbredmusic.co.uk, I'm trying to get the logo in the top left of the screen to appear above any other div on the page. At the moment, the div containing the logo is within the overall div which houses everything in the center, within the yellow border. index.php: Code: <body> <div id="wrapper"> <div id="logo"></div> style.css: Code:
div#wrapper
{
text-align:left;
margin:0 auto;
width:723px;
margin-top:120px;
background-image:url(mockup.jpg);
border-color:#FFFF33;
border-style:solid;
border-width:thin;
background-color:#000000;
background-repeat:no-repeat;
overflow:visible;
}
div#logo
{
background-image:url(logo.gif);
width:328px;
height:198px;
margin-left:-50px;
margin-top:-100px;
float:left;
}
I created this based upon firefox, and in firefox it appears as intended- just above and to the left, but overlapping, the top left side of the main div (#wrapper) In IE, however, it appears in the same position, but everything outside the main div is invisible. I tried a number of methods, including z indexes and overflow:visible within body{}, but with no luck. Anyone have any ideas? Thanks a lot, Tom Hello. I've got a header div that my banner is in, below that, another div called "welcome". The background-color I set on the welcome div is somehow appearing at the very top of the container, right above my banner... I've tried adding a height to it but that just makes it worse. Not sure what else to do... The site is LeetWebmasters. My css: Code: p {
margin:0px;
padding:0px;
color:#006699;
line-height:20px;
}
h2 {
padding:0px;
margin:0px;
font-size:24px;
color:#006699;
font-weight:100;
border-bottom:1px dotted #ccc;
}
h3 {
padding:0px;
margin:0px;
color:#006699;
color:#006699;
}
html,body {
padding:0px;
margin:0px;
background-image:url(main-bg.gif);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#container {
margin: 0 auto;
width: 922px;
}
#header {
width: 922px;
float: left;
height: 130px;
margin: 10px 0px 5px 0px;
}
#leftcolumn {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 5px 5px 0px;
padding: 10px;
height: 900px;
width: 195px;
float: left;
}
#welcome {
text-align:center;
padding:5px;
background:#EAEAEA;
color:#006699;
}
#latest_tuts {
color:#006699;
}
#latest_tuts h3 {
border-bottom:1px dotted #ccc;
}
#who_online h3 {
border-bottom:1px dotted #ccc;
}
#search {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#newsletter {
position:absolute;
margin-top:0px;
margin-left:0px;
}
#welcome a:link {
color:#0066CC;
}
#content {
color: #333;
margin: 0px 5px 5px 0px;
padding: 10px;
width: 456px;
display: inline;
float:left;
background-image:url(content_gradient.jpg);
}
#content a:link, a:visited {
color:#0066CC;
}
#rightcolumn {
color: #333;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-image:url(col_gradient.jpg);
margin: 0px 0px 5px 0px;
padding: 10px;
height: 900px;
width: 196px;
float: left;
}
#footer {
text-align:center;
width: 900px;
clear: both;
color: #878787;
border: 1px solid #ccc;
margin: 0px 0px 10px 0px;
padding: 10px;
height:35px;
font-size:12px;
background-image:url(footer_gradient.jpg);
}
#footer a:link {
color:#0066CC;
text-decoration:none;
}
#footer a:visited {
color:#0066CC;
text-decoration:none;
}
#footer a:hover {
color:#006699;
}
#menu3 {
width: 200px;
border:1px solid #BCD2E6;
border-style: solid solid none solid;
}
#menu3 li a {
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #8BADCF;
display: block;
background: url(menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#menu3 li {
list-style:none;
}
#menu3 ul {
padding-top:0px;
margin-top:0px;
padding-left:0px;
margin-left:0px;
margin-bottom:0px;
}
#description {
font-size:10px;
color:#006699;
}
Hello, someone call tell me why this code didnt work? i try to put some flash banner in nested divs using z-index and its not working the flash div is above the higher div. i am tryin to href the flash banner: Code:
<asp:FormView DataSourceID="SqlDataSource20" runat="server">
<ItemTemplate>
<div style="width:728px; height:90px; position:relative; padding:0px; margin:0px; z-index:100; cursor:pointer; display:block; background-color:Lime;" onclick="window.new('<%#Eval("destUrl") %>', '_blank');">
<div style="width:728px; height:90px; position:absolute; left:0px; top:0px; padding:0px; margin:0px; z-index:-1; display:block;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="728" height="90">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="<%#Eval("bannerSrc") %>" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="opaque" />
</object>
</div>
</div>
</ItemTemplate>
</asp:FormView>
I have these two blocks that need to be on the same row. As it is now, they are blocked into two seperate rows. What I'm trying to achieve, is to have the logo on the far left, where it is now. But, I'd like to have the Login text to the far right, just before the tiled background (sunflowers). I'm not sure how to fix this problem. Can anyone take a quick look? http://www.marginalspace.com/asif/index.php (vectortorque.com). I am trying to use a container div for all of my content, but for some reason browsers like FF and Opera won't recognize that there is a difference between the main div for the page layout and the div for the content even though they have different ids. So if I set a top margin for the "contentcontainer" div, it is pulling down the "midbox" page layout div with it. I want to be able to move the "contentcontainer" div anywhere within the "midbox" div without moving the "midbox". Can someone tell me how to fix this please. Thanks. This is the main container div for the page: Code: div#midbox {
min-height: 100%;
width: 700px;
background-color: #FFFFFF;
margin-left: 270px;
margin-top: 0px;
border-left: 3px solid #FFF;
border-right: 3px solid #FFF;
}
This div should contain all of the content: Code: div#contentcontainer {
width: 500px;
height: 500px
text-align: left;
margin-top: 80px;
margin-left: 100px;
margin-right: 100px;
border: 1px solid black;
}
This is the actual code for the page: Code: <div id="midbox">
<div id="contentcontainer">
<div class="topdot"><div class="botdot"><div class="leftdot">
<div class="rightdot"><div class="bl"><div class="br"><div class="tl"><div
class="tr">
<table class="content" cellspacing="0" cellpadding="0">
<tr>
<td><img src="./resources/images/welcome.jpg" width="125" height="50" alt=""></td>
</tr>
<tr>
<td><p>(Content Removed)</p></td>
</tr>
</table>
</div></div></div></div></div></div></div></div>
</div>
</div>
[code] <div id="wrapper" style="background-color:black;padding:2px;overflow:visible;"> <div id="left-floating-box" style="background-color:red;float:left;">asdfsadf</div> <div id="right-floating-box" style="background-color:blue;float:right;">asdfsadf</div> </div> [code] here is a problem, warpper div doesnt strech to the height of the floating divs, ofcourse when you get rid of floating then everything work but i need this to work as it intended and that is two floating boxes with in one div and this div would wrap around two floating boxes and that way background would stretch as well. I rember solving this problem. Long time ago, but for some reason i am stock right now with this problem. Any one can refresh or sugest anything. Thank you. OK, I've got this page currently: http://www.brianellisrules.com/stickers/pics/ (click on a state) I'm trying to add a caption to each thumbnail showing the date: http://www.brianellisrules.com/stic...s/testindex.php (click on a state, preferably NY or NJ since they have a lot of pics) In the first version, I have all the pictures centered and they're all vertically aligned to the middle (of the row). In the second version, I switched over to floating div's so I could center each date below each thumbnail. That works great, however, all the thumbnails are left aligned. I tried adding a div around the thumbnails with everything centered, but no dice. How do I center the row of thumbnails? Also, how do I align the thumbnails to the center of the row (or at least the prev/next arrows)? Thanks! oh yeah, here's the CSS: div.thumbrow { clear: both; padding-top: 10px; margin-left: 20%; margin-right: auto;} /*THE MARGIN IS JUST A TEMP FIX, BUT NOT WHAT I WANT. I'D LIKE FOR IT TO BE CENTERED*/ div.float { float: left; text-align: center; } div.float p { text-align: center; margin: 0; font-size: 0.8em; } I have two div tags that I want to float next to each other. The page looks like this <table>These Tables stretch 100% of the width</table> <table>''</table> <div class="ParentDiv"> <div class="menuholder"></div> <div class="ChildDiv"></div></div> in FF everything works the way I want to. In IE if I shrink down the browser then the second div tag drops below the first. I want to change this so that it does not drop below but remains in the same place. Is there anything I can set to do that? If I remove the float and change the position on the menuholder the childdiv tag does not drop but the menuHolder content does not stretch the size of the parentDiv and gets chopped off at the height of the childDiv Code:
.ParentDiv {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
min-width:997px;
max-width:100%;
overflow:hidden;
min-height: 400px;
}
.ChildDiv {
position: relative;
width: 100%;
min-height: 400px;
}
.menuholder {
background-color: #EFF3F5;
color: #eef;
position: relative;
float: left;
left: 0px;
top: 0px;
overflow: hidden;
width: 160px;
z-index: 100;
}
Hi all, So i have been trying to get the divs with the content in to sit properly on IE6 they work correctly in firefox and ie 7 and 8. Originally the text div and the news bar div were both moved far down the page. I removed the height setting on the text div and it moved it back into (about) the correct place. But I cant figure out what is causing the news div to move, any advice would be greatly appreciated Code:
<body>
<div id="main" style="position:absolute; width:850px; background-image:url(images/4560-background_midext_02.jpg); left:15%; z-index:1;">
<div id="topborder"><img src="images/4560-bkground_top.jpg" /></div>
<?php include('components/Header.php'); ?>
<div id="body" style="position:relative; left:10px; top:10px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
<?php include('components/logodisplay.php'); ?>
******THIS DIV IS THE ONE WHICH IS MOVING******
<div id="newsbanner" style="position:relative; left:10px; top:7px; z-index:1; display:block;">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','560','height','60','title', 'newsbanner','src','flash/news','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/news' ); //end AC code
</script>
<noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="560" height="60" title="newsbanner">
<param name="movie" value="flash/news.swf" />
<param name="quality" value="high" />
<embed src="flash/news.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="560" height="60"></embed>
</object></noscript>
</div>
<div id="sponsorshipenquiries" style="position:relative; left:20px; top:20px; z-index:1; <?php echo $enquiry; ?> " >
<img src="images/header_sponsorship.jpg" />
<div id="text" style="top:10px; width:533px;">
Sponsorship provides a prime opportunity for your company to enhance its visibility and corporate presence during the conference. In addition to the intrinsic benefits of each option, all sponsorships include the opportunity to present a paper, full recognition on all promotional materials as an official sponsor and complimentary delegate places. All sponsorships are sold on a first come first served basis. Options can be reserved for a period of 10 working days.<br /><br />
<img src="images/header_sponsorshipoptions.jpg" />
<br /><br />
<img src="images/gr_platinum.jpg" />
<br /><br />
<img src="images/gr_gold.jpg" />
<br /><br />
<img src="images/gr_silver.jpg" />
<br /><br />
<img src="images/gr_bronze.jpg" />
<span style="left:29px; top:2px;"><p> For more information on becoming a sponsor of the conference please contact</p>
<p>Matthew Moss<br />
Conference director<br />
Tel: +[44] (0)20 7625 0000<br />
E-mail:mm@summittradeevents.com</p></span>
</div>
<div id="movedatfooter" style="position:relative; right:30px; top:170px;"><?php include('components/Footer.php'); ?></div>
<div id="borderbottom" style="position:relative; top:170px; right:30px;"><img src="images/4560-bkground_bottom.jpg" /></div>
</div>
<div id="sponsorshiplistings" style="position:relative; left:20px; top:20px; z-index:1;
<?php echo $listing; ?>" >
<img src="images/header_sponsorship.jpg" />
<div id="text" style="top:10px; width:533px;">
Sponsorship provides a prime opportunity for your company to enhance its visibility and corporate presence during the conference. In addition to the intrinsic benefits of each option, all sponsorships include the opportunity to present a paper, full recognition on all promotional materials as an official sponsor and complimentary delegate places. All sponsorships are sold on a first come first served basis. Options can be reserved for a period of 10 working days.
<p> For more information on becoming a sponsor of the conference please contact</p>
<p>Matthew Moss<br />
Conference director<br />
Tel: +[44] (0)20 7625 0000<br />
E-mail:mm@summittradeevents.com<br />
<br />
We would like to take this opportunity to thank the sponsors of TurkmenTel 2009 for their continued support.
<br />
<br />
<img src="images/gr_platinumsponsor.jpg" />
<br />
<br />
<?php
$type = "platinum";
include('components/logoviewer.php');
?>
<img src="images/gr_goldsponsor.jpg" />
<br />
<br />
<?php
$type = "gold";
include('components/logoviewer.php');
?>
<img src="images/gr_silversponsors.jpg" />
<br />
<br />
<?php
$type = "silver";
include('components/logoviewer.php');
?>
<img src="images/gr-bronzesponsors.jpg" />
<br />
<br />
<?php
$type = "bronze";
include('components/logoviewer.php');
?> </p>
</div>
<div id="movedatfooter" style="position:relative; right:30px; top:15px;"><?php include('components/Footer.php'); ?></div>
<div id="borderbottom" style="position:relative; top:4px; right:30px;"><img src="images/4560-bkground_bottom.jpg" /></div>
</div></div>
</div>
</body>
</html>
I have no idea what the problem is here, ive tried fiddling with some of the positioning properties and nothing seems to have any effect. So any help is greatly appreciated |
|||||||