|
CSS - Formating, Layout, Tables, Confusion In Css
Everytime I think I am getting the hang of CSS -- for simple pesonal homepages, etc -- they still always seem to get the worse on me. I am trying to generate a moderately simple page with title, prelude, menu (as per a table) with menu, content and comment box, followed by a quick sumary, etc. I seem to be having troubles getting the three -- menu, content & comment boxes -- to size correctly. I have a surounding box (by a div) for them, but they do not seem to entirely follow/use it as their parent... If I set them to top:0, it is the top of the window frame, but otherwise they seem to position within their more local parent div. Ultimately, I am striving to get into this CSS way of 'life', but it is very difficult as I am working mainly alone. I do have books but perhaps I am not seeing the info entirely correct... Perhaps some of you chaps/gurus can help me here. I have recently gathered that "html" is or should be used in the CSS file too...? Looking for help. My current (broken) home page can be accessed via: "dgringo.homeip.net/~dgringo/index.shtml" Here is the code and the CSS file: <head> <title>...</title> <script language="JavaScript" type="text/javascript" src="main.js"></script> <link rel="stylesheet" href="entry.css" type="text/css" /> </head> <body> <h1>Me (iMac's) Web-space</h1> <div id="prelude"> <!--#include virtual="includes/header.incl" --> </div> <table id="main"> <tr> <td id="menu"> <!--#include virtual="includes/menu.incl" --> </td> <td id="content"> <!--#include virtual="includes/body.incl" --> </td> <td id="topics"> <p> <!--#include virtual="includes/topic1.incl" --> </p> <p> <!--#include virtual="includes/topic2.incl" --> </p> </td> </tr> </table> <div id="footer"> <!--#include virtual="includes/footer.incl" --> </div> <div class="adendeum"> Last updated <!--#echo var="LAST_MODIFIED" --><br /> </div> </body> </html> ------------- The CSS file now follows: a:link {text-decoration:none;color: black;} a:visited {text-decoration:none;color: black;} a {color: black;} a:hover {text-decoration:underline;color: silver;} body { color: #000000; background: #669999; } h1 { text-align: center; } #prelude { width: 80%; background-color: #CCCC99; margin-left: auto; margin-right: auto; padding-top: 3px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; text-align: center; } #main { display: block; width: 100%; border: silver dotted; height: 16em; } #main td { border: dashed; } #menu { position: absolute; width: 20%; left: 2%; } #content { position: absolute; left: 23%; width: 50%; } #topics { position: absolute; left: 74%; width: 20%; } p:first-line { color: gray; background-color: green; } #footer { text-align: center; width: 80%; background-color: #CCCC99; margin-left: auto; margin-right: auto; padding-top: 3px; padding-left: 10px; padding-bottom: 3px; padding-right: 10px; } .adendeum { font-weight: lighter; color: gray; text-align: center; } Similar TutorialsI just changed my website layout from just tables to CSS but theres a few problems, nested tables dont stop at the border of the containing table they hover over them, and one of the tables that was meant to be another column moved out of the table altogether heres the site before and after i edited it: Before After I was told to divide it up like this Code: <body> <div id="wrapper"> <div id="header">Header</div> <div id="body"> <div id="nav">Nav</div> <div id="content">Content</div> </div> <div id="footer">Footer</div> </div> </body> Can anyone see what the problem is? So I've decided to go the 'pure css' route other than my tables for tabular database content. I had most of the 'positioning' finalized when I ran into a huge trouble . . . how to make a border image repeat and place it properly. After getting frustrated with the border, I decided to use one simple table just to get the borders correct. Everything was fine there even though I didn't want to give in to the table temptation. That is until I tried to add my suckerfish dropdown and have it centered. So now I'm stuck. My site is turning into a table based site and I'm really annoyed that I can't fix it myself. I've had trouble with coding before, but I always manage to fix it myself. Can somebody please point me in the right direction? I've been searching these forums and the web for 2 days and not a single example can be fine tuned into my solution. [edit] p.s. I know the css and html is a mess right now. I'm going to clean it all up once I get something working =/ http://www.mytreetv.com/showcase/index.php css Thank god I'm doing this site for free as a favor to a friend of the family instead of a paying job. I'm using what seems to be called a "liquid two column" CSS layout. Its a main column of 100% width left padding the width of the side bar. In the main column, I need to use table, but I'm stumpt on how to insure it doesn't extend beyond the right edge of the main column div. Can this be done? Since the side column is 200px, the main column has a left margin of 200px. So this means a table with a width of 100% actually extends 200px past the right edge of the main column. Playing with the right margin of the table seems to be the right direction, but just not sure how to make the table fill the space right, and work the same in bot FF and IE. Any ideas? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
#container
{
width: 100%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#leftnav
{
float: left;
width: 250px;
margin: 0;
padding: .5em;
}
#content
{
margin-left: 250px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#leftnav p { margin: 0 0 1em 0; }
.testTable {
border: 1px solid gray;
margin-right: -283;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="leftnav">
<p>
Side Column
</p>
</div>
<div id="content">
Stuff Here
</p>
<table class="testTable"><tr><td>eeee</td></tr></table>
<p>
Stuff Here
</p>
</div>
</div>
</body>
</html>
[edit] The purpose of the table will be to display row data from a DB. This was formerly another post. Making progress and almost there. I have a website under develepoment... My site I have 4 problems. 1. and most important in IE but not in FF the bgimage is showing through the margin or padding, im not sure which of the last image being displayed.. How do I get that out of there. Comes across as a red line after my top gutter. 2. The banner image and gutter images seem to move over to the right by 1px in both browsers. 3. How do i get the left container div to go all the way down the page. 4. How do i get the secondary navigation in the footer to align with the centercontent div and the rightcontent div but not the left content div. any help would be appreciated... I would appreciate any advise as to whether this degrades properly as the browser is narrowed. I didn't post this in the "critique" forum because my only concern (right now) is related to CSS. There is a separate style sheet for handhelds, so if you have one I would appreciate a look from there also. Most links are still inactive. Liquid design TIA, Rob Hi Guys I have a series of <li></li> within a <td> The problem is that the lists are far away from the left side of the table hence causing all the information to spread over to the next line. Is there tweak for this to make the <li> info be closer to the left... Thanks Didi I have a left nav that I'm trying to squeeze as much text in as possible in 155 px. In IE FF/MOZ this is working fine by using various combinations of letter and word spacing. Opera 7 just seems to ignore most of it. Code:
#section_nav div a{
font-size:.9em;
color:#fff;
font-weight:600;
text-decoration:none;
display:block;
width:100%;
height:100%;
letter-spacing:-.5px;
}
*html #section_nav div a{
word-spacing:-1px;
letter-spacing: -1px;
}
if I take out the *html it works in opera but then looks bad in FF is there any hack to show only to opera? or is there something to hide from FF/MOZ See the current solution here ... What I would like to do is dump the table, so that the images and captions wrap at screen width. I have been experimenting with CSS and <span>s but as yet haven't managed a similar formating. And ideas/solutions/pointers would be greatly appreciated Chris Jones URL Hey everyone, I'm working on developing a small CMS, as a project to help push myself into actually completing something and would jsut love some insight into how to clean up some of my CSS. At the moment im not satisfied how im formating the CSS stylesheet. For example Im working with nested divs, in this case for one component of the site, and I find I'm repeating certain perameters that could be avoided, but I'm unsure how to do that. Example Code: PHP Code: echo '<div id="article">'; echo '<div id="article_header">'; echo $row['news_title']; echo '</div>'; echo '<div id="article_content">'; echo $row['news_content']; echo '</div>'; echo '<div id="article_footer">'; echo 'Add Comment'; echo '</div>'; echo '</div>'; CSS: Code:
#article {
margin-bottom: 8px;
border: 1px #1D1D1D solid;
padding: 5px 5px 5px 5px;
background-color: #4C4C4C;
}
#article_header {
padding: 5px 5px 5px 5px;
background-color: #1D1D1D;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
}
#article_content {
padding: 5px 5px 5px 5px;
background-color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
}
#article_footer {
padding: 5px 5px 5px 5px;
background-color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
text-align: right;
}
To summarize my question, is there a better way of formating my CSS and how would I do so? I'm trying to align one div to the bottom inside of another, and a third div to just beneath that one. Since the third div will appear on mouseover, it needs to lie on top of other content that will already be there. I've tried various combinations of positioning, setting margins, etc., but I can't figure out a solution that will work in all the browsers. This is just the bare bones so that you can maybe see what I'm trying to achieve here.... Confused? Yes, me too; Here's the html: Code: <html> <head> <link href="test2.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="widebar"> <div id="tabs"> <div class="menu1">I want these</div> <div class="menu2">to align to the</div> <div class="menu3">very bottom </div> <div class="menu4">of this div </div> <div id="tabs2">Align this to the bottom left corner of the Tabs 1 section so that it shows up just below the dark blue area</div> </div> </div> Here is some text that will sit below the these divs and I don't want the mouseover to "push" this text out of the way. The div that appears on mouseover should sit "on top" of this text with no interference. </body> </html> And here's the css, thus far: Code:
/* css */
#widebar {
width:100%;
height: 200px;
background: #ffccff;
}
#tabs {
float:right;
display:block;
#position: absolute;
#bottom:0;
height: 200px;
background:#334ddd;
width:50%;
}
#tabs2 {
clear:both;
#position: relative;
#bottom: 0;
background: #567dfe;
}
.menu1, .menu2, .menu3, .menu4 {
float:left;
width: 100px;
background: #ccc;
}
Hi There - Am having some confusion with CSS inheritance. I'm working with a Drupal where I don't have control over the html output and everything seems to have extra layers of divs generated by the cms. I have a large container div with id=forum. Nested inside a table inside that div are more divs. Inside of that I have links inside a div that has class=name. Like this: Code: <div id="forum"> <ul> </ul> <table> <thead> </thead> <tbody> <tr class="odd"> <td class="container" colspan="4"> <div style="margin-left: 0px;"> <div class="name"> </div> <div class="description">Containers that will look OK as and when we decide to use forum Containers.</div> </div> </td> </tr> <tr class="even"> <td class="forum"> <div style="margin-left: 30px;"> <div class="name"> <a href="/forums/samplecontainer/sample-forum-for-sample-container">Sample forum for sample container</a> </div> How do I address these so that only the links within the forum are affected by this rule? The following rule is affecting all of the links in the whole site, no matter what the id or class. I thought I understood how to address these, but it's clear to me now that I don't. I'd appreciate any help I can get with this. Just to be clear, I'm trying to address the text that says 'Sample forum for sample container' in the very last div in the code above. Here's what I was trying to use: Code:
#forum .name a:link, a:visited, a:hover {
color:#F79239;
}
I've also tried permutations; #forum.name a:link etc. I don't want to be 'lucking' into something that sorta works. I really want to nail this. Hi all, first post to the forum after signing up over two years ago... I work mostly on the server side, so I'm hoping that someone can advise me on the trouble I'm having with CSS. http://www.commafruit.co.uk/play/css/imageplace.html In the link above, I have two images, both with the following css: Code: <img src='planet.png' style='width:5; height:5; position:relative; left:20px; top:10px;' /> <img src='planet.png' style='width:5; height:5; position:relative; left:20px; top:20px;' /> Please could someone explain why they are not in line vertically? They both have left:20px, so surely they should be one on top of the other? The fact that this is not the case in Firefox or IE makes me think I'm really missing the point, and I've been going around and around trying to figure out what. Thanks for any replies. Also, I'd prefer not to use absolute positioning as I'd like to keep the images relative to the div. B. Hey, I have the following in a CSS document: Code: /* Link Colors */
a:link { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #888888; }
a:active { color: #000000; }
/* User Class colors */
.classadmin { color: #FF0000; font-weight: bold; }
.classmod { color: #0066FF; font-weight: bold; }
.classmember { color: #00CC00; font-weight: bold; }
In the Active Users section of my site, I link to the user's profile, and I would also like the color of the link to be the color of the user's class. My HTML code is: Code: <a class="classmember" href="user.php?id=1">$username</a> But, I also have a Color Key: Code: Color Key: <font class="classmember">Member</font>, <font class="classmod">Moderator</font>, <font class="classadmin">Administrator</font>. I thought I could do something like: a.classmember:link { color: #00CC00; font-weight: bold; } But that messes up the Color Key. So, I don't know how I can have the .classmember, .classmod, and .classadmin override the a:link {} pseudoclasses. Thanks for any suggestions! Hi everyone! I'm taking my first CSS class and am running into some problems formatting a table. Specifically getting the rows to line up center along with the table headings. Well, except for the first one that should be left aligned. This is my validated CSS code: Code:
.cell-alpha {
font-size: 25px;
background-image: url('headercellbackground.png');
color: #FF9933;
width: 85%;
}
.cell-bravo {
font-size: 25px;
background-image: url('headercellbackground.png');
color: #FF9933;
text-align: center;
}
tbody tr.odd {
background-color:lightyellow;
color: red;
}
tbody tr.even {
background-color:red;
color: white;
}
tbody tr.total {
background-color:#6699FF;
color: yellow;
}
table {
table-layout: fixed;
width: 700px;
}
How would I get each column centered since the data is entered in table row sections? Also, how to get all of the headings to line up baffle me. This is how it SHOULD look : URL And this is how its rendering with my CSS: table Hi I want to create a text rollover menu on the very left hand side only (standard display). I want it in a table so I can have content on right hand side. I don't know whether to have each link in its own cell or 1 big cell and have a list of items. I decided to have a list of items but the items display on right side of the table cell and align left doesn't work. Code:
a {
display: block;
width:100px;
text-decoration: none;
}
#list1 { /* all list items */
background: lightblue;
border-width:1px; /* thin is not the same in different browsers */
border-color:black;
border-style:solid; /* required */
list-style-type:none;
}
I just want the list to display on left hand side and have a box around each item which it isn't. I am spending way too long fiddling about with this . I am having trouble understanding what exactly the CLASS, ID, DIV, and SPAN elements and attributes do. What are there purposes? How do the relate to each other? When should one be used and not another? In laymens terms please. Thanks Hi there, thanks for reading my post. I am looking to build a website using ASP, with databases. After receiving some advice from some (more experienced) friends, they recommended learning CSS. They said something along the lines of "its better than using frames because Search Engines will index your site better and you will have more control over your pages - changing one style sheet can change your whole site easily". I thought it sounded like what I need as I am hoping to produce a fairly professional looking site, however I am still a little confused. I am unsure if this is a "webdesign" problem, so forgive me if I have posted in the wrong place, but I am interested to know how navigation menus are made. What I mean is, I dont understand how to make a menu on the left of the page control the right panel of a page without using frames . I have spent some time reading the (70) examples on www.w3schools.com but I cannot seem to find the answer - so now I am worried that it cannot be done!! If anyone could perhaps paste some quick code for me to look at/reverse engineer or, equally useful, perhaps give links to a few tutorials/web resources on this I would be very grateful. Another question if I may (?!) - when designing navigation menus (top or left or whatever), is it best to use text that highlights to make the links to navigate the site, or to make the links into pictures (i.e. have a whole menu created from small buttons aligned underneath each other). I hope my question is clear. Thanks to anyone who can help, Regards, Porky Hi, okay I am working on a website for a friend, and it is peak-performance.biz I want the background image to fill up the page and be unscrollable. I made it work and look very good in chrome but it only takes up half the page in firefox. I was wondering if anyone have any ideas how to fix this. Thanks for your advice in advance. I have used html{ background-color:#000000; background-image:url(images/background.jpg); background-repeat:no-repeat; background-size:1300px; height:1000px; background-attachment:fixed; } and html{ background-color:#000000; background-image:url(images/background.jpg); background-repeat:no-repeat; background-size:100%; background-attachment:fixed; } 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. |
|||||||