|
CSS - Css Background-image With Inline Elements
Hello,
I'm trying to achieve an effect using a background image with an inline element. Specifically, I have certain hyperlinks that I want to display a graphical arrow to the right of. Essentially, it looks something like: Hyperlinked text here >>> Where ">>>" is actually a small graphic approximately 20 pixels wide. I don't want to place the image inline, because it's a visual effect and users don't need to "interact" with it. And it's also tied in with the style of the site, so controlling it through CSS is very attractive. I figured out that if I add about 20 pixels of padding to the right of the ANCHOR element, I can use the graphic as a CSS background image. Looks good in IE5+ and Mozilla-based browsers (not concerned with NS4), as long as the ANCHOR text is on one line. Problem is, when the text of the ANCHOR element breaks across two or more lines, I lose the image in IE. Of course, Mozilla-based browsers handle it perfectly -- it's just Microsoft's little problem child that's giving me fits. Anyone else have any luck using a background image on an inline element that spans two or more lines? I can't find any documented hacks or the like to help me out. Any help is greatly appreciated! -Chris Similar TutorialsHello DevShed CSS Help Forum, I have a wierd problem (seems I have a knack for that ) with a design I'm working on. When you first go to this page there is some disruption around the two floated columns in the background image that is assigned to the body tag: (Right now the page is only working in non-IE browsers, but I don't know any developers that regularly use IE anyways...LOL) http://www.spidersend.com/new_site/newsite4/test6.html However if you refresh the page or click to another tab and then back to that page it corrects itself. Once I remove the sidebar and the float property from the css on the main content area the issue is gone so it has to be something to do with that. Has anybody experienced this before? I just find it odd that it doesn't stay messed up, but corrects itself, even if you refresh and clear the cache. Confusing and wierd. Any ideas? Theories? Any and all ideas are much appreciated. Here is the CSS: Code:
body
{
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
font-family: "arial";
background-image: url('images/bottom_slice.png');
background-repeat: repeat-x;
background-position: bottom center;
}
div#header
{
background-image: url('images/header_slice3.png');
background-repeat: repeat-x;
height: 198px;
width: 100%;
}
div#header-content
{
width: 680px;
margin: 0px auto;
}
div#top-navigation
{
width: 680px;
margin: 0px auto;
position: relative;
bottom: 16px;
color: #FFFFFF;
font-family: "arial";
font-size: 16px;
padding: 0px;
}
div#content
{
width: 850px;
float: left;
}
div#content-header
{
background-image: url('images/content_bg_top.png');
width: 850px;
height: 30px;
}
div#content-footer
{
background-image: url('images/content_bg_bottom.png');
width:850px;
height: 32px;
}
div#content-area
{
background-image: url('images/content_bg_slice.png');
padding-left: 18px;
padding-right: 18px;
}
div#adbar
{
width: 157px;
float: right;
}
div#adbar-header
{
background-image: url('images/sidebar_top.png');
width: 157px;
height: 30px;
}
div#adbar-footer
{
background-image: url('images/sidebar_bottom.png');
width: 157px;
height: 26px;
}
div#adbar-area
{
background-image: url('images/sidebar_slice.png');
padding-left: 5px;
padding-right: 5px;
}
div#sidebar
{
float: right;
clear: both;
position: relative;
right: 10px;
background-color: #d2e7f0;
width: 300px;
-moz-border-radius: 5px;
padding: 5px;
margin-left: 15px;
color: #0c577a;
}
div#sidebar2
{
float: right;
clear: both;
position: relative;
right: 10px;
background-color: #d2e7f0;
width: 300px;
-moz-border-radius: 5px;
padding: 5px;
margin-left: 15px;
margin-top: 20px;
color: #0c577a;
}
div#content-wrapper
{
width: 1007px;
margin: 0px auto;
}
Hello, I have the following css css Code: Original - css Code ul#menulist{ position:relative; top:0px; list-style-type:none; margin:0; padding:0; } ul#menulist li{ background-color:#717100; display:inline; margin:0; padding:0 10px; border:0; height:30px; } ul#menulist li a{ text-decoration:none; margin:0; padding:0; border:0; }
A gap is appearing between <li> elements in Opera and FF but not in IE. You can check it here Which is the correct behaviour? How do I remove the gaps between <li> elements in a valid way. Thank you. Maybe an easy one, anyone know how you'd render the the top and bottom border for an inline element in ie? Hi! Is it OK to mix inline and block elements? For example: <imp ... /> <p> .... </p> Thanks Greetings: I need to essentially create a table out of DIV tags. The reason is because I need to grant the user the ability to use scrollbars to navigate in a given cell. The problem I am running into, is when the DIV elements fall outside of the wrapper DIV, they wrap to new lines. The DIV "table" within the HTML table is by design. This is because I cannot create a scrollable subset of elements within TD tags. I am simply looking for the way to ensure the following: 1. The DIV "cells" do not wrap (as they are now) and 2. Scrollbars exist to move horizontally and vertically within the "cell" I've experimented with all sorts of combinations of CSS in several of the elements to no avail. Thanks for any help. The HTML for the table: Code: <table id="optionsMatrixTable" border="1"> <thead id="optionsMatrixTableHead"> <!-- <tr id="optionsMatrixTableHeadRow"></tr> --> <tr class="menuRow" id="optionsMatrixMenuRow"> <td colspan="7"> <label><input type="checkbox" id="autoUpdateTrigger" name="autoUpdateTime"checked="checked" /> Live update every</label> <select id="autoUpdateTime" name="autoUpdateTime"><option value="15000" selected="selected">15</option><option value="30000">30</option><option value="60000">60</option><option value="90000">90</option><option value="120000">120</option></select> seconds | Add field <select id="fieldList" name="" style="width: 250px;"></select> </td> </tr> </thead> <tbody id="optionsMatrixTableBody"> <tr id="optionsMatrixTableBodyCallsRow"> <td colspan="7" id="optionsMatrixTableBodyCallsRowContainer"> <div id="callsRowContainer"> <div id="" class="matrixContainerHeader"><div class="matrixContainer">Calls</div><div class="matrixContainer" id="dec08">Dec (19)</div><div class="matrixContainer" id="jan09">Jan (47)</div><div class="matrixContainer" id="mar09">Mar (110)</div><div class="matrixContainer" id="jun09">Jun (201)</div><div class="matrixContainer" id="sep09">Sep (290)</div><div class="matrixContainer" id="dec09">Dec (380)</div></div> <div id="" class="matrixContainer">65 calls</div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainerFooter"></div> </div> </td> </tr> <tr id="optionsMatrixTableBodyPutsContainer"> <td colspan="7" id="optionsMatrixTableBodyPutsRowContainer"> <div id="putsRowContainer"> <div id="" class="matrixContainerHeader"><span class="matrixContainer">Puts</span><span class="matrixContainer" id="dec08">Dec (19)</span><span class="matrixContainer" id="jan09">Jan (47)</span><span class="matrixContainer" id="mar09">Mar (110)</span><span class="matrixContainer" id="jun09">Jun (201)</span><span class="matrixContainer" id="sep09">Sep (290)</span><span class="matrixContainer" id="dec09">Dec (380)</span></div> <div id="" class="matrixContainer">65 calls</div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainer"> <div class="matrixItemWrapper top"><span class="matrixItem" title="Price">0.18</span><span class="matrixItem" title="Implied Volitility">47.56%</span><span class="matrixItem" title="Trade"><input type="text" name="" value="" class="" id="" size="4" maxlength="10" /></span></div> <div class="matrixItemWrapper bottom"><span class="matrixItem" title="Delta">68.05</span><span class="matrixItem" title="Theta">17.05</span><span class="matrixItem" title="Vega">26.05</span></div> </div> <div id="" class="matrixContainerFooter"></div> </div> </td> </tr> </tbody> <tfoot> <tr class="menuRow" id="optionsMatrixEquityInformation"> <td colspan="7">Underlying: MSFT | Last: 20.83 | Change: 1.93 (0.96%)</td> </tr> </tfoot> </table> And the CSS: Code:
#optionsMatrixContainer { border: 1px solid #000; }
thead { font-weight: bold; }
.menuRow { background-color: #999; }
.loading { background-color:#FFFFCC; font-size: 80% }
.matrixItem { padding: 0 5px 0 5px; }
.matrixContainer { border: 1px solid #000; width: 175px; float: left; margin: 1px}
.matrixContainerHeader { clear: both; }
.matrixContainerFooter { clear: both; }
.matrixItemWrapper { padding: 0; margin: 0; }
.top { border-bottom: 0px; }
.bottom { border-top: 1px dashed #000; }
#callsRowContainer, #putsRowContainer { overflow: scroll; white-space: nowrap; display: block; float: left; clear: right; }
Hi! Does floating an inline element automatically converts it to a block-level element? If yes, what does this give for an inline element: float: left; display: inline; ? Is it bad practice to float inline elements directly? (img, span, input, and so on). Thanks Since this is my first post here, Hello, everyone! I can't find the answer to this simple question anywhere else, so I hope you can help. When a block-level (by default) element is set to "display: inline", can it still contain other block-level elements? BTW I want to avoid using "display: inline-block" since it is not as well-supported. Thanks a bunch, Rachel 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. IE5 doesn't support this (trying to apply padding-left to links). Has anyone found a good workaround - Don't really want to put each one inside a DIV Is it possible mix inline and block-level elements directly together?? For example: Code: <div....> <input..... /> <-- inline element <ul>... <-- block element </div> Thank you Can a <form element hold inline elements? For example, Code: <form ... > <input .... /> I'm putting this bare text in this form even if I dunno if it's allowed haha </form> More generally, I know one can NEVER put a block-level element in an inline element. HOWEVER, IS IT ALWAYS possible to put inline elements in block elements ???? Thank you Hi, I have been puzzle for a while now working out how to do this. I have two fixed height divs which I want to appear on the same line (inline). However to maintain the fixed height they cannot be set as display: inline; (Well that works in IE but not in Firefox). Anyway I find out that setting one div to float left and the other to float right with another div with clear:both works fine. However when it comes to setting the position of the flash elements I want in each div element it works now in Firefox but not in IE. I currently have: <div id="diva"> <object id="face1" width="320" height="110"> <param name="face1" value="face1.swf"> <embed src="face1.swf" width="320" height="110"> </embed> </object> </div> <div id="divb"> <object id="face2" width="320" height="110"> <param name="face2" value="face2.swf"> <embed src="face2.swf" width="320" height="110"> </embed> </object> </div> <div id="clear"></div> With the relavent css: #div1 { background-image : url(images/bg1.gif); width: 381px; height: 346px; float: left; text-align : center; vertical-align : bottom; } #div2 { background-image : url(images/bg2.gif); width: 381px; height: 346px; float: right; text-align: center; vertical-align : bottom; } #clear { clear: both; } img { border: 0px; } #face1{ padding-top: 220px; left: 30px; } #face2{ position: relative; top: 220px; left: 10px; } Effectively what I want is: Where the divs are on the same line and are fixed height (as they have a background) and then each swf element releatively positioned inside the div...which will work in Firefox and IE! Thank you for your time. I know the difference between block and inline elements which is fundamental to css. What I just recently started seeing was replaced and non-replaced elements. Can someone explain the differences between. I can't grasp the info that's given here. http://www.w3.org/TR/REC-CSS2/visudet.html#q4 I have two problems. First issue is that I cant seem to get a background image to repeat in IE when it works fine in FF. I tried to reproduce the bug on another server using the same exact CSS and to my shock, the background repeat rule works fine. So, it doesnt work on my server at home with a much more complicated stylesheet (albiet the reference to the background image and repeat rule are exactly the same .. and simple) .. but when I port the same stylesheet to another server with simpler markup, boom, it works fine. Cant wrap my head around this one. Is there a commonly known IE bug/problem with background image/CSS/background-repeat rules? My site that does not work through IE shows the image once .. and thats it. No repeating like tell it to. My other issue (if youre still interested) is a problem with the CSS command: Code: table
{
empty-cells: show;
}
which does not work at all. As you can see on this page in IE, (http://www.doublethinkdesigns.com/development/ ) ive specified the rule, but lo and behold, the cells are still missing. Can someone kindly lend me some perspective perhaps? Thank you much in advance. Hi everyone, this is my first post and I hope it's easily resolved. I'm new to CSS and working through CSS - The Missing Manual while slowly overhauling an old table-based web journal on the side. I'm trying to do the following: Left - navbar (~200px) Center - journal postings (~600px) Right - fixed image (~200px) // I want this to always be in sight I've gotten the first two nailed down nicely, but I'm having a really hard time with getting the fixed image to work. In extreme shorthand, the code relationship looks like this: <body> <nav-journal-image-wrapper width=1000> <nav-journal-wrapper width=800> <nav width=200> <journal width=600> </njw> </njiw> With the extra 200px of width in the final wrapper, I've been able to get the background image to be fixed and show nicely to the right of my navbar and journal post by making it the same 1000px in width. If the window is stretched, everything stays where it belongs - you just see more body background color. The problem is, when the window is condensed the final wrapper - despite having a set width - also is squeezed and my background image recedes under the journals. What I don't understand is why my navbar and journals seem impervious to small windows, but the wrapper around them with the background image is not? My code validates, and the relevant parts of the CSS start now: Code: <style type="text/css">
body {
background-color:#333;
}
/* without this wrapper, the background in #nav-post-portrait-wrapper aligns
with the screen right, not the wrapper's right */
#final-wrapper {
background-color:red;
width: 1034px;
margin: 0 auto 0 auto; padding: 0;
}
/* this gives me an extra 200px on the right to show the fixed background image */
#nav-post-portrait-wrapper {
margin: 0;
padding: 0;
width: 1034px; /* sets the max but doesn't seem to be preventing collapse */
background-color: white;
background-image: url(CSS-TESTING/background-portrait-2.png);
/* the image is also 1034px wide - I want this wrapper's width to be frozen! */
background-repeat: no-repeat;
background-position: top;
background-attachment:fixed;
}
/* this groups the navbar and postings together */
#nav-and-post-wrapper {
background-color:#0F0;
margin: 0;
padding: 0;
width: 828px; /* prevents collapse */
}
/* begin nav sidebar CSS code */
#mainNav-wrapper {
float: left;
top: 0;
margin: 0; padding: 0;
height: 312px;
width: 210px;
}
ul#mainNav {
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
width: 200px;
border-left: 2px solid #930;
border-top: 2px solid #930;
border-right: 2px solid #930;
}
ul li {
width: 200px;
margin: 0; padding: 0;
height: 60px;
border-bottom: 2px solid;
border-bottom-color:#930;
}
/* end nav sidebar CSS code */
/* begin journal post CSS code */
#post-wrapper {
margin-left: 214px;
}
.post {
background-color:#6F9;
border: 2px solid #930;
width: 600px;
height: auto;
margin: 20px 0 0 0;
padding: 0;
}
/* end journal post CSS code */
</style>
<body bgcolor="#FFFFFF">
<div id="final-wrapper">
<div id="nav-post-portrait-wrapper">
<div id="nav-and-post-wrapper">
<div id="mainNav-wrapper">
<ul id="mainNav">
<li><a href="aboutme.htm" id="nav-about-me"></a></li>
<li><a href="journalmain.htm" id="nav-journal-main"></a></li>
<li><a href="beverageguide.htm" id="nav-beverage-guide"></a></li>
<li><a href="guestbook/index.php" id="nav-graffiti"></a></li>
<li><a href="contact.htm" id="nav-contact"></a></li>
</ul>
</div>
<div id="post-wrapper">
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
<div class="post">
la la la
</div> <!-- closes post div class -->
</div> <!-- closes post-wrapper div id -->
</div> <!-- closes nav-and-post-wrapper div id -->
</div> <!-- closes nav-post-portrait-wrapper div id -->
</div> <!-- closes final-wrapper div id -->
</body>
Thank you very much! Hello, Having a bit of trouble with a <div>. I am trying to have an <img> and a <p> displayed side by side. I have tried to have two child <div> elements displayed inline, that didn't work, floating <div> elements didn't seem to do it either and then i removed the child elements and just had an <img> and a <p> with the <img style="float:left"> but, again, no joy. Does anyone have any suggestions? I have a page where I'm building a search function. I'm trying to make this little magnifying glass image I have line up with the input field, but it looks like it's offset to the top just a little bit. Here is my code: HTML Code:
<div class="search">
<form id="srch_box">
Search Terms: <br/>
<input type="text" id="search_txt" /> <img src="img/magnifier.jpg" alt="Search"/><br/>
Advanced Search >><br/>
<input type="button" class="submit" id="search" onclick="sendRequest();" value="Search"/>
</form>
</div>
CSS Code:
.login, .search {
padding: 0 10px 0 10px;
font-weight: bold;
vertical-align: bottom;
}
I'm not completely new to css, but I am new to trying to do a totaly tableless layout. What I'm trying to achieve (which is just a very small part of the overall layout) seems like it should be simple enough but I can't seem to figure it out. Here's a link for visuals and the code. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
#testBg
{
background-image: url('signInBg.jpg');
height: 46px;
width: 333px;
padding-left: 5px;
color: #FFFFFF;
}
#testBg form
{
display: inline;
}
#testBg input
{
margin: 10px 5px 0 20px;
}
-->
</style>
</head>
<body>
<div id='testBg'>Sign In: <form action="login.php" method="post"><input name="username" type="text" value="(username)" size="12"><input name="password" type="text" value="(password)" size="12"><input name="action" type="image" value="login" src="go.jpg"></form></div>
</body>
</html>
No matter what I try (which isn't saying much with my limited experience) I can't make the go button line up next to the right side of rest of the blue bar. Any help or links is appreciated. Thanks The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. |
|||||||