Netra77 Posted May 1, 2020 Share Posted May 1, 2020 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. Link to comment Share on other sites More sharing options...
Sensei Posted May 1, 2020 Share Posted May 1, 2020 49 minutes ago, Netra77 said: <img src="sth.jpg> Lack of ending double-quotation mark. It should be: <img src="sth.jpg"> Link to comment Share on other sites More sharing options...
Netra77 Posted May 1, 2020 Author Share Posted May 1, 2020 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 Link to comment Share on other sites More sharing options...
Sensei Posted May 1, 2020 Share Posted May 1, 2020 (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 May 1, 2020 by Sensei Link to comment Share on other sites More sharing options...
Strange Posted May 1, 2020 Share Posted May 1, 2020 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. Link to comment Share on other sites More sharing options...
Netra77 Posted May 1, 2020 Author Share Posted May 1, 2020 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 Link to comment Share on other sites More sharing options...
Strange Posted May 1, 2020 Share Posted May 1, 2020 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. Link to comment Share on other sites More sharing options...
Netra77 Posted May 1, 2020 Author Share Posted May 1, 2020 Code works for you means??have you been able to style class "top"?? Link to comment Share on other sites More sharing options...
Strange Posted May 1, 2020 Share Posted May 1, 2020 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? Link to comment Share on other sites More sharing options...
Netra77 Posted May 1, 2020 Author Share Posted May 1, 2020 Google chrome.What did you use?? Link to comment Share on other sites More sharing options...
Strange Posted May 1, 2020 Share Posted May 1, 2020 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. Link to comment Share on other sites More sharing options...
Sensei Posted May 1, 2020 Share Posted May 1, 2020 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: 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;} 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 1 Link to comment Share on other sites More sharing options...
Netra77 Posted May 1, 2020 Author Share Posted May 1, 2020 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: 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;} 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 Link to comment Share on other sites More sharing options...
Sensei Posted May 1, 2020 Share Posted May 1, 2020 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: 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. Link to comment Share on other sites More sharing options...
Strange Posted May 1, 2020 Share Posted May 1, 2020 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)? Link to comment Share on other sites More sharing options...
Netra77 Posted May 1, 2020 Author Share Posted May 1, 2020 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: 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;} 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: 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?? Link to comment Share on other sites More sharing options...
Strange Posted May 1, 2020 Share Posted May 1, 2020 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. Link to comment Share on other sites More sharing options...
Netra77 Posted May 1, 2020 Author Share Posted May 1, 2020 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?? Link to comment Share on other sites More sharing options...
Sensei Posted May 1, 2020 Share Posted May 1, 2020 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. Link to comment Share on other sites More sharing options...
Netra77 Posted May 1, 2020 Author Share Posted May 1, 2020 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?? Link to comment Share on other sites More sharing options...
Sensei Posted May 1, 2020 Share Posted May 1, 2020 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. Link to comment Share on other sites More sharing options...
Netra77 Posted May 1, 2020 Author Share Posted May 1, 2020 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 Link to comment Share on other sites More sharing options...
Strange Posted May 1, 2020 Share Posted May 1, 2020 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 Link to comment Share on other sites More sharing options...
Netra77 Posted May 1, 2020 Author Share Posted May 1, 2020 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 Link to comment Share on other sites More sharing options...
Sensei Posted May 1, 2020 Share Posted May 1, 2020 (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 May 1, 2020 by Sensei Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now