|
CSS - Css Page Layout Help...
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. Similar TutorialsWhen 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! 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! 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? Only to be associated with Firefox for now..... As I come near the end of my page layout, there are just a few things that I need to fix. First off, in my navigation menu, when you roll over a link, the entire menu expands. I have the border set before and after hover to be 1px, so I don't understand why this is occuring. Also, there seems to be somewhat of a margin for my banner inside it's container...both the margin and padding of the container and banner are set to 0, so I don't know how this can be. The web page can be found at the following address: http://prosurfacing.com/beta/ Attached is the document source and the CSS for the page. (index=page, site=CSS) 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>
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 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 developing a prototype site and have hand coded it using HTML 4.x as a base and CSS for styling However allthough the site runs fine on IE7, it does not load well on FF and Chrome. I know the browsers handle css differently but have no idea what code to change http://rich-carey.com/aufdw/ Any Ideas or pointers? I am looking for some examples on making this layout: ----------HEADER---------- nav content - - - - - - - - - - - - ----------FOOTER0--------- The page needs to be 100% the height of the browser window with header at top, footer at bottom and the content/nav being a minimum height of enough to fill the screen vertically and should be expandable. Anyone got any pointers? 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. Hi all, I'm fairly new to CSS and this is one of my first attempts at a somewhat complicated layout. The page looks OK in FF, IE 7, Safari, and Opera, but if I zoom in or out while in FF or IE, it breaks the layout by increasing the width between some of the cube divs. Is there any way to fix this? Link: http://universalcorner.com/testsite/ Stylesheet: Code:
body {
font-family: Arial, "MS Trebuchet", sans-serif;
}
#maincontainer {
width: 966px;
height: 748px;
border: 12px solid #000027;
margin: 0 auto;
padding: 0;
}
#header {
border-bottom: 12px solid #000027;
height: 140px;
z-index: 100;
}
#logo {
background: #fff;
width: 480px;
height: 100%;
border-right: 12px solid #000027;
display: inline;
float: left;
vertical-align: top;
}
#logo p { /* functions as image container */
position: relative;
top: 20px;
}
#slogan {
position: relative;
background: #78C0FF;
width: 292px;
height: 100%;
border-right: 12px solid #000027;
display: inline;
float: left;
vertical-align: top;
padding: 0 10px 10px 10px;
z-index: -100;
zoom: 1;
}
#consultants {
position: relative;
background: red;
left: 6px;
width: 150px;
/* width: 150px; */
height: 100%;
display: inline;
float: left;
text-align: center;
margin: 0;
padding: 0;
z-index: -100;
}
ul.nav { /* navigation bar */
position: relative;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
width: 126px;
height: 586px;
background: #4486C4;
padding: 0 10px 10px 20px;
margin: 0 0 10px 0;
border: solid #000027;
border-width: 0 12px 0 0;
list-style: none;
}
ul.nav a {
text-decoration:none;
color:#000;
}
ul.nav a:hover {
color:#fff;
}
ul.nav li { /* all list items */
padding: 16px 0 0 0;
list-style: none;
}
ul.squares {
list-style: none;
padding: 0;
margin: 0;
}
ul.squares li {
position: none;
background: #000;
width: 150px;
height:140px;
padding: 0;
margin: 0;
border: solid #000027;
border-width: 0 12px 12px 0;
display: inline;
float: left;
}
ul.squares li.end {
border-right-width: 0;
}
ul.squares li.bottom {
border-bottom-width: 0;
}
#textbox {
width: 636px;
height: 292px;
float: left;
display: block;
border: solid #000027;
border-width: 0 12px 12px 0;
background: #C1BDFF;
margin: 0;
padding: 0;
}
#textbox p {
margin: 10px;
}
div.cube {
width: 150px;
height: 140px;
border: solid #000027;
margin: 0;
padding: 0;
}
#consultation {
color: #fff;
font-size: 1em;
font-weight: bold;
position: relative;
display: inline;
float: left;
width: 302px;
height: 130px;
border: solid #000027;
border-width: 0 12px 0 0;
background: #001E8A;
padding: 10px 0 0 10px;
margin: 0;
}
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Company Name, Inc.</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="maincontainer"> <div id="header"> <div id="logo"> <p align="center"><img src="images/logo.gif" alt="Company Name, Inc."></p> </div> <div id="slogan"> <p><span style="font-size:.85em">Company Name, Inc.<br> Anytown, US<br> <a href="mailto:info@companyname.com">info@companyname.com</a><br> 555-555-5555</span><br> <span style="font-size: 1.1em; font-weight:bold">Tagline Goes Here</span></p> </div> <div class="cube" style="float: left; border-width: 0 0 0 0"> <p align="center"><img src="images/image.gif" alt="Placeholder Image"></p> </div> </div> <ul class="nav"> <li><a href="index.php">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Plans & Pricing</a></li> <li><a href="#">Our Clients</a></li> <li><a href="#">Press Room</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> <div style="background: #001E8A; display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div> <div style="display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div> <div style="background: #002455; display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div> <div style="display:inline; float: left; border-width: 0 12px 12px 0" class="cube"></div> <div style="background: #4486C4; display:inline; float: left; border-width: 0 0 12px 0" class="cube"></div> <div id="textbox"> <div style="background: #002455; position: relative; float: right; top: 130px; border-width: 12px 0 0 12px; margin-top: 10px; margin-left: 10px" class="cube"></div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p></div> <div style="background: #002455; position: relative; top: 0; left: 0; display: inline; float: right; border-width: 0 0 12px 0" class="cube"></div> <div style="position: relative; top: 0; left: 0; display: block; float: right; border-width: 0 0 12px 0" class="cube"></div> <div style="position: relative; top: 0; left: 0; display: inline; float: left; border-width: 0 12px 0 0" class="cube"></div> <div style="background: #002455; position: relative; top: 0; left: 0; display: inline; float: left; border-width: 0 12px 0 0" class="cube"></div> <div id="consultation">Click here to get your FREE ONSITE CONSULTATION from Company Name</div> <div style="background: #78C0FF; position: relative; top: 0; left: 0; display: inline; float: left; border-width: 0 0 0 0" class="cube"></div> </div> </body> </html> Any suggestions would be much appreciated. Hey, I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore. Does anybody know how to fix this? Thanks in advance. Hi 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'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. Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. |
|||||||