|
CSS - Problem With Page Layout In Different Browsers/resolutions.
Hey,
A while back i wanted to make a personal PHP based addressbook, just for my own use, very simple without much layout. But later i decided to expand the functionality and layout a bit. Now i ended up with a nice result (in my opinion) however only for Firefox in the resolution 1024x768. Most of the problems have to do with the positioning of the div's of which my page consist. The page is divided like this: Without borders between the div's. This is how it looks in Firefox which im ok with: http://img529.imageshack.us/img529/9766/ffkg1.jpg And it looks like this in IE: http://img371.imageshack.us/img371/2332/iezn0.jpg I used the following classes for the divs (i only post the relevant parts of the classes that has to do with the positioning): -EDITED- deleted the css code in this post. The new updated code is in my new post. I've spented alot of time to get the divs in the right position just for Firefox when i started this site. Can anybody help me with this? I want to specify everything in percentages to make it look right in all resolutions , however this doesnt seem to work yet but i first want to know how to make my pages look good in IE too. thanks in advance. Similar TutorialsHi I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac. I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac. This is a link to the page: http://www.independentliving.co.uk/index1.shtml And this is the relevant bit of the stylesheet: div#header { background-image: url("header.jpg"); background-repeat: no-repeat; color: #FFFFFF; margin-left:auto; margin-right:auto; margin-top: 0; width:780px; height: 200px; margin-bottom: 10px; font-size: 0.8em; } #header .welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } #header .slogan { text-align: left; width: 700px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.slogan { text-align: left; width: 700px padding-left: 20px; padding-right: 20px; color: #003366; } If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working! Thanks Frances Hi I have an image positioned on my page with this Code: .notpos {
overflow: visible;
position: absolute;
visibility: visible;
z-index: auto;
height: auto;
width: auto;
left: 170px;
top: 20px;
}
The problem is when a different screen resolution is used the image moves .......... can anyone help please? Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings??? Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css. Would anyone be willing to take a look? Thanks in advance. Hi I have a website that i want to push to the center of the page for high resolutions.. i added a div tag for it as <div align=center> //all data here </div> now everything is pushed to the center except the menu divs and logo divs. they are pusing to the very center of the page, i mean starting from the center of the page and not on their proper place.. the problem is only in IE in firefox it works well.. here is my css code for logo and menu #header .logo{ margin: 15px 5px; position: absolute; } #header .menu{ position: absolute; margin-top: 1px; margin-left: 158px; } can anyone please advice me how can I fix this problem so that it works with ff and ie both thanks Hi, Pop along to www.themapcentre.com , using Internet Explorer. You should see a site that's fairly tidily arranged. Now take a look at it in Opera or Firefox, and you'll see it all goes to heck in a handbasket. A classic case of IE-itis. I have basically used layers of containers for each part of the site. Can anyone suggest a fix that would make this look right in firefox etc as well as IE? The div CSS is posted below: Code: body {
background-color:white;
font-size:x-small;
font:Verdana;
vertical-align:middle;
}
#container{
margin-top:0%;
margin-left:15%;
width:700px;
height:550px;
background-color:#C7E8FD;
z-index:1;
position:absolute;
}
#bottomdetailbar{
width:610px;
height:10px;
z-index:2;
margin-top:446px;
padding:2px;
margin-left:6%;
}
#topbar{
width:700px;
height:56px;
background-color:#3300CC;
z-index:2;
}
#midbar{
width:700px;
height:10px;
background-color:#96D6FF;
z-index:3;
}
#textbar{
width:650px;
height:20px;
z-index:20;
margin:5px;
margin-left:25px;
}
#globe{
width:auto;
height:auto;
margin-top:-51px;
z-index:4;
}
#mapcentretitle{
padding-top:41px;
margin-left:70px;
width:auto;
height:auto;
z-index:5;
}
#imagecontainer{
margin:0px;
margin-right:-50px;
width:460px;
height:400px;
float:right;
z-index:6;
position:static;
margin-top:30px;
}
#imagebox{
width:100px;
height:100px;
margin:3px;
padding:0px;
z-index:7;
text-align:center;
vertical-align:middle;
float:left;
position:relative;
display:table-cell;
}
#leftcontainer{
width:280px;
height:300px;
margin:3px;
margin-top:25px;
z-index:8;
}
#lefttop{
width:260px;
height:80px;
margin:3px;
padding-top:15px;
padding-left:15px;
z-index:9;
float:right;
background-image:url(images/leftopbg.gif);
background-repeat:no-repeat;
}
#leftinfo
{
width:260px;
height:125px;
margin:3px;
z-index:21;
background-image:url(images/information.gif)
}
#leftmiddle{
width:260px;
height:80px;
margin:3px;
z-index:30;
}
#descriptiontext{
margin-top:-555px;
margin-left:390px;
width:300px;
height:100px;
z-index:10;
}
#dropdown{
width:260px;
height:80px;
margin:3px;
z-index:12;
background-image:url(images/dropdown.gif);
background-repeat:no-repeat;
margin-top:0px;
}
#menuwork{
width:260px;
height:80px;
z-index:13;
margin-left:-165px;
margin-top:-410px;
}
Hello, I am having some trouble with the position of 2 DIV's. They look fine on my computer but aren't in the same position on IE and other peoples computers. The following is how it looks on FireFox on my computer and how it SHOULD look for everyone: http://i53.tinypic.com/2h3bi8z.jpg This is how it looks on IE9 (Yes I am aware the menu isn't right either but i'll sort that out later): http://i55.tinypic.com/262sb5h.png The code for the 2 DIV's (I can post whole page CSS code if required): Code:
#shoppingCart{
background-image:url('images/shopping_cart_banner.jpg');
background-color:#000000;
background-repeat: no-repeat;
height:80px;
width:200px;
color:white;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
position:absolute;
top:300px;
left:915px;
}
#countdown{
background-image:url('images/countdown_banner.jpg');
background-color:#000000;
background-repeat: no-repeat;
height:80px;
width:200px;
color:white;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
position:absolute;
top:420px;
left:915px;
}
The HTML code for the page: 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/xml; charset=utf-8" />
<title>Home - Dine in</title>
<meta name="description" content="Homepage for Dine in" />
<meta name ="keywords" content="Dine, food" />
<link rel="stylesheet" type="text/css" href="divstyles.css" />
<link rel="stylesheet" type="text/css" href="formatstyles.css" />
<link rel="stylesheet" type="text/css" media="all" href="menu_style.css" />
</head>
<body class="body">
<div id="page_section">
<div id= "banner">
<img src="images/Banner.jpg" alt="The Dine In Banner" height="100%" width="100%" />
</div>
<div>
<ul id='menu'>
<li class="button"><a class='current' href='index.html' >Home</a></li>
<li class="button"><a href='aboutus.html' >About Us</a></li>
<li class="button"><a href='http://' >Menu</a></li>
<li class="button"><a href='http://' >Gallery</a></li>
<li class="button"><a href='http://' >Reviews</a></li>
<li class="button"><a href='booking.html' >Bookings</a></li>
<li class="button"><a href='http://' >Upcoming Events</a></li>
<li class="button"><a href='http://' >Contact Us</a></li>
<li class="button"><a href='http://' >Links</a></li>
</ul>
</div>
<div id="content">
<center><h1>The Dine In; A Cuisine like no other</h1></center>
<center><h4><u>Established August 2011</u></h4></center>
<center><img src="images/rest.jpg" alt="setting" title="setting" /></center>
<h2 class="margin">Whether alone, with family or with friends our purpose is to give you the <b>best</b> eating experience ever.</h2>
<p class="margin">Located on Bourke St, in the heart of Melbourne's CBD, TDN is a newly opened restaraunt with a World Class Cusisine and the finest dishes.
It combines relaxeded, glamourous atmosphere with exceptional hospitality.<br />
Our specialised Cheffs and Staff are trained to meet the requirements of our customers. At TDN it's our customers <i>needs</i> and <i>wants</i> that come first.
<center>We are open<u>7 days</u> a week and invite you during the following hours. </center>
<center><h3>Trading Hours:</h3></center>
<center>Mon 9:00am - 9:00pm</center>
<center>Tue 9:00am - 9:00pm</center>
<center>Wed 9:00am - 9:00pm</center>
<center>Thu 4:00pm - 10:30pm</center>
<center>Fri 4:00pm - 10:30pm</center>
<center>Sat 4:00pm - 10:30pm</center>
<center>Sun 11:00am - 5:30pm</center>
<center><h3>Thank you for visiting our Web Site, please continue browsing through what we have to offer to our customers</h3></center>
<div id="shoppingCart"></br></br>
<center>Your cart is currently empty.</center>
</div>
<div id="countdown"><br/><br/>
<script type="text/javascript" src="countdown.js"></script>
</div>
</div>
<div id= "footer">
<b>Disclaimer</b><br/>
This website is a student project that is intended to be used only for academic purposes. This page was created by Taner Serbest</p>
</div>
</div>
</body>
</html>
The URL for the site (if it helps or is needed): http://freddo.bf.rmit.edu.au/~s3286104/TheDineIn/index.html Any help is appreciated! Hello, I am having problems positioning my left menu on non IE browsers, The menu appears fine in IE, can anyone help please, I have attached my code Code:
body {
margin:20px;
background:#ffffff;
text-align:center;
padding:0;
}
#outer {
text-align:left;
border:0px solid #000000;
width:785px;
margin:auto;
}
#hdr {
height:30px;
background:#ffffff;
}
#bar {
height:25px;
background:#ffffff;
border:solid #000000;
border-width:1px 0 1px 0;
}
#bodyblock {
position:relative;
background: #fffff;
width:785px;
padding:0;
}
#l-col {
width:204px;
height:452px;
float:left;
background:#fff;
background-image:url(images/left.jpg);
background-repeat:no-repeat;
padding-bottom:10px;
}
#cont {
width:565px;
background:#ffffff;
border:solid #000000;
border-width:0 0 0 0px;
}
#middle {
width:5px;
float:left;
background:#fff;
}
#ftr {
height:25px;
background:#c0c0c0;
border:solid black;
border-width:1px 0 0 0;
margin:0;
}
Hello, I have been writing a web page as a project for a course using XHTML. I have tested it with several browsers, including IE, Netscape, and Opera and validated its source code and CSS Style sheet. The site works at 1024 X 768 resolution. My problem is that if I minimize the window or change the screen resolution size every div element gets switched around and the display is destroyed. The page is currently located at http://student.flvs.net/html/millety/mod8/index2.htm . Please tell me how to fix this. The links on the page do not work as they should, so only look at the oage I have linked to. I would like the color behing the navigation to run in a vertical band all the way to the bottom of the page. The footer is supposed to be all the way at the bottom and the main text's background color should not appear under it, which is part of my current problem. Thank you in advance for your help. I have a tab bar that sits on top of two div columns. The bar is supposed to sit in the center of the top of the left column. I can achieve this perfectly via Code: position: absolute; top: 16%; left: 30%; The problem here lays in the fact that anyone NOT running my screen resolution is telling me that it's not where it's supposed to be. How can I put this where it needs to be, regardless of who is viewing it, and how crappy their PC might be? http://www.invalidheart.org/carrie/ it doesn't work in anything but my resolution... can anyone help me fix this? I've had a huge hard time with this layout making it fit right, i tried using all css and i couldn't get it to fit. any suggestions? Hi, Theres something wrong with the #sidenotes bar, as you can see, it sticks out to the far end of the browser on bigger resolutions, how do I fix that? [IMG]img.photobucket.com/albums/v336/Toniee/screeny-1.jpg[/IMG] The CSS for the #sidenotes a Code: #sidenotes {
float:right;
width:180px;
}
This is how it's suppose to look: [IMG]browsershots.org/png/full/cd/cddbe6b9915e63ef4bdfc40848d77706.png[/IMG] What do I have to change to get it back next to the other bar? Thanks 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. Good Day, Trying to setup the font sizes for my site. In higher resolutions, everything seems to look acceptable. When I view the page on a low resolution screen, everything seems ridiculously large. Is there anyway to set the styles up to relieve this problem? Best, Colin 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. 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? 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 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>
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? |
|||||||