I posted a question last night about using media queries Fixed header and a responsive website issue
So I thought I finally cracked it but what seems to happen is when the screen is resized down the text jumps to the left and disappears. I thought all i had to do was make the #nav-wrapper the same size and the screen it will be on.
Here is the code
HTML
<body>
<div class="container">
<nav id="main-nav">
<div class="inner-nav" id="nav-wrapper">
<div class="ten columns">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</div>
</div>
</nav>
</body>
</html>
CSS - In Scss format as the CSS is compressed
//Navigation
#main-nav {
-webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-webkit-transition: box-shadow 0.2s linear;
-moz-transition: box-shadow 0.2s linear;
-ms-transition: box-shadow 0.2s linear;
-o-transition: box-shadow 0.2s linear;
transition: box-shadow 0.2s linear;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
display: block;
position: fixed;
top: 0;
left: 0;
float: left;
width: 100%;
z-index: 12;
height: 60px;
background-color: white;
#wrapper {
position: relative;
}
.inner-nav {
margin-left: auto;
margin-right: auto;
width: 800px;
}
ul {
float: right;
margin: 0;
width: 600px;
li {
vertical-align: middle;
display: inline;
margin: 0 2px;
color: black;
list-style-type: none;
a {
text-decoration: none;
}
}
}
}
And the media query I am calling
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
#nav-wrapper{
width:767px;
}
}
Can anyone tell me what I have to do so when the screen is mobile lets say the nav just resizes to fit the screen. Also I know the position:fixedthat how i want it so when the user scrolls the nav bar stays at the top. Although if there is a way to make the nav cover the top of the whole site I then wouldnt have to useposition:fixed as the framework I am using (http://www.getskeleton.com/) doesn't seem to allow me to do this.
I am trying to have a design like https://simple.com/ although not with the jQuery stuff just the nav at the top then the header across the page and content under. I have tried looks at their source but they are using custom style sheets and they are also compressed.
EDIT
It may not be clear what I am after, I want a website with a fixed header which is also responsive so on mobile devices it will fit the screen. The simple site is something im working off if anyone knows how they did there site im all ears.
The problem I see with your media query is that when the screen has a width bellow 767px you're telling the css processor to render the nav-wrapper element with a width of 767px. So, if a user accesses the page via a 480px width device, it would overflow the screen.
I'm not sure I understand what you're trying to accomplish, but my best suggest is to set the width to 100% in your media query (or delete it completely, and inherit the width:100% from the previous CSS declaration for that element).
Related
I'm working on a project of mine and I've got a relatively interesting idea that would look pretty nice, only issue is, I can't really figure out how to pull it off.
here's the deal. I've got my navigation bar set up and it looks something like this
Now for illustration purposes i've margined the small arrow under it. As in now, it's only a lone <img> placed under the navbar and margin applied to it to make it look like it's under it.
Basically what I'm trying to accomplish is, whenever you hover over a certain part of the navigation bar, the arrow will move under it. For sake of simplicity and readability of this post, let's not discuss any animations and smoothness, literally all I want is for the arrow to disappear from the original position and re-appear under the desired (hovered-over) location.
Any suggestions what would be the best (and easiest) way to pull this off?
Ideally I'd prefer usage of HTML/CSS only.
Probably only solution I came to so far is creating a separate arrow for each item inside the navigation bar.
Set it to
.nav img {
display: inline-block;
visbility: hidden;
}
And then create
.nav img:hover {
visiblity: visible;
}
Now there's multiple issues with this.
1) This would mean, people would need to hover on the arrows under it, intead of the actual navbar items for them to appear.
2) I would need to manually margin each and every arrow for them to fit under every single menu item.
3) While this would work on my screen, if you switch to any different resolution, the margin would be off for them.
I'm interested to hear, if you guys have any suggestions.
EDIT: I actually figured out a solution, that I can simply create a dropdown menu (another ul) and just put image there. Though if you still have any more intuitive and better working solutions, I'll be happy to view them.
If I understand your question correctly you can achieve this by doing the following without any images. I have added the class of active and given this a unique color to show what page you are currently viewing and then the hover effect will follow in a different color. The selector will be a psuedo element with pure css triangle and will show on hover.
Here is a fiddle to show you this in action Fiddle
And the markup:
<nav>
<ul>
<li><a class="active" href="#">Link</a></li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
and the css like this:
nav{
text-align: center;
background: #000;
}
nav ul{
list-style-type: none;
padding: 0;
margin:0;
}
nav li{
display:inline-block;
position: relative
}
nav li a{
color: #fff;
padding: 10px;
display: inline-block;
text-decoration: none;
}
nav li a:before{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid rgba(200,200,200,1);
position: absolute;
bottom:-20px;
left:0;right: 0;
margin: 0 auto;
content:'';
opacity: 0;
-ms-transition: opacity 300ms ease-in-out;
-moz-transition: opacity 300ms ease-in-out;
-webkit-transition: opacity 300ms ease-in-out;
-o-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
}
nav li a.active:before{
opacity: 1;
border-top: 20px solid red;
}
nav li a:hover:before{
opacity: 1;
}
I've a html formular in a part of a website, which only specific administration users can access. In this form, you can upload csv files. As only a small group of users can do this, the functionality is more important than the styling. So I decided not to do the usual trick overlaying a div over the field. I just want to archive one thing: The text in the field should look the in Chrome the same as in FF (vertical and horizontal centered text).
Here you can see the both renderings:
FF: http://i.stack.imgur.com/wbHhG.png
Chrome: http://i.stack.imgur.com/1BFHu.png
HTML-Code:
<input type="file" class="button blue full-width" name="csv_file" id="csv_file">
CSS-Styles:
color: #fff;
height: 50px;
line-height: 50px;
padding: 0 10%;
background-image: url("../images/item-hover-button-addtocart-normal.png");
border: medium none;
margin-bottom: 10px;
background-color: #fff;
text-align: center;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
display: block;
font-size: 14px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
You can fix one of the issues by adding this css:
input[type=file]::-webkit-file-upload-button {
margin: 1px 0;
height: 48px;
}
This makes the button take up more height like in FF and also makes the text vertically centered..
Not so sure how to horizontally center it though, maybe someone else might know a trick.
A jsfiddle to show it working: http://jsfiddle.net/bcwk8qvt/
[edit]
You can make it centered horizontally by adding most of your original CSS to a div wrapped around the input field like this:
http://jsfiddle.net/bcwk8qvt/3/
You still need to keep some of the css on the input field too though for FF to show it the same way.
I'm creating a function where you hover over a div, which will result in another div appearing; a simple, CSS-only pop-over.
However, whenever the pop-over-div has an opacity:0, it still has a physical height and width, rendering other divs under the pop-over unreachable.
I know I can work with display:none and display:block, but this will remove the possibility of adding a smooth "arrival" of the div; it'll just pop in and out of the screen.
The question: Is there a way to remove the physical dimensions of a div with opacity:0?
In my JSfiddle, you will notice you can get the .iconhover to appear when you hover over the H or e. If you hover over the rest of the word, you're officially hovering over .iconhover and not .wishicon, resulting in the pop-over not showing up.
I hope my question is clear enough.
HTML
<div class="qs">
<div class="wishicon">Hello world</div>
<div class="iconhover">Hovering...</div>
</div>
CSS
.iconhover {
height: auto;
width: 100px;
margin-left:-0px;
color: #fff;
background-color: #666;
box-shadow: 0 1px 0px rgba(0,0,0,1), 0 2px 0px rgba(0,0,0,1), 0 2px 10px rgba(0,0,0,.5);
margin-top:-20px;
margin-left: 20px;
border-radius: 5px;
opacity: 0;
font-size: 12px;
line-height: 1.5em;
font-weight: normal;
transition: opacity 0.5s, margin 0.5s;
-webkit-transition: opacity 0.5s, margin 0.5s;
padding:4px 20px;
text-align: center;
position:absolute;
float: left;
}
.qs > .wishicon:hover + .iconhover {
opacity: 1;
margin-top: -20px;
margin-left: 20px
}
I have a terrific solution which I use often.
On the element with opacity: 0 put pointer-events: none.
It will still have the dimensions, but it will be as if all events are inactive.
Then when you want it to be opacity: 1, return pointer-events to auto.
This is the next best thing to using display: block/none but it can be transitioned!
That would certainly be nice, but alas, I'm not aware of any "ghost" CSS property.
I would treat it the same as a hover menu: make the parent hoverable instead of the previous sibling:
.qs:hover > .iconhover { opacity: 1; ... }
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I wish to do something similar to this,
http://timheuer.com/blog/archives.aspx
i need to create a interactive circular links using CSS.
There are a number of ways you can achieve that effect. The page in question looks like it simply uses an image background in a css style. The simplest example is;
1 Image Background
#link1 {
background-image: url('/images/button1-trans.png')
}
#link2 {
background-image: url('/images/button2-trans.png')
}
#link1:hover {
background-image: url('/images/button1.png')
}
#link2:hover {
background-image: url('/images/button2.png')
}
1b Image Spriting
Using multiple images like requires multiple browser requests so 'image spriting' is a technique commonly used these-days to optimise the download into a single request which will then be cached resulting in a single 304 response. In Tim's case, his looks like this (although the original is transparent);
Then you use the same image for each link along with a clipping and offsetting to locate the appropriate part of the image;
#links a {
background-image:url('/images/allButtons.png')
background-position: 0px 0px; /* sets the row for all normal links */
width: 64px;
height: 64px; /* bounding box for the image */
}
#links #link1 {
background-position: 0px 0px; /* first icon on the first row */
}
#links #link2 {
background-position: -64px 0px; /* slides the image strip left to locate the second icon on the first row */
}
#links #link1:hover {
background-position: 0px -64px; /* first icon on the second row */
}
#links #link2:hover{
background-position: -64px -64px; /* second image, second row */
}
Notice the background-image in #links a? Well that's actually superfluous in this case, but it would be nice if you could do that, and then you would only need to use background-position-x in each icon and you would only need one #links a:hover which would set the common row using background-position-y:-64px but the FireFox team with their usual pedantic standards-only 'computer says no' approach decided NOT support background-position-x or y, even though every other browser does and it's in common use. Much to the chagrin of everyone who'd like to use it in this way.
However, zoom in on those buttons on the blog you linked to. See how they look all pixelated?
2 Pure CSS
You can achieve the circles at least with a combination of CSS border-style, border-width and border-radius as others have posted, but you still need the image for the center button.
3 Icon Fonts
☺☻☼☽☾☿
This is the most modern, and my preferred approach as it's fully scalable, transparent, really, really tiny and super-fast. You need to download your font of course, but SVG compresses really well. It's just text in your HTML, no images at all. No crazy CSS styling either. Checkout IcoMoon! See how you can zoom all the way in on those?
Zoom in on the icons above, and Here's a fiddle
You can use icoMoon free, but I've purchased the pro pack, it's honestly priced and the value is well worth it. It's an awesome site as you can even load up your own SVG icons and it will generate your own font for you. There's even IE6 support.
EXPLANATION
The page You show us use a images sprit with icon of all menu item, event with border. My example show how do this with simple css. You can also use images sprit but including only icon.
HTML CODE:
<ul>
<li><span>Home</span></li>
<li><span>Blog</span></li>
<li><span>Contact</span></li>
<li><span>About</span></li>
<li><span>Projects</span></li>
</ul>
CSS CODE
html, body {
background: #369BD7;
font-family: tahoma;
font-size: 12px;
}
a {
color: #fff;
}
ul {
clear:both;
margin: 0;
padding: 0;
}
ul li {
display:block;
position: relative;
float: left;
height: 80px;
width: 80px;
padding: 0;
margin-left: 10px;
list-style: none;
text-align: center;
white-space: nowrap;
}
ul li:first-child {
margin: 0;
}
ul li a {
display:block;
margin: 10px auto;
height: 40px;
width: 40px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border: 4px solid #fff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background: transparent url('http://cdn1.iconfinder.com/data/icons/TWG_Retina_Icons/24/home.png') no-repeat 50% 50%;
}
ul li a:hover {
background-color: #fff;
}
ul li a span {
display: block;
position: absolute;
bottom: 0;
left:0;
width: 100%;
text-align: center;
z-index: 1;
}
BORDER RADIUS BROWSER SUPPORT
http://caniuse.com/#search=border-radius
DEMO
http://jsfiddle.net/bartekbielawa/fgPf8/6/
The trick is to have the border-radius be half of the height and width. Then just use a gif or png for IE fallback.
.round-button {
width:100px;
height:100px;
border-radius:50px; /* be sure to add all the browser prefix versions */
}
I'm getting incorrect look in internet explorer 7,6, etc. It started when I added float: right; to #social-share div tag. I tried setting display: inline-block; to it and clear: both; but nothing worked for me.
You can see the issue live. Here is my code:
HTML
<header>
<div id="inner-border">
<div id="header-wrapper">
<div id="social-share">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_preferred_5"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4db8643a1c09a1ff"></script>
<!-- AddThis Button END -->
</div>
</div>
</div>
</header>
CSS
header {
width: 100%;
height: 115px;
background: #120c09;
margin: 50px 0 0 0;
border-top: 1px solid #100b07;
border-bottom: 1px solid #100b07;
}
#inner-border {
width: 100%;
height: 103px;
margin: 5px 0 0 0;
border-top: 1px dashed #291a10;
border-bottom: 1px dashed #291a10;
}
#header-wrapper {
width: 900px;
height: 103px;
margin: 0 auto;
}
#logo {
height: 230px;
width: 205px;
position: absolute;
z-index: 99;
margin: -57px 0 0 0;
background: url("../images/logo.png") no-repeat;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
#logo:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
#logo:active {
margin: -55px 0 0 0;
}
#social-share {
width: 280px;
float: right;
margin: -47px 0 0 0;
color: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
opacity: 0.2;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
#social-share:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
}
This is correct look:
This is inncorrect look (ie7, 6)
Ignore css3 related stuff, the problem is that in ie 7,6 everything is squeezed to the top and search bar appears in the middle instead of on the right.
Your top nav is breaking up in IE7 because it is not properly defined what goes where and how. First, your logo is sort of "floating" inside of your document, since it is positioned absolutely with no point of reference in its container, so lets start by fixing that;
Add position:relative to your #header-wrapper CSS rule so we can properly contain your logo within its boundaries:
#header-wrapper {
position:relative;
}
Next, we have to rearrange your logo to properly sit in the middle of your #header-wrapper div. Previously you were using margin: -57px auto 0 auto; to align your logo but since you are already absolutely positioning it you don't really need margin at all (a miracle it was even working at all), so let's do some mathematics to absolutely position your logo in the middle of your header wrapper div:
First, we eliminate that margin declaration and replace it with the following:
#logo {
left: 50%;
top:-57px;
margin-left: -102.5px;
}
Now, what did we do here? First we pushed your logo 50% from the left and then pushed it back with a negative margin by -102.5 pixels. Why did we do this? Because the left declaration pushes your element with width added to the calculation, so the push actually means "50% to the left + width of your element", so, we use the negative margin to compensate for the width, 50% - width/2. Here is a better explanation of the process.
After the two changes I listed are complete, you will find that the logo sits behind your slideshow area, this is due to the ie7 z-index bug and the fix is actually very simple:
header {
position:relative;
z-index:999; /* ie7 z-index bug fix */
}
We fix it by defining your header section as position:relative and give it a higher z-index than your slideshow area, this way your logo will be over your slideshow.
Now to fix your search bar from positioning itself to the left instead of the right we have to define your #social-share section as position:absolute and then push it to the right by using right:0, why? Because IE7 is positioning your search bar right next to the #social-share who is being pushed to the top by using a negative margin, and thus is not being removed from the stream as expected (was surprised it actually worked in modern browsers). So, define your #social-share section as absolute and the problem is solved:
#social-share {
position:absolute;
right:0;
}
And the final fix is a conditional class that we're going to use to target your #_atssh <div> tag to position it relatively to your document. IE7 is not taking it into account because it is absolutely positioned and so that long space is removed.
We can take advantage of your conditional classes added to your <html> tag by the boilerplate and target IE7 alone with a fix:
.ie7 #_atssh {
position:relative;
}
Note: There is probably a billion typos and grammar errors, I wrote it during lunch so I'll comeback to this in the future and fix them.
looks like you need a clearfix:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
add this to the element that contains your floated element
Based off what I can see (sorry, no IE6 or 7 available), you might be able to fix this by using position and top instead of using the negative margins like this:
Remove the margin: -57px 0 0 0; from #logo to be top: 0px;. Since you're already using position: absolute;, this should place the logo at the top edge of the screen for you.
Remove the margin: -47px 0 0 0; from #social-share and instead add position: relative; top: -47px;
Including the proper clear or "clearfix" mentioned by JKirchartz may also be required.
Add the CSS property zoom: 1 to <div id="social-share">, header-wrapper, or inner-border.
I like how quirks mode explains the issue of hasLayout which is an IE6 & IE7 specific problem: http://www.satzansatz.de/cssd/onhavinglayout.html.