I want to do so the size of the bubble, is auto-adjusting after the text(comment) which is inside the div..
Firstly heres the code:
.bubble {
font-size: 12px;
margin-bottom: 0px;
}
.bubble blockquote {
margin: 0px;
padding: 0px;
border: 1px solid #c9c2c1;
background-color: #000;
}
.bubble blockquote p {
display: inline;
margin: 0px;
padding: 0px;
font-size: 18px;
}
.bubble cite {
position: absolute;
margin: 0px;
padding: 7px 0px 0px 15px;
top: 5px;
background: transparent url(b/tip.gif) no-repeat 20px 0;
font-style: normal;
}
And the page:
<div class="bubble">
<blockquote>
<p>
Hello, my name is Azzyh
</p>
</blockquote>
<cite>I wrote this today</cite>
</div>
Now as i said, i want it to auto adjust to the text, so the "bubble" is around "hello, my name is azzyh"..
Not like how it is now:
http://img341.imageshack.us/img341/8303/exampleu.png
As you see it goes all out to the browser's right+left end..
Check the image, you'll see the line (the "box") where the text is, are too big for the text. I want css to adjust the box after the text.. so the "lines" gets around the text "hello my name is" sorry for my english
See this image:
http://img17.imageshack.us/img17/6057/exampleph.png
The "red" is how i want it to be..
How can i do this?
Thanks
div elements are block-level elements that, by default, stretch as far to the left and right as their containing blocks will allow.
In order to get the width of the div to auto-adjust, you'll have to convert it to an inline element, using the same style as you put on the p: display: inline;
Note that this may have the unintended side effect of not automatically forcing each div onto a new line. Without more information, though, I'm not entirely sure if that would be good or bad in your layout.
A similar problem I had was solved by applying the following CSS:
display:inline-block;
I wanted a link to look like a button but not expand the background to fill the width of the containing DIV.
Supported in nearly all browsers, including partial support in IE6 and IE7 but only where element has 'inline' as a default. There are some alternative properties to gain cross-browser support. There is also something on Google Code for setInlineBlock, but I haven't tried this myself.
Move your border property
border: 1px solid #c9c2c1;
from
.bubble blockquote {}
into your
.bubble blockquote p {}
and that should put the box where you want it.
Related
First of all, I do apologize I don't put my link here, it's a site for work and I'm not allowed. I'll post the relevant parts of my code if necessary though.
So the problem is pretty basic - i have one div with some images, and a header <h3> below where my content starts . No matter how much I try to create some space between the two, it doesn't work. I've tried margin and padding on both elements, changing between position relative and absolute, and throwing in lots of <br> tags. Nothing works!
What causes my two elements to be so attracted to each other? What may cause inability to create space between two elements?
Thanks!
Edit: here's my css code for the div:
.bmwrapper {
width: 720px;
position: relative;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
.bmvenstre {
float: left;
text-align: left;
z-index: 1;
}
.bmhoyre {
float: right;
text-align: left;
z-index: 1;
}
So it's one big div that acts as a wrapper, and two divs (left and right) inside. The links are displayed as blocks:
a.bmlink {
display: block;
margin: 0;
padding: 4px;
font-family: Tahoma, Verdana, Segoe, sans-serif;
text-transform: uppercase;
font-size: 18px;
font-weight: bold;
letter-spacing: 2px;
color: #08A;
text-decoration: none;
z-index: 2;
}
The header below this div is just a <h3> tag, then there's some text. Hope this helps!
You can try 2 things:
1) Put the elements overflow:hidden
2) put the elemnts display:block
If number 2 messes up with your design, try putting them float:left;
Since I don't have the code I can't give you more information, but when margins/paddings do not work, it is usually because you are either applying it to an Inline item (hence number 2) or you have a container where everything inside is floating, so the container won't have the proper height (hence number 1)
Sounds like margin collapse. Here are a couple of ways you could solve this:
Give your content div a transparent border or give your content div the css declaration of overflow: auto;
Some people when they give it a 1px border they also give it a -1px margin to counter the border.
I've been staging up a site and building the basic layout when I ran into a little problem. I want to create a "notched" navigation, but I don't know the first thing about doing this.
I've tried to create a to be positioned below my (with the idea that I could either create [with CSS or using an image] a white triangle) that could be aligned with the bottom of my creating the "notched" effect. I've yet to be successful with this and was hoping someone with css // html wizard status skills could be of assistance.
ps. If you need more info just let me know - I'm a bit new to stackoverflow
Make your NAV LI tags & the A tags within them stretch all the way down to the top of your content block.
When an LI is the 'current' tag then place a triangle graphic as the background of the A tag within it.
li.current a {
background:url(triangle.png) no-repeat center bottom;
}
You'll probably want the triangle to be blue the same as the blue bar at the top of the content block.
Cappuccino is using the following css to mark the link tag.
<style>
#navmarker {
width: 1px;
height: 0;
position: relative;
margin-top: -0.7em;
margin-left: auto;
margin-right: auto;
border-bottom: #FFD48E solid 0.8em;
border-top: none;
border-left: transparent solid 0.8em;
border-right: transparent solid 0.8em;
}
div {
display: block;
}
</style>
Try to create a div and use the above css it worked for me.
<div id="navmarker"></div>
I am trying to format a list of links with some css, I am having trouble though.
Please look at the image below...
<div class="tag-list">
<a href="/tag/htaccess" >.htaccess</a>
<a href="/tag/css-2" >css</a>
<a href="/tag/database-2" >database</a>
design pattern
<a href="/tag/mysql" >mysql</a>
<a href="/tag/pdo" >PDO</a>
php
server
web-design
</div>
the code...
<style>
.tag-list a {
color: #FFF;
text-transform: uppercase !important;
background:#444;
padding: 4px 6px 4px 6px;
-moz-border-radius:3px;
border-radius:3px;
font:.8em Helvetica,Arial,sans-serif;
margin: 1px 0px 0px 0px!important;
display: block
}
</style>
My goal is to get this list of links to LOOK like that except they should only be the width of the text + padding instead of the full width. I have tried wrapping each link in the div, wrapping the div around the block of links like I have in the code above, If I wrap EACH link in a seperate div and remove the display: block it will show them as the proper width for each link and each on a new line, the only problem with that is that the margin does not work to let me space them out top and bottom.
I'm sure this is a simple fix for someone who knows more about css
jsbin.com link
Thanks for any help
Desired end result something like this...
When adding float: left; clear: both; it makes my other divs show up under it like this...
These easiest thing to do would be at add a float property. This essentially shrink wraps elements. I've also added a clear property to get them to stack.
.tag-list a {
color: #FFF;
text-transform: uppercase !important;
background:#444;
padding: 4px 6px 4px 6px;
-moz-border-radius:3px;
border-radius:3px;
font:.8em Helvetica,Arial,sans-serif;
margin: 1px 0px 0px 0px!important;
display: block;
float: left;
clear: both;
}
I believe this is what you want: http://jsfiddle.net/thnT8/
Note: I'd encourage you to utilize better markup, such as an unordered list. Not only it is more semantic, but it would allow better hooks and avoid the use of floats.
UPDATE
Per the comments and my note above, here's the code: http://jsfiddle.net/84g6Q/1/
Replacing display: block; with:
float: left;
clear: both;
Should work.
You can avoid using floats and clears by making it a list and changing the display of your anchor tags to inline-block: http://jsfiddle.net/hZLzZ/
You set the display to block, that means it will span across it's entire container.
Just remove the display: block, float the elements left, add clear:both to get them to stack, and set the right padding to what you want:.
Here it is using your code: http://jsbin.com/ecoxay/2/edit
Quick question. I was writing out some code and was curious if there is a way to add a border on a div that is 5px within the object - as in not on the actual edge of the div. I checked out WC3 and didn't see any specs - but I may have missed it.
In my case I'd be using a dashed border 5px inside the div, to create an effect like the div had been sewn to the rest of the site. I can do it fairly easily with background-image but why add KB when a line or two of css could do it.
I would assume it would be something like "border-position" or "border-distance".
Thanks in advance.
I've never come across any property that resembles this, so I'd have to say, simply, 'no.'
But then I'd feel bad for that, so all I could really suggest is wrapping the div you wish to 'sew on' within another div and styling the parent with the same background-color to emulate the look you're after. Here's some css for a possible take:
.wrap {
border-width: 0;
background-color: #ffa;
width: 50%;
padding: 0.5em;
}
.wrap #panel {
background-color: inherit;
height: 6em;
border: 5px dashed #f90;
text-align: center;
}
And some html:
<div class="wrap">
<div id="panel">
<p>This panel should look kinda sewn-on.</p>
</div>
</div>
And, finally, A JS Fiddle demo
Okay, having just rediscovered this answer (thanks to the up-voter!), I can, now, provide an actual CSS-only no-extraneous-elements solution, using box-shadow:
#panel {
background-color: #ffa;
height: 6em;
border: 5px dashed #f90;
text-align: center;
width: 50%;
margin: 30px auto 0 auto;
box-shadow: 0 0 0 15px #ffa;
}
JS Fiddle demo.
The fourth parameter is the key, it defines the, uh, 'spread' of the shadow (the third parameter defines the 'fuzziness'/'diffusion' which in this case is 0), using the same background-color as the element itself gives the illusion that the border is within the element, while it's actually a shadow of the element extending out from the element.
Thats what IE used to do in quirks mode. With CSS3 box-sizing you can switch between the two modes, but I'm not sure how the support is at the moment
See http://www.quirksmode.org/css/box.html for more infos.
I've been searching through forums to find a solution for the problem I'm facing and couldn't find any. So here I am, again, asking for remedy.
I have this page which encase personal profile form. That form is enclosed in page container div and is quite long that it requires main scrollbar in order to see those hidden. And there's a footer section at the bottom of the page where copyright statements are displayed.
My problem is I can't find a way to make my page container div to stretch along with the body element. I've applied height: inherit to that div but still it refused to stretch so that it covers till the border of the footer section. Now, there is big gap between the footer and that div filled with body background color. Here's a screencap for better understanding.
screencap
/*Form container*/
#form_container{
width: 600px;
background-color:#FDAE80;
margin-top: 15px;
margin-left: 110px;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
}
body{
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
background-color: #683468;
}
/*Page Container*/
div.mcontainer{
width: 1032px;
height: inherit;
background-color: #ffffff;
}
/*Footer Section*/
div.footer{
width: 1032px;
height: 80px;
border-top: 1px solid #683468;
margin-top: 10px;
text-align: center;
font-family: Arial;
font-size: 12px;
color: red;
position: relative;
bottom: 0px;
background-color:black;
}
Any help would be appreciated.
EDIT Just to clarify, Footer section is inside page container div. Here my html - htm
Try adding a clearing element as the last item in your page container, after all the form elements. Could be <br clear="all" /> or a div with style clear:both.
A better idea - remove the height: inherit; from your mcontainer style. This fixed it for me.
try adding html to the height to:
html, body {
height: 100%;
}
as discussed on A List Apart: http://www.alistapart.com/articles/footers/
Try to use overflow: hidden; on div.mcontainer.
If you have floating elements in your container, try placing clear-both-div at the end of the container div:
<div id="mcontainer">
...code
<div style="clear:both;"></div>
</div>
I had the same problem, now I am using java script (jQuery) to solve it.
In my case it was the div for the menu bar and I calculated the height from the main container plus the height from the header.
$(document).ready(function(){
var h = $(".main").height() + $(".main").position().top
$(".lmenu").css({height:h+"px"})
$(".rmenu").css({height:h+"px"})
});
Right now it seems to make more sense to use the height of the body:
$("body").height()
If there is a version without javascript, it would be interesting to know. But meanwhile this could be a workaround.
Maybe you should try adding: clear: both to footer class