|
CSS - Block Level Element Inside Inline?
Hello,
I know that putting a block level element (such as <p> or <div>) inside an inline element (such as <a>) is against "xhtml 1.0 strict" rules, so I'm putting a <span> (inline) within an <a> (also inline). I've made my <span> "display: block;", and it works in all browsers and validates fine, but I feel like I'm cheating the system a bit? The thing is, I need to put a margin under a piece of text without using <br /> (as when a browser forces a line break, it will use that rule and make different pieces of text look odd), but all the text is within an anchor tag, so I can't use <p> or <div>. Would appreciate any thoughts on the matter, Cheers! Similar TutorialsIs it possible mix inline and block-level elements directly together?? For example: Code: <div....> <input..... /> <-- inline element <ul>... <-- block element </div> Thank you Hey, I've got a quick question - I know this must have a common workaround to it, I just can't seem to find it. I have a div positioned absolutely within several parent divs making up the rest of the page. To put the issue simply, it seems to be positioning this child div relative to the body. top:20; and left:20; will put it 20 from the top and left of the body of the page rather than he top and left of the block level div it's nested within. There's no positioning applied to its direct parent. The issue is the same in both IE5.5+ and FF. I can whip up a code example, but I think this is a simple issue that would be easier interpreted as I've put it. Thanks in advance for any help on this. =) I usually lurk in the Javascript forum, but a frustrating CSS issue has presented itself. I've googled this extensively and haven't found any working solutions. I'll write in pseudo-code what I want to happen, and hopefully someone can fill in the blanks... here goes: Code:
<style type="text/css">
.container {
display: inline-block;
}
.title {
align: left;
}
.subtext {
align: right;
}
</style>
<div class="container">
<div class="header">
<div class="title">Title Goes Here</div>
<div class="subtext">Align Me Right</div>
</div>
<div class="content">
Variable content which container needs to size dynamically to fit. Could be 300px wide, could be 500px wide...
</div>
</div>
What I've tried so far: Tried setting the container width to 1% so IE would autosize to content (while setting white-space: nowrap for the title/subtext), but IE wrapped between the title and subtext elements) Played around with setting absolute widths for the container, but I would really prefer being able to have variably sized content And unfortunately (in many ways) it only has to work in IE. Any help would be greatly appreciated. Thanks! 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, 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 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! 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 am a 3week knewb to css. I was wondering if anyone could explain to me when I would use: div or display:block div or span span or display:inline thank you Hi! Is it OK to mix inline and block elements? For example: <imp ... /> <p> .... </p> Thanks I'm reading the "containing blocks" section of http://www.brainjar.com/css/positioning/: "Block boxes are generated by elements such as P, DIV or TABLE." <div> This is the first sentence. <p>This is the second sentence.</p> </div> "It's interesting to note that while the text of the first sentence in the above example generates an inline box" -Didn't they say that block boxes are generated by div? So why isn't the text of the first sentence in a block box? Hi, I am still quite new to CSS so forgive me if this is a silly question but I have created a DIV layout that look something like Code: <div class=row><div class=square>A</div><div class=square>B</div><div class=square>C</div></div> In the CSS "row" is designated as display type BLOCK "square" is designated as "INLINE-BLOCK" in safari, firefox etc this comes up showing the A,B & C next to each other in their own styled boxes. This is how I want to be. However in Internet Explorer (currently testing it on v8), the A ,B and C show up , one underneath the other in a straight line down the page. This is not cool. To fix this issue, I tried changing the inline-block to just "inline" This works fine now in IE, the squares are next to each other like i wanted, but now when I test it on safari,firefox, the boxes go straight down the page! Am I missing something here? I would rather not make a special style sheet for IE if there is a solution that will help make it work on all three browsers. It just seems strange that the display types are working completely opposite to each other . Any help would be appreciated. below if the full CSS rules if that helps any Code: .row {
width: 100%;
height: 30px;
display: block;
font-size: 14px;
text-align: center;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
}
.square {
display: inline-block;
background-color: #eeeeee;
line-height: 30px;
height: 30px;
width: 30px;
border-width: 1px;
border-color: #000000;
border-style: solid;
}
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'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. Thanks 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;
}
Hello, First, I am new to webcoding so I apologise if what I am asking is too stupid. I am doing a little navigation bar for my blog with the hover effect. My problem is that the hover effect only work when I use {display: block;} but I need it to be inline, because when doing {display:block} it displays vertically. However when I do {display: inline-block;} the list items do show up inline horizontally but they show up only as images, neither does the hover effect or the links work. Second, in IE and in chrome it displays differently. Thank you very much for all the help! Also, here is the code! CSS #header-wrapper2{ height:80px; width:580px; margin:0; float: right; background-color: #000000; } #header-wrapper2-navbar{ height: 40px; width: 243; margin-top:40px; margin-left: 3px; padding:0; } #header-wrapper2-navbar li{ margin:0; padding:0; } #header-wrapper2-navbar li,#header-wrapper2-navbar a{ height: 40px; display: block; } #news{ left:0px; width:78px; background: url('') 0 0; } #news a:hover{ background: url('') 0 -44px; } #products{ left:78px; width:88px; background: url('') -78px 0; } #products a:hover{ background: url('') -78px -44px; } #about{ left:166px; width:77px; background: url('') -166px 0; } #about a:hover{ background: url('') -166px -44px; } HTML <div id='header-wrapper2'> <ul id='header-wrapper2-navbar'> <li id='news'><a href='()></li> <li id='products'><a href='></li> <li id='about'><a href='></li> </ul> </div> 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. 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 Hello, I a horizontal navigation within <ul><li> tags. Here is the css for the navigation <ul><li> and the first button. Code: #nav li{
display:inline;
}
a#aboutrollover {
background-image:url(images/nav/about_off.gif);
background-repeat:no-repeat;
width:77px;
height:18px;
display:block;
}
a#aboutrollover span { display:none; }
a#aboutrollover:hover {
background-image:url(images/nav/about_on.gif);
background-repeat:no-repeat;
width:77px;
height:18px;
}
You'll notice that for the button, I have display set to "block." Well, if I set it as "inline" or don't put a display, the span text shows. But the block makes the <li>'s stack upon each other. Here's the navigation code :: Code: <ul id="nav" name="nav"> <li> <a onclick="updateWithAbout()" href="#" id="aboutrollover"><span>About Cats Meow</span></a> </li> <li> <a onclick="updateWithGuest()" href="#" id="guestrollover"><span>Guest Pics</span></a> </li> <li> <a onclick="updateWithStaff()" href="#" id="staffrollover"><span>Cats Staff</span></a> </li> <li> <a href="#" id="webcamsrollover"><span>Cat's webcams</span></a> </li> <li> <a onclick="updateWithParties()" href="#" id="partiesrollover"><span>Cat's Meow Parties</span></a> </li> <li> <a onclick="updateWithContact()" href="#" id="contactrollover"><span>Contact Cats Meow</span></a> </li> </ul> I also tried display: run-in; and display:compact; instead of display:block;. But the first 2 options would make my navigation dissapear. Here is the site:: http://www.catskaraoke.com/index2.php Is there a simple solution to displaying the navigation horizontally? I know I can make it work, but it's a bit of excessive code for something that should be easy. thanks I'm trying to display 5 images across, and underneath each image will be a caption. So, i'm using an inline list, but how do I go about getting something to the second line for each list item, seems that inline-block works fine in IE, but since its not available for Firefox, what's the method people use here? |
|||||||