I have a crazy navigation menu that I have to code. It's kind of tough. Please see the screenshot of the design here:
navigation menu screenshot
As you can see, the background of the "Home" menu item is quite tough! I can't figure out how to make its background "see-through", meaning it cuts through the dark background and shows the patterned green background.
Do you know how to do this using css?
Thanks in advance.
You can use either:
background: transparent;
background: inherit;
But, you'll need to structure your HTML so that the Home, Journal, etc. links are embedded in the box with the background.
For rounded corners, check this out.
Or you can use images with shaped transparency as the background.
#Gary [comment]: inherit grabs the first settings it finds going up the hierarchy. So if you have a middle layer, it's gonna pick up on its settings instead.
Something you might try then is to use:
background-image: url('greencheckers'); /* outer */
background-color: black; /* middle */
background-image: inherit; /* link */
In theory, it should look for the first background-image setting, then. But, I've never used this, so no guarantees.
One way you could do it is the opposite approach you'd normally take. Apply a black background to the other elements, leaving a gap where the highlighted tab is. Kind of a reverse sliding doors.
Create two very long black images: one for the right which has a rounded corner on its left, and one for the left with the corner on the right and position them on either side of the current element. Sadly, I don't think plain CSS will be able to do this, but it looks like you're already using JS.
I'm not sure how feasible this will be, it's just off the top of my head, but it could be an interesting approach.
Another interesting approach to transparent (or translucent) effects is to give two sections either
1) the same background image, or
2) similar background images, with one of them modified with color or blur or whatever
... and make sure that their background-position is the same.
This is demonstrated in Eric Meyer's "Complex Spiral" demo. (Here's another version he made.)
Clarification: this is in Meyer's "Edge" section for a reason - it's not compatible with IE6. (Thanks, Boris.)
You can emulate fixed background position unfortunately not supported by IE6 (see nerdposeur's answer) with careful "manual" positioning using background-position. Position the big image with 0,0 offset. Use the same image for selected tab, but offset it to the left and up by exactly the position of the top left corner of the tab. That will ensure exact matching of the two backgrounds you want.
You seem to have a fixed menu, so it means carefully writing background CSS for your four menu elements, one by one. Of course, if your menu is dynamic, this approach does not work. Here's a demo I quickly cooked up starting with this page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS Tabbed Navigation</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 20px;
padding: 0px;
background: #CACCB4;
font: 16px arial, sans-serif;
background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif');
}
pre {text-indent: 30px}
#tabmenu {
color: #000;
border-bottom: 2px solid black;
margin: 12px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px }
#tabmenu li {
display: inline;
overflow: hidden;
list-style-type: none; }
#tabmenu a, a.active {
color: #DEDECF;
background: #898B5E;
font: bold 1em "Trebuchet MS", Arial, sans-serif;
border: 2px solid black;
padding: 2px 5px 0px 5px;
margin: 0px;
text-decoration: none; }
#tabmenu a.active {
background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif');
background-position: -125px -18px;
border-bottom: 3px solid #ABAD85; }
#content {font: 0.9em/1.3em "bitstream vera sans", verdana, sans-serif;
text-align: justify;
background: #ABAD85;
padding: 20px;
border: 2px solid black;
border-top: none;
z-index: 2; }
#content a {
text-decoration: none;
color: #E8E9BE; }
#content a:hover { background: #898B5E; }
</style>
</head>
<body>
<ul id="tabmenu">
<li>Enormous</li>
<li><a class="active" href="tab2.html">Flared</a></li>
<li>Nostrils</li>
</ul>
<div id="content">
<p>If one examines subpatriarchialist material theory, one is faced with a choice: either accept the presemioticist paradigm of reality or conclude that the task of the artist is deconstruction, given that reality is equal to art. It could be said that the subject is contextualised into a Batailleist 'powerful communication' that includes language as a totality. Marx uses the term 'precapitalist semiotic theory' to denote the bridge between narrativity and society.</p>
<p>Any number of desituationisms concerning Sartreist absurdity may be discovered. In a sense, the textual paradigm of consensus states that reality has significance. Baudrillard uses the term 'surrealism' to denote the absurdity, and subsequent rubicon, of substructuralist class. It could be said that la Tournier[4] holds that the works of Pynchon are modernistic. The premise of the textual paradigm of consensus states that the significance of the observer is social comment. However, in Gravity's Rainbow, Pynchon examines textual materialism; in The Crying of Lot 49 he denies subcultural discourse.</p>
<br />
</div>
</body>
</html>
I suggest making a 30 x 1 (Height x Width) image, fill it black and set opacity on it to about 35%... Save as .png (not compatible with < IE7 browsers)
Add that image to your menu background CSS class as follows:
#MainMenu {
display: block;
height: 30px;
background; transparent url("menuBG.png") repeat-x;
}
I know this works because it's what I did for my site. The site isn't complete, but you can check out a screenshot:
http://www.logansarchive.za.net/preview.jpg
HTH
Related
So... I created this weird solution to a weird problem: I needed shadows with straight sides, like a gradient with clean sides instead of a box-shadow.
I used an :after element to attach a gradient to the bottom of the elements that needed it (in the sample, this is commented out). I then tried an inset shadow with negative size and this works the same way. These work perfectly except for one minor detail: I can't use it like a shadow because the elements it covers sometimes aren't clickable.
Sample: http://codepen.io/syren/pen/jlcym
Some things I've ruled out already:
1) Using inset-shadows on the elements underneath: It needs to be applied to the original element or else it won't function like it's shadow when things move. If I could figure out
2) Using a box-shadow with negative spread or size: This works, and I would use this except it doesn't look like how the designer wants it to.
3) Z-index: It's messy because it's a very dynamic page, so I can use it in some places but not in others because seeing as its a shadow, it should be over everything visually at least.
So, to recap, I want it to look exactly the way it does with the clean edges, and I need it to be attached to the element not the surrounding elements and I'd really like it to be a pure CSS solution, like with pseudo-elements.
Any ideas?
http://codepen.io/anon/pen/cuJqG
html:
<nav>
<h1>I'm an Example Header</h1>
</nav>
<section>
<h3>You can't click me because the shadow above is covering me!</h3>
css:
nav{
border-bottom:3px solid #000;
position:relative;
}
h1{
font-family: "Helvetica";
text-transform:uppercase;
margin: 20px 10px 10px;
}
h3{
font-family: Helvetica, sans-serif;
font-weight: 600;
padding:10px;
margin:0;
cursor: pointer;
width: 98.75%;
color: white;
background: #ff0000;
box-shadow: inset 0 20px 40px -20px #000;
}
I'm trying to design a website for my mums backpackers business. The problem that I am having is between my banner image and my navbar there is a blank white line that you can see in the image. I thought this is to do with the margin so I have set it to zero for both of the elements to no avail.
Also a second question - Why does my black border not cover the main content as well? I thought since its a body background it would go around every element in the body.
I realise there may have been similar questions but I can't find the answer anywhere. I will appreciate anyones input - this is my first post here so I'm sorry if I screwed up any formatting.
The image of my website can be found here:
http://postimage.org/image/20dhjcdb8/
Thanks in advance.
I currently have the following code in my index.html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
</head>
<body>
<img src="final.jpg" id="banner"></img>
<ul id="nav">
<li class="links">Home</li>
<li class="links">Planning</li>
<li class="links">Construction</li>
<li class="links">Evaluation</li>
</ul>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
</div>
</body>
</html>
and the following CSS code:
html{
font-family: sans-serif;
background-color:#464E54;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 5px solid black;
}
#banner{
padding: 0px;
margin: 0;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#mainc {
width: 960px;
float: right;
background-color: white;
margin: 0;
}
.links {
float: left;
margin: 0px;
}
a:link, a:visited {
display: block;
width: 232px;
font-weight: bold;
color: grey;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover, a:active{
background-color: #333333;
}
The problem that I am having is between my banner image and my navbar there is a blank white line that you can see in the image. I thought this is to do with the margin so I have set it to zero for both of the elements to no avail.
In HTML images are by default inline level elements so they follow text rules (and will have blank space below to keep the correct alignment with letters like "p" and such). You can either assign display: block to the header image, or define the header container to have the same exact height as the image
Also a second question - Why does my black border not cover the main content as well? I thought since its a body background it would go around every element in the body.
Because floated elements pop out of their container, you have to clear the float to extend the container with something like
<div style="clear: both"></div>
or use some reset/clearfix css such as the one provided by html5boilerplate.
add to your css
#banner { display: block; }
If you remove the float property of #mainc then the border will surround all the content. By using float, you are taking the div out of the main page flow.
I want to use an image for the background of a select/dropdown. The following CSS works fine in Firefox and IE, but does not in Chrome:
#main .drop-down-loc { width:506px; height: 30px; border: none;
background-color: Transparent;
background: url(images/text-field.gif) no-repeat 0 0;
padding:4px; line-height: 21px;}
select
{
-webkit-appearance: none;
}
If you need to you can also add an image that contains the arrow as part of the background.
What Arne said - you can't reliably style select boxes and have them look anything like consistent across browsers.
Uniform: https://github.com/pixelmatrix/uniform is a javascript solution which gives you good graphic control over your form elements - it's still Javascript, but it's about as nice as javascript gets for solving this problem.
Generally, it's considered a bad practice to style standard form controls because the output looks so different on each browser. See: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ for some rendered examples.
That being said, I've had some luck making the background color an RGBA value:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #d00;
}
select {
background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0;
padding:4px;
line-height: 21px;
border: 1px solid #fff;
}
</style>
</head>
<body>
<select>
<option>Foo</option>
<option>Bar</option>
<option>Something longer</option>
</body>
</html>
Google Chrome still renders a gradient on top of the background image in the color that you pass to rgba(r,g,b,0.1) but choosing a color that compliments your image and making the alpha 0.1 reduces the effect of this.
You can use the CSS styles below for all browsers except Firefox 30:
select {
background: url(dropdown_arw.png) no-repeat right center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 90px;
text-indent: 0.01px;
text-overflow: "";
}
Updated
Here is a solution for Firefox 30. There is a little trick for custom select elements in firefox :-moz-any() CSS pseudo class.
I noticed I am not the first to ask about CSS sliding doors. However this seems (at least to me) to be a rather odd problem which I have not seen an answer for.
Trying to create a simple rounded corner link button:
html:
<span>Add A New Somthing</span>
css:
.link_button {
background: transparent url('img/backgrounds/bg-buttonRight.png') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial;
height: 41px;
margin-right: 6px;
padding-right: 14px;
text-decoration: none;
}
.link_button span {
background: transparent url('img/backgrounds/bg-buttonLeft.png') no-repeat top left;
display: block;
line-height: 31px;
padding: 5px 0 5px 14px;
}
.link_button:active {
background-position: bottom right;
color: #000;
outline: none;
}
.link_button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px;
}
results:
alt text http://www.codefruition.com/sandbox/img/buttonProblems/problemImageOne.jpg
The two images are overlapping, which is what I want, but why the discoloration? Why would one be darker? I tried using png jpg, gif, with and without transparency.
I posted the code here, along with another attempt using only one jpg instead of two, but still the same results.
Did I miss something?
Thanks in advance.
Your problem isn't your CSS. It's that the images generated for use in the CSS aren't seamless. The edges have a darker color that doesn't fade out in less than 14px, the width of the right "door."
There seems to be a bevel or an inner shadow on the button. If you are the designer and have the Photoshop document, check what the styling is on the button; you may have to shrink the aforementioned styles.
ethyreal, the two images are completely different colours, hence the discolouration. I suggest you actually try physically doing it yourself.
Open bg-buttonLeft.png and bg-buttonRight.png separately in Photoshop or some form of image editing software, then place bg-buttonRight.png over bg-buttonLeft.png and you should notice the two are actually different colours.
If you still can't see it, move your head vertically up and down to see you monitor from different angles.
Are you on a Mac using Safari? Mac's have 1.8 gamma value that wouldn’t match with (files created on) Windows’ 2.2 gamma value. This was fixed in Snow Leopard, which now has 2.2 by default.
Try previewing in Firefox and let us know if its the same?
Your image has a transparency set to the button. Look at your layer - maybe it is set to 90% transparency or something. When they overlap you get a little darker on the overlap image?
This question already has answers here:
“text-decoration” and the “:after” pseudo-element, revisited
(11 answers)
Closed 8 years ago.
Like all right-thinking people, I hate to click on a link and discover too late that it leads to a browser-crippling PDF or Microsoft Office file. I thought I'd make life a bit easier for people by displaying a little icon next to links that lead to such files. With IE8 finally supporting the :after pseudo-element, I thought the CSS declaration would be fairly simple:
a.file_pdf:after {
content:url('/images/pdf.png');
text-decoration: none;
padding-left: 5px;
}
In IE8, this works fine. In Firefox and Chrome, though, text-decoration: none is ignored, and the underline stretches unattractively across the bottom of the icon. Is there a way to fix this without "cheating" by using an extra <span> tag?
I'm doing it in a different way, using attribute selectors, a background image and a padding (as xandy also suggested):
a[href$=".pdf"] {
padding-right: 21px; /* space for the icon */
background: url(graphics/pdf.png) no-repeat right bottom;
}
This works in IE7 too.
Here's a complete example
In IE7 the PDF icon won't be visible as it does not understand data URIs:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PDF</title>
<style type="text/css">
a:link,
a:visited {
color: #317408;
background: #eee;
}
a[href$=".pdf"] {
padding-right: 21px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHhSURBVDjLjZPLSxtRFIfVZRdWi0oFBf+BrhRx5dKVYKG4tLhRqlgXPmIVJQiC60JCCZYqFHQh7rrQlUK7aVUUfCBRG5RkJpNkkswrM5NEf73n6gxpHujAB/fOvefjnHM5VQCqCPa1MNoZnU/Qxqhx4woE7ZZlpXO53F0+n0c52Dl8Pt/nQkmhoJOCdUWBsvQJ2u4ODMOAwvapVAqSJHGJKIrw+/2uxAmuJgFdMDUVincSxvEBTNOEpmlIp9OIxWJckMlkoOs6AoHAg6RYYNs2kp4RqOvfuIACVFVFPB4vKYn3pFjAykDSOwVta52vqW6nlEQiwTMRBKGygIh9GEDCMwZH6EgoE+qHLMuVBdbfKwjv3yE6Ogjz/PQ/CZVDPSFRRYE4/RHy1y8wry8RGWGSqyC/nM1meX9IQpQV2JKIUH8vrEgYmeAFwuPDCHa9QehtD26HBhCZnYC8ucGzKSsIL8wgsjiH1PYPxL+vQvm5B/3sBMLyIm7GhhCe90BaWykV/Gp+VR9oqPVe9vfBTsruM1HtBKVPmFIUNusBrV3B4ev6bsbyXlPdkbr/u+StHUkxruBPY+0KY8f38oWX/byvNAdluHNLeOxDB+uyQQfPCWZ3NT69BYJWkjxjnB1o9Fv/ASQ5s+ABz8i2AAAAAElFTkSuQmCC);
background-repeat: no-repeat;
background-position: right bottom;
}
a:hover {
color: #eee;
outline: none;
background-color: #317408;
text-decoration: none;
}
</style>
</head>
<body>
<p>
Here's the PDF
</p>
</body>
</html>
how about using background image?
a.file_pdf {
background: url('/images/pdf.png') no-repeat right;
padding-right: 30px;
...
}
EDIT
Test and runs perfectly on my FF 3.5, should have no issue in most browser since only using traditional image replacement technique.