|
CSS - Alignment And Positioning Issues
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 Similar TutorialsHi 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 ) 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 First 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 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 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. 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 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;
}
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. 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 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 Hi all, I have a page that is generated through PERL, but I cannot get the positioning right. There are graphics, 1 - 9 depending on what the user chooses, that I need to display at the top of the page. Below this, I need to place text descriptions of the graphics. However, the text is displaying under the graphics. The code that I am using for the CSS is: Code:
.MainWindow{
position: absolute;
max-width: 800px;
width: expression(document.body.clientWidth > 800? "800px": "100%" );
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:Medium;
color:#AF31F4;
background-color:white;
Height: auto;
margin: 0 auto ;
}
.ShowCards {
position: absolute;
vertical-align: top;
margin: 0 auto;
top: 2px;
width: 640px;
height: auto;
Left: 200px;
COLOR: #AF31F4;
FONT-FAMILY: Verdana, Helvetica, sans-serif;
FONT-SIZE: 11pt;
FONT-WEIGHT: bold;
border-color:Red;
border-style:solid;
}
.Location2_3 {
position: absolute;
top: 110px;
left: 160px;
width: 85px;
height: 110px;
text-align: center;
}
.Location2_5 {
position: absolute;
top: 110px;
left: 310px;
width: 85px;
height: 110px;
text-align: center;
}
.Location3_4 {
position: absolute;
top: 220px;
left: 235px;
width: 85px;
height: 110px;
text-align: center;
}
.Text1 {
position: absolute;
top: 100px;
top-margin: 20px;
left: 10px;
width: 500px;
}
This of course is not the complete CSS file, it is only representative. If you need/want to see the complete file, you can go here And the HTML that gets generated is: Code: <Body> <DIV CLASS="MainWindow"> <div id="printReady"> <DIV CLASS="ShowCards"> <DIV CLASS="Location1_4"> 1<BR> <img src="../tiles/thumbs/ansuz.jpg"> </DIV> <DIV CLASS="Location2_5"> 2<BR> <img src="../tiles/thumbs/daeg-r.jpg"> </DIV> <DIV CLASS="Location2_3"> 3<BR> <img src="../tiles/thumbs/fehu.jpg"> </DIV> <DIV CLASS="Location3_4"> 4<BR> <img src="../tiles/thumbs/nauthiz.jpg"> </DIV> </DIV> <DIV CLASS="Text4"> Rune 1<BR> <font color="#0000FF">Name: Ansuz</font><BR> <font color="#0000FF">Position 1</font>: Past feelings and desires<br> <font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR> <font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P> Rune 2<BR> <font color="#0000FF">Name: Fehu</font><BR> <font color="#0000FF">Position 3</font>: Present feelings and desires<br> <font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR> <font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P> Rune 3<BR> <font color="#0000FF">Name: Daeg Reversed</font><BR> <font color="#0000FF">Position 2</font>: Feelings and desires of others<br> <font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR> <font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P> Rune 4<BR> <font color="#0000FF">Name: Nauthiz</font><BR> <font color="#0000FF">Position 4</font>: Your heart's deepest desires. If this rune is positive these desires will come to fruition in the next four months <br> <font color="#FF0000">Keywords:</font> ... Text deleted for space ...<BR> <font color="#FF0000">Meaning:</font> ... Text deleted for space ...<P> </DIV> </DIV> </BODY> If you would like to see an example of this, go here Choose a layout in the drop down on the top left and follow the instructions. Will only take a few seconds, it is not a long process...... Thanks for any help or suggestions. Jim For a search tool, I have a "results toolbar", horizontally across the top of the results page. Within this toolbar (position: relative) I have a span containing the current page, absolutely positioned at top: 8px; left: 5px; What I get when rendering however, is the following: Right: http://tim.komta.com/images/css/Firefox.gif Wrong: http://tim.komta.com/images/css/IE.gif More accurately, I should say that I get what I expect in Firefox, and not what I expect in IE, which is not overly surprising. Anyway, what am I doing wrong? If I change the text-align of the box from right (current) back to left, it's still overlaid on top of the images, but on the left, like it's supposed to be. It kinda seems like IE is making the images the bounding box for absolute positioning. Any thoughts? MPEDrummer I am trying to position two buttons on a line. They should each sit in the middle of one half of the line. Here's my code: Code: <html>
<head>
<style type="text/css">
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_a.gif') no-repeat scroll top right;
color: #33C;
display: block;
float: left;
font: bold 16px arial, sans-serif;
height: 24px;
margin:0 auto;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
a.button:active {
background-position: bottom right;
color: #22B;
outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}
</style>
</head>
<body>
<div>
<div style="float:left; width:50%; background-color:#EEE">
<a class="button" href="#" onclick="this.blur();"><span>Learn More</span></a>
</div>
<div style="float:right; width:50%; background-color:#DDD">
<a class="button" href="#" onclick="this.blur();"><span>Buy Now!</span></a>
</div>
</div>
</body>
</html>
And here's a link to the test page: http://rentalocal.thad.com/test Does anyone know what I've done wrong? Thanks, Thad Hello I've been developing a new website for my dad.. Unfortunatly i cant seem to get some of the things to look how i want them. so i was wondering if you could help, as some of you have been a great help to me on previous websites. the pages in question are the following: http://visitours2london.com/v2/ (in internet explorer) the middle conent drops below the sidebars. (in firefox its fine) http://visitours2london.com/v2/tours2.html (both in i.e. and firefox doesnt come out right) i cant get the titles of the dt tags to align to the right hand side.. and in i.e. the back to top text jumps to the far right, overlaying onto side bar two.. All pages are xhtml valid... link to check is on bottom of the page... Ignore everything else on the website, its simply those two pages that im working on.. other aspects of the website will either not load or not work properly as ive not finished them. I am recoding the site jthensley dot com (The forum wouldn't let me list the site needing assistance) to HTML 5 and CSS. I've redesigned some features, which are basically already in the new layout, at jthensley dot com / 2012alpha The 2 horizontal neon lines and the vertical line are simply repeated outside of the header by the CSS. However, one problem I have is that the vertical line that is repeating becomes unaligned with the header if the browser window is expanded. Is there anyway to have it as a repeating background, set to begin at a certain pixel position, and move to the right to maintain alignment with the header as the page is expanded? Secondly, at the bottom, you have the copyright line, which I plan to use as a repeating background or image, as well, and my picture to the right, standing on top of the copyright line. Idealy, I would like the picture of myself to be in a certain area, and push down as page contents make the page longer, but maintain it's "link" with the footer. Any suggestions on how to achieve that? Thanks for your help! This is quite a refresher/learning experience for me! The CSS I have already written is below. * { margin: 0 auto; padding: 0; } body { font-size: 62.5%; font-family: Helvetica, sans-serif; color: white; background-color: #000000; background-image: url(images/horzneon.png), url(images/horzneon.png), url(images/verneon.png); background-position: 0px 137px, 0px 172px, 250px 0px; background-repeat: repeat-x, repeat-x, repeat-y; } ul#nav { height: 185px; width: 1024px; margin: 0 auto; background: url(images/header.jpg) no-repeat; } height: 185px; width: 1024 px; |
|||||||