devzero
-
Posts
7 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by devzero
-
-
Could you post example code or link to an example? Not sure i understand the problemWell actually...i did fiddle around with it..i used relative positioning with the main content part and negative positioning (not sure if its a good idea...but) because when i had zero pixels for top positioning of content it sat below the links..but the right distance away from the side of the left side..if you get what i mean..so i thought it would bump up next to it nice and cozy..but instead it doesnt..so instead of adding..i take away! and it worked..but now IE6 has just screwed up the link hovering and borders..ill upload it on the original link at top of page if you wanna see it.sorry for rambling on but i just have to get this out! lol i've been trying all week to get it happening..but nothng..so now i have progress..Does anyone know why IE6 is eating it up? Or any hacks to fix it :?Thanx for the answer dev. If you could answer this as well that'd be great ;p.
-
Try wrapping the content in a table: <table><tr><td><!-- Main Content--><div id="content">
-
Jepp, that worked like a charm. Stupid of me not trying it tho
Thank you so much for helping me. -
I tried doing it within a list, with no diffrence in firefox, could you explain a bit more how you would suggest i do it to remove the spaces between the images?I would use a list to do that.Then you can control the spacing between the li's pretty easy.Here is a great resource for lists:http://css.maxdesign.com.au/IE will toss extra padding in the list elements though, so I would create 2 style sheets. 1 for IE and 1 for everyone else. Use conditional commenting to tell IE what to do.<!--[if IE]><link rel="stylesheet" type="text/css" media="all" href="style_IE.css" /><![endif]-->
#menuContainer ul { list-style-type: none; margin: 0; padding: 0; height:150px; } </style></head><body><div id="menuContainer" class="menuContainer"> <ul> <li><a href="#" onclick="MenuClicked(0);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Forside" /></a></li> <li><a href="#" onclick="MenuClicked(2);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Min%20side" /></a></li> <li><a href="#" onclick="MenuClicked(4);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Audun" /></a></li> <li><a href="#" onclick="MenuClicked(6);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Granli" /></a></li> <li><a href="#" onclick="MenuClicked(5);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Borgjalia%2016,%20B%C3%B8" /></a></li> </ul></div> -
There are several other ways of doing this also: Set the width of each element :Yes, that worked! I knew there had to be some way to do it. Thank you!h1{background-color: #00ff00; width:33%;}Use the float property, Then position each element:
h1{background-color: #00ff00; float:left;}The simplest way tho, if you can edit the HTML, is use display inline and a BR after each heading.:
<html><head><style type="text/css">body {background-color: yellow}h1{background-color: #00ff00; display:inline;}h2 {background-color: transparent}p {background-color: rgb(250,0,255)}</style></head><body><h1>This is header 1</h1><br><h2>This is header 2</h2><p>This is a paragraph</p></body></html> -
I have several pictures i want to stack verticaly without any space between them (for creating a menu). I have tried to get them to stack without any spacing between, but so far i have had limited luck. They show ok in IE 6 but not in firefox 1.5. The images are 200*40px. Any ideas to how i could solve this? I have removed some scripting on the images that produces a rollover effect.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head> <style type="text/css">body {background-color:green;}.menuItemImage{ border: 0px; padding: 0px; margin: 0px;}.menulvl_0 { border: 0px; padding: 0px; margin: 0px; display: block; text-decoration: none;}.menuContainer{ float: left;}.subMenuContainer{ width: 200px; position: absolute; top: 40px; left: 200px;} </style></head><body><div id="menuContainer" class="menuContainer"> <a href="#" onclick="MenuClicked(0);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Forside" /></a> <a href="#" onclick="MenuClicked(2);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Min%20side" /></a> <a href="#" onclick="MenuClicked(4);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Audun" /></a> <a href="#" onclick="MenuClicked(6);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Granli" /></a> <a href="#" onclick="MenuClicked(5);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Borgjalia%2016,%20B%C3%B8" /></a></div> <div id="subMenuContainer0" class="subMenuContainer"> <a href="#" onclick="MenuClicked(1);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Informasjon" /></a> <a href="#" onclick="MenuClicked(3);return false;" class="menulvl_0"><img alt="" class="menuItemImage" src="pictures\image\button_blue.jpg?text=Forside" /></a></div></body></html>
floating layouts
in CSS
Posted