I'm pulling my hair out here trying to get CSS to position only a handful of html elements.
Here is the code:
http://jsfiddle.net/7pTL8/
What I want is for "person#business.com [v]" to be at the top-right and then below it "Average Depth," "[x] Settings", and "Past 24 hours [v]" are all displayed together at the same level. I've tried floats and that had strange results. I don't want to resort to using a table here because everything I read about CSS suggests using tables for layout is a poor solution.
Its not as tuff as you think..
here is small solution.. its not very good but it can solve you problem for now..
[a link] http://jsfiddle.net/7pTL8/2/
<div id="user-selection">person#business.com [v]</div>
<div id="settings-container">
<h1 id="graph-title">Average Depth</h1>
<span id="settings-button">[x] Settings</span>
<span id="timeframe-dropdown">Past 24 hours [v]</span>
</div>
CSS
#graph-title {
position:absolute;
left:1px;
text-align: left;
}
#settings-container {
text-align: right;
}
#user-selection {
text-align: right;
}
Your problem is probably the use of h1 element. By default h1 has the style display: block. If you add the style display: inline it will be fine.
EDIT:
I think you ought to use span for it if you don't have any special reasons.
<span> elements use display:inline, while <h1> elements use block by default. Manually override the #graph-title to use display:inline and it will line up with the rest of your elements:
#graph-title
{
display:inline;
}
Related
as i read around the web, it's a valid html5 practice to wrap block elements inside <a> elements. i have a problem though.
my html
<a href="http://google.com" target="_blank">
<div> </div>
</a>
my css
div {
background:#f00;
height:100px;
margin-left:10px;
width:300px;
}
a {background:blue;}
the link actually works, but i see no blue background and chrome says that my a have no height and width
changing the css of the a to display:inline-block does the trick here, but not in my website.
do you have any suggestion or solution? how come the a element doesn't "follow" its child?
thank you!
http://jsfiddle.net/72cYy/82/
it depends on what you're looking for, you can set a to display:block if you want it to behave like a block element:
a {
display: block;
background:blue
}
EXAMPLE 1
or you could set it to display: inline-block to make it behave like it natrually would:
a {
display: inline-block;
background:blue
}
EXAMPLE 2
There is no reason that either of these wouldn't work on your site. Perhaps you have CSS or javascript overwriting it? Both of these methods will fix the collapsed height/width issue. If it is a conflicting CSS issue you could be more specific by adding an id or a class:
a#wrapper{
display: inline-block;
}
or
a.wrapper{
display: inline-block;
}
For more information on collapsed elements, you can check out this SO answer
I'm not even sure if this is possible, but I figured it was worth asking.
It would be pointless me trying to explain, I'm rubbish at things like that, so check out this demo - http://www.deanelliott.me/braintrain/
See how the titles on the 6 images have an orange background colour? And now see how the padding is missing from the right hand side of the first, and left hand side of the second line?
Is it possible to add padding there so that the background doesn't just stop at the end/beginning of the word?
Or should I tell them it's unfeasable and they'll have to live with it?
The issue here is you can't pad at word end/start where the content wraps, so this won't be possible unless you change the display type for the links to a block-style type, e.g. "block" or "inline-block", but naturally that affects the appearance somewhat.
You can get slightly further by adding:
white-space: pre-wrap;
to the .blog-grid .grid-block h2 a, #sidebar h2 a rule; however it's not a complete solution (but it's all I can come up with).
.blog-grid .grid-block h2 a, #sidebar h2 a {
/* other css properties */
display: inline-block; /* or display: block */
}
Adding text-indent in CSS can also work
text-indent: 10px;
add some code to class "post-title tilt" - it answeirs for your titles.
write maybe padding-left:20px; or if it won't work: margin-left:20px;
can you edit the code? adding span for each line should work
span class="line1" and span class="line2"
<a href="#">
<span class="line1">a safe alternative to</span>
<span class="line2">ritalin</span>
</a>
I'm using jQuery to add a Class to a few elements.
I'm not new to adding classes, nor removing them. But I'm still somewhat intermediate with styles and any flexibility styles can perform to single elements.
Here's what's going on:
I have 2 Divs that I'm affecting with jQuery:
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
In a nutshell, column left is about 155px wide, while columncenter is positioned relative to columnleft, with a margin-left of 162px
Here's my styles:
<style>
#columnleft {
float:left;
position:relative;
text-align:left;
width:155px;
}
#columncenter {
position:relative;
padding-bottom:50px
margin:0;
margin-left:162px;
}
</style>
I'm basically toggling these 2 divs with the jQuery examples below:
So far I've gotten these 2 separate instances to work:
$("#columnleft").hide();
$("#columncenter").css("margin","0px");
then........
$("#columnleft").show();
$("#columncenter").css("margin-left","162px");
Though this works, I'm not quite satisfied.
I'd prefer to create a class or two that I can use to toggle the hiding of columnleft, while also changing the margin-left at the same time.
It's all fine with the example above, when I'm only using jQuery. But there are times when a page loads, and the columnleft is meant to be hidden, and columncenter is meant to be expanded, from the beginning. Would be nice to not need jQuery to enter the scene at those moments.
All I could come up with is:
<style>
.disappear { display:none; }
.maximize { margin:0px; margin-left:0px; }
</style>
When the page loads:
<div id="columnleft" class="disappear">stuff in here</div>
<div id="columncenter" class="maximize">bigger stuff in here</div>
it seems that columncenter is ignored. (columnleft indeed does disappear)
Also, toggling with jquery, the same result occurs.
Column Center hates me!
Does anyone see where I'm missing the mark?
View JSFiddle: http://jsfiddle.net/tuanderful/bTZq8/
What if you had another div that contains both #columnleft and #columncenter, and has a class of .hide-left or .show-left:
<div class="hide-left">
<div id="columnleft">stuff in here</div>
<div id="columncenter">bigger stuff in here</div>
</div>
Then add the following CSS:
.show-left #columnleft {
display: block;
}
.show-left #columncenter {
margin-left: 162px;
}
.hide-left #columnleft {
display: none;
}
.hide-left #columncenter {
margin-left: 0;
}
You can update your jQuery to simply toggle the .hide-left or .show-left classes on the parent container.
What I did here is similar to adding .disappear and .maximize styling, but I added a bit of context around the two columns. The neat thing is that all of the styling is handled purely by CSS - when you want to show or hide your sidebar, you only need JavaScript to update the state of the container; that is, change the class in the container from hide to show or vice versa.
You need to put !important on the css styling.
.maximize {
margin-left: 0px !important;
}
That makes it so that it overrides any other styling of the same kind. Check it out here.
There is an order of importance in CSS. An id # is considered more important than a class . (there can only be one id and many classes after all). So if you are trying to override an id with a class, you need to use !important.
each type of selector in css is weighted differently id being higher than classes and classes being higher than objects
to fix your problem make the selector as such
#columncenter.maximize
this will overwrite the rule before it
don't use !important while it might work now it can be hard to find out why something is being overridden later on
.item-list {
letter-spacing: -0.3em;
}
.item-list a {
letter-spacing: 0;
display: inline-block;
}
<div class="item-list">
a
a
a
a
</div>
only in win ie6,the gap between a is still exit ,the style letter-spacing:-0.3em will make effective when delete the style of a { letter-spacing:0 }
why? can i figure out this problem?
wow this one stumped me for a while...believe it or not here is your answer:
font-size:0; must be added to parent element
In the case of your example, I would define the font-size of the a tags separately, and add "font-size:0;" to the parent div element
In other words:
css:
.item-list{letter-spacing:-0.3em; font-size:0;}
.item-list a{letter-spacing:0;display:inline-block; font-size:SOMETHING HIGHER;}
(also your DOCTYPE declaration must be correct or display inline-block can have problems working in IE, at least I had trouble with it with IE7)
This should end any extra margin frustration you're experiencing from display:inline-block;
It has to do with how you're typing your HTML. Because you're formatting it nicely in your IDE, a la, with spaces and new lines, those spaces and newlines show up when displayed on the page. So instead of
<div class="item-list">
a
a
a
a
</div>
type it out as one line and they will go away:
<div class="item-list">aaaa</div>
You can add this CSS
a{float:left}
Gap will Remove
I always use:
line-height: 2.2; //or whatever value you want
I took from facebook layout and works amazing for me
I saw a similar question here, and did not see an answer. I'm having an issue where an element is floated right, inside a parent div, and it's causing the div to stretch the entire width of the page in IE7. This does not happen in any other browsers (Firefox and Chrome). I've also posted pictures after the question, for reference. The HTML I'm using is below:
<div id="journal" class="journalIE">
<div class="title_bar">
<div>
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
</div>
The CSS I'm using for these tags is below as well. One thing I noticed consistent between the other person's question referenced above, and my issue, is that both parent div's have positioning applied (person above has absolute, I have fixed).
#journal
{
z-index: 1;
}
.journalIE
{
right: 1px;
bottom: 18px;
position: fixed;
}
#journal .title_bar
{
background: #F3F3F3;
border: 1px solid #C5D6E8;
color: #363638;
font-size: 11pt;
font-weight: bold;
height: 20px;
padding: 4px;
margin-bottom: 4px;
}
#journal .title_bar .actions
{
float: right;
}
.clear
{
clear: both;
}
Notice that the 'actions' class is floated right. If I take away that float, my box looks like this. But with the float added, it stretches the entire screen, and looks like this. Is this a known IE bug, because it's not happening in any other browser, and it's driving me crazy.
For those wondering, I did have content in the 'actions' div, but have stripped away everything down to the root problem.
Any assistance would be greatly appreciated. Thanks very much.
You need a width: *A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). *
via: W3C
Do this
<div id="journal" class="journalIE">
<div class="title_bar">
<div class="Test">
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
and then add a Css class
.Test
{
float:right;
}
should do it, let us know if it does not work.
MNK
I'm not entirely sure what you want, as you didn't explain what you wanted to do with the "actions" div, but if you wanted the "actions" div to float right next to the "Testing" div, I just tried making a separate .floatr class, or it will also work if you just apply style directly to div.
.floatr {
float: right;
}
with .floatr class, apply that to "actions" div:
<div class="actions floatr"></div>
I don't know why, but it seems to me that "actions" div is ignoring the float setting in the class you set in that manner. I personally prefer to apply multiple classes to divs, which allows me to reuse that class over other divs for which I want that effect, but I've heard that some browsers will ignore any classes declared after the first one. Oh well, I haven't run into that problem yet with major browsers...
Oh wait.
I looked over code again, and I think you just had a problem with how you set your classes. Your "actions" div was missing out on the action, try adding a comma to CSS:
#journal .title_bar, .actions
{
float: right;
}
I guess sometimes to figure something out you gotta apply effect directly to make sure it can behave in the manner you expect it to, and then probably figure it's some sorta syntax error if it does work. heh.