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
Related
title kind of says it. When my navbar is opened, the X goes to the middle of the parent green div. I want it to stay at the same place as the normal bars. Here is a live demo: link hidden The CSS is in styles/city.css and scroll down to see the hamburger, bar and mapNav: https://i.stack.imgur.com/QQFfA.png
Navbar closed
Where X is, but where it should be in red
Thanks in advance,
- JT
This code snippet would be a bit more elegant with your HTML, but add the following CSS to your code:
margin-left: auto; sets the highest possible margin to the left, so the hamburger menu is all the way to the right.
The whole container is 50px, the width of the hamburger menu is 25px, which means the margin-left value is 25px. Apply the half of that margin to margin-right: 12.5px, that way the hamburger menu is centered when closed and remains intact.
.hamburger {
display: block;
cursor: pointer;
padding-top: 10px;
width: 25px;
/* Remove this */
/* margin: auto; */
margin-left: auto;
margin-right: 12.5px;
}
Also for next time, make sure to include your code! It's much easier to help you then.
This may not be the best way but it will work. Add this to your css.
.hamburger.active .bar {
position: relative;
left: 124px;
}
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.
I have three elements, the ones in red are divs with images as background displaying the logo of my client. The white one is a "modal" window that appears when you click an item on the menu (not displayed), this modal window uses percentages for its height and uses a fixed position to stay in the center of the page (both vertically and horizontally). The bottom of the modal as to be aligned with the two red boxes.. For my resolution it works perfect, but when on a Macbook (for example) when on fullscreen the site looks like this
What should I possibly do to solve this problem?
In case someone needs it, here's the CSS of the modal
.modal{
cursor: auto;
position: absolute;
z-index: 11;
top: 45px;
bottom: 15px;
right: 0;
left: 0;
margin: auto;
width: 940px;
max-width: 1072px;
height: 81%;
padding: 40px;
background-color: rgb(255, 255, 255);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #1C1C1C;
text-align: left;
overflow-y: auto;
overflow-x: hidden;
}
Remove the height property in your modal, You must just stretch your modal by using top and bottom. This will make sure the bottom of the modal is 15px from the bottom of the screen.
The bottom of the modal as to be aligned with the two red boxes..
Add the same Css rules to your red divs as well by using top and bottom
this modal window uses percentages for its height and uses a fixed position to stay in the center of the page (both vertically and horizontally)
If you say that the modal will be centered even vertically then howw do you expect the side red divs to align correctly at the bottom?
For this you must use jquery and when ever the modal is shown calculate the number of pixels from the bottom of the window to the bottom of the modal and then add this pixels as the CSS rule to both the side div's bottom property. That way you will get it aligned
I'm having trouble creating the desired layout I want with CSS and HTML.
What I'm trying to have is a heading skewed div and then have a straight background along the x-axis. Something similar to the image below:
So far, my attempts have been futile as you can see here. I need the inner div to extend to the full width of the point of the outer div.
Anyone have any ideas?
This is a hacky version you can use as a starting point:
http://jsfiddle.net/32C6E/1/
It is more complex as you require behind the menu to show the background under the heading. Because of that it requires another element for the white bar after the menu. I've set the white areas to be % width, but the menu isn't so that'd need to be fixed to make sure they never overlap.
The basic technique is to skewX the white areas to get the diagonal, and reverse skew the h1 so that the text is straight. I then add a negative margin to hide the left side of the element.
header {
transform: skewX(-35deg);
margin-left: -5em
}
header h1 {
padding: 4em;
-webkit-transform: skewX(35deg);
}
I then absolutely position the menu items so they are in the bottom left corner of the nav, and rotate them to the correct angle, with the origin at the bottom left. I then fiddled with the position until the first item was in the correct place:
nav li {
transform: rotate(-55deg);
transform-origin: bottom left;
position: absolute;
bottom: -2.6em;
left: 0em;
}
Finally I selected each menu item individually and added to the left value to poisition them correctly:
nav li:nth-of-type(2) {
left: 2.5em;
}
And so on…
Ideally the menu would be kept in the flow of the document so you don't have to manually position each menu item. This is probably possible, but I've run out of time to look into it. I'm sure you can build on it.
I suggest you to try border-width property. This will resolve your issue.
Here is the fiddle
The HTML:
<div class="abc"> </div>
The CSS:
.abc {
width: 200px;
height: 0px;
border-color: lightgray transparent;
border-style: solid;
border-width: 350px 350px 0px 0px;
position:relative;
display:block;
margin-left:50px;
}
Hope this helps.
I am having trouble getting a background-image to overlay the border of another div. We have a sidebar panel with various sidebars, including a navigation menu. To the right is the content panel. We'd like anything selected on the sidebar to appear connected to the content panel:
In the example above, there is a background image on the Personal Info <li> tag. I'd like to extend this image one pixel to the right so that the line next to the selected value isn't visible.
Here is my CSS for the submenu (selected) and the Content area to the right:
.submenu-item li span{
padding: 4px 0 4px 16px;
min-height: 16px;
border-bottom:0px;
}
.submenu-item li{
font-size:12px;
border: none;
padding: 0px 0 0px 16px;
}
.submenu-item span.Active{
background-image: url(../images/submenu-select.png);
background-repeat: no-repeat;
}
#Content {
margin-left:190px;
border-left: 1px solid #b0b0b0;
padding: 20px;
background: #FFFFFF;
min-height:600px;
}
Is there a way to do this other than putting a right border on my sidebar (and excluding it on the list item tag)?
If you have a border on that right, you just can't eliminate that part of the border.
However, you're in luck. Try using margin-right: -1px; in your CSS. This will drag the
element to the right 1 pixel, and hopefully over the border. You may need to also set
position: relative;
z-index: 100;
Also, because it's over to the right 1 pixel, to make it align on the left with the others, you may need to make the active element 1 pixel wider.
Alex's solution should work, but another way to do it would be to remove the border-left CSS atrtribute from #Content and instead use a 1 pixel wide gray GIF or PNG image on the DIV containing the submenu items.
Like this:
#SubMenu { background: url(grayline.gif) #CCCCCC top right; }
That would remove the need to worry about the selected submenu element not being aligned.