|
CSS - Need Assistance With Layout Issues
Website: www.devthor.net/sara/index.php
CSS: www.devthor.net/sara/css/fineart.css Ok, here is the problem. It is a pretty basic site so I wasn't expecting many problems (well, maybe I should have, they always seem to crop up), and everything lays out properly except my menu bar. The goal is to have the text sit on top of the image, and the white bar that appears on mouse-over to appear on top of the image (preferably within 1 px accuracy so that the brown border still remains untouched by the opacity, picky, yeah, but I like the look better). So I was going to start playing with CSS hacks to get the positioning exactly right on all the browsers when I noticed something. Firefox on OS X and Firefox on a PC displayed the menu in a different location. I believe that this has to do with the default font sizes on the respective platform. But as a side effect, it messes up my absolute positioning efforts on the menu since the different sized text takes up different amounts of space. So I then attempted to go back to relative spacing since the font size would become a mute point if the page auto adjusts, however for some reason with the <dl><dd><dt><li> menu style I use, the text I place inside the menu div does not cause the div bounding box to expand. Thus relative positioning ends up placing the menu div inside the top image div. (More accurately it places the text from the menu div inside the image box while the actual div bounding box seems to have a height of 0, and thus is invisible. Basically I am looking preferable for a fix to the relative positioning issue. If a fix cannot be found for this, maybe just a fix for the font size messing up my layout issue. I am at the end of my means for figuring it out having spent the last 2 days searching for a solution. So any help would be tremendously appreciated. Thanks in advance, Devthor P.S. Sorry for the novel length post. I just figured some background as to what I have tried might be helpful. Similar TutorialsI am having consistent alignment issues with IE7. I am uncertain as to what the issue could be. Any help, assistance or a link to some reference would be greatly appreciated. 1) . The line at the top of the screen and the tabs do not line up properly. The line transects the buttons. standardizedsupplements{dot}com 2) Image and Text are not aligned on same line: standardizedsupplements.com/tremorsure.html standardizedsupplements.com/purchase_tremorsure.html 3) Gif/Arrow to right side panel list ( <li> ) is not consistent showing up on all lists. standardizedsupplements.com/contact-us.html 4) In the FAQs, at the very top of the page, the numbers and the text overlap, when there are double digits. standardizedsupplements.com/faq.html Hi, I am having some major problems making all the <div> tags place the content in the correct places. The logo (yes its poort quality on purpose, its just for testing ) needs to be centered and above the left and right vertical menus. The block of "Text" needs to be below the logo but contained between the two vertical menus. and the footer needs to be in line with the text but move up and down the page depending how much text is present. The site is: http://www.explosiveracing.net/test/header.html Could anyone be of assistance? Thanks Please look at this layout Layout Example In IE7 there is a gap between the footer and upper divs that I am not sure what is causing. The other issue I would appreciate help with is the #right div element. When the #content div has a higher height I want the #right div element to stretch with it (and vice versa). Any help would be appreciated. Tom Hello everyone. I have been struggling with a new site design for a couple of weeks now. My code is a mess, and my brain hurts. I am not a pro, I think I just know enough to eventually get things the way I want them. Instead of posting my code witch is a huge cluster of a mess. I am going to post an image of what I was actually able to accomplish (when it was working). I need to know the correct way of doing what is in that picture. See I get it all correct and looking the way I want, but as soon as I ad more content It all goes wacky on me. Things don't align. next thing you know your using top: -2000px; to get your divs on the right to go into the correct spot. Please help. So the header on the site works fine. It is in its own container, and sits at the top nicely and never moves or goes wacky. Its everything below the navigation menu that goes crazy on me probably because I am not positioning them correctly in the css. I basically need to know the correct way to make multiple content boxes on the left and right side. They are not all going to be the same size. Whenever I add another box on the left or right side I don't want to have to struggle to get everything else aligned properly again. They should be in a container div so I can center the whole thing into the middle of the page. The image. Code: timeforfun.net/newdesign_help.jpg Hope you could understand. my layouts not acted as it sould be...or atleast haw i want it to, the url is urls block, gay. the errors are the tops of the boxes shoud be rounded aswell as the bottom and the main menu and the login box sould be seperated. im using javascript aswell as css to make the corners rounded but i dont think thats where the problem i think its the css. here are the main style pages: ffs thats annoying cant show url's ok never mind the files are to big to post. Hi, Please check out this site: Triangle Solutions In FF the layout is how it is meant to be In IE the the main body title images - is further down than the nav image Also adding the text onto the LOGO graphic has pushed the above images further down in IE but not in FF It validates with W3C So basically I am a little stuck as to the reason. Any help appreciated Thanks E Can someone tell me what's going on with my css lsyout. http://www3.sympatico.ca/timarney/temp/layout.htm This is the first time I doing layout with CSS-P so I don't know all the in and outs yet. The first thing I notice is that in ie... scrollbars apear when there is no need for them. In Opera the left nav streches well past the area for the main content. Any tips on how to fix/improve this sort of layout would be much apreciated. Here's the code... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>--</title>
<style type="text/css">
body, html{
height:100%;
margin:0px;
padding:0px;
text-align:center;
background:#E0E0E0;
}
#container,#header{
width:760px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
#container{
height:100%;
min-height:100%;
background: #FFFFFF;
}
#header{
height:155px;
background:#A9A99F;
}
#leftnav{
height:100%;
background: #F5F5F5;
width:150px;
float: left;
}
#main{
text-align: left;
vertical-align: top;
}
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="leftnav">left hand nav</div><div id="main">main</div>
</div>
</body>
</html>
So I'm not sure if this issue has been posted, I perused the forums and couldn't find it, so here it is. I'm having an issue getting my <div> layers, and CSS to render properly in IE7. The layout appears correct in both FireFox 3, and Safari. Here is my CSS: Code: @charset "utf-8";
/* CSS Document */
body {background-image:url(images/bgStrips_02.jpg);
background-repeat:repeat-x;
background-attachment:scroll;
background-position:0 0;
position:relative;
}
#apDiv1 {
position:relative;
width:950px;
height:1%;
margin:0 auto;
background-attachment:scroll;
padding:0;
}
#contentContainer {
position:absolute;
margin:0 auto;
padding:0;
width:950px;
height:1%;
top:94px;
}
#contentBG {position:relative;
background-attachment:scroll;
padding:0;
margin:0 auto;
}
p {color:#9BF8FF;
font-family:verdana;
font-size;9px;
font-weight:bold;
}
Here are screenshots in the 3 browsers i tested them in: Safari Screenshot FireFox Screenshot IE 7 ScreenShot Any help is GREATLY appreciated! I am building my portfolio page and as I was tinkering, I seemed to have messed up my layout and I can't seem to get it back. If you follow this link you'll notice that about 2/3rd's of the way down on the right hand side there is an image inside a blue rectangle. I want that image to be beside the large purple rectangle on the left hand side. Both div's are floating left and right respectively and there should be plenty of room for them to be beside on another... Does anyone know why they are mis-aligned? Thanks. P.S. The CSS is inside the HTML file so just view source to see how it all works. i've supplied 2 pics, one IE and one FF. in the dark grey box, the pic and text are positioned diff in either browser, try as i may i cannot get it to be the same. my css: (i've highlighted the css relevant to the dark grey box) Code: /*<![CDATA[*/
body
{
text-align:center;
margin:0;
padding:0;
}
#top
{
margin:10px 0;
}
#container
{
margin:0 auto;
width:721px;
text-align:left;
}
#pic
{
float:left;
width:50px;
margin:10px 10px 10px 10px;
text-align:center;
border:3px solid #999999;
}
#pic a
{
border:0;
}
#header
{
height:64px;
}
#top_nav
{
margin:0px 0;
padding:0;
background-image:url('images/navbar.gif');
height:22px;
}
#top_nav li
{
position:relative;
left:-40px;
top:3px;
float:left;
list-style-type:none;
font-family:arial;
font-size:12px;
}
#top_nav li a
{
display:block;
width:120px;
border-right:1px solid #666666;
text-align:center;
text-decoration:none;
color:#333333;
}
#top_nav li a:visited
{
text-decoration:none;
color:#333333;
}
#top_nav li a:hover
{
text-decoration:none;
color:#620024;
}
#main
{
margin:10px 0;
padding:0px;
}
#front_image
{
margin:0px 0 10px;
width:450px;
float:left;
height:190px;
background-image:url('images/front.jpg');
}
#main_content
{
margin:0px 0 10px;
width:450px;
float:left;
background-color:#333333;
}
#main_content_text
{
float:left;
margin:0;
text-align:center;
color:#FFFFFF;
}
#main_menu
{
margin-left:465px;
background-color: #620024;
color:#FFFFFF;
font-family:arial;
font-size:12px;
}
#main_menu ul
{
margin-left:20px;
margin-top:0;
padding-left:0;
}
#main_menu li
{
list-style-image:url(images/news_sub_header.gif);
list-style-type: circle;
font-family:arial;
font-size:12px;
margin-left:0;
padding-left:0;
}
#main_menu li a
{
text-align:center;
text-decoration:none;
color:#FFFFFF;
margin-left:0;
padding-left:0;
}
#main_menu li a:visited
{
text-decoration:none;
color:#FFFFFF;
}
#main_menu li a:hover
{
text-decoration:none;
color:#FFFFFF;
}
#footer
{
background-image:url('images/navbar.gif');
height:22px;
font-family:arial;
font-size:10px;
}
#footer li
{
position:relative;
left:100px;
top:4px;
float:left;
list-style-type:none;
font-family:arial;
}
#footer li a
{
display:block;
width:80px;
border-right:1px solid #666666;
border-left:1px solid #666666;
text-align:center;
text-decoration:none;
color:#333333;
}
#footer li a:visited
{
text-decoration:none;
color:#333333;
}
#footer li a:hover
{
text-decoration:none;
color:#620024;
}
.clearer {clear:both;}
/*]]>*/
My Page: (i've highlighted what's relevant to the dark grey box) Code: <div id="container">
<div id="top">
<div id="header">
<img src="images/logo.gif" alt=""/>
</div>
<div id="top_nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">International</a></li>
</ul>
</div>
<div class="clearer"></div>
</div>
<div id="main">
<div id="front_image">
</div>
<div id="main_menu">
<img src="images/news_header.gif" alt="" /> News<br />
<img src="images/news_sub_header.gif" alt="" /> <?
if ( !empty($_GET[viewyear]) ) {
$LookupYear = $_GET[viewyear];
} else {
$LookupYear = date('Y');
}
$FirstDayYear = mktime(0,0,0,1,1,$LookupYear);
$LastDayYear = mktime(23,59,59,12,31,$LookupYear);
$arrExtras = array('ORDER BY Date DESC');
if ($view!='viewall'){
$arrExtras[] = 'LIMIT 5';
}
$arrWhere = array('Enabled='=>'Y', 'Date>='=>$FirstDayYear, 'Date<='=>$LastDayYear);
$RS =& FetchRecords($connection,'News', $arrWhere,$arrExtras);
if (mysql_num_rows($RS)>0){
while($News_row = mysql_fetch_array($RS) ) {
echo '<span class="headline">'.stripslashes($News_row['Headline']).'</span><br />';
$prview = substr(Extract_Html_DB($News_row['Content']),0,100);
echo '<span class="preview">'.$prview.'...</span><br>';
//echo "$News_row[PDF] --$News_row[PDFname]--";
if($News_row['PDF'] == 1 && $News_row['PDFname'] != "")
{
echo '<a href="./images/uploads/pdf/'.$News_row['PDFname'].'" target="_balnk">read more >></a><br /><br />';
}
else
{
echo '<a href="articles.php?newsid='.$News_row['NewsID'].'">read more >></a><br /><br />';
}
}
} else {
echo 'There are no articles available for this year.<br /><br />';
}
?>
<img src="images/news_header.gif" alt="" /> View By Year
<?
$arrWhere = array('Enabled='=>'Y');
$arrExtras = array('ORDER BY Date ASC');
$RS_A =& FetchRecords($connection,'News', $arrWhere,$arrExtras);
if (mysql_num_rows($RS_A)){
$News_row = mysql_fetch_array($RS_A);
$FromYear = date('Y', $News_row['Date']);
} else {
$FromYear = date('Y');
}
echo '<ul>';
for ($i=date('Y'); $i>=$FromYear; $i--) {
echo "<li><a href=\"news.php?viewyear=$i\">$i</a></li>";
}
echo '</ul>';
?>
</div>
<div id="main_content">
<div id="main_content_text">
<?//PRODUCTS!!
$arrWhere = array('Enabled='=>'Y', 'Featured='=>'Y');
$arrExtras = array();
$RS = NULL;
$RS =& FetchRecords($connection,'Products', $arrWhere,$arrExtras);
if (mysql_num_rows($RS)>0){
$Exit = 0;
$c = 1;
while(($Products_row = mysql_fetch_array($RS)) && $Exit==0) {
echo "\n";
if (!empty($Products_row['SummaryImage_smll'])){
echo '<div id="pic"><a href="p_details.php?productid='.$Products_row['ProductID'].'"><img style="border:0;" src="'.$image_upload_url_dir.'products/'.$Products_row['SummaryImage_smll'].'" alt=""/></a></div><p>'.stripslashes($Products_row['Name']).''.substr(Extract_Html_DB($Products_row['Content']),0,0).'<br /><a href="p_details.php?productid='.$Products_row['ProductID'].'">see details >></a></p>';
}
echo "\n";
if ($c==$ProductItemsPerPage){
$Exit =1;
}
$c++;
}
}
?>
</div>
</div>
<div class="clearer"></div>
</div>
<div id="footer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">International</a></li>
</ul>
</div>
</div>
link to the page: www.betabastion.co.za/test/index.php thanks Shem I've got three issues with my CSS on my page that I cannot seem to figure out. I'm stumped again. Any help would be appreciated. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title></title>
<style type="text/css" media="screen"><!--
body { background-color: #fff; background-image: url(../images/top_bar_striped.gif); background-repeat: repeat-x; margin: 0; padding: 0 }
hr { color: #ccc; background-color: #ccc; width: 100%; height: 1px; border: 0 }
#container { background-color: #fff; margin: 0 auto; width: 950px }
#main { margin: 0 auto; padding: 0; width: 938px }
#top { margin-bottom: 6px; height: 40px }
#nav { height: 40px }
#banner { height: 212px; overflow: hidden }
#body { background-image: url("../images/body_back.gif"); background-repeat: repeat-y; margin-top: 6px; overflow: hidden }
#bodyLeft { background-image: url("../images/body_left_top_back.gif"); background-repeat: no-repeat; padding: 30px 20px 20px; width: 200px; min-height: 100px; float: left }
#bodyLeft ul { color: #333; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: right; list-style-type: none; margin-left: 0; padding: 0 }
#bodyLeft li { margin: 12px 0 }
#bodyLeft li a { color: #333; text-decoration: none; padding: 4px 6px }
#bodyLeft li a:hover { background-color: #a5a687 }
#bodyRight { background-image: url("../images/body_right_top_back.gif"); background-repeat: no-repeat; padding: 40px 30px 30px; width: 632px; min-height: 100px; float: right }
#introHeading { color: #32508a; font-size: 16px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; line-height: 22px }
#introText { color: #333; font-size: 13px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 18px }
#introPullout { color: #c00; font-size: 16px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; line-height: 28px; background-image: url("../images/quote_back.gif"); background-repeat: no-repeat; margin-bottom: 30px; margin-left: 30px; padding-left: 20px; width: 180px; float: right }
#featuredProject { margin-top: 30px; clear: both }
#featuredPhoto { margin-right: 20px; margin-bottom: 20px; float: left; border: solid 8px #fff; outline: solid 1px #ccc }
#featuredTitle { color: #333; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; background-image: url("../images/featured_arrow.gif"); background-repeat: no-repeat; margin: 0 0 10px; padding: 0 0 0 12px }
#featuredText { color: #333; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 16px }
#footer { background-image: url("../images/body_btm_back.gif"); background-repeat: no-repeat; height: 24px }
#copyright { color: #666; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 14px; text-align: right; padding: 20px }
--></style>
</head>
<body>
<div id="container">
<div id="main">
<div id="top">
<div id="nav"></div>
</div>
<div id="banner"></div>
<div id="body">
<div id="bodyLeft">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div id="bodyRight">
<div id="introPullout">
<p>Text here...</p>
</div>
<div id="introHeading">
<p>Text here...</p>
</div>
<div id="introText">
<p>Text here...</p>
</div>
<div id="featuredProject">
<img id="featuredPhoto" src="photo.jpg" alt="" width="130" border="0"/>
<div id="featuredTitle">FEATURED PROJECT</div>
<hr/>
<div id="featuredText">Text here...</div>
</div>
</div>
</div>
<div id="footer"></div>
<div id="copyright"></div>
</div>
</div>
</body>
</html>
1. How do I make the background color for the links (bodyLeft li a:hover) in the bodyLeft DIV fill the entire width of the DIV? Minus the padding, of course. 2. The text/DIVs inside the bodyRight DIV appear to have too much space above them in Safari (appear too far down). It looks like IE is correct. Any ideas? 3. The text in DIV featuredTitle is supposed to have an arrow on its left side where the text would normally start. It doesn't appear and/or looks like the featuredPhoto is covering it up. How can I make the arrow (background image) appear in the correct spot and slide the text over to the right? Thank you for all your help! It seems like I must be getting close to what I want. This page displays almost perfectly in Firefox and IE8, as well as most browsers, but not in older IE and Safari. hangemhightaxidermy.com/construction_slides2.htm I would like to eliminate the brown space above the sliding photos, but can't figure out how to do it. After trying all sorts of padding and margin changes, I've decided we can live with it if necessary. The space entered the picture when I used a table to align two unordered lists in a row (one for the text bullets, one for the sliding photos). Before that I just had the sliding photo unordered list and there was no extra brown space. If you view the landscape tab you will see what it looks like with both lists and no table. yikes! My bigger problem is that this whole middle section is shifting far to the right in IE7, IE6, and Safari. I have looked into haslayout stuff, but honestly I'm an old self-taught web dev mom just getting back into design for a family member after being out for 10 years. There's a lot of new stuff!! Fun, but frustrating. Don't laugh too hard looking at my css. I have been using the W3 validators to help, but maybe an experienced person can see my issue. My brain/eyes are kind of glazed over at this point. Hi All, It's been quite some time since I've posted in this forum! I have a couple of mixed issues that I was hoping for some brain power on: All question pertain to minor (or large) problems with the following website: Bertelsen.ca There is a gap between the top of my content div and the header (literally #header and #content), I cannot, for the life of me, figure out what is causing it. Even tricks like "* {margin:0px, padding:0px;}" aren't working. It's probably some ridiculous block level element that pushes something else down or applies padding in a manner that it shouldn't. In IE the bullets for my lists at the very bottom do not show up. If anyone can think of what's causing this I'd love to hear about it. Cheers, BEB 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>
Hey all, I hope someone can help me out here. Been trying to figure this out and having trouble. Complete newbie and learning how to code css on the fly. My Current website is http://wgic.cloudaccess.net . What I want is to have a logo and space for menu bar to be where a header would usually go, side by side. I would like their height to be bigger too, but anytime i seem to change the height it either does nothing or sends everything else going amuck. Also, i want the container to be the widths specified, but expandable and viewable on any resolution (which i currently think i have unless i mux with the code trying to accomplish the above. Below is the code i curently have. Any help is greatly appreciated. Code:
* {
padding: 0;
margin: 0;
}
img {
border: 0;
}
html, body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 13px;
color: #0F0F0F;
height: 100%;
background-image:url('../images/body_bg.jpg');
background-repeat:no-repeat;
background-position:right top;
}
a:link, a:visited {
text-decoration: underline;
font-weight: normal;
color: #000;
outline: none;
text-align: left;
}
.float {
float: left;
}
.clear {
clear: both;
}
.overall {
background-color: #fff;
}
div.center {
text-align: center;
margin: 0px auto 0 auto;
padding: 0;
width: 950px;
}
#container {
position:relative;
margin:0 auto;
width:960px;
height: auto !important;
height: 100%;
min-height:100%;
text-align: left;
}
#top_logo {
text-align: center;
height: 98% 10px no-repeat;
width:250px;
}
#header {
text-align: center;
height: 98% 10px no-repeat;
width:700px;
}
#content {
width: 598px;
text-align: left;
padding: 5px;
}
#sidebar_left {
text-align: center;
width: 165px;
padding: 5px;
}
#sidebar_right {
text-align: center;
width: 165px;
padding: 5px;
}
#footer {
position:absolute;
width:100%;
bottom:0;
text-align:center;
padding: 5px;
}
Index.php file Code:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/wgic3/css/template.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="top_logo"> <jdoc:include type="modules" name="logo" /> </div>
<div id="header"> <jdoc:include type="modules" name ="top" /> </div>
<div id="sidebar_left" class="float"> <jdoc:include type="modules" name="left" /> </div>
<div id="content" class="float"> <jdoc:include type="component" /> </div>
<div id="sidebar_right" class="float"> <jdoc:include type="modules" name="right" /> </div>
<div id="footer" class="clear"> <jdoc:include type="modules" name="footer" /> </div>
</div>
</body>
</html>
I am experiencing some random CSS layout issues. When I VPN into my work and view the website the layout will sometimes break. However when I refresh the page this will fix it most of the time for that page only. If I browse to another page and come back to the original page, it is broken again. This only happens when I am not on the internal network. When I am on the internal network the entire site looks fine and works like it is suppose to. Anyone know of any neat tricks to solve this kind of problem? It is mainly the CSS background-images that are being placed 10 or so pixels from where they belong. As expected, Firefox displays my website perfectly, but I have a couple of major problems with MSIE and one or two with Chrome, but I'm hoping there's an easy to fix for these issues. The site is cinemasight.com In MSIE, there is a "scroll bar" over on the right. I do not know what's causing it or how to get rid of it. The other item is the <h2> headers are overlapping the comment "bubbles" (these have a link to the comment section of the post and list the number of comments there) on the right-hand side of the individual posts both on the front page and within each post individually. Another issue is in the post labeled Film Fun Friday #19 (and all previous ones tmk. In Chrome and Firefox, the two posters in the Identify the Poster game are centered in their table cells, but in MSIE, they are left-aligned. The final problem (that I can think of/identify at the moment) is in Chrome. Whereas in MSIE, the comments bubble is hidden behind the <h2> tag, in Chrome, it's actually sitting above, largely because in order to get it to display correctly in firefox, I had to use negative margins to pull it up to display on top of the header tag. So, I don't know if this can be resolved separately and individually with Chrome or if there's a better way to do it to display correctly in both it and Firefox. Any help that you guys can provide would be appreciated. Actualy, while I'm at it, there are a couple of other Hi all, I am trying to basically have a centre column of data on my page. Within this centre column, I am trying to place a header and footer. The CSS is working quite well with the exception that the header and footer seem to be shorter than the width of the main column. In other words, there seems to be a margin on the right and left side between the end of the footer/header and main column. I am not sure what is going on as I have made the widths the same. I am sure I am over-seeing something small. I was following the example found http://www.pmob.co.uk/temp/1colcentred.htm Code:
html{height:100%;}
body {
padding:0;
margin:0;
height:100%;
background-color: #98AFC7;
color: #000000;
}
#outer{
min-height:100%;
width:800px;
background:pink;
color: #000000;
margin:auto;
text-align:left;
position:relative;
}
* html #outer{height:100%}
#header {
border-top:1px solid #000;
border-bottom:1px solid #000;
background:blue;
left:-1px;
width:800px;
height:40px;
overflow:hidden;
color: #000000;
z-index:100;
//margin-left:6px;
//margin-right:6px;
}
#footer {
position:absolute;
bottom:0;
left:0;
background:green;
height:40px;
border-top:1px solid #000;
width:800px;
//margin-left:1%;
//margin-right:1%;
}
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
<body>
<div id="outer">
<div id="header">Header</div>
<p>middle</p>
<p>middle</p>
<div id="clearfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
I've been working in CSS, man, is it tiresome for a beginner! After much trail and error, I've come up with my first CSS page. Where I'm stuck, is in the area where all the text is. When I put more text into that page, none of the surrounding styles/boxes[?] adjust to the text format (also shown in a link below), and I can't seem to figure out how to center the entire page itself. Sorry, for the stupid questions, I'm a total novice, and can barely understand most of the CSS postings in this forum. Text extending instead of expanding layout: http://rafia.info/css/layers.bad.htm Thanks sincerely, rups27 |
|||||||