|
CSS - Block Elements In A Li Tag
Hi Guys,
I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet. Like this (. is the li): . Here is My Div Content I want it to be like this: . Here is My Div Content Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure). Here is my markup. <ul> <li> <div class="dragHandle"> </div> </li> </ul> DragHandle class is as follows .dragHandle { width: 20px; height: 25px; background-image: url(/styles/icons/selectarrow.JPG); background-position: center; background-repeat: no-repeat; cursor: move; } Similar Tutorialsi know this probably aint the first time this has been brought up... but i dont even know what to call it.. so i can search for it.... here is my issue, i have two divs... and naturally with block elements there is a auto <br> or what ever that is put on it... how do i eliminate this.. without making it an inline element?? anyhelp would be GREAT it has been bugging me to death. I really, really want to figure out how to duplicate the way Newegg.Com's product cells on their front page dynamically change width depending on the width of your browser window. I see they use some extremely fancy javascript that frightens me greatly. What do you guys think about their technique? I'm using the same CSS cell idea on my site so that the product tables display varying numbers of columns depending on the user's browser width. But man, this final step of autowidth is totally out of my league. Hey, I been wondering, when using XHTML Strict, what is considered the correct way of making a block level element (like a division) and the document body fill-out/fit the browser window vertically? The way I've been accomblishing this is by using javascript to set the height of the body when-ever the page is loaded and resized, though using something like this(of course, using document.documentElement.clientHeight for IE and using a more sane variable name for the sum of the top and bottom margins ) Code: document.body.style.height = (window.innerHeight - sumOfTopAndBottomBodyMargins) + "px"; and and setting the block level elements css height property to 100%. This works, but its lame! When resizing, the block level element doesn't get resized before you are done resizing and the appropriate event is fired. Not very 21th century. So, to sum up.. can some friendly soul please enlighten me on how I can do this in a decent way using only CSS? Cheers Hi, I was wondering if it's possible to put 2 block-level elements next each other without float and absolute positioning? Can you make them display as inline-elements so that they line up next each other? greets Hi! Is it OK to mix inline and block elements? For example: <imp ... /> <p> .... </p> Thanks hey, I have 4 block elements like this: Code: <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <div id="banner"> </div> <div id="logo"> <img src="images/logosmall.png"> </div> <div id="registercontent"> </div> <div id="footer"> </div> </body> </html> and the following CSS: #banner { height: 75px; width: 100%; background-image: url(images/bg1.gif); } #logo { position: absolute; top: 30px; left: 34px; z-index: 10; } #registercontent { position: static; width: 600px; margin-left: 50px; margin-top: 50px; margin-bottom: 50px; padding-top: 20px; padding-left: 25px; font-family: verdana; font-size: 12px; border: 1px solid #39ce96; color: #39ce96; background-color: #efefef; } #footer { height: 75px; width: 100%; background-image: url(images/bg1.gif); } now I have found out that when I include the 'logo' block in the page and view the page in browser, the positioning of my 'registercontent' goes haywire (specifically, the block loses its top margin), if I take out the 'logo' block, the 'registercontent' block returns to normal behaviour. Only problem is, I don't know why..!!! help much appreciated. Ok, so maybe I don't understand the display attribute quite right. What I'm doing makes sense to me, but it's not working right when displayed. I have a div that is set to display inline (so that I don't have to use floating). Since inline elements can't have height/width attributes, i have another div inside of it, with display set to block. This inner div has height and width attributes. Now, if I place another similar structure (block div inside inline div) in the code, the two outer divs /should/ (in my mind) render side-by-side with the heights and widths of their child div's. When I try it though, it displays everything as block-type. Any ideas? PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <style type="text/css"> img{ border: 0px black solid; height: 200px; } div.outerholder{ display: inline; } div.innerholder{ text-align: center; height: 200px; width: 267px; margin: 0px; padding: 0px; display: block; } div.centerme{ text-align: center; margin-left: auto; margin-right: auto; } </style> </head> <body> <div class="centerme"> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> <div class="outerholder"> <div class="innerholder" style="margin-left: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> <div class="outerholder"> <div class="innerholder" style="margin-left: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> <div> <div class="outerholder"> <div class="innerholder" style="margin-right: 5px;"><a href="dir1/PICTURE.JPG"><img src="dir1/PICTURE.JPG" /></a></div> </div> </div> </body> </html> P.S. It also doesn't center properly in FF, but that's secondary... Hi all, I've got a problem on my hands. I've been restructuring the site I work on from their FrontPage code to complete XHTML + CSS. I always thought that by using span's that I could make a block level element display inline, but keep all of it's block level uniqueness, such as height and width and other items, but would display right next to other elements. Works great with headers and such but not with boxes. I created a 4 <span> system inside a centered div, figuring they'd all work. But span's don't keep their block level uniqueness, so nothing displayed at all! I fixed 3 of these 4 by putting their background images inside the spans, which I wanted to avoid, but it works so I won't complain on that. Now I have this. Code: <div id="bigdiv"> <span id="maptop"><img src="images/2004/new_main_front/wel_left_top.jpg" alt="Welcome!" /></span><span id="feattop"><img src="images/2004/new_main_front/feat_right_top.png" alt="" /></span><br /> <span id="mapbot"><img src="images/2004/new_main_front/wel_left_bot.jpg" alt="" /></span><span id="featbot">This is where things will go.</span><br /> </div> Span id featbot has no images, it has a repeat-x background so that I can place and change text in there at will. Because of this, and it being a span, it wraps only to the size of the text, which isn't good. I found a display: inline-table (displays as a table, but inline, pretty obvious), which works great in Safari for OS X, but not in IE 6 or Firefox on Windows. How would I structure this correctly so that it actually does work? Here is an image showing the design and how it's set up (ignore the gradients, they're not being used). As you can see where featbot is, that's where text will go, the others are images, so they display right. Suggestions? I'm really confused here... Thanks. source: bluewebpages.com/photography/album3/1 i need help setting the thumbnails which have a block display to line up on the same line. i'm using a program called photostack, which is a light-weight photoblog system. when it spits out the code, how would i center the main div containg all thumbnails? i've tried text-align, negative margins(which worked except that the main photo would display ontop of them because the negative margins involved abs positioning) mainly if someone could point me in the right direction on getting block elements on the same line then i'd be set. i can resolve the later issue. thanks, amory EDIT FIXED - need a float: left; I have an unordered list that I am using as a horizonal nav with the list items displayed inline. Code:
<!--
***CSS***
li{display:inline;}
-->
<ul>
<li><a href="#">Menu1</a> <li>
<li><a href="#">Menu2</a> <li>
</ul>
produces Code: Menu1 Menu2 Easy enough.... Now, I'm also trying to use this image replacement technique that would hide the text and instead use an image instead. Example: Code:
#ID_OF_ELEMENT {
padding: HEIGHT_OF_IMAGEpx 0 0 0;
overflow: hidden;
background-image: url("hello_world.gif");
background-repeat: no-repeat;
height: 0px !important;
height /**/:HEIGHT_OF_IMAGEpx;
}
This technique, however, was designed for block level elements such as headers. Otherwise, I would have to make the 'a' element block level, then give it a specific width (the width of the image that's replacing the text). The problem with that is now the menu has block level elements and are now stacked on top of each other instead of inline. I've tried using SPANs to hack around it, but I can't seem to get it to work. Is there any way through CSS to either: a) Allow block level elements to display inline, or b) Set a specific width to an inline element? Thanks in advance I read the CSS Mastery book (Andy Budd). I think this is one of the greatest CSS book on the market but sometimes is hard to understand. I don't understand what the author say, he http://img24.imageshack.us/img24/4705/cssx.jpg Ok, I have this code: Code: <div> some text <p>Some more text</p> </div> "some text" don't have an element, and is treated like a paragraph. Ok, I add another text without element (some text2).. Code: <div> some text <p>Some more text</p> some text2 </div> Now, what this mean ? The same thing is true for "some text2" ? "some text2" is treated like a paragraph ? Please, someone explain me a bit what the author want to say in the attached image file. Thanks! Is it possible mix inline and block-level elements directly together?? For example: Code: <div....> <input..... /> <-- inline element <ul>... <-- block element </div> Thank you Hi, I have a realy strange problem that I'm hoping someone can shed some light on. I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor. <a href=""><h2>Some text</h2></a> Using firebug I saw that the html gets duplicated like so: <a href=""></a> <h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places! <a href=""></a> and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>. In the stylesheet the anchor has display:block; Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before! Thanks. Hi! Is it possible to align vertically block elements in a fixed-height (unknown) container? If not, this is a serious shortcoming of the css model of placing objects on the screen. Thanks! I've created a couple of links that I've styled as buttons. Code: a {
display:block;
width: 6em;
padding: 0.2em;
line-height:1.4;
background-color: pink;
color:black;
}
The problem is that I have two that should site side by side but becasue they are block elements they sit one over the other. Any suggestions on how to make them site side by side? TIA Hello all, I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly. The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements. Code:
#wrapper-body ul.staff-list{
list-style-type:none;
padding-top:10px;
position:relative;
}
#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
#wrapper-body ul.staff-list li{
float:left;
width:230px;
position:relative;
padding:8px 0 8px 15px;
z-index:1;
}
#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
#wrapper-body ul.staff-list li p{
padding:0 0 9px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list li small{
padding:0 0 5px 0;
margin-left:91px;
}
#wrapper-body ul.staff-list-clerks li span{
color:#A6302B;
display:block;
float:left;
}
#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
#wrapper-body ul.staff-list li div.staff-list-detail{
display:none;
background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
padding-bottom:3px;
margin-top:-15px;
left:4px;
z-index:10;
top:15px;
position:absolute;
}
#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }
#wrapper-body ul.staff-list li:hover div.staff-list-detail{
display:block;
}
An image of what is happening below: Thanks for reading! http://warcraftpress.com/theme/theme.html I'm trying to have #footer be pushed down instead of the menu lapping over it. Basically, I want the menu to push it down, but it just overlays it. Thanks I have this CSS for my "globalNav" class: .globalNav {width: 217px; background-image:url(images/barbackground.jpg); background-color: #1B619E; background-repeat: repeat-x; border-right: 1px solid #075284; position: absolute; left: 0px; top: 125px; height: 450px} .globalNav A {background-color: #004E82; border-top: 1px solid #407AA1; border-bottom: 1px solid #00375C; border-right: #00406B; color: white; font-weight: bold; padding: 2px 5px 2px 5px; text-decoration: none; display: block} This is my code for globalNav: <div class="globalNav"> <a href="#">Global 1</a> <a href="#">Global 2</a> <a href="#">Global 3</a> <a href="#">Global 4</a> <a href="#">Global 5</a> <a href="#">Global 6</a> </div> For whatever reason, display block won't work in IE unless I remove the width, height, and positioning. Anyone know any tricks to make this work? Hi guys I was just wondering why cant i see these two <b></b> "blocks" on each side of my <UL> block in ie6 but in Firefox i can? Screenshot of situation: here is my code for the <b> blocks: PHP Code: .navbar b.lefty { display:block; position:absolute; z-index:604; height:100%; width:20px; top:0px; left:-20px; padding:0; margin:0; background-color:#ffffff; } .navbar b.righty { display:block; position:absolute; z-index:604; height:100%; width:20px; top:0px; left:136px; padding:0; margin:0; background-color:#ffffff; } Here is my code for the <UL> block: PHP Code: .navbar :hover ul { z-index:604; width:136px; top:40px; left:0px; padding:0; margin:0; background-color:#333333; text-align:left;} Now here is my HTML: PHP Code: <ul> <b class="lefty">d</b> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <b class="righty">d</b> </ul> I would like to have a table with 6 td's across and the 7th td to break line and default to under neath the first td. I tried using display block and firebug outline the area where my content should be but it is still to the right of the 6th td. I would just like to do this to keep it in the same row so i can hide and show it dynamically outside of those first 6 td's. i coudnt find the forum search feature...? but anyone help with wht i am doing wrong? much appreciated |
|||||||