I have my nav inside the header. I have an image in the corner and want the navigation links, which I made as buttons, on the right, but higher up within the white box. I had a problem with the header not resizing when i shrunk the page but I fixed that, but now the buttons are off the header. They also do not resize when I shrink the page. Help is greatly appreciated. Thanks. The url is http://tolitakeover.com
Here is html:
<header>
<nav>
<ul>
<li>Contact</li>
<li>Blog</li>
<li>TBD</li>
<li>Affiliates</li>
<li>Events</li>
</ul>
</nav>
</header>
Here is css:
nav{
background:url('http://tolitakeover.com/images/toliheader.fw.png');
background-size: 40% 100%;
margin-left: 5%;
width: 90%;
height: 100%;
background-repeat: no-repeat;
background-color:white;
}
nav ul{
padding-top:20%;
padding-right:3%;
height:60%;
}
nav li{
display:inline;
float:right;
padding-right:1%;
padding-top:-50px;
}
nav ul li a,
nav ul li a:visited{
background-color: white;
color: black;
display:block;
}
nav ul li a:hover{
text-decoration:none;
background-color:white;
color:black;
}
.button {
display: inline-block;
text-decoration: none;
color: black;
font-weight: bold;
background-color: lightgray;
padding: 5px 20px;
margin-left:3%;
margin-right:3%;
font-size: 1.15em;
border: 1px solid red;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0px -1px 0px rgba(0,0,0,.5);
-webkit-box-shadow: 0px 6px 0px lightgray, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
-moz-box-shadow: 0px 6px 0px lightgray, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
box-shadow: 0px 6px 0px lightgray, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);}
You have a lot going on.
Question, where did you get this stylesheet from? It is bad news for what you're trying to do. I wouldn't even know where to begin to explain this...
I recommend you start from scratch w/ a nice clean responsive template such as this:
http://www.initializr.com/
When you say 're-size' page do you mean when it degrades to mobile or tablet? You have no rules for this in your CSS.
Also, looking at your CSS I recommend you give this a read: http://css-tricks.com/the-difference-between-id-and-class/
If you're going to go that route, you would use "clearfix" instead, clearing the nav class from the header?
He should ideally have three classes up there, something like: #menu #container clearfix #navigation This would allow him to also control his logo too, as right now it's in the #nav.
Related
Trying to get my divs to NOT move around when I change the size of my window.
Here's the CSS in question
#Main {
font-family: Arial;
}
#Intro{
width: 70%;
height: 1000px;
background: rgba(255, 250, 250, 0.5);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
padding-top: 20px;
position: relative;
}
nav {
width: 15%
position: fixed;
float: left;
background: rgba(255, 250, 250, 0.5);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
twitter {
width: 15%;
float: right;
background: rgba(255, 250, 250, 0.5);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
Basically, I have three Divs inside my Main Div, that are overlapping when the screen size changes or resolution is smaller. I'm sure it's something stupid that I'm doing wrong, but here we are.
If I understand you correctly what you want to have is a column-layout?
<center>
<div id="Main">
<nav id="nav">Navigation goes here</nav>
<div id="twitter">Twitter goes here</div>
</div>
</center>
#main {
width: 100%;
}
#nav,
#twitter {
float: left;
color: #fff;
}
#nav {
width: 30%;
background: blue;
}
#twitter {
width: 70%;
background: green;
}
This example creates a two-column-layout with a navigation on the left and "Twitter" on the right. If you would like to have another column you would have to add it as a children to #main and change the width of the columns. (#nav, #twitter and your third)
If you want to change the size or the order for smaller screens you have to use media queries. What you could do is the following:
#media screen and (max-width: 600px) {
#nav,
#twitter {
float: none;
width: 100%;
}
}
Another thing I see in your HTML is that you tried to use as an element. This would be a Custom HTML element which won't work in every browser, especially not in older ones (without a polyfill/library like Polymer). You can read more about Custom HTML elements in this article on html5rocks: Custom elements. To keep things simple you should stick to the available HTML5 elements.
If I understand your problem correctly, then you don't want your divs to resize when you change your window screen. I suggest that you change your:
width: x%;
to:
width: xpx;
Or, if you want this solved AFTER the page is rendered then you might want to use the min-width attribute, that may be able to solve your problem.
min-width: xpx; or min-width: x%;
Could you show the HTML you are using? It might be that you are missing the meta viewport tag.
Another solution might be to use pixel values instead of percent (as Juan Carlos suggested) if you don't want the width to change:
#Main {
width: 800px;
}
As a side note I would recommend you to take a look at caniuse.com for prefixes. You don't need all of those prefixes for box-shadow and border-radius
Here's the rest of the code
Index:
<?php
echo "<center>";
echo "<div id='Main'>";
include("banner.php");
include("navbar.php");
include("twitter.php");
include("intro.php");
include("footer.php");
echo "</div>";
echo"</center>";
?>
Navbar
<?php
echo "<nav>
<table>
<tr>
<td>
<ul>
<li><a href= 'index.php' class='LinkHome'/></a></li>
<li><a href= 'products.php' class='LinkProduct'/></a></li>
<li><a href= 'fitch.php' class='LinkFitch'/></a></li>
<li><a href= 'argodealers.php' class='LinkArgo'/></a></li>
<li><a href= 'about.php' class='LinkAbout'/></a></li>
<li><a href= 'contact.php' class='LinkContact'/></a></li>
</ul>
</td>
</tr>
</table>
</nav>";
?>
Twitter
<?php
echo "
<twitter>
Twitter Stuff would go here
</twitter>";
?>
Messy, I know
Also, I had taken two of them out of Divs to see what would happen [edited CSS appropriately] - and this method had a better effect
I have a 'register' div in the 'nav' of my website, and in firefox everything renders perfectly, but in other browsers such as Chrome, the positioning is completely off sometimes, but if I refresh the page, it fixes itself.
Also, if I inspect element and check/uncheck 'position:absolute', it usually goes to the correct position.
There is a lot of entangled code here, so I apologize in advance, and would appreciate any help at all!
I will post the relevant code below, but if you need to see the complete code, please go to www.mindmote.com/nav/index.php
HTML:
<header>
<img src="..." onclick="location.href='../nav/index.php'" />
</header>
<nav>
<ul class="fancyNav">
...
</ul>
<div class="register">
<a class="unlink" id='windowbox' style='border-radius: 10px;width:45px;' href="...">Register</a>
<a class="unlink" id='windowbox' style='border-radius:10px;width:40px;' href="...">Log In</a>
</div>
</nav>
CSS:
.register{
position: absolute;
display: inline;
width:auto;
height:auto;
margin: 5px;
font-size: 18px/20px;
}
a.unlink{
color:#0f0000;
text-decoration: none;
clear: both;
}
a:hover.unlink{
color:#ecf7ed;
text-decoration: none;
clear:both;
}
#windowbox{
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
margin-left: auto;
margin-right: auto;
padding: 5px;
width :auto;
height:auto;
background: #c3912b url('../assets/img/nosp.png') repeat;
border: 1px solid #666666; /***/
-webkit-box-shadow: 5px 5px 10px .5px rgba(100, 100, 100, .3);
box-shadow: 5px 5px 10px .5px rgba(100, 100, 100, .3);
}
.fancyNav{
position: relative;
text-align: start;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 5px 5px 10px .5px rgba(100, 100, 100, .3);
box-shadow: 5px 5px 10px .5px rgba(100, 100, 100, .3);
}
Remove absolute positioning and it should be okay.
I have a drop down menu showed here http://jsfiddle.net/aRzUM/3/
The issue is the background of the supp menu register which is grey, doesn't work correctly. Could you please tell me what I'm doing wrong here ?
Thanks in advance.
You need to reset the height of your li for the sub menu. It is inheriting the following set of rules.
#header .auth-row ul li {
display: block;
float: left;
height: 39px;
list-style: none outside none;
}
Add this rule to reset the height:
#header .auth-row ul li li {
height:auto;
}
Remove the background, border, and shadow rules from the ul and apply it instead to the form itself.
#btn-login form {
background: #ddd url(img/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
DEMO
Is there a way to make my #inner_div stop appearing behind the #main_div if it exceeds a certain width? I tried removing the overflow:hidden from #main_div in css but that causes the background of the #main_div to load very slowly, so I would like to find another solution if possible. Thanks
Main div css:
#main_div {
-moz-border-radius:5px;
-moz-box-shadow: 0 3px 3px rgba(255, 255, 255, 0.1), 0 3px 0 #BBBBBB, 0 4px 0 #AAAAAA, 0 5px 3px #444444;
background: none repeat scroll 0 0 #F6F6F6;
border: 1px solid #FFFFFF;
margin: 20px auto;
overflow: hidden;
padding: 10px;
width: 970px;
}
Inner div css:
.inner_div{
font-size:12px;
font-weight:normal;
font-style:normal;
margin: 5px 0px 0px 10px;
border-style: solid;
border-width: 1px;
border-color: #000000;
z-index: 0;
visibility: hidden;
position: absolute;
/* white-space: nowrap;*/
text-align: left;
padding: 5px 5px 5px 5px;
width:200px;
}
Instead of using overflow:hidden, you should use the new "micro clearfix".
Go here: http://nicolasgallagher.com/micro-clearfix-hack/
In your markup, you simply just add the class "cf" on #main_div
Greetings,
I am trying to apply a CSS3 box shadow to only the top, right, and left of a DIV with a radius that matches the result of the following CSS (minus the bottom shadow)
#div {
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
What would be the best way to accomplish this?
Thanks!
UPDATE
This shadow will be applied to a nav bar on a page, the bar is positioned on the top of the main container DIV. What I am trying to accomplish is to continue the box shadow of the main DIV onto the nav bar, which sits above it, but without a bottom shadow on the nav bar. Take a look at the site itself to see what I'm talking about, easier than adding all of the HTML and CSS here.
UPDATE 2
Since the DIV I am working with is singular, rather than trying to place a shadow on each nav li, I elected to change it to the following:
-webkit-box-shadow: 0px -4px 7px #e6e6e6;
-moz-box-shadow: 0px -4px 7px #e6e6e6;
box-shadow: 0px -4px 7px #e6e6e6;
This makes the top of the shadow very noticeable but it's what I am trying to accomplish - if anyone knows of a way to keep the shadow the same in appearance to the container DIV, please let me know. Thanks!
use the spread value...
box-shadow has the following values
box-shadow: x y blur spread color;
so you could use something like..
box-shadow: 0px -10px 10px -10px black;
UPDATE: i'm adding a jsfiddle
It's better if you just cover the bottom part with another div and you will get consistent drop shadow across the board.
#servicesContainer {
/*your css*/
position: relative;
}
and it's fixed! like magic!
You can give multiple values to box-shadow property
eg
-moz-box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
-webkit-box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
box-shadow: 0px 10px 12px 0px #000,
0px -10px 12px 0px #000;
it is drop shadow to left and right only, you can adapt it to your requirements
I found a way to cover the shadow with ":after", here is my code:
#div:after {
content:"";
position:absolute;
width:5px;
background:#fff;
height:38px;
top:1px;
right:-5px;
}
The following code did it for me to make a shadow inset of the right side:
-moz-box-shadow: inset -10px 0px 10px -10px #000;
-webkit-box-shadow: inset -10px 0px 10px -10px #000;
box-shadow: inset -10px 0px 10px -10px #000;
Hope it will help!!!!
I was having the same issue and was searching for a possible idea to solve this.
I had some CSS already in place for my tabs and this is what worked for me:
(Note specifically the padding-bottom: 2px; inside #tabs #selected a {. That hides the bottom box-shadow neatly and worked great for me with the following CSS.)
#tabs {
margin-top: 1em;
margin-left: 0.5em;
}
#tabs li a {
padding: 1 1em;
position: relative;
top: 1px;
background: #FFFFFF;
}
#tabs #selected {
/* For the "selected" tab */
box-shadow: 0 0 3px #666666;
background: #FFFFFF;
}
#tabs #selected a {
position: relative;
top: 1px;
background: #FFFFFF;
padding-bottom: 2px;
}
#tabs ul {
list-style: none;
padding: 0;
margin: 0;
}
#tabs li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
Thought I'd put this out there as another possible solution for anyone perusing SO for this.
I know this is very old, but none of these answers helped me, so I'm adding my answer. This, like #yichengliu's answer, uses the Pseudo ::after element.
#div {
position: relative;
}
#div::after {
content: '';
position: absolute;
right: 0;
width: 1px;
height: 100%;
z-index: -1;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
}
/*or*/
.filter.right::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 1px;
height: 100%;
background: white;
z-index: -1;
-webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
}
Fiddle
If you decide to change the X of the drop shadow (first pixel measurement of the drop-shadow or box-shadow), changing the width will help so it doesn't look like there is a white gap between the div and the shadow.
If you decide to change the Y of the drop shadow (second pixel measurement of the drop-shadow or box-shadow), changing the height will help for the same reason as above.
I fixed such a problem by putting a div down the nav link
<div [ngClass]="{'nav-div': tab['active']}"></div>
and giving this css to it.
.nav-div {
width: inherit;
position: relative;
height: 8px;
background: white;
top: 4px
}
and nav link css as
.nav-link {
position: relative;
top: 8px;
&.active {
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 4px -1px;
}
}
Hope this helps!
Adding a separate answer because it is radically different.
You could use rgba and set the alpha channel low (to get transparency) to make your drop shadow less noticeable.
Try something like this (play with the .5)
-webkit-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
-moz-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
Hope this helps!
#div:before {
content:"";
position:absolute;
width:100%;
background:#fff;
height:38px;
top:1px;
right:-5px;
}