|
CSS - Css Layout Help Please! (i Officially Hate Css Lol)
I am trying to do a layout thats dynamic for different screen sizes in height. So I have a header at 120px high, footer at 40px high and I want the middle part 100% high.
Can anyone help please?? I used a css generator now trying to get the 100% height going and its not working . Thanks http://stealaz.myvnc.com/438335.htm http://stealaz.myvnc.com/438335.css Similar TutorialsQuote: Alright for some reason this wont work in IE. http://65.26.50.204/ec/index.php?page=1 First off the paragraph isnt moving over 8px like its supposed to, making it appear on the edge of the background in the transitional background. Second off the div's are displaying on 2 diffrent lines... they are supposed to function like table cells. The first problem appears in firefox every 1 out of 10 pageloads, for some reason. Which is bs, how is it rendering it diffrent when its the same exact data? Thats not even possible, the computer cant make its own descisions and its following the same rendering process!!! What the hell is it doing? This is really starting to piss me the hell off. I would really appreciate some help. Well I figured it out, after removing some things, which is gonna require a lot of changing in my sites structure, but oh well. I will move onto 3 other issues. 1. The bottom bar he http://65.26.50.204/ec/index.php?page=1 appears on 2 lines instead of 1, in IE only, but in FF it looks fine. 2. I would like the layouts body background to be "100%", how do I achieve that? 3. I have heard my doctype should not be HTML 4.01 Transitional (because of transitional), and I have absoulutely no idea about what doctypes to use, and where the file is located, so what should I use? (I have never used doctypes in any of my past codings, this is a first) Hi there all, Have been having a little look around and this look slike a great place o get some answers to a few design problems I have at the moment. I am in the process of updating a site and completely revamping it, from the original that I designed at lhdesignz.co.uk I have placed the beggining of my new design (only just started) on another site for testing purposes this is: webwizedezignz.co.uk My problem is this, Firefox, IE7 etc look fine but as soon as you load up in IE6 the design goes all to hell! I have had a read of some of the other posts here and they do give me some ideas but I thought it would be best just to let people see exactly what I am talking about. Hope you are able to help webwize Man i am working an an all new CSS theme and it was all going well intel i seen a bug. It only pops up in ie, the menu gets cut off 10%! If i resize the code it appears larger in firefox,opera,+ but looks ok in ie... I don't want to resize it just for IE witch only 2% of my old members used. Is there way to fix it without a major headach? Page code. Code: <div id="main_menu">
<ul id="main_menu">
<li><a href="home.php">Home Page</a></li>
<li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Members</a><ul style="display: none;">
<li><a href="./login.php">Community Login</a></li>
<li><a href="./lostpass.php">Retrive Account</a></li>
<li><a href="./signup.php?task=350_!sx0993tru35500x0p40e_002354mpL334!500X6PK000D30001">Signup Free!</a></li>
</ul></li>
<li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Features</a><ul style="display: none;">
<li><a href="#">Live Chat</a></li>
<li><a href="#">Live Demo</a></li>
<li><a href="#">Feature List</a></li>
</ul></li>
<li><a href="./forum/">Forums</a></li>
<li><a href="./blogs/">Blog</a></li>
<li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Support</a><ul style="display: none;">
<li><a href="./help.php">FAQs</a></li>
<li><a href="#">Mail Us</a></li>
<li><a href="#">Phone Us</a></li>
<li><a href="./contact.php">Contact Support</a></li>
<li><a href="./tos.php">Terms Of Service</a></li>
</ul></li>
</ul></div>
Css: Code: ul#main_menu {
color: #231f20;
padding:0;
margin:0 0 0 0;
background-color:#666666;
border-left:1px solid #6b6659;
border-right:1px solid #6b6659;
border-bottom:1px solid #6b6659;
border-top:1px solid #7d786c;
}
ul#main_menu li {
list-style: none;
margin: 0;
padding: 0;
font-size:12px;
}
ul#main_menu li a {
color: #ffffff;
text-decoration:none;
padding:7px;
padding-left:14px;
padding-right:6px;
width:128px;
display:block;
border-top:1px solid #a29e91;
border-bottom:1px solid #8a8477;
}
ul#main_menu li a:hover {
background-color:#DDFADA;
border-top: 1px solid #a29e91;
border-bottom: 1px solid #7d786c;
color: #666666;
}
ul#main_menu .selected {
background-color: #CCCCCC;
border-bottom: 1px solid #5a5548;
color: #fea849;
font-weight:bold;
}
ul#main_menu .down {
background-image:url(images/icons/plus16_disabled.gif);
background-repeat:no-repeat;
background-position:130px;
}
ul#main_menu .down:hover {
background-image:url(images/icons/plus16_disabled.gif);
background-repeat:no-repeat;
background-position:130px;
}
ul#main_menu .down_open {
background-image:url(images/icons/minus16_disabled.gif);
background-repeat:no-repeat;
background-position:130px;
background-color:#DDFADA;
border-top: 1px solid #a29e91;
border-bottom: 1px solid #7d786c;
color: #666666;
font-weight:bold;
}
ul#main_menu .down_selected {
background-image:url(images/icons/back16.gif);
background-repeat:no-repeat;
background-position:130px;
background-color: #CCCCCC;
border-bottom: 1px solid #5a5548;
color: #fea849;
font-weight:bold;
}
ul#main_menu ul {
color: #231f20;
margin: 0; padding: 0;
border-bottom:1px solid #8a8477;
}
ul#main_menu ul li {
list-style: none;
margin: 0;
padding: 0;
}
ul#main_menu ul li a {
color: #666666;
text-decoration:none;
padding:6px;
padding-left:14px;
padding-right:4px;
width:130px;
display:block;
border:0;
background-color: #CCCCCC;
border-top:1px solid #e4decf;
font-size:11px;
}
ul#main_menu ul li a:hover {
color: #111111;
background-color:#DDFADA;
border:0;
border-top:1px solid #e4decf;
font-weight:normal;
}
ul#main_menu ul li .submenu-down {
color: #ffffff;
background-color: #7e755c;
}
I'm trying to build a site: http://smith.incyberspace.net/temp/ I left the CSS in the HTML course so you can read it easily. here is those container CSS if you don't wanna view source (i wanna make it easy on you Code:
#container { width: 900px; margin: 0 auto; }
#content { background-color:#333333; background-image:url(content.jpg); width: 640px; opacity:.40; float: left; margin-left: 120px; border-left:groove 5px #003366; border-right:groove 5px #003366; }
#showcase { width: 185px; margin-top: 23px; position:fixed; z-index:99;}
The idea for design is simple enough but I can't get the one DIV (layer) in the same place on IE as I have in Firefox The background stays where its suppose to The middle layer scrolls like it should The top image that is suppose to stay stationary does... but only lines up where i want it to in Firefox (in IE its WAY off to the right)... I dont know if this can be handled with IE only code, but I am hoping it doesnt come to browser specific hacks.. Im actually hoping i just messed something silly up Any and all help is appreciated... I been banging my head off the wall for hours. p.s. i know there is an opacity issue in IE too, but thats not nearly as impt as this one Thank you! Hey guys i've got a problem that I just can't figure out a solution for, i've attached a screenshot of the design. Basically there are various textboxes arranged in two columns, but their backgrounds (glows/curves behind the boxes) are causing me problems. The width of the design with the curves is larger than my target resolution (1024x768). I've tried playing around with margins but it makes the design generally very inflexible (all boxes have to be non-expandable that way). Is there anyway anyone can think doing this without a) having the minimum with of the website at 1200px b) positioning the boxes absolutely Cheers Hey All!!! K to everyone that has looked at my other thread, this is a totally different site with a totally different problem. Stupid problem though. tri-m.com/test/eng/ The site looks perfect in FF and IE7 but in IE6 you will see the problem. The divs with height:1px are displaying as divs with a height of 18px in IE6. URGG IE6 should be banned!!!! - Jacenta 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? Need help with layout, picture attached. I need the footer's end to be at the level of the sidebars end unless content is too long and in that case it would expand in height. In other words there has to be a min height for content so footer wont go any higher than in the picture, but will go down if content expands. Any tips on how this needs to be done? Hi, How do I position "new.gif" on the same line as text "some subject here" ? Right now "new.gif" appears on right side as intended but underneath text. Code: <td><a href="">some subject here<span style="float:right"><img src="new.gif" alt="New" width="30" height="10" align="middle" /></span></a></td> Thank you. Hi I want to achieve this layout using CSS http://www.premier-resin-systems.co.uk/layout.jpg I want it to be 3 columns, but as you can see the navigation part overlaps the red background image that I was going to put in my header div. I would like some help if poss on how to put this design into divs before I plough staright in!! Thanks for any help or advice! 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. 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;
}
Hello, I am creating the base design of a web site that consists in two horizontal bars: Navigation and Intro. "Navigation" will contain the menu. "Intro" will contain two items: a logo (image) on the left and a banner (flash) on the right. In this moment I have the following: http://www.27lamps.com/Beta/Bar/Bar.html I am not sure if using a background image is the best way to do this ... ... it seems to me that since the two bars are two different sections then I should use two divs. So the questions I have: 1. Should I use two divs, one for each bar, and setting the line- height in em instead of using the background image? 2. How to place side by side the logo and the banner and centered them vertically? 3. I would like the Navigation and the Intro bars to have a minimum height. Thanks, Miguel 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 heyya, I'm doing a quick layout, and I'm running into some problems with my floating menu. Code:
<!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" xml:lang="en">
<head>
<style type="text/css">
body {
margin:0;
padding:0;
background-color:white;
font:normal 1em/150% Verdana,Arial,sans-serif;
}
#container {
width:750px;
padding:0;
margin:0;
background:#FAA;
}
#contents {
width:566px;
margin:10px 0 0 162px;
border:1px solid #999;
border-bottom:none;
padding:10px;
background:#FFF;
}
#contents p {font-size:80%;line-height:150%;}
#menu {
width:160px;
background:#FFA;
margin:0;
padding:0;
float:left;
}
img {border:none}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit. Iriure nostrud qui, vulputate ut aliquip at, amet ut, erat, consequat autem. Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
</div>
<div id="contents">
<a href="#"><img src="bedroom-furniture.jpg" width="566" height="250" border="0" alt="" /></a>
<h3>Welcome to mook</h3>
<p>Wisi te quis lobortis dolor vel hendrerit consequat ex. Nulla hendrerit ad et. Praesent adipiscing nostrud dolore, feugait velit dolore dignissim. Aliquam blandit consequat ex blandit praesent hendrerit. Commodo in nonummy suscipit facilisi lorem ullamcorper dolore vulputate ea, ullamcorper eum duis delenit.</p>
<p>Facilisis sit lorem te illum suscipit zzril. Dignissim illum, duis accumsan. Et, duis enim euismod wisi commodo elit amet. Hendrerit nulla luptatum dolore tincidunt nulla nulla minim velit feugait accumsan, dolore minim, feugait nonummy, elit vero erat.</p>
</div>
</div>
</body>
</html>
readers digest version: I have a 750px container. My content div is 566, plus 2px for the border, plus 20px for the padding. Giving it a margin-left of 162px gives us a grand total of 750. IE seems to hate the padding - when i modify that it works fine - even changing the margin doesn't do anything. and there's an extra 2px between the menu and the contents just in case. So I can't figure why it's bumping down in IE. and i'm using v6, and have the doctype declared, so it shouldn't be in quirks mode. TIA, Greg 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? :/ Hi, i've just started using css and have noticed a small problem in my code - i get a white bar above my header, but i'm not sure how to get rid of it. It only appers in firefox and not ie. my code is index.html Code:
<!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>Computer Aided Cookery</title>
<link href="wecook.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- container -->
<div id="container">
<!-- start wrapper -->
<div id = "wrapper">
<!-- start header -->
<div id = "header">
<h5> BANNER GOES HERE</h5>
<h5> BANNER GOES HERE</h5>
<h5> BANNER GOES HERE</h5>
<h5> BANNER GOES HERE</h5>
<!-- start nav -->
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<!-- end nav -->
</div>
<!--end header -->
</div>
<!-- end wrapper -->
</div>
<h4> Copyright xyz.co.uk. 2006-2007 All rights reserved </h4>
<!-- end container -->
</div>
</body>
</html>
css file Code:
/* general html element formatting */
html, body, table {
font-family: verdana, arial, sans-serif;
font-size: 7pt;
color: #000000;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 10px 10px 10px 0px;
text-align: center;
}
h1 {
font-size: 150%;
margin-top: 0px;
}
h2 {
font-size: 130%;
}
h3 {
font-size: 110%;
}
h4 {
font-size: 100%;
}
h5 {
font-size: 100%;
color: #FFFFFF;
}
#container {
background-image: url(images/background_gradient2.jpg);
border: 1px solid #000000;
}
#wrapper {
width: 760px;
height: 600px;
background-color:#FFFFFF;
margin:10px auto;
border: 1px solid #000000;
text-align: left;
}
#header {
width: 760px;
background: #242424;
}
#nav {
border-bottom: 1px solid #000000;
}
#nav ul {
padding: 0;
margin: 0;
background-color:#242424;
}
#nav ul li {
display: inline;
padding: 0;
margin: 0;
}
#nav ul li a {
font-size: 120%;
color: #FFFFFF;
background-color:#778899;
text-decoration: none;
padding: 0px 25px 0px 25px;
border-right: 0px solid #000000;
text-align: center;
width: 9em;
}
#nav ul li a:hover, #nav ul li a:focus {
background-color: #990000;
}
please find attached a screenshot in firefox. Any help is appreciated. thanks! |
|||||||