Jump to content
Netra77

Unable to edit paragraph tag which comes after image tag

Recommended Posts

Why i am unable to style paragraph tag which comes after image tag??i am trying to style my paragraph using external style sheet but i am unable to style paragraph which comes just after img tag

Here is my html code.Its similar to my html code 

<html>

<head> </head>

<body>

<p class="abc">sth</p>

<p class="xyz">sth</p>

<img src="sth.jpg>

<p class="top">sth sth sth</p>

</body>

 

So,here i am able to style paragraph of class xyz and abc but i am unable to style paragraph of class top.Why's that??

Actually i want to style color:red; of that paragraph using external style sheet.pls do suggest me effective logic.

Share this post


Link to post
Share on other sites
49 minutes ago, Netra77 said:

<img src="sth.jpg>

Lack of ending double-quotation mark. It should be:

<img src="sth.jpg">

 

Share this post


Link to post
Share on other sites
2 minutes ago, Sensei said:

Lack of ending double-quotation mark. It should be:

<img src="sth.jpg">

 

Yeah i have written double quotation in my actual code but i have forget to write it in above code

Share this post


Link to post
Share on other sites
Posted (edited)

BTW, you can replace the <img> tag by <div> or <span> tags, with id and/or class attributes, and then control the image URI from inside of the CSS file (using background-image property), instead of encoding it permanently it in HTML.

47 minutes ago, Netra77 said:

Yeah i have written double quotation in my actual code but i have forget to write it in above code

Then attach your the real code...
We need to be able to see what you see on your browser's.

Did you try float: none etc. ?

https://www.w3schools.com/css/css_float.asp

It controls whether the next section (in your case paragraph) after the image will be on the right, left, or below etc.

Also worth trying, if you have not already, clear and overflow properties in CSS:

https://www.w3schools.com/css/css_float_clear.asp

https://www.w3schools.com/css/css_overflow.asp

 

Edited by Sensei

Share this post


Link to post
Share on other sites
3 hours ago, Netra77 said:

Why i am unable to style paragraph tag which comes after image tag??i am trying to style my paragraph using external style sheet but i am unable to style paragraph which comes just after img tag

You need to show the HTML code (the actual HTML code).

You need to show the CSS code you are using.

Otherwise how can anyone help? They can only guess what the problem might be. Maybe you have a syntax error in your css code. Maybe you have specified the target paragraph wrongly. Are you using an editor that checks the syntax of the html and css code?

(And, as an aside, it would be polite to acknowledge answers to questions and let people know if they helped or not. Just moving on to another questions without a "thank you" or any sort of reply to answers might eventually make people unwilling to help you.)

3 hours ago, Netra77 said:

So,here i am able to style paragraph of class xyz and abc but i am unable to style paragraph of class top.Why's that??

Because you are doing something wrong.

Share this post


Link to post
Share on other sites

okay here is my html code and my css code

html>
<head>
<link href="C:\Users\lenovo\Documents\html documents\stylesheet.css" 
type="text/css"
rel="stylesheet">
<title>new link</title>
</head>
<body>
<div>

<h1>what the hell is happening in planet
</h1><br><img src="C:\Users\lenovo\Documents\html documents\ian.jpg" height="370" width="300Jump to search/><br>
<p class="abc">Ian Somerhalder is born in 2015
Born
Ian Joseph Somerhalder
December 8, 1978 (age 41)
Covington, Louisiana, U.S.
Occupation
Actor, model, activist, director
Years active
1997–present
Spouse(s)
Nikki Reed (m. 2015)
Children
1
</p>

<img src="C:\Users\lenovo\Documents\html documents\ian.jpg" height="370" width="300">
<p class="top">Ian Joseph Somerhalder[1] (born December 8, 1978)[2] is an American actor, model, activist and director.[3] He is known for playing Boone Carlyle in the TV drama Lost, Damon Salvatore in The CW's supernatural drama The Vampire Diaries and Dr. Luther Swann in Netflix's sci-fi horror series V Wars
</p>
</div>
<br>
<a href="first.html">click here</a>
</body>
</html>

 

css code

body {background-image:ian.jpg;
background-color:red;

}

.abc{color:blue;}

.top{color:blue;}

 

so i am unable to style tag having class name" top".i am not trying to be rude with you guys.i have been sending thanks personally to the people who are helping me

 

Share this post


Link to post
Share on other sites

That code works correctly for me: both paragraphs have blue text, and changing the definition of 'top' in the css file changes the style of that paragraph.

Maybe the problem is that "top" is a keyword in css. Some browsers might have a problem because of that. Maybe. You could try changing the name of the class.

Something went wrong here: 

17 minutes ago, Netra77 said:

<img src="C:\Users\lenovo\Documents\html documents\ian.jpg" height="370" width="300Jump to search/><br>

But that isn't relevant.

Also, you should use relative URLs for the css file and images. Otherwise, when you move the file somewhere else (e.g. a web server) it won't work.

