|
CSS - Divs That Move Higher Up The Page When More Are Added?
So I'm working on a website of mine that needs a varying amount of content boxes (divs with content in) per page.
The way I want them to display however, is the catch. So I'll explain what I want first, and then show what I've done at the moment. What I want I want them to display at around 10% from the bottom of the user's page. And be anchored to that point. So no matter what size the browser window is, the content will be fairly similarly laid out (within reason). SO. If a page needs only one content box (one div with content in), I want the bottom left corner of that div to be 10% up the users browser window from the bottom of the page. BUT. Then if I want 2 divs of content on that page, I want the 1st div to be pushed up the page by the 2nd, and have the 2nd div's bottom left corner 10% up the user's page. And then with the same pattern every time I add another div. So to try and make sure you get it, I drew these. On a page that needs 1 content box - http://img163.imageshack.us/img163/945/1div.jpg On a page that needs 2 content boxes - http://img715.imageshack.us/img715/33/2divs.jpg On a page that needs 3 content boxes - http://img693.imageshack.us/img693/1484/3divs.jpg So what I've done Is.. used a container div that is situated at that point of the page that I want the divs to align from. But because I failed at trying to relatively position them, I just positioned them with absolute values. Which is far too rigid for what I need. At the moment it has 3 divs to show the process I want. The 1st content div obviously then has to stay at the bottom, so I need to move my content to other divs when I want to add something below an existing one. Another problem/requirement is that if one of the divs has more lines of content than the other, big inconsistent gaps emerge. So depending on the size of the div, it would need to get pushed further, or less, up the page. HTML Code: <div id="content-container"> <div id="content1"> abc </div> <div id="content2"> def </div> <div id="content3"> ghi </div> </div> CSS Code:
#content-container {
width: 1px;
height: 1px;
position: absolute;
bottom: 10%;
left: 10%;
}
#content1 {
width: 600px;
height: 10px;
position: absolute;
bottom: 110px;
}
#content2 {
width: 600px;
height: 10px;
position: absolute;
bottom: 250px;
}
#content3 {
width: 600px;
height: 10px;
position: absolute;
bottom: 390px;
}
Basically I want it to be flexible, rather than rigid. Which I had hoped could be fixed with relative positioning, but I couldnt manage that. Similar TutorialsI know it has to be a padding or margin issue, but I cannot figure out where it is coming from. I have spent several days going back to this and trying to look at it with fresh eyes with no luck. I am sure it will be a 'duh' type of thing when I get a solution. Here is the webpage: http://www.palmettobaydesigns.com/new/layout.html I am getting extra space of about 10px it looks like between the white rounded top image that makes the top of my box and the div below it called .box - in ff4. In IE 8 I am getting about 1px space below the box. Thanks in advance! I have a php page wich returns some dymanic content....what i need is, using css stylsheets, place each echo where i want... In this example shown here is supposed to move the word ID: but it also moves the word Sueldo: and i dont why, since the Div is already closed before Sueldo begins.... here`s what i get http://www.selex.com.mx/example.jpg on this example can someone help with this please... PHP Code: switch ($x) { case 0: echo "<div id=\"testing\"> <p class=\"p1\"><span> ID:</span></p> </div>"; break; case 3: echo "<p> Sueldo: "; break; case 4: echo "<p> Horas Extras: "; break; case 5: echo "<p> Bono Estacionamiento: "; my css stylesheet goes like this #testing { clear:both; margin: 20px 20px 20px 10px; width: 160px; float: left; } #testing { font: italic 10pt/22pt georgia; text-align:center; } Hi to all. First off, thanks for reading my question. I appreciate any help or consideration anyone can give. I am developing a website for a singer friend, using joomla and a template I purchased. I have only been building websites for 9 months now, so please forgive my ignorance. The problem is that the content, navigation etc moves left or right, almost diagonally depending on the resolution of someones screen. This is noticeable to me as well, if I zoom in and out on my page. I have no idea what is going on at all. Could someone give me some pointers? Here is the site: fernyhillscomputers.com.au/fordham/ Thanks, Chris. Bear with me please. I am brand new to html/CSS etc... I just cobbled together a page a few days ago using someone elses code as a reference, I hardly know what I did or how it works, but it works just like I want it to - Background centered and stationary (no scrolling with content), but the content does scroll, with NO horizontal scroll bar. You can view it he bit(dot)ly/rbsZsH - THIS IS WHAT I WANT MY OTHER PAGE TO DO Ok, so feeling smug, I tried to do another one like it, without the sidebar/header, etc... For the most part it works, EXCEPT - I have an unexpected horizontal scroll bar that goes about 50% across the browser and allows the user to pull the content off-center across the background. I have nearly pulled my hair out trying to fix it and put a hidden message under the content just for fun.. (make lemonade when you get lemons, right?) You can view second page he bit(dot)ly/qMbYl2 - THIS IS THE GOOFY PAGE The only real clue I have is that the first page is set to 780px wide and has this comment in the container div: /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ My second page container div is set to 802px because I am using an image from Photoshop rather than a background color. Thank you if any of you can shed light on the situation. P.S. - I'm sure I've totally butchered the code, and you can assume when you answer that I can cut and paste but not really understand what you are saying. At first this was slightly amusing. The border in the lower middle column dubbed "News" extended underneath the other divs to the top in Firefox. See he www.djoj.net/test/indexwierd.html Css: (Look at the way bottom of the CSS. The last 3 styles) www.djoj.net/test/styles2.css So I changed my div's to span's and wrapped them in one div labled "bottom" Now look... www.djoj.net/test/index.html Css: (once again, at the bottom) www.djoj.net/test/styles.css How can I fix this? It's a problem in both browsers. I don't want to use tables, I'd rather stick to CSS positioning. Thank you in advance! ~B My problem is that the site I'm developing for my church displays wonderfully in FireFox Opera Netscape BUT in IE the headings in the content block refuse to be transparent so that my background image shines through like it does for the rest of that block. Here's the page...any help would be appreciated much! Parkview Baptist Church I just noticed that if I resize the IE to a real narrow window, it stacks the first h2 and pushes the background down enough that all of that first h2 shows, but the subsequent on is not visible. Don't know if that helps or not... Best Regards, Jim I would rather be exposed to the inconveniences attending too much liberty than to those attending too small a degree of it. -- Thomas Jefferson Has anyone heard of Firefox 4 or Firefox 3.5 positioning a Div 3 pixels higher on a web page than all other A-Grade browsers? If you want to see what I mean, go to baampblue . asystechonline . com / ReconstructIndex.php. Sorry I could not insert a link. I'm a new member. I password protected this to keep bots from scanning it. The username is the word demo. The password is also the word demo. Look for "Carl Gohm" on the right side of the page, under "BAAMP Honors Lifetime Members". Click on the Carl Gohm link. A new rounded corner box will open up in the "Featured Projects" display with a picture and information about Carl. If you look at the new box in IE 8, Opera 11, Chrome 11, or Safari 5.0.5 the new box fits perfectly inside of the Featured Projects display. If you look at the new box in Firefox 4 or 3.5, you should notice that the new box is shifted up 3 pixels too high. The HTML and CSS validate with no errors on the W3C validators. I'm using jQuery to generate the new box for Carl Gohm. I have ruled out the jQuery as the cause of the problem by creating a minimal test case that doesn't involve jQuery. I tried using a clean version of Firefox from Spoon.net, because I thought maybe one of the Add-Ons in Firefox was causing the problem. That didn't make any difference. I tried viewing this on another computer that is running Firefox 4 on Windows XP, but the problem was still there. I used Firebug to disable and then re-enable each line of CSS one at a time to see if there was a CSS problem. I didn't notice an improvement. I just need to know if I am wasting my time trying to troubleshoot something that is not correctable. Thank you in advance for your time. Hey everyone, I'm having troubles with some DIVs. I'm trying to divide a page into 4 equal sections. If I remove the doctype declaration, it looks right in Firefox 3.5.2 In ie it is all sorts of crazy. 100% height of the inner objects seems to be referencing the window height and not the parent elements height. I'm more concerned about Firefox anyway. I expect IE to require some hacks. If I set an absolute size to the body, in px, everything works fine. But if I have the body set to %, things shrink. I tried creating a wrapper div and setting it's height/width to 50% but that didn't work either. I tried to find a solution on kravvitz and bon rouge's sites but I didn't find anything that was 100% fluid. Any ideas? HTML4Strict Code: Original - HTML4Strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> body{ width:100%; height:100%; padding:0; margin:0; color:#ffffff; background-color:#000000; } object{ float:left; clear:both; width:80%; height:100%; background-color:#cccccc; } .section{ float:left; clear:none; width:48%; height:48%; margin:1%; background-color:#333333; display:block; position:relative; } .panel{ float:left; clear:none; width: 16%; height:96%; margin:2% 2%; background-color:#cccccc; } #container{ float:left; clear:both; width:100%; height:100%; min-height:100%; background } </style> </head> <body> <div id="container"> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> </div> </body> </html>
Hi everyone. I sure hope someone is nice enough to help me figure this out... these two problems has plagued me for a long time and I simply need to ask for help. I'm new to CSS, so you'll probably see all kinds of problems other than the one I'm writing about (and if you do, please do tell me... I'm open to any suggestions on how to tweak this). My site is http://www.kettlebell.com. But specifically, let me direct you to http://www.kettlebell.com/fitness91...the-rescue.html as it is a good example of the problems. I have several DIV tags separating the content, displaying google adsense, etc. I have a liquid 3 column layout. Some of my frustration may become more apparent as you resize the browser window. Chunks of my page get covered over with white space, which appears to be related to these div tags. So what ends up happening is that, depending on the size of the window, more or less of the content (including pictures) get chopped off... so I may have whole paragraphs missing or I may see only a strip of a photograph. For example, when the browser is fully expanded, since the text spreads over more area, it looks like the white areas get even larger. This problem reduces the smaller the window is, because the text wraps sooner, resulting in less competition for space. To make things even weirder, this problem isn't consistent in FireFox. On my PC here at home, the page looks fine. But at work, in FireFox, I have this problem. (I don't know what version I have at work because I can't check right now, but mine at home is 1.5.0.7) As may be of no surprise to anyone, I have this version in IE regardless of where I am! Also, is there a way to make it so that, when a page gets a certain width (on the smaller side), that it'll stop the columns from moving, so I can have a fixed minimum width for each column and the overall page? Because if I don't, then the layers end up covering each other when I make the page too small. I'd rather that, when I make it too small, the page stops getting smaller and just forces me to scroll to see the whole thing. Any assistance would sure be appreciated. I'm so frustrated with this. Also, if anyone has any suggestions on how I can improve the page or my use of CSS or any other tips, I'd be eager to hear them. Just please keep in mind that I am a newb. Here is my CSS... http://www.kettlebell.com/css.css (by the way, has anyone ever had their monitor start "pinging"? right now, it is intermittingly making a pinging noise and flashes a line across the monitor in different areas. Weird.) Hey, I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore. Does anybody know how to fix this? Thanks in advance. Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right. To simplify my problem, look at this example. Code:
<html>
<body>
<div style="float:right">
Hello there!
</div>
<hr>
</body>
</html>
If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly. It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so: Code:
<html>
<body>
<div style="border: 1px solid #000; ">
<div style="float:right">
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
Hello there!<br />
</div>
<div style="clear: both"></div>
</div>
<hr>
</body>
</html>
Am I missing something fundamental here? Is there a better solution? Thanks in advance. Here's the site in Question: http://www.winchps.vic.edu.au It's a standard fixed width floated DIV columns with a wrapper. One thing it does have is a second DIV inside both columns to display the Gradient background over the top of the repeated background. It works perfect in Firefox & IE7 (with a tweak) but IE6 mkes the sidebar nested div drop below the original sidebar DIV click here for a screenshot for those lucky enough not to have IE6. Here's the CSS code for the basic layout: Code:
body {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 12px;
text-align: center;
margin: 0px 0px 60px 0px;
padding:0px;
border: 0;
line-height: 2;
}
#header {
width: 802px;
}
#wrapper {
width: 802px;
margin:0px;
padding: 0px;
text-align: left;
margin: 0 auto;
background: url(images/bodybg.jpg) center repeat-y;
}
#content {
padding: 0px;
margin: 0px;
}
#maingrad {
background: url(images/winchcontentgrad.jpg) top left repeat-x;
padding: 10px;
}
#main {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
#mainstop {
width: 589px;
float: right;
background: url(images/winchcontentbg.jpg) repeat;
border-left: solid 1px #000;
border-right: solid 1px #000;
border-bottom: solid 1px #000;
font-size: 10px;
}
#sidebargrad {
background: url(images/winchsidebargrad.jpg) top left repeat-x;
padding: 10px 5px 0px 10px;
}
#sidebar {
width: 200px;
float: left;
background: url(images/winchsidebg.jpg) repeat;
line-height: 2;
font-size: 14px;
border-left: solid 1px #000;
border-right: solid 1px #000;
}
I obviously need to put a conditional comment in there, same for what I did for the minor IE7 tweak, but I'm struggling to suss out what's causing it, I haven't found the specific issue on any of the regular sites (PIE etc). Anyone got any ideas? Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF. Hi, Can anyone please explain why the more text I add to the main content area 'full-size' div.... the more spacing gets added below it. Is there a way to stop this? example herel Code:
/*begin normal CSS
----------------------------------------------------*/
body {
text-align: center;
background: #362f25;
color: #333;
font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#wrap {
margin: 0 auto;
width: 960px;
text-align: left;
background: #f8f4f2 url(images/bg-wrap.gif) repeat-y 0px 0px;
padding-bottom: 5px;
}
/*classes
----------------------------------------------------*/
.full-size {
margin-left:20px;
margin-top:20px;
width: 700px;
font: 12px;
position:relative;
left:180px;
top:-370px;
}
/*header
----------------------------------------------------*/
#header {
height: 50px;
background: #362f25;
color: #d2cccb;
font: 15px "Palatino Linotype", Arial, Helvetica, sans-serif;
}
/* left nav menu
----------------------------------------------------*/
#navcontainer
{
width: 170px;
border-right: 1px solid #000;
padding: 0 0 0 0;
margin-bottom: 10px;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
position:relative;
left:0px;
top:-30px;
}
#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navcontainer li
{
border-bottom: 1px solid #90bade;
margin: 0;
}
#navcontainer li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 15px solid #006865;
border-right: 10px solid #203654;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #navcontainer li a { width: auto; }
#navcontainer li a:hover
{
border-left: 15px solid #203654;
border-right: 10px solid #006865;
background-color: #2586d7;
color: #fff;
}
i am currently making a page which makes use of some JS that swaps between three div containers by changing the display to hide on all but one... anyhow... i here is the page.. if you click on "best reviews" it adds a huge gap but if then click on "worst reviews" the gap disapears clicking back onto "best reviews" the gap is gone too... it is very tricky... i've used this JS before, and it worked fine... and it this page looks and acts fine in IE6... i just thing the space of one of the containers is remaning, even tough it is being hidden... here is the page... i've put a 1px dashed #900 border around all divs so as to make it easier to debug... Mini Catalog I have a div that just serves as a horizontal rule, it's 800px wide and 3px high. Firefox renders it properly, but internet explorer is adding 10 pixels totaling 13 pixels high. I have tried the traditional <hr> tag, but it adds an ugly subtle border around it in IE that can't be removed. EDIT: sorry, I forgot to mention that it's internet explorer version 6 The markup: Code:
<div id="header">
<div id="banner">
</div>
<div id="nav">
<div id="floatleft">
</div>
<div id="floatright">
</div>
</div>
</div>
<div id="header_hr">
</div>
<div id="main">
</div>
The CSS: Code:
#header
{
margin:0 auto;
width:800px;
font-size:11px;
}
#banner
{
background-image:url('../images/banner.jpg');
height:29px;
width:800px;
}
#nav
{
width:800px;
}
#floatright
{
float:right;
}
#floatleft
{
float:left;
}
#header_hr
{
background-color:#464646;
clear:both;
height:3px;
margin:0 auto;
width:800px;
border:0;
}
#main
{
width:800px;
margin:0 auto;
}
Here's the output: I am setting up a site that has an inner white content area surrounded by an outer grey area. Both areas have rounded corners. I use a bg image (single image for both corners) with a no repeat to handle the corners on the top. I want the same amount of padding all the way around the white box. So I have a div with the white content area inside the div for the grey box and gave the grey box a padding of 7px. This displays fine in IE (oddly enough), but doesn't display correctly in Firefox or Safari. What it is doing in those 2 browsers is adding extra space on the top and the bottom, so the grey area is about 12px taller than it should on either side. Where is this extra space coming from? How can I fix this? I have attached an image showing the issue and the code used is below. So here's the css: Code: body{
padding:0px;
margin:0px;
background:#535353;
}
.nav_container{
width:770px;
height:76px;
background-color:#FFF;
}
.page_body{
background:url(images/page_top_curve.gif) top left no-repeat #e1e1e1;
width:756px;
padding:7px;
}
.content_container{
background:url(images/content_full_top_curve.gif) top left no-repeat #fff;
width:756px;
}
and here's the 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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Title</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <!--MAIN NAVIGATION--> <div class="nav_container">hgjgjhg </div> <!--PAGE BODY--> <div class="page_body"> <div class="content_container"> <p>dsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsd</p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </body> </html> Hi guys I've added a banner zone in my site, but it is not looking good in FF nor IE !! Site: www.stockestate.com Code for the banner zone (div) Code: #banner {
float:left;
position:relative;
top:0px;
left:25px;
width:468px;
height:60px;
margin-top: 50px;
padding: 4px 4px 4px 4px;
}
Does any1 know what should I try to fix this ? Thanks Hi there guys, This is a pretty specific problem to my website, but I can't seem to find out why part of my navigation list moves down when an element is shown by Javascript in IE. So I can't plug in a url into this post, so I suppose I'll just explain the problem. I have a list navigation with images, and within one of the list elements is another nested list. When I click on the link that then uses JS to display the subnavigation, the link below that shifts down something like four pixels when its not supposed to, and I couldn't fix it by playing with CSS for some reason, but I'm assuming the problem is hidden in there somewhere. I've been trying to resolve this for a couple days; if anyone could help me out, I'd really appreciate it! |
|||||||