I have a div like this
<div id="browsers">
<h2>Title</h2>
<p>Text recomending the use of either Chrome or Firefox.</p>
<img src="img/64-chrome.png" />
<img src="img/64-firefox.png" />
</div>
and the CSS
#browsers {
margin:0 auto;
padding:22px;
width:500px;
background:white;
}
and I want to center the two images in the middle of the div. I have managed to center them with
#browsers img {
margin-left:auto;
margin-right:auto;
display:block;
}
however the output is not what I want, since one image is on the top of the other. I want them to be on the same line. What's the best or the usual way to do it?
Usually just #browsers {text-align:center;} and remove what you have in #browsers img {...}
As you have extra stuff in #browsers. You'll need to put your browser icons in a separate div or your extra stuff outside of #browsers.
Eg.
<div class="browser-icons"> ... </div>
Your problem is that you are telling the images are blocks in display:block;... try display:inline; instead.
Related
I have a question pertaining to CSS and HTML. I currently am building an article template, and am a little stumped on one aspect.
I plan to have a picture on one side, and have a text box of the same height on the opposite side. Both are surrounded with div tags as seen in the source following.
<!--begin article-->
<div id="article">
<div id="article_header">
Title goes here
</div>
<div id="article_body">
<!-- begin text. used for actual text of article-->
<div id="text">
Text Goes here
</div>
<!-- end text-->
<!-- begin article media. used for pictures -->
<div id="article_media">
<img src="source_goes_here" alt="This is an image!">
</div>
</div>
</div>
And the CSS...
#article{
border:1px solid gold;
margin-bottom:20px;
}
#article_header{
padding:5px;
font-family:arial;
font-size:36px;
font-style:bold;
color:white;
background:url('orangegradiant.png');
}
#article_body{
padding:5px;
display:inline-block;
width:auto;
}
#article_media{
border: 1px solid pink;
text-align:center;
display:block;
width:48%;
height:48%;
}
#text{
display:block;
width:51%;
float:right;
}
I know I probably over div at times, but I have been toying with this for about an hour and have hit a brick wall. I have the layout set, or so it would seem, by using the float property. The question is how do I get the image div to dynamically change, and have the text div go up or down in size based on the size of the image? Is there a way to set a ceiling for the image size? I would like to see the image be no bigger than about 50% of the div, that way massive images don't skew everything out of proportion.
Any help is greatly appreciated!
P.S. apologies for any code formatting issues. I am still trying to get everything figured out on that front.
Add to your CSS
#article_media img { max-height:50%; }
Or if you want the containing div itself
#article_media { max-height:50%; }
I've hit a snag in html and css.
I created a div and wanted to put a logo image on its left and a button link on its right but stubborn css insists on making it move on to separate lines ,I used float:left and float:right.
Would it be something like this? http://jsfiddle.net/QFEKN/
<div>
<img src="https://www.gravatar.com/avatar/c5b9fb1230ea2fe0dc96151cba3098d5?s=32&d=identicon&r=PG&f=1" style='float: left' />
<button>Link</button>
</div>
You mean something like this?
Put a div on your img and button and set width to 100%. Then float your image and your button. I updated the fiddle of thewheat: fiddle
Your CSS
#box
{
width:100%;
}
#logo
{
float:left;
width:50%;
/*padding and Margin according to your need*/
}
#buttons
{
float:right;
width:50%;
}
Your HTML
<div id ="box">
<div id ="logo">
/*your img file here */
</div>
<div id="buttons">
/* Your links/buutons */
</div>`enter code here`
One of the thing you can do here is that you create a table put your logo in first cell of the row and next cell you can add your link, after that you can set float/margin to the positioning you want..hope that helps
You have to use "float property". without it things will not work well in all browsers and then you will get browsers issues too.
Do this , This will work fine.
Check this fiddle
img
{
float:left;
width:100px;
}
button
{
float:right;
width:100px;
}
I want to place buttons On the Top of the image in three places
Bottom Left Corner of the image
Bottom Right corner of the image
Center of the image. (optional)....
How to place these button on the top of the image.
<img src="images/default_image.png" style="width:90%" id="mImage" />
This has nothing to do with jQuery or jQuery mobile really. Can be done with simple HTML and CSS. See this fiddle for am example on how I would do it: http://jsfiddle.net/rHaPH/22/
Try this:
<div id="div-1">
<img src="../img/logo.png" style="width:90%" id="mImage">
<div id="div-1a" data-role="fieldcontain">
Delete
</div>
<div id="div-1b" data-role="fieldcontain">
Delete
</div>
</div>
with this:
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
bottom:0;
left:0;
}
#div-1b {
position:absolute;
bottom:0;
right:0;
}
You can copy that into JS fiddle and it will work using JQMobile. Make sure you include the css url for JQM and make sure you tick JQMobile when adding JQuery to your JS fiddle.
Update:
You should also beware that JQMobile will inject span tags into the DOM which will be your buttons at runtime. This means the css I have provided is conceptually ok, but the selectors will need to point to those span tags (as opposed to using the ids of div tags).
As today, with jQuery mobile v1.3.2 I have implemented that in the following way:
<div data-role="page">
<div data-role="content">
<div id="wrapper">
<div id="button">
Button
</div>
<img src="i.jpg">
</div>
</div>
</div>
And with the follow css:
#wrapper{ position:relative; }
#button{ position:absolute; top: 10px; left:0px; z-index:10; }
img{max-width:100%; }
Some styles probably are not needed for what you want, but I just took the code sample from my own code.
wrapper div is relative positioned so its contents can be absolutely positioned.
z-index in the button div is to make sure it is placed on top of image.
You can add as many buttons as desired and change its css properties for top, left, right and button to move them around the image
Working example at jsFiddle
Using a method I've done before but having issues. Not sure if it's a sprite or what.. Basically you have two versions of an image saved into one file with them stacked on top of each other and use CSS to adjust the margins when hovering. Here's an example of it working successfully: http://minimalpluscreative.com
Trying to do the same thing here, but running into issues with overflow:hidden; not working. Instead, the the full (double) image is shown. Here's what it looks like: http://cl.ly/023p1I1D1W0W3a1T1q1R It should be just the top half of the image with overflow:hidden; preventing the other half from showing.
Help? Some kind of syntax error I'm sure...
HTML:
<div id="work" class="sub">
<h3>MUSIC VIDEOS</h3>
<img id="show_fire" class="thumbnail sprite" src="images/daniel_gomes_soundoffire_sprite.png" />
</div>
CSS:
.sprite {
width:140px;
height:61px;
overflow:hidden;
}
.sprite:hover {
margin-top:-61px;
}
I've never seen this done before except with background images, but I don't see why not… it just seems like you need a lot of extra css, and extra html to get it to work as opposed to a background image.
As was said earlier, it's hard to see the problem without seeing your actual code in context, but based on what I see, there could be a few potential things wrong:
You need to wrap the image in a containing element, and assign the width, height and overflow to that. Hidden overflow will hide what's outside of the boundaries that div contains. The image element is the image, it doesn't contain the image, so setting it to overflow:hidden isn't going to hide andything, and assigning it a width will just resize it, not "crop" it (which is the effect you're going for). So you'd need something like:
<div id="work" class="sub">
<h3>MUSIC VIDEOS</h3>
<a class="sprite" href="#">
<img id="show_fire" class="thumbnail" src="images/daniel_gomes_soundoffire_sprite.png" />
</a>
</div>
with this css:
.sprite {
width:140px;
height:61px;
overflow:hidden;
}
.sprite img {
margin-top: 0;
}
.sprite:hover img {
margin-top: -61px;
}
I suggest you use 'a' as the containing element, as not all browsers will recognize the hover pseudo-class on tags other than anchor tags.
I know you think using an image instead of a background image is simpler, but using background images, you can accomplish all this with only one element and less css.
In the example site you refer to, the overflow:hidden property is set on the outer 'div#a'
'div#work' in your code should have it's overflow set to hidden.
Thus when you change the margin on your image it will move within the frame of your outer div.
Additionally I had to add a tag name to the hover declaration.
<html>
<head>
<style>
#work{
position:relative;
overflow:hidden;
width:140px;
height:61px;
}
div.sprite {
margin-top:0;
}
div.sprite:hover {
margin-top:-61px;
}
/* instead of an image */
.sprite div{
height:61px;
}
.red {background:red}
.blue {background:blue}
</style>
</head>
<body>
<div id="work">
<div class="sprite">
<div class="red">a</div>
<div class="blue">b</div>
</div>
</div>
</body>
I'm slicing a psd, and there is a part of the screen that will repeat with as many items as it needs, similar to the question list of stackoverflow.
It needs to have this structure:
Is it possible? How should the css be?
Thanks!
You could try the following:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
}
#user-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<!-- The rest of the page's content goes here. -->
</div>
</div>
This makes the "content" div fill the rest of the space that "user-content" doesn't fill. It will only be an issue when your content is taller than the user content... but that's a different problem :)
This is another possiblity:
<style type="text/css">
#container {
width:60%;
}
#content {
width:100%;
float:left;
}
#user-content {
float:left;
}
#page-content {
float:left;
}
</style>
<div id="container">
<div id="content">
<div id="user-content">
<p>This can change depending on what is in here.</p>
</div>
<div id="page-content">
<p>This should take up the rest of the space.</p>
</div>
</div>
</div>
The problem lies in your left div where you state "width can increase depending on the content". How is this width defined? The div to the right can expand to 100% of the remaining space but you must define the relationship between the left and the right divs by either providing a fixed width to the left div or providing a percentage to both that equals 100%.
Well, as you’ve probably seen, so.com used fixed width div’s to achieve your layout goal.
Obviously my first tries setting the width automatically failed, but maybe I’ve a useful workaround for you: use left and right floating of both boxes.
<div style="border: 1px solid #000000; width: 60%">
<div style="border: 1px solid #444444; float: left;">
some text
</div>
<div style="border: 1px solid #999999; float: right;">
foo
</div>
</div>
Of course this will only help if I understood your question correctly ;)
As far as I know the only way to give your variable width container a variable width and float it to the left is to give it {width:auto;float:left;}
But I don't know if you can do anything useful with this because if you have text or a lot of small fixed width items to put in this container, they will keep expanding out along the first line until they've filled the width of the outer div before going on to the second line. They won't fill up the whole height and then push outward gradually as the text gets too much to contain.
Just a thought - you might be able to do some nifty JavaScript (possibly using jQuery?) which sizes those divs like you need them.