|
CSS - Onresize Div Alignment Issues
Example Screenshot and Entire File
When you view the screenshot, you will notice that the two columns are obviously not flush with eachother.. I can't seem to fix this minor issue, though (as far as I can tell) the offset only happens when I manually resize the window.. if I resize the window, close it, and then reopen it, the offset does not occur and all is well, but there is still the chance of somebody resizing the window and getting that weird effect. Similar TutorialsFirst of all, I know that my CSS is hideous and I have a ways to go in terms of coding. However, given the time I have, I've done my best for the time being. I recently launched a beta for my portfolio site and although everything was tested and working on my Mac (Opera, Safari, and Firefox), I noticed problems when testing it on a Windows machine and several versions of IE. First of all, here's the link: hellomynameisad.am Second, here are screen grabs of my Mac/Firefox and a PC/IE7. You'll notice that the padding between lines on the Mac screen grab is tight and neat whereas the space is wider and not even on the PC/IE7. Second, you'll notice that the rules extend the entire width of the white boxes on the Mac whereas they are short of 100% on the PC/IE7. Hopefully someone can lend a hand and help. Thanks! hellomynameisad.am/mac - firefox.png hellomynameisad.am/pc - ie.png Hi, I'm having an issue getting my body background image to show a line that runs vertically down the sides. It shows in FF, but it doesn't show the left vertical line in IE or Chrome. The content is covering it up, and anytime I try making the overall width smaller in width, the content background color/area keeps aligning to the left and thus covering up my left border. Doh. Link: http://aries.addaction.net/~copeland/ Another issue is that there's a big gap separating the content from the footer. I think I've had this problem in the past, but unfortunately don't remember how to remedy the issue. I've tried and tried, but keep gettin' denied. Any thoughts on either of these obstacles? Thanks in advance. I love this forum. Hi all this is my first post on the board! I have a slightly annoying problem with a nav menu I am trying to make; Here is the css #nav { background:url(images/nav.gif) no-repeat; width:470px; height:40px; margin-top:44px; padding:0; } #nav span { display: none; } #nav li, #nav a { height:40px; display:block; } #nav li { float:left; list-style:none; display:inline; } #nav-01 {width:65px;} #nav-02 {width: 65px;} #nav-03 {width: 65px;} #nav-04 {width: 65px;} #nav-05 {width:65px;} #nav-06 {width: 65px;} #nav-07 {width: 65px;} #nav-01 a:hover{background:url(images/nav.gif)0px -45px no-repeat;} #nav-02 a:hover {background:url(images/nav.gif) -65px -45px no-repeat; } #nav-03 a:hover {background:url(images/nav.gif) -130px -45px no-repeat; } #nav-04 a:hover {background:url(images/nav.gif) -195px -45px no-repeat; } #nav-05 a:hover {background:url(images/nav.gif) -260px -45px no-repeat; } #nav-06 a:hover {background:url(images/nav.gif) -325px -45px no-repeat; } #nav-07 a:hover {background:url(images/nav.gif) -390px -45px no-repeat; } Here is the HTML: <ul id="nav"> <li id="nav-01"><a href="index.html"><span>HOME</span></a></li> <li id="nav-02"><a href="index.html"><span>PLANNING</span></a></li> <li id="nav-03"><a href="index.html"><span>STRATEGY</span></a></li> <li id="nav-04"><a href="index.html"><span>DELIVERY</span></a></li> <li id="nav-05"><a href="index.html"><span>NEWS</span></a></li> <li id="nav-06"><a href="about.html"><span>ABOUT US</span></a></li> <li id="nav-07"><a href="index.html"><span>CONTACT</span></a></li> </ul> The problem I am having is that although the images are aligned when you hover over them, the image is sliced at the wrong position, I have tried adjusting every part of the css I can think of but I still can't figure it? Any ideas or help would be much appreciated. i42.tinypic.com/16libh0.gif here is the nav- notice the slice width is correct and the images are aligned, it is just that the slice happens in the wrong place.( u need to input the htt* bit ) I'm trying to figure out why the three titles and info are being listed down. I want them all to be listed across. http://kansasoutlawwrestling.com/champions Hello everyone! I'm new here, but I'm not new to CSS! I've built a website out of HTML, CSS, and Java Script. I want to add some side boxes (navigation on sides) for quick navigation... But I am having a problem... See the example page cfpmedia DOT COM / 2.0 As you can see... There is a bunch of text encased within a border. The title is Side Bar. I need to know how to make it so the Side Bar is aligned with the Main border (the body). I want to do this... Example... ________ ________ |Side Bar| | Body | | | | | |_______| |_______| I would like to know how to make them both perfectly aligned. Here is my CSS Code... body {background-color:#B2CC7C} body {color:black} body {text-align:center} body {font-family: Comic Sans MS} h3 {font-size:50px} p.subject {font-size:20px} p.subject{text-align:left} p.body { border-style:solid; border-width:1px; border-color:#000000; background-color:#BED490; margin-top:0px; margin-bottom:50px; margin-right:85px; margin-left:85px; } p.navbar { border-style:solid; border-width:1px; background-color:#BED490; margin-top:0px; margin-bottom:50px; margin-right:200px; margin-left:200px; } p.module { border-style:solid; border-width:1px; border-color:#000000; background-color:#BED490; margin-top:0px; margin-bottom:50px; margin-right:85%; margin-left:-45px; } The P.Module is the one that controls the side bar, and the P.Body controls the body. Hi, I have been working on a site that went live today. I have just been alerted of a problem by the client. On the front page I have an alignment issue in IE6 (and perhaps lower) www.formulation.org.uk I can't work out how to sort it. Any suggestions would be appreciated. I am on a mac so don't have the facilities to check often. Thanks all Tom I am in the process of building out this site: ( gosandbox dot com/smack/ ) My navigation is displaying a few pixels different between Firefox and Safari/Chrome. I have gone in and tried to tweak everything I can think of to no avail. Basically what I am seeing is that on the far right of the page/main nav on hover, everything aligns perfectly in Firefox. In Safari/Chrome, it's off about 10px. Any ideas on what is wrong here that I am missing? Thanks in ADVANCE!!!!! So I have been trying to troubleshoot this issue for days and can't come up with a solution. I hope someone out there can help!! So my navigation image sprite is not displaying correctly in IE7 or 6. It basically shows the whole sprite image scrunched up into the defined 100px height of the <ul>. Also, the sprite image has a width of 930px but in Firefox it begins to repeat the image even though the <ul> width is 930px. So I added the no-repeat to the background image sprite. Now it's not centered on the page. What's up with this? Also, I am trying to display the pictures on the page with one large pic on the left and then 4 images to the right of the large image. You'll have to see it to understand. It displays perfectly how i want in Firefox...and of course IE7 and 6 are all out of wack. Not sure what I am doing wrong here as well. I used a grid system, but it is not locking it in like it normally does. You can see the sprite and alignment issues if you view in IE 7 and how I want it to look in Firefox. Here's my coding: HTML: Code: <body id="pretty-pics"> <div id="container"> <div id="navigation"> <ul id="nav"> <li id="home"><a href="/">home</a></li> <li id="essence"><a href="../essence.html">essence</a></li> <li id="pictures"><a href="/pretty-pictures.html">pretty pictures</a></li> <li id="treasures"><a href="/treasures.html">treasures</a></li> <li id="contact"><a href="/contact.html">contact</a></li> </ul> </div><!--end nav--> <div class="clear"></div> <div class="pic-wrap col12"> <div class="col5 float-left"> <a href="images/products/product-1.jpg" rel="shadowbox[products]" title="Necklace"><img id="product-1" src="images/products/product-1-t.png" /></a> </div> <div class="col7 float-right"> <div class="col4 float-left"> <a href="images/products/product-2.jpg" rel="shadowbox[products]" title="Bracelet"><img id="product-2" src="images/products/product-2-t.png" /></a> <a href="images/products/product-4.jpg" rel="shadowbox[products]" title="Bracelets"><img id="product-4" src="images/products/product-4-t.png" /></a> </div> <div class="col3 float-right"> <a href="images/products/product-3.jpg" rel="shadowbox[products]" title="Necklaces"><img id="product-3" src="images/products/product-3-t.png" /></a> <a href="images/products/product-5.jpg" rel="shadowbox[products]" title="Necklaces"><img id="product-5" src="images/products/product-5-t.png" /></a> </div> <div class="clear"></div> </div> </div><!--end main wrapper--> CSS: Code: #pretty-pics{
background: #32b4c9 url(images/wall-bg.jpg) no-repeat scroll center 0px;
}
/* Main Navigation */
#nav{
width: 930px;
height: 100px;
background: url(images/sprite.png) no-repeat;
margin: 20px auto;
position: relative;
}
#nav li{
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
text-indent: -9999px;
}
#nav li, #nav a{
height: 100px;
display: block;
}
#home{
left: 0;
width: 186px;
}
#essence{
left: 186px;
width: 186px;
}
#pictures{
left: 372px;
width: 186px;
}
#treasures{
left: 558px;
width: 186px;
}
#contact{
left: 744px;
width: 186px;
}
#home a:hover{
background: transparent url(images/sprite.png) 0 -104px no-repeat;
}
#essence a:hover{
background: transparent url(images/sprite.png) -186px -104px no-repeat;
}
#pictures a:hover{
background: transparent url(images/sprite.png) -372px -104px no-repeat;
}
#treasures a:hover{
background: transparent url(images/sprite.png) -558px -104px no-repeat;
}
#contact a:hover{
background: transparent url(images/sprite.png) -744px -104px no-repeat;
}
#essence a.current{
background: transparent url(images/sprite.png) -186px -208px no-repeat;
}
#pictures a.current{
background: transparent url(images/sprite.png) -372px -208px no-repeat;
}
#treasures a.current{
background: transparent url(images/sprite.png) -558px -208px no-repeat;
}
#contact a.current{
background: transparent url(images/sprite.png) -744px -208px no-repeat;
}
/* Pictures */
.pic-wrap{
height: 550px;
margin: 50px auto;
}
#product-1{
margin: 10px 0 0;
}
#product-2{
margin: 10px 50px 0;
}
#product-3{
margin: -40px 20px 0;
}
#product-4{
margin: 20px 70px 0;
}
#product-5{
margin: 30px 0 0;
}
ANY help is appreciated. I am tired of pulling my hair out over this one! Thanks in advance!!! I have a custom list where the list elements will show horizontally across a row until they can't, and then bump down to the next row. I use it for a gallery of pictures. The problem is, there is all this extra padding on the left of the list for some reason that I can't seem to get rid of. I'm not sure what is causing this. I attached the picture and here is the CSS for the <ul> tag Code:
.photolistitem
{
position: relative;
display: block;
float: left;
list-style-type: none;
height: 140px;
width: 140px;
padding: 5px;
border: solid 1px black;
margin: 5px;
background: white;
text-align: center;
}
Here is the HTML. There is PHP in there to get each photo Code:
<ul id="sortable">
<?php
$pics = $DB->query("SELECT * FROM pictures WHERE gallery_id='".$gallery['id']."' ORDER BY position ASC");
$num = $DB->rows();
if ($num > 0) {
while ($pic = $DB->fetch()) { ?>
<li class="photolistitem">
<table>
<tr>
<td class="imageCell">
<a rel="group" class="gallerypiclink" href="pictures/<?php echo $pic['filename']; ?>" title="<?php echo $pic['caption']; ?>"><img class="gallerypic" name="<?php echo $pic['filename']; ?>" galleryid="<?php echo $pic['gallery_id']; ?>" src="pictures/thumbs/<?php echo $pic['filename']; ?>" width="<?php echo $pic['thumb_width']; ?>" height="<?php echo $pic['thumb_height']; ?>"></a>
</td>
</tr>
<tr>
<td>
<p>
<a href="#" class="delete">Delete Picture</a><br />
<a href="#" class="editCaption">Edit Caption</a>
</p>
</td>
</tr>
</table>
</li>
<?php }
} else {
echo "<p id=\"none\">No images uploaded yet</p>";
}
?>
</ul>
There is just one table around the list with only the list in it. I made the bgcolor of it blue to highlight the issue. Thanks Hi, Just wondering it anyone can help... I am trying to get my left hand navigation to sit at the top of the cell and no matter what I change it won't budge! You can see what I am working on at www. freedomwhalewatch .com.au /Stirling /index.html as you can see the left hand navigation is sitting towards the bottom... anyone have any suggestions as to how I would move it up to be directly underneath the logo? To see my working files just use the right click and view page source. Any help or suggestions would be much appreciated. I am a newbie to css! Cheers, Jen ** UPDATE - sorry guys i spelt the url incorrectly! http://www. freedomwhalewatch .com.au/Stirling /index.html Greetings all--- I've been playing more and more with css and div layouts and have run into an issue. Not the typical carriage-return issue but something a little more peskier. My website is quite simply laid out as: div - logo top div - navigation div - logo bottom div - content span - header1 span - header div - content footer Code: <html>
<body>
<div id="wrapper">
<!--navtop-->
<div id="navtop">
</div>
<div>
<span class="links">
<img src="images/borderleft.png" /><a href="http://www.coastalequip.com"><img src="images/coastalequip.png" /></a><img src="images/logomid.png"/><a href="http://www.pickyourlandscaper.com"><img src="images/pickyourlandscaper.png" /><img src="images/borderright.png" /></a></span>
</div>
<div>
<img src="images/logobottom.png" />
</div>
<!--content-->
<div id="content">
<!--content header-->
<span class="header1">
BAR
</span>
<br />
<span class="header2">
FOO
</span><br /> <br />
<!--content body-->
<span class="body_text">
Lorem Ipsum
</span>
</div>
<!--content bottom-->
<div id="contentbottom">
</div>
</div>
</body>
</html>
I've decided to style every attribute using CSS to give myself some freehand practice. I decided to keep my project more organized by adding a wrapper around my project so that I would only have to use the width attribute once in my css. Well- after I added the div wrapper around my project and aligned it to center I ran into my issue. I can't seem to align the text in the class header1 to center. Padding will move it, but it seems fixed to the left; header2 centers fine. I've made sure all of my html tags were closed and I haven't seen any issues in my coding but I think some extra sets of eyes will help. CSS: Code: /* CSS Document */
body {
background-color:#CCC;
}
img {
border:0;
padding:0;
}
#wrapper {
width: 794px ;
margin-left:auto;
margin-right:auto;
}
#navtop {
background-image:url(../images/logotop.png);
height:129px;
}
#content {
background-image:url(../images/bodybg.png);
background-repeat:repeat-y;
background-position:center;
font-family:Tahoma, Geneva, sans-serif;
}
#contentbottom {
background-image:url(../images/contentbottom.png);
background-repeat:repeat-y;
background-position:center;
height:28px;
}
.header1 {
text-align:center;
padding:10px;
font-family:Tahoma, Geneva, sans-serif;
font-size:50px;
font-weight:bolder;
text-shadow:#666;
text-transform:uppercase;
color:rgb(190,30,45);
}
.header2 {
text-align:center;
padding:10px;
font-family:Tahoma, Geneva, sans-serif;
font-size:35px;
font-weight:bolder;
text-shadow:#666;
text-transform:uppercase;
color:rgb(0,0,0);
line-height:.5em;
}
.body_text {
text-align:left;
padding:10px;
}
Hello all, I have a really anoying alignment issues with fire fox and IE. Have a look at the follwoing page in both browsers: http://pfwd.org.uk/style.htm I need to get IE to display what Firefox shows. The four rows on the left hand side (date, date value, number and number value) need to be aligned with the rows Descirption and description value. Please note not all style code is in the external stylesheet external CSS file: PHP Code: body{ background-color:#006699; font-family:Arial, Helvetica, sans-serif; } .main, header, subHeader{/*Positon values that make every thing go inside the main box */ position:absolute; left:100px; } .main, subHeader dbItem{ border: solid 1px #0099CC; } .main, header{ top:125px; left:140px; width:451px; } .main{ height:300px; } .header{ background-color:#0099CC; font-size:12px; font-weight:800; } .subHeader{ height:22px; width:200px; border: solid 1px #0099CC; background-color:#FFCC66; float: left; font-size:10px; font-weight:700; padding: 2px; } .dbHeader{ border: solid 1px #0099CC; background-color:#FFCC66; font-size:10px; font-weight:600; padding: 2px; width: 50px; } .dbItem{ background-color:#FFFFFF; border: solid 1px #0099CC; font-size:10px; font-weight:700; padding: 2px; width:50px; } .dbdescripHeader{ border: solid 1px #0099CC; background-color:#FFCC66; font-size:10px; font-weight:600; padding: 2px; width: 364px; float:right; } .dbdescripItem{ background-color:#FFFFFF; border: solid 1px #0099CC; font-size:10px; font-weight:700; padding: 2px; width:50px; width: 390px; float:right; height:48px; } .link{ font-size:11px; font-weight:700; font-family:Arial, Helvetica, sans-serif; padding:2px; color:#0099CC; text-decoration:none; float:right; } .links{ background-color:#006699; border: 1px solid #0099CC; border-top:1px solid #0099CC; color:#0099CC; text-decoration:none; padding:0 2px; } .link a:hover{ font-size:11px; font-weight:700; font-family:Arial, Helvetica, sans-serif; padding:0 2px; text-decoration:none; color:#FFCC66; background-color:#006699; } br{ margin-top:-15px; } .subsubheader{ border: solid 1px #0099CC; background-color:#FFCC66; float: left; font-size:10px; font-weight:700; padding: 2px; } page file: PHP 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> <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css"type="text/css" /> </head> <body> <div class='main'> <div class='header'>Updates to the site</div> <div style='margin-bottom:20px;'> <div class='subHeader' style='height:22px;'>Search for an update</div> <div class='dbItem' style='left:180px; width: 239px; float:left; height:22px;'> <form name="search" method="post" action="post"> <select name="Year"> <option>Year</option> <option>2005</option> <option>2004</option> <option>2003</option> <option>2002</option> <option>2001</option> <option>2000</option> </select> <select name="Month"> <option>Month</option> <option>January</option> <option>Febuary</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> </select> <input type="submit" name="Submit" value="Search" /> </form> </div> </div> <div style='margin-bottom:10px;'> <div class="link"><a href='#' class='links'>GO</a></div> <div class='dbdescripHeader'>Description of update</div> <div class='dbdescripItem'>First set of information from the database</div> <div class='dbHeader'>Number</div> <div class='dbItem'>one</div> <div class='dbHeader'>Date</div> <div class='dbItem'>10/01/01</div> </div> <div style='margin-bottom:10px;'> <div class="link"><a href='#' class='links'>GO</a></div> <div class='dbdescripHeader'>Description of update</div> <div class='dbdescripItem' >Second set of information from the database</div> <div class='dbHeader'>Number</div> <div class='dbItem'>two</div> <div class='dbHeader'>Date</div> <div class='dbItem' >10/01/01</div> </div> <div style='margin-bottom:10px;'> <div class="link"><a href='#' class='links'>GO</a></div> <div class='dbdescripHeader'>Description of update</div> <div class='dbdescripItem'>third set of infroamtion from the database</div> <div class='dbHeader'>Number</div> <div class='dbItem'>three</div> <div class='dbHeader'>Date</div> <div class='dbItem'>10/01/01</div> </div> <!-- End on the fly scripts --> </div> </body> </html> URLS css: http://pfwd.org.uk/style.css page: http://pfwd.org.uk/style/htm Can any one help me sus out the alignment issues? thanks pfwd I am having consistent alignment issues with IE7. I am uncertain as to what the issue could be. Any help, assistance or a link to some reference would be greatly appreciated. 1) . The line at the top of the screen and the tabs do not line up properly. The line transects the buttons. standardizedsupplements{dot}com 2) Image and Text are not aligned on same line: standardizedsupplements.com/tremorsure.html standardizedsupplements.com/purchase_tremorsure.html 3) Gif/Arrow to right side panel list ( <li> ) is not consistent showing up on all lists. standardizedsupplements.com/contact-us.html 4) In the FAQs, at the very top of the page, the numbers and the text overlap, when there are double digits. standardizedsupplements.com/faq.html I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically?? Code: <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div> <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div> </div> <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;"> <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div> <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div> </div> Hey, I came across this forum and hopefully somebody can help me. Here is my website: http://www.jmuelectricmotorcycle.tk When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container. Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page. Thanks. Here is my css: Code:
html {
font: normal 12px verdana, arial;
background-color: #000
}
body {
text-align: center
}
#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}
.hasSidebar #fw-container {
width: 1000px;
}
a,
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* --- Header --- */
#fw-head {
position: relative;
height: 196px;
background: #242424;
}
#fw-title {
font: bold 26px verdana;
letter-spacing: -1px;
position: absolute;
top: 20px;
left: 20px;
padding: 0;
margin: 0;
z-index: 10;
}
#fw-title a,
#fw-title a:visited,
#fw-title a:hover {
color: #fff;
}
.fw-logo {
width: 760px;
height: 196px;
position: absolute;
}
.hasSidebar .fw-logo {
width: 1000px;
}
/* --- Navigation --- */
#fw-mainnavwrap {
background: #242424;
padding: 10px 20px;
font-family: arial;
font-weight: normal;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#fw-mainnavwrap ul {
margin: 0;
padding: 0;
background: transparent;
list-style-type: none;
}
#fw-mainnavwrap li {
margin: 0px 15px 0px 0px;
display: inline;
}
/* --- Content --- */
#fw-bigcontain {
width: 760px;
float: left;
}
.fw-paragraph {
background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
border-bottom: 1px solid #000;
padding: 15px 20px 10px;
overflow: hidden;
}
.fw-title {
margin: 0px 0px 10px;
font: 18px verdana;
color: #fff;
}
.fw-text {
margin-bottom: 10px;
}
/* --- Sidebar stuff --- */
.hasSidebar #fw-sidebar {
width: 239px;
float: right;
font-size: 12px;
clear: right;
border-left: 1px solid #000;
}
#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
color: #fff;
text-decoration: none;
}
#fw-sidebar .fw-title {
font-size: 1.3em;
font-weight: normal;
}
/* --- Footer --- */
#fw-footer {
font: normal 10px verdana, sans-serif;
background: #242424;
margin: 0px;
padding: 11px 0px 1px;
color: #999;
clear: both;
width: 760px;
}
.fw-footertext {
background: #161616;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
margin: 0px;
padding: 6px 0px 6px 20px;
}
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; } I 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; }
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! |
|||||||