|
CSS - Css - Trouble With Table
Hi:
I've been trying to format the following code to create nice column headings: Code: #f1 {width: 75%;height: 15px;border: 1px ridge #777;padding: 10px;margin: 2px auto;text-align:center;float: center;}
and: Code: theading {font-family: Arial;font-weight: bold;font-size: 12px;text-align: center;cellspacing: 10px;color:#000000;}
Here is the column headings data that I'm trying to work on: Code: <div id="f1"> <theading>ORDER NO</theading> <theading>DATE RECEIVED</theading> <theading>DATE PRE ORDERED</theading> <theading>REQUIRED BY</theading> <theading>DESIGNED BY</theading> </div> The problem is that I don't know if I'm using the correct method to display the column headings each one in its respective cell with equal spacing between cells. The data that follows will be formatted so that it is displayed below its respective column heading. I've already spent half a day trying but it doesn't display the way it should. Also, it tends to center, thus bunching up. It should spread evenly. Can someone please help? Thanks! Similar TutorialsI am so determined to get my entire site table-less but i ma having some more trouble on a "complicated" table layout This is the current table Code:
<table>
<tr>
<td width="50px"></td>
<td></td>
<td width="200px"></td>
<td width="50px"></td>
<td width="50px"></td>
</tr>
</table>
Now what i have done so far to convert this to CSS is the following Code: <div class="forums"> <span class="image"></span> <span class="name"><span> <span class="lastpost"></span> <span class="topics"></span> <span class="posts"></span> </div> however i do not know the CSS code to make it look like the table layout above. I have messed around with width and float but i am not getting it how it should be. some CSS code i wrote Code:
div.forums
{
width: 90%;
clear: both;
height: 50px;
margin: 0 auto;
}
span.image
{
float: left;
width: 10%;
}
span.name
{
float: left;
}
span.lastpost
{
float: left;
width: 20%;
}
span.topics
{
float: left;
width: 10%;
}
span.posts
{
float: left;
width: 10%;
}
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). OK, I thought I was so smart. Working on a site that is 100% CSS AND Priority 3 WAI compliant, and thought I had it - it looked good on PC IE, Mozilla and Safari...only to be shot down by Mac IE 5.5, which I know is a bit of a black sheep in terms of CSS. Can those of you with knowledge of such things take a look at: http://www.getbrightstar.com/v2/ And let me know why Mac IE 5.5 wouldn't float the columns correctly? The tricky part is that *I* don't have a mac and can't find an IE 5.5 emulator online like safari, but my client DOES have one and she uses IE 5.5, so it would be best if I could get it right the first time...I don't want to use my client for compatibility testing. Thanks, -Daniel This is my css file : BODY { font: 11px geneva, verdana, arial, sans-serif; color: #89A1BD; } TH{ font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; } A:active { font: 11px geneva, verdana, arial, sans-serif; color: #00000; text-decoration: none; } A:hover { font: 11px geneva, verdana, arial, sans-serif; color: #0000FF; text-decoration: underline overline; } A:link { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration: none; } A:visited { font: 11px geneva, verdana, arial, sans-serif; color: #000000; text-decoration:none; } #poll{ ;border-style : solid ;border-color : #004f9d ;border-width : 2px} #poll tr td dt{font-family: Small Fonts;font-style : normal ;font-size : 7pt; font-weight :bold } select, input, textarea { font: 10px geneva, verdana, arial, sans-serif; color: #3D3D3D; } .pn-top {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title:link { color:#FFFFFF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-title:active { color:#FFFFFF; FONT-SIZE: 11px;FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-title:hover { color:#0000FF; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-title:visited { color:#CC0000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link {BACKGROUND: none; COLOR: #0000000; FONT-SIZE: 11px; FONT-WEIGHT: normal; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link:link { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .pn-link:active { color:#FFFFFF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: none} .pn-link:hover { color:#0000FF; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION: underline overline} .pn-link:visited { color:#000000; FONT-SIZE: 11px; FONT-FAMILY: geneva, verdana, arial, sans-serif;TEXT-DECORATION:none} .date {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold; FONT-FAMILY: geneva, verdana, arial, sans-serif; TEXT-DECORATION: none} body { SCROLLBAR-FACE-COLOR: #B7C6E5; SCROLLBAR-HIGHLIGHT-COLOR: #D3DCEF; SCROLLBAR-SHADOW-COLOR: #738FCC; SCROLLBAR-3DLIGHT-COLOR: #E9EEF8; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #E5EBF4; SCROLLBAR-DARKSHADOW-COLOR: #4870AA; ; background-color: D8E0E9 } FONT { font: 11px geneva, verdana, arial, sans-serif; color: #0000000; } TD { font: 11px geneva, verdana, arial, sans-serif; color: #3D3D3D; ; top: 20pt; clip: rect( )} And my text is just normal black en when i go over it , it will turn blue it always works perfect if theres no link specified ex. when "href" is empty then it works but if its links.html and that page exitst then it stays black when i go over it , i've tried much changes in my css sheet but it doensn't seems to work Using javascript, I have been trying to make a semi-transparent page with a login form on appear ontop of my website. It works fine in FF and Opera and worked fine in IE too, but now it does not anymore. It seems to refuse to recognize the fixed div for some reason. Hopefully someone can spot something I have missed. If you want to see it, go to zeff.biz/jsenabled.php and type "admin". The box should then appear. View it in FF to see what it is meant to look like and in IE to see what my problem is. The CSS: Code:
#admin_login {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 2;
display: none;
}
#fade {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #000000;
opacity: 0.15;
filter:alpha(opacity=15);
khtml-opacity: 0.15;
moz-opacity: 0.15;
z-index: 1;
}
#admin_box {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
}
#admin {
position: relative;
top: -75px;
left: -100px;
height: 150px;
width: 200px;
background-color: #FBFF9F;
border: 1px solid #000000;
z-index: 2;
}
#admin_form {
position: relative;
height: 150px;
width: 140px;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
text-align: left;
line-height: 30px;
}
#username {
position: relative;
right: -20px;
width: 120px;
}
#password {
position: relative;
right: -20px;
width: 120px;
}
#submit {
position: relative;
right: -95px;
width: 50px;
}
#admin_fill {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
height: 150px;
width: 200px;
}
The HTML: Code: <div id="admin_login"> <div id="fade" onclick="exit_admin()"> </div> <div id="admin_box"> <div id="admin"> <form id="admin_form" action=""> <div>Username:</div> <div><input type="text" name="username" id="username" onkeyup="check()" /></div> <div>Password:</div> <div><input type="password" name="password" id="password" onkeyup="check()" /></div> </form> </div> <div id="admin_fill" onclick="exit_admin()"> </div> </div> </div> Hi, I am having some trouble laying out this page: http://209.123.229.141/racing_profile.php?user=2 (Username: devshed Password: css) I want the 'Latest Media' Box positioned in the middle of the left hand side, the 'Latest Replays' box in the middle of the right hand side and the 'Latest Events' box below both. I have floated them to the left and right and cleared the floats for the 'latest events' div, but the media and replays div won't floar in the "middle" of each side. The CSS for the page is: http://209.123.229.141/css/racing_profile.css Hi, This is a link to my site: http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=13 This is the relevant CSS: Code: #main-image-container {
position: relative;
overflow: hidden;
text-align: center;
}
#main-image-container #sliding-frame p {
position: relative;
height: 470px;
overflow: hidden;
}
#main-image {
position: absolute;
left: 105px;
cursor: nw-resize;
z-index: 10;
background-color: #111;
}
Ive tried automatic margins, align-center and a few other things, but I cant get this code to sit in the center of the page: Code: <div id="main-image-container"> <div id="slideshow-controls"> </div> <div id="sliding-frame"> <p> <img id="main-image" src="main.php?g2_view=core.DownloadItem&g2_itemId=21&g2_serialNumber=2" style="width: 460px; height: auto;"/> </p> </div> Can anyone help me out and show me what I should be doing? I'm totally new to css (just started yesterday) and I'm trying to build a page out of div tags so that the borders of the content (which will be in a block at the center of the page) are images (dropshadows). ag_portfolio.css: Code: @charset "utf-8";
/* CSS Document */
/* general page properties */
body
{
background-color:#CCC;
}
div.main_container /* main container of all content */
{
width:861px;
margin-left: auto ;
margin-right: auto ;
background-color:#FFF;
}
/* end general page properties */
/* borders */
/*top left corner*/
div.top_left
{
background-image:url(images/top_left.png);
background-repeat:no-repeat;
width:31px;
height:31px;
position:relative;
float:left;
}
/*top*/
div.top
{
background-image:url(images/top.png);
background-repeat:repeat-x;
width:800px;
position:relative;
float:left;
}
/*top right corner*/
div.top_right
{
background-image:url(images/top_right.png);
background-repeat:no-repeat;
width:30px;
height:31px;
position:relative;
float:right;
}
/*right*/
div.right
{
background-image:url(images/right.png);
background-repeat:repeat-y;
width:38px;
position:relative;
float:right;
}
/*bottom right corner*/
div.bottom_right
{
background-image:url(images/bottom_right.png);
background-repeat:no-repeat;
width:31px;
height:31px;
position:relative;
float:right;
}
/*bottom*/
div.bottom
{
background-image:url(images/bottom.png);
background-repeat:repeat-x;
height:31px;
position:relative;
}
/*bottom left corner*/
div.bottom_left
{
background-image:url(images/bottom_left.png);
background-repeat:no-repeat;
width:30px;
height:31px;
position:relative;
float:left;
}
/*left*/
div.left
{
background-image:url(images/left.png);
background-repeat:repeat-y;
width:38px;
position:relative;
float:left;
}
/* end borders */
/* header contents */
div.banner
{
background-image:url(images/banner.png);
background-repeat:no-repeat;
position:relative;
background-position:center;
width:785px;
height:200px;
float:left;
z-index:1;
}
div.button
{
}
/*
div.button2
{
}
div.button3
{
}
div.button4
{
}
*/
/* end header contents */
/* main contents */
div.header1
{
position:relative;
left:20px;
background-color:#FFF;
font-family:"Courier New", Courier, monospace;
font-size:300%; /* larger font */
color:#000;
}
div.content
{
position:relative;
left:20px;
background-color:#FFF;
font-family:"Courier New", Courier, monospace;
font-size:100%;
color:#000;
}
/* links */
a:link {color:#666}
a:visited {color:#A5B49A}
a:active {color:#333}
a:hover {color:#000}
/* end links */
div.footer1
{
text-align:center;
background-color:#FFF;
font-family:"Courier New", Courier, monospace;
font-size:100%;
color:#000;
}
/* end main contents */
test.html: 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>css test</title>
<link rel="stylesheet" type="text/css" href="ag_portfolio.css" /> <!--link to style sheet-->
<style type="text/css"> <!--specific style-->
</style>
</head>
<body>
<div class="main_container" height=600>
<div><!--top border-->
<div class="top_left">
</div>
<div class="top">
</div>
<div class="top_right">
</div>
</div><!--top border-->
<div><!--banner-->
<div class="left" height="183px">
</div>
<div class="banner">
</div>
<div class="right" height="183px">
</div>
</div><!--banner-->
</div>
</body>
</html>
For some reason the div tags are all over the place. They don't even appear to be in their separate containers. Am I doing something wrong? I'm really lost . Thanks for any help. Greetings! I seem to have some problems with the hover pseudo-class in IE6. I have tried many combinations but cannot get the color to change on a hover. The other attributes seem to work ok, such as background color, cursor, etc. When I place the COLOR attribute in, IE6 just seems to ignore it. here are the significant snippets of the CSS: This is at the very top of the CSS external..note that the color that is desired on hover is #0000FF or blue: Code:
A:link {color: #FFFF00; text-decoration: none}
A:visited {color: #FFBF00; text-decoration: none}
A:hover {color: #0000FF; text-decoration: none}
A:active {color: #C0FFC0; text-decoration: none}
I am using relative positioning for my "menu" elements, so I created a CSS block for each item that results in the following: Code:
#home, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -200px;
left: -390px;
text-decoration: none;
}
#aboutus, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -170px;
left: -460px;
text-decoration: none;
}
#services, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -140px;
left: -553px;
text-decoration: none;
}
#faqs, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -110px;
left: -682px;
text-decoration: none;
}
#contact, a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
font-style: italic;
font-weight: bold;
color: #CC0000;
position: relative;
top: -97px;
left: 170px;
text-decoration: none;
}
As can be seen the base color or starting color of the menu item is #CC0000 (red). The actual HTML is very simple: Code: <a id="home" href="index3.html">Home</a> <a id="aboutus" href="aboutus.htm">About Us</a> <a id="services" href="services.htm">Our Services</a> <a id="faqs" href="faqs.htm">Questions</a> <a id="contact" href="contactus.htm">Contact Us</a> What now happens, is that each menu item displays in RED, but when you hover over it, the text does not change color to the BLUE that I want. It just remains RED. Yet, when I add an attribute such as "background-color: green" to that HOVER directive, it works fine, it just wont change the text. Is this one of those Microsoft IE problems, or am I doing something wrong?? Thanks, in advance for your help! Kork I'm trying to manipulate a stylesheet to make elements appear and disappear on an HTML form. The code I've adapted from various sources works fine on non-IE browsers and sort of works on IE but there's something I don't understand and can't get to work. My page starts: Code:
<style ID=\"xyzzy\" TYPE=\"text/css\">
</style>
<SCRIPT TYPE=\"text/javascript\">
<!--
function setClassAttr(c, a, v) {
var agt=navigator.userAgent.toLowerCase();
var e;
// Style sheet management depends on browser.
// See URL or URL
if (agt.indexOf('gecko') != -1) {
e=document.getElementById('xyzzy');
e.sheet.insertRule(c + ' { ' + a + ': ' + v + '}',
e.sheet.cssRules.length)
}
else if ( (parseInt(navigator.appVersion)>=4)
&& (agt.indexOf('msie') != -1) ) {
document.styleSheets['xyzzy'].addRule(c, a+':'+v);
}
}
...
And I use this to set "display" to "block" or "none" for subordinate elements when a checkbox is checked or unchecked. As I said, this works for non-IE browsers but in IE, I click the first checkbox and nothing appears to happen. If I then click the background of the document, the elements appear. I've searched the web and MSDN for some way of flushing the stylesheet change or generating a Click from JavaScript and I can't find anything. I tried disabling and reabling the stylesheet and it didn't help. I tried moveBy(0,0) and it didn't help. Is this a bug in IE or in my understanding of what should happen? If the former, how can I work around it? Can I generate a Click from JavaScript somehow? Redraw the window somehow? If the latter, what am I missing? TIA. Hi Everyone, I have a page I am working on that works perfect in IE, but having a little trouble with Firefox. The Navigation menw lines up perfect in IE, but seems to "fall off the edge" in Firefox.....haven't checked the other browsers, but I'm sure it would be the same....the width is set to 100%.... I would post the link, but this forum won't let me.....I got the script from Dynamic Drive and it was called: Solid Block Menu Style sheet for Menu: .menu { margin: 0; float:left; font: bold 14px Arial; width: 100%; overflow: hidden; margin-bottom: 1em; border: 1px solid #66FFFF; border-width: 1px 0px; background: url(images/menu_back.gif) center center repeat-x; } .menu li { display: inline; } .menu li a { float: right; color: white; padding: 7px 12px; text-decoration: none; } .menu li a:visited { color: #000000; } .menu li a:hover, .menu li .current{ color: #FFFFFF; background: transparent url(images/menu_back_over.gif) center center repeat-x; } CODE in HTML: <ul class="menu"> <li><a href="URL HERE">Frosty Questionnaire</a></li> <li><a href="URL HERE">Board of Directors</a></li> <li><a href="URL HERE">Sponsorship & Volunteer Opportunities</a></li> <li><a href="URL HERE" class="current">Home</a></li> </ul> <br style="clear: left" /> Thanks! Hi, I got a very basic problem here. my site http://www.destroyclothing.com/destroy.htm what im tryen to do is move that top image, with the logo on the left, to go down to be even with the black bar. ive tried padding and margin, but it wont go down. i tried moving the black bar up with margin and padding also. nothing seems to work. ive even tried z-index properties. I dont get it. I dont want to use position relative. i dont even know if that will work either. someone know? Thanks I just finished coding a new layout but it seems to collaspe in IE even though it displays perfectly in firefox and netscape (almost). The link to the layout is: URL and the link to style sheet is: URL Also another thing I can't seem to get my container div background to repeat all the way through even though its set on repeat-y. Anyone have a idea on how to fix one of these problems? Thanks Hey there. A friend of mine was giving me a hand with the coding for http://myspace.com/457343540 but unfortunately I can't get in contact with him atm, so I thought I'd as here. As you can see in the link provided, firefox display the margins I want, but IE throws them off a bit. I've tried a few different things, but after a couple hours I've given up trying on my own lol. Another issue is the page is obviously stretching off the page (?idk) as the scroll bar goes off the side. Code: <style>
{ Music Player Properties }
.i {display:none;}
table table td.text div object {position:absolute; top:1140px; left:50%; margin-left:-30px;}
table table td.text div object object {position:static; margin-left:0px;}
{ Background Properties }
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-color:000000; background-attachment:scroll; background-position:top center; background-repeat:no-repeat; background-image: url(http://bnesfinest.net/tomm/myspace/tioc/bg.jpg);
border-top-width:0px; border-bottom-width:0px; border-left-width:0px; border-right-width:0px; border-color:none; border-style:solid; padding-left:0px; padding-right:0px;}
.samohtlogo{
position:absolute; width: 100px; top: 20px; left: 20px; text-align: left; z-index: 10;}
.menu{
width: 959px; height: 136px; position: absolute; top: 591px; z-index: 2; overflow: visible; margin-left: -480px; left: 50%;}
.header {
width: 959px; height: 422px; position: absolute; top: 169px; margin-left: -480px; z-index: 0; overflow: visible; left: 50%;}
.memberstop {
width: 959px; height: 403px; position: absolute; top: 727px; margin-left: -480px; z-index: 0; overflow: visible; left: 50%;}
.thealbum{
width: 422px; height: auto; position: absolute; top: 1130px; z-index: 2; overflow: visible; margin-left: -480px; left: 50%;}
.musicbg{
width: 541px; height: auto; position: absolute; top: 1130px; z-index: 0; overflow: visible; margin-left: -62px; left: 50%;}
.shows{
width: 959px; height: auto; position: absolute; top: 1513px; z-index: 0; overflow: visible; margin-left: -480px; left: 50%;}
.reverbshows{
width: 959px; height: auto; position: absolute; top: 1550px; z-index: 2; overflow: visible; margin-left: -445px; left: 50%;}
.featvideo{
width: 959px; height: auto; position: absolute; top: 1535px; z-index: 2; overflow: visible; margin-left: -50px; left: 50%;}
.R { Div Counter Acts }
.friendSpace div { overflow:visible !important; height:auto !important; position:static !important; background:none !important; }
.friendsComments div { overflow:visible !important; height:auto !important; position:static !important; width:auto !important; background:none !important; }
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td{
background-color: !important; text-align: left; vertical-align: top; overflow: visible !important; font-size: 11px !important; line-height: 12px !important;
text-transform: none !important; text-align: justify; letter-spacing: 0px; color: e7e2c5!important; margin: 10px !important; padding: 20px 20px 12px 0px;
border-bottom: 1px dotted dimgrey !important; border-color: 50433d!important; _line-height: 16px !important; }
html body.bodyContent table tbody tr td table tbody tr td.text table.friendSpace tbody tr td.text table tbody tr td table tr td table tr td a{
width: 110px !important; overflow: hidden; letter-spacing: 0px; font-size: 10px !important; line-height: 12px; display: block; color:50433d!important;
margin: 0 !important; padding: 0 !important; text-align: center !important; margin-left: 1px !important;}
.friendSpace {
position: absolute !important; z-index: 4 !important; width: 800px !important; margin-left: -320px; _margin-left: -400px; top: 0px !important; margin-top: 1860px !important;
}
.friendsComments {
position: absolute !important; z-index: 6 !important; margin-left: -35px; _ margin-left: -400px; width: 833px !important; top: 0px !important; margin-top: 2755px !important;
}
.friendsComments a img {border: 3px; border-color: 50433d; border-style: solid;}
.friendsComments table {width: 800px; align: justify; position:relative; left:0px; }
.friendSpace a img {border: 4px; border-color: 50433d; border-style: solid;}
</style>
I'm trying to float my navigation to the right side of the screen, but not messing up the order of the links. (left to right as in 1.2.3.4.5). The problem I'm having is the links go right, but so does the order of the links (they show right to left 5.4.3.2.1). Here's the CSS: Code:
ul#nav {
width: 890px;
font-size: 0.70em;
list-style: none;
padding: 0;
margin-top: 3em;
float: left;
clear: both;
}
ul#nav li {
background-color: #0776a0;
text-align: left;
float: right;
text-transform: uppercase;
border-right: 2px solid #279bd5;
display: block;
}
ul#nav li a, ul#nav li a:visited {
display: block;
padding: 0.4em 4em 0.4em 0.4em;
color: #FFF;
text-decoration: none;
}
ul#nav li a:hover {
color: #FFF;
background-color: #279bd5;
text-decoration: none;
}
ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover {
color: #FFF;
text-decoration: none;
}
And here's the html Code: <ul id="nav"> <li><a href="Home" title="Home">Home</a></li> <li><a href="Example" title="Example">Example</a></li> </ul> Will also post website with the example if asked. Hey, First off, please check out: identityrocket.com/website/index.php Notice the huge negative space just above the big orange button in the bottom left corner. I can't get rid of that space or seem to align it properly. I'm getting so frustrated because it is probably something small. Any help would be tremendously appreciated. Thanks, Ian. I'm having trouble with creating a nav bar in css. The code I'm using is this for the html: Code: <div id="wrap"> <div id="nav"><a id="home" href="#" title="home"><span>home</span></a> </div> </div> <div id="bottom"></div> </div> and this for the css: Code: @charset "utf-8"; /* CSS Document */ body { overflow:hidden; padding:0; border:0; margin-left:50%; color: #000000; line-height: 100%; font-family: verdana; font-size: 12px; text-indent: 0cm; background-image: url('bg.png'); background-position: top center; background-attachment: fixed; background-repeat:repeat-x; } #bottom { position:absolute; height:100%; width:100%; background-image:url('lbg.png'); background-position:bottom center; background-attachment:fixed; background-repeat:no-repeat; margin-left:-340px; } #wrap { background-color: #FFFFFF; border-color: #660000; border-style: double; position:absolute; width:900px; height:750px; margin-left:-450px; } #nav { height:50px; } #home { display: block; width: 226px; height: 50px; background: url("home.gif") no-repeat 0 0; } #home:hover { background-position: 0 -50px; } #home span { display: none; }
The button shows up but only half the link works! And I have put in other bottons to the right of it and they don't work at all... can anyone help pls? thank you. Hello, this is my first time here so not really sure how to ask for help so i am just going to poste the html/css code here and say what i want to say and hope no rules will be broken This is the body of the html: <body> <div id="wrap"> <div id="logo"><img src="images/logo.jpg"/></div> <div id="header"> <ul> <li id="home"> <a href="#"><img src="images/home_button.jpg"></a></li> <li id="about"> <a href="#"><img src="images/about_button.jpg"></a></li> <li id="fun"> <a href="#"><img src="images/fun_button.jpg"></a></li> <li id="gallery"> <a href="#"><img src="images/gallery_button.jpg"></a></li> <input type="text" name="s" id="s" value="Start search" /> </li> <li id="search"><img src="images/search.png" alt="search" /> </ul> </div> <div id="main"> <div id="primary"> <div class="post_item"> <h2> My First Post</h2> <p class="meta"> 1/4/2020 Insp </p> <p> This is text This is text This is text This is text This is text </p> </div> </div> <div id="secondary"> <div class="secbox"> <h3>News</h3> <img class="featuredImage" src="images/left.png" alt="Left" /> <p> Left arrow </p> <div class="prevNext"> <a href="#"><img src="images/right.png" alt"More"/></a> <a href="#"><img src="images/left.png" alt"Less"/></a> </div> <div class="secbox"> <h3>Recent Stuff</h3> <ul> <li><a href="#"> Post entry</a><li> <li><a href="#"> Post entry</a><li> <li><a href="#"> Post entry</a><li> </ul> </div> </div> </div> </div> <div id="footer"></div> </div> </body> And this is the css: a:hover {text-decoration:underline;} input{background:#696969; border:1px solid #c3c3c3; color:#cbcbcb; paddind:3px;} input:focus, input:hover{background: #ededed; color: #4e4e4e; } /* MAIN STYLES */ body{background:red url(images/bg_main.jpg) repeat-x;} #wrap{width:1000px; margin:auto; } #header {background: url(images/bar.jpg); width:100%; height:50px; float:right; } /*Navigation*/ #header ul{overflow: hidden; padding-left: 30px;} #header ul li{float:left; padding-right: 15px; } #header ul li a{color:#cbcbcb; position:relative;} /*SEARCHBOX*/ #header ul li#search{float:right; padding-top:10px;} #header input{margin-left:230px; margin-top:15px;} /*MAIN CONTENT*/ #main #primary {float:left;width:600px;} #main #secondary{float:right; width:180px;} #main #primary .post-item{background:#ededed; margin-bottom: 28px; border:1px solid;} Now, basically what i am trying to do is set the width of the "#header" to 100% but it seems to be stuck at 1000px ...won't go over that. can someone please help |
|||||||