|
CSS - Css Positioning Frustration
I need some help. I'm considering going back to using tables for layouts. Not that there is anything inherently wrong with that, just that ive spent alot of time learning how to position with CSS ..
Its just frustrating. Floats are NOT the way to implement columns. Could someone please tell me what Im doing wrong here? I want the column on the left's header to align up just perfectly with the header in the column on the right. Ive reduced padding and margins in both cases to zero, yet there is an un-accounted for positive space in FF and a negative space in IE. What the hell is this????? http://www.doublethinkdesigns.com/d...php?option=e_KL Some code: PHP Code: print("<div id=\"left_content\">\n"); print("<h3>Current Key List</h3>\n"); print("<div id=\"scroll\">\n"); // programming .. blah print("</div>\n"); // End Left Content print("</div>\n"); // Begin Right Content print("<div id=\"right_content\">\n"); print("<h3>Available Key Lists</h3>\n"); print("<form>\n"); // programming .. bleh print("<input type=\"submit\" value=\"Update Active List\">\n"); // End Right Content print("</div>\n"); And some CSS: Code: body
{
margin: 0px;
padding: 0px;
font-family: Century Gothic, Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: center;
color: #FFFFCC;
background: #000000;
}
/* CONTENT PARTITIONS */
div#single_div
{
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 0px 30px 0px 30px;
border: 2px solid blue;
}
div#left_content
{
width: 400px;
float: left;
margin: 0px;
padding: 0px 0px 0px 0px;
border: 2px solid red;
/*
text-align: center;
*/
}
div#right_content
{
margin: 0px 0px 0px 440px;
padding: 0px 0px 0px 0px;
border: 2px solid green;
}
Similar TutorialsHi. Here's my site in development: bongbay.spacemakeover.com/homemade-bong.php In Internet Explorer it looks fine, the menu's align to the top fine - BUT in firefox there is a big annoying gap from the top. Does anyone please know how I can fix this?? Hi all, I have been teaching myself CSS for a website I am making, which has all been running smoothly until an issue today. Basically the issue is with a .class DIV nested inside a #id DIV.. Code:
<div id="wrap">
......
<p>...</p>
.......
<div class="info_box">
........
<p>.....</p>
......
</div>
.......
</div>
Using CSS, i set the font color (among other things) for <p> to be different in the "wrap" id and "info_box" class.... and I was shocked to find that the styling I had written for the class was ignored, and it was using all the styling specified for the ID. After searching, I found that this is because of specificity, in which the #id has a higher specificity. Although I now know the cause, i am not sure what I should do? I would like to be able to keep "info_box" as a .class, because I would use it more than once on a page. The only solution I can think of is to make the "wrap" a .class, but this does not seem logical, as I only use it once. Please Help! Firstly I am a noob to design and code and am attempting to self teach so if this is in the wrong section I do appologize. I am attempting to create a designed content box and nearly have it working except I have one issue that has for the past week been causing the vain in my temple to pulsate rapidly! The content box has a total of 10 image boxes around the center text box. The problem is that the 2 side boxes that have a background image will not tile continuously as is intended when the text expands past a certain point as it lengthens. Here is the code that I have also I am using Dreamweaver CS3. If anyone could help me solve this you could very well be saving a life! I had images however apparently I am not able to use em so I hope its ok to pull a sneaky worldwideweb.axiomfiles.com/Files/213668/4junk2.png - shows the different cells worldwideweb.axiomfiles.com/Files/213668/4junk.png - shows the content box on the web after Ive lengthened the text area (which is a must on certain pgs and can be quite long) My Thanks in advance. Dee =============================== <table border=0 cellpadding=0 cellspacing=0 align="center" width="781"> <tr valign="bottom"> <td width="86" height="100"><img src=".../Files/213668/4topleftcentercorner.png" width="86" height="100"></td> <td height="74" valign="middle" background=".../Files/213668/4topcenter.png" bgcolor="#1C1C1E" alt=""> <div align="left"> <table border=0 cellpadding=0 cellspacing=0 width="291"> <tr valign="top"> <td width="291" height="50" align="center"> <div align="left"> $block[title]</div></td> </tr> </table> </div></td> <td width="46" height="100"><img src=".../Files/213668/4toprightcentercorner.png" width="86" height="100"></td> </tr> <tr align="left" valign="top"> <td height="100"><img src="...../Files/213668/4topleftcentercorner2.png" width="86" height="106" align="top"></td> <td height="100" rowspan="2" bgcolor="#1C1C1E" alt=""> <left> <font size=2> <left> <table> <tbody> <tr> <td width= 700 align="left"> <p align=left><font size=2> $block[content]</td></tr></tbody> </table></td> <td height="100" alt=""><img src="...../Files/213668/4toprightcentercorner2.png" width="86" height="106" align="top"></td> </tr> <tr> <td width="86" height="900" background="..../Files/213668/4leftsidecenter2.png"></td> <td width="86" background="..../Files/213668/3maintextbotrightcorner2.png" alt=""></td> </tr> <tr valign="bottom"> <td width="86" height="82"><img src="...../Files/213668/4botleftcentercorner.png" width="86" height="82"></td> <td height="80" background="http..../Files/213668/4botcenter.png" alt=""></td> <td width="86"><img src="..../Files/213668/4botrightcentercorner.png" width="86" height="82"></td> </tr></table> <p><BR><br><BR> 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 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 Hello, I've got a frame work of a site that's positioned correct in firefox, but it won't align at all in IE. If you look at it in firefox, the site frame shows correct, all centered and all of the images are looking like they are in the correct position. However, when you go to the site in IE, everything is aligned to the left and completely off. How do I get that so it's all showing in the center like it is in Firefox? Site: clayton-nichols(dot)com/Test/index.html CSS style(validated) clayton-nichols(dot)com/Test/css/style.html thanks for the help! 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. 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 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 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> Hi all, I'm trying to get the two <ul> tags in div#header to sit on top of each other (horizontally), and for both of them to sit next to the <h1> title tag. The problem is that the second <ul> floats left underneath the <h1>. Any suggestions? Relevant HTML: Code: <div id="header"> <h1>Athena:</h1> <ul> <li><a href="library.php" alt="Browse Library">Library</a></li> <li><a href="project.php" alt="Browse Projects">Projects</a></li> <li><a href="personal.php" alt="Browse Personal Section">Personal</a></li> </ul> <br /> <ul> <li><a href="" alt="">Subhead1</a></li> <li><a href="" alt="">Subhead2</a></li> </ul> </div> Relevant CSS: css Code: Original - css Code #header { width:98%; margin:0px auto; background-color: #2E5C8A; border:solid #2E5C8A; 2px; border-width: 0px 5px 0px 5px; color:#fff; padding:5px; } #header a { text-decoration:none; color:#fff; } #header a:visited { text-decoration:none; color:#fff; } #header h1 { font-size: 3em; margin: 0px; display:inline; } #header ul { list-style-type: none; display: inline; } #header li { vertical-align: top; display: inline; padding: 0px 5px 0px 5px; margin: 0px 5px 0px 5px; border:solid #49496e 1px; background-color:#8699ad; font-size: 1em; font-weight: bold; } #header ul li:before { content: "\2606 \0020"; } #header li:hover { border:solid #fff 1px; background:#49496e; } #header ul li:hover:before { content: "\2605 \0020"; }
Also - is there anyway of getting the <li>'s to be the same width? Thanks heaps, --Simon Hello, I have a flash movie that keeps moving out of place when the browser size is altered. How can I make it so the movie stays in one spot no matter what the browser size? Hello all, i have a page setup which is working well in all browsers. I have a div layer positioined in the page at the moment it is positioned absolute, and it is in the correct place you can see it at www.loadedtechnologies.com/impact , the layer is id="demoImage", you can have a look at the css file in page source. I don't want this layer positioned absolute, i want it to be relative to the "MidTopContent" layer, so that when the ADMIN menu appears on the top of the page once logged in, the demoImage layer will follow down within MidTopContent, Please help THANKS 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 I have a select menu that I want to sit on the bottom of the page regardless of the length of the page. How can this be achieved? Height of menu is 235px and width is 150px. 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, I have the following code: PHP Code: <div id="siteDimention"> <div id="topLeft"></div> <div id="topRight"></div> <div id="latestProjects"></div> <br><br> <div id="additionalBusiness"></div> </div> body { margin: 0px; padding: 0px; } #siteDimention { width: 758px; margin-left: auto; margin-right: auto; padding: 0px; } #topLeft { width: 479px; height: 305px; float: left; background-image: url(../images/main_topLeft.jpg) } #topRight { width: 279px; height: 305px; float: right; background-image: url(../images/main_topRight.jpg) } #latestProjects { width: 758px; height: 185px; background-image: url(../images/main_latestProjects.jpg) } #additionalBusiness { width: 758px; height: 165px; background-image: url(../images/main_additionalBusiness.jpg) } Which if you look he http://www.talktonight.com/test/ .. works fine in IE, but not in Firefox. What am I doing wrong? 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. I have a table with 680px in width & trying to fit my img into the table. I'v tested it both in 1024x768 & 1280x1024. But it just doesn work. When i position it to match my 1024x768, it'll look bad at 1280x1024.. here is my positioning code : img.one{ position:absolute; top:325px; left:550px; } why is that so... http://www.drowninginmytears.org/invalid/ it works in internet explorer, however in firefox, it is i believe 3px off (the main header and navigation), can anyone figure out why? i've been stumped now for hours. thanks my css is: http://www.drowninginmytears.org/invalid/css.css |
|||||||