|
CSS - Position / Table Question
I posted before explaining I was working on a work website and i do have very little to no knowledge of css but i've been teaching myself. I was wondering if anyone can help me with this question.
http://www24.brinkster.com/mattphat/YMCA2.html If you go to the website it has text "try me try me try me" I was wondering if there was any way to get that text over to the right hand side of the page, after the left sidebar links. I was planning on when someone clicks a link on the left having the information open to the right. I'm not to sure if i can do that with the way i have it set up or if i have to do special boxes, and what not. Thanks for any help! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<TITLE>Northwest Connecticut YMCA | We build strong kids, strong families, strong communities.</TITLE>
<style type="text/css">
html {height:100%;}body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
.right
{
position:absolute;
right:110px;
width:300px;
background-color:#b0e0e6;
}
#sidebar {
position: fixed;
width: 10em;
height: ;
top: 200px;
right: auto;
bottom: auto;
left: 0;
border: double;
margin:5px;
padding:2px;
}
</style>
<![endif]-->
</head>
<body>
<div id="bg">
<img src="YMCA/graudal1.jpg" width="100%" height="100%">
</div>
<div id="content">
<div align="center">
<table width="727" border="1" color="#736F6E" cellspacing="0" cellpadding="0">
<td align="left" valign="top" bgcolor="#FFFFFF">
</td>
<td rowspan="2" align="left" valign="middle" background="" bgcolor="#000000">
<form id="search" name="search" method="get" action="search_results.asp">
<table width="383" border="0" cellspacing="0" cellpadding="0">
<td align="left" valign="top" bgcolor="#FFFFFF">
<img src="YMCA/NWLOGO2.JPG" width="727" height="289" border="none">
</td>
<tr>
<td colspan="2" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td colspan="2">
<img src="images/clear_spacer.gif" width="727" height="0">
</td>
</tr>
<tr align="left" bgcolor="#A93333">
<td colspan="2">
<img src="images/clear_spacer.gif" width="727" height="0">
</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td colspan="2">
<img src="http://www.ymcadc.org/PublishingImages/webuild_tagline.gif" width="360" height="15">
</tr>
</td>
<tr bgcolor="#FFFFFF" border="solid" cellspacing="0" cellpadding="0">
<td colspan="2">
<div align="left">
<img src="ymca/miniY.jpg"></img>
<a href="http://www24.brinkster.com/mattphat/YMCA2.html" ONMOUSEOVER=rollover.src="YMCA/homelink2.jpg" ONMOUSEOUT=rollover.src="YMCA/homelink.jpg">
<img src="YMCA/homelink.jpg" name="rollover" width="89" height="28" border="0"></a>
<a href="http://www24.brinkster.com/mattphat/ymcatorrington.html" ONMOUSEOVER=rollover2.src="YMCA/Torringtonlink2.jpg" ONMOUSEOUT=rollover2.src="YMCA/Torringtonlink.jpg">
<img src="YMCA/torringtonlink.jpg" name="rollover2" width="140" height="28" border="0"></a>
<a href="http://www24.brinkster.com/mattphat/ymcawinsted.html" ONMOUSEOVER=rollover3.src="YMCA/winstedlink2.jpg" ONMOUSEOUT=rollover3.src="YMCA/winstedlink.jpg">
<img src="ymca/winstedlink.jpg" name="rollover3" width="109" height="28" border="0"></a>
<a href="http://www24.brinkster.com/mattphat/ymcacannan.html" ONMOUSEOVER=rollover4.src="YMCA/cannanlink2.jpg" ONMOUSEOUT=rollover4.src="YMCA/cannanlink.jpg">
<img src="ymca/cannanlink.jpg" name="rollover4" width="93" height="28" border="0"></a>
<a href="http://www24.brinkster.com/mattphat/ymcagiving.html" ONMOUSEOVER=rollover5.src="YMCA/givinglink2.jpg" ONMOUSEOUT=rollover5.src="YMCA/givinglink.jpg">
<img src="ymca/givinglink.jpg" name="rollover5" width="86" height="28" border="0"></a>
<a href="http://www24.brinkster.com/mattphat/ymcaaboutus.html" ONMOUSEOVER=rollover6.src="YMCA/aboutuslinks2.jpg" ONMOUSEOUT=rollover6.src="YMCA/aboutuslinks.jpg">
<img src="ymca/aboutuslinks.jpg" name="rollover6" width="104" height="28" border="0"></a>
<img src="ymca/miniY.jpg"></img>
</div>
</td>
</tr>
<tr align="left" valign="top" bgcolor="#A93333">
<td colspan="2">
<img src="images/clear_spacer.gif" width="727" height="3">
</td>
</tr>
<td bgcolor="#FFFFFF">
<DIV id="sidebar">
<center>
<img src="http://www24.brinkster.com/mattphat/YMCA/Torrlinks.JPG" width="150" height="20">
<a href="http://www24.brinkster.com/mattphat/YMCA2.html" ONMOUSEOVER=rollover.src="YMCA/homelink2.jpg" ONMOUSEOUT=rollover9.src="YMCA/homelink.jpg">
<img src="YMCA/homelink.jpg" name="rollover9" width="89" height="28" border="0"></a>
<a href="http://www24.brinkster.com/mattphat/YMCA2.html" ONMOUSEOVER=rollover.src="YMCA/homelink2.jpg" ONMOUSEOUT=rollover9.src="YMCA/homelink.jpg">
<img src="YMCA/homelink.jpg" name="rollover9" width="89" height="28" border="0"></a>
<a href="http://www24.brinkster.com/mattphat/YMCA2.html" ONMOUSEOVER=rollover.src="YMCA/homelink2.jpg" ONMOUSEOUT=rollover9.src="YMCA/homelink.jpg">
<img src="YMCA/homelink.jpg" name="rollover9" width="89" height="28" border="0"></a>
<a href="http://www24.brinkster.com/mattphat/YMCA2.html" ONMOUSEOVER=rollover.src="YMCA/homelink2.jpg" ONMOUSEOUT=rollover9.src="YMCA/homelink.jpg">
<img src="YMCA/homelink.jpg" name="rollover9" width="89" height="28" border="0"></a>
<a href="http://www24.brinkster.com/mattphat/YMCA2.html" ONMOUSEOVER=rollover.src="YMCA/homelink2.jpg" ONMOUSEOUT=rollover9.src="YMCA/homelink.jpg">
<img src="YMCA/homelink.jpg" name="rollover9" width="89" height="28" border="0"></a>
<a href="http://www24.brinkster.com/mattphat/YMCA2.html" ONMOUSEOVER=rollover.src="YMCA/homelink2.jpg" ONMOUSEOUT=rollover9.src="YMCA/homelink.jpg">
<img src="YMCA/homelink.jpg" name="rollover9" width="89" height="28" border="0"></a>
<a href="http://www24.brinkster.com/mattphat/YMCA2.html" ONMOUSEOVER=rollover.src="YMCA/homelink2.jpg" ONMOUSEOUT=rollover9.src="YMCA/homelink.jpg">
<img src="YMCA/homelink.jpg" name="rollover9" width="89" height="28" border="0"></a>
<br>
Fall Program Guide
<img border="0" src="http://www24.brinkster.com/mattphat/YMCA/TW%2520Fall%252009%2520Cover.jpg" width="125" height="175">
</a>
</center>
</DIV>
<div id="right">
TRY ME TRY ME TRY ME
</div>
<br>
<br>
<br>
<style type="text/css">
<!--
a:link {color: #000000; text-decoration: underline; }
a:active {color: #A93333; text-decoration: underline; }
a:visited {color: #A93333; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }
-->
</style>
<center>
<span style="font-size : 12px">
<a href="">Home</a> |
<a href="">Torrington</a> |
<a href="">Winsted</a> |
<a href="">Cannan</a> |
<a href="">Giving</a> |
<a href="">About Us</a>
<br>
2009 Northwest Connecticut YMCA.
<br>
The YMCA is a 501(c)(3) not-for-profit social services organization dedicated to
<br>
building strong kids, strong families and strong communities.
</center>
</span>
</tr>
</table></td>
</tr>
</td>
</tr>
</table>
</div>
</body>
</html>
Similar TutorialsI have an section of code, that on the html side has 7 items in a list, and it's displaying vertically, how (if any) is it possible to break up items and arrange them horizontaly within css? Hi there, I have a show/hide div and want it to appear on top of my other layers, however, when I use absolute to get it to appear on top of the other layers, with left and top positions, it appears in different places when I resize my window or change my resolutions. Is there anyway to make it appear the same no matter what resolution or window size? I am using pixels by the way. Thanks. Hello I'm hoping a CSS guru will be able to help me out. I'm thinking this is a simple question, but CSS is not my strength. I have a three column layout. First column is going to contain RSS feed headline, second column is the main site content and the third column is meant for ads. As it stands now, the first column and the third column are slowing the page load, since they use javascript to suck in RSS (for the headline) and phpAdNew for the the Ads. What I'd like to do is create a div at the bottom of the page, so these load last and then are positioned relatively to those columns? I hope that makes sense. I'm not sure how to move position after page load.. almost seems like I need to make a layer within a layer or something?? This is an example of what I'm trying to do: Code: <html> <head> <title>Test</title> </head> <table cellpadding=0 cellspacing=0 border=0 valign="top"> <tr> <td width=100> <!-- headline rss feed javascript --> </td> <td width=500> <!-- main content --> </td> <td width=100> <!-- phpAdNew javascript --> </td> </tr> </table> <div id="headline"> <script language="javascript" src="http://www.domain.com/path/to/headline.js></script> <!-- I'd like this to be placed in column 1 --> </div> <div id="ads"> <script language="javascript" src="http://www.domain.com/path/to/ad.js></script> <!-- I'd like this to be placed in column 3 --> </div> </body> </html> Anyways, any help is greatly appreciated. Let me know if you need any additional information from me, etc. Thanks! hanji Hi all. I have a script that draws a calendar. I would like to be able to position the day number in the upper right of each table cell using CSS. Note, each cell will also have an embedded table or just text showing events for that day, so I don't mind if the day number overlaps that table. Ive tried doing something like this: PHP Code: td.dayNumJK { font-size: 12px; font-weight: bold; position: absolute; top: 1px; right: 1px; } But it seems to ignore the style. I've tried all the possible position attribute values (static, absolute, relative, fixed) but it doesnt seem to work. Maybe this is not possible with CSS? Any ideas how I can accomplish this? I've been tweaking a bit of the site I edit for Oxford Hash House Harriers (search Google for Oxford Hash House Harriers and our site will appear at the top) and trying to get a blue bar for the left and right side bars all down the page, which I've now succeeded in doing, however in my changes something has changed because now there is a large gap between any content and a table but only in some browsers. The tables are used for actual data, not for layout. I use CSS and <div> for layout. The layout is along these lines: Code: <body> <div id="page"> <div id="banner"> <div id="leftlogo"> <!-- logo here --> </div> <div id="rightlogo"> <!-- logo here --> </div> <div id="oh3banner"><p class="pagetitle">Oxford H3</p></div> </div><!-- close div banner --> <div id="mainbody"> <div id="wrap1"> <div id="wrap2"> <div id="leftnavigation"> </div><!-- close div leftnavigation --> <div id="rightnavigation"> </div><!-- close div rightnavigation --> <div id="content"> <h1>Oxford Hash House Harriers</h1> <h2>Oxford H3 Hash Diary </h2> <div id="hashdiary"> <table summary="Oxford H3 Run Diary"> <caption>Forthcoming Oxford H3 Hashes</caption> <colgroup> <col id="date" /> <col id="postcode" /> <col id="venue" /> <col id="hare" /> <col id="beermaster" /> <col id="chef" /> <col id="run" /> </colgroup> <thead> <tr> <th scope="col">Date</th> <th scope="col">Post Code & Grid Ref.</th> <th scope="col">Venue</th> <th scope="col">Hares</th> <th scope="col">Beer Master</th> <th scope="col">Chef</th> <th scope="col">Run#</th> </tr> </thead> <tbody> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> </tbody> </table> </div> </div><!-- close div content --> </div> <!-- close div wrap1 --> </div> <!-- close div wrap2 --> </div> <!-- close div mainbody --> </div><!-- close div page --> </body> Whilst the relevant (I think) parts of the CSS look like this: DIV#page{ margin-top: 0px; } DIV#banner{ width:100%; background-color : #06168a; height : 130px; margin-left : 0px; margin-top: 0px; position : absolute; top: 0px; float : none; } DIV#oh3banner{ clear : none; background-image : url('images/oxfordh3banner.jpg'); background-repeat : no-repeat; height : 110px; margin-top: 10px; background-position : center; } DIV#mainbody{ margin-top: 130px; } DIV#wrap1{ background-color : #06168a; } DIV#wrap2{ background-color : #06168a; } DIV#leftnavigation{ width:15%; background-color : #06168a; margin-left : 0%; float: left; } DIV#rightnavigation{ width:15%; background-color : #06168a; margin-right : 0%; margin-left : 3%; float: right; } DIV#content{ width:auto; margin-left : 15%; margin-right: 15%; padding-left: 5px; padding-right: 5px; background-color: White; } I found to begin with that there was a very large gap between the table and any content on the page in all browsers until I put a <div> </div> around the actual table itself. When I did this the page looks okay in Firefox and Safari, but still looks incorrect in Internet Explorer and Chrome. It looks to me as if the table is being pushed below the content in the right sidebar in IE or the left sidebar in Chrome for some reason. I've been messing about for a while now trying to get this to work but without success. Can anybody spot where I'm going wrong? Regards, James Code:
#ticker {
background: transparent url('../images/dark_gradient.png');
overflow: hidden;
display: table;
margin-left: 20px;
margin-top: 10px;
width: 835px;
height: 52px;
}
#ticker #items {
position: relative;
top: 0px;
left: 829px;
}
the point is to use javascript to scroll the #items div along the container (#ticker). now, using this method, overflow: hidden does not seem to be working correctly. (i know display: table only works in FF, but this is an internal tool, so no need to make IE fixes yet) ... now, when i change display: table to display: block, the overflow works, but now the #items div is no longer relative to the container, but relative to the window. I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
Hi Below there are three tables. first one is separated but the second one is inside the third one. Although I have set padding and border-collapse to collapse and padding to 0px but they don't appear the same size on the screen. table 3 is bigger than table 1. is there any property that I can set to 0 so table 3 appears the same size as table 1? PHP Code: <STYLE> table{ border-collapse:collapse; } td{ padding:0px; } </STYLE> <TABLE STYLE='background-color:red;width:800px;border:1px solid black;'> <TR> <TD> </TD> </TR> </TABLE> <TABLE STYLE='background-color:red;width:800px;border:1px solid black;'> <TR> <TD> <TABLE STYLE='background-color:red;width:800px'> <TR> <TD> </TD> </TR> </TABLE> </TD> </TR> </TABLE> All I'm new to html and css and this one has put a flat spot on my forehead over the last 2 days. Anyway, I have an image that I want to cover successive rows in a table with; one image spanning 6 rows. The table has no borders because I would prefer to group the data fields in the cells with an image. The image is a trim box with a little faded color around the edge. I'll take any ideas!! Thanks'Pete I was wondering on this table I have I want it to have black background colour but I want to change the opacity to where you could see the background image too Is it ok to nest a div tag inside a table? It appears to work correctly. Thanks! Hello, I am having trouble understanding the positioning within CSS. I.E. the relative/absolute positions. I am creating a site with 1 banner and 2 columns underneath, all centered. The 2nd column I want to be right beside the left coumn. so it simply goes like So depending on where left is on the page, the main is always literally right beside it. Anyone have any suggested reads on this? How to make div stick to top of a page and align center Hei ppl. i am begenning of designing in css but i have a problem.. i have my website www.zyxep.net/byensguf/ i have that div in the bottom under the text "footer" that <div> do i need to get over the header image to the right.. so the right side of the login field is flush with the right side of the border.. and i need it to stay on that position in every size of the users screen.. min. 800x600 max. anything.. here is my css code: Code:
body {
text-align: center; /* center things in pre-IE6 */
margin: 0px auto;
}
#container {
margin: 0px auto;
left:150px;
top:0px;
width:760px;
height:420px;
z-index:1;
border-left: 1px solid black;
border-right: 1px solid black;
}
#header {
margin: 0px auto;
left:0px;
top:0px;
width:760px;
height:200px;
z-index:2;
background-image: url(images/logo.jpg);
border-bottom: 1px solid black;
}
#menu {
margin: 0px auto;
left:0px;
top:200px;
width:760px;
height:20px;
z-index:3;
border-bottom: 1px solid black;
}
#content {
margin: 0px auto;
left:0px;
top:220px;
width:760px;
height:180px;
z-index:4;
border-bottom: 1px solid black;
}
#footer {
margin: 0px auto;
left:0px;
top:400px;
width:760px;
height:20px;
z-index:5;
}
#login {
margin: 0px auto;
left:760px;
top:15px;
width:400px;
height:50px;
z-index:6;
}
#username {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#password {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
#loginsubmit {
width: 100px;
background-color: transparent;
border: 1px solid black;
}
and my index.php Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>ByensGuf.dk - Byens bedste guf</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="zyxep"> <META NAME="Keywords" CONTENT="zyxep, zyxep.net, portfolio"> <META NAME="Description" CONTENT="zyxep.net - portfolio"> <meta name="REVISIT-AFTER" content="1 DAYS"> <LINK REL="stylesheet" HREF="style.css" TYPE="text/css"> </head> <body> <div id="container"> <div id="header"></div> <div id="menu">menu</div> <div id="content">content</div> <div id="footer">Footer</div> <div id="login"> <form action="login.php" method="post"> <div> <input type="text" name="username" id="username"> <input type="password" name="password" id="password"> <input type="submit" value="login" id="loginsubmit"> </div> </form></div> </div> </body> </html> plz help me.. i am so confused Hello all, I have the following: 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>Untitled Document</title>
<style type="text/css">
.news-list-container { clear: both; }
.news-list-item {
padding:6px;
padding-left: 0;
padding-top: 10px;
clear: both;
} /* end .news-list-item */
.news-list-item-left { float: left; }
.news-list-item-left img { margin-right: -62px; }
.news-list-item-right {
vertical-align: middle;
margin-left: 72px;
width: 444px;
float: left;
} /* end .news-list-item-right */
.news-list-item-right a { font-size: 1.1em; }
</style>
</head>
<body>
<div class="news-list-container research-list-container">
<div class="news-list-item research-list-item">
<div class="news-list-item-left"><img src="img.jpg" width="63" height="43" alt="" title="" /></div>
<div class="news-list-item-right">
<a href="#">Link 1</a>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</p>
</div>
</div>
<div class="news-list-item research-list-item">
<div class="news-list-item-left"><img src="#" width="63" height="43" alt="" title="" /></div>
<div class="news-list-item-right">
<a href="#">Link 2</a>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Tes</p>
</div>
</div>
<div class="news-list-item research-list-item">
<div class="news-list-item-left"></div>
<div class="news-list-item-right">
<a href="#">Link 3</a>
<p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test T</p>
</div>
</div>
<div class="news-list-browse research-list-browse"></div>
</div>
</body>
</html>
This is code generated by a CMS. Notice that in the last case, there is no image which can happen. I would like to appear so that text always lines up even when there is no image to appear. This code works correctly in all browsers except IE6. IE6 makes the image appear really thin which is due to the negative margin. Is there a way to overcome this for IE6? Should I be using a different approach for this? I've been fixing errors for all of today trying to get my website to work in FF and I.E. It was all working fine until I refreshed I.E after implementing a myspace embedded link. If you're a I.E users you can see it by visiting (okay, I was going to post a link to my website so you could see, but It seems the forum rules prevents me from doing so ) Heres an image. Code: http://i4.photobucket.com/albums/y102/Macceth/error.jpg EDIT: For some reason the image isn't showing up either... but I can see it when I click preview... is posting images going againsted the rules aswell for first time posters? :S and here are the html code and styles.css code. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="Metal, Heavy Metal, Rock, Southern Rock, Music, Songs, Band, Want, For, Destruction, Want For Destruction, Destruction, UK" />
<title>Want For Destruction | The Official Want For Destruction Site</title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="header">
<h1>Your Logo</h1>
</div><!--ender header-->
<div id="nav1"class="cms-editable">
<ul id="nav">
<li><a href="index.htm">Home</a></li>
<li><a href="band.htm">Band</a></li>
<li><a href="events.htm">Events</a></li>
<li><a href="music.htm">Music</a></li>
<li><a href="photos.htm">Photos</a></li>
<li><a href="contact.htm">Contact</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
<div id="main">
<div id="primary">
<div id="header2" class="cms-editable">
<h2>EVENTS!</h2>
</div>
<div id="content1" class="cms-editable">
<p><strong>Upcoming 2011 events!</strong></p>
<p>January 21st - The Flying Dutchman - Friday at 21:00<br />February 21st - Seabreeze - Saturday at 21:30</p>
</div>
</div><!--end primary-->
</div><!--end main-->
</div><!--end container-->
</body>
</html>
Code: html {
background: #000000 url(images/BG.jpg) no-repeat center top;
}
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
}
a {
text-decoration: none;
*/ color: white */
}
a:hover {
text-decoration: underline;
}
a.selected {
font-weight: bold;
}
p {
color: #43433f;
line-height: 21px;
}
h2 {
color: #363era;
font-size: 31px;
}
li {
list-style: none;
}
img {
border: 0px;
}
#container {
position: relative;
margin: auto;
width: 971px;
text-align: left;
}
#header {
position: relative;
}
#header h1 {
text-indent: -9999px;
background: url(images/header.png) no-repeat center;
line-height: 251px;
}
#nav {
background: url(images/navBG.png) repeat-x;
overflow: hidden;
height: 40px
margin: 0 0 6px 0;
padding: 0 0 0 31px;
}
#nav li {
float: left;
line-height: 40px
}
#nav li a {
border-right: 1px dotted #959595;
padding: 0 1em;
color: white;
}
#nav li a.first {
padding-left: 0;
}
#main {
position: relative;
background: url(images/mainBG.png) repeat-y;
padding-bottom: 4em;
}
#primary h2 {
padding: 25px 0 15px 0;
margin-left: 38px;
margin-right: 38px;
border-bottom: 2px dotted #aab391;
color: white;
}
#primary p {
padding-left: 38px;
padding-right: 38px;
color: white;
font-size: 75%;
}
#content1 p {
border: 0px;
}
#padfix {
padding-left: 38px;
padding-right: 38px;
padding-top:0px;
padding-bottom:5em;
float:left;
}
Sorry for being a nuisance I am kinda new to all of this stuff. Any help would be greatly appreciated! Since position:fixed does not work in IE, are there any other ways to achieve the fixed effect, without using javascript? Code:
<div id="topNav">
<ul id="cssdropdown">
<li class="topNavTitle"><a href="" class="atopNavTitle">---A---</a>
<ul class="subuls">
<li><a href="a.php">AAA</a></li>
<li><a href="b.php">BBB</a></li>
</ul>
</li>
<li class="topNavSep"></li>
<li class="topNavTitle"><a href="" class="atopNavTitle">---B---</a></li>
</ul>
</div>
<style type="text/css">
li.topNavTitle a.atopNavTitle {
margin-top: 20px;
padding-top: 20px;
}
</style>
Hi, I am trying to move <a href="" class="atopNavTitle">---A---</a> <a href="" class="atopNavTitle">---B---</a> down 20px. I have tried the above style but it does nothing. What do I do wrong? Hey I got a table which displays the profile (data/info) of a user. The first column says: first name, last name, email, etc. the second column shows the actual data: stefan, blabla, blabla@hotm... etc. Then i have a third column where the 8 cells are rowspanned into one big cell. In this celll i want to show a picture that can be max: 250x250 pixels. The image might be smaller but not bigger. My problem is that some users have smaller pictures and some users have the maximum allowed dimensions. So if you browse through all the profiles by clicking the next button, the other elements on the page shift lower or higher depending on the size of the uploaded image. What i wanted to do is make a basic picture of 250x250 and put that in the cell for every member. And then display the real picture above the standard pic. I just dont know how to let the images overlap with eachother. Or is there a better way for this? I probably shouldnt use a table for this at all. But how do i make a table with the tabular data. And put the image next to the table? It automatically shifts to the next line for me... hope you can give me some tips. (my eventual goal is to make every user profile look exactly the same with the only difference being the data of the member-profile.) thanks in advance. |
|||||||