|
CSS - One True Layout ?
i thought this was perfect example so i used it
http://www.positioniseverything.net...example/rounded if you look at this it seems as if all boxes stretch so there is no big empty spaces on the page but however if the left purple block numbered 6, is larger then the small ones....there is gonna be a empty space under block 4 and 5...where block 6 extends to meet block 8, number 4 and 5 stay small aint that a weird layout if that happens? (i could make a picture if you wanna see how it looks) please tell me what you think....i did a lot of work for where i use this in and now it just looks weird, or is it just me? Similar TutorialsHow would I align a div to the true bottom (by this i mean below the viewport. at current i use: Code:
.footer
{
background-color:#FFFFFF;
width:100%;
height:20px;
color:#000000;
position:absolute;
bottom:0px;
}
but this just aligns my div to the bottom of my window, not the bottom of the page, if i then need to scroll down it is visible that its not at the bottom of the page. any ideas? Why on earth is visibility: hidden; not visible: false; ?? Not only do I have to worry about spelling visibility right and getting all the i's in the right spots, it make javascript that much harder. I have to pass object around rather than flipping a switch. It makes no logical sense IMO to have strings when you would have simply had a bool. Is it for future? Are they going to add 'transparent' and 'slightly visible'? Hopefully something else hard to spell like 'squirrel' CJB http://www.students.niu.edu/~z162609/asme.html That is my website. As you can see on the left the link box changes with the actual text in the main box. The text goes down as the text on the main content box gets bigger. I am very new to CSS and really do not know anything. I am fairly sure this is a one line fix. However, I really need this and would appreciate any help. Code:
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{padding:5px; text-decoration:none; color:#000000;}
div#header{background-color:#F3F2ED;}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#F6F0E0;}
div#navigation ul{margin:15px 0; padding:0; list-style-type:none;}
div#navigation li{margin-bottom:5px;}
div#extra{background:#CCC8B3;}
div#footer{background:#BFBD93;}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-150px}
div#extra{float:left;width:150px;margin-left:-700px}
div#footer{clear:left;width:100%}
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. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? I'm doing a layout with div's and I want to have my navigation a pixel size, but my content area a percentage. (and have them beside each other) Here's what I've tried, but the 'main' div goes 100% of the window instead of 100% of the space between the left side and the 'nav' div. Is what I'm trying to do possible with div's? HTML: <div id="main"> stuff </div> <div id="nav"> navigation </div> CSS: #main { float: left; width: 100%; background: #efe; } #nav { float: left; width: 200px; margin-left: 4px; background: #999; } can someone lead me to a site that either has examples or teaches me how to outlay a webpage without using many tables? I tried and got lost in confusing websites :S thanks I am having a hard time grasping this and would really appreciate some help. I think if you look at this code, my problem is obvious. I want a layout with a nav column down the left side, a banner area, and a content area. I have played around with this for hours, tons of trial and error. I almost had it in IE, but in NS it looks like crap. Also, in the container <div> that someone kindly gave me, what is the -350px do? Here is my code, thanks so much. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <title>Full Height</title> <style type="text/css"> /*<![CDATA[*/ body { height: 100%; margin: 0; } #container { position: absolute; top: 0; left: 50%; margin-left: -350px; width: 700px; height: 100%; background-color: #fff; border: 1px solid red; background-image: url('images/keybg.jpg'); background-repeat: no-repeat; } #nav{ width:135px; position:absolute; background-color:#000; left:0px; height:100%; float:left; clear:right; top:0px; margin-top:0px; } #banner{ width:565px; position:absolute; background-color:#f00; left:135px; height:125px; float:right; } #content{ width:565px; position:absolute; margin-top:125px; background-color:#00f; left:0px; height:100%; float:right; clear:left; } /*]]>*/ </style> </head> <body> <div id="container"> <div id="nav"> </div> <div id="banner" </div> <div id="content"> </div> </div> </body> </html> My layout is pretty simple. 1 large columb in the center that should extend the full length of the browser(minimum) regardless of how much text is in it. 1 column on either side of it for other content. I cannot get the middle column to extend to 100%. it stops at the data. Here is my CSS. Code:
body {
margin: 0;
padding: 0;
font-size: 12px;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #C10E0E;
}
#leftcolumn {
display: inline;
float: left;
left: 15%;
width: 150px;
}
#centercolumn {
float: left;
width: 511px;
height: 100%;
margin-left: 2px;
padding: 8px;
border-left: 1px solid #494949;
border-right: 1px solid #494949;
background: url(/images/bg.png) no-repeat top left;
background-color: #FFDCAA;
}
#rightcolumn {
float: left;
width: 150px;
margin-left: 1px;
}
#mainnav {
width: 150px;
padding: 0 0 0 0;
font-size: 12px;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
background-color: #C10E0E;
color: #FFDCAA;
}
#mainnav ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#mainnav li {
margin: 0 0 0 0;
border-left: 7px solid #C10E0E;
padding: 0 5px 0 0;
}
#mainnav li a {
display: block;
height: 15px;
vertical-align: middle;
padding: 0 0 0 0;
margin: 0 0 0 0;
background-color: #C10E0E;
color: #FFDCAA;
text-decoration: none;
text-align: right;
}
html>body #mainnav li a {
width: auto;
padding: 0;
margin: 0;
}
#mainnav li a:hover {
background-color: #C10E0E;
border-left: 7px solid #FFDCAA;
color: #FFF;
padding: 0;
margin: 0;
}
#mainnav h3 {
padding-left: 5px;
font-size: 14px;
font-weight: bold;
color: #F6D4A4;
font-style: italic;
}
thanks! I'm trying to get this layout to work, but just can't seem to. I'd like to be able to do this in tableless fashion but if I have to use tables I'll do so. Basically, the header and the main content areas need to be centered and a fixed width at all times. however, there are 2 bars that need to be fluid and positioned in relation to the header and content areas. I couldn't think of a way to explain it that it would make sense, so I've attached an image that represents what I'm talking about. I'm anxious to hear whether this can be acheived or not. Thanks! -B Hi, I am relatively new to CSS and am trying to come up with a layout very similar to Noteableapp. What I like about that design is that the taskbar stays floated at the top, while the central column exands with the width of the browser. What I'm trying to do different is have a much more detailed background image, rather than a simple gradient. The problem I'm having is that the navigation divs seems to be transparent so the detailed texture shows through. I've tried building the divs from scratch without success as I can't seem to get the central column to stay in the centre of the page, so I had a look at the css for Noteableapp however its a bit complicated for me and raised more questions than answers! Can anyone point me in the direction of a good tutorial to achieve a layout similar to Noteableapp or able to contact me and guide me through what is actually happening with the noteable css. My preference would be a tutorial so I can actually understand what is happening but any help would be much appreciated. This is my mockup: http://beta.investchallenge.com/ The corresponding CSS for the page: http://beta.investchallenge.com/styles/layout.css The left and right columns are not lining up like they should be, I can't figure what is causing this is the CSS. Any ideas? I'm using a similar template to the one located he http://www.linux.co.uk In Internet Explorer you'll notice a space to the right of the "sponsored links" text in the right hand portlets area. Also a space at the bottom of this same porlet on the left hand side. It seems to be aggravated at different font sizes. These spaces don't show up on Mozilla, it works perfectly. Any ideas for fixing this behaviour? Thanks.. -j. i have a problem with my css layout for wordpress, please help me. in this page: http://rohitkumar.org/blog/index.php?p=29#comments 1. the comment div doesnt have a 10px margin 2. the leave ur comment heading is rite aligned ( i want it to be left aligned) 3. the title of the comment input field is not aligned with the form field 4. users with a non 1024X768 resolutions see the page differently, is there anyway this can be fixed? index.php: Code:
<?php
/* Don't remove this line. */
require('./wp-blog-header.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/1">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<style type="text/css" media="screen">
@import url( <?php echo get_settings('siteurl'); ?>/wp-layout.css );
</style>
<link rel="stylesheet" type="text/css" media="print" href="<?php echo get_settings('siteurl'); ?>/print.css" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body>
<div id="rap">
<h1 id="header"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<div id="content">
<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>
<?php the_date('','<h2>','</h2>'); ?>
<div class="post">
<h3 class="storytitle" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h3>
<div class="meta"><?php _e("Filed under:"); ?> <?php the_category() ?> — <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(); ?></div>
<div class="storycontent">
<?php the_content(); ?>
</div>
<div class="feedback">
<?php wp_link_pages(); ?>
<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
</div>
<!--
<?php trackback_rdf(); ?>
-->
<?php include(ABSPATH . 'wp-comments.php'); ?>
</div>
<?php endforeach; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
<div id="menu">
<ul>
<?php get_links_list(); ?>
<li id="categories"><?php _e('Categories:'); ?>
<ul>
<?php wp_list_cats(); ?>
</ul>
</li>
<li id="search">
<label for="s"><?php _e('Search:'); ?></label>
<form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">
<div>
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" name="submit" value="<?php _e('Search'); ?>" />
</div>
</form>
</li>
<li id="archives"><?php _e('Archives:'); ?>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<li id="calendar">
<?php get_calendar(); ?>
</li>
<li id="other"><?php _e('Other:'); ?>
<ul>
<li><a href="<?php echo get_settings('siteurl'); ?>/wp-login.php"><?php _e('Login'); ?></a></li>
<li><a href="<?php echo get_settings('siteurl'); ?>/wp-register.php"><?php _e('Register'); ?></a></li>
</ul>
</li>
<li id="meta"><?php _e('Meta:'); ?>
<ul>
<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr> 2.0'); ?></a></li>
<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr> 2.0'); ?></a></li>
<li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?></a></li>
<li><a href="http://wordpress.org/" title="<?php _e('Powered by WordPress; state-of-the-art semantic personal publishing platform.'); ?>">WP</a></li>
</ul>
</li>
</ul>
</div>
</div>
<p class="credit"><!--<?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. --> <cite><?php echo sprintf(__("Powered by <a href='http://wordpress.org' title='%s'><strong>WordPress</strong></a>"), __("Powered by WordPress, state-of-the-art semantic personal publishing platform")); ?></cite></p>
</body>
</html>
wp-layout.css: Code:
/*
VerySimple - Style for Wordpress
by Gary Rogers (gary.rogers@dmin.net)
Licensed under the Creative Commons License
(http://creativecommons.org/licenses/by/2.0/)
** NOTE **
Not all Styles are used here, but they all exist in Alex's sample
page, so they remain for reference.
*/
body {
margin: 0px;
padding: 0px;
font-family: 'Georgia';
font-size: 12pt;
}
blockquote {
margin-left: 20px;
color: #000;
}
a img {
border: none;
}
code {
font-family: Monaco, 'Courier New', Courier, monospace;
font-size: 10pt;
color: #000;
}
h2 {
font-size: 12pt;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
color: #000;
text-align: right;
}
#rap {
width: 900px;
margin-left: 25px;
margin-right: 25px;
}
#header {
font-size: 36pt;
font-weight: bold;
text-align: center;
margin-bottom: 40px;
}
#header a {
text-decoration: none;
color: #000;
}
#header a:hover {
text-decoration: underline;
}
#content {
width: 725px;
}
.post {
border: 1px solid #000;
margin: 25px;
}
.storytitle {
font-size: normal;
font-weight: bold;
margin-left: 10px;
margin-bottom: 2px;
}
.storytitle a {
text-decoration: none;
color: #000;
}
.meta {
font-size: x-small;
margin: 0px;
padding-left: 10px;
margin-bottom: 2px;
}
.meta ul {
display: inline;
list-style: none;
margin: 0px;
padding: 0px;
}
.meta li {
display: inline;
}
.post-categories {
font-style: normal;
}
.storycontent {
margin: 10px
}
.storycontent img {
margin-right: 15px;
}
.feedback {
font-size: normal;
text-align: right;
padding-right: 10px;
margin-bottom: 20px;
}
#commentform input, #commentform textarea {
background: #fff;
border: 1px solid #000;
margin: 10px;
}
.postcomment {
text-align: left;
margin: 10px;
}
<h2 id="postcomment" style="text-align: left">Leave a comment</h2>
#commentform textarea {
width: 90%;
margin: 10px;
}
ol#comments li p {
font-size: 100%;
margin: 10px;
}
.credit {
width: 700px;
margin-left: auto;
margin-right: auto;
font-size: x-small;
text-align: center;
padding-top: 10px;
}
#menu {
position: absolute;
top: 121px;
margin-left: 765px;
font-size: normal;
width: 180px;
}
#menu a img {
padding: 3px;
}
#menu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#menu ul li {
font-weight: bold;
margin-top: 10px;
}
#menu ul li p {
font-weight: normal;
}
#menu ul li ul {
font-weight: normal;
margin-top: 4px;
margin-left: 0px;
padding-left: 10px;
}
#menu ul li ul li {
text-indent: 0px;
font-weight: normal;
padding: 0px;
margin: 0px;
margin-top: 0px;
}
#wordpress {
font-style: normal;
}
#categories {
}
#search {
}
#archives {
}
#calendar {
font-weight: bold;
text-align: left;
}
#wp-calendar {
font-weight: normal;
padding-left: 10px;
}
#wp-calendar caption {
color: #000;
font-size: normal;
font-weight: bold;
text-align: left;
}
#prev {
}
#pad {
}
#today {
background: #CCC;
}
#other {
}
#style {
}
phew, lotta code i say (i just copied and pasted btw) thanks I was working on making 2 different link menu's one that dropped down and one that was stationary underneath it. On my computer it looks fine but on some computers the bottom link is partially underneath the top one. and the opacity filter's do not show up especially on mac's. Was wondering if anyone could help. Heres the website link, and then the code. http://www24.brinkster.com/mattphat/test2.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HEAD>
<TITLE>Northwest Connecticut YMCA | We build strong kids, strong families, strong communities.</TITLE>
</HEAD>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.menu {
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
width:780px;
height:35px;
background:#F0ECEB url(../meeting.jpg) 0 20px no-repeat;
position:relative;
margin:0 0 8px 0;
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
}
/* get rid of the default padding - margin and bullets */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
/* make menu horizontal */
.menu ul li {
float:left;
position:relative;
}
/* set up the default top level links */
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
width:116px;
height:1.5em;
font-weight:bold;
color:#888;
border-bottom:8px solid #888;
border-top:1px solid #888;
border-left:1px solid #888;
border-right:1px solid #888;
background:#F0ECEB;
padding-left:10px;
line-height:1.5em;
margin-right:2px;
}
/* hack for IE5.5 to correct the faulty box model */
* html .menu ul li a, .menu ul li a:visited {
width:116px;
w\idth:116px;
}
/* hide the drop down menu */
.menu ul li ul {
display: none;
}
/* remove all table style so that it does not interfere with the menu */
.menu table {
margin:-1px;
border-collapse:collapse;
font-size:1em;
}
/* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */
/* style the top level hover */
.menu ul li:hover a,
.menu ul li a:hover {
color:#000;
border-bottom:8px solid #EE3233;
}
/* make the drop down menu show and correctly position it */
.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block;
position:absolute;
top:1.2em;
margin-top:11px;
left:0;
width:116px;
border:1px solid #888;
border-top:0;
background:transparent;
}
/* style the drop down links with no hover */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block;
background:transparent url(../../opacity/opaque.png);
color:#000;
border:0;
margin:0;
color:#333;
font-weight:normal;
font-size:0.9em;
height:auto;
line-height:1em;
padding:5px;
width:116px
}
/* style the drop down menu links when hovered */
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#888;
color:#fff;
}
/* special styling for IE5.5 and IE6 - transparency is non validating */
.menu ul li a:hover ul {
background:transparent filter:alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
margin-top:10px; /* for IE5.5 faulty box model */
marg\in-top:11px; /* for IE6 */
}
/* IE5.5 hack for faulty box model in drop down menu */
.menu ul li a:hover ul li a {
background:#ddd;
width:116px; /* for IE5.5 faulty box model */
width:116px; /* for IE6 */
}
#nav {
float: left;
width: 780px;
height: 20px;
margin-top: 0;
padding: 0;
list-style: none;
background: #ccc;
border-bottom: 1px solid #999;
}
#nav li {
float: left;
margin: 0;
padding: 0;
}
#nav a {
float: left;
display: block;
padding: 0px 10px 0px 5px;
text-decoration: none;
font-weight: bold;
font-size: 85%;
color: #666;
background: #ccc url(http://www24.brinkster.com/mattphat/YMCA/nav_slant.gif) no-repeat top right;
}
#nav b {
float: left;
display: block;
padding: 0px 10px 0px 5px;
text-decoation: none;
font-weight: bold;
font-size: 95%;
color: #EE3233;
background: #ccc url(http://www24.brinkster.com/mattphat/YMCA/nav_slant.gif) no-repeat top right;
}
#nav #nav-1 a {
padding-left: 10px;
padding-right: 5px;
}
#nav a:hover {
color: #000;
}
</style>
<BODY>
<div id="wrap 2">
<div id="wrap">
<div class="menu">
<ul>
<li><a class="drop" href="http://www24.brinkster.com/mattphat/ymca3.html">Home
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www24.brinkster.com/mattphat/hoursofoperation.html" title="Hours of Operation">Hours of Operation</a></li>
<li><a href="http://www24.brinkster.com/mattphat/membershiprates.html" title="Membership Rates">Membership Rates</a></li>
<li><a href="http://www24.brinkster.com/mattphat/yassurance.html" title="Y-Assurance">Y-Assurnace</a></li>
<li><a href="http://www24.brinkster.com/mattphat/employment.html" title="Employment">Employment</a></li>
<li><a href="http://www24.brinkster.com/mattphat/contactus.html" title="Contact Us">Contact us</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www24.brinkster.com/mattphat/ymcatorrington.html">Torrington
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www24.brinkster.com/mattphat/tfacility.html" title="TFacility">Facility Schedule</a></li>
<li><a href="http://www24.brinkster.com/mattphat/tchildcare.html" title="TChildcare">Childcare</a></li>
<li><a href="http://www24.brinkster.com/mattphat/tlasers.html" title="Lasers">Lasers</a></li>
<li><a href="http://www24.brinkster.com/mattphat/tcamp.html" title="TORYMCA">TORYMCA</a></li>
<li><a href="http://www24.brinkster.com/mattphat/tyhouse.html" title="Y-House">Y-House</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www24.brinkster.com/mattphat/ymcawinsted.html">Winsted
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www24.brinkster.com/mattphat/wfacility.html" title="Facility Schedule">Facility Schedule</a></li>
<li><a href="http://www24.brinkster.com/mattphat/wchildcare.html" title="Childcare">Childcare</a></li>
<li><a href="http://www24.brinkster.com/mattphat/wcamp.html" title="Camp Rising StarCamp Rising Star</a></li>
<li><a href="http://www24.brinkster.com/mattphat/WYSB.html" title="WYSB">WYSB - Winchester Youth Service Bureau</a></li>
<li><a href="http://www24.brinkster.com/mattphat/wliteracy.html" title="Literacy">Literacy</a></li>
<li><a href="http://www24.brinkster.com/mattphat/wvolleyball.html" title="Y Volleball Juniors">Y Volleball Juniors</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www24.brinkster.com/mattphat/ymcacannan.html">Cannan
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www24.brinkster.com/mattphat/cfacility.html" title="Facility Schedule">Facility Schedule</a></li>
<li><a href="http://www24.brinkster.com/mattphat/cchildcare.html" title="Childcare">Childcare</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www24.brinkster.com/mattphat/ymcagiving.html">Giving
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="http://www24.brinkster.com/mattphat/strongkids.html" title="2009 Strong Kids Campaign">2009 Strong Kids Campaign</a></li>
<li><a href="http://www24.brinkster.com/mattphat/givingvol.html" title="Volunteering">Volunteering</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www24.brinkster.com/mattphat/ymcacannan.html">About Us
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="../menu/zero_dollars.html" title="?">?</a></li>
<li><a href="../menu/embed.html" title="?">?</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
</div>
<ul id="nav">
<li id="nav-1"><b>Fall 2009 Programs </b></li>
<li id="nav-2"><a href="http://www24.brinkster.com/mattphat/youthaquatics.html">Youth Aquatics </a></li>
<li id="nav-3"><a href="http://www24.brinkster.com/mattphat/aquatics.html">Aquatics </a></li>
<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/wellness.html">Wellness </a></li>
<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/seniors.html">Seniors </a></li>
<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/youthsports.html">Youth Sports </a></li>
<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/preschoolPE.html">Preschool PE </a></li>
<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/Specialty.html">Specialty </a></li>
</ul>
</ul>
</div>
</div>
</BODY>
</HTML>
Hey, So I'm trying to create a blogger skin by myself and I'm already stuck. I want the template to look something like this: *** And I failed while I was looking for that kind of a template. And I did search, for a decent amount of time. So, any help? Does somebody know, where can I get a template like that or how can I create it myself? Thanks a bunch, Lara. EDIT: Um, new user accounts are not permitted to create posts containing URLs? Aw'sm. So, how can I show you my idea of the layout? :/ Ok, i am trying to make a layout and it isnt working, i have tried MANY diffrent ways of trying to do this and when i tried to do it it looks like this: screenshot here but i want it to look something like this site: link here! and here is the code: Code: <html>
<head>
<title>Website</title>
<style type='text/css'>
body {
background: #333333;
}
#container {
width: 905px;
<!-- border-style: solid;
border-width: 1px;
border-color: white; -->
}
.banner {
background-image: url('images/banner.png');
width: 900px;
height: 132px;
}
.cen {
background-image: url('images/Comment_top.png');
width: 494px;
height: 18px;
text-align: center;
color: #000000;
font-family: arial;
font-size: 13px;
}
.Nav_L {
background-image: url('images/N_head.png');
width: 200px;
height: 17px;
text-align: center;
color: #000000;
font-family: arial;
font-size: 13px;
float: left;
}
.Nav_R {
background-image: url('images/N_head.png');
width: 200px;
height: 17px;
text-align: center;
color: #000000;
font-family: arial;
font-size: 14px;
float: right;
}
.nav
{
text-align: center;
background-image: url('images/Nav.png');
text-decoration: none;
font-family: verdana;
height: 18px;
width: 200px;
font-size: 10px;
display: block;
}
</style>
<head>
<body>
<!-- start and center container -->
<div align='center'>
<div id='container'>
<!-- start banner -->
<center>
<div class='banner'></div>
</center>
<!-- End banner -->
<!-- start table -->
<table valign='top'>
<!-- start Left nav -->
<div align='left'>
<div class='Nav_L'>General</div><br>
<div class='nav'>test</div>
</div>
<!-- End Left Nav -->
<!-- start right nav -->
<div class='Nav_R'>Statistics</div>
<!-- End Left Nav -->
<!-- Start middle -->
<center>
<div class='cen'>.::Welcome::.</div>
</center>
<!-- End middle -->
</table>
</div>
</div>
<!-- End center and container -->
</body>
</html>
please can someone help me fix this problem. i kinda need it done asap Hey, I know how to do this using a table, but I'm worried it will break down in certain browsers and I want to know the best way to go about this and incoperate some css and divs.. Here is what the table would consist of background: url ('../images/topbg.jpg') repeat-x; height: 295px; width: 850px; 1st row = 1 column height: 155px; 2nd row = 8 equal columns height: 140px; In each of these 8 columns I want to insert an image link which are centered vertically as well as horizontally |
|||||||