School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Programming Help

Web Development



What's Here?

  • Members: 300,406
  • Replies: 825,998
  • Topics: 137,452
  • Snippets: 4,419
  • Tutorials: 1,148
  • Total Online: 1,647
  • Members: 123
  • Guests: 1,524

Welcome to Dream.In.Code
Become an Expert!

Join 300,406 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,647 people online right now. Registration is fast and FREE... Join Now!




CSS display help

 

CSS display help
dumbstruckk

1 Jun, 2009 - 02:16 PM
Post #1

New D.I.C Head
*

Joined: 13 Jul, 2008
Posts: 18
Hi guys! I am just having trouble making a paragraph become hidden. I know that you have to use the display property but i don't know how to do it because the <p> code is inside a <div> code.

here is the html:
CODE

<div id="links">
<p>
Here are some nearby pages:
</p>
<ul>
  <li><a href="home.html">Home</a></li>
  <li><a href="products.html">Products</a></li>
  <li><a href="service.html">Service</a></li>
  <li><a href="help.html">Help</a></li>
</ul>
</div>


and my css:
CODE

div#links {
    float: right;
    background-color: #A9A9F5;
    width: 20%
}
p.links {
    display:none;
}


I want the links as a sidebar and the first sentence hidden. Thank you for your help!:)

User is offlineProfile CardPM
+Quote Post


crazyjugglerdrummer

RE: CSS Display Help

1 Jun, 2009 - 04:04 PM
Post #2

YOUR AD HERE
Group Icon

Joined: 7 Jan, 2009
Posts: 677



Thanked: 94 times
Dream Kudos: 425
My Contributions
If you select the paragraph by id, it won't matter where it is in the document, the style will be applied. The . selector refers to the class attribute, so you're actually selecting all of the p's with classes of "links".

just use:
CODE

<div id="links">
<p id="myparagraph">
Here are some nearby pages:
</p>
<ul>
  <li><a href="home.html">Home</a></li>
  <li><a href="products.html">Products</a></li>
  <li><a href="service.html">Service</a></li>
  <li><a href="help.html">Help</a></li>
</ul>
</div>


and the style

#myparagraph {
display: none;
}

oh, for future ref we have an html and css forum (see link on left in web dev) biggrin.gif

welcome to dIC!!!!!!!! smile.gif
User is offlineProfile CardPM
+Quote Post

dumbstruckk

RE: CSS Display Help

2 Jun, 2009 - 09:41 AM
Post #3

New D.I.C Head
*

Joined: 13 Jul, 2008
Posts: 18
Thank you for the welcome. And sorry I was looking for the CSS part of the forum but I couldn't find it. I was looking for it under programming help and didn't check the others blink.gif my fault. hehe

Oh is it possible to make the words under the <p> tag disappear without changing the html? change only the css?
User is offlineProfile CardPM
+Quote Post

BetaWar

RE: CSS Display Help

2 Jun, 2009 - 09:58 AM
Post #4

#include <soul.h>
Group Icon

Joined: 7 Sep, 2006
Posts: 4,729



Thanked: 269 times
Dream Kudos: 1400
My Contributions
Yes, you can make things dissappear:

CODE

display: none;

^ CSS

That will hide stuff. The problem is getting is back visible, for that you will have to use Javascript for realtime (or you can take that out to make it visible again, but that requires editing the page).

Hope that makes sense.

Moved to HTML/CSS
User is offlineProfile CardPM
+Quote Post

gregwhitworth

RE: CSS Display Help

2 Jun, 2009 - 11:52 AM
Post #5

(this).problem + "sucks";
Group Icon

Joined: 20 Jan, 2009
Posts: 1,131



Thanked: 82 times
Dream Kudos: 50
Expert In: HTML, CSS, Web Design

My Contributions
QUOTE
The problem is getting is back visible, for that you will have to use Javascript for realtime


Not necessarily -

CODE


#id:hover {
   display: block;}
User is offlineProfile CardPM
+Quote Post

dumbstruckk

RE: CSS Display Help

2 Jun, 2009 - 03:21 PM
Post #6

New D.I.C Head
*

Joined: 13 Jul, 2008
Posts: 18
QUOTE(BetaWar @ 2 Jun, 2009 - 09:58 AM) *

Yes, you can make things dissappear:

CODE

display: none;

^ CSS

That will hide stuff. The problem is getting is back visible, for that you will have to use Javascript for realtime (or you can take that out to make it visible again, but that requires editing the page).

Hope that makes sense.

Moved to HTML/CSS


Hi, yes it does. But if I just put display: none;, the whole sidebar would disappear. I only want the words in the <p> tag to disappear. And the <p> tag is inside the <div> tag. And we can't change the html. I don't know how to "select" only the <p> tags to disappear. I'm sorry if its confusing, i don't know how to explain it o_o

User is offlineProfile CardPM
+Quote Post

gregwhitworth

RE: CSS Display Help

2 Jun, 2009 - 07:33 PM
Post #7

(this).problem + "sucks";
Group Icon

Joined: 20 Jan, 2009
Posts: 1,131



Thanked: 82 times
Dream Kudos: 50
Expert In: HTML, CSS, Web Design

My Contributions
It kind of works like the dom of javascript if you're used to that:

CODE


div#id p {
    display: none;}



You can call specific p classes as well

CODE

div#id p.noDisplay {
     display: none;}


Note: You don't have to have the word div there - this just makes it so that it will only apply this style to a div with your specific id.
User is offlineProfile CardPM
+Quote Post

dumbstruckk

RE: CSS Display Help

2 Jun, 2009 - 11:25 PM
Post #8

New D.I.C Head
*

Joined: 13 Jul, 2008
Posts: 18
QUOTE(gregwhitworth @ 2 Jun, 2009 - 07:33 PM) *

It kind of works like the dom of javascript if you're used to that:

CODE


div#id p {
    display: none;}



You can call specific p classes as well

CODE

div#id p.noDisplay {
     display: none;}


Note: You don't have to have the word div there - this just makes it so that it will only apply this style to a div with your specific id.


Thanks for your help! I was able to get it to work smile.gif
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/7/09 10:54PM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month