looking at this live demo:http://jsfiddle.net/5AUMA/25/
How do I make the left sidebar text be right justified but about 1% away from the right margin.
When I do the padding-right: 1%; it starts overwriting the margin
Also how do I make the circle be above the text?
EDIT - just edited the link
You could use on the .left class:
direction:rtl;
text-indent: 1%;
Another option would be:
Create a div inside .left and call it .inner-left, then add this CSS to your code:
// HTML
<div class="left">
<div class="inner-left">
LEFT
</div>
</div>
// CSS
.inner-left {
text-align: right;
width: 95%; /* change this value if you need */
}
ps: don't forget to run the jsfiddle to test the changes
Hope it helps.
I think that your best bet is to use the box model to set margins/paddings and use text-align properties and margin auto along with setting how the object should display( block,inline,etc). I played a little with the fiddle example you gave and used the box model to set the element properly inside the parent. Sorry that I used inline CSS but it is just an example that you can extract and transfer to your main CSS file.
Here is the new fiddle test: http://jsfiddle.net/5AUMA/26/
and the box model reference is here: http://www.w3schools.com/css/css_boxmodel.asp
the code example just in case (but the fiddle has it all complete):
<div class="left">
<div style="padding-right:5%; display:block; text-align:right;" >
<img style="margin:auto; margin-right:0; max-width:50%; max-height:50%; display:block;" src="http://img.photobucket.com/albums/v436/passion4architecture/LOGO_ROUND%20and%20CIRCLE/Logo_The-Circle-of-Reason_wwwcircleofreasonorg_dian-hasan-branding_US-2_zpsf675b4a5.png" />
hello
</div>
LEFT
This should help with all your current needs.
Ps: for any element (including images) is better to use css to adjust the widths/heights and alignments.
Cheers :)
Related
I need some advice in creating a caption underneath an image, that is aligned to the right hand side. The image will change, so I can't use fixed value margins or anything like that - is this possible without javascript?
This is the basic layout, 'text-align: right' would work if I could somehow force the wrapper div to constrain to the image width, but currently it breaks past this. Any advice?
<style>
#section{height: 74%; padding-left:5%;}
#photowrapper{position:relative;}
#photo{height:100%; width:auto;}
#detailsdiv{position:relative; text-align:right;}
</style>
<div id='section'>
<div id='photowrapper'>
<img id='photo' src=../imgs/banan.jpg></img>
<div id= 'detailsdiv'>banan</div>
</div>
</div>
Maybe an obvious question but it hasn't been asked that I can see.
Just add display: inline-block; to the #photowrapper CSS
#photowrapper{
position:relative;
display:inline-block;
}
Fiddle: http://jsfiddle.net/DyrS9/
You can add display:table-cell (or table,inline-block) to #photowrapper :
#photowrapper{
position:relative;
display:table;
}
Example
say you had this:
<div style="width: y px; display: inline-block">
<span class="one"></span>
<span class="two"></span>
</div>
Is it possible to style the two spans using css so that if span "1" has a width of x px then span 2 has a width of y - x?
Thanks!
Here is the quickest fix I can possibly give you for what you are asking.
DEMO
The demo is going to show you a few things but first I want to break down my own code as we go over it. Let's start with the HTML Code:
<div class="wrapper">
<div class="one"></div>
<div class="two"></div>
</div>
In your example, you use a span. As far as I know, span will only allow you to muck with the width of the length of the text in your span. An example of that is here, where I have set the width of the span to be 100px but it will only show the width of text within the span.
This leads me to the reasoning of a div, it is simple, and you can use it to accomplish what you are asking for. So let's break down the CSS code:
.wrapper {
width: 200px;
background:gray;
display: inline-block;
height:20px;
}
.one {
width:50px;
background:red;
height: 20px;
float:left;
}
.two {
width:-moz-calc(100% - .one);
background:black;
height:20px;
}
I apologize ahead of time for renaming your classes. Before we analyze this code, I would like to point out that I added in a height variable for each div so that I did not have to put anything in the div to check it. First thing is first, your instinct of using
display:inline-block;
is great! Next is to float or position these divs to be on the same line, in this case, you only need to float one of them to be sure they will both stay positioned on the same line. Next, I use a neat little trick, the -moz-calc, more information on this can be found on MDN's website. The gist of it is that it will take whatever the width of its parent element is and subtract the width of the class ".one" in this case, check the example below to see exactly where I am pin pointing.
.two {
width:-moz-calc(100% - .one);
background:black;
height:20px;
}
Now, if you go through and play with my DEMO, you will quickly notice that if you alter the width of the red div, it will change the width of the black div, further accomplishing what you need :) If this is not what you want, comment below and we can figure something out :)
I encourage you to play around with my JsFiddle to get the exact feel for what the divs do and what the calculator does as well. Also, for future reference, this site has always been helpful for me!
display:table/table-cell; seems to be appropriate to me.
<div style="width:200px; display: table">
<span class="a1" style="display: table-cell;border:solid;width:1px;">a</span>
<span class="a2" style="display: table-cell;border:solid;">b</span>
</div>
*Using numbers as first caracter to name class or id's is not a good idea. use W3C validator to find out *
Display will make your box react as a <table> and first <span> will shrink on its content will the other one will use all space left.
I'm currently creating a website and I came across a strange thing: I have a content div that's 950 width and centered on the page. Inside that I have a header div, a menu div and some other content div. I would like the menu div and that other content div to be right next to each other so I thought about using float:left on both divs. However, when I use this float:left on the menu div, it's getting pushed to the right and I can't figure out why. I think some other element is pushing it to the right.
I'm using a custom Drupal theme, a subtheme of Zen to create the page by the way.
Here's the HTML I'm using to create the page (without the header):
<div id="root">
<div class="content">
<div class="left-menu">
<ul>
<li><p>Camera</p></li>
<li><p>Audio</p></li>
<li><p>Licht</p></li>
<li><p>Lenzen</p></li>
<li><p>Grip</p></li>
<li><p>Accessoires</p></li>
<li><p>Recorders</p></li>
<li><p>Transport</p></li>
<li><p>Edit suits</p></li>
<li><p>Crew</p></li>
</ul>
</div>
<div class="products-overview">
This is some other content that I want to the right of the menu.
</div>
</div>
And here are some CSS properties I've set on left-menu and products-overview:
.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}
.products-overview {
background-color: #BBB;
float: left;
}
Could anyone please explain me why the left-menu is being pushed to the right?
Hmm, I believe this is a result of the normalize.css stylesheet you're using.
The problem stems actually from the .header element, which has a table within it. The normalizing stylesheet has a margin-bottom:1.5em applied to the table, which translates into a margin on the .header element (since it has no padding/border), which in turn sends the .left-menu to the right (since the margin causes there to be no space for it to fit on the left).
Adding to your current .header table definition can fix this, with a simple:
.header table{
margin-bottom: 0;
}
I hope this is what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
I tried to replicate your problem. I did and found a solution that should work. Just set the products-overview class to float:none. See this fiddle. http://jsfiddle.net/shaansingh/yj4Uc/
In Mozilla Firefox it looks ok to me. From your code, I can only see that you need a width for the content div. and watch the dimensions, especially left/right padding and borders.
Ok so in my table cells I have an image on the left, a link that I want top aligned, and then a small description below that.
Right now I have the image on the left and the link top aligned. My problem is that the link text is carrying over below the image, instead of staying to the right of the image and cutting off at the width of the cell.
Here is my css for the link. Setting the width does nothing. I have tried setting the display to block, but then that puts the link below the image. I am very new to html so bare with my ignorance.
.jobLink {
color:black;
vertical-align:top;
width:100px;
}
EDIT 1:
Thanks for all of your suggestions. I am going to try and test this out tonight. Also, thanks for the double check on whether or not I really needed a table. The more I thought about it I really don't need a table with the way I am setting up each list item. It makes more sense to use a list.
EDIT 2:
Ok so here is the look that I am going for.
I have switched from a table to a list using everyone's advice. The data isn't really tabular.
EDIT 3
Here is the updated css I am using on the list.
.jobList {
background: white;
color:black;
width:inherit;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size:10pt;
font-weight:bold;
list-style:none;
float:left;
padding:0;
margin:0;
}
.jobList li
{
float:left;
overflow:hidden;
width:inherit;
}
.jobList li a
{
color:Black;
vertical-align:top;
white-space:nowrap;
}
.jobList li img
{
float:left;
}
Edit 4
This is the image and here is the list item in question. Also, there is a wrapper div on the list itself and this is probably key. I have added that css.
.jobsListWrapper {
width:318px;
height:500px;
overflow:auto;
float:left;
}
<li>
<div>
<img src="/images/page.png">
<a id="5182" href="/jobs.aspx?rid=1016&jid=5182">MyJobID - This is my long title for the task that I need to complete</a>
</div>
</li>
EDIT 5
I JUST SAW IT. The wrapper is causing the list item to overflow automatically...ok so how do I only overflow vertically? Ok no that wasn't the problem.
Try adding:
position:relative;
display:block;
overflow:hidden;
To the <ul> css
and
postion:absolute;
to the <li> css.
The reason for this is that if the <ul> is absolutely positioned, it is removed from the flow of the document, which in turn means that the <li> will position relative to the viewport and ignore the overflow:hidden of the <ul>
Though I do not recommend using a table unless this is truly tabular content, the following solution should work for any container element, including table cells.
If you use a css rule of 'float: left' on the image, the image will, obviously, be floated to the left side of its container. This will make sure that the image stops pushing content bellow it and the content will simply wrap around the image.
In this case, that means the image will position itself to the left, and the link and descriptive text will be right next to that, to its right.
I am assuming the HTML inside your table cell is something along the following lines:
<img src="http://www.heliam.net/Gein/_Media/apple_icon.png">
Here is a link
<p>And here is some descriptive text</p>
Now, if that is the case, then your CSS should simply make sure that the image is floated to the left:
img {
float: left;
}
You can see all this in action right here: http://jsfiddle.net/aySEe/
Something to try might be wrapping each element in a DIV and using float. Excuse the inline CSS.
<td style="width: 15%">
<div style="float: Left">
<img alt="" src="Image.png" />
Hello!
</div>
<div style="float: Right">
<p>Hey This is something.</p>
</div>
</td>
You could then push them closer together using width on the table cell
<td style="width: 15%">
Let me know if that helps!
I have a very simple nested <div> layout:
<div id="main">
<div id="options">
option 1 |
option 2
</div>
</div>
I applied a very simple CSS :
#main{
height:50px;
background-color: #cc00ff
}
/*here is the thing confused me*/
#options{
margin-left:auto;
width: 8em;
}
You can run it on jsfiddle here. Everything works fine. But there is one little thing confused me: which is, why the CSS code :
#options{
margin-left:auto;
width: 8em;
}
makes the options <div> to be located to the right side of the main <div> ? Anyone can explain to me the reason?
The reason is because you have set an auto margin on one side, which means it will just fill the space given it. I suppose this is the same sort of result as applying a float of right, but without any impact on document flow. It basically works out the automatic margin by removing the width left after the width of the contained elements.
If you wanted it centered you'd need to add an auto margin to both, with fills both sides of the parent with the width left over equally.
Why are you put the margin-left:auto; in the option DIV. The option div is gone to the right because of the margin-left. It is already left aligned. If you want the option div in the center, just need to put the margin:0 auto;
Thanks,
Arun Krishnan