Reputation: 62
I have the following page:
HTML:
<div class=main>
<div class=bttn>
<button>abcdef</div>
<div class=content>
<a href=#!>jksg</a>
<a href=#!>jksg</a>
<a href=#!>jksg</a>
<a href=#!>jksg</a>
</div>
</div>
<button>abcdef
<button>abcdef
<button>abcdef
</div>
CSS :
button {
border: 3px solid red;
border-collapse: collapse;
padding: 16px;
background-color: blue;
width: 25%;
margin: 0px -1px 0px -1px display: inline;
}
.content {
display: none;
}
.bttn + .content {
display: none;
}
.bttn:hover + .content {
display: block;
}
when you run the code, the first button appears alone on the line while the rest of them arrange themselves on the next line side by side. i guess the same will happen if i insert the hidden div's on the other buttons. Any ways to change that?? I changed the display of button (the tag), bttn (the class) and content(the class) all to inline but still the problem persists. I think the problem may be of the position property but i am not sure. If thats the case pls also tell me whats going wrong here.
Upvotes: 1
Views: 5250
Reputation: 4783
Not all tags in HTML need to have a closing tag, but <button>
is definitely one of them. Also, as was pointed out in the comments, only one of the two selectors with display: none;
are necessary for this snippet, so I removed one of them.
button {
border: 3px solid red;
border-collapse: collapse;
padding: 16px;
background-color: blue;
width: 25%;
margin: 0px -1px 0px -1px;
display: inline;
}
.bttn + .content {
display: none;
}
.bttn:hover + .content {
display: block;
}
<div class="main">
<div class="bttn"><button>abcdef</button></div>
<div class="content">
<a href="#">jksg</a>
<a href="#">jksg</a>
<a href="#">jksg</a>
<a href="#">jksg</a>
</div>
</div>
<button>abcdef</button><button>abcdef</button><button>abcdef</button>
As a side note, I've changed the HTML to include quotes. It may not be necessary for attributes without spaces (unless you're using an XHTML doctype), but consistency is important - forming good habits prevents a lot of future human errors and code is easier to modify later. You'll find that alternating double/single quotes are preferred in situations where HTML and JS are mixed:
<button onclick="alert('hey');">
element.innerHTML = '<div class="my-div">hey</div>';
...If you change the quotes in either of these examples, it changes how the code/markup is interpreted. So, if you want to stay consistent, choose one for markup and one for JS code, then stick to it. Though, I think you'll find double quotes are used more often in HTML and single quotes in JS.
UPDATE: I just wanted to note that if you ever use data-* attributes that contain JSON, double quotes in HTML become a problem. This might be the best argument I've found for doing the opposite of the "standard" outlined above. However, you should still always have quotes of some sort
Upvotes: 1
Reputation: 26
You need to close your <button>
tag on the second line and at the bottom. I have rectified your code below, which works fine for me now? I've also added speech marks around your "#" in the anchor.
<div class = main>
<div class = bttn><button>abcdef</button></div>
<div class = content>
<a href = "#">jksg</a>
<a href = "#">jksg</a>
<a href = "#">jksg</a>
<a href = "#">jksg</a>
</div>
</div>
<button>abcdef</button>
<button>abcdef</button>
<button>abcdef</button>
Upvotes: 1
Reputation:
This will get you showing your buttons all on one line
https://jsfiddle.net/2wwfxfqy/1/
But you now have the problem of how to get your hidden content not force the other 3 down a line when you choose to display it.
Here is the CSS mod made so far
.main button,
.bttn button {
float:left;
}
Upvotes: 2