So I am currently making a blog and I wanted an image on the top left corner of the webpage, and right next to it I wanted a h1 tag right next to it. I tried using the span tags but they aren't working, any reason why my code isn't working? Do I need to learn css so I can properly position the text to be right next to the image?
<span>
<img src="Blocks.jpg" width="100" height="100" alt="This image cannot load"><h1>TheCyberJournalist</h1>
</span>
Of course, to do that you have to use a very simple css.
Something like this is working:
<span style="display: flex;">
<img src="Blocks.jpg" width="100" height="100" alt="This image cannot load"><h1>TheCyberJournalist</h1>
</span>
h1 element has display: block property - you need to change the display property into inline
<span>
<img src="https://media.newswest9.com/assets/CCT/images/20f11c7a-0e95-4440-af3a-1926cfb5e15a/20f11c7a-0e95-4440-af3a-1926cfb5e15a_360x203.jpg" width="150" height="100" alt="This image cannot load"><h1 style="display: inline">TheCyberJournalist</h1>
</span>
Related
i decided to make redirects with images but i have small problem.
Look at this screen:
https://i.stack.imgur.com/eEnNB.png
This is this item:
<p><div><a title="Home" href="/home"><img src="/icons/home.svg" width="55" height="55" /></a></div></p>
It shows strange rectangle, i dont want to show it. Do you have any ideas?
That outline is an accessibility feature (Which might be added as part of a CSS theme, but hard to know without the full context of the codebase). However, removing it is not a good idea, as it will worsen the experience for people with visibility impairment (Check http://www.outlinenone.com/).
What we can do, however, is make it look better. You have a <div> with a <a> nested in a <p>, it being the reason for the rectangle not encasing the whole icon and instead overlapping on top of it, as it believes it to be an inline element (Ideally, you don't want to use block elements in p tags). Here, you're getting block elements, such as a <div> and an <img> inside of the <p>). So what I recommend is:
Remove <p> and <div>, and leave it only wrapped in the <a>
Add the display: inline-block CSS property to the <a> tag, resulting in:
<a style="display:inline-block;" title="Home" href="/home">
<img src="/icons/home.svg" width="55" height="55" />
</a>
If you want a block element, simply remove the <p> tag:
<div>
<a title="Home" href="/home">
<img src="/icons/home.svg" width="55" height="55" />
</a>
</div>
Without full context it will be difficult to answer but:
Try to set a element display:block or display:inline-block
Try to set IMG width and height as style="width:55px;height:55px"
Add display: inline-block to the <a> tag
<p>
<div>
<a style="display:inline-block" title="Home" href="/home">
<img src="https://media.istockphoto.com/id/1357549139/photo/shot-of-an-adorable-baby-boy-wearing-a-hoody-towel.webp?s=612x612&w=is&k=20&c=MvuPLKqQhs7f6ZIsPf8oTgw08OiCvmmjJNeNdL0FG4M=" width="55" height="55" />
</a>
</div>
</p>
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">
+-------------------------------------------------------------------------------+
|*************** HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH|
|*************** HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH|
|*************** PPPPPPPPPPPPPPPPPPPPPPPPPPP |
|*************** |
|TTTTTTTTTTTTTTTTTTTTTTTT |
| |
|-------------------------------------------------------------------------------+
Sorry for the sketch here. I tried to attach a screen shot, but I couldn't get it to show up. (I'll try to fix it later on another computer if this doesn't explain enough)
EDIT: This might help visualize it... http://jsfiddle.net/T3y6E/embedded/result/
I have a <div> on a personal web page I am working on. The * represent an image placement. The "H" represent a title placement. The "T" represent a slogan placement. I am trying to move the slogan over so that it is directly below the Title (wanted placement represented by "P")
Here is my HTML for this portion of the page:
<div class="logo-image">
<img src="~/Images/Atlas.png" height="125" width="150" alt="Atlas Logo" />
<img style="vertical-align:top" src="~/Images/WebPageLogo.png" height="85" width="820" alt="Atlas Logo" />
<div style="color:#FFF">*A southpaw's approach to bowling*</div>
</div>
Here is css that affects it:
.logo-image {
float: left;
margin: 0px 20px 0px 0px;
}
The effect you're looking for is float. It must be applied to the element you want to be floating, in this case the first image. And the element (with float) must be placed before the element you want it to float from, in your case the title and slogan.
I've created a fiddle with your code to show the concept: http://jsfiddle.net/3xV5Z/1/
Just a reminder: Your slogan is too big. Float won't work well with it if you don't manage your images width.
My answer is very similar to LcSalazar's. It uses your css.
<div>
<span class="logo-image">
<img src="http://placekitten.com/150/125" height="125" width="150" alt="Atlas Logo" />
</span>
<img style="vertical-align:top" src="http://placekitten.com/820/85" height="85" width="820" alt="Atlas Logo" />
<div>*A southpaw's approach to bowling*</div>
</div>
Inside a long cell I have a image aligned to the left. Fine. Now I would like to insert a label right of the image that is aligned to the very right. When I try this the label appears always directly next to the image, hence isn't shifted to the very right, to the cell's end.
I tried variants of:
<img align="left" src="..." /><span align="right"><label>Mytext</label></span>
But the text is never shifted to the very right, it always stays directly next to the image.
Any ideas?
EDIT:
Fixed with:
<img align="left" src="..." /><span style="float:right"><label>Mytext</label></span>
Change
<span alignment="right">
to
<span style="float:right">
jsFiddle example
There is no "alignment" attribute so use just plain old CSS.
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>