|
CSS - Tableless Layout For A Simple Site.
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. Similar TutorialsHi, 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. 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>
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!!! 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! 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 have been working with css for a while but web design is just a hobby for me so I am not that good when it comes to advanced css. The problem that I am having is that IE is not rendering me page right and I am not sure if it also supports png transparency be cause me background images are not coming out right. Everything for this page work just right in FF but IE is a whole other story. So if somebody could check out my site and suggest changes that I could make so that it does work right in both that would be awesome. My Site and here is me css file css Code: Original - css Code /* Basic style sheet */ html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0px; padding: 0px; border: 0px; } body{ background-image: url(../images/thumbBG.gif); background-repeat: repeat; color: #999999; font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; text-align: center; } #wrapper{ width: 800px; text-align: left; background-color: #1A1A1A; } #rightshadow{ width: 850px; margin-left: auto; margin-right: auto; background-image:url(../images/rightshadow.png); background-position: right top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #leftshadow{ padding-left: 25px; background-image: url(../images/leftshadow.png); background-position: left top; background-repeat: repeat-y; /*background-attachment: inherit;*/ } #banner{ height: 135px; background-position: center; background-repeat: no-repeat; background-image: url(../images/banner2.jpg); } #nav{ height: 10px; background-color: #000000; text-align: center; margin-bottom: 10px; } #nav ul{ padding: 0px; margin: 0px; background-color: #000000; } #nav ul li{ display: inline; padding: 0px; margin: 0px; } #nav ul li a{ font-size: 80%; color: #FFFFFF; background-color: #000000; text-decoration: none; padding: 0px 25px 0px 25px; text-align: center; width: 9em; } #nav ul li a:hover, #nav ul li a:focus{ background-color: #D0EB5A; color: #000000; } #usepic{ height: 110px; width: 104px; border: 1px solid #000000; background-color: #000000; margin-top: 5px; margin-bottom: 15px; margin-left: 5px; } #user{ float: left; width: 115px; background-color: #000000; text-align: center; margin-top: 10px; margin-left: 13px; } /* html div#user { width: 20px; top: 38px; left:20px; position:absolute; }*/ #content{ margin-top: 10px; margin-right: 23px; margin-bottom: 4px; float: right; width: 625px; } .containAll{ background: #000000; margin-bottom: 10px; } .container{ width: 100%; float: none; margin-bottom: 10px; } #content p{ font-size: 80%; margin: 20px; font-weight: bold; } #content h1{ font-size: 130%; color: #003366; padding: 0px; margin: 20px; } #content h2{ font-size: 110%; color: #D0EB6A; padding: 0px; margin: 20px; } hr{ visibility: hidden; } .leftimage{ float: left; margin: 0px 10px 20px 0px; border: 1px solid #000000; } .rightimage{ float: right; margin: 0px 0px 20px 15px; border: 1px solid #000000; width: 150px; } .container hr{ clear: both; visibility: hidden; } hr{ visibility: visible; } #footer{ border-top: 1px solid #000000; background-color: #C0DB5A; color: #000000; clear: both; } #footer p{ padding: 3px; font-size: 70%; } #navcontainer{ font-size: 12px; width: 100px; margin-left: 5px; margin-bottom: 5px; } #navcontainer ul{ margin-left: 0px; padding-left: 0px; list-style-type: none; font-family: Arial, Helvetica, sans-serif; } #navcontainer a{ display: block; padding: 1px; width: 100px; background-color: #333333; border-bottom: 1px solid #1A1A1A; } #navcontainer a:link, #navlist a:visited{ color: #EEE; text-decoration: none; } #navcontainer a:hover{ background-color: #D0EB5A; color: #000000; } /* clearing ----------------------------------------------- */ .clearfix:after { /*content: "."; */ display: block; height: 0; clear: both; visibility: hidden; } * html>body .clearfix { display: inline; width: 100%; } * html .clearfix { /* Hides from IE-mac \*/ height: 1%; /* End hide from IE-mac */ }
I'm working on www.wirelessguy.net and I'm trying to add something to my layout. I want to have an outer box that surrounds the content and then add left and right borders to it so I can change the outside background color. I'm currently using 10% left/right margins to get the material in the middle of the page. Here is my css for the outerbox: Code:
div#outerBox
{
margin-left:-5%;
margin-right:-5%;
border-left: 1px dotted red;
border-right: 1px dotted red;
width:100%;
height:100%;
}
When I do this I get the following result: www.wirelessguy.net/index2.php Any ideas on how to get the box to be made with negative margins? Hi, I run this Farsi site and yesterday, I posted a few articles and suddenly I noticed my sidebar is out of its place! It is using wordpress and I must say, I did not change any css or did anything with the theme...just did normal posting. Would you kind people tell me how I can find out where the problem is in these cases? I checked to see if there is any extra code in the text of the articles recently posted, but found nothing...pure text and few <a> and <img> html tags.... size of the pictures are also moderate as you can see... I know you can't read the text, but where do you think I should look for the problem? the site address is (oh i can't post links!!!) please use 'punez' dot 'nafice' dot 'com' (it's a subdomain) Hello all - I wondered if anyone can help. I have created a site using html and css and seem to have a problem with the layout - see http://www.mysimplestore.com/ I have used <div>tags to define the different sections of the website in terms of a main container, header, left hand side, main content and a footer. When I look at the site in Internet Explorer there is gap between the search bar and the start of the text and I would like to reduce this gap. I have tried an number of options without success. Can anyone help? Thanks Techmog Hi, can you take a look at my site: www vitacam com in both IE7 and Firefox and let me know if you see anything in the code that is causing the layout differences? Everything's all bunched together in Firefox but it looks right in IE. Thanks, Shane 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 Hi really nw to using css just starting out today lol. So i was wondering how i can get the two divs mod1 and mod2 to sit side by side and expand the advBar div height when more and more content gets added to both divs, rather than me specifying a height and floating the two divs inside the advbar div ? any ideas would be great. unless ive lost yas. Code:
<body>
<div id="level0">
<div id="level1">
<div id="topBar">This is the top navigation bar.</div>
<div id="advBar">
<div id="mod1">2323 frwef sdf</div>
<div id="mod2">s dfs dfsd fsd fsd f</div>
</div>
</div>
</div>
</body>
Code:
body {
margin:0px 0px 0 0px;
padding:0;
background:#FFF;
}
#level0 {
background:#FC0;
}
#level1 {
padding-left:9px;
padding-right:9px;
margin-left:300px;
margin-right:300px;
background:#FFF;
}
#main {
background:#CCC;
}
#topBar {
padding: 10px;
background:#FC0;
}
#advBar {
padding: 10px;
height: 90px;
background:#FFF3AC;
}
#mod1 {
border: 1px solid red;
float: left;
padding: 10px;
background:#FFF3AC;
width: 45%;
}
#mod2 {
border: 1px solid red;
float: right;
padding: 10px;
background:#FFF3AC;
width: 45%;
}
Need a bit of CSS guidance I would like somefeed back on what is a good way to structure a page template using CSS I would like the page content to be displayed 780 px width, Centered Header image at top 780 px wide Horzontal Nav below 780 px wide also 2 columns of content below footer at bottom Im sure this is a common layout as I have seen it on many sites. Im just not sure what the optimal way to set it up using divs. SEO being my primary concern Here is the layout: Code: <body> <div id="main"> <div id="header"> headet stuff here </div> <div id="nav"> the nav </div> <div class="content"> <div id="left_content"> left content </div> </cfif> <div id="right_content"> right </div> </div> <div id="footer"> footer </div> </div> </body> STYLE SHEET: Code: #main{
position: relative;
margin-left: auto;
margin-right: auto;
width: 780px;
}
#header {
position: relative;
width: 780px;
height: 100px;
margin: 0;
padding: 0;
background-color:#8787d5;
}
#nav {
position: relative;
width: 780px;
margin: 0;
padding: 0;
border-top: 1px solid #ffffff;
background-color:#8787d5;
background-image:url(../images/nav_bg.png);
}
.content {
position: relative;
top: 0px;
left: 0px;
border-left: 1px solid #8787d5;
border-right: 1px solid #8787d5;
border-top: 1px solid #8787d5;
border-bottom: 1px solid #8787d5;
margin: 0px 0px 0px 0px;
background-color:#e9e9f5;
}
#left_content {
position: relative;
border-left: 1px solid #8787d5;
border-right: 1px solid #8787d5;
border-top: 1px solid #8787d5;
border-bottom: 1px solid #8787d5;
margin: 0px 0px 0px 0px;
left: 5px;
top: 5px;
width: 325px;
padding: 0;
}
#right_content {
position: relative;
border-left: 1px solid #8787d5;
border-right: 1px solid #8787d5;
border-top: 1px solid #8787d5;
border-bottom: 1px solid #8787d5;
top: 5px;
left:335px;
width: 440px;
padding: 0;
}
#footer {
position: relative;
padding: 20px 10px 10px 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: xx-small;
color: #993300;
text-align: center;
}
THe problem I am having is when I use relative position for left-content and right_content the right content is positioned to right of but at the bottom of the left_contetn div. I can get them to line up correctly using absolute positioning but then the content div that contains them and that also has the border and backgrond color does not expand vertically to to contain the left_content and right_content divs. any help is greatly appreciated thankya Quote: I just started working with CSS again, and I'm having problems coding my layout. The problem is he I'm testing on Firefox. div#wrapper is the problem. EDIT well, after playing with it some more, I have found out that this has no pattern to it at all, its pretty much just producing random results, so infinitely STUPID!!! Seriously. This is something that is so simple, and yet these idiots who come up with this crap make it so difficult. If you want to pad left and right, it shouldn't be this goddamn difficult. Sorry, I'm VERY pissed now, after working on something so basic for so long. I can only get a padding on the right for so far, and then it skips over to completely aligning to the right, while the left is so much farther over, even if it has smaller padding... what the hell. Heres the full code: index.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title>Elemental Concepts</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="wrapper"> <div id="upperwrapper"> <div id="banner"></div> <div id="memberswrapper"> <div id="members"> </div> <div id="membersfooter"></div> </div> </div> </div> </body> style.css Code:
body {
text-align: center;
margin: 0px 0px 0px 0px;
background-color: #E8E8E8;
}
div#wrapper {
width: 700px;
margin: 0 auto;
padding: 0px 50px 0px 25px;
text-align: left;
background-image: url('mainbg.jpg');
height: 100%;
}
div#upperwrapper {
width: 741px;
margin: 0;
height: 105px;
}
div#banner {
float: left;
width: 471px;
height: 105px;
background-image: url('banner.jpg');
}
div#memberswrapper {
float: right;
width: 249px;
height: 105px;
}
div#members {
width: 249px;
height: 98px;
background-image: url('membersbg.jpg');
}
div#membersfooter {
width: 249px;
height: 7px;
background-image: url('membersfooter.jpg');
}
div#wrapper, is the main div, which has a background. I need the insides spaced about 15 px from the left, and 15 px from the right. But for whatever reason, it usually ends up spacing 25 px from the left, and 5 from the right, the more I play with the numbers though, to get the results I want, the more obscure it becomes... it just WILL NOT do what I want, and WILL NOT follow any logical pattern with how it display. Help is really appreciated. I am completely and utterly lost... EDIT 2: Still working on it, and no progress, except the background image keeps disappearing every time I even think about touching the background attribute! I'm about to say **** it, and use tables. This is ridiculous. I just opened up IE6, and it looked even more obscure than it does in Firefox. This makes no sense. I just read a few tutorials on div padding, doesn't mention anything about this. Maybe its the floats causing the problem... but I don't see why elements on the inside could stretch the containing element, if it has fixed size and padding, and that still doesn't explain the IE6 problem's, which I'm not even going to get into now... since I have probably confused you enough already. I seriously think I could write an entire HTML/ CSS parsing engine, in any language, in less time than it would take me to code this layout properly in HTML/ CSS. Ridiculous. Well, I got the top working in Firefox, instead of floating left and right, the banner and memberswrapper, I floated one left, and the other had a left-margin. Though, I am almost 100% sure, the text, and other divs below are not going to align properly, with the edges of the above [banner and memberswrapper]. I am also afraid to see what this looks like in IE6. style.css Code: body {
text-align: center;
margin: 0px 0px 0px 0px;
background-color: #E8E8E8;
}
div {
margin: 0;
padding: 0;
}
div#wrapper {
width: 725px;
margin: 0 auto;
padding: 0 25px 0 25px;
text-align: left;
background: url('mainbg.jpg');
}
div#upperwrapper {
width: 741px;
margin: 0;
height: 105px;
}
div#banner {
float: left;
width: 471px;
height: 105px;
background: url('banner.jpg');
}
div#memberswrapper {
margin-left: 477px;
width: 249px;
height: 105px;
}
div#members {
width: 249px;
height: 98px;
background: url('membersbg.jpg');
}
div#membersfooter {
width: 249px;
height: 7px;
background-image: url('membersfooter.jpg');
}
Edit Again: Looks just as bad as it did before, in IE6. The background image repeats horizontally, which it should have absolutely no reason to do so, the width is 50 pixels less than the images width, and the padding on the left and the right, are each 25 pixels, accounting for the full image size... and yet the full image and then some is displayed. If screen shots would help, I can take some. Or if you want to see what an impossible layout to code looks like, I can send you a zip of everything. Theres 2 options left, tables or absolute positioning. I am working on this website : http://five-art.com and the code for the nav bar is : Code: <div class="content"> <table><tr><td><h1>[5]Art</h1></td><td class="navtop"> :: <a href="index.php">Call for Submissions</a> :: <a href="ms.php">Mission Statement</a> :: <a href="past.php">Event Archive</a> :: <a href="members.php">Members</a> :: <a href="contact.php">Contact Us</a>.</td></tr></table> </div> I added the table so that I could have two different font sizes without the text going to the next line. What would be the best way to do this with css. Thanks! Hi, I'm trying to constuct what, in real terms, is a simplistic page layout using CSS-P. Maybe I'm being stupid - but here goes... I am trying to constuct a page as follows: header (viewport width) leftMenu (width 150px) content (as wide as necessary) - top aligned with top of leftMenu footer (viewport width) - underneath the "tallest" of "Left Menu" and "Content" Easy huh? But, as soon as any content is greater than [viewportWidth - 150] (150=width of leftMenu), the content (depending, of course, on the CSS implementation) either slips below the leftMenu, disappears altogether(?), or has the footer right underneath the header with everything else below. I could do this with a simple table construct in under a minute. So please - CSS gurus, can you advise me how to achieve this in CSS, as it seems impossible (10 hours+)? I thought CSS was supposed to make design easy; If I'm not missing something and CSS can't achieve this (common) basic layout - what hope is there? All comments truly appreciated, HEX. Okay I am trying my best to let go of HTML tables and move to the wonderful world of using CSS for layout. I continue to find that, although it may be an archaic way of doing things, most of the time using tables for layout is the quickest and most accurate way for me to get the job done. Please don't hate, because I want to become more knowledgeable at using CSS! So in my latest project I have a problem. I have a navigation bar that stretches always accross my page. In that navigation bar I have two primary things: on the left I have a menu section, and on the right I have a login section. In the past I would have easily implemented the layout with tables, using something like this... <table cellspacing="0" cellpadding="0" style="width:100%;"> <tr style="background-color: black;"> <td align="left">[stuff for my menu section]</td> <td align="right">[stuff for my login section]</td> </tr> </table> The end result would be a solid black navigation bar that would contain the stuff for the menu section on the left and the stuff for the login section on the right. Each would sit inside and flush against its respective side of the containing solid black navigation bar. Also, this navigation bar would automatically adjust its height to contain both sections, no matter how tall. Pretty simple stuff, right? So now I am trying my best to figure out how to do this with CSS. At this point I have only a very crude understanding of how CSS and divs work in layouts. I started out by making a container div... <div id="NavigationBar" style="background-color:black;"> </div> ...then I embedded a div for each section... <div id="NavigationBar" style="background-color:black;"> <div id="MenuSection"> [stuff for menu section] </div> <div id="LoginSection"> [stuff for login section] </div> </div> ...When I ran the page I quickly noticed the output was quite different than what I expected. It showed my black navigation bar, but it stacked the login section along the left side and just under the menu section. So after some reading I discovered I should be able to solve the problem by assigning 'float:left' to the menu section div and 'float:right' to the login section div. And so I did. While this did cause each to appear in the correct location (menu section on the left, login section on the right), it also had an undesirable effect. Each section, after attachment of the 'float' styles, was no longer contained in the parent div. As a result each no longer contained the background color of the parent. And so now, while I have a partial solution, I am still left wondering what I should do to continue on and solve this issue. What I really need is for each section to be *contained* within the parent div and also use its background color, while also aligning properly to the left or right sides of the parent div. In other words, I want the black background color of the navigation bar to be shown behind my menu and login sections. And if my menu should render at 40 pixels high, 300 pixels high...whatever, the containing parent div should adjust to contain it, just like an HTML table would. For me, setting 'height' values for the parent div (essentialy in the background) and then using 'float' styles is not a good solution. What if the menu is rendered using a different font and thus changes heights? And even more important, what if a user does not view the page in standard 96DPI mode? In either case the rendered heights of the menu and login sections could change. If I were using tables this would not be a problem; the table would simply adjust to the needed height, no matter what. How can I get the same effect when using CSS and divs? Hi all, This is my first post here so go easy on me. Firstly, please look at this: h ttp://digitalformula.net/temp/layout.jpg - I can't post a proper URL since I'm a new user ... sorry for the space at the start of the address. Anyway, the top part is what I have now and the bottom part is what I'm trying to get to. Can someone please assist with the CSS for this? I know just enough CSS to be dangerous but I can't seem to find the right way to put the captions under the images without the image on the right dropping below the image and caption on the left. I've tried all different types of float etc but nothing seems to work - I know it's something I'm doing wrong as this is probably one of the more basic questions posted here. ANY help would be much appreciated! Thanks, digitalformula |
|||||||