|
CSS - Advanced Css Layout Help
Ok here is my layout
http://codingcore.com/template.html there are no tables at all its all css floats but the only problem is that the left and right menus go over the copyright bar on the bottom the middle box doesnt the copyright stays 45px from the middle box but i want it to be under all the boxs because right now the menus go over the copyright i want its copyright to be below the boxs on the right and left ive tried many things but I cant seem to get it to work i dont want to use tables ither Thanks Matt Similar TutorialsI am attempting to construct a layout that is a bit more styled than the typical. I have seen it multiple times and would love it for my main page. It has a left column and a right column In the right column, I would like to split that into two equal columns, width-wise and then underneath that I would like to have three equal columns under the top two which can span as far down as possible. I attempted it using code that I have laying around, and of course, it works in IE (more or less) but absolutely dies miserable in Netscape and Firefox. the link to the test page is http://www.test.angrybrownman.com and the css sheet would be www.test.angrybrownman.com/style_test.css The css for the site (since I am not sure the link will link) is as follows: #container { width:775px; margin:0px auto; background-color:transparent; border:1px solid #424242; line-height: 100%; background-image:url(cont_bg.jpg); background-repeat:repeat-y; } #top { padding:0px; height:100px; background-image:url(header.jpg); background-repeat:no-repeat; background-position:top left; background-color:#FFFFFF; } #main { padding:0px; height:200px; background-image:url(main.jpg); background-repeat:no-repeat; background-position:top left; background-color:#fff; } #mid_box { padding:0px; height:200px; background-color:transparent; margin:0px 0px 0px 258px; /*background-image:url(mid_spacer.jpg); background-repeat:no-repeat; background-position:top left;*/ } #leftnav { float: left; width: 259px; margin-top:0px; padding:0px; } #rightnav { float: right; width: 150px; margin-top:0px; padding:0px; background-color:transparent; border-left:1px solid red; /*border-right:1px solid green;*/ border-top:2px solid #003366; } #center { margin-left: 259px; margin-right: 0px; margin-top:0px; padding:0px 0px 10px 0px; background-color:#fff/*#649DD8*/; border-top:2px solid #003366; } #leftbox { width: 168px; float: left; background-color:transparent; } #rightbox { width:167px; float: right; background-color:transparent; } #middle { margin-left: 169px; margin-right:168px; margin-top:0px; padding:0px 0px 0px 0px; background-color:transparent; } #left_top { width: 250px; float: left; background-color:transparent; } #right_top { width:250px; float: right; background-color:transparent; } I know it is a heavy duty question. The test page at that link has the css placed in each div af what I am trying to do. I am close...I think...I am just not understanding the model somehow to keep it together in the other 2 big browsers. Any help would be appreciated very, very much. Thanks a million. Jon I want to style something based on what comes after it. If a div is the last to have the class "combinedyes" I want to make the text red for example. I've experimented with: #EditMedHistoryDisplay div.cmMed.combinedyes + div.cmMed.combinedno But that styles the combinedno element... Any ideas? Code: <div id="EditMedHistoryDisplay"> <div class="cmMed odd combinedyes">Testosterone 2 mg <span class="medicationDelMethod">Cream-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21158" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div> </div> <div class="cmMed even combinedyes">DHEA 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21194" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div> </div> <div class="cmMed even combinedyes">Test 10 mg <span class="medicationDelMethod"> Cream-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21184" title="Click to edit" style="background-color: rgba(0, 0, 0, 0); ">1 Gm (1 Gm = 1/4 tsp = 2 pumps)</div> </div> <div class="cmMed even combinedno">Testosterone 2 mg <span class="medicationDelMethod"> Patch-Transdermal</span> <div class="cmNotes ecmInstructions" id="cmnotes_21038" title="Click to edit">It's a patch...</div> </div> </div> Hi everyone. I'm looking for some help rendering a list using css. Basically I have a list in this format: Code: <ul>
<li>shirts</li>
<li>jackets
<ul>
<li>casual jackets</li>
<li>formal jackets</li>
</ul>
</li>
<li>suits</li>
</ul>
And I would like to render it something like: Code: shirts jackets > casual jackets formal jackets suits All the text needs to be floated left so it will wrap to the next line. I'm able to float the top level list items correctly i.e. "shirts jackets suits" using: Code: <ul id="menu">
<li>shirts</li>
<li>jackets</li>
<li>suits</li>
</ul>
#menu, #menu ul {
list-style:none;
}
#menu li {
float: left;
width:5em;
}
the problem I have is getting the nested lists to appear alongside the parent items instead of below. When I add the nested lists I see something like: Code: shirts jackets suits
casual jackets
formal jackets
Maybe this just isn't possible but if anyone could help me I'd sure appreciate it! Thanks! Toby I am trying to create a completely non-uniform layout for one of my clients using only CSS. I would like to accomplish this using only floats that are cross-browser supported. The layout is split up into 9 different panels that need to be positioned correctly. Is this achieved simply by using float and clear? I have been experimenting and have been failing. What about positioning? Would kind of positioning would I use to arrange something inside of a parent div? See attached file for layout. P.S. I know I can get this exact layout done using tables, but I would much rather do this with some "simple" CSS. html code: Code: <div id="sidebar"> <h2>South Winds Park Info</h2> <ul> <li><a href="park-info/contact-info" title="Contact Info">Contact Info</a></li> <li><a href="park-info/homes-for-rent" title="Homes for Rent">Homes for Rent</a></li> <li><a href="park-info/homes-for-sale" title="Homes for Sale">Homes for Sale</a></li> <li><a href="park-info/office-services" title="Office & Services">Office & Services</a></li> <li><a href="park-info/meet-the-staff" title="Meet the Staff">Meet the Staff</a></li> </ul> <h2>South Winds Resources</h2> <ul> <li><a href="calendar" title="Calendar">Calendar</a></li> <li><a href="resources/forms-and-documents" title="Forms and Documents">Forms and Documents</a> <ul> <li><a href="resources/forms-and-documents/by-laws" title="By Laws">By Laws</a></li> <li><a href="resources/forms-and-documents/prospectus" title="Prospectus">Prospectus</a></li> <li><a href="resources/forms-and-documents/rules-regulations" title="Rules & Regulations">Rules & Regulations</a></li> </ul> </li> <li><a href="resources/special-events" title="Special Events">Special Events</a></li> <li><a href="resources/maintenance" title="Maintenance">Maintenance</a> <ul> <li><a href="resources/maintenance/fees" title="Fees">Fees</a></li> <li><a href="resources/maintenance/trash" title="Trash">Trash</a></li> </ul> </li> <li><a href="resources/faq" title="FAQ">FAQ</a></li> </ul> </div> CSS Code: Code: #sidebar ul{
margin:10px 0 30px 0; padding: 0;
text-align:right;
}
#sidebar li a, #nav li {
display:block;
}
#sidebar li {
list-style: none;
position: relative;
}
#sidebar li a {
padding: 1em 2em;
text-decoration: none;
color: white;
background:url(images/design/listBottomLine.png) bottom right no-repeat;
}
#sidebar li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
/* Submenu */
.hasChildren {
position: absolute;
width: 5px; height: 5px;
background: black;
right : 0;
bottom: 0;
}
#sidebar li ul {
display: none;
position: absolute;
left: 100%;
top: 0px;
padding: 0; margin: 0;
z-index:100;
}
#sidebar li:hover > ul {
display: block;
}
#sidebar li ul li, #nav li ul li a {
float: none;
z-index:1000;
}
#sidebar li ul li {
_display: inline; /* for IE6 */
}
#sidebar li ul li a {
width: 150px;
display: block;
background-color:#2c9091;
}
This is a vertical menu (in the sidebar of a wordpress site). It works everywhere, except IE7. I have jquery that overcomes the hover issue for IE (I know it works because I got it from http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/ I have searched the internet for a solution: using csshover.htc (doesn't work) The one issue I think it might be is because I'm using an ancher tag, but using hover on the li element. (the ancher is child of li) I have read tutorials on this, so my anchor is display block, it has the width and height fixed. The other is I'm using z-index to pull the elements in front. I don't know if IE7 has issues with z-index. I'm sorry I cannot show a working (broken) example, it's a wordpress site on my local machine. I even used the exact css code from the tutorial linked above (slightly modified to be vertical not horizontal) which he says it works in every browser. What else could it be? Since the code should work. What else around this menu could be my problem? Thank you so much for your help (ready to pull my hair out) Hi! 1/ Is display:table; supported in IE6? In IE7? Searched the web but found contradictory answers. 2/ In Opera 9.02, when declaring a div display:table; and then applying padding to it (the div), there is a bug: the padding is contained in the width of the div (making the "content" or "room" available in the div smaller) rather than added tp the width of the div. Is there a fix for this? Thanks Thus far I've done all of the CSS courses on lynda.com and have read css Zen Design and Transcending CSS, both GREAT books. What would be a good "next step book" into advanced CSS coding or have I done it all? Hi all, Does anyone have any good suggestions for a CSS book? I'd like to buy an all in one, that will teach me CSS. Thanks for any help I was looking over the www.csszengarden.com page and the way CSS was used there, but now I'm puzzled about the way the p element & p class is used in that document. In the stylesheet, the p element is specified but then in the html code, this type of code is used: <p class="p1"> <p class="p2"> <p class="p3"> For each new paragraph the class p is incremented by 1. However, the classes p1, p2, p3 etc. are not specified anywhere in the stylesheet. Is it a correct use of CSS & html code, or are the 'missing' classes perhaps an omission? Can anybody explain to me how this affects those paragraphs? Firefox works, IE doesn't Help with CSS pls :-) Firefox: http://img144.imageshack.us/img144/...irefoxstone.jpg Internet Explorer: http://img5.imageshack.us/img5/3856/explorerstone.jpg Here is that part of css i believe is affecting it: Code:
div.module h3 {
margin: 0px 0px 15px 10px;
font-size: 1em;
color: #FFEFD5;
text-transform: uppercase;
}
div.module {
margin-bottom: 25px;
padding: 5;
float: left;
clear: both;
width: 100%;
background: url(../images/bottom.jpg) repeat-x bottom left;
}
div.module div {
padding: 0px;
background: url(../images/left.jpg) repeat-y top left;
}
div.module div div {
padding: 0px;
background: url(../images/top.jpg) repeat-x top left;
}
div.module div div div {
padding: 9px 9px 20px 9px;
background: url(../images/right.jpg) repeat-y top right;
}
div.module div div div div {
margin: 1;
padding: 3;
background: url(../images/parchtexture.jpg);
}
================== I have seen this code in some index files Some people put this in there index is this a code does this make your index.php use a different css file depending on the browser you use? Code:
<!--[if lte IE 6]>
<style type="text/css">
.clearfix { height: 1%;}
#ja-cssmenu li { float: left; clear: both; width: 100%; }
</style>
<![endif]-->
<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix { display: inline-block;}
</style>
<![endif]-->
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? 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? :/ 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 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 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 am working on a site for a class assignment and got it too look how I wanted in firefox 3 but then when I tested it in Explorer it is a completely different monster! I know that explorer is backwards but could someone shed some light on my code for me and get me going down the right path... http://jjs5327.aisites.com/IMD311/index.html Code:
@charset "UTF-8";
/* CSS Document */
body {
background-color:#FFFFFF;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px; color:#000000;
}
#site {
width:775px;
height:500px;
margin:25px auto 0 auto; border:none;
}
#container {
width:775px;
height:500px;
margin:0 auto 0 auto;
border:1px solid #99CCCC;
}
#header, img {
margin-top:10px;
border:none;
cursor: default;
}
#left {
width:210px;
height:208px;
margin-top:80px;
margin-left:20px;
border-top:1px solid #99CCCC;
border-right:1px solid #99CCCC;
border-left:1px solid #99CCCC;
float:left;
clear: both;
}
#menubar, #menubar p {
background-color:#FFFFFF;
text-align:left;
margin:auto;
}
#menubar a {
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:12px; color:#FF9933;
text-decoration:none;
padding: 7.1px 0px 7.21px 10px;
border-bottom:1px solid #99CCCC;
cursor:default;
}
#menubar a.active {
color:#99CCCC;
}
#menubar p:hover a, #menubar a:focus, #menubar a:active { color: #FFFFFF;
background-color: #99CCCC;
}
#right {
width:520px;
height:390px;
margin:15px 40px 15px 255px;
border-top:1px solid #99CCCC;
border-left:1px solid #99CCCC;
}
#headline {
font-family:Arial, Helvetica, sans-serif;
color:#000000;
font-size:14px;
text-align:center;
margin-top:60px;
}
#content {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
width:380px;
margin:10px 60px 10px 60px;
padding:5px;
line-height:20px;
}
#sumheadline {
font-family:Arial, Helvetica, sans-serif;
color:#000000; font-size:14px;
font-style:italic;
text-align:left;
margin:60px 0 0 90px;
}
#sumcontent ul{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
list-style:disc;
text-align:left;
width:250px;
padding:10px;
margin-left:150px;
line-height:20px;
}
#techcontent {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
width:380px;
margin:60px 60px 10px 60px;
line-height:20px;
}
.tech2 {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FF9933;
font-style:italic;
}
#expcontent {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
width:460px;
height:330px;
margin:59px 30px 10px 30px;
line-height:20px;
overflow: auto;
}
.exp2left {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FF9933;
font-style:italic;
}
#gencontent {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:left;
width:490px;
height:385px;
margin:15px 10px 10px 15px;
line-height:22px;
}
.deshead {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#FF9933;
font-style:italic;
margin-left:115px;
padding-top:10px;
}
.description {
width:350px;
margin-left:115px;
}
#example {
overflow-y:scroll;
overflow-x:hidden;
height:389px;
width:519px;
}
#example1 img, #example2 img, #example3 img, #example4 img { float:left;
}
#example1 {
width:505px;
height:100px;
margin:10px 0px 0 10px;
text-align:left;
}
#example2 {
width:505px;
height:100px;
margin:10px 0px 0 10px;
text-align:left;
}
#example3 {
width:505px;
height:100px;
margin:10px 0px 0 10px;
text-align:left;
}
#example4 {
width:505px;
height:100px;
margin:10px 0px 0 10px;
text-align:left;
}
#content li {
padding:5px;
}
#footer {
color:#999999;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
text-align:right;
width:775px;
height:20px;
margin-top:5px;
}
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>
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 |
|||||||