so i'm fairly new to html and css and all that, I've been practicing making a dummy website and I hit a wall. It is just a "Portfolio" website with three main categories. the Index is just a landing page of sorts. I was making a navigation bar for the page contents and I realized that the whole page loads each time an item from the nav bar is clicked, i was trying to make the nav bar stick somehow. Not to the top, I've already found how to do that, but globally across all the pages.
I tried with iframes since i figured it'd only load inside the container but i couldn't get it to work. The page just loaded entirely. Maybe there's a way with iframes but I read they are troublesome and I just don't know enough about how to work with them, so I scrapped that.
Here´s some code for the nav bar and the corresponding CSS if it helps.
body {
background: #ffffff;
font-family: "proxima-nova", sans-serif;
padding: 0;
margin: 0;
}
.btns {
margin: 0 2%;
width: 38%;
max-width: 193px;
min-width: 60px;
justify-content: space-around;
text-align: center;
display: flex;
flex-wrap: wrap;
}
.btns .btn {
text-decoration: none;
background: #4f1e39;
width: 24%;
min-width: 60px;
max-width: 80px;
color: #ffffff;
padding: 4px 0px;
margin: 4px 0;
}
.btns .btn:hover {
background: #ffffff;
color: #4f1e39;
font-weight: bold;
}
.btns .current {
text-decoration: none;
background: #ffffff;
width: 24%;
min-width: 60px;
max-width: 80px;
color: #4f1e39;
padding: 4px 0px;
margin: 4px 0;
font-weight: bold;
}
.centerstuff {
width: auto;
background-color: #4fc5d6;
display: flex;
flex-wrap: wrap;
}
.minilogobox {
height: 35px;
}
.minilogobox img {
max-width: 100%;
max-height: 100%;
padding: 1px 4px;
}
<nav>
<div class="centerstuff">
<div class="minilogobox">
<a href="../index.html">
<img src="https://i.imgur.com/mCfZDsq.png" alt="mini-logo"
/></a>
</div>
<div class="btns">
<a class="current" href="/work.html"> Work</a>
<a class="btn" href="/about.html"> About</a>
<a class="btn" href="/contact.html"> Contact</a>
</div>
<!---<div class="pagetitle"><h1>/Work</h1></div>-->
</div>
</nav>
So, I know there's a way, maybe I have to learn php or java. I'm sorry if this has been asked before, the only other question I've found was not useful.
Because you are navigating away from the page where your header is rendered, and this is a static html page, that code won't remain. When you navigate to a new page, everything in that html file is rendered, including the header code.
You'll need to use some kind of dynamic library to render the html you want to load, while keeping the rest in-tact. This is a long step away from type of development you're doing right now.
I would recommend using something like React and React Router to accomplish this.
As a final note however: you really don't need to worry about this. The majority of webpages work this way, your page should be loading fast enough that you don't even or barely notice it. Just include the header code in every page so that it is omni-present.
Here's a simple show and hide section idea, using fragments and css pseudo target selector. Click on a link, show and jump to the appropriate section.
<html>
<head>
<style type='text/css'>
section {
display: none;
}
:target {
display: block;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href='#about'>About</a></li>
<li><a href='#contact'>Contact</a></li>
</ul>
</nav>
<section id='about'>
All about me.
</section>
<section id='contact'>
Say hello.
</section>
</body>
</html>
(Please comment if this is an accessibility no no, or provide a fallback/workaround if there isn't adequate browser :target support.)
Related
I have a simple HTML, CSS website that is also making use of JavaScript for animated navigation for a mobile only site.
Current Naviation
The HTML for the button:
<div class="navigations">
<div class="left">
<div class="leftinner" id="left">
<i class="fas fa-arrow-left"></i>
<span id="lefttext">CONTACT</span>
</div>
</div>
<div class="right">
<div class="rightinner" id="right">
<i class="fas fa-arrow-right"></i>
<span id="righttext">WEBSITE</span>
</div>
</div>
</div>
When the user clicks on the contact button it triggers a JS function that runs the following:
document.getElementById('main').classList.add('slideright');
document.getElementById('left').style.display = 'none';
The issue I am having is when the user clicks the CONTACT button it triggers the WEBSITE button as well, almost as if the WEBSITE button has a hidden overlap over the CONTACT button. I have attempted using Flex Box, Float left, Float left and right, Display inline block, Display table with table-cell, column etc. The issue only persists on Chrome for Android, but works fine on iPhone and other browsers.
What would be the best way to fix this issue?
Apologies I can't share more than just the screenshot due to NDA reasons.
Edit
Here is the CSS for the navigation buttons, this uses the float left and right attempt.
.navigations .left {
width: 50%;
height: 100%;
z-index: 500;
display: block;
float: left;
}
.navigations .left .leftinner {
background-color: #ffcb05;
border-top: 6px solid #000;
border-right: 3px solid #000;
width: 100%;
height: 100%;
display: inline-block;
}
.navigations .right {
width: 50%;
height: 100%;
z-index: 500;
display: block;
float: right;
}
.navigations .right .rightinner {
background-color: #ffcb05;
border-top: 6px solid #000;
border-left: 3px solid #000;
width: 100%;
height: 100%;
display: inline-block;
}
So I managed to solve the issue with this.
Seems the float right on the text inside the right hand side button was the culprit. Changing how the right button moved its text to the right by making use of text-align: right;instead of float: right; solved the issue.
It seems that the floating right of text made the text's width 100% and overlap the button on the left.
I'm fairly new to PHP / HTML / CSS. I'm trying to copy / mimic an internal website we're using at work, the current code is quite old (still using frames for example).
Currently, I'm stuck at trying to open a link (internal php / html file) from the navigation bar to the main section of the same page. I thought I found a workaround with the include syntax in php, hiding all the pages with css, and only showing the one you clicked on. But I found out fairly quickly that this wouldn't work in my situation, because when you open index.php in a browser, every .php or .html is loaded in the background. Our internal website uses a lot of different .php files, so load times wouldn't be optimal I think.
What I'm trying to achieve: only load the .php or .html link when clicked on in the navigation bar, and open it in the main section of the same page.
Does anyone have a solution for my problem? Thank in advance!
What I'm trying to achieve:
body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
font-family: Sans-serif;
line-height: 1.5em;
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
overflow: hidden;
/* Disables scrollbars on the header frame. To enable scrollbars, change "hidden" to "scroll" */
background: #4B84CF;
background-image: url(./images/headerbackground.jpg);
background-position: right top;
background-size: 30%;
background-repeat: no-repeat;
}
#nav {
position: absolute;
top: 150px;
/* Set this to the height of the header */
left: 0;
bottom: 0;
width: 230px;
overflow: auto;
/* Scrollbars will appear on this frame only when there's enough content to require scrolling. To disable scrollbars, change to "hidden", or use "scroll" to enable permanent scrollbars */
background: rgb(75, 132, 207);
background: linear-gradient(90deg, rgba(75, 132, 207, 1) 70%, rgba(75, 132, 207, 0.7567401960784313) 85%);
}
#logo {
padding: 10px;
}
main {
position: fixed;
top: 150px;
/* Set this to the height of the header */
left: 230px;
right: 0;
bottom: 0;
overflow: auto;
background: #ffffff;
}
.innertube {
margin: 15px;
/* Provides padding for the content */
}
p {
color: #555;
}
nav h1 {
list-style-type: none;
margin: 5;
padding: 5px;
border: 4px solid#C33C54;
border-radius: 10px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}
nav ul {
list-style-type: none;
margin: 5;
padding: 5px;
border: 4px solid#C33C54;
border-radius: 10px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
text-decoration: none;
}
nav ul a {
list-style-type: none;
margin: 5;
padding: 5px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
text-decoration: none;
}
/*IE6 fix*/
* html body {
padding: 100px 0 0 230px;
/* Set the first value to the height of the header and last value to the width of the nav */
}
* html main {
height: 100%;
width: 100%;
}
/* This hides all pages */
.page {
display: none;
}
/* This displays the first page */
.default {
display: block;
}
/* This displays the page corresponding to the one you clicked on */
:target {
display: block;
}
/* This hides the default page when another page is clicked */
:target~.default {
display: none;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index_style.css">
<head>
<title>Test index-pagina</title>
</head>
<body>
<header id="header">
<div id="clock">
<?php include ('clock.php');?>
</div>
</header>
<main>
<div class="innertube">
<div id="navtest" class="page">
<?php include ('navtest.php');?>
</div>
<div id="welkom" class="page">
<?php include ('welkom.php');?>
</div>
<div id="about" class="page">
<?php include ('about.html');?>
</div>
</div>
</main>
<nav id="nav">
<div class="innertube">
<h1>Navigation bar 1</h1>
<ul>
<li>Navtest</li>
<li>Welkom</li>
<li>About</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
<h1>Navigation bar 2</h1>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</nav>
</body>
</html>
You can use JavaScript to find out which button is clicked and used jQuery's load() function to render the php content on your page element.
Just add a dataset attribute to your li elements say, data-page and add a unique id or name to that data-page attribute. I would recommend that you use the file names of the pages you want to load so it would be easier to load it later as you will see in the example snippet below.
You can now use JavaScript to retrieve that dataset value, concatenate it with a .php extension and then use the jQuery's load() function to render the content to the page.
Check and run the following Code Snippet or open this JSFiddle for a practical example of the above approach:
const links = document.querySelectorAll("#nav li a");
links.forEach( function(e) {
e.addEventListener("click", function() {
let goToPage = e.dataset.page;
$("#page").load(goToPage + ".php");
});
})
<main>
<div class="innertube">
<div id="page">
<!-- Content will be shown here -->
</div>
</div>
</main>
<nav id="nav">
<div class="innertube">
<h1>Navigation</h1>
<ul>
<li><a data-page="navtest">Navtest</a></li>
<li><a data-page="welkom">Welkom</a></li>
<li><a data-page="about">About</a></li>
<li><a data-page="somePage1">Link 4</a></li>
<li><a data-page="somePage2">Link 5</a></li>
</ul>
</div>
</nav>
I have made a small web page, the source code of which is available on FIDDLE. It uses a jquery plugin which I made for autocomplete.
The plugin adds a new div (.mridautocomplete-list) after the initialized inputs, which contains the autocomplete list :
<input id="test1">
<div class="mridautocomplete-list" style="display: block; left: 8px; width: 169px; position: absolute; background-color: white; border: 1px solid rgb(221, 221, 221); max-height: 150px; overflow-x: hidden; overflow-y: scroll; font-family: Arial; font-size: 13.3333px; z-index: 8888;">
<p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;"><span style="color: #4682B4; font-weight: bold;">a</span>aa</p>
<p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;">b<span style="color: #4682B4; font-weight: bold;">a</span>b</p>
</div>
<input class="test2">
<div class="mridautocomplete-list"></div>
<input class="test3">
<div class="mridautocomplete-list"></div>
The problem is :
This web page renders perfectly as expected on fiddle
But when I run the same code on my browser ( without fiddle ), it doesn't get displayed properly, shifting all elements ( SHOWN IN SCREENSHOTS ATTACHED )
Can anyone explain what might be causing the problem ?
Your .test2 class is a width of 80%.
The other inputs have a default width of 173px.
If you resize the fiddle window to a larger width, you will see the same issue.
To fix this you could add a display: block to your .test2 class.
Have you already tried the display CSS property? Setting the second input to "display: block" forces the 3rd input to the next line.
Another option is to place the autocomplete Javascript just before the closing body tag. This also worked for me in Chrome, Firefox and Safari.
I'm having an issue where a search bar & text within a nav are overflowing it's div container. I have tried using various things like word-break and overflow-hidden but nothing seems to be working for me. If you see below I have my HTML code along with the CSS. Any help appreciated!
I know there are many other similar questions but nothing answers mine.
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="Enter Book Title"/>
</form>
</div>
<ul>
<li>
<a id="firstlink">
Home
</a>
</li>
<li>
<a id="secondlink">
Categories
</a>
</li>
<li>
<a id="thirdlink">
Bestsellers
</a>
</li>
<li>
<a id="fourthlink">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #f1f6f6;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
margin: 2em 1em 1em 1em;
text-align: right;
color: #888888;
display: block;
}
#nav li{
list-style-type: none;
}
#searchbar{
padding-bottom: 0.5em;
text-align: center;
}
#firstlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#secondlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#thirdlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#fourthlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
Example of Problem - http://i.imgur.com/TigP5MD.png & http://i.imgur.com/nj2A9ka.png
Give the <input> a width:
#searchbar input { max-width: 100%; }
The way to investigate things like this is to use your browser's DOM inspector tools. In this case, I was able to see (by selecting the <div> and <form> containers) that your block-level elements were constrained within the sidebar area, but the <input> itself wasn't. (In the images you linked, the container size is indicated by the blue highlight box.) It was therefore pretty obvious that the answer lay in sizing that element directly.
Here's a jsfiddle with that CSS change.
#Pointy is right, but you will always geht in trouble with using percentage width on #sidebar and the text on your input and links. At a certain point they will be always greater than the #sidebar and overlap.
You may want to look in http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
to avoid this.
Disclaimer: I'm relatively new to jQuery and JavaScript. The openStatement() function below executes whenever it is determined that the #statementTab is not already open. If the code below isn't enough information, simply check out the source below.
Basically, the UL containing the various tabs flickers and disappears whenever the user opens the #statementTab. I'd like to fix this.
Source: http://www.cameronhermens.com/dbunkr/brochure.html
// The openStatement function opens the statement tab when the user clicks
<a id="openIt"> (if the statement tab isn't already open).
function openStatement() {
$('#explore').animate({width: '70%'}, '200');
$('#statementTab').animate({width: '213px'}, '1000');
};
// Here's the DIV.
<div id="explore" class="brochure">
<ul id="brochureTab">
<li><a href="welcome.html" >welcome</a></li>
<li>our mission</li>
<li>what is dBunkr</li>
</ul>
</div>
<div id="statementTab">
<a id="openIt">
<img class="opaque left-5" src="images/rightArrow.jpg" height="10" width="6" alt="Expand the Statement tab">
<span class="statementBar">Statements</span>
</a>
</div>
The UL#brochureTab is being hidden during animation because as #explore is animating, the jQuery is applying a style of overflow: hidden to it. This style is then removed upon completion of the animation.
A quick solution (i.e. without addressing the way that you have styled the rest of your elements) would be to add the style overflow: visible !important; to #explore.
You have the ul#brochureTab outside the div#explore by using the CSS top: -45px;.
Whenever you animate the div#explore with jQuery .animate(), the ul#brochureTab gets "flashed" because the jQuery .animate() automatic switches to overflow:"hidden" while performing the animation.
The solution is to use a DIV to serve as a wrapper to the div#explore, and have it with the visual look you've got on the div#explore:
CSS
#wrapper {
background-color: #FFFFFF;
border: 3px solid #CCCCCC;
border-radius: 7px 7px 7px 7px;
box-shadow: 3px 3px 3px #CCCCCC;
float: left;
height: inherit;
padding: 5px;
}
THE MARKUP WOULD BE:
<div id="wrapper">
<div id="explorer">
<ul id="brochureTab">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<div id="ui-tabs-3">...</div>
<div id="ui-tabs-10">...</div>
<div id="ui-tabs-12">...</div>
</div>
<div id="statementTab">...</div>
</div>
AND TO PREVENT THE FLASHING:
#brochureTab {
float: left;
left: 10px;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
/* top: -45px; remove this line */
}
.ui-tabs-panel {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
float: left;
left: 30px;
margin: 0 auto 30px;
min-height: 410px;
padding: 10px;
position: relative;
/* top: -20px; remove this line */
width: 90%;
z-index: 1;
}
To your current animation method, no changes need to be made.
To your new CSS for the wrapper, may require some "tunning".