I created a menu. But instead of using a list I used several divs and spans which look like this:
<div id="forms">
<span class="formsLi">Einloggen<cfinclude template="login.cfm" /></span>
<span class="formsLi">Registrieren<cfinclude template="forms/register.cfm" /></span>
</div>
With the "cfinclude" I insert two forms which are both inside a div, having the class "format". Here is the css file for my menu:
#forms{
background-color: silver;,
border: 1px solid black;
margin: 0;
padding: 0.8em;
}
#forms .formsLi{
background-color: orange;
margin-left: 10px;
padding: 10px;
}
#forms .formsLi .format{
border: 1px solid black;
display: none;
float: left;
}
#forms .formsLi:hover{
background-color: black;
color: white;
}
#forms .formsLi:hover #forms .formsLi .format{
display: block;
}
I want to change the display of my included forms when hovering over one of the "formsLi" elements. The hover does work, but the last css rule doesn't change the display of the divs.
You are repeating your selectors. Use this:
#forms .formsLi:hover .format{
display: block;
}
Related
My second inner div position is weirdly adjusted when my first inner div have a long link text. How to fix it?
My html code:
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
My css code:
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
link to the picture of the div:
https://www.dropbox.com/s/9zs4mgj7izuqsp1/question.png?dl=0
The problem is with your CSS. Particularly the .div-wrapper div
You need to change the display setting from inline-block to inline-table to get it inside the cell. You mentioned that you wanted the box inside the larger box, but you need to clarify how exactly you want the inner boxes to be placed inside the larger box (ex: small gap between the boxes, both perfectly fit inside the large box with equal sizes)
Just changed inline-block to inline-flex for your inner div and looks fine.
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-flex;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
Just have to fix this, I don't think any solution here explains why the problem exists. Just to add up, the problem with this is because vertical-align is set to baseline by default.
What you have to do is set the vertical-align to top
Insert it in your CSS:
.div-wrapper div {
vertical-align: top;
}
Link to solution: https://jsfiddle.net/Lnvgkfz3/
Small changes in CSS
.div-wrapper {
border: 1px solid black;
width: auto;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 190px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
I have a div with a solid border. Within this div are multiple 'tags', which should all be contained within the border of the div. I've used the following code to do this:
.sidebox {
border-style: solid;
width: 250px;
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
}
#tag {
background-color: black;
color: white;
display: inline;
padding: 5px;
margin: 3px;
text-decoration: none;
}
<div class="sidebox">
<h2>Popular Tags</h2>
Tag 1Tag 2Tag 3Tag 4Tag 5Tag 6Tag 7Tag 8
</div>
The problem is that these tags overflow the div. There are displayed as one long line of tags. How can I make tags go down to the next line within the div, rather than overflow it?
I've tried using overflow: none; but this causes them all to overlap each other.
Display them as inline-block instead of inline.
Also, you should use a class instead of ID for each tag. You have to use ID when the elements are unique. You have to use a class when you want to use a property in more than one element.
.sidebox{
border-style: solid;
width: 250px;
margin-bottom: 20px;
padding: 20px;
border-radius: 5px;
}
.tag {
background-color: black;
color: white;
display: inline-block;
padding: 5px;
margin: 3px;
text-decoration: none;
}
<div class="sidebox">
<h2>Popular Tags</h2>
Tag 1Tag 2Tag 3Tag 4Tag 5Tag 6Tag 7Tag 8
</div>
I have a DIV container. inside it, I have a button. I want the button to be used to change the DIV's position attributes. I want the button click to shift the entire container to the left.
I have to do this without any scripting; only CSS and HTML.
is this possible?
perhaps with buttonclick:active{stuff}?
You can use the checkbox hack
#move-div {
display: none;
}
#move-div:checked + .movable {
left: -50px;
}
.movable {
position: relative;
background-color: #FF0000;
padding: 10px;
}
.button {
display: inline-block;
padding: 5px;
background-color: #FFF;
border-radius: 5px;
color: #000;
box-shadow: 3px 3px 5px 3px #AAA;
}
<input id="move-div" type="checkbox">
<div class="movable">
<label class="button" for="move-div">Move the div</label>
</div>
I need your help.
I can't seem to be able to get the hover working properly over a wrapper/container DIV
CSS:
#myhover:hover {
border: 1px solid red;
}
HTML:
<div id="myhover" style="background: #ffffff;
width: 177px; height: 20px; border: 1px solid #808080;">
<div style="float: left;">
<input id="refdocs" style="padding-left: 4px; padding-right: 3px;
height: 15px; width: 158px; border: none;" type="text">
</div>
<div style="line-height:18px; font-size: 11pt; color: #779297;">+</div>
</div>
Because inline styles are the most specific in the cascade, they can over-ride things you didn't intend them to. Move your #myhover styles into a style sheet then it should work fine.
for example:
#myhover {
background: #ffffff;
width: 177px;
height: 20px;
border: 1px solid #808080;
}
jsfiddle: http://jsfiddle.net/va8Bz/
Your style attribute is overriding your stylesheet selectors. It's more specific.
You have three options here:
Move your styles out of the style attribute.
Move your styles out of the style attribute.
Add !important to the style declarations that should override the ones in your style attribute.
I suggest you move your styles out of the style attribute into a stylesheet.
Example: http://jsfiddle.net/Y7NW9/
You need to stick all your CSS in a stylesheet instead of using inline styles.
What you're trying to accomplish can be done with less markup too:
<div class="container">
<input class="refdocs" type="text">
<div class="icon">+</div>
</div>
Then in your CSS stylesheet:
.container {
display: inline-block;
position: relative;
}
.input-wrapper {
float: left;
}
.refdocs {
border: 1px solid #808080;
padding: 2px;
padding-right: 14px;
margin: 0;
}
.refdocs:hover {
border: 1px solid red;
}
.icon {
font-size: 11pt;
position: absolute;
top: 3px;
right: 5px;
}
Here's a working demo
I solved this for you in your previous question:
#add {
float: right;
width: 20px;
height: 20px;
cursor: pointer;
text-align: center;
}
#add:hover {
color: #f00;
}
http://jsfiddle.net/kUSBM/
Please respond to the questions or accept answers.
Hi I'm trying to create a user friendly hyperlink button with the use of XHTML and CSS. I have an unordered-list of list-item hyperlinks, I want to to add a rounded border to these hyperlinks and be able to click anywhere in the button to use the hyperlink functionality.
I currently have in my XHTML file:
<div>
<ul>
<lh>Web Links</lh>
<li>Google</li>
</ul>
</div>
and in my CSS:
div ul li { border:2px solid blue;
width: 175px;
height: 40px;
text-align:center;
margin: 25px;
border-radius:10px;
-webkit-border-radius:10x;
-moz-border-radius:10px; }
when I add 'a:link' to div ul li (div ul li a:link) it puts the border right around the link ignoring the width and height px padding. I have also tryed to use:
a:link { display: block;
width: 8em;
height: 1.5em;
background-color:#999999;
border-top: 1px solid blue;
border-right: 1px solid blue;
border-bottom: 1px solid blue;
border-left: 1px solid blue;
text-decoration: none;
color: #000000;
cursor: default;
margin: 25px;
block-radius:10px;
-webkit-block-radius:10x;
-moz-block-radius:10px;}
By using this I acheive decent looking buttons but not the buttons I would like, nor does it round the corners.
Thanks in advance for the help.
You can add this rule, and it will expand the link element to fill the button,
a {
display: block;
text-decoration: none;
height: 100%;
width: 100%;
}
Demo at http://jsfiddle.net/7pMHf/