|
CSS - Goodbye Css - Welcome Back With Open Arms Tables
Yet another question about CSS layout. All I want is a block that encloses three others on the left (title), centre(description) and right(image) of the encapsulating block. I can do this with my eyes shut using tables but after several frustrating hours scanning online CSS tutorials, tryng DIV, SPAN, float left/right/AnywayAtAllAndPleaseDearGodWorkThisTime, I'm still no nearer the truth. Code:
<HTML>
<HEAD>
<style type="text/css" media="screen">
.header {
background-color : #E7D69C;
font-family : verdana, "trebuchet MS", "MS sans serif", sans-serif;
font-size : 1.1em;
color : black;
border : 4px #CCDFCC groove;
margin-left : 5%;
padding-left : 0.2em;
padding-right : 0.2em;
width : 90%;
}
.headerTitle {
float : left;
width : 33%;
position : relative;
}
.headerDescription {
float : left;
text-align : center;
width : 33%;
position : relative;
}
.headerImage {
text-align : right;
width : 34%;
position : relative;
}
</style>
</HEAD>
<BODY>
<DIV CLASS="header">
<DIV CLASS="headerTitle">
Title
</DIV>
<DIV CLASS="headerDescription">
Description
</DIV>
<DIV CLASS="headerImage">
Image
</DIV>
</DIV>
</BODY>
</HEAD>
Can anyone stop my slide back into tables? Similar TutorialsI'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
Following my previous post ( http://forums.devshed.com/t243381/s.html ) I'm going back to basics with http://alphaworks.co.uk/problems/divs/ to try and get things straight with the more complicated designs. What is the 'right' way to achieve this layout? Is it possible to do it without using "position:absolute" and have it all flowing naturally? All advice appreciate! Thanks, Geoff Please Help me. I have a some small problems on Css. I used background image. when windows are 1024*786 resulation then everything is okey. but when i changes resulation 1280*1024 now I have see this background problem personal.infinitedesigner.com/table.html See this link and please help me. I want to solve this problem. Thanks. Hi all, I seem to be having some problems between FF & IE i have the background image set at 100% in CSS and it works fine in IE but if you look at it in FF there is some of it missing.. Here is the script If you look at it in IE first you will see what it is meant to look like.. Code:
/*
* Main Background
*/
#main-body {
margin: 0px auto;
width: 999px;
height: 100%;
background: url('./images/bricks.jpg') 100% repeat;
}
So what am i missing ? I moved internal css to an external file and then linked the page to that file and lost my hand cursor on links. How do i get it back. Right now the arrow cursor remains when links are rolled over. Can be viewed at. kopertone.com/newsite/index1.html Also, in fire fox, I want dotted lines under my text links when rolled over, but not image links; how do I remove the dotted lines under my image links? Thanks! Hi all, I am trying to re-create my web site, replacing Frames with CSS. I have a tree menu on one of my pages. Does any know how can I bring the functionality of master frame i.e, opening the link in the content pane? Hi, Is this the correct way to create Open and Close Link with image background? it does not seem to work for me. Image is not displayed properly. Code:
<style type="text/css">
span.open{background-image:url('img/open.gif');background-repeat:no-repeat; width:20px}
span.close{background-image:url('img/close.gif');background-repeat:no-repeat; width:20px}
</style>
<a id="toggleLnk" href="javascript: toggleOpenClose()">Open This<span class="open"></span></a>
function toggleOpenClose() changes the class name and text as follows:
<a id="toggleLnk" href="javascript: toggleOpenClose()">Close This<span class="close"></span></a>
hey i was wondering if i can add a scrollbar area to my page and have the links only open in that area instead of going to a different page hello I am currently working on a website with a template from mambo open source. Unfortunately there are some icons built in the css that are rather ugly to look at. Would any one of you know how to hide them? thank you and regards, schnauzer Using percentages so I can leverage .css when the page is printed. so... I have div with a background image. the image has a round off top-right corner. when i increase the percentage size, id like the width to grow from left to right so that the top right of the background image is always in view...no matter how wide or narrow the width of the div. Is this possible? Is there a way I can have a div on my page that does not expand the window area (creating scrollbars) when the browser window is too small? I ask because I have a three-column layout, but the left and right columns are merely aesthetic-- they hold no content. The center column is 1000px, which is my limit. So if a user has a screen resolution of 1024 pixels wide, I don't want the left and right columns to cause there to be scrollbars. If my far-left and far-right column divs weren't a set width, that would solve my problem-- but then I need multiple background-images, which is only compatible with Safari. I could also make the <body> have "overflow:hidden", getting rid of scrollbars altogether... but then the valuable content on the middle column would be hidden if the browser window is too small-- plus you wouldn't be able to scroll down! Any ideas? I have links like this: Code:
<a href="dosomething.php?action=add&s=A-9&PHPSESSID=cb55242c6d177734ab45f07ad821b7ad"
id='A-9'
title='A-9 status=sold'
>
<img src="http://example.com/images/x.gif" height="21" width="15" border="0" ><i>A-9</i></a>
The problem is the image overlays the element where the tooltip is so when you mouseover the image area the tooltip doesn't happen. I can't just move the tooltip to the image element because I have a javascript that makes the tooltips really nice looking, but it is written for links I've tried fooling around with the z-index, I set it really high in the style id for the div that wraps these elements hopefully to bring them in front of the images. But it didn't do what I want. Any suggestions? You guys are great! Slowly I am getting my head around this css stuff. After I'm done paying the initiation fee (much headscratching and experimenting) I'll be one of those people too who goes around not being able to explain why css is so cool, just trust me it is. Does anyone know of some good tutorials on how to use CSS rather than tables? If so, could you providea link. Thanks a lot. andrew **FIXED** Ok moving my site from tables to CSS in my spare time at work but im having some difficulty with height attr. Click me The Left and right bars - I would like them to go all the way to the bottom of the page. If anyone can help - please let me know! Thanks! Edit: Got it to work in Firefox just fine - but IE6 is still giving me problems. Edit #2: *sigh* needed to set body to 100% - man IE is bass-ackwards. For some reason the following HTML & CSS code do not render the same result as the code listed below it: CSS - Attached Style sheet Code:
td.style1{
background-color: #FFFFFF;
border-top: 1px solid #AAAAAA;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #AAAAAA;
}
HTML Code Code:
<table>
<tr>
<td class="style1">Some content to display</td>
</tr>
</table>
HTML (Intended display) Code:
<table>
<tr>
<td bgcolor="#FFFFFF" style="border-top: 1px solid #AAAAAA; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #AAAAAA;">Some content to display</td>
</tr>
</table>
Why wouldn't any browser follow the CSS in the stylesheet? Hey Guys, Hope you are all OK! I've been away abroad for a bit and now its back the the manic life here Has anyone got any good examples of creating pretty tables using CSS? I am ideally looking to to something that maybe has alternate colors on Columns and rows and changing colors where they cross?>!? or something equally as good for looking at data! Any links to examples would be great! Charlie Hello all, I have a site which I am working on right now and there is going to be text on the right side, and 3 rows on the right which on the top there will be a page banner, on bottom, just a picture, and i want to repeat the background colors on the other side. Kind of confusing to explain but he brandyn.garlic.com/headstart/aboutus.html Thats a page on the site, as you can see, there is a blank spot where I want a background to repeat but the size will obviously vary by the size of the content on the right. If someone could assist me with that, I would greatly appreciate it. Thank you, Brandyn Hi everyone, Dont actually know if this is possible (my css knowledge is way not what it should be!) Can I define a whole set of attriblutes for a table (fonts, links, hover links etc etc) and than just use it with <table class = "whatever"> etc and then that table will have all the properties I defined (for only that table, not for the rest of the page) if so how could I go about doing that. Any help is very appreciated! cheers Hi I would like to replace the tables that make up my page with CSS. I have a header, footer, left column and the main body. Do you know of a link to a tutorial that can help. Or perhaps you know the CSS code. Any pointers gratefully received.. Hi, I always used tables for my layout but want to change that to CSS. Problem is, I don't know how to get started thinking of the layout in css. I mostly make my pages centered with tables, can I do this with CSS? Does CSS use absolute position ? I was making a site with tables, but want to change that to CSS Know of any good tutorials (for people who used tables before) greets |
|||||||