I am learning web-designing. Trying to replicate a web for practice. Everything seem to be OK.However the space between the nav bar and the first div takes 20px margin space. I want the margin space to be 0px. The css file hold margin as 0px but there is always 20px when I inspect the page. how do i solve this? Thanks in Advance.
You can overwrite the css class that has the 20px margin by using
.className {
margin: 0px !importart;
}
As you suggested i tried the above soln.It didnt work.
I am sending an image and the code.. hope it helps.
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
the image is for the inspect of the nar bar...where the margin is not accepting 0px.
Related
I am trying to add padding after a <details> tag because the next <p> is basically touching it...
I tried adding padding-bottom but it just makes the grey tag larger and doesn't add space...
The CSS I currently have is:
// Start Drop Down Details
details {
padding: .8em;
background: #353535;
border-radius: 20px
}
summary::-webkit-details-marker {display: none; }
details summary::before {
content:"►";
padding: .7em;
}
details[open] summary::before {
content:"▼";
padding: .7em;
}
If you want to see what it looks like live you can see it here: https://www.seekadventure.net/d/198-myog-backpacking-quilt-outdoorink
Padding adds space between the content and the border i.e. making the grey tag bigger.
Margin adds space between the border of an element and the border of other elements.
If you want to add space between the two elements you will need to add margin.
details {
margin-bottom: 1rem;
padding: .8em;
background: #353535;
border-radius: 20px
}
I want it to be like this:
Currently, it is like this:
So, as shown most of the background is highlighted in white but there is a small left and right section which is purple.
The code I have so far which correspond to the menu items is:
.collapsible-menu ul
li:hover:not(:last-child) {
background-color:white;
width:100%;
color: #4C27B3;
text-decoration: none;
outline:none;
}
It is probably a quick fix but I need a second pair of eyes to pinpoint the issue. Many thanks in advance.
All code can be seen here:
https://codepen.io/JoyFulCoding/pen/EzXowL
in Css
.menu-content{
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-weight: bold;
padding: 0 0 0 50px;
/* add this margin left & right to make hover white full screen*/
margin-left: -79px;
margin-right: -30px;
}
in Css
.collapsible-menu {
background-color: #4C27B3;
border: none;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
Remove Padding from this class in code
I am trying to make it so my navbar at link
is not long in height. I have been searching for an answer to this without any real luck, although got close using this answer
Instead of
and add these 3 line of css
.navbar-xs { min-height:28px; height: 28px; }
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 28px; }..
but it stripped out all of my styles. Is there a way to do this?
.nav > li > a {
padding-left: 5px;
padding-right: 5px;
}
In your case there is no need not use container inside bootstrap nav tag.
Getting rid of it has reduced the height of the navbar.
I am scratching my head to resolve this issue but without success.
It is very simple: a div with rounded corners with a h3 on the top (I am trying to simulate a panel with title), very simple.
For some reason, the h3 always has a space, feels like it has a margin or something.
.example-wrapper {
border: 1px solid #555;
border-radius: 10px 10px 0 0;}
.example-wrapper h3 {
background: #555;
color: #fff;
border-radius: 10px 10px 0 0;
padding: 10px;
font-size: 16px;}
<DIV class="example-wrapper">
<H3>Herry Potter</H3>
</DIV>
Any comments would be appreciated.
You can find the issue here.
Yes, H# has margins by default. Set H3{ margin: 0; } to solve it. You can always use developer tools to inspect elements and see any style applied to them.
So I'm working on a tumblr theme design and each post should has a wrapping container (.posts-wrapper) that has 66px of bottom-padding, 1px bottom border, and 84px of bottom-margin, then some page navigation at the bottom. I wanted to remove the margin and divder on the final post of the page so there's nothing between the navigation and the last post, but for some reason my css is not applying.
.index-wrapper {
background-color: #ffffff;
min-height: 600px;
}
.posts-wrapper {
margin: 0 auto;
margin-bottom: 84px;
padding-bottom: 66px;
border-bottom: 1px solid;
}
.posts-wrapper:last-child {
margin-bottom: 0px !important;
padding-bottom: 66px !important;
border-bottom: 0px solid !important;
}
.index-post {
max-width: 960px;
margin: 0 auto;
padding:0 50px;
position:relative;
}
Here is a reference link to my work in progress on dropbox: http://dl.dropboxusercontent.com/u/35202847/writersblock_theme/index.html
Maybe I'm being silly and forgot something simple to do. Any insight would be greatly appreciated
Your problem is that the last .posts-wrapper div you have is NOT the last child of its parent. You have the <nav> element as a sibling after it.
As you're already using CSS3 selectors, you can try the :last-of-type pseudo-selector to get the last .posts-wrapper element.
.posts-wrapper:last-of-type {
margin-bottom:0;
padding-bottom:66px;
border-bottom:0;
}