|
CSS - Misaligned Elements
I'm trying to learn CSS. I've taken great pains to get everything right. My pages all validate and they look correct on Firefox and mostly correct on Chrome. However IE is all over the place. If you view the below pages side by side on Firefox and IE, the following occur (in order of importance):
- the top main box is pushed below where the left boxes end - the upper-right drop-down stuff is totally off in the weeds (Chrome also looks like IE) - "Recipes" tab isn't borderless on the bottom edge - left boxes are the wrong size and push "Clear List" out of bounds - search button is off in relation to search box mcrackan.com/recipes/csstest.htm mcrackan.com/recipes/css/default.css (Sorry about the non-links. I'm apparently not allowed to post click-able links yet.) Can anyone point me in the right direction for whatever I'm doing wrong? - Dinah Similar TutorialsI am attempting to create a website for a hockey company, however I am at a loss with how to get the effects that I want. I am a novice web designer, and have tried so many different ways of coding this site. Frames, tables, and recently looked up a tutorial on slices in photoshop. My issue is that I am loading everything as an image and I'm afraid that my load time is going to be a lot more than it needs to be. Also, I can't get text and preview images to overlay the background where I want them to. I am trying to use AP elements, but since I have the website centered and the elements are an absolute value, depending on your window size the elements are misplaced. I am open to any and all suggestions as to how I should go about making this website while maintaining the style. I have a feeling I'm not going about this the most efficient way. I tried posting a link to the site but apparently new users can't post URLS?? If you are willing to help me out I'd really appreciate it, let me know how to get you the address. Thanks in advance! Hello, My header (please click here ) looks good on IE7 but not on FF and IE6 We are now inching towards a final page. Something happened at the top of the page though; the photo of me used to be closer to the banner jpg and the text Photographs by award winning film sound editor Michael Redbourn used to be to the right of it. There is an image here which might better explain what I mean.. //i43.tinypic.com/347csua.png Page code is here .. //paste.pocoo.org/show/207983/ Second problem is that the menu at the bottom was centered until I added top and bottom margins after which it moved to the left. Thanks for the ongoing help, Mike Hello, What's wrong with my logo? I have created the logo with no white background but seems like it has , thus my css behind this? default.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=iso-8859-1" /> <link href="css/comersus.css" type="text/css" rel="stylesheet" /> <title>Untitled Document</title> </head> <body> <div id="header_top"> <!--begin of header_top--> <img class="bck_green" src="images/bck_green.jpg" alt=""/> <img class="bck_dark" src="images/bck_dark.jpg" alt=""/> <img class="um_logo" src="images/um_logo.jpg" alt=""/> </div> </body> </html> css Code: #header_top {
width:721px;
height:116px;
}
.um_logo {
position:absolute;
float:left;
z-index:1;
background:url(../images/um_logo.jpg);
width:93;
height:90;
}
.bck_green {
float:left;
background:url(../images/bck_green.jpg) repeat-x;
width:337px;
height:116px;
}
.bck_dark{
float:right;
background:url(../images/bck_dark.jpg) repeat-x;
width:383px;
height:116px;
}
-sorry this is photoshop related , link is not accessible anymore Do any questions get answered here? How would I get a simple input form to align with a submit button? You can see the problem at: bit.ly/ovFGhR The CSS txt file: bit.ly/nMyP45 My CSS I think is telling the input text box to be a part of the paragraph above and the button sits below, misaligned. Please help!! My form's Submit and Reset buttons are centered and aligned properly in Firefox and Opera, but ,of course, look ridiculous in Internet Exploder 7 - aligned center, but stacked vertically with the Submit button on top of the Reset. My form markup is below - can you tell me how to apply correct CSS to make my buttons behave in IE? If it matters, keep in mind that my form appears in the page's center column. The left column is floated left and the right column is floated right. Code:
<div id="directory">
.
<ul>
<li>
<input class=\"submit\" name=\"submitButton\" type=\"submit\" value=\"Let's see 'em\" />
<input class=\"submit\" type=\"reset\" value=\"Clear the Form\" />
</li>
</ul>
.
</div>
and here's the applicable styling already in place:
#directory fieldset {
margin:1.5em 0 0 0; padding:0;
}
#directory legend {
margin:0;
padding-left:15px;
font-weight:bold;
}
#directory fieldset ul {
list-style-type: none;
padding: 1em 1em 0 1em;
}
#directory fieldset ul li {
padding-bottom: 1em;
}
Hi, I made an intranet webpage using PHP, MySQL, some JavaScript (collapsible 'windows') and CSS. In IE8 it looks like the image on the left. In Firefox 3.6 it looks like the image on the right. The rows are actually separate div elements, with tables inside them; this seemed to be the only way I could get the collapsible animation script to work without error. Without subjecting myself to the humiliating scrutiny of my appalling coding, is there any obvious tip towards making the table on the left appear a little more like the table on the right? The reason why I want to use IE8 to view this page is, in part, to take advantage of its ability to link to folders on the file system - something that Firefox cannot do (at least not without some customizing). I hope that makes sense and, as always, any help appreciated. Hi, Hope someone here can help me, having trouble with IE - there's a surprise! - and block elements, more specifically <p> and <ul>. As you can see from he http://dvxl.servehttp.com/Sites/Development/InfoCAP/Sites/dynamic/ .. the first line of the top paragraph has a larger line height than the rest, same with the top <li> of the <ul>. The xhtml is empty of styles, and the only styles applied to these elements a Code:
#main_content p {
margin-top: 0px;
margin-bottom: 15px;
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
text-align: justify;
text-justify: newspaper;
}
#main_content ul li {
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
list-style-type: square;
}
#main_content li {
line-height: 15px;
}
In Firefox the line heights are consistant, am I missing something? Thanks Hello all I have a page that uses css for the layout. The issue that I can not figure out how to fix is when someone re-sizes their browser the page content is all resized. How would I lock th positions of each span on the page so even if they resize (smaller) the browser the span's will stay where they are when the page is fully maximized on the users screen? I hope it is clear what I am asking. I tried puttin like a float tag but that does not work at all. Thanks all Jason I am at a total loss on this one. I'm trying to create a simple inline unordered list menu - no problems there - I've done that plenty of times. However, this time I would like my menu to have a border around it instead of being a plain box. As soon as I add the 'border-style:solid' modifier to the div, the text misaligns straight down, roughly 15px lines, out of the box. This happens on Firefox (and apparently on Opera as well, though I haven't checked that one myself). At this point I've stripped the page to bare bones, switched from transitional to strict, tried float vs not, tried margins vs 0 margins, and padding vs 0 padding, relative vs absolute, and attempted to manually shift the text through negative positions as well. No joy. Css: Code: /* Navigation */
#nav {
width: 821px;
height: 18px;
border: 1px;
border-style: solid;
border-color:red;
}
#nav ul {
}
#nav li {
display:inline;
float:left;
background-color:#9E0C0C;
text-align:center;
color:white;
font-family: arial, san-serif;
font-size: 14px;
font-variant: small-caps;
}
and page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <link href="style.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> <div id="nav"> <ul> <li>Home</li> <li>XXX</li> <li>XXX</li> <li>CCC</li> <li>HHH</li> <li>JJJ</li> <li>kkk</li> <li>KKK</li> </ul> </div> </body> </html> (As I said, I've stripped it to absolutely nothing else.) Any suggestions would be welcome. (ETA: Also tried changing text size in case a too-large font size was making the text 'pop out' of the box. That is also not it.) Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! I'm making a webpage for myself, and am coding to current Transitional XHTML and CSS standards. I'm using Firefox 0.9.2 for viewing the page. The problem I'm having is with adding a class to a <td> element and getting it to work correctly in IE 6. The CSS class I'm using for the <td> element is as follows: Code: .w3type{color: black; background-color: #FFCE6B;}
Code: .w3type:hover{color: white; background-color: red; background-image: url(images/mrgreen.gif); background-repeat: no-repeat; background-position: right;}
I add this class to a <td> tag: Code: <td class="w3type"> and when i view it in FF, the text and background work correctly, changing color and adding a little image to the right when I hover my mouse over it. The problem is that when I go to view the code in action with IE 6, neither the background nor the image will appear on hover. Is this a problem with IE, or my code? If you want to see the code on my site, here's the link. The css formatting in question is on the lower left corner of the page (the W3C webbadges). Thanks for any help I'm currently customizing a theme for a Drupal site and am having a bit of an issue with background images on some content. I have 1 class and an HTML element that I'm trying to apply the style to. I have a non-repeating background applied to the title class which is positioned to the left of the area. The second is a background I'm attempting to tile across the x-axis of the h2 element. This second background does not show while the first one is showing. Is there a way around this? I'm assuming that because it's the same element, I won't be able to get away with this and will have to find another solution. Here is my HTML Code: <h2 class="title"><a href="/drupal/node/1">Welcome to the Caustic Guild!</a></h2> CSS Code:
#mcol .title {
background: url(/drupal/themes/caustic/images/icon_post.gif) no-repeat 0px 2px;
}
#mcol h2{
background: url(/drupal/themes/caustic/images/mcol_head.jpg) repeat-x;
margin: 0px 0px 0px 0px;
padding: 2px 0px 6px 35px;
font-size: 180%;
letter-spacing: -1px;
text-align: left;
border: 3px solid #78788a;
}
Interesting situation i have. In my css i have this declared Code: css
a:link, a:visited { color: #c97c0f; text-decoration: none; font-weight: bold; }
a:active, a:hover { color: #82581d; text-decoration: underline; }
div#buenprov_content a:link, a:visited { color: #644e14; text-decoration: none; font-weight: bold; }
div#buenprov_content a:hover { color: #35290a; text-decoration: underline; }
For a change, IE displays the link colors correctly, the ones inside the div with the id buenprov_content have the color i want them to, and the rest of the page has the ones that are global. However, in firefox, they all inherit the traits from the #buenprov_content Even links not inside divs with that ID.... as shown: Here ( The ones in the fading content should be a different color ) Im building that site for a restaurant...but anyways, im a bit stumped as to why FF is doing this...any help? Thanks. Hello, I have the following css css Code: Original - css Code ul#menulist{ position:relative; top:0px; list-style-type:none; margin:0; padding:0; } ul#menulist li{ background-color:#717100; display:inline; margin:0; padding:0 10px; border:0; height:30px; } ul#menulist li a{ text-decoration:none; margin:0; padding:0; border:0; }
A gap is appearing between <li> elements in Opera and FF but not in IE. You can check it here Which is the correct behaviour? How do I remove the gaps between <li> elements in a valid way. Thank you. Hi guys, I don't know if this is possible.. I have a table with position: fixed and width: 100% height: 100% so it covers the entire screen. There is text behind it, you can see through the table and there is text back there. My problem is you can't click on anything in the background, behind the table. You can't select the text and you can't click the links because the table is blocking them. So my question is it possible to click through the table element on the links in the background and stuff? http://perfbase.com/beta/tablesector/v7/ I tried setting the middle td to visibility: hidden and display: none but that didn't work. I tried javascript events but click, mousedown, mouseover, none of them work for the text in the background. Thanks a lot! Hi all, after my last query it was suggested that my use of absolute positioning for every element was not necessary. I should go with the flow. So I copied a basic page structure and twiddled a little. Here is the result so far html link css link A couple of questions. 1. Would you say I'm on the right track, or should I be looking at a different style structure? 2. The page appears in ie to have gaps around the elements. In Mozilla it looks like I hoped it would look. How to close up gaps in ie. I'm trying padding, margin, negative values etc, Checking in the morning in hope of miraculous fix. No luck so far. Any help, advice appreciated. Thanks Solar.. I am definitely a novice in web design and CSS, so I hope I can tap into the collective knowledge of the more seasoned individuals on this board. Essentially, the website I created (http://www.wacwineclub.com) looks fine in Firefox, but some of the elements are shifted to the left in IE (Such as the menu and horizontal rule). For the life of me, I cannot figure out what is wrong. Any ideas? My code for the index and CSS files are as follows: INDEX.PHP<? Code: session_start();
?>
<meta name="description" content="Washington Athletic Club - Wine Club">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
<!--
.style5 {color: #FFFFFF}
.style7 {
font-size: 12px;
color: #FFFFFF;
}
.style8 {
font-size: 12px;
color: #ADADAD;
}
-->
</style>
<script src="/Scripts/swfobject_modified.js" type="text/javascript"></script>
<HEAD><TITLE>WAC Wine Club</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="Shaun Lewis" name=author>
<link rel="shortcut icon" href="Images/favicon.ico">
<LINK
href="wacwineclub.css" type=text/css
rel=stylesheet>
<META content="MSHTML 6.00.5730.11" name=GENERATOR><style type="text/css">
<!--
body {
background-color: #666666;
padding-bottom: 150px;
padding-top: 100px;
margin-left: 0px;
text-align:center;
}
#Slideshow {
padding-top: 4px;
}
#header {
height: 125px;
width: 800px;
}
#awmAnchor-menu {
background-color: #000000;
height: 30px;
padding-top: 0px;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 493px;
top: 1187px;
background-color: #FF00FF;
}
#Layer2 {
position:absolute;
width:200px;
height:115px;
z-index:3;
left: 380px;
top: 1187px;
}
#Layer3 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 200px;
top: 1187px;
}
#Layer4 {
position:absolute;
width:200px;
height:115px;
z-index:0;
left: -208px;
top: 171px;
visibility: visible;
}
#xawmMenuPathImg-menu {
}
a:link {
color: #ADADAD;
text-decoration: none;
}
#Layer5 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#Layer6 {
position:absolute;
width:200px;
height:190px;
z-index:1;
margin-left: 50px;
margin-top: 40px;
border-bottom: #000000 2px solid;
border-left: #000000 2px solid;
border-right: #000000 2px solid;
border-top: #000000 2px solid;
background-color: #E5E5E5;
float: left;
}
#Layer7 {
position:absolute;
width:180px;
height:160px;
z-index:1;
margin-left: 10px;
border-right: #000000 1px solid;
border-bottom: #000000 1px solid;
border-top: #000000 1px solid;
border-left: #000000 1px solid;
margin-top: 5px;
}
#Layer8 {
position:absolute;
width:500px;
height:300px;
z-index:1;
margin-left: 275px;
margin-top: 15px;
left: -127px;
top: 347px;
}
#Layer9 {
position:absolute;
width:160px;
height:69px;
z-index:1;
margin-left: 50px;
}
.style4 {
font-size: 16px;
color: #ADADAD;
}
.style6 {color: #ADADAD}
.style9 {font-size: 14px}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_controlSound(x, _sndObj, sndFile) { //v3.0
var i, method = "", sndObj = eval(_sndObj);
if (sndObj != null) {
if (navigator.appName == 'Netscape') method = "play";
else {
if (window.MM_WMP == null) {
window.MM_WMP = false;
for(i in sndObj) if (i == "ActiveMovie") {
window.MM_WMP = true; break;
} }
if (window.MM_WMP) method = "play";
else if (sndObj.FileName) method = "run";
} }
if (method) eval(_sndObj+"."+method+"()");
else window.location = sndFile;
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1035787-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</HEAD>
<BODY>
<? if($_SESSION['userid']>0) {?>
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu2",awmBN="766";awmAltUrl="";</script><script charset="UTF-8" src="menu2.js" type="text/javascript"></script>
<? } else {?>
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu",awmBN="766";awmAltUrl="";</script><script charset="UTF-8" src="menu.js" type="text/javascript"></script>
<? }?>
<script type="text/javascript">awmBuildMenu();</script>
<DIV id=container>
<DIV id=header><img src="Images/WWC-logo.jpg" width="258" height="125" align="left">
<table class="metroLog" border="0" cellspacing="0" cellpadding="0" align="right">
<tbody>
<? if($_SESSION['userid']>0){?>
<tr>
<td></td>
<td></td>
<td><span class="advLogRemoveChk style6 style9"><label for="masterPageUC_ctl00_ctl00_chkRM">Welcome WAC Wine Club Member</label></span>
</span></td>
<td></td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td><span class="advLogRemoveChk style6 style9"><a href="logout.php" class="logTxt style8">Logout </a></span>
</span></td>
<td></td></td>
<td></td>
</tr>
<?
} else {?>
<form action="logincheck.php" method="post">
<tr>
<td><span class="memLog style6 style9">Member Login</span></td>
<td width="8"></td>
<td class="unpwField" width="118"><input name="uname" type="text" class="unpwField" id="uname" style="#unpwField" tabindex="1" onFocus="tbFocus(this);" onBlur="tbBlur(this);" value="USERNAME" maxlength="50" /></td>
<td width="8"></td>
<td class="unpwField" width="118"><input name="upass" type="password" value="PASSWORD" maxlength="50" id="upass" tabindex="2" class="unpwField" onFocus="tbFocus(this);" onBlur="tbBlur(this);" onKeyPress="pwKeypress(this);" style="" /></td>
<td class="metroBorder"><input type="image" name="masterPageUC$ctl00$ctl00$btnLogin" id="btnLogin" tabindex="3" src="Images/btn_Login.jpg" alt="Click to Login" style="border-width:0px;" /></td>
</tr>
<tr>
<td height="5" colspan="6"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><span class="advLogRemoveChk style6 style9"><input id="rememberme" type="checkbox" name="rememberme" value="1" />
<label for="masterPageUC_ctl00_ctl00_chkRM">Remember Me </label>
</span></td>
<td></td>
<td><a href="Login-Help.html" class="logTxt style8">LOGIN INSTRUCTIONS </a></td>
<td></td>
</tr>
</form>
<? }?>
<tr>
<td colspan="6"></td>
</tr>
</tbody>
</table>
</div>
<hr align="center">
<div id="awmAnchor-menu"> </div>
<div id="Slideshow">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="250">
<param name="movie" value="/slideshow.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="6.0.65.0">
<param name="expressinstall" value="/Scripts/expressInstall.swf">
<object type="application/x-shockwave-flash" data="/slideshow.swf" width="800" height="250">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="6.0.65.0">
<param name="expressinstall" value="/Scripts/expressInstall.swf">
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
</object>
<!--<![endif]-->
</object>
</div>
<?php
require 'footer.inc';
?>
</DIV>
</DIV>
</DIV>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="Development">
<tr>
<td><div align="right" class="style7">Website Development by <a href="mailto:shaun@wacwineclub.com">Shaun Lewis</a></div></td>
</tr>
</table>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
</script>
</BODY></HTML>
WACWINECLUB.CSS Code: #container {
BORDER-RIGHT: #000000 15px solid;
div align='center'
PADDING-RIGHT: 0px;
BORDER-TOP: #000000 5px solid;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
BORDER-LEFT: #000000 15px solid;
MARGIN:0 auto
WIDTH: 800px;
PADDING-TOP: 5px;
BORDER-BOTTOM: #000000 5px solid;
POSITION: relative;
BACKGROUND-COLOR: #000000;
TEXT-ALIGN: center;
margin-top: 20px;
width: 800px;
margin-left: auto;
margin-right: auto;
font: Garamond;
font-family: Garamond, Georgia, Serif;
}
#content {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 10px 0px 10px 120px;
WIDTH: 663px;
PADDING-TOP: 0px;
height: 811px;
border-bottom: #000000 2px solid;
border-top: #000000 2px solid;
border-left: #000000 2px solid;
border-right: #000000 2px solid;
background-color: 000000;
}
#footer {
PADDING-RIGHT: 0px;
BORDER-TOP: #000000 1px solid;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 0px;
MARGIN: 25px 0px 0px;
COLOR: #ADADAD;
PADDING-TOP: 0px;
HEIGHT: 1.5em;
background-color: #000000;
text-align: right;
width: 800px;
font-family: Garamond, Georgia, Serif;
}
#masthead {
MARGIN: 0px;
BORDER-BOTTOM: #000000 1px solid;
HEIGHT: 250px;
background-color: #000000;
}
#navigation {
BORDER-RIGHT: #7c70da 1px solid; LEFT: 4px; WIDTH: 170px; POSITION: absolute; TOP: 230px
}
#upper {
width: 400px;
}
#upper #Upper2 {
background-position: right;
width: 400px;
right: auto;
float: right;
}
DIV.menu A:link {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 2em; BACKGROUND: url(../images/bullet.gif) no-repeat 3px 0.5em; PADDING-BOTTOM: 2px; COLOR: #3e31a2; PADDING-TOP: 2px
}
DIV.menu A:visited {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 2em; BACKGROUND: url(../images/bullet.gif) no-repeat 3px 0.5em; PADDING-BOTTOM: 2px; COLOR: #3e31a2; PADDING-TOP: 2px
}
DIV.menu A:hover {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 2em; BACKGROUND: url(../images/bullet.gif) #7c70da no-repeat 3px 0.5em; PADDING-BOTTOM: 2px; COLOR: #ffffff; PADDING-TOP: 2px
}
@media Print
{
#container {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0 auto; WIDTH: 100%; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
#footer {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 10px 0px 0px; WIDTH: 800px; COLOR: #000000; PADDING-TOP: 0px; BACKGROUND-COLOR: transparent; BORDER-RIGHT-WIDTH: 0px
}
}
#container #awmAnchor-menu {
background-color: #000000;
width: 800px;
}
#Developer {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: right;
margin-top: -15px;
}
#Development {
font-family: Garamond, Georgia, serif;
font-size: 14px;
color: #FFFFFF;
left: auto;
right: auto;
}
.unpwField {
font-family: Garamond, Georgia, serif;
font-size: 12px;
}
#metroLog {
font-family: Garamond, Georgia, serif;
font-size: 12px;
}
Hi guys, could you help me out with following issue: See this Picture for better understanding: http:// picasaweb. google.se/lh/photo/e446yLNWr_eTqkiwPK0-CA?feat=directlink WHat i have is a div container (mainContent) In which i have some text in a Paragraph <P> and in the middle of this <P> i am trying to make a box which will contain a list of links. Have no clue how to achieve this. My idea would be: <div id: mainContent> //text//<div style="???"> //Link//<div style="float:right; DONT Know how to lower vertically??"> Good ideas for where i can find a solution? |
|||||||