|
CSS - Css Simple Page Layout Help
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 Similar TutorialsHi 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%;
}
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! 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, 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. 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 hey 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. 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. I've been working in CSS, man, is it tiresome for a beginner! After much trail and error, I've come up with my first CSS page. Where I'm stuck, is in the area where all the text is. When I put more text into that page, none of the surrounding styles/boxes[?] adjust to the text format (also shown in a link below), and I can't seem to figure out how to center the entire page itself. Sorry, for the stupid questions, I'm a total novice, and can barely understand most of the CSS postings in this forum. Text extending instead of expanding layout: http://rafia.info/css/layers.bad.htm Thanks sincerely, rups27 When I start my page layout, it always starts around an inch down from the top of the browser. Ive seen websites, like techeblog.com that start all the way from the top. How do i do that? Thanks. I have been tasked with creating a webpage, they have told me what they want and i have found the perfect template that fulfills there needs except for one thing. this template ((oswd.org/design/preview/id/3428)) is what i will be using from oswd, its great but i would like to have it sit centered in the page with a margin on all sides not just the right and the left. for example omniture.com has margins on all 4 sides, allowing the grey background to be viewable above the header and footer. how can i achieve this result with my template ive tried numerous things and nothing has worked for me so far. im not an expert web designer and dont have time to learn css inside and out, just need a little guidance or some code i can impliment. Thanks in advance Hey all. K, i have very limited access to IE 6, but I know for a fact that the layout on this page is going to be nasty. I'm using the following stylesheet for it, and am wondering if anyone can help me out by taking a look at it, and at very least addressing the major issue of the two halves of the content page aligning. Code:
#tshirtBox {
width:50%;
float:left;
border-right:1px solid #ddd;
}
#tshirt_formBox {
width:49%;
float:right;
}
#tshirt_imagebox {
width:320px;
height:320px;
margin:auto;
border:1px solid #eee;
}
#tshirt_imagebox p {
text-align:center;
margin:5px;
}
.shirtForm {
width:90%;
margin:auto;
margin-top:10px;
border:1px solid #eee;
padding:5px;
}
.shirtForm p {
margin:8px 5px;
}
.shirtForm fieldset {
border:1px solid #ddd;
padding:10px;
width:90%;
}
.shirtForm legend {
font-weight:bold;
background:#CFEA30;
border:1px solid #ddd;
margin:5px;
padding:4px;
}
.shirtForm label {
width:30%;
height:20px;
background:white;
margin:2px;
padding-top:8px;
float:left;
font-weight:bold;
color:#555;
text-align:right;
}
.shirtForm_inputBox {
width:65%;
float:right;
border:1px solid #ddd;
height:26px;
margin:2px;
}
.shirtForm input[type="text"] {
background-color:#eee;
color:#444;
}
.shirtForm_inputBox input[type="text"] {
width:98%;
height:20px;
padding-top:2px;
margin:2px;
}
.shirtForm_inputBox select {
width:98%;
height:20px;
padding-top:2px;
margin:2px;
}
* + html .shirtForm_inputBox input[type="text"] {
width:96%;
height:18px;
}
.shirtForm_qtyInputBox {
width:15%;
float:right;
border:1px solid #ddd;
height:26px;
margin:2px;
margin-right:50%;
}
.shirtForm_qtyInputBox input[type="text"] {
width:92%;
height:20px;
padding-top:2px;
margin:2px;
}
* + html .shirtForm_qtyInputBox input[type="text"] {
width:86%;
height:18px;
}
.submitQuote {
float:left;
margin:10px;
padding:2px;
background:#CFEA30;
border:1px solid #ddd;
font-weight:bold;
cursor:pointer;
}
.totalText {
color:red;
font-weight:bold;
}
#swatchList {
margin:0 auto;
width:320px;
}
#swatchList li {
float:left;
width:30px;
height:30px;
margin:1px;
list-style:none;
cursor:pointer;
}
Much appreciated! Hey all, I'm looking to create a simple CSS layout design with a title bar running across the top, with the title picture/text in a middle column and then a middle column running down the centre of the page, something like this. Can anyone tell me how I can do that, with the top bar/title and the central title/main column? Thanks. OK, I have been trying to figure this one out but it's been a while since I last messed with floating stuff around on a page. The layout I want is an element taking up the full width at the top, a navigation bar on the left and any number of elements taking up whats left under the top one to the right of the nav bar. I have gotten this working sans top element by absolutely positioning the nav bar and giving the main elements appropriate left margins, but with the top element this would require setting a top position for the nav bar perfectly fitted to the height of the top element. I was hoping to be able to float the nav and main elements, and clear the top one (in case it's narrow). The problem is, ideally I'd have the nav bar be a fixed width, and the main elements can then scale with the browser window. But I can't get it to work right. Any suggestions? I am having issues with my index page not showing correctly in IE. It works properly in all other browsers I have tested. Below the banner area the register, login, and members areas should go across the page but in IE they go down the page as if there is only one column. I need them to go across the page as they do in all other browsers. Any help would be greatly appreciated. Below is the CSS code and HTML code. The site this is for is www.mycookfamily.info. CSS Code: Code: * { padding: 0; margin: 0; outline: 0; }
body { font-size: 12px; font-family: Arial, "Trebuchet MS", sans-serif; color:#565656; background:#212121; left bottom repeat-x; }
.index_box {
margin:0 0 20px 0;
background: #E1F7FA;
padding:0 0 5px 0;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
a { color: #565656; text-decoration: underline; }
a:hover { text-decoration:none ; }
.cl, .clear { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.shell { width:960px; margin:0 auto; position:relative; }
h2 { padding-bottom:4px; background:url(images/h2.gif) left bottom repeat-x; margin-bottom:9px; font-family: "Trebuchet MS", Arial, Sans-Serif; font-size:27px; color:#272728; }
h3 { color:#fff; font-size:20px; padding-bottom:10px; }
h5 { font-size:10px; color:#4062b7; font-weight:normal; padding-bottom:2px; }
h5 a { color:#4062b7; text-decoration:none; }
h5 a:hover { color:#4062b7; text-decoration:underline; }
.button { font-size:11px; color:#2a2b22; font-weight:bold; text-decoration:none; }
.button span { font-size:11px; color:#2a2b22; font-weight:bold; cursor:pointer; }
/*
Header
*/
#header { background:url(images/header.jpg) left top repeat-x; height:75px; }
#logo { float:left; width:201px; height:75px; text-align:left; }
#logo a { float:left; width:201px; height:75px; font-size:0; line-height:0; text-indent:-4000px; background:url(images/logo.png); }
/* Navigation */
#navigation { float:right; padding-top:5px; background:url(images/navigation-separator.jpg) right 1px no-repeat; }
#navigation ul { list-style:none; padding-right:1px; }
#navigation ul li { float:left; padding-left:1px; background:url(images/navigation-separator.jpg) left 1px no-repeat; }
#navigation ul li a { float:left; padding:0 16px 0 15px; height:64px; line-height:64px; font-weight:bold; font-size:13px; color:#272727; text-decoration:none; }
/* #navigation ul li a:hover, */
#navigation ul li a.active { background:url(images/navigation-active.gif); color:#fff; }
#navigation ul li a span { float:left; }
/*
Intro
*/
#intro { background:url(images/intro.gif) left top repeat-x; height:418px; padding-top:22px; }
#intro .slider-holder { width:960px; height:353px; position:relative; overflow:hidden; }
#intro .slider-holder ul,
.jcarousel-clip { list-style:none; width:960px; height:353px; position:relative; overflow:hidden; }
#intro .slider-holder ul li { float:left; position:relative; width:960px; height:353px; list-style:none; }
#intro .slider-holder .offer-image { position:absolute; top:0; left:0; }
#intro .slider-holder .offer-image img { border:1px solid #a7a0a0; }
#intro .slider-holder .offer-data { position:absolute; top:1px; right:1px; height:317px; width:230px; background:url(images/semi-transparent.png); padding:34px 20px 0 25px; }
#intro .slider-holder .offer-data .entry { height:212px;}
#intro .slider-holder .offer-data p {
color:#FFF;
font-weight: bold;
line-height:18px;
padding-bottom:18px;
text-align:justify;
}
#intro .slider-holder .offer-data p a {
color:#C90;
font-weight: bold;
}
#intro .slider-holder .offer-data .buttons { padding-right:4px; }
#intro .slider-holder .offer-data .buttons .button,
#intro .slider-holder .offer-data .buttons .button span { height:29px; line-height:29px; float:left; }
#intro .slider-holder .offer-data .buttons .button { float:right; background:url(images/intro-button.jpg) left top repeat-x; border:1px solid #434340; padding:0 8px; }
#intro .slider-holder .offer-data .buttons .button span { background:url(images/intro-button-span.jpg) left top no-repeat; padding-left:7px; }
#intro .slider-navigation { height:24px; background:url(images/intro-shadow.jpg) left top no-repeat; padding-top:36px; }
#intro .slider-navigation ul { list-style:none; margin-left:420px; }
#intro .slider-navigation ul li { float:left; }
#intro .slider-navigation ul li a { background:url(images/slider-navigation-normal.jpg); width:19px; height:20px; display:block; font-size:0; line-height:0; text-indent:-4000px; text-decoration:none; }
#intro .slider-navigation ul li a.active,
#intro .slider-navigation ul li a:hover { background:url(images/slider-navigation-active.jpg); }
/*
Main
*/
#main { background:#f8f8f8 url(images/main.jpg) left top repeat-x; }
#main .shell { width: 900px; margin-left:auto; margin-right:auto; padding:25px 0; }
#main p { padding-bottom:10px; line-height:17px; }
.box-first { float:left; width:250px; padding:0 19px 0 0; }
.box-center { float:left; width:250px; padding:0 19px 0 0; }
.last-box { float:left; width:300px; padding:0 19px 0 0; }
.box .entry { height:217px; padding-left:2px; }
.box .big-image { padding:4px 0 10px 0; }
.box .big-image img { border:2px solid #fff; }
.box .buttons .button,
.box .buttons .button span { background:url(images/main-button.jpg) repeat-x; height:29px; line-height:29px; float:right; display:inline; border:1px solid #bfbebe; padding:0 8px; }
.box .buttons .button span { float:left; border:0; background:url(images/main-button-span.jpg) left top no-repeat; padding:0 0 0 7px; }
#main .news { }
#main .news ul { list-style:none; }
#main .news ul li { border-bottom:1px dotted #e8d0d2; padding-bottom:7px; margin-bottom:15px; }
#main .news ul li.last { border-bottom:0; padding-bottom:0; margin-bottom:0; }
#main .news ul li .post-image { float:left; width:76px; padding:3px 22px 0 0; }
#main .news ul li .post-image img { border:2px solid #fff; }
#main .news ul li .post-data { float:left; width:203px; }
#main .news ul li .post-data p { color:#413f3f; line-height:18px; padding-bottom:0; }
#main .news ul li .post-data a { color:#4062b7; }
.bullet-list ul { list-style:none; padding-top:1px; }
.bullet-list ul li { line-height:12px; background:url(images/ul-bullet.gif) left 5px no-repeat; padding:0 0 14px 10px; }
.bullet-list ul li a { color:#4062b7; }
/*
Footer
*/
#footer { background:url(images/footer.jpg) left top repeat-x; color:#b3adad; padding:24px 4px; font-size:10px; }
#footer a { color:#b3adad; text-decoration:none; }
#footer a:hover { text-decoration:underline; }
#footer .footer-navigation { }
#footer .footer-navigation ul { list-style:none; }
#footer .footer-navigation ul li { float:left; padding-right:8px; margin-right:8px; border-right:1px solid #b3adad; height:10px; line-height:10px; }
#footer .footer-navigation ul li.last { padding-right:0; margin-right:0; border-right:0; }
#footer .footer-navigation ul li a { }
#footer .right { float:right; font-family:Verdana, Arial, Sans-Serif; }
#footer .right a { color:#dad7d7; font-weight:bold; text-decoration:underline; }
#footer .right a:hover { text-decoration:none; }
Index Page: Code: <?php
if (isloggedin()) forward('pg/dashboard/');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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" />
<title>My Cook Family</title>
<link rel="stylesheet" href="mod/xuum/css/style.css" type="text/css" media="all" />
<script type="text/javascript" src="mod/xuum/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="mod/xuum/js/jquery.jcarousel.js"></script>
<!-- Cufon -->
<script type="text/javascript" src="mod/xuum/js/cufon-yui.js"></script>
<script type="text/javascript" src="mod/xuum/js/MyriadPro.font.js"></script>
<script type="text/javascript" src="mod/xuum/js/ArialBold.font.js"></script>
<script type="text/javascript" src="mod/xuum/js/jquery-func.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="mod/xuum/css/images/favicon.ico" />
<link href="css/style2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<style>
.messages {
background:#ccffcc;
color:#000000;
padding:3px 10px 3px 10px;
z-index: 8000;
margin:0;
position:fixed;
top:30px;
width:969px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border:4px solid #00CC00;
cursor: pointer;
}
.messages_error {
border:4px solid #D3322A;
background:#F7DAD8;
color:#000000;
padding:3px 10px 3px 10px;
z-index: 8000;
margin:0;
position:fixed;
top:30px;
width:969px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
cursor: pointer;
}
.closeMessages {
float:right;
margin-top:17px;
}
.closeMessages a {
color:#666666;
cursor: pointer;
text-decoration: none;
font-size: 80%;
}
.closeMessages a:hover {
color:black;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.messages').animate({opacity: 1.0}, 1000);
$('.messages').animate({opacity: 1.0}, 1000);
$('.messages').fadeOut('slow');
$('span.closeMessages a').click(function () {
$(".messages").stop();
$('.messages').fadeOut('slow');
return false;
});
$('div.messages').click(function () {
$(".messages").stop();
$('.messages').fadeOut('slow');
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.messages_error').animate({opacity: 1.0}, 1000);
$('.messages_error').animate({opacity: 1.0}, 1000);
$('.messages_error').fadeOut('slow');
$('span.closeMessages a').click(function () {
$(".messages_error").stop();
$('.messages_error').fadeOut('slow');
return false;
});
$('div.messages').click(function () {
$(".messages").stop();
$('.messages').fadeOut('slow');
return false;
});
});
</script>
<?php $messages = system_messages();
$message = $messages['messages'];
if(count($message) > 0){
echo '<div class="messages">';
echo '<span class="closeMessages"><a href="#">click to dismiss</a></span>';
foreach($message as $message1)
{
echo '<p>';
echo $message1;
echo '</p>';
}
echo '</div>';
}
$errors = register_error();
$error = $errors['errors'];
if(count($error) > 0){
echo '<div class="messages_error">';
echo '<span class="closeMessages"><a href="#">click to dismiss</a></span>';
foreach($error as $error1)
{
echo '<p>';
echo $error1;
echo '</p>';
}
echo '</div>';
}
////////////////////////////////////////////////////////////////////////////////////////////////
?>
<!-- Header -->
<div id="header">
<div class="shell">
<!-- Logo -->
<h1 id="logo"><a href="">My Cook Family</a></h1>
<!-- /Logo -->
<!-- Navigation -->
<div id="navigation">
<ul>
<li><a href="" class="active">HOME</a></li>
<li><a href="pg/expages/read/Terms/">TERMS</a></li>
<li><a href="pg/expages/read/Privacy/">PRIVACY</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
<!-- /Navigation -->
</div>
</div>
<!-- /Header -->
<!-- Intro -->
<div id="intro">
<div class="shell">
<!-- Slider Holder -->
<div class="slider-holder">
<ul>
<!-- Offer -->
<li>
<div class="offer-image">
<img src="mod/xuum/css/images/offer-image-1.jpg" alt="" />
</div>
<div class="offer-data">
<h3>Wedding Reception</h3>
<div class="entry">
<p>Steffany & Rodney's Wedding Reception will be held Sunday, August 7th, 2011 at 1:00PM. We are asking that people do not bring gifts. If you would like to donate to our honeymoon fund, please <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5S9F6GTNXNL6J" target="_new">click here</a>.</p>
<p><strong>If you are a member of the family, please take time to register on this site. We have created this site as a safe, secure, and private area for us to socialize.</strong></p>
</div>
</div>
</li>
<!-- /Offer -->
<!-- Offer -->
<li>
<div class="offer-image">
<img src="mod/xuum/css/images/offer-image-2.jpg" alt="" />
</div>
<div class="offer-data">
<h3>Descendants of the Mayflower</h3>
<div class="entry">
<p> The Pilgrims were a group of English people who came to America seeking religious freedom during the reign of King James I. They planned to make the crossing to America in two ships, the Speedwell and Mayflower. However, after many problems the Speedwell was forced to return to England where the group was reorganized. In their second attempt to cross the Atlantic, they boarded the Mayflower in September 1620 bound for the New World. </p>
</div>
</div>
</li>
<!-- /Offer -->
<!-- Offer -->
<li>
<div class="offer-image">
<img src="mod/xuum/css/images/offer-image-3.jpg" alt="" />
</div>
<div class="offer-data">
<h3>Purchase of Nantucket Island</h3>
<div class="entry">
<p> The history of Nantucket's settlement by the English did not begin in earnest until 1659, when Thomas Mayhew sold his interest to a group of investors, led by Tristram Coffin, "for the sum of thirty Pounds...and also two beaver hats". The "nine original purchasers" were Tristram Coffin, Peter Coffin, Thomas Macy, Christopher Hussey, Richard Swain, Thomas Barnard, Stephen Greenleafe, John Swain and William Pike. </p>
</div>
</div>
</li>
<!-- /Offer -->
<!-- Offer -->
<li>
<div class="offer-image">
<img src="mod/xuum/css/images/offer-image-4.jpg" alt="" />
</div>
<div class="offer-data">
<h3>Whaling in New Bedford, MA</h3>
<div class="entry">
<p> American whaling's origins were in New England. Whale oil was vital in illuminating homes and businesses throughout the world in the 19th century, and served as a dependable lubricant for the machines powering the Industrial Revolution. Whaling became important for a number of New England towns, particularly Nantucket and New Bedford, MASS. Vast fortunes were made, and culture of these communities was greatly affected.</p>
</div>
</div>
</li>
<!-- /Offer -->
<!-- Offer -->
<li>
<div class="offer-image">
<img src="mod/xuum/css/images/offer-image-5.jpg" alt="" />
</div>
<div class="offer-data">
<h3>Family Tradition - Panning for Gold</h3>
<div class="entry">
<p>In memory of Grumpy (a.k.a. Nugget Bill); coined for the tradition of gold panning becoming such a big part of the Cook Family. Panning is now enjoyed by all generations of the Cook Family, with Glenn keeping the hobby alive as a part of his normal routine...</p>
</div>
</div>
</li>
<!-- /Offer -->
</ul>
</div>
<!-- /Slider Holder -->
<!-- Slider Navigation -->
<div class="slider-navigation">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
<!-- /Slider Navigation -->
</div>
</div>
<!-- /Intro -->
<!-- Main -->
<div id="main">
<div class="shell">
<!-- Box -->
<div class="box-first">
<center>
<h2>Login</h2>
</center>
<div class="buttons">
<center>
<div id="welcome-box" class="buttons">
<div id="login-box" class="buttons">
<?php
$form_body =
"
<p>
<label>"
.elgg_echo('username')
."<br />"
.elgg_view
(
'input/text'
,array
(
'internalname' => 'username'
,'class' => 'login-textarea'
)
)
."</label><br />
";
$form_body .=
"<label>"
.elgg_echo('password')
."<br />"
.elgg_view
(
'input/password'
,array
(
'internalname' => 'password'
,'class' => 'login-textarea'
)
)
."</label><br />
";
$form_body .=
elgg_view
(
'input/submit'
,array
(
'value' => elgg_echo('login')
)
)
."</p>
";
echo elgg_view
(
'input/form'
,array
(
'body' => $form_body
,'action' => ""
.$vars['url']
."action/login"
)
);
?>
</center>
</div>
</div>
<!-- /Box -->
<!-- Box -->
<div class="box-center">
<center>
<h2>Newest Members</h2>
</center>
<div class="entry">
<!-- News -->
<div class="news">
<ul>
<li>
<?php
$users_max = 25;
$onlyWithAvatar = "no";
if(empty($onlyWithAvatar) || $onlyWithAvatar == "no")
{$users = get_entities('user','',null,null,$users_max,0);}
else
{$users = get_entities_from_metadata('icontime', '', 'user', '', 0, $users_max);}
$wallIconSize = "small";
shuffle($users);
foreach($users as $user){
echo elgg_view("profile/icon",array('entity' => $user, 'size' => 'small', 'override' => 'true'));
} ?>
</li>
</ul>
</div>
<!-- /News -->
</div>
</div>
<!-- /Box -->
<!-- Box -->
<div class="box last-box">
<center>
<h2>Sign Up</h2>
</center>
<center>
<div id="register-box">
<?php
////////////////////////////////////////////////////////////////
$form_body = "<p><label>" . elgg_echo('name') . "<br />" . elgg_view('input/text' , array('internalname' => 'name', 'class' => "general-textarea", 'value' => $name)) . "</label><br />";
$form_body .= "<label>" . elgg_echo('email') . "<br />" . elgg_view('input/text' , array('internalname' => 'email', 'class' => "general-textarea", 'value' => $email)) . "</label><br />";
$form_body .= "<label>" . elgg_echo('username') . "<br />" . elgg_view('input/text' , array('internalname' => 'username', 'class' => "general-textarea", 'value' => $username)) . "</label><br />";
$form_body .= "<label>" . elgg_echo('password') . "<br />" . elgg_view('input/password' , array('internalname' => 'password', 'class' => "general-textarea")) . "</label><br />";
$form_body .= "<label>" . elgg_echo('passwordagain') . "<br />" . elgg_view('input/password' , array('internalname' => 'password2', 'class' => "general-textarea")) . "</label><br />";
$form_body .= elgg_view('register/extend');
$form_body .= elgg_view('input/captcha');
if ($admin_option) {
$form_body .= elgg_view('input/checkboxes', array('internalname' => "admin", 'options' => array(elgg_echo('admin_option'))));
}
$form_body .= elgg_view('input/hidden', array('internalname' => 'friend_guid', 'value' => $vars['friend_guid']));
$form_body .= elgg_view('input/hidden', array('internalname' => 'invitecode', 'value' => $vars['invitecode']));
$form_body .= elgg_view('input/hidden', array('internalname' => 'action', 'value' => 'register'));
$form_body .= elgg_view('input/submit', array('internalname' => 'submit', 'value' => elgg_echo('register'))) . "</p>";
?>
<div id="register-box">
<h2>
<?php
//echo elgg_echo('register');
?>
</h2>
<?php
////////////////////////////////////////////////////////////////
echo elgg_view
(
'input/form'
,array
(
'body' => $form_body
,'action' => "{$vars['url']}action/register"
)
);
?>
</div><!-- div id="welcome-box" -->
</center>
</div>
<!-- /Box -->
<div class="cl"> </div>
</div>
</div>
<!-- /Main -->
<!-- Footer -->
<div id="footer">
<div class="shell">
<!-- Mini Nav -->
<div class="footer-navigation">
<ul>
<li><a href="<?php echo $vars['url']; ?>" class="active">HOME</a></li>
<li><a href="<?php echo $vars['url']; ?>pg/expages/read/Terms/">TERMS</a></li>
<li><a href="<?php echo $vars['url']; ?>pg/expages/read/Privacy/">PRIVACY</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
<!-- /Mini Nav -->
<!-- Copyrights -->
<p class="right">
Copyright 2011 | MyCookFamily.info
</p>
<!-- /Copyrights -->
<div class="cl"> </div>
</div>
</div>
<!-- /Footer -->
</body>
</html>
Hi all... I'm designing a website based on this structure by Paul O'Brien: http://www.pmob.co.uk/temp/fixedlayoutexample6.htm It's working fine, except for one thing... the first time the page loads in IE6, the content div is offset about 5px to the left - see screenshot 1 (I've made it a nasty green, so it's obvious) When you hit refresh, it corrects itself and displays perfectly. (screenshot 2) Is this a known bug in IE? Or is it a problem in the design? I am new to designing and just learning now. I want to know how to do menus when click on that menu, will link to the page in the main content area. I have a code, can someone please check and let me know how to link to the main content area? 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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>pool Inc</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontent{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background: navy;
color: white;
}
#maincontent{
position: fixed;
top: 0;
left: 200px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="framecontent">
<div class="innertube">
<h3>Home</h3>
<h3>About</h3>
<h3>Careers</h3>
</div>
</div>
<div id="maincontent">
<div class="innertube">
<h1>Welcome to pool Inc.</h1>
</div>
</div>
</body>
</html>
I am trying to center the page layout horizontally. I used margins: 0 auto; align: center; and it works properly in foxfire, but in IE it is aligned left. How can I make it center in IE too?? Thanks! |
|||||||