|
CSS - More Table Conversion Trouble
I 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%;
}
Similar TutorialsHi guys, I'm new to the boards, but I have done a search before posting. I've got a page based completely on tables that I want to convert to tableless.. URL is my original site, I tried to transport it to URL And I lost my navigation icons.. Not a huge deal, but I'd still like to have them. Anyway, Heres the code... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Guttermonkey</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
p {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 12px;
margin: 2px;
line-height: 14px;
padding-left: 20px;
color: #000000;
}
h3 {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 16px;
margin: 10px;
line-height: 18px;
padding-left: 5px;
color: #e9f2fc;
}
.smallheader
{
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
font-weight: normal;
padding-left: 10px;
padding-right: 5px;
line-height: 14px;
color: #e9f2fc;
}
.small {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
font-weight: normal;
padding-left: 5px;
line-height: 14px;
color: #e9f2fc;
}
a:link {
color: #707770;
font-weight: normal;
text-decoration: none;
}
a:visited {
color: #707770;
font-weight: normal;
text-decoration: none;
}
a:active {
color: #707770;
font-weight: normal;
text-decoration: none;
}
a:hover {
color:#707770;
font-weight: normal;
text-decoration: none;
}
.info
{
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
line-height: 13px;
padding-left: 5px;
color: #e9f2fc;
}
.infohead {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
line-height: 12px;
padding-left: 20px;
color: #e9f2fc;
}
.newshead {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 12px;
line-height: 13px;
padding-left: 5px;
color: #333333;
}
input, textarea, select {
background-color: #CCCCCC;
border-style: solid;
border-width: 1px;
font-family: verdana, arial, sans-serif;
font-size: 10px;
color: #333333;
padding: 0px;
}
-->
</style></head>
<body bgcolor="#808080">
<br>
<center>
<!-- Main Table -->
<table bgcolor="#808080" border="0" cellpadding="1" cellspacing="0" width="670"><tbody><tr><td colspan="2">
<!-- Header -->
<table bgcolor="#000000" border="0" cellpadding="1" cellspacing="0" width="100%"><tbody><tr><td>
<table bgcolor="#808080" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="smallheader" align="right" bgcolor="#354463">Last update: 28/06/2002, v4.0</td>
</tr>
<tr>
<td bgcolor="#354463"><h3>// Guttermonkey</h3></td>
</tr>
<tr>
<td class="smallheader" align="right" bgcolor="#354463">"I never think of the future, it comes soon enough." - A. Einstein</td>
</tr>
</tbody></table>
</td></tr></tbody></table>
<!-- End Header -->
</td></tr>
<tr><td>
</td></tr>
<tr><td colspan="2">
<!-- Main Field -->
<table bgcolor="#000000" border="0" cellpadding="1" cellspacing="0" width="100%"><tbody><tr><td>
<table bgcolor="#dcdcdc" border="0" cellpadding="0" cellspacing="10" width="100%"><tbody><tr><td align="center" valign="top" width="160">
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td>
<table border=0 width=100% height="100%">
<td width="495" height=100% valign="top">
Ewwwwww!<td width="175" height="100%" valign="top">
<table bgcolor="#2d3851" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td>
<table bgcolor="#bfc4cb" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td>
<table bgcolor="#2d3851" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td>
<table bgcolor="#354463" border="0" cellpadding="2" cellspacing="2" width="175">
<tbody><tr>
<td class="infohead" bgcolor="#354463"><b>:: Navigation</b></td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<link rel="StyleSheet" href="navbar_files/dtree.css" type="text/css">
<script type="text/javascript" src="navbar_files/dtree.js"></script></head>
<body>
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Guttermonkey.com');
d.add(1,0,'Home','index.php');
d.add(2,0,'Calendar','index.php?page=calendar');
d.add(3,0,'Poetry','index.php?page=poetry');
d.add(4,0,'Blog','index.php?page=blog');
d.add(5,0,'Download','index.php?page=download');
d.add(6,0,'Photo Gallery','javascript:void','RC\'s Picture Folder!','','','img/imgfolder.gif');
d.add(7,6,'RC Naked','index.php?page=naked','You sick ****!','','','img/jpg.gif');
document.write(d);
//-->
</script>
</body></html> </tr>
<tr>
<td class="infohead" bgcolor="#354463"><b>:: VITAL STATS</b></td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Name</b>: RC</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Nick</b>: The Freaky Penguin</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Location</b>: New Perth</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Born</b>: Begotten before time</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Mood</b>: Wonky</td>
</tr>
<tr>
<td class="infohead" bgcolor="#354463"><b>:: SYSTEM</b></td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>MB</b>: TF-486 with 256K cache</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>CPU</b>: AMD 486-66MHz</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>MEM</b>: 4MB </td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>HD</b>: Quantum Fireball 2 GB </td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>VGA</b>: Number Nine GXE 2MB ISA video card</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>OS</b>: MS-DOS 5.7 </td>
</tr>
</tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</table>
</body></html>
I havent done serious web design in a couple years, and to tell you the truth its over my head now. Oh, and when I moved the site, I FTP transfered the entire public_http folder, so I know the images are there for the nav bar. But thats not important, getting table-less is... Any help on where/how to begin? Much thanks in advance, rcmaples. Hi, I'm having a little problem getting a layout to work with divs. I can hack it fairly easily with tables, but I am realying on undefined behavior to make it work, so I would rather do it right with css. Here is the code, if you can make the page, you can see the result I would like, and as close as I could get with css. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {
padding-top: 5px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Center Test</title>
<style type="text/css">
.navCell {
width: 14%;
text-align: center;
background-color: teal;
float: left;
}
</style>
</head>
<body>
<div style="width: 100%; height: 20px; background-color: red;">
<div style="width: 196px; text-align: center; background-color: green; position: absolute; left: 0px;"><p>Stay Home</p></div>
<div id="restOfNav" class="restOfNav" style=" padding-left: 196px; ">
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
</div>
</div>
<p>Desired result</p>
<table cellpadding="0" cellspacing="0" style="height: 20px;">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr align="center" >
<td class="headerCell" ><div style="width: 196px; background-color: green;"><span>Stay Home</span></div></td>
<!-- <td class="dividerCell"></td> -->
<td class="mainLinkTd" style="width: 340px; background-color: teal;">CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;">CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Thanks for any help you all can give me. 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! 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). Hi everyone, I am in the midst of converting my fathers website from an old frames based version into a CSS version, and I have had some trouble getting it working properly in both firefox and ie explorer. I would really appreciate if anyone could give me some advice! The original page is he http://www.qualspec.com.au I have started by just trying to replicate the frames look with css, and have come up with this single page: http://www.qualspec.com.au/test/testid.html It seems to work well in internet explorer, but as soon as I load up firefox, it looks ugly as hell (I was using topstyle which uses IE as the internal css and html preview). Can anyone help me out here? Thanks in advance! Regards, Thomas. how would i convert: <table border="1" cellspacing="0" style="border-collapse: collapse; text-align: left; border-style: ridge; margin: 0; padding: 0" bordercolor="#111111" width="779" id="table3"> <tr> <td width="649"><font face="Small Fonts" color="#666666" style="font-size: 20pt"> <img border="0" src="Banner1.jpg" width="649" height="92"></font></td> <td width="174"><font face="Small Fonts" color="#666666" style="font-size: 20pt"> <img border="0" src="Banner2.jpg" width="167" height="92"></font></td> </tr> </table> to simple CSS code? I tried doing that all in one style and nothing worked! I had to redo my page because none of it was validating through w3c so I'm trying it again and attempting to get my css right however the widths of my divs correct to match my psd. Any thoughts on what I'm doing wrong? PSD jpg kansasoutlawwrestling.com/wrestling2.jpg Site kansasoutlawwrestling.com I am working on converting my site (http://www.thejokejukebox.com ) from html to css/xhtml . I am working on the header image. I've used Photoshop's image slicing routine to cut the photoshop image into smaller pieces and have outputted the css code for the images. While this is mostly fine, Photoshop outputs css using absolute positioning. My goal is to have the header graphic displayed centered regardless of the screen resolution of the user. This is how the site appears now using html. On either side of the centered image is a filler graphic (bg.gif) that is repeated in x only. What approach should I take to accomplish this look in css? I've read a bit on using floating divs . Is this the route I should be looking at? If so, can someone give me a rough idea on how I can position the individual images to make the continous graphic within the floating div? As you can tell, I am very green when it comes to CSS, so your patience and time is appreciated. 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 ok im having some trouble with the layout of some stuff. i have my webpage set up so i have a <div> floating to the left and a content area to the right. in my "content" area, i have an img where i used "float:left;" so i can have text to the right of it. but now after that, i have <br clear='left' />. the problem is that when i put that break in there, it clears the float for the first <div>. is there anyway around this? here is some sample code. Code:
<html>
<head>
<style type="text/css">
div{
float:left;
width:150px;
color:red;}
</style>
</head>
<body>
<div>
<p>text</p><p>text</p><p>text</p><p>text</p>
</div>
<img scr='fake.jpg'>
<p>text</p>
<br clear='left' />
<p>text under thats not susppose to clear float to the left</p>
</body>
</html>
i have a small image in a big div, and when one rolls over any part of the image or the div the background color of the div changes and the image swaps out. i dont know why, but im having a hard time getting this done. i feel like its simpler than i am envisioning it. any help would be much apreciated. ben 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> 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 Hey I have a dashed border to the right of my menu, i was wondering how i can make it reach the bottom of my page, without having to fill up all the content example of what it looks like: Navigation | | link | link | link | Example of what i want it to look like Navigation | | link | link | link | | | | | | bottom of page. This is the Css code: DIV#sidebar { LEFT: 0px; WIDTH: 12em; POSITION: absolute; TOP: 0px; HEIGHT: auto; BORDER-RIGHT: black 1px dashed; } Hi guys, So, I've been working on my portfolio site over the past week or so and I'm really pleased with how it's looking. You can view it here eyeforillustration.com It is on the Cargo Collective platform. I have just one last problem that I just can't get my head around. Basically, I can't get the header image aligned with the thumbnails and footer properly. I would also like the header to slide like the thumbnails and footer when you resize the page. Also, when viewing it in different resolutions it seems to jump around depending on the width? I'm pretty sure it's something to do with the header container but I've tried everything and can't get it working. If you guys could take a quick look, any help would be much appreciated. Jack (If anyone would like an invitation to try Cargo out, I do have a couple to give away, just let me know) 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 Code:
<div class="message">
<table>
<tr>
<td>Hello World</td>
</tr>
</table>
</div>
Code:
div.message
{
border: 1px solid #000000;
}
For some reason that does not produce a border around the div. Is there a reason why not? |
|||||||