|
CSS - List Alignment Issues
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 Similar TutorialsHi, 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, 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 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. 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 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 ) 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 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. 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!!! 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;
}
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 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!!!!! 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 Hello, I am trying to create a drop down list with a label, and have them align. I simply want the label to display left of the drop list. I can't seem to get them to do it. It sits inside a topoptsbox div tag (css below). Code: <form name="bpmform"> <label for="bpmfrom" class="bpmddl">BPM From</label> <select class="bpmddl" id="bpmfrom" name="bpmfrom"> <option id="0from" value="0">0</option> <option id="50from" value="50">50</option> <option id="100from" value="100">100</option> <option id="150from" value="150">150</option> </select> </form> Code:
#topoptsbox {
border-style: inset;
border-width: 1px;
width: 1000px;
height: 80px;
float: left;
display: block;
}
On this page: http://www.prioritypie.f2s.com/tremaer/_location/location.htm I have a rollover menu (courtesy of Bon Rouge's tutorial) that nicely runs in a line when viewed in FF, but in IE it reverts to a vertical list. Is there a way to stop this? And why doesn't the background for the containing div show up in FF when it does in IE? I had hoped a glass of red wine would help.... its not so much of a problem because i have "thought" of a remedy (at the end of the post) but i was looking for perhaps a more css'esque solution? if you go here http://www.zahra-zahra.com/fullpage.html you will see menus in the middle somewhere and you will see when the lis go on the second line they are mismatched.. is there a way to match them up precisely? now the solution which i was thinking was is that to have four arrays and then put them in four divs and then place them side by side. btw: the menu will be stored in database Hey everyone, After doing some reprogramming of the site I was making I'm having troubles with lists. I can't set the width of the li or a so that the size takes shape. I can't figure out why, or how to do it. I know I've done it before but the code i used there just doesn't seem to want to work. The LI and A tags take the size of the text within. I've checked the resources I could find in the sticky and that kravitz gave me and they seem to be able to set width but it's just not working. here is my css Code:
#menu{
width:750px;
border:thin solid #000000;
}
#menu ul{
margin:0;
padding:0;
width:750px;
display:inline;
}
#menu li{
width:150px;
display:inline;
border:thin solid #000000;
list-style-type:none;
background-color:#550210;
}
#menu a{
width:150px;
}
If I take out the display:inline the width takes shape but when I put it back in it resizes to the size of the text within. This is one of Many issues I have with fire fox, Basically I want a list of hyperlinks with no bullets. Normally I would set list-style-type = "none" for the <uL> tag and that would be it. In fire fox, the list disappears. Also it appears that FF has issues with hyperlink in a list because even with out the style type set, the list disapears. CSS Code:
a:link {
font-family: "Bradley Hand ITC", "Monotype Corsiva";
color: #999999;
}
ul{
margin:10px;
padding: 10px;
list-style-type: none;
}
li
{
font-family: "Bradley Hand ITC", "Monotype Corsiva";
color: #999999;
}
html Code:
<div id="projects">
<h1>Projects</h1>
<P>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul></p>
</div>
|
|||||||