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
Related
I want to center(horizontaly) three icons(inline) inside a div by using css. My div is centered inside another div but I want to center the content(the three icons) inside that div.
<div id="browsers">
<div id="browsers-wrapper">
<img src="Images/firefox.png" class="browserIcons">
<img src="Images/chrome.png" class="browserIcons">
<img src="Images/opera.png" class="browserIcons">
</div>
</div>
Also a useful article on centering content with css to understand more about the procedure?
Thank you!
I actually managed to do it myself! I still need to understand the basic around block and inline elements..
Thank you though.
#browsers-wrapper img{
display:inline;
margin:auto;
width: 8%;
height:auto;
}
try this commands , it may works :
#beowser-wrapper img {
margin : auto 0;
display : block;
width : 100%;
}
I recommend to take a look in this tutorial which describing these elements
Learn CSS Layout
And in here You can also look into Inline and block elements that described by picture examples :
What’s the Deal With Display: Inline-Block?
I hope it'l help you enough.
I am creating an HTML\CSS tabless layout starting from a psd file and I am having a litle problem.
This is my final result that I would obtain:
and this is my HTML\CSS result: http://onofri.org/example/WebTemplate/
As you can see I have some problem with the left sidebar because the last blue box (the #c div) does not extend vertically to the end of the #container div and so don't match with the footer background immage.
The pnly "solution" that I have found (but this is not a correct solution) is to increase the value of the min-height* property of the **#c div of my sidebare. For example if I increase this value from the original 234px to 334px it seems to work well.
But this is not a real solution because if the amount of content change of the page change this problem occurs again.
How can I solve? What can I do to extend the height of the #c div until the end of its container
Tnx
Andrea
Here's a little trick I use sometimes:
What you need to do is have both the #content and #sidebar divs within a container div. You tell that container div to have a class of "clearfix" and it will stretch itself to be the height of the tallest column. You can then give the container div a background image if you want to make the background of each column look like it stretches the whole length.
For example, a 1px high repeating background like this might work: http://i.stack.imgur.com/W84Xa.jpg
THE CSS:
.clearfix:after{
content:”.”;
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;}
.clearfix{
display:inline-block;
}
html[xmls].clearfix{
display:block;
}
*html.clearfix{
height:1%;
}
#container{
width:770px;
}
#content{
width:542px;
float:left;
}
#sidebar{
width:228px;
float:left;
}
THE HTML:
<div id="container" class="clearfix" >
<div id="content">
Content Div Text
</div>
<div id="sidebar">
Sidebar Div Text
</div>
</div>
I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.
I have put together an example bit of code as I am trying to get 2 images of different sizes to be aligned at the top such as shown below:
HTML
<div id="test">
<div class="social-media">
<img src="http://www.ok.gov/ltgovernor/images/Facebook-icon.png" width="120"/>
<img src="http://semanticweb.com/files/2012/01/twitter_logo.jpg" width="50" />
</div>
</div>
CSS
test {
width:980px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.social-media {
position:absolute;
background-color:#000;
right:0;
top:0;
vertical-align:top !important;
}
I realise now after reading a few posts online that vertical-align will not work in divs and solutions have been to use absolute positioning instead. The only issue is that I am already using absolute postioning for the images parent div.
Would it be good practice to do absolutes inside a parent div that is also an absolute.
However if i was to put an absolute positiong on the img then all img's would stack ontop of each other unless I was to specify each and every img with a class.
So my next thought was to put a float on img within the div. I just wanted to know if this is good practice or if anyone can tell me a cleaner way of doing this?
Also, if I were to want the images to be centrally aligned, how would this be done as the float method works in the sense of getting the images to align at the top but I am not sure how I could align centrally or maybe at the bottom?
Put overflow:auto on the social-media div then add float:left to your images.
Keep in mind you can also use negative integers like vertical-align: -1px; to go up -1px
For more details see CSS vertical-align Property and try it out here.
I have two forms, and by default, they will appear in the HTML page vertically. However, due to the limitation of the page's space, it is better to arrange them in a horizontal way, with the help of CSS.
The forms are as follows:
<form>Form A</form>
<form>Form B</form>
Any help in CSS?
use float:left on the forms.
HTML:
<form>Form A</form>
<form>Form B</form>
CSS:
form
{
float:left;
}
Float the forms left inside their parent control. You may also need to set a suitable width to get the layout right on different browsers, depending on margins and padding etc.
HTML:
<form class="colform">Form A</form>
<form class="colform">Form B</form>
CSS:
.colform { float:left; width:50%;}
You can place each form within a div. Once you have the 2 divs, use css to make narrow and float them to the left to place them one beside each other. You can also add these classes to the form instead of the div. ie:
<div class="form_wrapper">
<form></form>
</div>
<div class="form_wrapper">
<form></form>
</div>
OR:
<form class="form_wrapper"></form>
<form class="form_wrapper"></form>
Your CSS:
<style>
.form_wrapper {
width: 200px; /* the width of half of your space or 50% */
float: left;
}
</style>
Voila that should do it.
There are a number of lightweight CSS frameworks that take the pain out of horizontal styling of page elements like you desire. These frameworks will take care of handling different browser nuances and let you focus on coding instead of layout:
Bootstrap, from Twitter
Blueprint CSS
Normalize.css
form {
width:50%;
float:left;
}
Or, maybe like this(for proper spacing, on any screen size):
form {
width:35%;
float:left;
padding-left:5%;
padding-right:10%;
}