This question already has an answer here:
inline nav example doesn't work [duplicate]
(1 answer)
Closed 7 years ago.
ive searched around for about a week, but i havent found an answer that really helps me.
im fairly basic at html and the most experience i really have is neopets lol
im making a page for my class at school, and i have three div ids currently active in my page. the header div works fine, but my mainContent and navigation ids seem to ignore the fact that i want the bg colour to be orange. any help would be appreciated!
HTML:
<html><head><title>GUMI MEGPOID | Home</title></head>
<body>
<div id="header"><h1>GUMI MEGPOID</h1></div>
<div id="navigation">
<p>Home
Albums
Lyrics
Tours
</p></div>
<div id=”mainContent”><p>blah blah blah.<p></div>
</body></html>
CSS:
h1 {color: #eeee99; font-size: 3 em; text-align: center; }
h2 {color: #eeee99; line-height: 130%; font-size: 1.75 em; font-family: 宋体; }
h3 {color: #eeee99; line-height: 130%; font-size: 1.625 em; }
p {color: #eeee99; line-height: 130%; font-size: .9em; margin-left: 10%; margin-right: 10%; }
p1 {color: #eeee99; line-height: 130%; font-size: .75em; }
body { background-color: #eeee99; }
#header { width: 650px; height: 100px; line-height: 100px; background: rgb(238, 119, 34); margin-bottom: 10%; text-align: center; align: right; }
#mainContent { width: 780px; height: 500px; background: rgb(238, 119, 34); /* Fallback */ background: rgba(238, 119, 34, .6); text-align: center; }
#navigation { width: 200px; height: 100px; top: auto; margin-left: 160px; position: fixed; margin-top: 10px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; }
#navigation a { font-size: 11px; line-height: 20px; display: inline-block; margin-top: 5px; width: 100px; text-align: center; color: #eeee99; background-color: {color: #ee7722}; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
#navigation a:hover { color: #eeee99; background-color: {color: #ee7722}; opacity: 0.5; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }</style>
The double quotes in this line
<div id=”mainContent”><p>blah blah blah.<p></div>
should be straight (") instead of curly (”) quotes.
You have the background-color tag wrong on #navigation a. Try the same as you have in body:
background-color: #ee7722;
Related
I am trying to figure out if there's a way to move a link when hovering over it without moving its border. I want my links to move left but I don't want the border that I put to go with it. Here is a fiddle with what I am talking about. If you hover over any of the links, you see that the border moves with it, and I'd like to know if it's possible to not move the border.
And here is the code:
.links {
width: 240px;
margin-left: -35px;
text-align: right;
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
display: block;
}
.links a {
border-bottom: 1px solid rgba(117, 117, 117, 0.3);
display: block;
padding: 8px;
}
.links a:hover {
border-bottom: 1px solid rgba(207, 166, 255, 0.5);
font-style: italic;
margin-right: 10px;
font-weight: none;
transition: 0.8s;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
}
<div class="links">
link
link
link
link
link
</div>
Does anyone have any ideas?
You can put a <span> tag in your link tag then apply the transition to the <span>
https://jsfiddle.net/DIRTY_SMITH/n4Lsrv3k/2/
HTML
<div class="links">
<span>link</span>
<span>link</span>
<span>link</span>
<span>link</span>
<span>link</span>
</div>
CSS
span:hover {
border-bottom: 1px solid rgba(207, 166, 255, 0.5);
font-style: italic;
margin-right: 10px;
font-weight: none;
transition: 0.8s;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
}
Replace .links a:hover styling with the following code.
.links a:hover {
font-style: italic;
padding-right: 20px;
transition: 0.8s;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
}
In your hover style, change margin-right: 10px; to padding-right: 20px;
Since Padding is spacing inside the border and Margin is for spacing outside the border, just change margin-right to padding-right (as Slawomir said)
Here is the fiddle with the change
[https://jsfiddle.net/092fd4hv/][1]
.links a:hover {
border-bottom: 1px solid rgba(207, 166, 255, 0.5);
font-style: italic;
padding-right: 20px;
font-weight: none;
transition: 0.8s;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
}
Adding a span tag is one way but you also can make a list from ul, border the li and animate the a when hover. Then you don't need to wrap every single element with the span tag.
.links > li {
width: 240px;
margin-left: -35px;
text-align: right;
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
padding: 8px;
display: block;
border-bottom: 1px solid rgba(117, 117, 117, 0.3);
}
.links a:hover {
font-style: italic;
margin-right: 10px;
font-weight: none;
transition: 0.8s;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
}
<ul class="links">
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
So you actually can remove several CSS code lines from .links a.
i have a problem to use transition on a styled anchor.
it should expand to a higher width and show a glyphicon. i tried it width max-width but i think i miss something. the glyphicon works but not the "animated" width.
html:
<a class="link" href="/"> Order <a/>
css:
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
transition: max-width 1000ms ease-in-out;
-webkit-transition: max-width 1000ms ease-in-out;
-moz-transition: max-width 1000ms ease-in-out;
}
a.link:hover {
padding: 10px 40px;
max-width: 100%;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
https://jsfiddle.net/Lg7kutpp/
Your code is not working, because it has no working width. It's changing size because of the padding, and therefore the transition:max-width will not work.
Easy way to fix with your code is to add transition:all.
Check this:
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
}
a.link:hover {
padding: 10px 40px;
max-width: 100%;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
<a class="link">Order></a>
I you just want to go with the transition only for the width property, you should add display:inline-block and a width property to the anchor class.
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
width: 100px;
display: inline-block;
text-align: center;
padding: 10px 15px;
transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
}
a.link:hover {
padding: 10px 40px;
width: 150px;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
<a class="link">Order</a>
a.link {
background: #0069b4 none repeat scroll 0% 0%;
color: white;
font-size: 24px;
height: 60px;
cursor: pointer;
border-radius: 30px;
text-align: center;
padding: 10px 15px;
}
a.link:hover {
padding: 10px 40px;
max-width: 100%;
transition: 1000ms ease-in-out;
-webkit-transition:1000ms ease-in-out;
-moz-transition:1000ms ease-in-out;
}
a.link:hover:after {
font-family: icomoon;
content: "\e903";
color: #ffffff;
font-size: 20px;
}
You should add the transition on the hover selector without max-width
https://jsfiddle.net/Lg7kutpp/1/
I believe you need to set max-width to something less than 100% in a.link.
What you're currently doing is setting max-width to 100% on hover, but the default setting of max-width is already 100%.
Either set max-width to something less than 100% under a.link, or set max-width to something greater than 100% under a.link:hover.
When it comes to the transition-property, you might as well write transition: all 1000ms ease-in-out rather than transition: max-width 1000ms ease-in-out, as using all will make sure that any animation on a.link will have the same properties.
Also, I'd recommend you don't use href="/" unless you intend to direct the user to the main page. If you just want an anchor that doesn't link anywhere, you can drop using href.
Hope this helps.
I have a css price box with shows two buttons on the bottom of the box.
But those buttons looks like they are one.
<div class="pricefooter">
<div class="button">
Boek nu
Info
</div>
</div>
for the style I have this
.button{
width:50%;
height:50px;
margin:30px 10px;
padding-left: 30 px;
padding-right: 30 px;
background:#ff9547;
text-align:center;
cursor:pointer;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.button:hover{
width:60%;
}
.button a{
color:#fff;
font-size:14px;
font-weight:bold;
text-decoration:none;
margin:10px 10px;
padding-left: 30 px;
padding-right: 30 px;
line-height:3;
}
I'm kind of stuck here. I want two separate buttons on bottom of the table. Here is the full example example price table wellness
Do you want the button to be totally separate, with their own animation too?
If so you probably want to do something like this:
.button a {
background: #ff9547;
color: #fff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
margin: 2px;
border: 1px solid #dd7325;
padding: 15px 30px 15px 30px;
line-height: 3;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.button a:hover {
padding: 15px 50px 15px 50px;
}
<div class="pricefooter">
<div class="button">
Really long text example
Book now!
Info
</div>
</div>
Remove the background-color from div and add it to the anchor .button a.
Also add display: inline-block; to the .button a.
.button {
width: 50%;
height: 50px;
margin: 30px 10px;
padding-left: 30 px;
padding-right: 30 px;
text-align: center;
cursor: pointer;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.button:hover {
width: 60%;
}
.button a {
color: #fff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
margin: 10px 10px;
padding-left: 30px;
padding-right: 30px;
line-height: 3;
background: #ff9547;
display: inline-block;
}
<div class="pricefooter">
<div class="button">
Boek nu
Info
</div>
</div>
simplify and clean your code:
you have 2 buttons right? why put 2 links in the same button?, I think it's not a best practice.
button is a html tag so style it instead crate other class:
http://www.w3schools.com/tags/tag_button.asp
all above looks right but I think this one looks more clean and organized
html:
<div class="pricefooter">
<button type="button" class='btn'>Click Me! </button>
<button type="button" class='btn'>Click Me! </button>
</div>
css:
button{
height:50px;
padding: 0 30px 0 30px;
background:#ff9547;
text-align:center;
cursor:pointer;
border: 0;
}
.btn a:hover{
padding: 15px 50px 15px 50px;
}
.btn a{
color:#fff;
font-size:14px;
font-weight:bold;
text-decoration:none;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
jsfiddle: https://jsfiddle.net/9e4j8xrn/2/
Hello As I can see you apply background and width css on button class you should be change it into the .button a
updating css:
.button {
cursor: pointer;
height: 50px;
margin: 30px 10px;
text-align: center;
}
.button a:hover {
padding: 10px 25px;
}
.button a {
background: #ff9547 none repeat scroll 0 0;
color: #fff;
font-size: 14px;
font-weight: bold;
line-height: 3;
margin: 10px;
padding: 8px 20px;
text-decoration: none;
transition: all 0.4s ease-in-out 0s;
}
I'm working in Dot Net Nuke on a website that has been previously setup. I want to add a css button I found on the internet. I put the html in the html fields and css in the stylesheet editor.
when a link is created it automatically adds ">>" after the link text. In other buttons css buttons I used I managed to remove that, but with this button I can't remove it. Also I want the button to link to another page using "a href". How would i make this possible?
Button HTML:
<div class="btn-container">
<input type="submit" value="button" id="button-blue"/>
<div class="ease"></div>
</div>
Button CSS:
#button-blue {
float: left;
width: 100%;
max-width: 500px;
border: white solid 4px;
cursor: pointer;
background-color: #0493bd;
margin-top: -4px;
color: white;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
letter-spacing: .1em;
padding-top: 22px;
padding-bottom: 22px;
font-weight: 500;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
/* Change text color & background opacity on hover*/
#button-blue:hover {
background-color: rgba(0,0,0,0);
color: #0493bd;
}
/* The white hover effect */
.ease {
width: 0px;
height: 70px;
background-color: white;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
/* Make visable when hover */
.btn-container:hover .ease {
width: 100%;
max-width: 500px;
background-color: white;
border: 0;
}
.btn-container:after {
display: none !important;
}
well you want the button to link to another page, to do that you can simply style your href to look as a button like this (Run the following snippet) -
Submit
<style>
#submit-btn{
display :inline-block;
text-decoration:none;
background-color:blue;
border-radius:4px;
padding:5px 10px;
color:white;
}
</style>
Well for the issue of >> after every link it may be some css that is adding it, which you haven't posted in your question so try adding following code which may remove it..
a:after {
content: none !important;
}
OR this one -
a:after {
display: none !important;
}
or just for the link like button I posted above try this -
#submit-btn:after {
content: none !important;
}
OR
#submit-btn:after {
display: none !important;
}
NOTE - Since you are overwriting CSS don't forget to add !important..
Change to button to href
<div class="btn-container">
Button
<div class="ease"></div>
</div>
CSS
#button-blue{
float:left;
width: 100%;
max-width:500px;
border: white solid 4px;
cursor: pointer;
background-color: #0493bd;
margin-top: -4px;
color: white;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
letter-spacing: .1em;
padding-top: 22px;
padding-bottom: 22px;
font-weight: 500;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
text-align:center;
}
/* Change text color & background opacity on hover*/
#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}
#button-blue:after{content:">>"}
/* The white hover effect */
.ease {
width: 0px;
height: 70px;
background-color: white;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
/* Make visable when hover */
.btn-container:hover .ease{
width: 100%;
max-width: 500px;
background-color: white;
border: 0;
}
.btn-container:after {
display: none !important;
}
demo link
https://jsfiddle.net/0zctLenb/
Please see my code below:
HTML =>
<header>
<div class="menuWrap">
Home
About
AM
Work
Contact
</div>
</header>
CSS =>
header {
width: 100%;
height: 80px;
background-color: #F5F5F5;
border-bottom: 1px solid #E6E6E6;
}
.menuWrap {
margin: 0 auto;
width: 80%;
height: 100%;
text-align: center;
}
.menuItem {
line-height: 80px;
display: inline-block;
width: 20%;
color: #1DC0CE;
text-decoration: none;
font-family: 'Lobster', cursive;
font-size: 25px;
-o-transition: .2s;
-ms-transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
transition: .2s;
}
.logoItem {
line-height: 80px;
display: inline-block;
width: 15%;
background-color: #1DC0CE;
color: #FFFFFF;
text-decoration: none;
font-family: 'Lobster', cursive;
font-size: 25px;
border-bottom: 1px solid #1DC0CE;
-o-transition: .2s;
-ms-transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
transition: .2s;
}
When I am increasing the font-size for 'logoItem' the 'menuItem' elements position is moving (the text is moving down the page)
Any tips on how to stop this!?
Give them a uniform height and ensure it's large enough to work for both sizes:
#menuWrap a {
display:inline-block;
height:30px;
}
You should probably get rid of the line-height declaration as well.