|
CSS - Image In Horizontal Lists Messing Up Alignment
Hello all,
I am trying to make a horizontal nav bar using a list. Everything was going good until I tried to add an image (essential a line) to seperate each <li>. When I did this, the height of the nav bar expanded and it moved the entire list down about 15 pixels or so. I am attaching an image before I added the image and after I added the image to show. Here is my css code for before I add the image: PHP Code: #navbar { height:37px; line-height:33px; padding: 2px 0 0 10px; vertical-align:top; background: url(images/linkbarbg1.png) repeat-x; font-family: Tahoma, Georgia, "Times New Roman", Times, serif; font-size: 18px; color: #FFFFFF; } #navbar ul { vertical-align:top; margin:0; padding:0; border: 0px solid #000000; } #navbar ul li { display: inline; } #navbar ul li a { display: inline; text-decoration: none; padding-top: 5px; padding-bottom: 4px; padding-right: 10px; padding-left: 10px; color:#FFFFFF; } #navbar ul li a:hover { height: 31px; background:url(images/linkbarbg1hover.png) repeat-x top left; background-color: #FF3300; } And HTML: PHP Code: <div id="main"> <div class="leftshadow"> <div class="rightshadow"> <div id="header"><img src="images/logo1.png" /></div> <div id="navbar"> <ul> <li><a href="#">Milk</a></li> <li><a href="#">Eggs</a></li> <li><a href="#">Cheese</a></li> <li><a href="#">Vegetables</a></li> <li><a href="#">Fruit</a></li> </ul> </div> </div> </div> And here is what it looks like: My CSS Code is the same for after, here is my HTML code for after: PHP Code: <div id="main"> <div class="leftshadow"> <div class="rightshadow"> <div id="header"><img src="images/logo1.png" /></div> <div id="navbar"> <ul> <li><a href="#">Milk</a></li> <li><img src="images/linkbarseperator1.png" /></li> <li><a href="#">Eggs</a></li> <li><a href="#">Cheese</a></li> <li><a href="#">Vegetables</a></li> <li><a href="#">Fruit</a></li> </ul> </div> </div> </div> and here is what is looks like: Is there a way to fix this? UPDATE I have noticed the same thing happens even when it is not a list. Therefore, it must be due to some other factor...does anyone have any ideas? Similar TutorialsI have a horizontal list using <ul> but the last two items in the list i want aligned to the right of the page but how do i do this? PHP Code: <div id="menu"> <ul> <li>home</li> <li>browse</li> <li>artists</li> <li id="selected">collections</li> <li>news</li> <li>how to buy</li> <li>trade</li> <li>mailing list</li> <li>e-card</li> </ul> </div> above is my list HI Guys, I'm trying to create some CSS to contain an image gallery. A query runs which grabs all the images for a certain item/article. I then output the query as a loop, and it populates a div with images. It works pretty good, but if one image is bigger than the others, it throws off the alignment. How can I force each row of photos to be horizontally even? You can see the output results here http://details.at/photo_test.cfm <!--- Query ---> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <style> #maindiv { padding:0 0 1em 2em; width:550px; float:left; } div.img { margin:3px; height:auto; width:auto; float:left; text-align:center; } </style> </head> <body> <DIV id="maindiv"> <H2>Photos</H2> <CFOUTPUT QUERY="photo_file_info"> <div class="img"> <a href="http://google.com" target=new> <img src="http://details.at/imagehost/classifieds/aircraft/139/s_#photo_file#"> </a> </div> </CFOUTPUT> </DIV> </body> </html> how can i make list items that are in a horizontal list all the same width. I try adding the width attribute to it but it has no effect Working on converting the layout in the attached image and I'm having a problem with the main menu. Here are my problems: *trying to push down the menu items. Setting padding-top only seems to extend the borders up above the horizontal line and doesn't push the text down. *getting the highlight color above the text. Some ideas I had were trying to set a background image for each list item (but how can I do this without the borders extending above the horizontal line) or setting a background image of the whole unordered list (but with this will "break" when users have different font sizes). Any thoughts? Layout is attached as well as what little code I have since I'm just starting on this project. Thanks in advance, -b Sorry if i repeat someone else's question, i've actually stumbled upon lots of solutions for this matter, but, as usual, there just seems to be no "only one" solution, so maybe someone here knows. In the good old days if i wanted to center all kinds of stuff, i'd use <div align="center">all kinds of <stuff></stuff></div>. Now i visit the w3c site and see the beautiful "deprecated" word by the "align" property, so i guess they once again need us to bash our heads against the walls with the most stupid invention in mankind: css. So can someone tell me how to center div's content horizontally? And not just text, i mean images, other tables or other kinds of things. If i assume correctly: If i use text-align - this is meant for text only If i use margin: 0 auto - that would align the div itself and not the content and we would need to know its width So is there any normal solution to this? WordPress 3.0.4, multisite network enabled, local installation with MAMP 1.9.4 (PHP 5.3.2) WordPress Theme: Twentyten (child) Browsers: FireFox 3.6.13, Safari 5.0.3 Problem: Have four divs within a container div. CSS validates. Moreover, the html & CSS do display without a hitch on a hand-coded website using HTML 4.01 Transitional//EN. They also display perfectly up at jsfiddle.net/EVErR. However, the same code in a WordPress Page is behaving unexpectedly: the four divs are floating left, one after the other, but stepped down so that they resemble a staircase. See screenshot at imgur.com/ufw2i. The CSS: /* div layout for displaying 4 small boxes horizontal alignment */ div.box-container { display: inline; margin: 0pt; padding: 0pt; width: 640px; background-color: rgb(229, 231, 225); position: relative; float: left; overflow: hidden; } div.small-box { border: 1px solid rgb(153, 51, 102); margin: 20px 0px 20px 15px; padding: 0.325em; float: left; display: inline; vertical-align: top; background-color: rgb(255, 244, 227); width: 128px; line-height: 0.85em; max-height: 8em; min-height: 8em; position: relative; } HTML: <div class="box-container"> <div class="small-box">SOME TEXT AND AN IMAGE</div> <div class="small-box">SOME TEXT AND AN IMAGE</div> <div class="small-box">SOME TEXT AND AN IMAGE</div> <div class="small-box">SOME TEXT AND AN IMAGE</div> </div> What am I missing here? Help much appreciated! I'm having a problem getting a background image to show properly in Internet explorer.. It's hard to explain, but if you go to my page... http://www.55yardline.com you'll see what I'm talking about. Works find in every browser I tested with except Internet Explorer. If you look at the background image of the player, and than scroll up and down a bit, the image gets all messed up. Is there any way to fix it? How do I go about making my unordered list use a image file or the bullet? Code: <ul> <li><a href="#onesweetcoma">One Sweet Coma </a></li> <li><a href="#untitled">Untitled</a></li> <li><a href="#freedomfound">Freedom Found </a></li> <li><a href="#yourwords">Your Words</a></li> <li><a href="#reprise">Reprise</a></li> <li><a href="#cantpullaway">Can't Pull Away </a></li> <li><a href="#sleepingawake">Sleeping Awake</a></li> <li><a href="#wherewestand">Where We Stand</a></li> <li><a href="#echooffthewalls">Echo Off the Walls </a></li> </ul> my image name is bullet.png Hi I found it: ********************** Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li#current ul li a {
background-image: none;
}
*************************** I have a nested list representing a menu. I want the active menuitems (listitem) link to have a background image. When active menuitem is a parent then all the childs also get the background image...... How to I change the CSS so only active menuitems link get the background image set, and not the child links of the parent? If possible, I want to make it work without changing any in the HTML! Here is current CSS and list structu Code:
#tableLeftCol ul.menu li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
#tableLeftCol ul.menu li ul li#current a {
background-image: url('../images/menu-active-rect.gif');
background-position: right top;
background-repeat: repeat-y;
}
Code: <div id="tableLeftColPadding"> <ul class="menu"> <li id="current" class="parent active item54"> <a href="/index.php?option=com_content&view=article&id=48&Itemid=54"> <span>Parent</span> </a> <ul> <li class="item57"> <a href="/index.php?option=com_content&view=article&id=50&Itemid=57"> <span>Child-A</span> </a> </li> <li class="item81"> <a href="/index.php?option=com_content&view=article&id=71&Itemid=81"> <span>Child-B</span> </a> </li> <li class="item59"> <a href="/index.php?option=com_content&view=article&id=52&Itemid=59"> <span>Child-C</span> </a> </li> </ul> </li> </ul> </div> Hi, I need to lay down two images side-by-side in an absolutely positioned div, but they always have a gap between them. I am guessing there is some inherent padding in an image, much like in a <p>, but I can't get rid of it. Qualifiers: 1. The containing DIV is absolutely positioned, but I do NOT want to absolutely position the images within. I want them to be inline, so they lay across the div horizontally. 2. As follows from above, I want the images inline, not block. Basically, I want to control the images, I think there is padding there I cant see, I would like to know how to remove the padding. Here is my test page: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html >
<head>
<title>Mind the Gap</title>
</head>
<body>
<p style="position: absolute; top: 250px;">Desired code style</p>
<div id="bottomAds" style="position: absolute; left: 0px; top: 297px; background-color: orange; width: 760px; height: 90px;">
<img id="leftImage" alt="sorry cnn" style="border-width: 0; padding: 0; margin: 0; border: none;" src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif" >
<a style="border: none; margin: 0; padding: 0;" href="http://www.cnn.com"><img alt="sorry cnn" id="adImage" style="margin: 0; padding: 0; border: none; border-width: 0; " src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif"></a>
</div>
<p style="position: absolute; top: 450px;">Desired Result</p>
<div id="Div1" style="position: absolute; left: 0px; top: 497px; background-color: orange; width: 760px; height: 90px;">
<img id="Img1" alt="sorry cnn" style="display: block; float: left;" src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif" >
<a style="border: none; margin: 0; padding: 0;" href="http://www.cnn.com"><img alt="sorry cnn" id="Img2" style="border: none;" src="http://i.a.cnn.net/cnn/.element/img/1.3/ceiling/logo.cnn.com.gif"></a>
</div>
</body>
</html>
Thanks for looking at this, and for any tips. CJB Hi all This is my first post so first of all Hello and i hope that i can help people and be helped. I am trying to create a Horizontal Image gallery which will scroll I have looked on the web but can't find any concrete answer to what i'm tryign to create. I did find a sort of answer but only displays text i include below, if you haveany ideas of ohow i do display images with a horizontal scroll please help Thank You Chaz P.s. I dunno if i have displayed the code correctly or if i'm meant to paste it in differently. Code: [code]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<title>horizontally scrolling box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color:#303;
}
#wrapper {
width:800px;
height:300px;
margin:100px auto 0;
background-image:url(images/eyes.gif);
}
#container {
width:700px;
height:300px;
overflow:auto;
}
#content {
width:800px;
height:300px;
color:#303
}
#content p {
margin:0;
padding:10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae,
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis,
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi.
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla.
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p>
</div>
</div>
</div>
</body>
</html>
I have been searching on the level world wide web for a tutorial about how to get CSS down for a horizontal navigation bar that uses different images for each individual button's off and on states? Many of the tutorials I have found use some sort of background or two state images, and then write text on top the the images. What if the buttons are designed in a non-arial/verdana/times/san serif font? I assume it would be best to just use images for the nav bar, but then, how do I write the CSS for a nav bar that's using a specific image as it's off stage, and then switches to another image when you scroll over it? I've seen the link that Kravitz has linked to http://www.dynamicsitesolutions.com...mage_switching/ and while helpful, I think I'm becoming more confused. Part of the problem is that in those examples (and even there I'm getting confused over which example is supposed to be the one to use) the images are assumed to be the same width, so the property is set for 120px. But my images are different widths. Now I can make the rollovers work by for example: Code:
.item1 a {
background-image : url(menuoffa.jpg);
float:left;
height:28px;
width:103px;
}
.item1 a:hover {
background-image : url(menuona.jpg);
float:left;
height:28px;
width:103px;
}
and then using html in the following way: Code: <div class="item1"><a href="pagelink.htm"></a></div> My problem is that I can't center the items relative to the page If I were going to use 'tables' to do this, then I'd put all the items in one centered cell, but the whole point is not to use tables so what am I doing wrong?!?! Probably more like, what am I doing right, but anyway... And I've tried reading up on going the horizontal unordered list way http://www.webreference.com/program...ists/index.html but I'm using images instead of text so same problems still OMG I'm going insane Here's my CSS Code:
#header {
position: fixed;
left: 0;
width: 100%;
height: 125px;
top: 0;
background-color: #ccffcc;
background-image: url(images/topbackground2.jpg);
}
Here's my HTML Code: <div id="header" > <img src="images/spacefiller.jpg" align="left"> <a href="mainFrame.html" target="mainFrame"><img src="images/trial3.jpg" border="0" id="courseAssistant" align="left"/></a > <img src="images/blend.gif" width="100%" height="20px" style="position: absolute;left: 122px;top:125px; "> </div> The problem is that I want the <img src=blend> to stretch the width of the div. The image is only 1px wide so I need it to stretch to fill up the header. The code I have works perfect for Mozilla but it won't work with IE. In IE the img stretches 122px farther than the div and causes there to be horizontal scroll bar at the bottom. I can't seem to figure this one out. Thanks in advance for the help and suggestions. 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 */
}
hi i am trying to position some images in this box... #rightColumn { float: right; padding: 0px; margin:0 12px 0 15px; background: #F2FCFF; width: 350px; } there are 3 images and i wany them to go from left to right accross the box using this tutorial as inspiration. however, rather than use margins to space the images (this screws up what i am trying to achieve) i wanted to use css alignment i.e. leave the first image alone, centre the second and align right the third. I can't figure how to do it though... i've tried a couple of things but i still pretty wet behind the ears so don't have too much experience to draw upon.... i tried <div class="button"><img src="images/school-uniform-button.gif" alt="school uniforms" name="uniform" width="107" height="107" id="uniform"><div class="centre"><img src="images/school-equipment-button.gif" alt="classroom equipment" name="equip" width="107" height="107" id="equip"></div> <div class="jumpmenu"><img src="images/fees-button.jpg" alt="School fees" name="fees" width="107" height="107" id="fees"></div></div> and also with the <div class="button"> next to each image with the alignment divs. neither works and advice would be really appreciated thanks jim. I am looking to make a navigation menu similar to the following: http : / / www . coremediadesign.co.uk/website_design_company/about_core_media_design.html This is the sprite image they use. http : / / img819.imageshack.us/img819/8185/menuo.png I would like to accomplish the same thing. I am NOT looking for one long image with my entire menu in image format. I want a three-part background image/sprite like the one I posted above that is used as the background/hover/active by repeating it on the x-axis. I have tried for a long time to get this working but have not been able to. Please help me out. Nevermind, folks over at codingforums helped me. |
|||||||