Share this post


Link to post
Share on other sites

Code works for you means??have you been able to style class "top"??

Share this post


Link to post
Share on other sites
11 minutes ago, Netra77 said:

Code works for you means??have you been able to style class "top"??

Yes. It was blue, I changed the css and now it is red. 

What browser are you using?

Share this post


Link to post
Share on other sites
11 minutes ago, Netra77 said:

Google chrome.What did you use??

Safari, Chrome and Firefox

So I am completely baffled by this.

By the way, you said: " i am unable to style paragraph which comes just after img tag" But that is obviously not the problem as you ara able to style "abc" which also comes after an image tag.

Share this post


Link to post
Share on other sites

You should pack entire folder to zip and attach in reply. Not copy'n'paste code..

 

Anyway. Here is how it looks on my Firefox:

450049884_Grab1.thumb.png.af874cbefbba3ffc4369606a1ae8fae5.png

 

After changing error mentioned by Strange in line 12 to:


</h1><br><img src="ian.jpg" height="370" width="300">

and changing line in CSS file to:

.top{color:yellow;}

33258943_Grab2.thumb.png.722c72ca47314a17ad2007af3fa55c98.png

 

How it should looks like?

How it looks like on your machine/browser?

 

55 minutes ago, Netra77 said:

body {background-image:ian.jpg;

There is yet another error...

It requires url( 'filename' );

See how to use this property properly:

https://www.w3schools.com/cssref/pr_background-image.asp

 

Share this post


Link to post
Share on other sites
3 minutes ago, Strange said:

Safari, Chrome and Firefox

So I am completely baffled by this.

By the way, you said: " i am unable to style paragraph which comes just after img tag" But that is obviously not the problem as you ara able to style "abc" which also comes after an image tag.

Sorry i mean to say before 

3 minutes ago, Sensei said:

You should pack entire folder to zip and attach in reply. Not copy'n'paste code..

 

Anyway. Here is how it looks on my Firefox:

450049884_Grab1.thumb.png.af874cbefbba3ffc4369606a1ae8fae5.png

 

After changing error mentioned by Strange in line 12 to:


</h1><br><img src="ian.jpg" height="370" width="300">

and changing line in CSS file to:

.top{color:yellow;}

33258943_Grab2.thumb.png.722c72ca47314a17ad2007af3fa55c98.png

 

How it should looks like?

How it looks like on your machine/browser?

 

There is yet another error...

It requires url( 'filename' );

See how to use this property properly:

https://www.w3schools.com/cssref/pr_background-image.asp

 

Thank you i will try it and give you my answer

Share this post


Link to post
Share on other sites
18 minutes ago, Strange said:

Safari, Chrome and Firefox

So I am completely baffled by this.

By the way, you said: " i am unable to style paragraph which comes just after img tag" But that is obviously not the problem as you ara able to style "abc" which also comes after an image tag.

If we enter developer mode in web browser we can see reason for errors e.g. which resources are missing, improperly closed tags etc.

Firefox showed me this:

1750506578_Grab3.thumb.png.e62d0dada2bfb42b052547b3caff6140.png

 

Do you understand? Browser MERGED these three tags together interpreting them as one..

.abc class should be BLUE, according to CSS, but on my 1st screen-shot it is BLACK. Web browser didn't find <p class="abc"> as tag due to improperly closed double-quotes in <img> tag.

 

Share this post


Link to post
Share on other sites
4 hours ago, Netra77 said:

So,here i am able to style paragraph of class xyz and abc but i am unable to style paragraph of class top.Why's that??

Are you sure this is correct? Is it, perhaps, class "abc" that you cannot style (because of the error described above)?

Share this post


Link to post
Share on other sites
Just now, Strange said:

Are you sure this is correct? Is it, perhaps, class "abc" that you cannot style (because of the error described above)?

1 minute ago, Strange said:

Are you sure this is correct? Is it, perhaps, class "abc" that you cannot style (because of the error described above)?

Yeah you are right.Actually its abc

27 minutes ago, Sensei said:

You should pack entire folder to zip and attach in reply. Not copy'n'paste code..

 

Anyway. Here is how it looks on my Firefox:

450049884_Grab1.thumb.png.af874cbefbba3ffc4369606a1ae8fae5.png

 

After changing error mentioned by Strange in line 12 to:


</h1><br><img src="ian.jpg" height="370" width="300">

and changing line in CSS file to:

.top{color:yellow;}

33258943_Grab2.thumb.png.722c72ca47314a17ad2007af3fa55c98.png

 

How it should looks like?

How it looks like on your machine/browser?

 

There is yet another error...

It requires url( 'filename' );

See how to use this property properly:

https://www.w3schools.com/cssref/pr_background-image.asp

 

Thank you i will try it and give you my answer

5 minutes ago, Sensei said:

If we enter developer mode in web browser we can see reason for errors e.g. which resources are missing, improperly closed tags etc.

Firefox showed me this:

1750506578_Grab3.thumb.png.e62d0dada2bfb42b052547b3caff6140.png

 

Do you understand? Browser MERGED these three tags together interpreting them as one..

.abc class should be BLUE, according to CSS, but on my 1st screen-shot it is BLACK. Web browser didn't find <p class="abc"> as tag due to improperly closed double-quotes in <img> tag.

 

Yeah i get you

4 hours ago, Sensei said:

Lack of ending double-quotation mark. It should be:

<img src="sth.jpg">

 

Can you tell me how to create line break between image and paragraph??

9 minutes ago, Strange said:

Are you sure this is correct? Is it, perhaps, class "abc" that you cannot style (because of the error described above)?

Can you tell me how to create line break between img and paragraph becoz simple line break tag like<br> doesn't work when it comes to create line break between img and paragraph??

Share this post


Link to post
Share on other sites
19 minutes ago, Netra77 said:

Can you tell me how to create line break between img and paragraph becoz simple line break tag like<br> doesn't work when it comes to create line break between img and paragraph??

There are several things you can do. The simplest is probably to put the image inside <div></div>. This is, be default, a "block" element; in other words, creates a new paragraph. (</br> only works within a <p> element)

You can also specify "align=..." for the image. But I can't remember off the top of my head how this interacts with paragraph layouts.

There are also a lot of options in CC for controlling the layout. You could set display="block" for the image, for example.

Share this post


Link to post
Share on other sites
1 minute ago, Strange said:

There are several things you can do. The simplest is probably to put the image inside <div></div>. This is, be default, a "block" element; in other words, creates a new paragraph. (</br> only works within a <p> element)

You can also specify "align=..." for the image. But I can't remember off the top of my head how this interacts with paragraph layouts.

There are also a lot of options in CC for controlling the layout. You could set display="block" for the image, for example.

Thank you i have been able to solve my problem.Again let me ask you one question,if i put inline element inside block .Does it make that inline element as block and creates automatically line break with other block element??

Share this post


Link to post
Share on other sites
25 minutes ago, Netra77 said:

Can you tell me how to create line break between img and paragraph becoz simple line break tag like<br> doesn't work when it comes to create line break between img and paragraph??

I just wrote about it this morning.

 

Share this post


Link to post
Share on other sites

Thank you i have been able to create line break using code<br clear="all"/>but i don't know what that means.have you knew about it??

Share this post


Link to post
Share on other sites
1 minute ago, Netra77 said:

Thank you i have been able to create line break using code<br clear="all"/>but i don't know what that means.have you knew about it??

No. The proper, modern, CSS-way is to do it inside of CSS file.

And you should read and use CSS properties float, clear, overflow for such task.

Read post from this morning. And the all links that I gave. There are examples of usage of these CSS properties.

 

Share this post


Link to post
Share on other sites
1 minute ago, Sensei said:

No. The proper, modern, CSS-way is to do it inside of CSS file.

And you should read and use CSS properties float, clear, overflow for such task.

Read post from this morning. And the all links that I gave. There are examples of usage of these CSS properties.

 

Ok .thanks

Share this post


Link to post
Share on other sites
53 minutes ago, Netra77 said:

Thank you i have been able to create line break using code<br clear="all"/>but i don't know what that means.have you knew about it??

That works because of the clear="all" not because of the <br/>. You could put clear="all" in the <p> tase and it should have the same effect. That is really intended to be used after "float" elements (I think images float unless you specify the alignment). But, as Sensei says, you should really do this in the CSS, rather than the HTML.

It can be very confusing trying to learn these things by trial and error. I would look for a good tutorial online, to get a more structured approach. You can usually find good lessons/blog posts on individual features (such as layout, colours, boxes, blocks vs inline elements, etc).

The W3Schools website is a good resource with tutorials and reference material on how things work: https://www.w3schools.com

Share this post


Link to post
Share on other sites
1 minute ago, Strange said:

That works because of the clear="all" not because of the <br/>. You could put clear="all" in the <p> tase and it should have the same effect. That is really intended to be used after "float" elements (I think images float unless you specify the alignment). But, as Sensei says, you should really do this in the CSS, rather than the HTML.

It can be very confusing trying to learn these things by trial and error. I would look for a good tutorial online, to get a more structured approach. You can usually find good lessons/blog posts on individual features (such as layout, colours, boxes, blocks vs inline elements, etc).

The W3Schools website is a good resource with tutorials and reference material on how things work: https://www.w3schools.com

Thanks i will check this website

Share this post


Link to post
Share on other sites
Posted (edited)
3 hours ago, Strange said:

Are you using an editor that checks the syntax of the html and css code?

@Netra77

Listen Strange (and me) and download text editor for programmers and webmasters. I am recommending ConTEXT.

http://www.contexteditor.org/downloads/

It will highlight properties, attributes, tags etc.

If they are improperly entered, highlighted is entire text below troublesome area.

Edited by Sensei

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.