Solved

jQuery DIV box colors and sizes

Posted on 2016-09-12
8
56 Views
Last Modified: 2016-09-12
I had this question after viewing jQuery Generalization.

Can I ask you one variation?  How can I have the appearing DIV to show a border of say n Pixels thick and a specified color.
0
Comment
Question by:Howard Bash
  • 4
  • 4
8 Comments
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41794203
Try this
Assuming the code from the sample in the referred question you can try adding this to your CSS
.main-menu + div {
  display: none;
  border: 3px solid black; /* ADD BORDER */
  overflow: hidden;  /* MAKE BOX EXTEND AROUND ALL CONTENT */
}

Open in new window

0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41794226
Would it be possible to have the box rounded?  Also,  it seems that the boxes have more height than the contents require.  Is that something in my DIVs and/or can that be made dynamic?
0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41794265
I think I got it!
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41794306
rounded box
add
.main-menu + div {
  display: none;
  border: 3px solid black; /* ADD BORDER */
  border-radius: 10px;
  overflow: hidden;  /* MAKE BOX EXTEND AROUND ALL CONTENT */
}

Open in new window

0
 
LVL 1

Author Comment

by:Howard Bash
ID: 41794318
Yes.  I have that now.  Thanks...
You're an HTML/CSS GURU!!!!

Can you point me at any tutorials/books/URLs where I can develop my HTML/CSS skills?

Thanks,
H
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41794352
I don't personally have any I can recommend. I mainly use online resources W3Schools / MDN etc.
0
 
LVL 1

Author Closing Comment

by:Howard Bash
ID: 41794359
Great
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41794507
You are welcome.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question