|
CSS - Finishing Up On A Page Layout...
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) Similar TutorialsHey guys, So I am finally finishing up my site! you can view it at www. paulfenton .tk/wordpress It would probably be best to answer these questions by using firebug or the chrome inspector because obviously my understanding of what code controls what part is poor . If anyone has any code requests I can post them here in the replies. Ok.. so here are the CSS problems I have to solve to finish my site. If anyone could shed any light on any of these problems I would be greatly appreciative. 1) I want to have the main content column (the 800 pixel wide column that is currently on the left) be in the center, with a div on the left and right each containing a y-repeating gradient to give the page some nice framing. My problem is, my mainContentPanel div id appears to stretch across the whole screen and has no height, even though it contains all of the content. I must not be understanding something about how css works here. Maybe I have misdiagnosed the problem, but at any rate I need to figure out how to centre my page with the left and right side gradients. 2)The panel that contains the content and is navigable by the scrollbars seems to have a yellow border when I select it.. I have looked through the css to see if there is a border on any div, but I cannot find it. I want to remove this yellow border completely. 3)I want to remove the horizontal scrollbar and the jogbox in the bottom right of the main content. I am using flexcroll, and as far as I know the best way to do this is to make the divs with ids (mycustomscroll_hscrollerbase, mycustomscroll_hscrollerbar, and mycustomscroll_scrollerjogbox) have the attribute (visibility:hidden. I have tried to specify this in my .css file, but in the inspector it appears crossed out and the computed styles for the divs become visible anyways. Not sure why... 4)before clicking on anything or selecting anything in the content column, I want the mouse scrollwheel to control the vertical scroller in the main content pane. Not sure if this is a CSS problem but hopefully someone will know. 5)my vertical scrollbar seems bunched up with the content... I want a nice way to add a 5px margin on the left hand side of the scrollbar. I thought of creating a spacer div, but that seems messy. If you guys have any other comments, tips, or suggestions, I would love to hear them! Thanks in advance, -Paul 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, 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. 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! 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 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! 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 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>
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? 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, 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 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 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'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 |
|||||||