|
CSS - Alignment Help
I am working on a site that I have taken over development of and there is an alignment problem here any ideas on what the problem is or how to fix it? Thanks!
Similar TutorialsI have two columns (menu and content) and would like them to be horizontally aligned to the center sensitive to the size of the browser and relative to each other. I have figured out how to do this with the content column (right one) but I'm having trouble doing this with the menu column. I would like it to be equally space relative to the placement of the content column. Any help would be appreciated. Here's the code: Code: / { margin: 0; padding: 0; }
body { font-size: 12px; font-family: Helvetica Neue, Arial, Verdana, sans-serif; background: #F2F2F2; }
body.section-1 { }
body.section-2 { }
body.section-3 { }
a:link { text-decoration: none; } a:active { text-decoration: none; } a:visited { text-decoration: none; color: #666; } a:hover { background-color: black; color: #f2f2f2; } a img { border: none; }
#menu { width: 130px; overflow: hidden; top: 40px; position: fixed; height: 100%; background-color: #e6e6e6; text-align: left; margin: 0px 0px 0 0px 180px; left: 12%; }
#menu ul { list-style: none; margin: 0px; }
#menu ul li.section-title { }
#content { height: 150%; width: 700px; margin: 0 0 0 300px; top: 40px; position: relative; background-color: white; overflow: auto; padding: 15px; margin-left: auto; margin-right: auto; } .container { padding: 0px; }
#content p { width: 400px; margin-bottom: 15px; }
p { margin: 0 0 9px 0; } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 16px; } h4 { font-size: 12px; }
#img-container { margin: 0; padding: 0; }
#img-container p { width: 400px; margin: 0; padding: 0 0 12px 0; } #once { clear: left; }
HI, I'm trying to get a line of text to lineup with a textbox using css. The code I have is as follows: Code:
.row {
height: 30px;
vertical-align: text-top;
}
.formField {
border: 1px solid #666;
width: 150px;
background: #FFFFFF;
color: #000000;
}
<body>
<div class="row">
xxxxx: <input type="text" class="formField">
</div>
</body>
The textbox is sitting just above the text. How can I get them lined up properly? hey all... i have got a prob with a area in IE. It looks great when the users browseer is fullscreen and no favourites/history etc window is open. However once the window is resized or fav's are turned on then the content div drops to the bottom works fine in Moz FF but can't make it work in IE.. any ideas from anyone would be really great. thanks the link to the page is here and for the css click here thanks in advnaced ! RF Been trying to get these divs to align but with no success. Can someone be so kind to show me how to get the XHTML/CSS to look like the attachment below... PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> <title>Top Bar</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> <!--/*--><![CDATA[/*><!--*/ .bdr { width:100%; height:122px; background-color:#aaaaaa; text-align:center; border:#000000 3px double; } .lchief { float:left; width:69%; height:122px; background-color:#ffffff; text-align:center; } .rchief { float:right; width:382px; height:122px; display:block; position:relative; padding:0px 0px 0px 0px; background-color:#a0a0a0; } .stats { float:left; width:221px; height:102px; margin: 0px 0px 0px 20px; padding:10px; background-color:#e0e0e0; font:9pt verdana; line-height:12px; text-align:center; } .tmar { float:left; width:72px; height:19px; margin-top:10px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tmar2 { float:left; width:72px; height:19px; margin-top:2px; margin-right:2px; background-color:#bbbbbb; line-height:15px; } .tnom { float:left; width:72px; height:19px; margin-top:10px; background-color:#bbbbbb; line-height:15px; } .tnom2 { float:left; width:72px; height:19px; margin-top:2px; background-color:#bbbbbb; line-height:15px; } .sidemenu { float:right; width:73px; height:102px; margin: 0px 20px 0px 0px; padding:10px; background-color:#c0c0c0; font:7pt verdana; text-align:center; } /*]]>*/--> </style> </head> <body> <div class="bdr"> <div class="lchief"> IMAGE </div> <div class="rchief"> <div class="stats"> <div class="tmar"> TBA </div> <div class="tmar"> TBA </div> <div class="tnom"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tmar2"> TBA </div> <div class="tnom2"> TBA </div> </div> <div class="sidemenu"> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> TBA<br /> </div> </div> </div> </body> </html> TIA, Taro Hi, I am trying to convert my table design to CSS and building the bare structure now but having some troubles with the alignment/layout. I want to move the left and right columns under the header div. but with float: left, they keep sticking to each other. here is the link: http://www.internationalnannies.com/test/ here is my CSS: Code:
/* Structure setup */
#header {
background-color: Aqua;
}
#body {
background-color: grey;
}
#leftColumn {
background-color: silver;
float: left;
width: 150px;
position: relative;
}
#rightColumn {
background-color: blue;
float: left;
width: auto;
position: relative;
}
#footer {
background-color: pink;
clear: both;
position: relative;
}
#photo {
background-color: grey;
margin-right: 5px;
float: left;
position: relative;
}
#headerRightContent {
background-color: red;
position: relative;
float: left;
}
/* *********************************** */
and here is my html: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>index</title>
<style type="text/css">
@import "styles.css";
</style>
</head>
<body>
<div id="header">
<div id="photo"><img src="images/noImage.gif" width="120" height="160" alt="noImage (1K)" /></div>
<div id="headerRightContent">right content</div>
</div>
<div id="body">
<div id="leftColumn">left</div>
<div id="rightColumn">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
Can someone do a quick review of this and comment? Thanks, Edwinx Hello... Here is the site I'm having issues with ralphwall.com I'm noticing that it only happends in IE6 and not other browsers. It's shifting my float:right; column down the page. Here is the code in my css. Could anyone please help? I'm starting to pull my hair out. Thanks in advance. body{ cursor:url("assets/mouse.cur"); background-color:#20110A; overflow:hidden; font-family:Georgia, "Times New Roman", Times; font-size:14px; color:#FEF5E0; } a:link{ color:#FEF5E0; background-color:#7E5F33; } a:visited{ color: #FEF5E0; background-color: #7E5F33; } a:hover{ color: #7E5F33; background: #FEF5E0; } img{ border:0; } ul{ list-style-type:square; } #header{ float:left; width:90%; padding-left:5%; padding-right:2.5%; } #header h1{ font-family:Georgia, "Times New Roman", Times; font-size:36px; font-style:italic; color:#7E5F33; } #topnav{ float:right; width:95%; padding-right:2.5%; text-align:right; border-top: solid #7E5F33; } .hovermenu ul{ padding-left: 0; margin-left: 0; height: 16px; } .hovermenu ul li{ list-style: none; display: inline; } .hovermenu ul li a{ padding: 2px .5em; text-decoration: none; float: right; color: #FEF5E0; background-color: #7E5F33; border: 2px solid #7E5F33; } .hovermenu ul li a:hover{ background-color: #20110A; border-style: outset; } html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */ border-style: inset; } #left{ float:left; width:20%; padding-left:5%; padding-right:2.5%; } #right{ float:right; width:60%; padding-left:5%; padding-right:2.5%; text-align:left; verticle-aling:top; } #right h1{ font-family:Georgia, "Times New Roman", Times; font-size:24px; font-style:italic; color:#7E5F33; } #footer{ float:right; width:95%; padding-right:2.5%; font-style:italic; text-align:right; } Current working file is he http://ravenwave.com/clients/opi/ link to the css file is he http://ravenwave.com/clients/opi/opi.css The issue is that I have a background with an associated navigation bar that need to align bottom. I've got that part all figured out and working. However, the snag is that if the browser window is shrunken to a small vertical height, the bottom navigation bar (and associated background) keeps riding up and then gets mixed up with the other content. Conversely, if the page is extra long in content and so needs to scroll, then the bottom bar and background is aligned to the bottom of the window, rather than the page. Obviously this has to do with absolute vs. relative positioning and is not working how I want it to work. Right now I'm guessing that I need to switch to a relative postioning, but I'm hoping that maybe there are some other fixes that I don't know about. I've tried a few things, but am just kind of wasting time and need to get this figured out. Thanks Hi guys, I've been desperately trying to get this to work but realised I have to ask for help. www johnbradbury com This looks right in Internet Explorer 7, the header bar is at the top and stretched across the whole screen. In earlier versions this is pushed down etc.... Anyone point me in the right direction? I can't get the Sidebar and Content divs to line up with each other. I tried floating sidebar left and content right but that only made it worse. What am I missing? http://ror.twisted-delusions.net/template/brc.html http://ror.twisted-delusions.net/template/style2.css Actually, I just realized I was trying to float and position relatively. But when I removed the positioning and just used floats it would not stretch my container div, howcome? I added clear all but that didn't do anything. http://ror.twisted-delusions.net/template/brc2.html http://ror.twisted-delusions.net/template/style3.css -------------------------------------- OK, NVM, I needed a div below the floats to clear them >.< you can close this topic. haloo thar! i cant get my a div to align centered - heres the code - Code: <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)">
<head>
<title>TRANSPARENT DESIGNS + V.2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
body {background-image: url('back.jpg'); background-repeat: repeat-x; background-color: #AFA893;}
.body {text-align: center;}
.iframe {text-align: center;}
.white {width: 744px; height: 540px; background-color: #FFFFFF;}
</style>
</head>
<body>
<div class="body">
<object type="application/x-shockwave-flash" data="header.swf" width="744" height="228">
<param name="movie" value="header.swf" /></object>
<div class="white"><iframe class="iframe" id="news" src="news.html" width="700" height="500" frameborder="0"></iframe></div>
</div>
</body>
</html>
in ie its perfect but in firefox the div holding the iframe is aligned left??? help. anyone. please?! x Hi guys, I was hoping someone could help? I have the following css which controols the style for a larger image on hover function. (thumb - then large pic on hover) I am having trouble positioning (vertically) the image, what can I usew to control it? Code:
/* Popup Image Viewer */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #669933;
padding: 1px;
left: -1000px;
border: 1px ridged;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 135px; /*position where enlarged image should offset horizontally */
}
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? Hi Guys, I'm trying to get a messaging app done and I need the CSS polished up. I understand CSS enough to hack my way through it, but for some reason I can't get the following done. Here's what I'm trying to create. This will be placed within an existing div that is 550px wide. I see 5 total divs that need to be created. The containing div, which is the thick border around the entire image. The profile pic div the name div the timestamp div the message div The containing div can't be height restricted. The profile pic div, name div, and timestamp div need to stay at the top. The message div will need to grow (height-wise) div.view_message_block { width: 550px; (or 100% since the containing div is already set to 550px?) margin: .5em .5em .5em .5em; display: inline; } div.view_message_profile_pic { width: 75px; display: inline; float: left; } div.view_message_sender_name { width: 80%; display: inline; float: left; } div.view_message_date { width: 20%; display: inline; } div.view_message_body { width: 80%; display: inline; } -------------------------------------------------------- Any help or guidance will be appreciated! Don't want it done for me, but I'm not sure where to go from here. Almost got my layout sorted, however i am having a really anoying alignment issue in Ie6, firefox works fine. The right-content div is off by 3px, i cant work out why. I am having to use two divs as opacity is inherited by child content in each div - i get round this by overlaying a 'content div' with absolute positioning. Page can be seen he www.monsterserve.net/new.htm and code is below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{
padding:0px;
margin:0px;
}
#container
{
position:relative;
width: 900px;
height: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 10px; /* offset 10px from page top */
text-align:left;
border: 1px solid black;
/*background-image: url('car.jpg');
background-repeat: no-repeat;
background-position:bottom right;*/
}
#left
{
width:500px;
float: left;
border-right: 1px solid black;
height: 500px;
background-color: gray;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
#right
{
margin-left:600px;
width:200px;
height:500px;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: gray;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
#left-content
{
position:absolute;
width: 500px;
left:0px;
top:0px;
}
#right-content
{
left: 603px;
\left: 602px;
l\eft: 603px;
position:absolute;
background-color:#0066CC;
position:absolute;
width:200px;
top:0px;
border: 1px solid black;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="left-content"></div>
<div id="right-content">right content</div>
</div>
</body>
</html>
Thanks in advance, PS> note that i have tried doing that \ thing for positioning (i saw someone doing that for width so i thought it may work for positioning too ) OK, I somehow became a css n00b overnight (I've made 4-5 websites heavily using css.) Basically, here is what I want: Code: style :: [ ] [ ] And here is what I'm getting: Code: style :: [ ] [ ] For some reason the boxes won't align with the text. No matter what I do! Here is the link to see: http://www.sential.co.uk/test.php Here is the html: Code:
<div id="style_selector">
<p>style ::
<a href="#" onclick="setActiveStyleSheet('SE001');
return false;" title="change to style: Underwater - Water Planet"><div id="style_se001">Blue</div></a>
<a href="#" onclick="setActiveStyleSheet('SE002');
return false;" title="change to style: Orkidea - Beautiful"><div id="style_se002">Orange</div></a>
</p>
</div>
And here is the css: Code:
#style_selector{
position: absolute;
top: 70px;
left: 160px;
height: 25px;
width: 100%;
text-align: left;
}
#style_se001{
float: left;
height: 15px;
width: 15px;
text-indent: 10000px;
overflow: hidden;
background-color: #6187E1;
display: block;
border: 1px solid #ffffff;
}
#style_se001:hover{
border: 1px solid #6187E1;
}
#style_se002{
float: left;
height: 15px;
width: 15px;
text-indent: 10000px;
overflow: hidden;
background-color: #FCB029;
display: block;
border: 1px solid #ffffff;
}
#style_se002:hover{
border: 1px solid #FCB029;
}
I'm sure it's something simple, yet I've tried switching positioning attributes and everything, and the code for aligning these boxes is IDENTICAL to the menu buttons at the top. I'm totally miffed -Luke how is it done? i use now absolute positioning in a relative block but if i understand this is taken out of the flow ? so if i use it for a link at the bottom and the user change his font size....things starts to overlap any ideas how this is not going to happen? My page looks great, except in IE 6 where the green header shifts left instead of staying centered. I don't know why!!! It can be viewed at: http://www.descom.org/testing/home.html Roll over "About" and then click on any of its sublinks. The CSS sheets a http://www.descom.org/testing/allianceStyles.css and: http://www.descom.org/testing/ie6.css THANK YOU! For those of you using BETA IE7 you will not see this error, which makes me believe that it is just IE6 being retarded. But because there are very few out there viewing sites with IE7 I have a problem. becuase I cannot post the code, unless you want my entire stylesheet and all my source, because I literally have no idea what is causing this error, but I will post the code relating to it. http://www.unlimitedgamer.net/area51/ this is a beta page for the layout I am working on, if you scroll down you will see the news becomes gradually more and more distorted, the site is 100% valid, I just ran it through the w3.org validator. code relating to problem HTML Code: <div id="wrapper" class="clearfix" > <div id="twocols" class="clearfix"> <div class="maincol" > /////////////////////////ONE OF THE NEWS POST////////// <div class="entry"> <div class="entrydate"> <div class="entrymonth">February<br /> 2006</div> <div class="entrynumber">23</div> </div> <div class="entrytitle"> <h1 id="post-215">[<span class="comment_color">2</span>] <a href="http://www.unlimitedgamer.net/23/the-focus-on-black/" rel="bookmark" title="Permanent Link: The Focus on Black">The Focus on Black</a> - <i>Death God</i></h1> </div> <div class="entrybody"> <p>TEXT TEXT </p> <div class="news_footer"> <img src="http://www.unlimitedgamer.net/wp-content/themes/gespaa_v2/images/file.gif" title="file" alt="*" /> <a href="http://www.unlimitedgamer.net/category/xbox/" title="View all posts in Xbox" rel="category tag">Xbox</a>, <a href="http://www.unlimitedgamer.net/category/playstation-2/" title="View all posts in Playstation 2" rel="category tag">Playstation 2</a>, <a href="http://www.unlimitedgamer.net/category/black/" title="View all posts in BLACK" rel="category tag">BLACK</a> </div> </div> </div> /////////////////////////END OF THE NEWS POST////////// </div> </div> <div id="leftcol" > <div class="Box"> <h3>Welcome to Unlimited Gamer</h3> <p> TEXT TEXT</p> </div> </div> </div> I only posted one of the news post because the code doesn't change depending on the news post... now for the css of all those classes and ids CSS Code:
#wrapper
{
overflow: hidden;
}
#wrapper
{
float: middle;
float/**/: none;
}
#leftcol{
width:149px;
float:left;
position:relative;
font-size: 8pt;
color: #e16c72 'Lucida Grande',verdana,arial,sans-serif;
text-decoration: none;
}
#twocols{
width:630px;
float:right;
position:relative;
}
.maincol{
background-color: #FFFFFF;
float: left;
font-size: 8.5pt;
position: relative;
width:630px;
}
#maincol{
background-color: #FFFFFF;
float: left;
font-size: 9px;
position: relative;
width:630px;
}
/* *** Float containers fix:
http://www.csscreator.com/attributes/containedfloat.php *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */
/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
/*hide the right column when printing*/
#rightcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
/***********************************************************************
* Entry *
***********************************************************************/
.entrybody p, form p, .commentbody p{
margin-top:0px;
margin-left: 0px;
padding-left:0px;
}
h1{
font-size: 24px;
color: #385abe;
}
h2.entrydate {
font-weight: normal;
font-size: 16px;
color: #888;
margin-bottom:3px;
padding-top: 3px;
}
entrytitle {
font-family: "Century Gothic", "Lucida Grande", arial, Tahoma, Verdana,helvetica, sans-serif;
margin:0px;
font-weight: normal;
font-size: 24px;
padding-top: 5px;
}
.entrybody{
color: #424d53;
font-size: 12px;
padding-bottom: 10px;
margin-bottom: 25px;
border-bottom: 1px dotted #6d6d6f;
padding-left:3px;
padding-top: 5px;
}
I think thats everything, but you really need to see it for yourself to understand the error, it doesn't occur in firefox though :/ thanks for any help. Hi, I have navigation links at the top of a blog in a header file, and cannot get them to align vertically for both firefox and IE. I've tried everything I can think of (using extra <br>, <p>, vertical-align: middle, changing margins, changing padding, etc) but cannot find a solution that aligns them vertically in both browsers. Any help is appreciated. Here is the code, which works in firefox: Code: <body> <!-- page header --> <div id="header" "border: 0px solid; margin:0 auto; "> <a href="http://www.website.com/blog/"><IMG SRC="http://www.website.com/images/logo.png" BORDER=0 width="435" height="92" ALT="logo" align="left"></a> </div> <div style="clear: both; margin:0 auto; "></div> <div style="background-image: url(http://www.website.com/images/sidebar_center2.jpg); border: #333333 2px solid; width: 900px; height: 60px; padding: 6px; margin: 0px auto; font-size: 17px; text-align: center; "> <p><font face="calibri,verdana" color="#ffffff"> <a href="http://www.website.com/"><font color="#ffffff">Home</font></a> | <a href="http://www.website.com/tips-1.html"><font color="#ffffff">ilnk 1</font></a> | <a href="http://www.website.com/tips-2.html"><font color="#ffffff">link 2</font></a> | <a href="http://www.website.com/tips-3.html"><font color="#ffffff">link 3</font></a> | <a href="http://www.website.com/tips-4.html"><font color="#ffffff">link 4</font></a> | </font></p> </div> <!-- begin wrapper divs --> <div id="content"> |
|||||||