Lustat Posted March 20, 2010 Share Posted March 20, 2010 I'm having a small dilemma with some pictures. (that and I think I'm over thinking again).the way my site is set up, I have header with a bg pic, menu div under it, under that I have 2 divs side by side one for another menu and one for the main content, than the footer.my problem is that the menu div (under the header), I made the background pic to give the impression that a button is pressed in (the one for whatever page you're on, so if you're on the home page the home button looks pressed in, and the rest of the links are just words). I than made 6 on mouse over image links. now for the problem. I'm trying to align each of the on mouse over links, so they're over the respective link, but I'm having issues with spacing and putting them side by side. I tried to put home in h1 and set the css h1 attribute position: relative, left 20px, than h2 position relative left 80px and so on, but h2 automatically gets put below h1.how can I put all these in a strait line and be able to control how many pixels it is from the left or other pic ? because all the pics are a different size, I cant just go with one size fits all, I need to be able to set them manually.any suggestions ? opinions ?thanks in advance for your help Link to comment Share on other sites More sharing options...
Lustat Posted March 20, 2010 Author Share Posted March 20, 2010 sorry I know I"m bad at explaining at times... perhaps this will help ?I'm using a background like the above and am trying to make it so when you put your mouse over any of the other words a pic comes up over it that makes it look like the word is popping out so you can click it. sorry I'm bad at explaining things at times, and I hope that makes more sense Link to comment Share on other sites More sharing options...
jeffman Posted March 21, 2010 Share Posted March 21, 2010 1. This strategy (lining up images over a background image) is going to cause you all sorts of problems. The normal thing is to keep each of the button elements separate. Clicking a button changes the image source of just that button. This way you be 100% certain that the new image will align with the old image.2. To address your immediate problem, it sounds like you want to treat block-level elements like inline elements? You want them to align themselves horizontally, instead of stacking up vertically? Explore the float and clear properties. Float allows block-level elements to align on the same horizon. Clear turns off that property and is normally applied to the first element that should not be aligned on the same horizon.Don't try to figure it out from what I've said. You know the words to search for now. Go find an example. Link to comment Share on other sites More sharing options...
thescientist Posted March 21, 2010 Share Posted March 21, 2010 i would just add that using lists is pretty helpful with menu/navigation stuff. Link to comment Share on other sites More sharing options...
Lustat Posted March 21, 2010 Author Share Posted March 21, 2010 thanks for the info guys and Deirdre's Dad, thanks, I've been trying to figure out a less stressful way to deal with your #1 haha. it's funny how sometimes the simplest of issues can make you lose a few hairs Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.