Netra77 Posted May 1, 2020 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.
Sensei Posted May 1, 2020 Posted May 1, 2020 On 5/1/2020 at 4:36 AM, Netra77 said: <img src="sth.jpg> Expand Lack of ending double-quotation mark. It should be: <img src="sth.jpg">
Netra77 Posted May 1, 2020 Author Posted May 1, 2020 On 5/1/2020 at 5:25 AM, Sensei said: Lack of ending double-quotation mark. It should be: <img src="sth.jpg"> Expand Yeah i have written double quotation in my actual code but i have forget to write it in above code
Sensei Posted May 1, 2020 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. On 5/1/2020 at 5:28 AM, Netra77 said: Yeah i have written double quotation in my actual code but i have forget to write it in above code Expand 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
Strange Posted May 1, 2020 Posted May 1, 2020 On 5/1/2020 at 4:36 AM, 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 Expand 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.) On 5/1/2020 at 4:36 AM, 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?? Expand Because you are doing something wrong.
Netra77 Posted May 1, 2020 Author 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
Strange Posted May 1, 2020 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: On 5/1/2020 at 8:01 AM, Netra77 said: <img src="C:\Users\lenovo\Documents\html documents\ian.jpg" height="370" width="300Jump to search/><br> Expand 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.
Netra77 Posted May 1, 2020 Author Posted May 1, 2020 Code works for you means??have you been able to style class "top"??
Strange Posted May 1, 2020 Posted May 1, 2020 On 5/1/2020 at 8:21 AM, Netra77 said: Code works for you means??have you been able to style class "top"?? Expand Yes. It was blue, I changed the css and now it is red. What browser are you using?
Strange Posted May 1, 2020 Posted May 1, 2020 On 5/1/2020 at 8:44 AM, Netra77 said: Google chrome.What did you use?? Expand 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.
Sensei Posted May 1, 2020 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? On 5/1/2020 at 8:01 AM, Netra77 said: body {background-image:ian.jpg; Expand 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
Netra77 Posted May 1, 2020 Author Posted May 1, 2020 On 5/1/2020 at 8:53 AM, 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. Expand Sorry i mean to say before On 5/1/2020 at 8:54 AM, 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 Expand Thank you i will try it and give you my answer
Sensei Posted May 1, 2020 Posted May 1, 2020 On 5/1/2020 at 8:53 AM, 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. Expand 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.
Strange Posted May 1, 2020 Posted May 1, 2020 On 5/1/2020 at 4:36 AM, 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?? Expand Are you sure this is correct? Is it, perhaps, class "abc" that you cannot style (because of the error described above)?
Netra77 Posted May 1, 2020 Author Posted May 1, 2020 On 5/1/2020 at 9:21 AM, Strange said: Are you sure this is correct? Is it, perhaps, class "abc" that you cannot style (because of the error described above)? Expand On 5/1/2020 at 9:21 AM, Strange said: Are you sure this is correct? Is it, perhaps, class "abc" that you cannot style (because of the error described above)? Expand Yeah you are right.Actually its abc On 5/1/2020 at 8:54 AM, 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 Expand Thank you i will try it and give you my answer On 5/1/2020 at 9:17 AM, 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. Expand Yeah i get you On 5/1/2020 at 5:25 AM, Sensei said: Lack of ending double-quotation mark. It should be: <img src="sth.jpg"> Expand Can you tell me how to create line break between image and paragraph?? On 5/1/2020 at 9:21 AM, Strange said: Are you sure this is correct? Is it, perhaps, class "abc" that you cannot style (because of the error described above)? Expand 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??
Strange Posted May 1, 2020 Posted May 1, 2020 On 5/1/2020 at 9:22 AM, 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?? Expand 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.
Netra77 Posted May 1, 2020 Author Posted May 1, 2020 On 5/1/2020 at 9:41 AM, 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. Expand 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??
Sensei Posted May 1, 2020 Posted May 1, 2020 On 5/1/2020 at 9:22 AM, 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?? Expand I just wrote about it this morning.
Netra77 Posted May 1, 2020 Author 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??
Sensei Posted May 1, 2020 Posted May 1, 2020 On 5/1/2020 at 9:52 AM, 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?? Expand 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.
Netra77 Posted May 1, 2020 Author Posted May 1, 2020 On 5/1/2020 at 9:55 AM, 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. Expand Ok .thanks
Strange Posted May 1, 2020 Posted May 1, 2020 On 5/1/2020 at 9:52 AM, 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?? Expand 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
Netra77 Posted May 1, 2020 Author Posted May 1, 2020 On 5/1/2020 at 10:50 AM, 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 Expand Thanks i will check this website
Sensei Posted May 1, 2020 Posted May 1, 2020 (edited) On 5/1/2020 at 7:48 AM, Strange said: Are you using an editor that checks the syntax of the html and css code? Expand @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
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