|
CSS - Feedback Regarding My First Css Layout
sup friends,my goal with this site:
http://poolghost.com/blargh/index.htm was to learn about how to make a css layout with no old school html tables..the basic layout template was from some glish.org or something i cant remember....my site is xhtml1.0 valid transitional,see rant below if necessary..i used browser safe colors according w/ some cool chart at w3.org...basically i am looking for any feedback regarding stupidness in my index.htm and all.css file that might cause the site to not work properly/etc. i am used to working with %'s, not widths and heights in this css stuff. in the http://poolghost.com/blargh/all.css file i have commented out some lines that allow you to see the layout in a tabular form, e.g. white borders/boxes, etc. minor rant: after hours of work i finally got the stupid thing xhtml 1.0 transitional. i must honestly say i hate all this br with a forwardslash at the end crap. it took me so long to figure out how to fix my br's. also, is there really any point to closing img tags? this all seems so pointless and only makes your html documents larger and more bloated. if there is actually a point to this stuff, please explain, i am very willing to learn.. so any feedback or whatever is welcomed..i spend most time in the c++ forums,thats my thing and im going to be putting c++ source code for my projects on the poolghost site eventually.. peace,--c0ldshadow Similar TutorialsHey guys, I'm a complete amateur and I've just now finished finished my first CSS design. Just wonderin' if any of you CSS peeps would give it a quick review for me. www.cybersexchat.com Please note the website's fake -- I just happen to like gamin' And if you click any links on the page you'll be re-directed to the atspace -- it's one page long. Kind Regards Mike http://www.cyclomedia.co.uk/?24 took a couple of days to debug for major browsers, the horizontal version doesnt work in ie (even if you fully merge the CSS). if anyone knows what the problem is there then it'd be good to know. what is interesting is that if you look at all the sub menus in IE and then switch to the horiztontal version they work correctly... i think it's something to do with trying to place an absolutely positioned element outside of a float that is also position:relative! (overflow: visible doesnt help BTW) the source is overly spread out and commented, eventually i'll produce a more compact source for both versions. note: the html is the same for the horizontal and vertical versions! one day i'll update my site to be more blog like, allowing comments for each article... one day! edit: atricle/article edit: fixed the IE bug, needed another work around for the general lack of support for the child selector, basically the root menu items need to be floats, but everything below that doesnt. Hello, Have decided to use a frames emulation technique that I unearthed on the web (refer to the code for sources), have tested it on IE5 IE6 and FF but not mac. It's at http://uk.theliving.net Would like some opinions on the code. Anything that looks like a no no. For simplicty I have left all the css code in the document. But even when the lower css sections are removed the technique calls for a fairly large chunk to stay at the top. Anyone know of a better solution that conditionally directs the browser on a per browser basis?Of course to do this you would have to get the order right and all the statements in a perfect flow (Of course the noscript part would need to stay). Anyhow any feedback on any of the code or slimming it down would be much appreciated. Gregory 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 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'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 there. I need help creating a certain layout. I need div borders around my layout, but without content inside them the background image is not seen. How could I resolve this without changing height:auto Thanks in advance 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 thanks Hi everyone- I'm new here and am a newbie with CSS layouts. I'm having trouble with certain elements on the page that I was wondering if someone might be able to take a look at my code and html file. I'll trade graphics services for a few minutes of your time if neccesary. Hopefully someone can let me email them I'll give mine as well I'm sure it's easy to find on my profile. Thanks in advance for any help. 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. 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; } tiny pic .com/nqb f9i.png Hey, I'm super sorry for the url but that's the ONLY way you guys will know what I'm talking about. Obviously I'll be doing the more advanced graphics later. Please answer the following questions: I would like the white and the yellow to go on for the rest of the page (no matter how big your monitor is). How would I do this? I also want the green and the dark blue to stretch if I were typing more and more. (I know I would have to save the bottom of the sections of those images and the middle if I were to do this.) And I need this to be completely centered on the webpage. Overall, I can handle the rest. So what attributes/properties do I have to study to get this to work? If you're feeling super nice you can code it for me. ;D 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;
}
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 Attached is my html page and my css file. The css is a template i got off ssi-developer. I'm changing it around a bit to fit my needs. The way I have the page now is fine I'm just curious to know if I can do this one thing. What I'm wondering is if I have to make different classes for the multiple rows that I have. Is there a way I can make the same layout without making all the rows. Once you see my files you will get a better understading of what I'm trying to accomplish. The site I'm working on is located at the following address: http://www.solinari.net/div.php On the left, the navigation is in two pieces - a left and a right piece. I need to have both pieces extend to the bottom of however long the page is. The bottom div's of both pieces of the navigation each have an image repeating vertically, my question is how to get the div to extend to the bottom of the page. Any help would be greatly appreciated. Regards, Solinari I'm trying to figure out if the following layout is possible using css such that it will appear correctly in all "major" browsers: lab.wx3.com/cssprob/layout_challenge.png (sorry, I'm a new user so I can't post the http part) The center column should be fixed width, 100% of browser in height. Values marked as "fixed" would have a defined pixel size. Values marked as "fluid" would fill available space. I know this layout can be done with tables, but I'm at a loss to figure out how it can be done in css. |
|||||||