On my site, http://www.tokensofchange.org, the only way to position my navbar in the correct place is to use a margin-top style in the CSS.
.nav {
margin-top:10.3%;
width: 70%;
background-color: #050936;
height:92px;
float: right;
border-top: 5px solid rgba(0,108,255,0.35);
}
If I remove the margin-top: 10.3%, the navbar is pushed up under the green buttons shown on the site. I am not sure if the background image is formatted incorrectly to push the navbar down:
.backgrounddiv {
background: url('/images/Background_Index3.jpg');
padding-bottom: 2%;
background-size: 100% auto;
}
The two buttons displayed do not have any margin styles included, so I am unsure why the navbar does not sit below the header with the background image, logo, and buttons. Any ideas would be greatly appreciated. Thanks!
You have a negative margin of -9em on the .wrapper div. Remove that and you can then remove the margin-top:10.3%; from your navigation.
I hope that helps
Related
Can someone please help me with my Navigation Bar? I have been trying to research how to create one myself, but the buttons seem to end up small, and the bar itself won't stretch to the entirety of the page despite the width 100% snippet. Thanks in advance.
.navBar {
width: 100%
}
.navBar ul {
list-style-type: none;
}
/* Styling of buttons on the NavBar */
.navBar ul a {
float: left;
background-color: #202020;
color: #ffffff;
padding-bottom: 12px;
display: block;
text-decoration-line:none;
font-family: 'Montserrat', sans-serif;
size: 20px;
}
/* Styling of NavBar buttons when mouse hovers over it */
.navBar ul a:hover {
background-color: #006633
<div Class=navBar>Test
<ul>test1</ul>
<ul>test2</ul>
<ul>test3</ul>
</div>
You're looking for CSS relative units.
If you want to make an element match the total width of the screen (specific wording here) then you want to use width: 100vw;. If the element is not rendered at the left (or right) most pixel it would overflow past the screen. Using width: 100%; would have the same effect only it's relative to it's parent element, not relative to the total width of the screen.
It is good practice to add CSS Resets to the top of your CSS styles. Web browsers have default margins and padding which can prevent your divs from extending the full width of the screen.
Add this to the top your CSS Stylesheet.
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
This code will reset the browser default margins and padding. Your navbar should then take up the full page width when you use .navBar { width: 100%;}
For your buttons you can add more padding until you are satisfied. For example:
.navBar ul a {
padding: 10px 30px;
}
This will give your buttons 10px padding on the top and bottom and 30px padding left and right.
As mentioned above, please select the answer that was most useful to you.
I am building a webpage and I am attempting to add an image behind the container in the margins on the left, right and top.
The closest example of my current webpage is found in this demo: https://html5up.net/phantom.
I wish to ass a background image similar to the blue in this image: https://i.stack.imgur.com/NHbqU.png
So I want the image to be behind a floating page.
Well, add the background image for the body and add background: white (or whatever color you want) to the content container to avoid the body background "shining through".
Is the following code what you were looking for?
If so, essentially it is a background color for the "border", the above element having a margin.
body {
background-color: dodgerblue;
}
#content {
position: fixed;
background-color: #fff;
border-radius: 15px;
padding-top: 15px;
text-align:center;
height: 100%;
width: 88%;
margin: 25px;
}
<body>
<div id="content">
<h1>Wow!!</h1>
</div>
</body>
I am trying to get a banner image to sit over a white box with text in it. I want the banner image to float over and hang off each edge, not be constrained to the size of the box div.
I have tried making the banner an image and positioning it absolutely, but that did't provide a good result. The page is designed to be responsive, and while the other elements shrunk in side accordingly, the image remained large.
Attached is an image of what I am trying to achieve with the banner. Everything is coded, it's just the banner that I cannot get right.
Any help is greatly appreciated!
Thank you, Nick
You can:
Apply a position:relative to the banner and the whitebox
Move the top of the banner downwards (using a positive px value)...
(Optionally) move the top of the whitebox upwards (using a negative px value)
See example:
.whitebox, .banner {
position: relative;
margin: 0 auto;
}
.banner {
width: 360px;
height: 45px;
border: 1px solid rgba(191,191,191,1);
}
.whitebox {
width: 300px;
height: 200px;
border: 1px solid rgba(127,127,127,1);
}
.banner {
top: 80px;
}
<div class="banner">
</div>
<div class="whitebox">
</div>
i'm new to css sprits. i have added a small red color arrow like image to all links in a DIV ID. it looks like this.(image attached)
how to get some padding after the background image ? i mean some space between image and text using CSS.
CSS
#maincontent a:link {
background: url(images/css-images.png) no-repeat top left;
background-position: 0 0;
width: 4px;
height: 12px;
display:inline;
}
HTML
<div id="maincontent">
Btech III
</div>
i tried adding to css padding right, but it is giving some space after text not after image.
You want to use padding on your link, this will leave the background where it is but move the text, try padding-left: 25px;. But adding padding will add to the width so you will want to adjust the width of your link and reduce it by the amount of padding you have added (maybe not in this example)
Also your example image isn't loading
Try this:
#maincontent a:link {
background: url(images/css-images.png) no-repeat top left;
background-position: 0 0;
width: 4px;
padding-left: 25px;
height: 12px;
display:inline;
}
just apply a padding-left or a text-indent to your link
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.