|
CSS - Positioning Issue In Ie With Tableless Layout
Hi all-
I m building a tableless site and am having difficulties getting the one section to fit in properly. It works great in FF but bumps down below the left nav in IE and I'm bashing my head against the wall trying to figure out which property is causing this behaviour. The majority of my audience uses IE so this is important that it displays properly See the example he http://verticalextreme.com/redesign.html CSS is he http://verticalextreme.com/_site_stylesheets/veStyle_green.css thanks in advance for any pointers! Similar Tutorialshey all, i am new to using CSS. (Yes i am very much behind the times). But i am trying to rectify that! Now the problem i am having is that i have a flash object that i simply want to align centered horizontally and it stays centered no matter what. but i would also like to position it y = 100 (x and y positioning) any ideas! Hi, Learning CSS and trying to convert a table layout to DIVs. Example..... PHP Code: x---------------------------------------------------------x | | | Banner | | | x---------------------------------------------------------x | Nav 1 | Nav 2 | Nav 3 | Nav 4 | [Nav graphic] | Nav 5 | x--------------x------------------------------------------x | | | | Menu | | | (Fixed | Introduction | | Height) | (Fixed Height) | | | | x--------------x------------------------------------------x | | | | | | | Main Text | | (Auto Height - So it can expand) | | | | | | | x-----------------------------------------x---------------x | Closing Text | Photo | | (Fixed Height) | (Fixed | | | (Height) | | | | | | | x---------x-------------------------------x-----x---------x | | Graphic Footer Bar | | x---------x---------x-----------------x---------x---------x | | | Stats Bar | | | | | | | | | x---------x---------x-----------------x---------x---------x | | | Text Nav Bar | | | x---------------------------------------------------------x Problem: How do I align the vertical columns (nav buttons especially)? I don't know enough about DIVs to know how to align them flush against each other. That's 6 columns of graphic images. Could someone post a code example to learn from? Heads up welcome. Hey everybody I am trying my hand at doing a tableless layout for the first time. Here is the original look of the page I am trying to convert... http://www.bleutiger.com/houstontruckclub/indexoriginal.html here is wht I have so far... http://www.bleutiger.com/houstontruckclub/testindex.html and my css file is... http://www.bleutiger.com/houstontruckclub/testindex.css What am I doing wrong? I realize that I have not included all of the content but I am having trouble with a couple of things... I built a container to hold the entire page.. I put a second container called "header" that holds... three more div's.. MainTitle Spacer MainNav that part is working fine with all of the formating. THe next container "Header2" is suppose to have two columns in it but I can't get them to float to the left and right the way they are supposed to? Help!!! Hello to all, There are lots of talks lately that tables are dying. Well, I am trying to rebuild my site using tableless layout. At one point I though I was there, but here is one problem I am having (see the attached image). When a text in a right or a left column exceeds my 100% height, I loose the layout. Is there anything that I can do to fix that? Here is the html: Code:
<html>
<head>
<title> New Document </title>
<style>
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
background-color: #EEEEEE;
margin: 0;
padding: 0;
}
#cssNavigationTop {
padding: 10px;
color: #FFFFFF;
text-align: center;
background-color: #330033;
clear: both;
}
#cssNavigationBottom {
padding: 5px;
color: #FFFFFF;
text-align: center;
background-color: #330033;
clear: both;
}
#cssColumnLeft {
width: 18%;
float: left;
}
.cssPanelLeft {
margin: 10px;
}
#cssColumnRight {
width: 18%;
float: right;
}
.cssPanelRight {
margin: 10px;
}
#cssContent {
margin: 0 18% 0 18%;
padding: 10px;
background-color: #FFFFFF;
height: 100%;
border: 1px dotted #666666;
border-top: 0;
border-bottom: 0;
}
#cssFootNote {
padding: 3px;
text-align: center;
clear: both;
}
//-->
</style>
</head>
<body>
<div id=cssNavigationTop>cssNavigationTop</div>
<div id=cssColumnLeft>
<div class=cssPanelLeft>
cssPanelLeft
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
</div>
<div id=cssColumnRight>
<div class=cssPanelRight>
cssPanelRight
</div>
</div>
<div id=cssContent>cssContent</div>
<div id=cssNavigationBottom>cssNavigationBottom</div>
<div id=cssFootNote>cssFootNote</div>
</body>
</html>
Hi. I'm making a registration and login pages with some additional information, and I'm wondering how to make them tableless? What I'd do with tables is put table in a table, because I want to do something like this: A 640px (or any other value) width box in the center of the screen, in which there is another box under some text, which is borderless login box. Same would go for the registration box. And without tables - I have no idea how to do it. Not sure if this is the right section, sorry if it isn't. Thanks. hi guys I've begun trying so I finally can leave <tables> I've started trying with a little opensource template, and now want to be how much correct I am... The following image shows the original design, also with the layers division I've created I'd like to know if I'm going ok with this initial design, or which would you modify, and so on. Then I'll follow up the thread with the code, so I can see if I learned correctly Thanks a lot in advance, This is my first tableless layout and it's not working thus far. Take a look at: http://wwww.planetbattleground.com/test/ There is a gap above and below the header's buttons. There is also some weird spacing at the top of the DIV that contains "Lorem ipsum dolor sit amet...". The padding is inconsistent compared to the left and right. If there any other tips you could give me to improve the CSS (in case it uses bad style or whatever) please tell me! I'm trying to position parts of a layout using CSS only. For my assignment I'm not allowed to change anything in the .html document. When I get the layout the way it's supposed to look, I'll preview it using different screen resolutions and the layout changes and looks distorted. How can I make a layout that's 3 columns, 3 rows using CSS that will be viewed properly in different screen resolutions? Here's part of my CSS and how I have it set up... Code:
#main {
background-color:#CCCCCC;
position:absolute;
margin-left:255px;
margin-right:450px;
margin-top:-250px;
}
If you need the whole code I can post that too. Hey all, Can anyone recommend some good sites and forums, for CSS layout and positioning designs/help? Cheers. Hi everyone, For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine. So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html but I don't see what he did to solve it. Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating . I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions. Thanks in advance if you can give a DIV newbie a heads up. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>
So I just started working on my first complete website in a couple years and needless to say i'm behind the times in regards to layouts. I want to use CSS, more specifically DIVs to layout my site. I created a background in Photoshop that will serve as a guide for where I want the various boxes/text. I've done extensive searching and reading on the different kinds of positioning you can do with DIVs. Whether it be absolute or relative or float. But I have yet to figure out the proper way to code in the various DIVs so that they remain in the same spot no matter the resolution of the screen or if someone resizes the window. I just want to be able to tell them where I want them and not have to worry about them moving. The way I have it coded now, the DIV moves around when I resize the window - something I don't want. Any help would be greatly appreciated! Like I said I'm just getting back on my feet when it comes to HTML/CSS and i'm a bit rusty. Thanks!! 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=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: 'Lato', sans-serif;
margin: 0;
background: #0C0 url(landscaping1.jpg) no-repeat center top;
}
#leftcontent
{
border:1px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
height:300px;
border-radius:12px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
float:left;
position:relative;
top:450px;
left:80px;
}
</style>
<title>Mueller Lawn and Lanscape 2012</title>
</head>
<body>
<div id="leftcontent">
Some text goes here.
</div>
</body>
</html>
Also, here is what the site looks like with the above code. Obviously i'm still working on the visual aspects of the site, so disregard that part for now. http://i110.photobucket.com/albums/n120/infantryclothing/0cb6b676.png Hi been trying for a while now to fix this problem without luck see link below removed Its a gallery page with a scrolling layer below the main image (you need to click a thumbnail to see the problem). The scrolling layer behaves as if its outside the page flow and does not snap inline with its parent when the page resizes. The page does not reload to view the new main image I'm using ajax and the problem only seems to happen in IE as far as I can see for now. Has anyone time to help? Jimmy I have been using css for a while, but mostly just for style, not layout. I am trying to do a site, with basically three divs. One on the left for content, two on the right...one for a menu, and the other showing an image. I have stripped down the page to the smallest possible that I can show the problem. Basically, I want the image (red background) to be below the menu (dark purple bg), and both of them on the right of the content (lavendar bg). I have validated the html, but I am not getting a response from the css validator right now. Here is my html so far: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<title>Vote YES Mosinee!</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
padding: 0px;
background-color: #FFF;
text-align: center;
font: 76% Verdana,Arial,sans-serif;
}
div#container{
width:800px;
margin: 0 auto;
text-align: left;
background: #ff0;
}
div#content{
background: #d1c9e2;
width:550px;
}
div#nav{
float: right;
width:240px;
background: #484393;
}
div#nav p{
padding: 5px 0;
}
div#nav h2{
font-size: 110%;
color: #333;
}
div#imageSection{
float: right;
width: 240px;
background: #ff0000;
}
</style>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>There will be a menu here.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
<li>It will have many items.</li>
</ul>
</div>
<div id="imageSection">
<img src="(URL address blocked: See forum rules)" alt="Children">
</div>
<div id="content">
<p>Vote YES is dedicated to reaching out to the members of the Mosinee community and to raising awareness of the situation our elementary students face each school day. Through their efforts, they hope to gain the support of Mosinee's voters and help the community create a facility that enables an optimal and safe learning environment.</p>
<p>After years of failed referendums and the advent of another proposed addition, numerous community members have come together and organized "Vote YES" (VOTE for Your Elementary School). The organization was formed to support the referendum proposed by the school board and help educate individuals around the community. </p>
<p>On April 3, 2007, the voters of the Mosinee School District will be asked to approve a referendum to address space inadequacies and safety issues at the current elementary school. The VOTE YES group formed for a number of different reasons. Teachers and parents found it difficult to ignore the glaring parking issues, overcrowding in the cafeteria, the use of hallways and storage closets for classes, and the 20-year band-aid solution of adding portable classrooms. Taxpayers couldn't ignore the problem and individuals throughout the community stepped forward to help. </p>
<p>Many More Paragraphs....</p>
</div>
</div>
</body>
</html>
How can I achieve this? Hey, I'm trying to make a 3-column layout, and I'm having troubles with IE positioning the 3rd column. The address is URL . I have no problems trying to make one where the middle column is the "main" one, but for some reason it is working out now. Also, if possible, I'm also trying to put in a footer image that will cover the whole part of the bottom (from the far left of the browser to the far right of the layout. It's perfectly fine in Firefox, but IE looks bad Thx P.S. here's an image of my problem, since it might look different when someone looks at it as i might still be screwing around w/ it <img src="http://img.photobucket.com/albums/v411/mflotron91/problem.jpg"> http://www.mihomeanddesign.com/test/ I was hoping someone would have a suggestion as to how to lay this site out without using absolute positioning for the #mainimage div. I know that I could float it right within the main wrapper, but I also want the top nav and the footer to extend 100%. I want to do this to avoid having to put "style="padding-bottom: 423px; " in every <p> at the bottom of the page if there is not a lot of text on it... like on the home page and the contact page. Any suggestions would be greatly appreciated. I'm using absolutely positioned divs as a dropdown subnavigation. While I have yet program the javascript functionality that will make these divs appear and disappear, I am currently working on placing the divs just right on the page. (The simple part, right?? Right...) Check out this page: http://www.psd7.com/fst/www_live/ It shows one of my subnavigation divs (the rest are hidden). On most browsers, when you roll over the Our Tradition button on the left, the horizontal line lines up perfectly with the top of the subnavigation. However, on the most commonly used browser on the planet (IE for Windows), these things are not lined up, but are slightly offset. I can't imagine how to work this out. If I change the top value for the subnav so it lines up in IE for Windows, then it won't line up in any of the other browsers. Here's the css code: Code:
#subnav_our_tradition {
position: absolute;
left: 155px;
top: 230px;
width: 137px;
background-color: #7C272D;
z-index: 3;
}
Here's the HTML code regarding that one subnav: Code: <div id="subnav_our_tradition"> <div class="subnav_item"><a href="our_tradition/intellectual_tradition.htm">The Franciscan Intellectual Tradition</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/mission.htm">Mission Statement</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/community_life.htm">Community Life</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/resources.htm">Resources</a></div> <div class="subnav_divider"><img src="grafix/misc/spacer.gif" width="10" height="1"></div> <div class="subnav_item"><a href="our_tradition/links.htm">Links</a></div> </div> Can anyone suggest a workaround? I'm trying to create a 3 column layout where all the columns are contained within 1 larger <div>. So far I've managed to create 3 columns using absolute positioning that dont allow the back-ground image of the containing <div> to show through. If I use relative positioning, the background-image shows, but the columns are set relative to one another and they stagger from left to right in a diagonal fashion. I can correct it using negative values for the "top" attribute, but it seems bushleague and its incredibly tedious. Is there anyway I can have 3 PROPER (not using the above method) columns while also having the largest containing div's back-ground image show through them? The following gives me the staggered layout: Code:
.leftColumn{
margin-left:20px;
width:100px;
border:thin dotted #999999;
}
.middleColumn{
margin-left:121px;
width: 450px;
border:thin dotted #999999;
}
.rightColumn{
margin-left:572px;
width: 200px;
border:thin dotted #999999;
}
.main{
left:200px;
width: 950px;
background-image: url(Images/PaperBkg.gif);
background-repeat:repeat-y;
}
<div class="main">
<div class="leftColumn">
</div>
<div class="middleColumn">
</div>
<div class="rightColumn">
</div>
</div>
Thanks guys. this should be simple, but i just don't seem to have the hang of css yet what i want right now is a div for the links and stuff at the top, a bar on the left with the content to the right, and then the footer for more links and stuff, basically something like this site http://www.c21homeservices.com/common/mkttrends.php?mtt=selling only using css the man problem right now is that i can't get the content box positioned so that it has a 5px border around it or something so you see its parent box as a border and as more content is put into it the page justs gets longer at the content box with its parent moving with it maybe just looking at what i have will help more the HTML Code: ...... <body> <div id="all"> <div id="head"> Head Section </div> <div id="main"> Bar <div id="content">Content Goes Here</div> </div> <div id="footer"> footer </div> </div> </body> </html> and the css Code: body {
background-color:#ff0000;
}
#head {
height:200px;
}
#all {
margin-left:3%;
margin-right:3%;
background-color:#a0a0a0;
}
#main {
background-color:#ff00ff;
}
#side_bar{
background-color:#99ff99;
}
#content{
position:relative;
float:right;
width:80%;
right:10px;
background-color:#ffffff;
padding:5px;
}
#footer {
height:200px;
}
those funky colors are so i can see the divs |
|||||||