I have 3 spans inside a div.
text-align: center doesn't comply
text-align: -moz-center neither
I have to use spans
no floats
display: -moz-inline-block is working but the 2nd and 3rd spans clear left…
Anyone got an idea?
EDIT:
div{
width:80%;
display:table;
}
span{
width:33%;
display:table-cell;
text-align:center;
border:1px solid #F00;
}
Note that both the div AND span width need to be changed to adjust widths. The span should be 100/(no of spans)% and the div whatever width you want.
HTML
replace <span>text</span> by <p><span>text</span></p>
CSS
p {display:-moz-inline-stack;text-align:center}
span {display:block}
Just put some left and right padding on those spans?
So if you have something like this:
<div>
<span>some text</span>
<span>also some text</span>
<span>again here comes some text</span>
</div>
Just use it like this in your css:
span{
padding:0 10px;
}
Result will be something like this:
http://i48.tinypic.com/5knczm.jpg
Note, i added 1px border, so you would see that text is "centered"...
Related
I used an [hr] tag but instead of just a single line it shows what seems to be the border of something. It has a teeny tiny little edge just on the left of it. The following link should explain what I mean.
Image is here
My code is as follows:
<hr align="center">
Any thoughts?
That is the default browser style. If you don't use any CSS that's what appears as the horizontal rule (<hr />) tag. For example this can be your markup:
<hr class="footer-hr" />
To style it you can use the following CSS code:
.footer-hr {
/* These are browser hacks so the horizontal line looks the same in all browsers
(cross-browser) */
border-color: #000000;
background-color: #000000;
color: #000000;
border: 1px solid #000000;
/* So keep them as they are - you can change the values of course */
}
Also why would you align it to the center, the browser does it by default as I know. Also if you add something like margin: 0px; in CSS you can have the <hr /> wrap the whole line of the page, from the farest left to the farest right corner.
EDIT:
To make the line not to look fat you could use this:
Add to the above CSS code the following rule:
height: 1px; /* Or change the value to whatever other number */
EDIT 2:
As you asked for a bordered div, I don't know what did you want a top-border or a bottom-border or both? Anyway here's the code you need:
MARKUP:
<div class="bordered-div"><!-- Some content here --></div>
CSS:
.bordered-div {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
Please see this fiddle
My main concern in this fiddle is the div#text and img.frame. I'm trying to create a responsive website, but this has been my problem for so long, I can't figure out how 'to make the img behave beside the text and be responsive at the same time when I try to reduce the size of the browser window. What it does is, it goes under the text before it acts responsively. Is there a workaround for this?
<div id="text">This is some text this is some text this is some text</div>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" />
For your goal you should use em or % and use inline-block.
jsfiddle.net/geNuR/ Look at this jsfiddle
Don't know why i can't put code propely, maybe forum blocked our country))
The key to responsive images with flowed text does rely on float. However, the key is in floating the img element, not the text.
First, place the img tag before the text, giving a markup as so:
<img src="image.jpg" width="294" height="225" class="frame" />
<div id="text">This is some text this is some text this is some text</div>
The importance of this order is that the img will be floated to the right, removing its cleared blocked region height, and the text will flow up and around it.
Next, remove the float from the text, allowing it to flow, and apply a float right to the image. I will also note, that to give a margin between the text and the img, the margin is applied to the img, giving you this styling:
img { max-width: 100%; height: auto; }
#text{ width:100px;}
.frame {
float:right;
background: #fff;
padding: 6px;
margin-left:10px;
box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
-moz-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
-webkit-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
}
Here is a jfiddle demonstration
I'm assuming that you're looking to have text and an image side-by-side here, so apologies if I'm wrong.
Like M. Berro, I would first put the two elements inside a containing div, as below:
<div id="container">
<p class="text">Here's some text. This will be aligned to the left, and next to the image. It's width will change as the viewport expands or contracts.</p>
<img src="/image.png" title="An image, aligned right" />
</div>
To sit the image and text side-by side, I would use the following CSS as a starting point:
#container {}
#container p.text { float: left; min-width: 320px; }
#container img { float: right; margin-left: 20px; }
In my example, I've applied a float to each of the two elements (You will of course have to clear the floats to make sure the rest of the page's structure remains intact - I suggest looking at Clearfix, as it avoids any extra empty divs). I've also given the text a min-width: this ensures that the text doesn't contract to a point where it is unreadable!
As I understand you need an image beside a text, so when you reduce the window size the image and text behavior isn't affected.
You need the following:
Make a container div id=img_container give style width (let's say 400px)
Put your image inside the container and give a style #img_container img{float: left}
Put your text inside a p tag and give style #img_container (p or div) and give style (margin-left: same of your img width) + 10
This is the full example:
<style>
#img_container {
width: 400px;
}
#img_container.text {
margin-left: 306px;
}
#img_container img.frame {
float: left;
}
</style>
<div id="img_container">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/5/5f/TomandJerryTitleCardc.jpg/250px-TomandJerryTitleCardc.jpg" width="294" height="225" class="frame" />
<div id="text">This is some text this is some text this is some text</div>
</div>
You could start by adding the css max-width: 60%; in .frame. It's not perfect but is this similar to what you are trying to achieve? Better results can be realized with javascript/jQuery.
I have a html document structured with a header, content, and footer divs. I am trying to center an image (a logo) inside my header div to display at the top of my webpage in the middle. I can absolute position it into the middle, but when I change the browser size, the img doesn't move along with it. I want it to be place automatically in the center of the window. I am stumped..?
I have tried , margin-right:auto; margin-left:auto. I have also tried the trick where you make margin-left negative half the width and top 50%, but nothing has worked so far.
html:
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
css:
#header {
background-color:transparent;
height:260px;
width:100%
}
#logo-img{
display: block;
margin-left: auto;
margin-right: auto;
}
Also, Do I even need a container? Not sure if I need javascript for this, or if it can be accomplished with just html/css? Hope someone can help, thanks!
What is happening is that you are already correctly centering your image.
Your problem is that the image is huge. If you notice closely, the image is not centered if your browser window becomes smaller in width than the image.
Remove the white area from the image and it will center correctly.
Edit: in IE, you need to add the rule text-align:center to #header
Another way:
If you don't want to change your image, you can use this hack:
<style>
#header {
overflow-y: hidden;
background-color: transparent;
height: 260px;
width: 100%;
margin-left: 50%;
}
#logo-img{
display: block;
position: relative;
right: 50%;
}
</style>
<body>
<div id="container">
<div id="header">
<img id="logo-img" src="http://f.cl.ly/items/3c0h1b0F3t1D1S1T2J0F/smallersticker.png">
</div>
/*...(body div)
...(footer div)*/
</div> /*container*/
I learned this hack a while ago here
Just use the logo at a size it's supposed to be (like this here), then all you need to do is add the align="center" attribute to your logo's div.
I have this image link:
<p class="alignright">
<a target="_blank" href="...">
<img width="230" height="158" align="right" style="margin-right: 30px; margin-top: 20px;" src="some_source" >
</a>
text should go here
</p>
The alignright class looks like that:
.alignright {
float: right;
margin: 4px 0 1px 10px;
}
Now I tried several things to place text below the above image link (I tried using a < br > and image captions for example), but everything failed. The text is either too far on the left, or its not even below the image link.
Any ideas how to get the text below the image link?
Thanks!
You mean that you want the text to be aligned to the left edge of the image link?
This means that you have to put both elements into one container and assign the float:left property to this one:
I guess that this is the "" I can see in your sample.
Did you make sure, that the width of the p-Element is the same as of the image link?
Otherwise the text would be aligned to the p-borders wherever they are on your page.
Shrink the size of the p-Element or put everything into an extra container:
<div style="float:right; width:#IMAGE_LINK_WIDTH#; text-align:left;">
IMAGE_LINK
<!-- A <br /> might be placed here -->
Text
</div>
after <p class="alignright"></p> tag put
<br style="clear: both;" />
some text here
Text will appear under the image.
Live Sample
Just add a span or a div with clear:both property and then align your text as you need.
EDIT:
If the text below the image is a link then just wrap the link inside a p tag like this
<p>Your Text</p>
By doing this your link will appear in the next line as p is a block element.
Block elements force line breaks before and after the position they are placed at.
See Demo
This is html file
<img src=""><span id="title" >your text</span>
This is css file
span#title {
text-align: center;
font-weight: bold;
}
span {
background: black;
bottom: 459px;
padding: 5px;
color: white;
opacity: 0.7;
position: absolute;
left: 8px;
width: 244px;
}
Try in this way
How do i add a text caption to the image border example mention at http://notions.okuda.ca/2007/02/06/cool-css-image-border-style/
I would like to use the code in the same place that the image path is specified(not in the style sheet), so somewhere in
<img src="SOMETHING.jpg" style="display: block; margin-left: auto; margin-right: auto; padding:8px; border:solid; border-color: #dddddd #aaaaaa #aaaaaa #dddddd; border-width: 1px 2px 2px 1px;" />
You do know that a lot has changed since 2007? CSS3 introduced the box-shadow property that does just this, but more realistically.
Without HTML or JavaScript, you can't do the caption, though. CSS can't read properties from HTML.
Here's a demo: http://jsfiddle.net/2DuyU/3/
I don't see how you can do this without making a p tag like so at the very least:
<p><img src="location/of/my_image" alt=""/><br/>Caption</p>
adding the styling to the p tag instead.
Example: http://jsbin.com/ewazir
I think you should write following
<img>your caption</img>