|
CSS - Trouble Getting A Layout To Expand With Google Banners
Hi, I'm an amateur web designer, so I imagine my problem is probably something infantile to you all, but perhaps not.
I've got a page layout that includes three vertical content areas. One is a left menu bar, the middle is content, and the right is a Google Adsense banner add. My problem is that I've got the main content div position set to relative in CSS, but if the content doesn't extend past 600px then then Google banner expands out over my layout. I thought it was as simple as setting the right_content area, where the banner resides, to relative as well, but that starts the banner wherever the main content area ends... way down on the page. I also considered just setting the main content area to 600px tall, and if content goes beyond that then it will expand the layout because it's set to relative position.... but that doesn't work in Firefox... the main content ends up expanding out over the layout. Anyway, I'm probably being really stupid about this, but I just can't figure it out. I've attached my html and css... sorry it's so big and messy, I didn't know what you would need. Similar TutorialsHi, I need a 2 column layout where the left column is for the menu (vertically stacked) and the right side has the content. Specifically I need a 2 column layout that is: 1) Cross browser (FireFox and IE 6) 2) BOTH columns to be at least 500px in height, but if the content in the right column expands beyond that height... .then I want both columns to expand, not just the right or content containing column, but BOTH columns to expand Here's where I'm at now: http://www.alexwenttochina.info/template.php you can see that when the content overflows... neither the left nor right column expand. Arrrrrgggghhhhh My current CSS for the sample site is: body{ background: #32331c; } #wrapper { width: 790px; margin: 0 auto; height: 100%; } #left { width: 220px; float: left; height: 500px; background: #a2c4ca; background-image: url(images/peace.gif); /*height: 100%;*/ } .left-container { margin: 10px; margin-bottom: 0; /* IE6 pushes footer down without this */ /* height: 100%; */ } #right { width: 680px; /*width: 80%;*/ background:#cae688; float: left; height: 500px; /*height: 100%;*/ } .right-container { margin: 20px; margin-right: 10px; margin-bottom: 0; /* IE6 pushes footer down without this */ } .clear { clear: left; } Any help would GREATLY be appreciated!! I can't tell you how frustrating CSS is. Every piece of code I see has as many work-arounds as it does actual style coding. Tags mean nothing because you never know if it works or doesn't, or how it works. It shouldn't be this difficult, you can tell it was piece-mealed together and every browser has it's own way of doing things. Thanks Vmuisc Hello, I'm having an interesting dilemma. Hopefully I can get some advice. I have created a site using a 2 column liquid layout. The site is created using CSS. I have tested successfully in both FF & IE (which my client uses). In the content area, there is a data table that is generated dynamically. At times the table consists of many columns. If the table strecthes beyond the screen view (resulting in horizontal scrolling) the container/layout does not stretch with the table. Any thoughts? Any suggestions will be greatly appreciated! Below are snippets of code from the css code and html code: CSS Code:
body {
margin: 0px 20px 0px 20px;
background-color: #069;
background-image: url(../images/bkgd.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color: #036;
}
#container {
width: 100%;
margin: 0px auto 0px auto;
background-color: #DDD;
}
...
#content {
background-color: #FFF;
padding: 20px;
margin-left: 190px;
}
...
#content_main table.data {
margin: 0px 0px 0px 0px;
border: 1px solid #369;
background-color: #FFF;
}
#content_main table a.nobrdr {
border-bottom: none;
}
#content_main table.data th {
height: 20px;
color: #E8E8E8;
text-align: center;
background-color: #369;
border: 1px solid #2C537D;
text-transform: uppercase;
}
#content_main table.data td {
height: 25px;
padding: 3px;
border: 1px solid #CCC;
vertical-align: top;
line-height: 15px;
}
HTML Code: <table width="100%" border="0" cellpadding="0" cellspacing="0" class="data" summary="this table displays BDXT selected data"> <tr> <th scope="col" width="5%" nowrap>fund</th> <th scope="col" width="6%" nowrap>bsli</th> <th scope="col" width="4%" nowrap>reg</th> <th scope="col">title</th> <th scope="col" width="9%" nowrap>projcode</th> <th scope="col" width="7%" nowrap>cip</th> <th scope="col" width="4%" nowrap>afc</th> <th scope="col" width="10%" nowrap>avail</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th scope="col" width="10%" nowrap>unoblig</th> <th scope="col" width="5%" nowrap> </th> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>HQ</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD) </td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>140</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>HQ</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>3J0</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>TC</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>4C0</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> </table> Hi, I am having some trouble laying out this page: http://209.123.229.141/racing_profile.php?user=2 (Username: devshed Password: css) I want the 'Latest Media' Box positioned in the middle of the left hand side, the 'Latest Replays' box in the middle of the right hand side and the 'Latest Events' box below both. I have floated them to the left and right and cleared the floats for the 'latest events' div, but the media and replays div won't floar in the "middle" of each side. The CSS for the page is: http://209.123.229.141/css/racing_profile.css http://lovemeforme.org/ang/ I realize it's because of the float: right and float: left, but I put it in a container with a set width, but it's made no difference. I can't put a margin-left/margin-right to them because the layout is centered and it won't work on other resolutions.. hmm, any ideas? Thanks! I'm trying to create a page layout for a Bing Maps application using css and html. I'd like to create a layout similar to http://maps.google.com I have a bar at the very top of the page 25px high, a header 90px high, a left column 270px wide and the rest of the page, or the right column is the Bing Map. Currently, the map fills the width to the edge of the page as I'd like it to, however, I can't get the height to do the same. I have to set a px height for the div containing the map, which is fine, but when viewed in a different browser or with different screen resolution, the scroll bar appears and you have to scroll down to see the full map. Does anyone have any idea how google's managed to have the map height equal to the window height minus the header, etc? I hope this makes sense. Many thanks What I currently have: dubdubdub.cybercan.co.uk/wavelength I'm trying to create this (don't laugh): dubdubdub.cybercan.co.uk/wavelength/layout.jpg (centred and with the gradient filling the whole background). I need the height to be 100% (the drop shadow to the bottom of the screen) with the footer (swirly line and social network links) always at the bottom of the page but visible. I've got no idea what's going on and it's driving me round the bend. I've obviously also got to do the menu and the centre image but I'll have a think about that when I get to it. Some advice would be really helpful...If I'm way off the mark with what I've done I'll gladly pay someone to help me out on this one as it's been a real pain... Thanks, Richard PS I'm really really sorry for including the web links but I couldn't think of any other way to explain what I meant. Hi Guys, I'm new to this forum and fairly new to advanced CSS. I am trying to get a liquid three column layout with a header. I need the whole page to center and the columns to expand as content is entered. I have a design semi-working in Firefox but in IE it is completely messed up. I would be happy to get it working at least in Firefox, but ideally having it work in both browsers would be nice. Any ideas please let me know. Thanks! http://www.randyjensenonline.com/working Hi im new to using css and iv come across a problem. Im trying to create a css tab panel and I came across a site which had a template ready to use! Iv modified the css and html slightly to suit the style of the site im designing, however the css tab panel renders incorrectly in IE Here is what iv managed to create: http://starrbuckk.googlepages.com/tab.html http://starrbuckk.googlepages.com/tabs.css Now I have no idea how to fix the problem for IE! As you can see its the 1 pixel just below the introduction tab. The problem is that the bottom border for the tab is white and it extends all the way to the edge. Im wondering if there is there anyway to get the left border to 'override' the bottom border so that it show up ontop on the bottom border? Thanks! hello. i'm totally new to this... just helping out a friend's site. i started with a template i got from dreamweaver, and i built something that is almost there... except my right_col of images needs to be aligned on the right, in line with the right edge of the header graphic. example of my probelm: http://www.sableandbatalion.com/home/new_index_test.htm corressponding css file: http://www.sableandbatalion.com/css/3col_rightNav.css (there are some definitions in this file that i have not used and have not deleted yet, but everything is well-labelled, so it shouldn't be an issue figuring what i'm using, especially when you see my html code, duh!) this version works on firefox, but not on IE ( this is meant only to show what i'd like it to look like, but i'd much much much prefer to work with the version above) : http://www.sableandbatalion.com/home/index_test.htm corresponding css file: http://www.sableandbatalion.com/css/driver.css help!! thanks in advance from a total novice who is having lots of fun playing with dreamweaver! man this program is great! -adam ps. explain things to me like im 4-year old - once again, im a newbie! I am trying to get an 800px fixed width box centered in between 2 outside boxes that are scalable in width so that the outside boxes would not be visible to an 800px resolution, or if the browser window was changed on a higher res monitor. I don't want any space between the outside boxes and the edges of the screen.... I can't seem to get this to work though. Thanks for any help.... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>3 Column Layout Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0;
position: relative;
width: 100%;
height: 100%;
}
#maincontent{
width: 800px;
height: 100%;
position: relative;
top: 0;
margin-left:auto;
margin-right:auto;
border: 1px solid #ccc;
}
#columnone {
width: auto;
height: 100%;
background-color:#006699;
}
#columntwo {
width: auto;
height: 100%;
background-color:#006699;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="columnone">Left Column</div>
<div id="maincontent">Main Content</div>
<div id="columntwo">Right Column</div>
</div>
</body>
</html>
So I've decided to go the 'pure css' route other than my tables for tabular database content. I had most of the 'positioning' finalized when I ran into a huge trouble . . . how to make a border image repeat and place it properly. After getting frustrated with the border, I decided to use one simple table just to get the borders correct. Everything was fine there even though I didn't want to give in to the table temptation. That is until I tried to add my suckerfish dropdown and have it centered. So now I'm stuck. My site is turning into a table based site and I'm really annoyed that I can't fix it myself. I've had trouble with coding before, but I always manage to fix it myself. Can somebody please point me in the right direction? I've been searching these forums and the web for 2 days and not a single example can be fine tuned into my solution. [edit] p.s. I know the css and html is a mess right now. I'm going to clean it all up once I get something working =/ http://www.mytreetv.com/showcase/index.php css Thank god I'm doing this site for free as a favor to a friend of the family instead of a paying job. Nevermind... I figured out a way to do it. And I fixed a major typo. http://www.djoj.net/newhome.html Hello, I have a div wraper ro contain all of the content. At the bottom I have links to affiliates and their banners. The problem is, for some reason those banners are intruding onto the wrapper div, even though I ended it. I double checked and all of the divs are /'ed And no matter how many <br> or <p></p> I put in it stays the same. Thank you for your help. I have a page that uses CSS to handle layout. I also use a combination of CSS and javascript to create an expandable menu. I have a simplified version of this page he http://www.stringersites.com/csstest/index.htm Users of Dreamweaver will recognize this as being based on the HaloNavLeft template. As you can see, the page displays fine until you start expanding the menu items contained in <div id="mainMenu">. If you expand enough, the mainMenu box extends beyond the borders of the <div id="pagecell1"> in which it's contained. My primary question to the group is how to get the pagecell div to autoexpand along with the mainMenu div. My secondary question is how to stretch a vertical column to the height of the containing div. Specifically, this is <div class="relatedLinks">, which is contained in pageNav, which, in turn, is contained in pagecell1. The relevant pieces of CSS are included below, but you can link to the entire CSS sheet from the test doc above. Thanks in advance for the help. -Steve Stringer Code:
#pagecell1{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
}
#mainMenu {
background-color: #EEE;
border: 1px solid #CCC;
color: #000;
width: 350px;
position: absolute;
margin-left: 10px;
margin-top: 20px;
}
#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}
.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}
God, this is really simple but I have forgotten how to get the containing box to expand Basically the text div expands but the containing div doesn't PHP Code: <div style="width: 300px; min-height: 200px; border: 1px dashed red;"> <div style="border: 0; width: 110px; height: 110px; float: left;"> <img src="#" width="100" height="80" border="0" align="left" /> </div> <div style="border: 0; width: 190px; min-height: 200px; float: right;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In odio nibh, interdum eget, mollis quis, imperdiet non, risus. Curabitur laoreet vehicula massa. Curabitur consequat dui vitae lectus. Nam rutrum sapien id quam. Pellentesque aliquet nulla dignissim ante. Fusce metus libero, vehicula hendrerit, condimentum id, malesuada in, elit. Nam fermentum, metus in varius scelerisque, diam purus tristique tortor, vitae suscipit elit ipsum eu dolor. Ut dictum porttitor velit. Pellentesque cursus purus elementum dui. Phasellus aliquet ante vitae pede. </div> </div> Hi, Is there any way to set a DIV that starts at 500px height but can grow if the content inside is longer than that? Thanks. I'm trying to get the footer to dynamically expand with the content in the box 1, 2, 3. How can i do this? The HTML Code:
<div id="footer">
<div id="box1">Content</div>
<div id="box2">Content</div>
<div id="box3">Content</div>
</div>
The CSS Code:
#footer {
min-height:150px
height:auto;
}
#box1 {
float:left;
min-height:150px
height:auto;
}
#box2 {
float:left;
min-height:150px
height:auto;
}
#box3 {
float:left;
min-height:150px
height:auto;
}
I have some tables that contain a lot of columns, so the table goes beyond the users viewport. I would like the body of the page to expand to the table, anyone know of a way to get the body to expand horizontally. Below is some code, I would like the red outline to expand to the black. 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>Insert title here</title> </head> <body style="border:1px solid red;"> <table style="border:1px solid green;width:2500px;"> <tr> <td style="">slkfdj</td> </tr> </table> </body> </html> I've been searching for a few days, but I haven't found a solution to my problem. How do I get my parent DIV to expand to contain all of my content beyond the viewport? CSS: Code:
html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
min-height: 100%;
}
body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
min-height: 100%;
}
.page {
background-color: #dddddd;
margin-left: -390px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-top-color: #9CB0C0;
border-right-color: #9CB0C0;
border-bottom-color: #9CB0C0;
border-left-color: #9CB0C0;
position: absolute;
height: 100%;
min-height: 100%;
width: 780px;
left: 50%;
top: 0;
}
.header {
position: absolute;
height: 158px;
width: 764px;
background-color: #FFFFFF;
left: 7px;
top: 0px;
}
.content {
position: absolute;
left: 7px;
top: 159px;
background-color: #9CB0C0;
height: 821px;
width: 764px;
margin-bottom: 34px;
}
.footer {
background-color: #415569;
height: 34px;
width: 764px;
left: 7px;
bottom: 0px;
}
And the HTML: 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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/test.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="lPage" style="position:absolute; z-index:1" class="page">
<div id="lContent" style="position:absolute; z-index:2;" class="content"></div>
<div id="lHeader" style="position:absolute; z-index:1" class="header"></div>
<div id="lfooter" style="position:absolute; z-index:3" class="footer"></div>
</div>
</body>
</html>
I've searched through a few of the threads here, but haven't been able to find an answer either. Thanks, Brent |
|||||||