I created tabs in HTML/CSS. Those tabs are hyperlinks that target blocks ("div") on click. The content is not displayed for inner blocks (sub-blocks) not sure why.
<div id="contents">
<div id="content1">
<div>content not displayed</div>
</div>
<div id="content2"> content displayed </div>
<div id="content3"> content displayed</div>
</div>
The issue seems to come from the CSS.
You have :
#contents div {
border: 1px black dotted;
display: none;
}
#contents div:target {
display: block;
}
which hides all div inside contents and their children, and when targeted you only change the display of the div, not it's children. So the div inside content1 is never displayed.
There are many ways to fix this.
One way would be to only hide the direct children of #contents :
#contents>div {
border: 1px black dotted;
display: none;
}
Another way would be to only hide div that have an id :
#contents div[id] {
border: 1px black dotted;
display: none;
}
In Chrome right click on the element and select inspect, in the dev tools that open look for the css style that is causing your issue.
Related
I have some divs defined in my page
<div class="alternating">random text</div>
<div class="alternating">random text</div>
<div class="alternating">random text</div>
<div class="alternating">random text</div>
<div class="alternating">random text</div>
I have added a css property
.alternating:nth-child(even){
background: #FF0000;
}
On the loading the page everything seems fine and the even rows are colored.
But when I add a new div to the parents of this divs (using Knockout and jquery) the newly adding row does not show the right color.
That means if my last line was odd (no color) the newly added div also appears with no color.
Or if the last div was even (with color) the newly added div also appears with color.
But after that it works out normal again.
My problem is only on the addition of the 1st div.
Any ideas?
Here's a little FIDDLE in which I start with divs in the DOM, then add them by a click.
Relevant: JS
$('.button').click(function() {
$('.holder').append("<div class='inside'>dynamic div</div>");
});
Relevant CSS
.holder {
width: 300px;
height: 400px;
border: 1px solid black;
}
.inside {
height: 30px;
border: 1px solid black;
}
.inside:nth-child(even) {
background-color: blue;
}
I'm trying to underline a h1-title, but for some reason it always takes the whole length of the parent div. The only way I was able to do so, was by adding the position: absolute-property in the css...
This is the design:
And this is what I get:
Point is to get the blue line only as wide as the h1 and a gray border line under the parent div.
HTML:
<div class="title">
<h1>Contacteer ons</h1>
</div>
CSS:
h1 {
border-bottom: 8px solid #57c4d0;
position: absolute; /* As I've said, adding this allowed me to do so, but the result was far from ideal! */
}
.title {
border-bottom: 1px solid #dedede;
}
I'm planning on using the HTML across my whole website (each h1 will be different in length, adding a fixed width on each title isn't an option), so I'm looking for a robust solution. Anyone with advice?
You can change h1 to display: inline-block;
See a live example at (added margin-bottom to .title for clarity):
http://jsfiddle.net/P4BGC/
See this fiddle. H1 is a a block element, so it grows to fill its parent. You can set display: inline, but I also suggest to put it in its own div (or any other element with display: block) so you ensure that no content goes along side.
<div><h1>Hello, world</h1></div>
Lorem ipsum
the css
h1 {
border-bottom: 3px solid red;
display: inline;
}
You could also use CSS style text-decoration.
html:
<div><h1>Hello, world</h1></div>
css:
h1 {
text-decoration: underline;
}
So i need to make a div a link, and have the background colour change when hoverng over this div with the mouse. The problem is, this div has two child divs inside it and when i move the mouse in to the bounds pf the parent div it is actually on a child div. So while i can make it so that one of these child divs changes on hover the second one does not.
So i guess my question is, is there a way to make both child divs change when hovering one using css?
I dont mind changing code to use tables if thats easier but I need to find some way to make the entire div / tr change when hovering on one child / td.
What im actually looking to create here is something almost the same as th youtube recommended videos boxes (on teh right of the page)
Thanks in advance
CSS
#parent {
width: 318px;
height: 90px;
background-color: #FFFFFF;
margin: 5px 0px 5px 0px;
font-size: 10px;
}
#parent :hover {
background-color: #0000ff;
}
#child1 {
width:120px;
float:left;
}
child2 {
width:188px;
float:right;
}
HTML (with some other stuff)
<c:forEach var="item" items="${list}">
<a href="webpage?item.getinfo()">
<div id="parent">
<div id="child1">
<img src="img.jpg">
</div>
<div id="child2">
${item.getinfo2()} <br>
${item.getinfo3()} <br>
</div>
</div>
</a>
</c:forEach>
Code is something like that. Ive been hacking it up for the last while but that was something like what i had before
If the one you're able to hover over is the first, you only need CSS:
.mavehoverable > div:hover, .makehoverable > div:hover + div {
background-color: red;
}
With this HTML:
<div class="makehoverable">
<div>Child 1</div>
<div>Child 2</div>
</div>
Hovering over Child 1 will also highlight Child 2. Vice-versa doesn't work in CSS though, so that would need some JS.
I think you might just need to fix a line of your CSS. Change:
#parent :hover {
background-color: #0000ff;
}
to:
#parent:hover {
background-color: #0000ff;
}
That seemed to work for me.
Have you tried using jQuery? You could do something like this:
http://jsfiddle.net/UtdYY/
Html:
<div class='color'>
<div class='color child'>test123</div>
<div class='color child'>test456</div>
</div>
Javascript:
$('.color').hover(function(){ $(this).toggleClass('red'); });
CSS:
.red { color:red; }
.child {height: 50px; }
Edit: Cleaned up the javascript, thanks elclanrs
Try this http://jsfiddle.net/rsarika/rtGw5/1/
I have an issue with dynamically resizing the height of my sidebar div to match the content div.
Based on various other questions here and google searches, I thought that without a height set, it would use the parent div height, but it seems to auto-fit the height to the content instead.
This can be seen on "baradineholdings.com.au" (please don't judge the site, I'm a noob for one and I would rather get the basics working properly before I make it 'pretty').
The home page looks fine, mainly because of no content. If you head to the about page you can see the issue. I almost suspect that in the instance of the main page, the content div is taking the height of the sidebar div, but I'm not sure why.
HTML;
<body>
<div id="wrapper">
<?php include('includes/header.php'); ?>
<div id="internal">
<div id="sidebar">
<h3>Navigation</h3>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</div> <!-- end #sidebar -->
<div id="content">
<p>Images Coming Soon!</p>
<p>Please see the about page for more information.</p>
</div> <!-- end #content -->
</div> <!-- end #internal -->
<?php include('includes/footer.php'); ?>
</div> <!-- end #wrapper -->
</body>
CSS;
body {
background-color: #f1f1f1;
font-family: georgia,sans-serif;
color: #333;
margin: 0;
padding: 0;
}
#wrapper {
width: 960px;
background-color: #f1f1f1;
margin: 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#internal
{
width: 959px;
height: auto;
background-color: #f1f1f1;
margin: 0 auto;
border-right: 1px solid #ccc;
}
#content {
width: 675px;
height: auto;
float: left;
padding: 10px;
}
#sidebar {
width: 150px;
/* height: 410px; */
float: left;
background-color: #27408B;
color: white;
}
#sidebar a {
text-decoration: none;
color: white;
}
#sidebar li {
list-style: none;
}
As I said; noob. So I'm probably doing something dumb here...
I've tried jsfiddle, but even using the large amount of content in the about page, it renders it small, so it doesn't affect the sidebar...
I've tested in Chrome and IE, both have the same issue.
This can be fixed pretty easily with your existing code. The basic method is outlined here: CSS Equal Height Columns.
Basically, you fake it by adding your sidebar color to a wrapper div (in your case, you can use your existing #internal). Because this div actually CONTAINS the main content, it will expand as necessary. To make it look like it's a sidebar, you then give the main content a background color that matches your body. The actual sidebar div has no background, it just holds the text. You might need to see this in action for it to really make sense, but here are the relevant bits of CSS:
#internal {
background-color: #27408B; /* the color you want for the sidebar */
}
#content {
background-color: #f1f1f1; /* matches the body background */
}
And then remove the background-color line from #sidebar. (I also had to add a float to #internal and change its width to auto to get things working.)
Here it is in JSFiddle
What is it that you want to accomplish? The blue sidebar to have the same height as te text in de content area?
If so, the easiest way is to put a blue background image to the div that containce the sidebar and te content div.
To do that, you have to put < div style="clear:both">< /div> after your < div class="content">...< /div>This way, your id internal div will grow with de height of de floating children elements.
<div class="sidebar">...< /div><br />
<div class="content">...< /div><br />
< div style="clear:both">...< /div><br />
After that you can add a repeating blue image:
#internal {
background: url(blue.png) top left repeat-y;
}
An alternative is to use jquery/css hacks, but I doubt it's worth the effort.
I have the following HTML:
<div class="selfClear" style="float: left; border: 1px solid black;">
...floated stuff in here...
</div>
<span style="margin-top: 10px; border: 1px solid purple;">hello world</span>
I'd like there to be a 10px gap between the div and span, per the margin-top. But, since the div above is floated, it won't render that way. The fix to make sure something clear's the DIV. To do that via pure CSS, it appears one should use the '::after' method of inserting content that is then set to clear:
.selfClear::after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.selfClear {
display: inline-block;
}
However, this doesn't quite do what I think it should be doing. If I don't include the height/visibility styles so that I can actually see the period as it is inserted, I see that it's actually rendering inside the div (the black border encloses it), rather than after the div (so it's between the div and span). Am I misunderstanding how this should be working?
EDIT:
Here's a simpler example:
CSS:
#theDiv {
border: 1px solid green;
}
#theDiv::after {
content: ".";
}
#theOtherDiv {
border: 1px solid orange;
}
HTML:
<div id="theDiv">
Hello
</div>
<div id="theOtherDiv">
World
</div>
That ends up placing a period after 'Hello' rather than after the div.
It appears that ::after and ::before are actually appended to the CONTENTS of the element, not the element itself. Is that correct?
Yes, it appends to the content of the selected element. You could try wrapping the div then appending after the wrapper div, but that defeats the whole purpose of using :after in the first place.
You could also try setting the enclosing div to 'overflow: auto'. That works everywhere.
I would suggest using clearfix - it's a lot simpler, you just set up a surronding with a class of clearfix.
See this example.