My website has sections with headers to divide them. Below each header are rows of images. When the header is clicked it only shows images in that section. I want to have the clickable area of the header link consist of the text and its background color. I have assigned the header and link tags in CSS to a max-width. The clickable area does not go beyond the top or bottom but extends past the sides. How can I reduce the clickable area to just the text and its background color without the images and header itself being moved?
Here is my CSS
a {
text-decoration: none;
width: 275px;
max-width: 275px;
margin-bottom: 25px;
}
h2 {
text-align: right;
color: #ffffff;
background-color: #e83a3a;
max-width: 275px;
margin-top: 25px;
padding-right: 25px;
padding-bottom: 5px;
}
Making the heading inline-block will cause its width to collapse down to only as small as necessary:
h2 {
display: inline-block;
}
This can affect placement of other elements in some cases, in which placing it within a div and making the div's width 100% will fix this (shouldn't be necessary, but depends on your site's layout).
use a element for the text, like a span, and link the span instead of the whole element. you can center the span (or whatever you use) with flexbox, or just margin: auto; in CSS. make the parent container's background image the image you want to display. this will work.
Related
As in this test page https://play.pianohub.it/
I'm using three carousel sliders with two navigation arrows
If you hover over either the nav arrows, you'll see that this div covers only a portion of the picture height, while I need it to span top to bottom.
I'm using this CSS
.arrow {
font-size: 18px;
padding-right: 7px;
padding-left: 7px;
background-color: rgba(22,22,22,0.29);
color: #ffffff;
}
I tried to use padding:auto for top and bottom but it is not a thing. I should fix it by counting the needed pixel but it wouldn't be responsive.
How can I set automatic padding?
If the list-container and the arrow have the same father, you can set:
height: 100%;
so the height of the arrow will be as 100% as the father
so I'm messing around with jsfiddle..
http://jsfiddle.net/3mfnckuv/3/
For those of you who play Destiny, this is Destiny inspired haha..
but anyway, a few questions :)
1) Why is there the white space underneath the image?
2) I'm trying to put the image and description side by side. I wrapped the image in a div, then used inline block, rather than float. Is this a good approach?
3) How can I move the description div, higher and align it with the top edge of the picture?
4) I removed whitespace caused by inline-bock using margin-left: -4px. Is this a good approach?
5) Is it a good practice to set width and height to 100% on the body and html?
<ul class="test-2">
<li>
<div class="image"><img src="http://vignette4.wikia.nocookie.net/destinypedia/images/9/92/Invective_icon.jpg/revision/latest?cb=20150912145552" alt="invective" width="50px" height="50px"></div>
<p>Invective</p>
</li>
</ul>
html, body {
width: 100%;
height: 100%;
}
.test-2 li {
list-style-type: none;
}
.image, p {
display: inline-block;
border: 1px solid black;
}
Thanks guys
1) Why is there the white space underneath the image?
The default vertical-align of your image is baseline by default. Change it to top, bottom, or middle to get rid of the white space.
2) I'm trying to put the image and description side by side. I wrapped the image in a div, then used inline block, rather than float. Is this a good approach?
Sure. White space in your HTML between the image and the text will be rendered as white space on your page when using display: inline or display: inline-block. With float: left, the white space is collapsed.
3) How can I move the description div, higher and align it with the top edge of the picture?
Set the vertical-align: top on the element containing the text.
4) I removed whitespace caused by inline-bock using margin-left: -4px. Is this a good approach?
No. That white space is an actual space character. Collapse it using float: left or remove it from your html.
5) Is it a good practice to set width and height to 100% on the body and html?
Maybe. Won't hurt. This was a trick that helped columns fill the page. Today we can just set min-height: 100vh instead. The vh and vw units, representing view height and view width, respectively, are very handy.
Here I think I fixed your problems. Try this out. You needed to make your image class in the img tag. Also I put your p tag inside the same div as the image.
Here is CSS
body {
width: 100%;
height: 100%;
}
.test-2 li {
list-style-type: none;
}
p {
position: absolute;
top: -1px;
left: 110px;
}
.image {
display: inline-block;
border: 1px solid black;
}
Here is the div in HTML
<div><img class="image" src="http://vignette4.wikia.nocookie.net/destinypedia/images/9/92/Invective_icon.jpg/revision/latest?cb=20150912145552" alt="invective" width="50px" height="50px"><p>Invective</p></div>
Also when using css you don't have to put html for the body just body will do fine.
I'm generally new to responsive web design and am trying to make a video site template. When I make the wave graphic responsive in the div tag the width works perfectly. However the height leaves a gap between the image (as if the height isn't responding base don the width) and the div tag and showing the background color red of the 'wave1' div.
You can see it here on jsFiddle on any screen size.
Any idea how to fix this???
Here is my code:
<div id="wave1">
<img src="images/wave1.jpg" alt="wave 1">
</div><!--wave1-->
#wave1 {
background-color:#C31619;
width: 100%;
height: inherit;
padding: 0;
margin: 0;
}
#wave1 img {
width: 100%
}
The red line you are seeing is the space between tags being rendered as text, and therefore taking up the equivalent space of a single character in the document flow. Simply set the font-size on the container to 0, then to 1rem (the value of the front size of the root element) on the children
(Demo)
#wave1 {
background-color: #C31619;
width: 100%;
height: inherit;
padding: 0;
margin: 0;
font-size: 0;
}
#wave1 * {
font-size: 1rem;
}
I've played with this for a while now and literally cannot see a reason as to why this is happening.
Giving
#wave1 { margin-bottom:-4px; }
works, but is certainly not the best fix as the gap is not being caused by margin and may simply break again in future.
The gap between the red bottom of the wave div and the video is caused by the padding on your "outer" div. You have:
.outer {
padding-top: 1%;
...
}
To remove the gap, remove that padding.
https://jsfiddle.net/oxn6zLar/
The height: inherit line is not necessary.
try adding display: block to your img's css.
The default display value for HTML img tags is inline, meaning that the image is rendered inline with text, and is given a line-height value, which causes the blank space underneath the image to appear (due to difference between the image height and the line height).
Another workaround would be to set vertical-align: bottom on the img element so that the difference between the line-height and the image height will be on top of the image.
I know this is probably a stupid question. But say I have a navigation menu, would it be more practical to set a fixed height..
nav {
background: red;
Width: 80%;
height: 60px;
}
nav ul li {
Line-height: 60px;
}
Or to use padding to define the height?
nav {
background: red;
Width: 80%;
Padding: 30px 0;
}
I usually go with the first choice. But I'm worried that the font size might change in different computers/browsers and therefore becomes unproportional with the container. Could this actually happen?
Your vertical padding should probably go on the
nav ul li a
That way, if the anchor text scales up, so does your header and everything doesn't break out, and you have a larger clickable area. Also, don't leave the anchor display inline.
I have the following:
HTML:
<div class="banner-success">
<span class="banner-text">
You were successful! Yay! Some long reason what your success
implies goes here.
</span>
</div>
CSS:
/*Add future banners to this style, this is generic banner styling*/
.banner-success
{
background-position: 5px 5px;
background-repeat: no-repeat;
min-height: 42px;
padding-left: 47px;
margin-bottom: 10px;
}
/*Create a new entry in this section for each banner, with appropriate image and
colors*/
/*----------------------------------------------------------------------*/
.banner-success
{
color: #004400;
background-color: #DDF2E4;
background-image: url("../Images/Success.gif");
}
/*----------------------------------------------------------------------*/
.banner-text
{
position: relative;
top: 5px;
}
This allows for a standard banner, each with an image and arbitrary lines of text, assuming a consistent image size. My issue is that the div is being sized as if the text within isn't being pushed down, and so the bottom line of the text reaches outside of the div.
Is there a way to tell a div, or any container element, 'be as big as your constituent elements are, AFTER they've been relatively positioned to you'?
Apply overflow:hidden to the .banner-success.
I made a couple of tweaks to even out the padding around your text (and subbed a background
image so you could see it working w/ an image in place):
http://jsfiddle.net/qTsgL/
Cheers!