I need to move my image a bit to the right, but not fully.
This is what I currently have,
and this is how I need it to look like.
This is the code I have for the image currently:
<div>
<img src="../Hozier.png" width="245" height="600">
</div>
I am very new to HTML and really need some help. Thank you in advance.
You can add margin to the left side of the img element with CSS.
<div style="margin-left: 100px;"><img src="../Hozier.png" width="245" height="600"></div>
You can change the 100px value to move the image to the right more or less as needed.
You can do the following:
<div>
<img src="../Hozier.png" width="245" height="600" style="margin-left:100px;">
</div>
Or use positioning and other methods.
But the following code seems to be useless:
you can use position to move it style:"position: relative; left: 10px"
Related
My code currently looks a bit like this:
<marquee>
<img src="https://cdn140.picsart.com/274296681002211.png" alt="Mushroom" width="100" height="100">
</marquee>
I am a rookie and have tried using the style="" code but it seems to just break everything.
Put a div around your image than you can adjust the position easily with css. Check this link for further instructions: https://www.w3schools.com/css/css_positioning.asp
HTML
<div class="image">
<marquee>
<img src="https://cdn140.picsart.com/274296681002211.png" alt="Mushroom" width="100" height="100">
</marquee>
</div>
CSS
.image{
position: absolute;
}
As an alternative you can use inline style with the style="" propertie.
<div style="position:absolute">
I have two images that I'm trying to center align horizontally. Currently they look like this...
But, I would like the "APPLY NOW" button to be horizontally aligned like so...
My current code for the two images is this...
<img class="alignright" src="image1.png" alt="" />
<img src="image2.png" align="right">
I've attempted to center align them without CSS, and I'd prefer not to use CSS if there is a way I can do it without it. If I have to use CSS, then I'd appreciate any help that is provided!
Thanks!
With CSS just use the vertical-align property with the value middle
More about vertical-align: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
Without css... I've no idea.
add the following css to the parent box or element which the images are in:
style="display:table-cell; vertical-align:middle;"
hth
Just apply two rules to the second image .
<img class="alignright" src="image1.png" alt="" />
<img class="center" src="image2.png" align="right">
css code:
.center{
positon:relative;
top:50%;
bottom:50%;
}
I want that banner image to fit the white container instead of go over the side to the right, but I can't seem to ignore the margin on the left. I've tried all I know; from max-width to setting the margin at 0px but nothing works.
This is the code I currently have:
<p style="text-align: center;" dir="ltr">
<img class="aligncenter size-full wp-image-504" title="bannercommunity"
src="image.png"
alt="" width="960" height="140" />
</p>
Any and all help would be appreciated, thanks!
You can just add width: 100% to the <img>. Note that having the browser resize images is inefficient, so you should avoid it if you can and resize the image to the correct size that you want to use instead.
Although I am against inline styles, I would suggest you to go with this:
CSS Way
.body .wp-image-504.aligncenter { width: 100% !important; }
Screenshot
Remove the width and height values, give the style this way.
Thanks for the help folks, but I discovered that by adding
'position: relative; left: -20px; width: 960px;'
in the styles field did the trick for me. So, setting the position of the image relative to the container, then matching the image width to the width of the container (while adding a minus number in order to nullify the left margin) worked.
In your case, you need to add style="display: inline-block;" to the parent P tag of the image. Or you have to remove style="display: block;" in the "aligncenter" class of this image. Both of them will solve your problem.
Thanks Nick's suggestion, I've revised my answer in comment.
I want to create a basic layout for webpage with divs and want to set images for their background.
Since I have smaller images I want to stretch them to fill in the divs.
There are many ways to do that. But I tried following:
</html>
<head>
<style>
img#bg {
top:0;
left:0;
width:100%;
height:100%;
}
<style>
<head>
<body>
<img src="body.jpg" alt="background image" id="bg" />
<div id="content"> </div>
<body>
</html>
This worked. Then I tried to make use of it in layout.
<div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>
<div id="content" >
<img src="body.jpg" alt="background image" id="bg" />
</div>
This also worked. But when I tried to set image this way for a div with float:left or CSS width set, it did not worked:
<div id="header" style="zindex=1;height:300px;width:100%"></div>
<div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>
<div id="content" style="float:right" >
<img src="body.jpg" alt="background image" id="bg" />
</div>
This doesnt work. In last HTML notice float:right.
I will like to stick to this method, not any jQuery method or others and also will like to know what is wrong here and what should be done to get the desired result with CSS modifications as I am learning this.
Seems like you want a background image
A good explanation can be found here
Basically you can make a div have a background using CSS and not having to put an tag inside, this is almost always preferable.
Example code for you could be:
body {
background-image: url('body.jpg');
background-size: cover;
}
In order for height: 100%, Top:0 etc to work you need to have a position applied to the element.
You don't as per the example code given. Give more code and i can help more. But from what you have given this is your problem.
background-size: cover;
Is a nice solution, but I'm not sure about the browser support, because it's CSS3.
I made a fiddle, is this what you were looking for?
http://jsfiddle.net/NQY6B/5/
By the way, change "zindex" to "z-index".
EDIT: I've updated the fiddle with text content in the div
I have a div inside that div i have an image which says "Searching .." Now for this modal How to apply the border
<div id="waiting-dialog" title="Waiting" style="display:none">
<img src="myimage.gif" border="0" align="middle" hspace="20" vspace="5"/>
Retrieving all the required information based on your selection.This may take a few moments. Please wait...
</div>
And for this Modal I am having the image Appearing on Left side and Text not appearing properly .How can I make tthe text to
appear in neatly manner
Take the text in a separate div inside the "waiting-dialog" div only, then use the use style float:left for that new div and image. Now you can play around the new div position with paddings, margins and fonts etc to make it neat. see the below sample code.
<div id="waiting-dialog" title="Waiting">
<img src="myimage.gif" border="0" align="middle" hspace="20" vspace="5" style=" float:left;"/>
<div style=" float:left; padding: 5px;"> Retrieving all the required information based on your selection.This may take a few moments. Please wait...</div>
</div>