Hell o, I have floating menu fixed on top of the screen of my single page web site. When I click the menu item, page slowly scrolls down to appropriate section using jquery. I have this code for fixed menu on top of the screen:
<style>
.fixed_elements{ position:fixed; top:100px; }
#top-floating-bar{ background: none repeat scroll 0 0 #2D2D2D; height: 35px; position: fixed; top: 0; width: 100%; z-index: 100; }
ul{ padding: 0; margin: 0; }
.fixed-bar-buttons{ float: left;color: #fff; }
.fixed-bar-buttons ul { height: 25px; padding-right: 10px; }
.fixed-bar-buttons ul li{ display: block; float: left; font-family: sans-serif; font-size: 14px; font-weight: bold; height: 25px; padding-left: 10px; padding-right: 10px; padding-top: 10px; }
.fixed-bar-buttons ul li:hover{ background-color: #605F5F; }
#content-panel{ float: left;margin-top: 40px; }
</style>
</head>
<body>
<div id="top-floating-bar">
<div class="fixed-bar-buttons">
<ul class="nav">
<li>REFERENCIE</li>
<li>KONTAKT</li>
</ul>
</div>
</div>
<div id="section2"> Section2 content</div>
<div id="section3"> Section3 content</div>
...
The code is OK and everything works fine. The thing I need to do is to modify the menu when it's on section2 and section3 only and add "UP" button.
When I load the page, I don't need the "UP" button, because It's not possible to go up and it's confusing to be there, so I need it only if I scroll down. Is it possible with CSS(1,2,3) only? Thank you!
Not possible, because you have to fetch the vertical offset of the document to know if the user is at the top of the page, or have scrolled down. The vertical offset is needed to make the decision whether to display the up button or not.
There is a way to do it with JS, but if you're asking for a CSS-only solution, I've given you the bad news already :P
Related
I am trying out "flex" with CSS.
I cannot get my nav bar to move to the right. I have tried for hours using margin, changing displays, using float. It won't move passed the middle... Sorry i'm still learning
I have pasted a link to my codepen to show you a better picture:
https://codepen.io/Saharalara/pen/pGyQWZ
The HTML
<div id="page-wrapper">
<header>
<div class="logo">
<img id="header-img" src="https://upload.wikimedia.org/" alt="Minnie Pic">
<span id="logo-name">Minnie & Friends Inc</span>
</div>
<nav id="nav-bar">
<ul id="nav-ul">
<li class="nav-link">Stories<li>
<li class="nav-link">Toys<li>
<li class="nav-link">Suscribe</li>
</ul>
</nav>
</header>
<body>
<container id="container1">
<section>
<h1 id="stories">Minnie & Friends Stories</h1>
<p>
Here you will find all of the best Minnie & Friends toys
and stories.
Choose from a huge variety of stories and the happy gang and they go on
many adventures.
</p>
<section>
<iframe id="video" height="180" src="https://www.youtube.com/watch?
v=crJ1CwD_TX0" frameborder="1" allowfullscreen ></iframe>
</section>
<h2 id="toys">Minnie & Friends Toys</h2>
<p>
Here you will also find many of your favourite characters
to choose from and order to arrive at your doorstep to continue their
adventures with you.
</p>
<h3 id="suscribe">Suscribe to our newletter</h3>
</section>
</container>
</body>
The Css
#page-wrapper {
position: relative;
color: black;
margin: -9px;
padding: 10px;
border: 4px solid;
border-radius: 3px;
background-color: rgba(223, 42, 42, 0.20);
padding: 10px 20px 20px 20px;
}
header {
display: flex;
font-size: 1.3em;
margin-left: -10px;
margin-right: -10px;
background-image: url('https://cdn2.vectorstock.com/i/1000x1000/07/66/pink-
white-star-polka-dots-background-vector-7590766.jpg');
opacity: 0.80;
}
#header-img {
height: 120px;
}
#logo-name {
font-size: 2em;
color: black;
}
h1,
h2,
h3 {
font-size: 2em;
}
//navigation bar
#nav-bar {
display: flex;
justify-content: flex-end; //**not working***
}
#nav-ul {
list-style-type: none;
display: flex;
}
nav li {
padding: 4px;
}
//body
p {
font-size: 1.2em;
}
#video {
border: 5px solid;
border-radius: 3px;
color: pink;
}
Fix 1
The best way to fix this (to me) is to control layout at the flex container (parent) level. It's straightforward and declarative.
header {
…
justify-content: space-between;
}
Fix 2
Another way is to add flex-grow: 1 to your #nav-bar.
#nav-bar {
…
flex-grow: 1;
}
In this instance, setting flex-grow to 1 tells the element to take up the available space in its flex container.
Fix 3
The non-flexbox way would be to add a left auto margin to the #nav-bar, effectively pushing it as far right as possible.
#nav-bar {
…
margin-left: auto;
}
since your header has display: flex property, his childs act like flex items.
So if you want to move whole .nav-bar to right you have to set margin-left: auto to .nav-bar so that element will be pushed to right.
Means .nav-bar will have as big margin as can without breaking on new line from left so element will move to right.
Since the Header element is the container just add justifi-content: space-between; and this will force the elements to go left and right. Another way is to put position: absolute; right: 0; to the nav-bar container but the first way is cleaner.
I am new to html/css. My problem is when I re-size my browser window the text of the nav-bar shifts/condenses according to the size of the window and becomes distorted. I would like it to remain static so that when I narrow my browser window I would have to have to scroll over to the right to be able to see the text again. I'm using bootstrap as well.
This is my code:
HTML
<body>
<div class="nav">
<div class="container">
<ul class="pull-right">
<li>HOME</li>
<li>WINES</li>
<li>GRAPES</li>
<li>ABOUT US</li>
</ul>
</div>
</div>
</body>
CSS
.nav li {
display: inline;
}
.nav a {
color: #5a5a5a;
font-size: 20px;
font-weight: bold;
padding: 14px 10px;
}
.nav {
position: absolute;
top: 20px;
right: 0px;
}
I tried using .container {width: 900px;} but that didn't help. The nav bar still doesn't stay static.
You can solve this by adding a min-width to the navbar.
navigation {
margin-right: auto;
margin-left: auto;
max-width: 100%;
min-width: 1000px;
}
You can solve this by adding a minimum width to a div surrounding the nav bar.
In your case it would be in the .nav class
.nav {
min-width:165px;
position: absolute;
top: 20px;
right: 0px;
}
I don't know if you shared all the code with us, but from the code you provided 165px should be fine for the minimum width. If there is more code present that makes the navbar a different width then you may need to adjust the pixel amount of min-width:.
This should work
ul {
white-space: nowrap;
}
Hey guys was hoping you can help me out.
been at this for like more than an hour and its driving me crazy.
basically I am a big novice when it comes to CSS but am learning. at the moment I am trying to replicated a menu that looks like this:
what I have so far looks something like this (i know the fonts different but not problem):
As you can see, ive got the background but I just CAN NOT figure out how make the start, end and the breaks (black line part) between each tab.
Also, basically the start, break, end I have as .jpg images. Not looking for html5 or css3 curves etc to do this. Just want to keep it simple :).
this is what I got so far. It would be great if you could could give me some tips on how I could make whats remaining and in case ive used a not-so-great approach, suggest an approach which would be better.
the html:
<div id="header">
<ul id="header-list">
<li class="header-list-item">
<span class= "header-list-item-span" >Home</span>
</li>
<li class="header-list-item">
<span class= "header-list-item-span" >About Us</span>
</li>
<li class="header-list-item">
<span class= "header-list-item-span" >Services</span>
</li>
</ul>
</div><!--END OF HEADER -->
the css:
#header-list{
display: table;
position: relative;
left: -3em;
table-layout: fixed;
margin-bottom: 0PX;
margin-top: 0;
margin-left: auto;
}
.header-list-item-span{
background-image: url("img/menubody.jpg");
color: white;
display: inline-block;
width: 5em;
font-size: large;
text-align: center;
padding: .2em;
}
.header-list-item{
display: table-cell;
height: 4.2em;
vertical-align: bottom;
}
Here's an idea:
Wrap the ul in a div. Set the first jpg as a background image for that div, and add some padding-left so that the image can be visible.
Set the last jpg as a background image for the ul and add some padding-right so that the image can be visible too.
Also, in my opinion, you should simplify your HTML by taking more advantage of CSS selectors.
The header list can be selected as div#header > ul.
The items that you are selecting with the class header-list-item can be selected with div#header > ul > li.
I don't think the span is actually necessary, you could apply the styles directly to the li elements.
Wrap the ul in another div and add padding on the inside to the left and you can place your start image as the background. Then make the right image the background of the ul and add padding on the right.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<style>
div,li,ul,span { margin: 0;padding: 0;}
body { width: 700px; margin: 0 auto; }
#header
{
background: url(http://www.lucascobb.com/wp-content/uploads/2012/02/1-plastic-navigation-bar-565x182.jpg) top center repeat;
padding-top: 50px;
position: relative;
}
#header .nav
{
background: url(http://www.ultracomwireless.com/images/button_left.png) top left no-repeat;
float: right;
width: 413px;
padding-left: 26px;
margin-right: 20px;
}
#header .nav .nav-wrapper
{
background: url(http://www.ultracomwireless.com/images/button_right.png) top right no-repeat red;
padding-right: 26px;
}
#header ul
{
position: relative;
list-style: none;
}
#header ul li
{
background: red;
width: 120px;
float: left;
text-align: center;
}
#header ul li span
{
color: white;
padding: 8px 0px;
}
.clear { clear: both;}
</style>
</head>
<body>
<div id="header">
<div class="nav">
<div class="nav-wrapper">
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>Services</span></li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
I am in the process of designing a website for a film that is being released, but I am having some problems with getting it to fit in all browser windows sizes and screen sizes. Essentially, the markup, for example for the splash page, has the films logo at the top of the page, a video (the films trailer) under it, then an enter button that takes the user to the homepage. All of these should be centered on all browser window sizes. However when I try different sizes etc. the content does not remain centered and the video moves off of it's background image. How would I fix that with CSS?
There are a few other pages as well i.e. synopsis, videos and then a page to donate to the project. I would like these to work in the same way, keeping content working correctly on all sizes. Thanks!
If you want to look at this and see what I mean, the link is http://rescuedthemovie.com/new/home. This is the dev page and has basically no final design so it is somewhat messy but you can see what I'm talking about.
jwinton
Sounds like a problem with the way you are positioning your elements on the page. Take a look at:
http://www.w3schools.com/css/css_positioning.asp
Just add this to whatever divs you want to be centered. This should work on all browsers and will keep everything centered no matter the resolution.
#div {
margin:0 auto;
text-align:center;
}
I would suggest using this for the main content div, so everything is centered, then creating separate divs for the video, links, etc. That way you can position those where you want them inside the centered div..
I don't understand your design. I see the following problems.
You have a div id="container" but the only thing it contains is the div id="fotter". All the rest of the elements are "outside" the container div.
You have a div id="logo" with a style of margin-top: 1%; margin-left: 25%;. How will this center it?
Your div id="slider" has position: relative; left: 26%; top: 3em; which means that it is being pushed 26% from left and 3em from top of its origional position and leaving a "gap" where it was before.
Your h1 has a margin: left; 300px;. Where exactly you want it to be?
Underneeth the h1 you have a elements which contain div elements? This is like a block level element inside a in-line elements. Totally wrong. These all a elements should be inside a div and than that div should be positioned.
Your div#footer is inside the
div#container. The div#foooter
has a style of position: absolute
while the div#container does NOT
have a position: relative. This
causes 2 things. The div#container
collapses as it does not have any
content and the div#fotter is
positioned relative to the browser
window.
you have 3 div#recent. The ID has to be unique. This is not allowed. Use calsses instaed.
I will give a skeloton on how to go about this.
THE HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rescued: The Movie</title>
<link rel="stylesheet" href="my_styles.css">
</head>
<body>
<div id="container">
<div id="logo">
<img src="http://rescuedthemovie.com/new/images/logo.png" alt="Rescued Logo" />
</div>
<div id="nav">
<ul>
<li>home</li>
<li>synpsis</li>
<li>videos</li>
<li>blog</li>
<li>partner</li>
</ul>
</div>
<div id="slider">
<img src="http://rescuedthemovie.com/images/slides/slide1.jpg" alt="Slide 1" />
<img src="http://rescuedthemovie.com/images/slides/slide2.jpg" alt="slide 2" />
<img src="http://rescuedthemovie.com/images/slides/slide3.jpg" alt="slide 3" />
</div>
<div id="blog">
<h1>NEWS</h1>
<div class="recent">
<h2>The Putnam's Adoption Journey</h2>
My husband and I thought our family was complete. We had our two children (one boy and one girl) and were completely satisfied with that. Life was comfortable. My youngest had just started Kindergarten so I found myself with more free time than I had had in nine years! I was enjoying the freedom of grocery shopping without toddlers. But then God started stirring something in our hearts...
</div>
<div class="recent">
<h2>God's Divine Leading: Part 3</h2>
I remember feeling a little surprised that she had decided on adoption. I guess I just assumed that she would opt to keep her baby. I have to admit that I did wonder for a fleeting moment if perhaps the Lord was trying to lead Jurgen and I to adopt her baby, but then reasoned that a domestic adoption might be too risky. People might also think it strange, since I was the one who encouraged her to consider adoption in the first place, rather than end her baby’s life...
</div>
<div class="recent">
<h2>God's Divine Leading: Part 2</h2>
When I awoke, I had an overwhelming desire to have a baby of our own. The dream was extraordinarily real and tangible, and I felt strongly that the Lord had given me this dream as an answer to my questions about pursuing adoption. I am not the type of person who normally bases my decisions on dreams, but this was different. It was as if the Lord Himself had dropped this desire into my heart...
</div>
<a id="more" href="http://rescuedthemovie.com/blog">Read More</a>
</div>
<div id="footer">
<p>©2011 Rescued</p>
</div>
</div>
</body>
</html>
THE CSS
{
margin: 0;
padding: 0;
}
img
{
border: 0;
}
a
{
text-decoration: none;
color: #000;
}
body
{
background: url("http://rescuedthemovie.com/new/css/../images/blog_bg.jpg") no-repeat scroll center top #000;
}
div#container
{
width: 960px;
margin: 20px auto;
margin-bottom: 0;
}
div#logo
{
width: 850px;
height: 300px;
margin: 0 auto;
}
div#logo a
{
width: 100%;
height: 100%;
display: block;
}
div#nav
{
background: url("http://rescuedthemovie.com/new/css/../images/nav.png") no-repeat scroll 0 0 transparent;
font-size: 25px;
text-transform: uppercase;
}
div#nav ul
{
width: 900px;
margin: 10px auto;
}
div#nav ul li
{
display: inline-block;
margin: 0 40px;
color: #FFF;
}
div#nav ul li a
{
color: #FFF;
}
div#slider
{
width: 500px;
height: 250px;
margin: 0 auto;
margin-top: 77px;
float: right;
position: relative; /*romove this in the final design*/
}
div#slider img /*romove this in the final design*/
{
position: absolute;
top: 0;
left; 0;
}
div#blog
{
float: left;
width: 450px;
color: #FFF;
margin-bottom: 50px;
}
div#blog h1
{
margin: 20px 0;
}
div#blog a#more
{
float: right;
color: red;
}
div.recent
{
margin: 20px 0;
border: 1px solid #555;
padding: 5px;
}
div.recent h2
{
font-weight: bold;
color: #777;
margin-bottom: 10px;
}
div.recent a
{
color: #FFF;
}
div#footer
{
clear: both;
color: #FFF;
text-align: center;
font: 25px;
margin: 20px auto;
}
div#footer p
{
font-size: 25px;
}
This offcouse is an fixed width layout. But you can easily change it to fluid or estalic. This is how it looks
My website URL is http://www.hentaireader.com
At the bottom right corner, I wish to put a small link on the red footer bar.
I have created a simple image of what I wish to do.
How can I achieve this??
The code on this page is a disaster. With that said you would have to remove the http://www.hentaireader.com/images/bar.gif image from the HTML and use CSS to create a background-image.
Something similar to this would be required...
CSS:
#footer-bar {
width:100%;
background-color:#f40000;
background-image: url(http://www.hentaireader.com/images/bar.gif);
background-position:top center;
background-repeat:no-repeat;
text-align: right;
margin-bottom: 10px;
}
#footer-bar ul {
width: 950px;
height: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
left: 0px;
top: 0px;
}
#footer-bar li {
display: inline;
line-height: 30px;
margin-left: 6px;
}
#footer-bar li a {
color: #FFFFFF;
}
HTML:
<div id="footer">
<div id="footer-bar">
<ul>
<li>Contact</li>
<li>Another Link</li>
</ul>
</div>
All characters on hentaireader.com are purely fictional and 18+ years of age.
</div><!--- FOOTER --->
Look here... http://jsfiddle.net/b8Xh7/1/
Ok, well first of all. Do you see the red bar? You have a div inside of the div you have an image. You should have put the (red bar) image as a background, and put a link inside the div. Then you could haver positioned the link where you wanted it with padding/margin.
#footer a {}
Example