Let say I have two elements <img> and <p> as
<img style="background-color:#ffffff;width:250px;height:auto;float:left" src="http://somesite/p3.png" />
<p>
alibabaanakjalanan.</p>
Currently, the paragraph content is shown exactly nex to the image. How can I set some spacing between the elements ?
If you are floating the image you all you have to do is give it some margin-right, I would advise moving away from adding the styles inline by maybe giving the image a class something like this although my classname is very weak:
CSS
.img {
background-color:#ffffff;
width:250px;
height:auto;
float:left;
margin-right: 20px;
}
HTML
<img src="http://somesite/p3.png" class="img" />
<p class="para">alibabaanakjalanan.</p>
In action http://jsfiddle.net/PqWAh/1/
This is best practice for seperating styles from markup
Add margin for img.
margin-right:20px;
So code would be
<img style="background-color:#ffffff;width:250px;height:auto;float:left;margin-right:20px;"
Related
How can we remove space from bottom of box when we use image with width 100% in it
<div class="midVideo"><img src="images/videoImg.png" alt="" /></div>
.midVideo{
width:487px;
display:inline-block;
border-radius:10px;
overflow:hidden;
border:solid 12px #630400;
background:#003;
}
.midVideo img, .midVideo iframe{
width:100%;
}
.midVideo img {
display: block;
}
Add display block property to image
Images are replaced elements. These are treated much alike inline elements - so they are placed onto the baseline of the parent element. The space below is reserved for letters which excess the height like pqg and so on. Since images don't need this space, you just need to define display:block on the image to remove it.
Simple way is
<img style="height: 100%;" src="images/videoImg.png" alt="" />
Hard way is
<div class="midVideo">
<img style="[b]<? $img_size = getimagesize('images/videoImg.png'); if ($img_size[0]>$img_size[1]) echo 'width'; else echo 'height'; ?>[/b]: 100%;" src="images/videoImg.png" />
</div>
I want the text and the image to be next to each other but I want the image to be on the far left of the screen and I want the text to be on the far right of the screen. This is what I currently have....
<body>
<img src="website_art.png" height= "75" width= "235"/>
<h3><font face="Verdana">The Art of Gaming</font></h3>
</body>
How can I do this?
Thanks
img {
float:left;
}
h3 {
float:right;
}
jsFiddle example
Note that you will probably want to use the style clear:both on whatever elements comes after the code you provided so that it doesn't slide up directly beneath the floated elements.
You want to use css float for this, you can put it directly in your code.
<body>
<img src="website_art.png" height= "75" width="235" style="float:left;"/>
<h3 style="float:right;">The Art of Gaming</h3>
</body>
But I would really suggest learning the basics of css and splitting all your styling out to a separate style sheet, and use classes. It will help you in the future. A good place to start is w3schools or, perhaps later down the path, Mozzila Dev. Network (MDN).
HTML:
<body>
<img src="website_art.png" class="myImage"/>
<h3 class="heading">The Art of Gaming</h3>
</body>
CSS:
.myImage {
float: left;
height: 75px;
width: 235px;
font-family: Veranda;
}
.heading {
float:right;
}
You can use vertical-align and floating.
In most cases you want to vertical-align: middle, the image.
Here is a test: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
For middle, the definition is: The element is placed in the middle of the parent element.
So you might want to apply that to all elements within the element.
What is the best way to have text and then an image with text following? I dont want to use table if possible but I am running into issues with the items breaking onto their own lines.
Below is my code and css so far:
<div id="header_number">
<h2 class="phone_title">Call Us Today!</h2>
<img src="images/phone_icon.jpg" alt="Call us Today"/>
<h2 class="large_num">1-800-555-9999</h2>
</div>
CSS:
h2.phone_title{font: 13px arial;Color:#013173;text-align:left;}
h2.large_num{font:29px arial;Color:#013173;text-align:left;}
#header_number{float:right;height:60px;width:332px;display:inline;}
I thought the display:inline; in the container div (header_number) would line everything up but that didn't work. If needed I can add a class to the img and float everything left if that is my only option.
Now Define your some element display:inline-block; or vertical-align:top
as like this
h2.phone_title, h2.large_num, img
{display:inline-block;vertical-align:top;
margin:0;
}
Now check to live demo
I have the following setup
<div id="outerDiv" style="width:100%;">
<div id="innerDiv">
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
The width of the outerDiv can change based on browser view-port. Is there a way to restrict the width on the innerDiv just by using a style attribute, such that it overrides the included image width (800 in this example). Currently the image spans beyond the viewport and I would like the div/browser to shrink the image to the inner-div-size.
Am looking for something like:
<div id="outerDiv" style="width:100%;">
<div id="innerDiv" style="attribute:xxx;" or something similar>
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
Please note that : the innerDiv is rendering 'variable' data coming from a stored parameter for instance. I only have control on the style on the innerDiv to make sure that things like 'center' or 'width' on the innerHtml does not go beyond what the outerDiv is setting. I have tried to use 'max-width' on the outer-div, but that didn't seem to work (I am not an expert on html/css - so I could have done it incorrectly).
Many thanks for all your help !
max-width property can help you.
Remove width attribute from img tag and write additional css code:
<style>
#innerDiv { text-align: center; width: 800px; }
#innerDiv a > img { display: inline-block; max-width: 100%; }
</style>
ComFreak has the complete answer.
Remove the center tag and instead add some css. Also add an id to that image if you want to target only that image specifically as far as its size.
#innerDiv {
max-width:800px;
margin:0 auto;}
img {/*use 'img#idOfimage' instead of 'img' if you end up adding an id to image */
width:100%;
height:0 auto;}
This should take care of it. You can put the css in a style tag in the header or better yet in a separate css file.
Don't use center tag. It defentinatly is outdated. Instead use margin: 0 auto; That will center the content. And use the max-width property for the innerDiv id. This is a great reference source. http://www.w3schools.com/cssref/pr_dim_max-width.asp
I need to populate data in the white space of the box shown in the picture. The Red portion will be an image,
But still data has to be shown continuously in the white space. How can i achieve this using HTML and CSS ?
Updated with code :
<div id="Content" runat="server">
<img id="ad" src="images/sandbox.gif"
style="float:right; height: 200px; width: 150px;" alt="{alt}" />
</div>
#Anuya take a look at this http://jsfiddle.net/TfXNf/
Its better if you define a class in you css style in order to toggle all pictures that needs to have the same layout so
HTML
<img src="http://link.to/image.jpg" class="className" alt="Image"/>
CSS
.className{
float: right;
margin-right:2px; /*change these based on your layout*/
margin-bottom: 2px; /*change these based on your layout*/
}
Margins are needed to push the text a little bit away from the picture so you can create the illusion of the border
Just put a float onto your image:
<img src="{imageLocation}" alt="{alt}" style="float:right;" />
Ideally you would want to keep the styling separate from the content but this will give you the idea. Hope that helps