I'm currently working on a portfolio project and I have a concept for the header but I am having difficult achieving it.
I want to make the bottom border of my header (and top border of my footer) look like it's a brush stroke. As seen in my photobucket link.
http://i568.photobucket.com/albums/ss130/Lovin_RainyNights/ScreenShot2014-09-29at50243PM.png
I created a border image to use but it's getting hidden in the box model since the headers background color is the same as the border. I changed the background color to black so it can easily be seen
http://i568.photobucket.com/albums/ss130/Lovin_RainyNights/ScreenShot2014-09-29at50110PM.png
So what I would like to know is: Is there a way to get the border image to border the outside, not the inside of the header?
This is the code I have
HTML
<header>
<h1>My Name</h1>
<nav>
<ul>
<li><span id="current">Projects</span></li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS
header{
display: block;
background-color: black;
padding: 5px 10px;
border-bottom: 15px solid transparent;
border-image: url("border.png") 0 0 33 0;
}
h1{
float: left;
}
nav{
text-align: right;
}
nav li{
display: inline;
list-style: none;
}
Any advice would be greatly appreciated, THANKS!
The border-image-outset property specifies the amount by which the border image area extends beyond the border box.
http://www.w3schools.com/cssref/css3_pr_border-image-outset.asp
div {
border-image-source: url(border.png);
border-image-outset: 15px;
}
I believe you should not do it. You can wrap your footer into a bordered-footer and add the border to the borderedfooter. In general, the border is part of a tag. You can set border-image-outset as #bpettijohn pointed out, but I think that would be confusing later when you are already used to the standard meaning of border.
Related
I'm trying to style my navbar and work on its aesthetics but I think I'm missing a trick. The darken which happens on the hover is too big for my liking, but the only size change I can do is an overall padding which doesn't allow fine tuning.
I've spent the last 2 hours looking for a solution and I'm stumped. I bet it's something simple and I'm just not seeing it.
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 6%;
transition: top 0.3s;
z-index: 2;
}
#navbar a {
float: left;
display: block;
color: white;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
border-radius: 30px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
height: 6%;
border: 1px inset #000000;
}
<div id="navbar">
<div class=buttonContainer>
<div class="homeBorder">
Home </div>
Skills
Projects
About
Contact
</div>
</div>
Right now, your code does not show any "darkening" but I hope I still understood your question correctly: You want the background of the navbar links to be of a certain color on hover but the area is too big, especially in height?
You are right, your issue is caused by the 10px-padding that you have set on your link elements. I would recommend you to reduce the padding to maybe 5px to achieve the height you would like to see on hover (same padding for normal and hover, otherwise the links "jump" on hover). You could then wrap all links in an additional div to make universal changes or you could simply work with margins instead. I would also recommend not setting a specific height on the navbar but letting the elements inside determine its height by using padding and margin.
What always helps me when dealing with spacing in CSS, is adding differently colored backgrounds to ALL of the elements involved as to understand their behavior and to test my code.
In case there is a specific reason why you cannot reduce the padding, then please edit your question and make your requirements clearer.
Btw, there is one fatal error in your code:
<div class=buttonContainer>
should be:
<div class="buttonContainer">
(quotes!!)
...and ideally it should be:
<div class="button-container">
as it's not best practise to use camel case in CSS as opposed to JS or other programming languages.
Just started web dev, and I want to reproduce this navbar style.
Can anyone help me with just how to stylishing navbart list item for one element? I'll try to learn how to to this. Thanks
PS: to be more helpful, if it's possible to do it with sass syntaxe, it will be great. Thanks again xD
It is really simple! Simply add some divs into your nav. And style it accordingly. I didn't include the icons you can easily find them. The rainbow border on the bottom can also be set to stripes, check out this website: https://stripesgenerator.com
body {
margin: 0;
background-color: #f0f0f0
}
nav {
width: 80vw;
background-color: white;
margin: auto;
/* Border bottom */
border-bottom: 2px solid green;
border-image-source: linear-gradient(to right, gray, red, orange, yellow, green, lightblue, darkblue);
border-image-slice: 20;
}
div {
display: inline-block;
padding: 10vh 2.4vw;
}
<nav>
<div>Home</div>
<div>Dex</div>
<div>Apps</div>
<div>Trading</div>
<div>TV</div>
<div>Play</div>
<div>News</div>
</nav>
they probably use flexbox to do this.
I recommend the very useful website CSSTRICKS to see what it is ;)
you can see inside the code of the page with a right click then "inspect" to see everything on their html and css.
In IE11 and Edge (on Windows 10), the following HTML/CSS displays a strange, transparent border where there shouldn't be.
<!DOCTYPE html><html>
<head>
<style>
body {
background-color:red;
font-size: 10pt;
}
.menu {
background-color: #5f6062;
overflow:hidden; /* To contain floats */
box-sizing: content-box;
}
.right-menu {
float:right;
margin:auto;
padding:0 0 0 20px;
list-style: none;
}
.spacer {
background-color: #ffffff;
height: 20px;
}
.content {
background-color: #ffffff;
border-radius:0 0 10px 10px;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="menu">
<ul class="right-menu">
<li>Link</li>
</ul>
</div>
<div class="spacer"></div>
<div class="content">
<div class="content-title">There shouldn't be a 'border' above this...</div>
</div>
</body>
</html>
JSFiddle (You may need to resize the window vertically to see the 'border' fade in and out in JSFiddle — which is even stranger.)
The most interesting part is that the issue seems to be caused by border-radius. If I remove it, the 'border' is gone. It will also go away if I remove some other element (the .menu div for example), but that is less of an option since I would prefer not having to mess with the structure of the site having this problem.
I've found mentions of background-clip: content-box or padding-box as a solution, but it doesn't seem to work here.
Also of note, while trying to reduce the size of my demonstration, I ended up with a code that showed the border in JSFiddle, but not in a plain HTML file. This is the smallest I could get to display the 'border' both inside JSFiddle and a plain HTML file.
Found the bug in EDGE's Platform Issues but still would like to find a workaround...
It looks like IE is rendering a transparent border to display the border-radius but picks the 'background' color further down the layers than it should (in my sample, using red instead of white).
So I went with workarounds...
On my actual page, two elements are having this bug. For one my workaround was to set the background-color of another element further behind the one with border-radius and for the other to set an actual border the same color as the element's background.
The issue I'm facing today is with the width of a gadget. I would like the border-bottom line of #customheader to extend to the full width of any given screen. Right now however the border-bottom is only the width of the blog. How would I go about lengthening the border-bottom without compromising on the other elements of the gadget?
The URL to my blog is as follows: http://www.blankesque.com and the coding to the gadget is stated below:
<style>
#customheader a {
font-size: 60px;
font-family: lato light, 'cantarell';
color: #737373;
text-transform: uppercase;
font-weight: normal!important;
letter-spacing: 0.07em;
}
#customheader {
margin: 7% 0 2% 0;
padding: 0 0 3.5% 0;
border-bottom: 1px solid #cccccc;
}
#customheader a:hover {
color: #000000!important;
}
</style>
<center>
<div id='customheader'>
<a href='http://www.blankesque.com'>Blankesque</a>
</div>
</center>
You need to move it outside of .content-outer, which is set to 1080px.
If possible, move the entire <header>...</header> outside of .content-outer
you could add an invisible div with position: absolute where you need the border, and set the width to 100%. Then you can either set the border on that or use the div as a border.
example JSFiddle
If you want a line that goes below your #customerheader and extends to the full width of the screen then its best to introduce an independent <hr/> which sits below your <center> element and has the following CSS properties:
hr {
width: 100%;
border-bottom: 1px solid #cccccc;
}
Keep in mind, you will have to remove the border-bottom: 1px solid #cccccc; from your #customerheader, since the horizontal line element is replacing this effect.
In retrospect, the above is not even necessary if you fix the layout issues in your site, which are causing your elements to seem to be out of alignment. You need to look into what is making them skew to the left, but with the code you have provided I cannot easily identify the root of the issue.
Let me know if you have any questions
I am adding content to this page: http://rouviere.com/index-new and for some reason there is a faint border around the inset photo in the top section.
Here is the html:
<div class="illustration">
<img class="promo" src="http://www.rouviere.com/_photos/slides_photos.jpg" alt="we package it up" />
</div><!-- end #illustration -->
<div class="headline">
<h2>Photos</h2>
<p id="sub-head">Show the magic of your world with fine photos</p>
</div>
Here is the CSS:
p#sub-head { font-size: 24px; margin: 0 0 10px 35px; color: #000; }
img.promo { float: right; margin-right: 20px; z-index: 0; }
I tried adding border: none; to the image but it didn't make any difference.
I would appreciate any guidance towards a solution.
Thanks.
The border is on the image itself.
This is a legitimate question. Google has multiple pages of people asking this same question. It is a Photoshop bug that has been around since CS3, that adds a faint border to images that are down-sampled.
The solution is to remove the background if the image is down-sampled so that the isolated image is on a transparent background.
Actually, I found an answer that might work for you. Use the following code:
border: 0px solid #cccccc !important;
It made it disappear for me, however, if you use the box-shadow function, you'll still see a border space on the side where the shadow renders.
Hope that helps