Do you have any ideas why sass does not recognise the child and creates new block instead?
HTML:
<div class="menu_inside">
Map
Users (8 / 39)
Events
<a href="#" class="menu_link" id="menu_content">Content
<div class="menu_div_dropdown">
<a>sdfsd</a>
</div>
</a>
Setup
Logs
</div>
CSS:
.menu_inside {
float: right;
text-align: center;
}
.menu_inside .menu_link {
color: #353434;
font-size: 11px;
border-right: 1px #cecccc solid;
float: left;
min-width: 53px;
padding: 10px 20px 9px 20px;
}
.menu_inside .menu_link:first-child {
border-left: 1px #cecccc solid;
}
.menu_inside .menu_link:hover {
background-color: #FFF;
}
.menu_inside #menu_content .menu_div_dropdown {
display: none;
position: absolute;
}
.menu_inside #menu_content:hover .menu_div_dropdown {
display: block;
}
I checked on inspect element on chrome and it shows that my sdfsd is in the new block but not as a Content child. If I remove the a from sdfsd it shows everything OK. Any ideas? Thank you
You can't have a div inside an anchor tag... block element inside an inline element is semantically incorrect. On top of that, you have an anchor tag within an anchor tag. Also semantically incorrect. Either make the div a span and remove the inner anchor, or rewrite your code to something else.
UPDATE
I stand corrected for HTML5...
HTML 5 states that the <a> element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".
But your code is still wrong based on the fact that you have a link within another link. You still need to fix that.
Related
I tried creating a link that changes color when you hover over it. It's a box element with a purple background that changes to fuchisa when you hover over it. It floats to the left of the page. Right next to it, I have another element, it's a link to google. The clear;left property is supposed to prevent the link from appearing next to the floating element on the left. It's not doing that. In style in head, I have
p.new a {
border: 1px solid purple;
float: left;
width: 80px;
height: 25px;
color: white;
text-align: center;
and
div.link {
clear: left;
}
And this is my body.
<h1>Penguins</h1>
<br>
<p class="new" >
Hover
</p>
<div id="link">
Check out the table
</div>
</body>
Full Code Here
Your css selector suggestes link is a class name, while it is id, use div#link selector.
I have the following CSS and HTML: http://jsfiddle.net/47w0h73r/6/
.one {
padding: 20px;
background: #f00;
}
.two {
padding: 20px;
background: #00f;
}
a,
button {
font-family: Arial, Helvetica;
font-size: 16px;
padding: 10px;
background: #fff;
color: #000;
display: inline;
border: 0;
text-decoration: none;
}
<div class="one"></div>
<div class="two">
Link
<button>Button</button>
</div>
As you will notice, the button doesn't appear as inline. Why is this? How can I make this button inline, just like its sibling a?
Issue
By changing the button to an a you will notice that the display: inline makes the padding of the parent element to ignore the padding of both child elements, making them really display inline. The problem, is that the button tag doesn't really appear inline, which makes the parent element's padding push both elements down. How can I fix this?
Trying to set a button to display:inline seems to cause some confusion. The inability to get display:inline behaviour is often attributed to it being a replaced element, but that is incorrect. <button> is not a replaced element.
In fact, the HTML5 specification, Section 10.5.2 The button element makes this requirement:
When the button binding applies to a button element, the element is
expected to render as an 'inline-block' box rendered as a button whose
contents are the contents of the element.
The language is a little unusual, but the button binding does apply, and the effect is that the binding takes precedence over the specified value of the display property. The effect is that the button is always rendered as display:inline-block, no matter what its specified value is. There is nothing you can do about it.
Add line-height:17px; to a, button and that should make them the same:
.one {
padding: 20px;
background: #f00;
}
.two {
padding: 20px;
background: #00f;
}
a,
button {
font-family: Arial, Helvetica;
font-size: 16px;
padding: 10px;
background: #fff;
color: #000;
display: inline;
border: 0;
text-decoration: none;
line-height: 17px;
}
<div class="one"></div>
<div class="two">
Link
<button>Button</button>
</div>
I am trying to create a button for my link which has the name on the button
and allows the user to click on it and go to the link.
Also I'm not sure why but my link "click-able range" seems to be extended.
Here is the Code:
<body>
<div id="container">
<div id="link">My Favorite Website</div>
</div>
</body>
Here is the CSS:
#container {
width:960px;
margin-left: auto;
margin-right: auto;
padding: 30px 0px;
}
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
}
#link {
padding: 7px;
font-size: 15px;
font-weight: bold;
font-style: italic;
}
Thanks!
Your link is inline element so you need to make it block or inline-block to add your styles so:
CSS
a {
display:inline-block;
}
Having a block element within an inline one is causing your problems.
By default, anchors are displayed inline. You need to display it a little differently, as inline-block:
a {
padding: 7px 100px;
border-radius: 10px;
background-size: 80px 60px;
background-color: green;
text-decoration: none;
display:inline-block;
}
JSFiddle
Remove div tag into a tag..
Demo
<div id="container">
My Favorite Website
</div>
just add this to #link in css
appearance:button;
-moz-appearance:button;
-webkit-appearance:button;
is an inline element. To make it behave like a block level element, you need to define its display property in CSS.
a {display:block;} or a {display:inline-block;}
and your link "click-able range" seems to be extended, because you are using a , which is a block level element, inside your tag.
Block level elements take the entire width of its container.
You need to redefine its bevavior.
link{display:inline-block;} or #link{display:inline;}
I have some text and want it to be higher and inline with the first icon. This is it live: http://www.penguinie.co.uk/#projects the css is:
.german img {
height: 100;
width: 100;
padding: 2px 2px 1px 2px;
}
.german img:hover {
border: 1px solid #2e8ece;
border-radius: 10px 10px 10px 10px;
}
.german-content {
display: none;
float: right;
width: 400px;
}
.german:hover .german-content {
display: inline-block;
border: 1px solid;
}
.german-content p {
font-size: 15px;
font-weight: normal;
line-height: 30px;
word-spacing: 5px;
color: black;
}
.chembond img {
height: 100;
width: 100;
padding: 2px 2px 1px 2px;
}
.chembond img:hover {
border: 1px solid #2e8ece;
border-radius: 10px 10px 10px 10px;
}
.chembond-content {
display: none;
float: right;
width: 400px;
}
.chembond:hover .chembond-content {
display: inline-block;
border: 1px solid;
}
.chembond-content p {
font-size: 15px;
font-weight: normal;
line-height: 30px;
word-spacing: 5px;
color: black;
overflow: scroll;
}
And this is the HTML:
<section id="projects-content">
<p>Projects</p>
<section class="german">
<img src="assets/img/german.png" height="60" width="50" />
<section class="german-content">
<p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it here (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
</section>
</section>
<section class="chembond">
<img src="assets/img/bonding.png" height="60" width="50" />
<section class="chembond-content">
<p>This isn't much of a project, more homework. In Science we were asked to create a poster on the different types of bonding (ionic, metallic, covalent, etc) and I naturally said no as I cannot draw and hate making posters. I then did it as homework and made a website. It was a joint website with my friend Elliott who did all the drawings/images, I then wrote the code. If you are wondering if my teacher like it then I can tell you that he did. If you want to see it then click here. I know there is one mistake in the image but I have put a note at the bottom of that section.</p>
</section>
</section>
</section>
So when I hover over the second icon I want the text in the box to be the same height as the first one is when you hover over it.
Here is what you should add to your css:
.chembond-content {
display: none;
float: right;
width: 400px;
position: relative;
top: -72px;
}
You could add margin-top with a negative value to your CSS, but NO.
A much more maintainable solution would be to have only one <section class="content"> tag, align it, and with JS change the text when hovering over the relevant icon.
when making a question here with simple CSS and HTML consider doing a jsFiddle and sharing that instead of a personal link, otherwise when this is working and your live link changes then the question will be irrelevant.
The CSS Position Approach
So here is my fiddle minus a bit of code clutter:
Demo
The reason the second image is hovered to reveal the the section element with the class of .chembond-content and the element is not at the top (like the first image) is because you are floating it to the right but it's still part of the document flow after that image that you have right before the section.
If you want to have both elements open up in the same spot then you would get them out of the document flow by giving them a fixed or absolute position which in this example I simple set it to 20 pixels from the top and from the right.
Since these elements are not taking up space in the flow of your markup then you are free to position both at the top if you want to.
My inaugural post here, hope you all can help. :)
I have been working on creating a pure XHTML strict website no images but the products however I'm in a small jam. I can't seem to find a way to make the a button that appears as such as shown here:
Where it has a hover state, rectangle and currently is
<div class="topprodcartadd">Add to Cart</div>
I made a little CSS class that looks like this:
.topprodcartadd {
width: 190px;
height: 50px;
background-color: #000;
margin: 10px 0px;
padding:0px 10px 10px 0px;
float: left;
text-align: right;
vertical-align: middle;
}
.topprodcartadd:hover {
background-color: #00a7e6;
}
.topprodcartadd a {
text-decoration: none;
color: #00a7e6;
}
.topprodcartadd a:hover {
color: #fff;
}
I want to make it link somehow but in XHTML Strict it gives me validation errors when I rock the code like this:
<div class="topprodcartadd">Add to Cart</div>
So does anyone have any other ideas on what I can do to make the button appear that way?
Thanks!
Change your CSS for the anchor to:
.topprodcartadd a {
text-decoration: none;
color: #00a7e6;
display:block;
width: 190px;
height: 50px;
}
jsFiddle example
I added display:block and a width and height so that the link takes up all the room in the div.
So, if I get your problem right:
1) you can set display: block for a so it fill the parent element.
2) are you sure that you need XHTML Strict?
If you simple need mouse cursor to change into a hand, just add cursor:pointer to your DIV's style, you don't have to use an anchor.