|
CSS - How Do You Get A Display: Block Item To Display Inline?
I've been seeing people using ul and li tags to make their menus in css.
So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Similar TutorialsThanks for taking the time to read my question. I have a <div></div> that I am using to make a bar across my page. In this bar I am placing the links to the other pages on the site. If I don't use float, the height is messed up. If I do use Float, the width shrinks to the minimum. So I added width: 100%; but that made it wider than the rest of the other bars I already have... at leasts in FF, but not in IE. What should I be using? Float? Block? Inline? I've read the descriptions on http://www.w3schools.com/css/pr_class_display.asp but am still unclear on how to use them. I would like to have an area as wide as the page, with links in it so that the height fits the text + the padding. Does DocType help this? Not to clear on how to use that either. Thanks again, Brad my code below. HTML: Code: <html> <!-- Generated by AceHTML Freeware http://freeware.acehtml.com --> <!-- Creation date: 20-Jan-2006 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Contribution Help</title> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="piercedjunkmail@hotmail.com"> <meta name="generator" content="AceHTML 5 Freeware"> <link href="ChurchHelp.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="Bar1"></div> <div id="TitleBar">Help for You</div> <div id="MenuBar"> <div id="MenuItem"><a href="index.html">Home</a></div> <div id="MenuItem"><a href="General.html">General Help</a></div> <div id="MenuItem"><a href="Settings.html">Settings Help</a></div> <div id="MenuItem"><a href="Contribution.html">Contribution Help</a></div> <div id="MenuItem"><a href="Member.html">Member Help</a></div> <div id="MenuItem"><a href="SiteMap.html">Site Map</a></div> </div> <div id="imgCont"> <img src="Images/ContributionForm.jpg" border="0" width="427" height="287" alt=""> </div> </body> </html> CSS: Code: body {
margin: auto;
background-color: #bcb277;
font-family: Veranda, Arial, sans-serif;
}
#Bar1 {
background-color: #CC9900;
height: 10px;
}
#TitleBar {
background-color: #330033;
height: 30px;
color: green;
font-weight: 25px;
padding-top: 5px;
padding-left: 10px;
}
#MenuBar {
display: compact;
/*float: left;*/
/*width: 100%;*/
background-color: #006600;
padding: 2px;
}
#MenuItem {
float: left;
margin-left: 30px;
color: white;
}
#imgCont {
float: left;
padding: 12px;
background-color: #a99a66;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: #DCDCDC;
text-decoration: none;
}
a:hover {
color: #A9A9A9;
text-decoration: overline underline;
}
a:active {
color: #8B0000;
}
Hey everyone, I seem to be having problems on IE7 for a clients website (http://beitelligent.com/clients/sportsdome/ ).. If you view it on IE8 or Firefox 2.X+ it seems to display correctly, all on the same line.. on IE7 it still displays it as a list.. Does anyone know why this is? Thanks, Peter Barbosa I hate IE so much. Ok, I have a list, with a display:inline-block; property. Wanting a row of images, with text under each mage. I thought I solved this with this property, but with IE, it doesnt put the images in a row, but places them one under the other. FORM: Code: <ul> <li> <img src="images/news/dummy.png" name="News" width="100" height="100" /><br /> Category<br /> 00/00/00</li> </ul> CSS: Code:
#images ul
{
list-style:none;
text-align:center;
}
#images li
{
margin-right:15px;
display:inline-block;
}
Either a fix for IE, or a alternative to this would be great. Thanks in advance, Joe. I'm new to CSS (Other then very basic CSS) Anyway I have a menu which uses a tags, that also have a background image. I am adding in the background image with CSS, I have the display set to inline-block as block would put everything to the next line and inline would not allow for the image to show though in full (only enough for the text inside the link. Anyway using display: inline-block it seems to put padding on the links, is there a way to remove this? i want the background images from the links to be next to each other with no spacing or padding. My code: #buttonBackground { display: inline-block; background-image:url(/media/images/button_background.jpg); background-repeat:no-repeat; width: 113px; padding-top: 4px; height: 23px; text-align:center; vertical-align: bottom; (This isn't working either?) } and a sample link: <a href="default.asp" id="buttonBackground">HOME</a> Anyone able to help me remove the padding surronding the a tag? Hi all I'm stumbling over the oddities of IE's hasLayout again and again, and often I can fix it using the properties overflow:auto and display:inline-block: Code: div#container {
overflow: hidden; /* For clearing floating inner elements */
display: inline-block; /* For regarding margins of inner elements etc. */
}
(Of course I only assign the display value to IE only.) As far as I could see so far, assigning these properties does not affect the expected behavior of the element in any negative way. Now I thought: why not assign them to all div elements as default? Code: div {
overflow: auto;
display: inline-table;
}
I didn't test this yet, but as long as the whole website's other CSS and the whole XHTML structure are clean (speak: the elements are only used for purposes they are intended to be used), this shouldn't have any negative consequences, should it? Thanks for your opinion, Josh Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks Is there a clean way to display an element right next to a floated div that will have a changing width? I have an element I'm floating left, with max-width set (using an IE hack for IE). What I want is for my right floated div to display immediately after the left floated one. It's displaying a headline and a date. The reason they are not in teh same container is that if the headline is rather long I'm letting the text wrap. Thanks! Hi Guys, I have what i think is a rather odd problem and i have not seen it before. I have just finished creating a wordpress template for my blog which can be found at http://www.mobileshop.com/blog i have pretty much got everything sorted (except Safari pushing the RSS info down) but i have one strange problem in IE. If you look on the right hand bar in a non IE browser you can see that the lists all have a little icon of a phone as the bullet points. Now if you switch to IE then you will see that the first item of each list is missing the phone icon. Even if i swap it back to normal bullets it still misses the first one off. The <li>'s all seem structured fine in the html and my css is as follows... Code:
#rightbar ul li ul {
background: #fff url(images/cat-bg.gif);
background-repeat: repeat-y;
color: #03036a;
padding: 8px;
margin: 0;
margin-top: 0;
}
#rightbar ul li ul li {
margin: 0;
margin-left: 20px;
padding: 0;
line-height: 20px;
list-style-image: url(images/phone-bullet.png);
background: none;
font-size: 120%;
width: 210px;
}
I know its probably not the best code but i cannot for the life of me work out why IE does not display the icon for the first <li> item, anyone have any ideas? Thanx 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 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? This is bugging me to death. I cannot get these to top elements to display inline. If anyone could take a look in firebug to see element and related css applied and tell me whats wrong. The page is: http://travelmagoo.com/index.php?option=com_resource&controller=article&article=384&category_id=201&Itemid=0 at the top header there is a title and to the right there is an image. I would like the image and title to be on the same line but everything i do will not let me do this. any ideas? Hello, my code works fine on my MAC browsers, but on my PC, IE6 browser, the buttons underneath the body of the page don't align. Here's the site: http://www.caillouette.com/Utilitrek/three/ Here's the CSS:http://www.caillouette.com/Utilitrek/three/style2.css Can someone tell me if this site looks okay in IE 7? I can't download IE 7 because of some technical quirk on my computer. And if they don't align in IE 7, please tell me what I should do. thanks -Sean So, I'm trying to figure out the proper way to use display:block based on what my needs are. My needs: I'm wanting to create essentially a box with a header, image, and paragraph inside. I want to make it so that when any part of the box is hovered over, it is essentially a link... (changes text color when hovered over). However, I know certain elements aren't supposed to go within <a> tags, such as <h3>, <div>, <p>, etc.... In IE, when I do it this way, using those tags inside the <a href> tag, it works fine. However, in FF, some of the elements aren't applied.... For example, I have 3 boxes of equal length, which all have the same CSS classes, just different content. When I load the page in FF, 1 of the 3 will make the header, image, and paragraph seperate links, and not use the class I have set for it. (The 1 of the 3 isn't always the same... it could be the first box, or second box, or even third box). Sorry for the vagueness, but I'm trying to explain the best I can... If you need to see the code (or site), let me know... Because of the business I'm creating this for, I can't publish it's link until they launch officially. But I can create another page that has the same code to show you what is going on. If you need further clarification as well, just let me know. Thanks. I have several <a>'s on my page, where their display is set to block, and I want to put a submit button in each of them. When I put the <button> in the <a></a>, though, the submit button doesn't go to the processing page, it just goes where the <a> was headed. How to I get the submit button to go to the processing page and not where the <a> was headed? I could put the submit button below the <a> block, but that's very unattractive, and I want the user to be able to click anywhere in the block to go to the next page (except for where the submit button is.) Any help much appreciated! Hi, I guess this is a fairly easy one to sort out. I have a main menu of 5 links which i want to highlight when you mouse over the area. At the moment I have coded the menu in a table which I know is not so great, but its the only way I can get the background image to display across the whole of the <div> and this only works in FF, in IE6 you have to mouse over the link text itself before the highlighting will appear. I just want to know the "correct" way to code this so that when the mouse hovers over the line the link is on the highlighting will appear. Take a look at www.webwizedezignz. co . uk to see what its like at the moment. Cheers in advance I'm very aware of all sorts of IE bugs, but I've never heard of a safari bug with the display:block property within an inline anchor. Does anyone have a solution for this bug? view this page with the latest Safari: animalcrossingbay.net/cmps_index.php I'm trying to use image sprites to make images on my website switch to another image when the user hovers over them. These images are each placed in their own td that are set at different percentages within a 100% table. The reason I need to use percentages is because I want the table and images to re-size to fit each individual computer screen. They do this beautifully, but when I add the image sprite, which has "display: block;" in its CSS, my images wont re-size. They just cut off. Is there a way to use image sprites without the display: block code? Or is there a similar way to make images seamlessly grow and shrink to fit a browser without using a width percentage? Thanks! Hello, I am having trouble with the display: inline tag. ******************************************** Here is the style: H1.nolinebreak { font-size : 12pt; display: inline; } Here is an HTML snippet: <p> Here is my content text. Blah blah <H1 class="nolinebreak"> inline header 1 </H1> blah blah blah <H1 class="nolinebreak"> inline header 2 </H1> </p> ******************************** The second and additional instances of the <h1 class="nolinebreak"> works great. But the first one always puts in a line break. I need them all to display inline. What am I doing wrong? Thanks in advance. Thanks for taking the time to read my question. I have two containers that I want to line up at the top. I can't seem to make them line up. I have a picture inside a <div>, then I have a paragraph. It works in IE7, but in FF, the <p> appears under the picture. If I put a width on the <p> it moves up, but never up all the way so that it is inline with the picture. I'm stumped and not sure what to do. I tried putting display:inline; on either classes, and on both classes at the same time. Not sure what else to do. If I put a width on the <p>, it looks like this in FF |------| |Icon | |---------------------------| |------| | ElevatorSpeech ES2..........| .............|---------------------------| It looks like this if I have no width on <p> |------| |Icon | |------| |---------------------------| |ElevatorSpeech ES2...........| |---------------------------| HTML: Code:
<div class="ESContainer">
<p class="Title1">Control</p>
<div class="Icon"><img src="Images/Remote.jpg" align="Zone All Control Remote Control" /></div>
<p class="ElevatorSpeech ES2">Control your surroundings with confidence, get the results you deserve.</p>
<p class="ElevatorFull"><span class="EFLargeText">Zone-All</span> has been manufacturing room comfort temperature controls for more than two decades. Its variable air volume and variable temperature solutions for zone controls are applicable to heating and cooling systems that are designed using both incremental HVAC units and central station air handlers.</p>
</div>
CSS: Code:
.Icon {
float: left;
margin-left: 10px;
padding: 0px;
height: 100px;
background-color:#FF0000;
}
.ElevatorSpeech {
font-size: 19px;
margin-left: 10px;
margin-right: 10px;
float: left;
padding: 0px;
/*width: 225px;*/
background-color:#FFFF00;
}
Thanks, Brad |
|||||||