|
CSS - Need Help Aligning And Centering My Elements
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. Similar TutorialsI'm trying to align an image, header, and some text that is right aligned all on the same row. I've been reading so much about inline and block elements that my head feels like it's going to explode. It would look like this: Code: Picture - Header Text over here I'm not sure if everything should be span inside one class or what. I'm very confused. Please help a noob. I have a logo and would like to align an H1 and an H2 beside it. So, I would have: Code:
| H1 text
image|
| H2 text
If I add a display inline to both elements, I get the H2 beside the H1 instead of under. If I add it to only the H1, I get the H1 beside the image, and the H2 under the image. What would be the proper way to do this? hi....i'm trying to align some elements inthe left cell of a table that separates the two main areas of my site....table structure is as follows Code: <table height="100%" cellSpacing="0" cellPadding="0" width="100%" bgColor="#333333" border="0"> <tr> <td id="leftcell" width="267" vAlign="top" bgColor="#999999"> <div id="logo"><IMG align="right" height="266" src="images/logo-c.gif" width="256"></div> <div id="baby-foot"><A href="mailto:#">dog@the bomb.com</A> P:323-957-0572</div> <div id="maillist"><asp:textbox id="_email" Runat="server" Width="192px">Enter Email To Join Mailing List</asp:textbox><asp:button id="_join" Runat="server" Text="Join" CssClass="join"></asp:button></div> <div id="search"><uc1:sidesearch id="Sidesearch1" runat="server"></uc1:sidesearch></div> <div id="fav"><uc1:favlist id="Favlist1" runat="server"></uc1:favlist></div> </td> <td id="rightblock" vAlign="top"> <td id="rightblock" vAlign="top">....main content area...</td> and the css2 Code: #logo { BACKGROUND-IMAGE: url(../images/logo-c.gif); BACKGROUND-REPEAT: no-repeat; HEIGHT: 266px; BACKGROUND-COLOR: #000000 }
#baby-foot { PADDING-LEFT: 11px; FONT-SIZE: 11px; VERTICAL-ALIGN: top; WIDTH: 256px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif; HEIGHT: 30px; BACKGROUND-COLOR: #000000; TEXT-DECORATION: none }
#maillist { PADDING-LEFT: 11px; BORDER-BOTTOM: #ff0000 1px solid; HEIGHT: 60px; BACKGROUND-COLOR: #000000 }
#search { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 256px; PADDING-TOP: 5px; BORDER-BOTTOM: red 1px solid; BACKGROUND-COLOR: #666666 }
#fav { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 256px; PADDING-TOP: 5px; BACKGROUND-COLOR: #999999 }
ok....the way it's set up now looks fine in safari and netscape (the fav and search controls push the cell beyond 256px but the right floating logo-c.gif flows with the push) however, in IE the controls are fixed at 256 and the logo-c pushes the cell a few pixels right exposing a slice of the table's back color... any suggestions for a work around? thank, b 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 Nevermind: solved I am a bit new to CSS and am currently in the process of converting a design over to CSS2 and have run into come difficulty. I've created a list based horizontal menu and I want elements to align to both the left and right ends. Simply by adding "float:left" to most of the elements and "float: right" to others, I was able to get it to work, but strangely only in Internet Explorer, not in Firefox. The latter seems to drop my right aligned image onto the next line. For the offending code, please see: http://www.forma3.com/stuff/css/top_menu_v1.html http://www.forma3.com/stuff/css/css/right_menu_v1.css Also, any suggestions on the code would be highly appreciated. I have no doubt its more verbose than needed. 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 For some reason, I cannot get my 2 form elements to line up as far as height is concerened. No matter what I try, one is always slightly taller than the other, even if I set both to the same height. Any ideas? Code: input[type="text"], select {
color:#888888;
font-size:10px;
height:auto;
}
I was wondering what is the best practice for aligning elements on same "line"? for example, say I have a header of the site with logo on left most side and on the right side I want to have right-aligned text with a link of a variable width, how would I achieve this? Do I need 2 separate divs that float left and have set width? Example: 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! www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please. CSS LINK http://www.devwebsites.com/estilos.css After browsing through w3schools and learning most of what css has to offer I for some reason can't figure out a way to align items using css. I was just wondering if someone could help me with the correct tag. Hi everyone, I am having trouble aligning my content to the edge of the table somehow it shows 20pixels down and I cann't figuere out how to bring it up. Any help will be greatly appreciate. thanks Code:
<style>
ul { list-style-type: none; margin: 1.0em 0 0 0px; padding: 0; position:relative; overflow: visible; height: auto; text-decoration: none; color: #33FF00;}
ul li { text-decoration: none; width: 230px; color: #000; }
ul li a, ul li a:visited {height: 1.2em; width: 200px; display: block; text-decoration: none; background: blue; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px; color: #000;}
ul li a:hover { height: 1.2em; display: block; background-color:#FF0000; color: #fff000;}
ul li a.currentpage, ul li { height: 1.2em; text-decoration: none; background: #00ffff; padding: 3px; color: #fff;}
</style>
<table width="234" border="1">
<tr>
<td width="230" height="85">
<ul><li><a href="">HOME</a></li>
<li><a href="">LINK TWO</a></li>
</ul>
</td>
</tr>
<tr><td></td></tr>
</table>
Hi I have an issue aligning some links. i have it perfect in FF but it is not the same in IE. http://www.sun-awnings-direct.co.uk/the-carino-p-29.html It is the white breadcruumb trail in question. Can anyone advise what IE is doing differently and how I can solve it? Thanks a lot I have a full css site that im in the mits of creating. It has 3 colums across in the main part of the site as you will see in the link below that some of my divs dont seem to be lining up w/ the top of the page... http://www.pollutionpaintball.com/version3/dennis_wells.html I have the first column that contains the thumbnails floating right with a margin-left of the navgition width and the profile div width. Next I have the navigation floated left Then I have the profile section in a div w/ a left - margin the size of the navigations width... any pointers would help... Hi all, I am having trouble getting my third column to sit in place correctly. Here is the code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0051)http://www.jonra.com/css-demos/css-layout-demo.html --> <HTML><HEAD><TITLE>CSS layout using divs</TITLE> <META http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <META content="" name=Keywords> <META content="" name=Description> <STYLE type="text/css" media="all"> @import url( css/commonSite.css ); </STYLE> <META content="MSHTML 6.00.2900.2668" name=GENERATOR></HEAD> <BODY> <DIV class="panelS"> <DIV class="colOne"><IMG src="images/nav_sites.gif" align="right" alt=""> <DIV class="colTwo"> <DIV class="linkS"> <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> | <A href="http://homepages.com/" target="_parent">homepages.com</A> </DIV> <DIV class="colThree"></DIV> </DIV> </DIV> </DIV> </BODY></HTML> Code:
.panelS
{
BACKGROUND-COLOR: #adadad;
WIDTH: 760px;
position: absolute;
}
.colOne {
FONT-WEIGHT: bold;
FONT-SIZE: medium;
LEFT: 0px;
WIDTH: 85px;
COLOR: #ffffff;
HEIGHT: 21px;
position:relative;
}
.colTwo {
FONT-SIZE: medium;
LEFT: 85px;
WIDTH: 475px;
HEIGHT: 21px;
background-color:#FF6633;
position:relative;
}
.colThree {
FONT-SIZE: medium;
LEFT: 560px;
WIDTH: 200px;
COLOR: #ffffff;
HEIGHT: 21px;
position:relative;
background-color:#00CCCC;
}
.linkS
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:link
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:visited
{
FONT: bold 10px Verdana;
COLOR: #fff;
TEXT-ALIGN: right;
TEXT-DECORATION: none
}
.linkS A:hover
{
FONT: bold 10px Verdana;
COLOR: #0055c3;
TEXT-ALIGN: right;
TEXT-DECORATION: underline
}
I was wanting all the columns side by side. Any ideas where i might be going wrong? Cheers http://s125392025.websitehome.co.uk/layout.html I'm making a layout, in this layout(as you can see), I have a SubNav and a main body part. Both of those sections, have a header image and a footer image. Well, my body footer image isn't aligning directly with the main body. It's off by about 1 or 2px. I tried using: position:absolute; With a few different types of top, and bottom, but the picture only dissappears. I used the exact same line code for the footer image for the subnav, and it has aligned just fine. Here's the script if it matters. Could anyone help please? PHP Code: <!DOCTYPE html PUBLIC> <html> <head> <title>2 Box Layout Test</title> <style type="text/css" media="screen"> /* Here is the main CSS */ body { background: #FFFFFF; } div { background: #FFFFFF; } h5 { text-align:center; } #mid, #left { top:120px; } #midcontainer { width:400px; margin:0 auto; position:relative; left:35px; top:44px; } #midheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head400.jpg) top left no-repeat;height:30px;z-index:-1; } #midfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot400.jpg) top left no-repeat; height:30px; } #leftheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head200.jpg) top left no-repeat;height:30px; } #leftfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot200.jpg) top left no-repeat;height:30px; } #midbody, #topbody, #leftbody { border:1px solid black;background: #a3a3a3; } p.top1 { text-align:center; } p.midheadtxt { font-weight:bold; text-align:center; position: absolute; top:-5px; left:180px; } p.leftheadtxt { font-weight:bold; text-align:center; position: absolute; top:-5px; left:50px; } #leftcontainer { width:200px; position:absolute; left:5px; top:150px; } </style> </head> <body> <!--This is the main site header properties--> <div id="top"> <div id="topbody"> <h5>Main Site Header</h5> <p class="top1">This is where the main image, and TopNav will go.</p> </div> </div> <!--This is where the main body text goes for the page--> <div id="mid"> <div id="midcontainer"> <div id="midheader"> <p class="midheadtxt">News</p> </div> <div id="midbody"> <h5>Middle</h5> <p>This is where the main section of the site is located.</p> </div> <div id="midfoot"> </div> </div> </div> <!--This is the subnav area--> <div id="left"> <div id="leftcontainer"> <div id="leftheader"> <p class="leftheadtxt">Sub-Navigation</p> </div> <div id="leftbody"> <p>This is where the subnav is located.</p> </div> <div id="leftfoot"> </div> </div> </div> </body> </html> I started out working out a page thinking this *should* do what I want and lo and behold it did work in IE6 http://www.fogcat.co.uk/example/test002.html But when looking at Firefox it goes all odd. If you remove all the internal "imagediv" div from the "imagechunk" div it nearly works but doesn't algin the "link text" like IE. I'm told that display:inline-block is not properly supported, which is probably the root of my problems. What I want a set of divs down the page (the "imagedivs") Each div will contain An image - but that image will be nested inside a div - it's returned that way from a php function. Images may be of varying height so I can't use pixel values at top margins or anything like that. A link to another page The link should be positioned to the right of the image and aligned vertically with the centre of the image. This is one of those things that's a doddle with tables, but I'm trying to train myself to think CSS. What obvious thing am I over looking? Code: +--------------------------------------+ | +----------------+ | | | .............. | | --- <div> | | : : | | ... <img> | | : : | Link here | | | : : | | | | .............. | | | +----------------+ | +--------------------------------------+ +--------------------------------------+ | +----------------+ | | | .............. | | | | : : | | | | : : | Link here | | | : : | | | | .............. | | | +----------------+ | +--------------------------------------+ HI there I am wondering if anyone can help with a css issue I am strugging to resolve. The url is simplyroomsandsuites co uk (forward slash) blog You can see where the footer image is floating left.. I have tried to float it centrally but it disappears. Thanks for any help. .footerArea {float: left; display: inline; width: 950px; background: url(/images/main_area_bottom_curve.png) top left no-repeat; padding: 30px 0 20px 0;} |
|||||||