|
CSS - Some Elements Not Quite Center/not Centering (beginner)
Nevermind: solved
Similar TutorialsI 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;
}
I am trying to have an element that will float above the others on the page and also be centered. When I make the position absolute, it will float above the others, but won't center (dynamically with window resize) and if I make the position auto, it will center but not float above the others. Here is the style: Code:
.main {
position:auto;
margin: 0px auto;
text-align: center;
width: 800px;
background-color:red;
z-index:1;
}
Thank you The Website in Question I just started to remake my portfolio site from scratch, and since I'm a crappy coder, I ran into a brick wall right away. It was easy horizontally and vertically centering the tan rectangle, but for the life of me I can't get the green sliding panel where I want it, and have it otherwise horizontally and vertically centered at all times. How I want it: Example I think the problem may be a conflict between the javascript that enables the sliding function of the green panel and the CSS trying to center it. The javascript demands absolute positioning of the two divs (the part that says "PORTFOLIO" and the part that slides right), because that's what tells the sliding panel where to slide and expand to. However, the CSS demands relative positioning, in order to position the panel a percentage down the page, and half its height in pixels back up again, as well as the horizontal alignment. Below is the source code for the site. At the moment, the sliding panel (its code is shown in blue) is set to be in the top left corner of the site, but it obviously isn't. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<head>
<title></title>
<style type='text/css'>
body, html {
height:100%;
}
#container{
height:100%;
text-align: center;
}
#panel {
width: 700px;
height: 500px;
position:relative;
top:50%;
margin-top:-257px;
left:50%;
margin-left:-350px;
}
body {
background-image: url(bg3.gif);
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="container">
<div id="panel"><img src="work.png"></div>
</div>
<script type="text/javascript" src="Animation.js"></script>
<div style="position:relative;
width:350px;
height:520px;
top:0px;
left:0px;">
<div id="exampleHeader"
style="position:absolute;
width:50px;
height:500px;
top:0;
left:0px;
background:#298b12;
text-align:center;
color:#FFFFFF;
-moz-border-radius-topleft: 25px;
-webkit-border-top-left-radius: 25px;
-moz-border-radius-bottomleft: 25px;
-webkit-border-bottom-left-radius: 25px;"
onclick="runAnimation(animationObject, this)">
<img src="pf.png">
</div>
<div id="examplePanel"
style="position:absolute;
width:0px;
height:500px;
top:0px;
left:50px;
background:#ac926d;
background-image: url(pbg.gif);
background-position:right top;
overflow:hidden;
-moz-border-radius-topright: 25px;
-webkit-border-top-right-radius: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-bottom-right-radius: 25px;"
align="center"
overflow:hidden;">
Content
</div>
</div>
<script type="text/javascript">
var animationObject = new AnimationObject('examplePanel');
animationObject.AddFrame(new AnimationFrame(50, 0, 210, 500, 400));
function runAnimation(animation, header) {
if(header.check) {
animation.RunBackward();
header.check = false;
}
else {
animation.RunForward();
header.check = true;
}
}
</script>
</body>
</HTML>
I just can't seem to get my code to work. Can anybody offer any help to solve this problem? I'd really appreciate it. Good evening, I'm trying to center a horizontal menu on a website, and I can't seem to get the right code tags in the write places. I'd like to get the links on the menu to center on the page, and perhaps to display in a consistent width text box. My menu bar is 900px, and there are 10 links, so for instance I would like to reduce these boxes containing the links to a consistent 90px. Any thoughts? website - http://www.squadron282.com CSS Code: Code:
.nav2 {clear: both; margin: 0px; padding: 0px; font-family: verdana, arial, sans serif; font-size: 1.0em;}
.nav2 ul {float: left; width: 900px; margin: 0px; padding: 0px; border-top: solid 1px rgb(54,83,151); border-bottom: solid 1px rgb(54,83,151); background-color: rgb(127,162,202); font-weight: bold; white-space:nowrap}
.nav2 li {display: inline; list-style: none; margin: 0px; padding: 0px;}
.nav2 li a {display: block; float: left; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-right: solid 1px rgb(54,83,151); color: rgb(255,255,255); text-transform: uppercase; text-decoration: none; font-size: 100%;}
.nav2 a:hover, .nav2 a.selected {color: rgb(50,50,50); text-decoration: none;}
.buffer {clear: both; width: 900px; height: 30px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);}
HTML Code: Code: <div class="nav2"> <ul> <li><a href="index.html">Home</a></li> <li><a href="missions.html" class="selected">CAP Missions</a></li> <li><a href="sqinfo.html">Squadron Info</a></li> <li><a href="commanderscorner.html">Commander's Corner</a></li> <li><a href="resources.html">Member Resources</a></li> <li><a href="pics.html">Photo Gallery</a></li> <li><a href="contact.html">Contact Us</a></li> <li><a href="sitemap.html">Sitemap</a></li> </ul> </div> How do I align menu elements of my menu? In Mozilla the elements are leaning conpletely to the left of the screen and doing somewhat what they're supposed to do in internet explorer. To put it simply I'd just like to have the same style class used to center the menu items in both Mozilla and Internet explorer. Heres the html page : Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" title="thisstyle CSS"></head><body>
<style>
body
{
background-color: limegreen;
<font FACE="Lucida Console">
}
</style>
</head>
<body>
<div id="menu">
<ul align="center">
<li><a href="users/register.php">Join</a></li>
<li><a href="users/Log_in.php">Login</a></li>
<li><a href="users/help/tour.html" >Tour</a></li>
<li><a href="users/contact.php">Contact</a></li>
</ul>
</div>
</body></html>
Heres the css style sheet : Code:
#menu {
clear: both;
margin: 30; padding: 0 40px 0 0;
background: url(menu.jpg) repeat-y center top;
font: bold 12px/26px Lucida Console;
height: 26px;
background: #006633;
}
#menu ul {
float: left;
list-style: none;
margin-top:0; padding: 0;
margin-right:0; padding: 0;
margin-bottom:0; padding: 0;
margin-left:90; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: inline;
float: left;
padding-top: 0px;
padding-right: 28px;
padding-bottom: 0px;
padding-left:8px;
color: gold;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #ffff33;
color: #006633;
}
#menu ul li#current a {
background-color: #eee;
color: #333;
}
Thanks 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 am using the following code how do I change it so that it would show up in the center of the brower window? Thanks Tim PHP Code: <div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\"> <object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0 ,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\"> <param name=\"allowScriptAccess\" value=\"sameDomain\" /> <param name=\"movie\" value=\"ads/cardio3.swf\" /> <param name=\"loop\" value=\"false\" /> <param name=\"quality\" value=\"high\" /> <param name=\"wmode\" value=\"transparent\" /> <param name=\"bgcolor\" value=\"#ffffff\" /> <embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" /> </object> </div> So here is my current code: Code: body {
color: gold;
background-color: black;
}
#main {
align: center;
}
#header {
width: 600px;
height: 150px;
border: 1px solid;
background-image: url('http://localhost/web/css/images/header.jpg');
}
#links {
width: 600px;
}
#links ul {
vertical-align: center;
}
#links ul li {
padding-left: 10%;
display: inline;
}
#content {
border: 1px solid;
text-align: center;
width: 600px;
}
As the title said, I am a complete beginner to CSS, so any criticism on my code is always welcome. The HTML to go along with this: Code: <html> <head> <title>Test Corp Site</title> <link rel="stylesheet" type="text/css" href="corp.css" /> </head> <body> <div align="center"> <div id="header"></div> <div id="links"> <ul> <li>Home</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> </ul> <div id="content"> <h1>Testing</h1> <p>This is just a test to see if I can actually design the corp website!</p> </div> </div> </body> </html> Screenshot That's essentially what it creates. My question is this: If you look at where the supposable links are supposed to go, you'll see that they are slightly crooked, more off to the right. Well I want them to be exactly centered. As you can see the div layer is defined as being only 600px wide, so I want the links to be centered inside that 600px box and retain their padding at the same time. I have tried using things like vertical-align but I can't seem to get it to center correctly. What am I doing wrong? Hello all, this is my first post! I hope I will be able to learn and contribute. first off, im a programmer, and I want to start making web sites! My websites will be simple, so what I am looking for is: ***important note: I am only looking for a simple 3 column + header + footer layout. The most versatile layout - whether it is pure css, or minimal tables - the layout that will work with the maximum possible amount browsers new and old, the most or at least most popular resolutions, whether it is liquid or fixed. A resource or means by which I can test layouts on the available platforms, e.g, IE, mozzila, opera, mac etc. - is there a site you can submit your code to and do this? Thankyou very much for your time, TheLove - youll get some of it! Hi, beginner question. How do I achive this Code: <TABLE BORDER="1" CELLPADDING="5"> in my CSS? Thank you for your help? Hello, I just started trying to learn about css and html layouts by following this tutorial he hxxp://www . subcide.com/tutorials/csslayout/page2.aspx This is my webpage: (link removed as issued is resolved) but I'm having issues making the navigation look correct (not repeat and be about 50 px down) Can someone give me a little hand. ? cheers. ps....errrr...I see nothing that I am doing wrong in the forum rules about the urls...... I'm an HTML+CSS beginner and I'm creating a website from a template. The style sheet of the website defines stuff like headers as suited to the general look and feel off the website. Good. But the website allows me to post articles and the articles (which are written with an HTML editor so they use standard HTML elements) pick up those styles and they look terrible. I think the easiest solution is for me to create some new styles in my CSS specifically for articles. Then, when I post a new article, I would add something to the article's HTML instructing it to use those new article styles instead of the general styles. So, I tried adding this to my CSS file: #article h1 { color:#ffffff; } And I surrounded the HTML of my article with this: <div class="article"> ....the article's HTML </div> But this didn't have any effect on how the <h1> within the article is displayed. What am I doing wrong? Hi all, Does anyone have any good suggestions for a CSS book? I'd like to buy an all in one, that will teach me CSS. Thanks for any help I've been working in CSS, man, is it tiresome for a beginner! After much trail and error, I've come up with my first CSS page. Where I'm stuck, is in the area where all the text is. When I put more text into that page, none of the surrounding styles/boxes[?] adjust to the text format (also shown in a link below), and I can't seem to figure out how to center the entire page itself. Sorry, for the stupid questions, I'm a total novice, and can barely understand most of the CSS postings in this forum. Text extending instead of expanding layout: http://rafia.info/css/layers.bad.htm Thanks sincerely, rups27 Well, I've started diving into CSS and I'm pretty intimidated by it. A lot of it seems to go counter the intuition that I could rely on as long as I worked with tables in a WYSIWYG editor, lol... I'm trying to do something with CSS that looks darn simple, but I just can't get it to work! I can't post hyperlinks, it seems. So you'll have to paste this URL of an explanatory picture into the address line yourself img262.imageshack.us/img262/1278/layoutro9.jpg Basically what I need is a two-column design: - column on the left is fixed-width and contains some seperate containers lined up vertically; these should resize (vertically) when content requires - column on the right is supposed to be the widest and also contains seperate containers lined up vertically; initially, the middle one of them is a picture that is resized to fit the browser window. Now it comes: I use javascript to expand the image to full-size when the user clicks it. What I want is that the column on the left is completely unaffected by this, that the picture expands to the RIGHT (going beyond browser window and can be viewed entirely by scrolling with the scrollbars), and that the container below the picture moves down with it and doesn't move below the left column. I've been trying a couple of things but always end up with issues, most probably because I haven't given it enough time. But I'm getting frustrated quickly because this looks SO simple!! Just to be clear: all I need is a CSS layout that arranges the 7 or 8 "boxes" correctly for this purpose. I would be very thankful if someone could show some working code. JoH I'm having a problem with my links becoming deactive within some nested elements. I followed some instruction on creating rounded corner boxes via a tutorial by Andy Budd. Anyway, it all works great except when I wrap link tags around a few pieces of copy. I'm a bit of a beginner still so maybe this is a simple fix but I've spent over a days worth of time now trying to figure it out on my own and can't seem to get it. Just to clear this up, the links work everywhere on the page outside of the "box" element I'll list below and I've double and triple checked that the link within the "box" element is written correctly and it is. The CSS even finds the link and styles it correctly, however, the mouse function seems to be disabled. Does this all make sense? Below is the CSS, any help would be greatly appreciated... This is the code that creates the box and it works correctly... Code: .box {
width:831px;
background:url(../imgs/box-spacer.gif) repeat-y;
}
.box h1 {
background:url(../imgs/box-top.gif) no-repeat left top;
padding-top:40px;
font-weight: normal;
}
.box .last {
background:url(../imgs/box-bottom.gif) no-repeat left bottom;
padding-bottom:60px;
}
.box h1, .box p {
padding-left:60px;
padding-right:60px;
}
And this is the code I used to test that the page is seeing it as a link... Code: .box h1 a:link {
color:#00CCFF;
}
.box h1 a:hover {
color: #FF0066;
}
It changes the color correctly but the hover doesn't work and if you click, it doesn't link you anywhere. Again, the link is written correctly on the page. Can anyone help please? I appreciate it. hi there, i am new to css and creating a gallery. What i want to do is create a medium size pop up when you rollover the thumbnail and have a full size image displayed when the thumbnail is clicked. I have to use lightbox javascript to display full size images, which works ok, but the problem has come trying to get both this and the roll over to work. At the moment i have both elements working, although it produces two thumbnail images. How can i use this code whilst making only one thumbnail appear? <a href="images/cramps/full size/c1.jpg" rel="lightbox" title="Here is the image caption"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> </a> <a class="thumbnail" href="#thumb"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> <span><img src="images/cramps/medium size/cm1.jpg" /><br /> </span></a> sorry if this is vague, i will answer any questions the best i can, all help appreciated! I'm not quite sure how to do this: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#content {
float: left;
width: 437px;
margin: 10px;
margin-top: 0;
} /* end #content */
#content ul {
list-style-type: none;
margin-top: auto;
padding-bottom: 1em;
background-color: #00ff00;
} /* end #content ul */
#content ul li {
float: left;
} /* end #content ul li */
#content ul li a {
position: relative;
left: 1px;
top: 1px;
text-decoration: none;
color: #ff0000;
} /* end #content ul li a */
#content p { clear: both; }
.shadow {
color: blue;
position: absolute;
left: -1px;
top: -1px;
} /* end .shadow */
</style>
</head>
<body>
<div id="content">
<ul>
<li><a href="#">Link 1<span class="shadow">Link 1</span></a></li>
<li><a href="#">Link 2<span class="shadow">Link 2</span></a></li>
<li><a href="#">Link 3<span class="shadow">Link 3</span></a></li>
<li><a href="#">Link 4<span class="shadow">Link 4</span></a></li>
</ul>
</div>
</body>
</html>
I need the text to be centered in the green box. Not sure the best way to do that. I need to center an img that I have fade in how do i change the below code so that it centers in the page STYLE=\"POSITION: absolute; HEIGHT:75%;WIDTH:75%;TOP:5;LEFT:0;VISIBILITY:VISIBLE; ZINDEX:1\" thanks tim I am having a small problem with centering a main container div.. The main div is 700 pixels wide .. I have numerous divs inside this container div. Everything is peachy, but I cant seem for the life of me to get the container div centered in the browser window... I tried <div align="center"> even tried text-align:center; any thoughts? |
|||||||