|
CSS - Css Help Neeed. Aligning Icons In A Table.
I can't post URLs here, so please copy/paste the URL below.
Look at the "email to friend" and "post to facebook" links on this page (url) proofs.gentryfoto.com/p/rswedding/1281copy27 (/url). My goal is to: 1. underline the text only, not the icon. 2. center the icons over the large image on the screen 3. Have it look the same in IE and FF. Currently, the icons are in the same row in IE, but are breaking into multiple lines in FF. I want them all on one line. What am I doing wrong? I am doing all kinds of experiments but can't get this right. Thanks. Similar TutorialsWasn't sure if this was a CSS issue or an issue with the HTML. I am not using a DOCTYPE declaration, so that may also be the issue. I have a portion of a page where I want an image to appear. It is a static image that sits in between 2 scripts. When placed, in both IE and Firefox, there is a 1-2px white space between it and the next TD. The original code was like this: Code: <td width="144"> <SCRIPT> write_minorlinks_xml() </SCRIPT> <img src="images/site/database.gif"/> <SCRIPT> write_dblinks_xml() </SCRIPT> </td> Which makes it appear as this in either browser: I added a div into there so now it reads: Code: <div class="db"><img src="images/site/database.gif"/></div> Stats as follows: image width = 144px I've tried changing the TD, Table and Image attributes both in the CSS and in the HTML itself. No change. It is also important to show what the scripts do. You can't view it in the source but if you could, it would show up like this: Code: <td width="144"> <TABLE class="links" border="0" cellspacing="0" cellpadding="0"> <TR><TD class="minor_link"><span class="minor_link"> <a href="url" target="_top">name</a></span> </tr></td></table> <img src="images/site/database.gif"/> // </td> Also to note, the XML in the script name is in the name only. And the class "minor_link" does not exist. I am thinking that the extra space could be because of the code the scipts put in there. However, Since putting the image code into a div, I changed the background color to #FF7A7A (which is the pink color of the trailing edge of the image, which matches the border to the right of it.) As a result, Firefox now displays it as: Which is fine for cheating sake, but it still displays as the first image in IE. Here is the portion of the CSS that concerns the div (which has made no change in either IE or Firefox) Code: div.db
{
background-color: #FF7A7A;
padding: 0px;
margin: 0px;
}
Any help or ideas would be appreciated. http://www.gaminghybrid.com/cms_design/ I would like to get the top tab table (#top-tabs) and the sub tabs (#sub-tabs) centered, instead of the semi-left alignment they are in. What is the best way to go about it? (I've tried <center> and text-align:center) Also, as you can see in FireFox, the bottom bite doesn't go to the bottom of the other two content bits, but it does in IE. Any help is appreciate I have decided to move another of my sites over to css, but I seem to be stuck at the first problem. I have added a small code sample... What I am wanting to do is remove the table and acheive the same result with css and div tags. How can I align text to the bottom right with css like the sample code? PHP 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" lang="en"> <head> <title>Text aligned bottom right</title> </head> <body> <table border=0 height="90px" width="100%"> <tr><td style="vertical-align: bottom;background:white;text-align:right;"> <a href="">Home</a> | <a href="">About</a> | <a href="" >Contact</a> </td></tr></table> </body> </html> I seem to have messed up while slicing...If my font size is too large, it'll mess up my table positioning...I'd like to know if there's any way to align text to the bottom of a table collumn? Is there anything I can put in my style sheet to do this? Am I not being clear enough? Please help. EDIT : I've got a picture uploaded. See how on the left there's that white space? And under "Welcome" there's also a lot of space? I figure if I could align the text to the bottom, it'd fix both problems. =/ The problem that I am having stems from attempted compatability for 1. IE/other browsers, and 2. Not scrolling or having an absurd amount of dead space on different resolutions. Given that I'm currently using a 16:9 laptop, anything that I make for my resolution is very likely to scroll vertically on anything else. I would like to preface this by saying that, while I am a young person and am .. relatively web savvy, I'm also pretty miserable at CSS. I'll pick it up whenever I need to use it, but these times generally end up being a year plus apart, and so I generally .. forget everything that I picked up the last time, and have to re-learn. I am very good at nesting tables, and using an absurd number of them to get things to look how I want, but .. I really want to get away from that. CSS is cleaner and less .. well, less flat out dumb than using seven tables in one page to align things the way you want them? The Actual Problem I Have: (Do ignore the hideously coloured background, the green/blue combo is temporary until I get the code working properly. Anyway, so apparently I can't post URLs so: clocktock.com is the website in question, code on it is Code: <html> <head> <link rel="stylesheet" type="text/css" href="poing.css"> <link rel="icon" type="image/png" href="img/RL16.png"/> <title>[ eroding.net ]</title></head> <body> <table cellspacing="0" cellpadding="0" class="main" height="100%" width="100%" valign="bottom"><tr><td width=100% align=center valign="bottom"> <table border="0" cellspacing="0" cellpadding="0" height="90%"> <tr><td background="img/top_left.png" width=14 height=39></td> <td background="img/top.png" width=622 height=39><img src="img/top_left2.png" border=0></td> <td background="img/top_right.png" width=14 height=39></tr></td> <tr><td background="img/left.png" width=14 height=1></td> <td bgcolor="black" width="700" height="800" border=0 cellspacing=0 cellpadding=0 background="img/table_bg_grunge.png" valign="top"> <br><br> <center> aaa <br><br> </center> </td><td background="img/right.png" width=14></tr></td></table> </tr></td></table> </body></html> CSS Code: body { font-style: normal; font-variant: normal; font-weight: normal;
font-size: 12px;
font-family: Tahoma, Arial; background-color: #0F0F0F;
color:
#424242; background: url(img/damask.png);
background-attachment:
fixed; background-repeat: repeat; margin-bottom: 0px; vertical-align:
bottom;}
table { color: #424242; font: 11px Tahoma, Arial; margin: 0px;
}
sm {font-size: 0.9em; }
a:link { color: #424242; }
a:visited { color: #595959; }
a:hover { color: #424242; text-decoration:none; }
a:active { color: #424242; }
What I would, ideally, like to have is for the box to take a percentage of space. Say, vertically 80 or 90%, and then a blank remainder on the top. Horizontally, say, 10 or 15% on either side and then 70 or 80% for the "box." But, google as I might, I just can't find the right CSS commands to do it. It just gets funny looking and shrinks all my border images (Though I erased the code that caused that). http://www.kafadrian.com/juggernaut/index.html is what i have so far I want it to look like: http://www.kafadrian.com/juggernaut/layout.jpg The problem im having is that the image links that have mouseover effects dont align (touch) the blue bar below them and apparently in some browsers the image links themselves have gaps between them I spent hours, and yes im relatively noobish about all this, trying all sorts of different display commands and border/margin commands to try and get rid of any spaces, the way the site is now (10.01.08) is the best i could get it. in IE7 the mouseover images connect horizontally but not vertically with other images. am i going about this all wrong? my experience in building websites is mostly from the early eras of netscape when IE was new, back when you put stuff in a table a certain way with no cellpadding/spacing/border and everything aligned no problem. I appreciate any help with this as I undertand it will take time to give me an answer that no only makes sense (to me) but will work. the code for the site is: 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>Juggernaut - Monolith - Order</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">
<script type="text/javascript">
<!--
var image1 = new Image();
image1.src = "news1.jpg";
var image2 = new Image();
image2.src = "news2.jpg";
var image3 = new Image();
image3.src = "news3.jpg";
var image4 = new Image();
image4.src = "roster1.jpg";
var image5 = new Image();
image5.src = "roster2.jpg";
var image6 = new Image();
image6.src = "roster3.jpg";
var image7 = new Image();
image7.src = "forums1.jpg";
var image8 = new Image();
image8.src = "forums2.jpg";
var image9 = new Image();
image9.src = "forums3.jpg";
var image10 = new Image();
image10.src = "files1.jpg";
var image11 = new Image();
image11.src = "files2.jpg";
var image12 = new Image();
image12.src = "files3.jpg";
var image13 = new Image();
image13.src = "info1.jpg";
var image14 = new Image();
image14.src = "info2.jpg";
var image15 = new Image();
image15.src = "info3.jpg";
var image16 = new Image();
image16.src = "founded.jpg";
//-->
</script>
<script type="text/javascript">
<!--
function roll(img_name1, img_src1, img_name2, img_src2)
{
document[img_name1].src = img_src1;
document[img_name2].src = img_src2;
}
//-->
</script>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0">
<tr height="34">
<td rowspan="4">
<img style="display:block" src="juggernaut.jpg" width="560" height="110"/>
</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="index.html" style="display:inline-block"
onmouseover="roll('news','news2.jpg','text','news3.jpg')" onmouseout="roll('news','news1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="news1.jpg" name="news" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('roster','roster2.jpg','text','roster3.jpg')" onmouseout="roll('roster','roster1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="roster1.jpg" name="roster" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('forums','forums2.jpg','text','forums3.jpg')" onmouseout="roll('forums','forums1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="forums1.jpg" name="forums" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('files','files2.jpg','text','files3.jpg')" onmouseout="roll('files','files1.jpg', 'text','founded.jpg')">
<img style="display:inline-block" src="files1.jpg" name="files" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('info','info2.jpg','text','info3.jpg')" onmouseout="roll('info','info1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="info1.jpg" name="info" width="48" height="48" border="0"/>
</a>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="line_right.jpg" width="240" height="4"/>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="founded.jpg" align="right" name="text" width="144" height="20"/>
</td>
</tr>
</table>
</body>
</html>
I'm trying to reduce the amount of real estate that a form and button are taking up in my table. They are expanding the whole row and lining them up with the other contents isn't working in the CSS methods I've tried. Finally I tried reduce the font-size of the cell containing the form and button (all the way down to 1px) which gives the desired result... but I'm a bit concerned about implementing it into all the tables in the site because it seems a bit 'hacky'. Is there a better way to do this? My Webpage You'll see in the first table, final column containing the button, that the button and form and pushed up against the top of the cell and the other cells now have more padding. In the second table, my "font-size:1px" has been applied and gives the desired result. Just curious if there is a better way to do this or if this is will be fine. I'm trying to put an icon next to a block of text, but I have a bunch of strange width problems. I'd like it to be directly next to the news story, but without the text wrapping. So far, my solution causes the gap between the icon and the text to get really huge as resolution increases. What I want is for the icon to be about 20 or 30 pixels away regardless of the resolution. Any simple way for me to do this? I'm still trying to get the hang of all this CSS stuff. News page: http://www.brickfilms.com/ Story code: Code: <div id='newsItem'><img src="<?echo $icon;?>" width="64" height="64" class="newsIcon"> <div id='newsText'> <h3 class='newsTitle'><?echo $title;?></h3> <p class='newsStory'><i>by <?echo $author;?>, <?echo $date;?></i><br> <?echo $story;?> </p> <br></div> </div> The CSS is at http://www.brickfilms.com/brickfilms.css Thanks in advance. Hi All, I built a website for a friend which is essentially working ok (thanks in large part to help I found on the net). She wanted to add a blog and I decided that this may be a good time to rework the site to a 960px width, partly to make it easier to make everything uniform. (A lot of blog templates are based on the 960) I have been working on a new homepage based on the old homepage but with things moved around slightly due to the new size. I also had a very long and convoluted CSS page before as it covered more than one page layout, so I decided to create a new simpler one just for this page. Basically I took all the elements from the old CSS page that applied to the original homepage and put them in the new one, changing positioning coordinates where appropriate. I've clearly done something wrong. While the text links are in the correct places, they're not supposed to be visible (they should be hidden behind the various icons. Those icons should in turn have a rollover effect - If you check the original homepage you can see what I mean.) The problem is something to do with the #nav1 and #nav2 attributes, but, because I'm a total newb, the original CSS was predominantly created by a couple of helpful souls I found online, but this means that I still don't really understand parts of it (though I am learning) Please help. This is my CSS: Code: * {
padding:0;
margin:0;
list-style-type:none;
}
.link1 a:link,.link1 a:visited,.link1 a:active {
color:#000000;
font-family:arial,helvetica,sans-serif;
font-weight:bold;
}
.link1 a:hover {
background-color:#000000;
text-decoration:none;
}
.link2 a:link,.link2 a:visited,.link2 a:active {
color:#00def5;
font-family:arial,helvetica,sans-serif;
font-size:100%;
font-weight:bold;
}
.link2 a:hover {
color:#fff;
background-color:#286d8c;
text-decoration: none;
}
body {
background-color:#000;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:100%;
text-align: center;
}
h1 {
font:italic 16px tahoma,helvetica,arial,sans-serif;
color:#fff;
text-shadow: 0 1px 1px #000;
text-align: center;
}
#container1 {
width:960px;
height:1186px;
margin:auto;
background-image:url(../images/Homepage-Image960.jpg);
}
#content1 {
width:430px;
height:50px;
padding-top:460px;
padding-bottom:20px;
padding-right:5px;
padding-left:5px;
border:3px solid transparent;
margin-top:0px;
margin-bottom:155px;
margin-right:0px;
margin-left:66px;
text-align:center;
font-style:italic;
overflow:auto;
}
#nav1 {
margin-bottom:25px;
overflow:hidden;
}
#nav1 li {
margin-bottom:29px;
}
#li1 {margin-left:697px;}
#li2 {margin-left:631px;}
#li3 {margin-left:565px;}
#li4 {margin-left:499px;}
#li5 {margin-left:433px;}
#li6 {margin-left:367px;}
#li7 {margin-left:36px;}
#li8 {margin-left:93px;}
#li9 {margin-left:93px;}
#li10 {margin-left:98px;}
#li11 {margin-left:320px;}
}
#nav1 a,#nav2 a {
position:relative;
display:block;
height:24px;
background-image:url(../images/Homepage-Image960-Invert.jpg);
}
#nav1 span,#nav2 span {
position:absolute;
top:0;
left:0;
height:24px;
z-index:1;
background-image:url(../images/Homepage-Image960-Invert.jpg);
cursor:pointer;
}
#about,#about span {
width:239px;
background-position:-697px -691px;
}
#appts,#appts span {
width:305px;
background-position:-631px -740px;
}
#fees,#fees span {
width:371px;
background-position:-565px -789px;
}
#faq,#faq span {
width:437px;
background-position:-499px -838px;
}
#links,#links span {
width:513px;
background-position:-433px -887px;
}
#blog,#blog span {
width:579px;
background-position:-367px -936px;
}
#about:hover span {
width:239px;
background-position:-697px -691px;
}
#appts:hover span {
width:305px;
background-position:-631px -740px;
}
#fees:hover span {
width:371px;
background-position:-565px -789px;
}
#faq:hover span {
width:437px;
background-position:-499px -838px;
}
#links:hover span {
width:513px;
background-position:-433px -887px;
}
#blog:hover span {
width:579px;
background-position:-367px -936px;
}
#nav2 li {
float:left;
display:inline;
}
#nav2 a {
height:96px;
}
#nav2 span {
height:96px;
}
#bps,#bps span {
width:131px;
background-position:-26px -972px;
}
#hps,#hps span {
width:131px;
background-position:-178px -972px;
}
#scp,#scp span {
width:131px;
background-position:-330px -972px;
}
#pay,#pay span {
width:131px;
background-position:-482px -972px;
}
#email,#email span {
width:131px;
background-position:-851px -972px;
}
#bps:hover span {
width:131px;
background-position:-26px -972px;
}
#hps:hover span {
width:131px;
background-position:-178px -972px;
}
#scp:hover span {
width:131px;
background-position:-330px -972px;
}
#pay:hover span {
width:131px;
background-position:-482px -972px;
}
#email:hover span {
width:131px;
background-position:-851px -972px;
}
And this is the HTML it applies to: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>Helen Stow - Counselling Psychologist, Therapist, Life Coach.</title> <meta name="google-site-verification" content="3hCMQLpWU3lVVahmEEWDtI_wRso4VELEwEnMbYvlTBk" > <meta name="keywords" content="Lincoln, Psychologist, Counselling, Therapy, Therapist, Life Coach, Coaching, Paypal" > <meta name="description" content="Homepage for Lincoln based, BPS Chartered Counselling Psychologist, Therapist and Life Coach Helen Stow." > <meta name="abstract" content="Homepage for Lincoln based, BPS Chartered Counselling Psychologist, Therapist and Life Coach Helen Stow." > <meta name="author" content="Helen Stow" > <meta name="copyright" content="April 2011" > <meta name="contact" content="helenstowcpsychol@btinternet.com" > <meta name="googlebot" content="all, index, follow, none, noindex, nofollow, noarchive, nosnippet" > <meta name="revisit" content="2 days" > <meta name="subject" content="Homepage for Lincoln based, BPS Chartered Counselling Psychologist, Therapist and Life Coach Helen Stow." > <meta name="title" content="<title>Homepage for Counselling Psychologist, Therapist and Life Coach Helen Stow</title>" > <meta name="seoconsultantsdirectory" content="5" > <link rel="stylesheet" type="text/css" href="style_homepage.css"> </head> <body> <div id="container1"> <div id="content1"> <p><h1>Helen Stow is a Lincoln based, Counselling Psychologist, Therapist and Life Coach.</h1></p> </div> <div class="link1"> <ul id="nav1"> <li id="li1"><a id="about" href="http://helenstow-cpsychol.co.uk/about_helen.html" title="About">ABOUT<span></span></a></li> <li id="li2"><a id="appts" href="http://helenstow-cpsychol.co.uk/appts_fees.html" title="Appointments" >APPTS<span></span></a></li> <li id="li3"><a id="fees" href="http://helenstow-cpsychol.co.uk/fees.html" title="Fees">FEES<span></span></a></li> <li id="li4"><a id="faq" href="http://helenstow-cpsychol.co.uk/faqs.html" title="FAQs">FAQs<span></span></a></li> <li id="li5"><a id="links" href="http://helenstow-cpsychol.co.uk/links.html" title="Links">LINKS<span></span></a></li> <li id="li6"><a id="blog" href="http://helenstow-cpsychol.co.uk/blog/" title="Blog">BLOG<span></span></a></li> </ul></div> <div class="link1"> <ul id="nav2"> <li id="li7"><a id="bps" href="http://www.bps.org.uk/" title="http://www.bps.org.uk/">BPS UK<span></span></a></li> <li id="li8"><a id="hps" href="http://www.hpc-uk.org/" title="http://www.hpc-uk.org/">HPC UK<span></span></a></li> <li id="li9"><a id="scp" href="http://www.societyforcoachingpsychology.net/" title="http://www.societyforcoachingpsychology.net/">SCP UK<span></span></a></li> <li id="li10"><a id="pay" href="http://helenstow-cpsychol.co.uk/paypal_payment.html" title="Paypal Payments">PAY<span></span></a></li> <li id="li11"><a id="email" href="mailto:helenstowcpsychol@btinternet.com" title="Email Me">EMAIL ME<span></span></a></li> </ul></div> </div><!-- end #container --> </body> </html> I really would be incredibly grateful for all and any help. My very best wishes, Tom 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 What I need to do is align a series of icons to the center, but there are a few complications, they must continue to be centered with any combination of 4-5 different(same sized) icons. For example icon 3 and 4, when displayed must be centered together, and at the same time, if icon 1 and 5 are being displayed they must also be centered correctly. First of all they are appearing on 2 seperate lines, and I seem to be unable to put them on the same line without using float:left on one. But I can't just float:left image one to put them on the same line, as image one may not be displayed in the next instance(with a different combination of images). And I don't think I can set a width on the div and center it because there will not be the same number of icons displayed in each instance(could be 1-5, 14x14 icons). My guess is that some % values can make this work but I'm just not sure how. I was going to post an illustration of what I mean but I guess it's blocked... Any help would be greatly appreciated. Thanks. Hi I have an issue aligning some links. i have it perfect in FF but it is not the same in IE. http://www.sun-awnings-direct.co.uk/the-carino-p-29.html It is the white breadcruumb trail in question. Can anyone advise what IE is doing differently and how I can solve it? Thanks a lot Hi everyone, I am having trouble aligning my content to the edge of the table somehow it shows 20pixels down and I cann't figuere out how to bring it up. Any help will be greatly appreciate. thanks Code:
<style>
ul { list-style-type: none; margin: 1.0em 0 0 0px; padding: 0; position:relative; overflow: visible; height: auto; text-decoration: none; color: #33FF00;}
ul li { text-decoration: none; width: 230px; color: #000; }
ul li a, ul li a:visited {height: 1.2em; width: 200px; display: block; text-decoration: none; background: blue; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px; color: #000;}
ul li a:hover { height: 1.2em; display: block; background-color:#FF0000; color: #fff000;}
ul li a.currentpage, ul li { height: 1.2em; text-decoration: none; background: #00ffff; padding: 3px; color: #fff;}
</style>
<table width="234" border="1">
<tr>
<td width="230" height="85">
<ul><li><a href="">HOME</a></li>
<li><a href="">LINK TWO</a></li>
</ul>
</td>
</tr>
<tr><td></td></tr>
</table>
After browsing through w3schools and learning most of what css has to offer I for some reason can't figure out a way to align items using css. I was just wondering if someone could help me with the correct tag. www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please. CSS LINK http://www.devwebsites.com/estilos.css I started out working out a page thinking this *should* do what I want and lo and behold it did work in IE6 http://www.fogcat.co.uk/example/test002.html But when looking at Firefox it goes all odd. If you remove all the internal "imagediv" div from the "imagechunk" div it nearly works but doesn't algin the "link text" like IE. I'm told that display:inline-block is not properly supported, which is probably the root of my problems. What I want a set of divs down the page (the "imagedivs") Each div will contain An image - but that image will be nested inside a div - it's returned that way from a php function. Images may be of varying height so I can't use pixel values at top margins or anything like that. A link to another page The link should be positioned to the right of the image and aligned vertically with the centre of the image. This is one of those things that's a doddle with tables, but I'm trying to train myself to think CSS. What obvious thing am I over looking? Code: +--------------------------------------+ | +----------------+ | | | .............. | | --- <div> | | : : | | ... <img> | | : : | Link here | | | : : | | | | .............. | | | +----------------+ | +--------------------------------------+ +--------------------------------------+ | +----------------+ | | | .............. | | | | : : | | | | : : | Link here | | | : : | | | | .............. | | | +----------------+ | +--------------------------------------+ http://206.169.23.2/index3.htm http://206.169.23.2/style3.css The two columns are as far apart from each other as they can be. I want them to centered, and next to each other. How can this be done? I used float:right; and float:left for starters but I can not get the columns any closer to each other. Any help is greatly appreciated, - mike I have a full css site that im in the mits of creating. It has 3 colums across in the main part of the site as you will see in the link below that some of my divs dont seem to be lining up w/ the top of the page... http://www.pollutionpaintball.com/version3/dennis_wells.html I have the first column that contains the thumbnails floating right with a margin-left of the navgition width and the profile div width. Next I have the navigation floated left Then I have the profile section in a div w/ a left - margin the size of the navigations width... any pointers would help... HI there I am wondering if anyone can help with a css issue I am strugging to resolve. The url is simplyroomsandsuites co uk (forward slash) blog You can see where the footer image is floating left.. I have tried to float it centrally but it disappears. Thanks for any help. .footerArea {float: left; display: inline; width: 950px; background: url(/images/main_area_bottom_curve.png) top left no-repeat; padding: 30px 0 20px 0;} Whta's the best way to do this? I'm tryiong to avoid using tables. but i cant think of a more liquid way to do it... .........key:value someOtherKey:someOthervalue ...more keys:more values ...........k:v (the periods are just placeholders for whitespace) Thanks! |
|||||||