http://www.e-fluential.com/offline/
Screen grab:
I can't get the div that the blue words blah blah is in to be automatic width, its just going full width from the margin i've set..
.titlesmedium {
font-family: title_font;
letter-spacing: -1px;
font-size:30px;
margin-left: 340px;
margin-top:-5px;
color:#00C3FA;
border-bottom: solid 1px #00C3FA;
}
Than you have to have on it:
display:block;
float:left;
be careful to clear the paragraph text.
Or:
display:inline;
margin-left:0;
Automatic width for a div will be 100% minus any margins or padding you set.
If you want it to be an explicit width you will have to set that value.
maybe width:auto will change that?
Also try display:inline;
First I think most answers are correct from what I can Read. (display: inline) But i think you should reconsider how you do this. You have margin left: 340px on your header. I guess u have the same on your paragraph to? It works.
But I think you should divide everything in to i.e. articles (or DIV) and just have a left and right column in this Article area. Then you don´t need to set all these specific margins etc on each element.
Also you should reconsider have paragraphs and headings instead of DIV in your HTML.
Also, there is no need for "titlesmedium" if you have .
article.anygoodname h1{ ...
article.anygoodname p{ ....
etc
Good luck!
Related
I have been researching and working so hard to fix such a strange problem. I have a div that is supposed to hold some text. This div should be able to resize with that text, so that if there are two lines of text the div gets taller, etc. All that seems to work fine, but for some reason there's some sort of padding added to the top of the text and to the bottom of the text. I can't find what is causing that padding, and I really want to make the div fit the text more compactly. Here is an image of what i'm talking about:
http://i.imgur.com/ZblaLJX.png
The light blue box should be shorter in height so it fits the text more closely. Here is my CSS code for this div:
.captionCSS {
max-width:70%;
margin-top:10px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom:0;
background-color:#aef7f8;
overflow:hidden;
color:black;
}
I have messed around with all of the margins and paddings, setting them to zero and then setting them back again and nothing seems to work. The line height is inherited from another div and is 18px, while the font size is 12px, and i tried decreasing the line height but it didn't have any effect on the top and bottom padding/gap.
Also, when the text takes up two lines, it get a bit worse in that there is an extra bit of padding on the side, which i want to get rid of:
http://i.imgur.com/Ecdxdtq.png
So yeah, that's my issue. Ideally I would like a 5px gap from the edge of the div to the top of the text, so if there is anyway to do that please let me know! Thanks so much for your help!
You might try the following.
If your code looks similar to this:
<p>Some text with <span class="captionCSS">highlighted text</span>.</p>
apply the following CSS rules:
p {
background-color: gray;
padding: 5px;
}
.captionCSS {
max-width:70%;
padding: 0 5px;
background-color:#aef7f8;
display: inline-block;
line-height: 1.00;
}
If you set display: inline-block to the caption wrapper, then the line height value will have some effect.
line-height: 1.00 forces the line height to be the same size as the font-size for the element. If you set the value to be less than 1, you will get a tighter fit but you may also clip ascenders and descenders of certain characters depending on the font.
See demo at: http://jsfiddle.net/audetwebdesign/2cyaF/
Without the HTML I can't be sure, but my first guess is that the text has a parent block level element that already has styling rules. (ex: <hX> or <p>)
You can clear those styles through css by doing something like this:
h1,h2,h3,p{
padding:0;
margin:0;
}
Here are some example cases using your style: http://jsfiddle.net/JTrWL/
Okay, been struggling with this for a bit now and I have pretty much the appearance I want but am now struggling with positioning the items. Basically I want a stroked text with the stroke on the outside, meaning the webkit text stroke is useless.
So I figured I'll position two text elements on top of each other and do it that way. And that works great, except since I am using position:absolute the element essentially has no height.
The HTML looks like this:
<div class="hcontainer"
<h2>A Framework For Web Artisans</h2>
<span class="h2white">A Framework For Web Artisans</span>
</div>
The CSS like this:
h2{font-size:2em;
margin: 10px 0;
color:#234F70;
-webkit-text-stroke: 10px #531A16;
-webkit-text-fill-color:#FFF;
letter-spacing:-2px;
position:absolute;
top:10px;
left:0px;}
.h2white{font-family:dom_bold,arial black;
font-size:2em;
margin: 10px 0;
color:#FFF;
position:relative;
top:10px; left:0px;
letter-spacing:-2px;
position:absolute;}
.hcontainer{position:relative;clear:both;height:2em;}
So here's the issue. The hcontainer needs to have a set height because the element it contains is positioned absolutely therefore has no height and messes up the flow. The problem is making that height dynamic so I can space the elements properly.
I could make a separate container for each heading but that just seems a bit much. Can anyone think of a better way to do what I'm trying to do here? Or a way around the height issue?
http://jsfiddle.net/calder12/9M7YZ/
I don't really understand what it means that "The problem is making that height dynamic so I can space the elements properly." But if you want to not have to declare a height on .hcontainer, you can use a negative top margin on .h2white to place it on top of the red h2 instead of using absolute positioning. Like so:
http://jsfiddle.net/9M7YZ/10/
.h2white{
font-family:lemon;
font-weight:bold;
font-size:4em;
color:#FFF;
letter-spacing:-2px;
margin-top:-86px;
position:absolute;
}
Can someone please tell me why 'Security Professionals' on the bottom right won't extend all the way to the right side of the screen? I'm using Eric Meyer's reset. I don't know why there's that padding there.
http://hemakessites.com/mayukh/22/
Edit: You guys are seeing the huge block of space on the bottom right, right? It's not a 3% sliver. I'll try wrapping them in a div, because right now if I set all of them to 25% one of them falls to the next line.
Aside: Oh my god. I just finished a sentence with a semicolon; I've been programming too much;
Update: There's already a div container that stretches 100%. That's what the gray area is. No... this is an evil far worse than we ever imagined. Maybe it's got something to do with the 'Difference' div being fixed?
you can use the box-sizing property for your solution i hope this will work for you
please update your css with mine css
.slagline {
-moz-box-sizing: border-box;
box-sizing:border-box;
-webkit-box-sizing:border-box;
border-color: #FFFFFF #666666 #CCCCCC #CCCCCC;
border-style: solid;
border-width: 1px;
float: left;
height: 100%;
width: 25%;
}
Actually the main thing is you have defined border-width:1px; so its increasing the width of all of your four columns so by box-sizing property you can get your desired results
see the demo if you will remove the box-sizing u will know the difference...
Because you set float: left on them, and as you said you gave them a width of 24%. The padding you experience are the leftover 4%. Make the last one float: right or apply margins/paddings to all boxes.
If you're setting 24% because of border problems, I'd suggest to create e.g a div that wraps your content in your floated blocks. So you can set the width of your current blocks to 25% and they expand accordingly.
<div id="slg4">
Needs to be set to float:right;
This should do the trick:
<div style="width:27%;" class="slagline" id="slg4">
I have a div that will hold some text. The width of the div is fixed in pixels. I want to make sure that if the text takes more space than one line in the div, the text does not overflow and does not wrap to a second line. I just want it to show as much as fits the width of the div on one line. I have been experimenting with
{
overflow:hidden;
height:1em;
width:160px;
}
and it sometimes works, but I don't have the right height. What would be the right height? There is probably a better way to do this. Please let me know. Thanks!
Thanks everyone for your contributions. Here is what worked for me:
for a div:
{
height:1.2em;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
note that both text-overflow:ellipsis; and white-space:nowrap; need to be there for the ellipsis to show.
And for a span note that spans don't have a width so you need to add:
{
display:inline-block;
width:160px;
}
for spans to work
overflow:hidden;
height:1em;
width:160px;
text-overflow: ellipsis;
line-height: 1em;
Will add an ellipsis to text if it overflows the enclosing div and set the div to only use 1em, the height of the container.
white-space: no-wrap will prevent a wrap of the text.
{
white-space:nowrap;
overflow:hidden;
height:1em;
width:160px;
}
Set the line height for the paragraph, then set the div height to be the same.
Just note that text is usually taller than 1 em, 1.3 or 1.4 is usually better.
Try it out here: http://jsfiddle.net/PYA3y/
#mydiv{
overflow:hidden;
height:1.4em;
width:160px;
}
#mydiv p{line-height:1.4em;}
Edit:
in the time I wrote my reply, you got 3 other answers!
Scott had a good idea for using the ellipsis, I've updated the JSFiddle to include it (although it doesn't work??)
If I understand correctly, setting white-space will not give you the result you require... you do want the extra text to be hidden, don't you?
I have a div under a float:right div. For some reason, the top margin cannot be applied to the first div. here is the css
#over{
width:80%;
float:right;
color:#e68200;
}
#under{
clear:both;
background:url(../images/anazitisi.png) no-repeat;
margin:10px auto; /*does not work!!!*/
width:95px;
height:20px;
}
does anyone know what's going on?
Floated things are kind of floated out of the normal layout, so generally don't affect other things that aren't floated like them. Of course the float behaviour in different browsers differs, but that's the general idea.
After the floated div you'd need something (like an empty div) that will clear the float (has style="clear:both;").
However, like I said, browser behaviour will still vary, on where it then decides the margin should be counted from. There are of course workarounds for that. See this page for more on that.
A solution without extra <div>
What you see, is the problem of collapsing vertical margins in CSS3. This problem will be more easily solved with the advent of CSS4. In the mean time, it is not a good idea to add an extra <div>, as easy as it may sound. It is generally better to keep content and presentation strictly separated.
Here is how I solved this issue on my website. The solution exploits the absence of vertical margin collapse inside inline blocks.
#under should contain at least the following items:
#under {
clear: both;
display: inline-block;
width: 100%;
}
try this css snipe, i think this will solve your problem.
#over{
width:80%;
float:right;
color:#e68200;
background-color:#234fdd;
height:auto;
margin-bottom:30px;
}
#under{
clear:both;
background:url(../images/anazitisi.png) no-repeat;
margin:auto;
width:200px;
height:20px;
background-color:#23ffff;
}