Hello I have a problem.
Why my css doesn't work on my head page in html?
Someone can help me the link of my code if you to see the result on run: https://jsfiddle.net/02kf1msd/`.
I use bulma for the style.
I want to have the logo and the menu in the same header line: logo on left and menu nav on right.
HTML Code:
<head>
<meta charset="utf-8">
<title>Oumar Pathe SOW Portfolio </title>
<!--css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css">
<link rel="stylesheet" href="src/css/main.css">
<!--css-->
<!--font-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<!--font-->
</head>
<!--head-->
<!--body-->
<body>
<!--head-->
<div class="block">
<head class="header">
Oumar Pathé SOW Portfolio
<nav class="header-menu">
Accueil
Apropos
Réalisations et Expériances
Contact
</nav>
</head>
</div>
<!--head-->
CSS Code:
.header header {
width: 100%;
margin-left: 0;
margin-right: 0;
height: 70px;
line-height: 70px;
background-color: rgba( 0 , 0 , 0, 0);
position:fixed;
top: 0;
z-index: 999;
}
.header .header-logo {
color: #FFFFFF;
font-family: 'Montserrat', sans-serif;
float: left;
margin-left: 30px;
}
.header .header-menu{
float: right;
margin-right: 30px;
}
.header .header-menu a {
margin-right: 15px;
color: #FFFFFF;
}
.header .header-menu a:hover {
color: #3498db;
}
Why my access doesn't apply on this code?
sometimes Bulma style overrides your CSS codes so you will need to use !important after some of your CSS attributes.
second use navbar-end and navbar-start classes to make the logo on left and menu nav on right,
https://bulma.io/documentation/components/navbar/
My main.html displays the menu.htm and welcome.htm using frameset. Drop down menu buttons "Admin..." and "Scheduler..." suppose to show dropdown content on mouse hover. Since welcome.htm is on top of menu.htm therefore content of the dropdown button doesn't show up.
However, All menu button work as expected when open the menu.htm as standalone page(see attached pic)menu.htm But drop-down buttons content does not show up when open in main.html using frame tags.
main.html
<html>
<head>
<title>Main Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
<meta http-equiv="cache-control" content="max-age=0" />
</head>
<frameset rows = "25,*" >
<frame frameborder="0" marginheight="0" marginwidth="0" scrolling="no" id="menu_frame1"
name="menu_frame" src="menu.htm" />
<frame frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"
id="content_frame1" name="content_frame" src="welcome.htm" />
</frameset>
</html>
Here is menu.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Main Menu</title>
<style type="text/css">
body
{
background-color: #333;
border: 0px;
margin: 0px;
padding: 0px;
FONT-SIZE: 15px;
FONT-FAMILY: sans-serif;
}
.topnav
{
overflow: hidden;
background-color: green;
}
.topnav a
{
float: left;
color: #fec10d;
font-size: 15px;
text-align: center;
text-decoration: none;
font-weight: none;
padding-left: 10px;
padding-right: 10px;
}
.topnav a:hover
{
background-color: #ddd;
text-decoration: underline;
color: black;
}
.topnav a.active
{
margin-top: 5px;
}
.topnav-right
{
float: right;
}
.dropdown
{
float: left;
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 15px;
border: none;
outline: none;
color: #fec10d;
padding: 5px 7px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #fec10d;
color: white;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 90px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
float: none;
background-color: #582c83;
color: white;
padding: 5px 7px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #fec10d;
}
.dropdown:hover .dropdown-content
{
display: block;
}
</style>
<script type="text/javascript">
function open_in_content(url)
{
parent.document.getElementById("content_frame").src = url;
}
function open_in_new(url)
{
window.open(url);
}
</script>
</head>
<body>
<div class="topnav">
<a class="active" href="/mainmenu" target="_top">Home</a>
<a class="active" href="/acctlist" target="content_frame">Accounts</a>
<a class="active" href="/reports/main" target="content_frame">Customers</a>
<div class="dropdown">
<button class="dropbtn">Admin...<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Add Account
Files
Add Rule
Account Update
Ref Upload
Check stats
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Scheduler...<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
New Job
Remove Job
Add checkpoint
</div>
</div>
<a class="active" href="help/index.htm" target="content_frame">Help</a>
</div>
</body>
</html>
Here is welcome.htm
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>
Main Menu Welcome Page
</TITLE>
</HEAD>
<BODY>
Use the links at the top of the menu to navigate.
</BODY>
</HTML>
first of all Why not use html5?
You should use iframe instead of frame
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
after, you add id to iframe and you add display option or you add "position:absolute;z-index" these iframes with css.
after, then was mouseover in iframe you change z-index option with javascript
I help you but first
Can you review jquery.load()
https://api.jquery.com/load/
I think it might be easier for you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="divMenu"></div>
</body>
</html>
<script>
$(document).ready(function(){
$("#divMenu").load("./menu.html");//.txt or html or url
});
</script>
try this
Even if the scroll page, the menu will remain at the top.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body{background-color:#333}
*{margin:0;padding:0;border:0}
.menuBar{width:100%;height:50px;position:fixed;left:0;top:0;z-index:999;background-color:#111;}
.content{float: left;width:100%;margin-top:50px;height:100vh;}
</style>
</head>
<body>
<iframe class="menuBar" src="./menu.html" ></iframe>
<iframe class="content" src="./welcome.html" ></iframe>
</body>
</html>
try this
I made the "manubar "background transparent and when mouseover and manubar the height will automatically 300px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body{background-color:#333}
*{margin:0;padding:0;border:0}
.menuBar{width:100%;height:50px;position:fixed;left:0;top:0;z-index:999;background-color:transparent;}
.content{float: left;width:100%;margin-top:50px;height:100vh;}
</style>
</head>
<body>
<iframe class="menuBar" src=".menu.html" ></iframe>
<iframe class="content" src="./welcome.html" ></iframe>
</body>
</html>
<script>
var menuBar = document.querySelector(".menuBar")
menuBar.onmouseover = function(){
menuBar.style.height="300px"
}
menuBar.onmouseout = function(){
menuBar.style.height="50px"
}
</script>
I am facing a strange issue while creating a responsive webpage.
Basically, I created a simple html page(Page 1) and uploaded it to a blob storage. The page is then run in Azure AD's B2C portal which inserts login form into my html page (using CORS) and shows the combined page to the user. Since I have the source code of the final combined page(Page 2) which automatically merges my content with Azure's form, I am able to test the page from my local machine as well.
The issues I am facing is that Page 1 (which I upload to blob) stretches to window perfectly (both height and width), but Page-2 after it's merged with Azure login-form does not stretch along height.
I have already verified using chrome developer tools (enabled using F12 on chrome) that css style on html/body in page2 is the one I applied and only other thing added to it by browser/Azure is {display: block;} which I think should not cause this current issue.
Below are the source codes :-
Page 1 :
<html>
<head>
<title>User Details</title>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link type="text/css" rel="stylesheet" href="https://login.microsoftonline.com/static/tenant/default/css/common-1.0.4.css">
<link type="text/css" rel="stylesheet" href="https://login.microsoftonline.com/static/tenant/default/css/selfAsserted.1.0.8.css">
<script src="https://login.microsoftonline.com/static/tenant/default/js/layout-1.0.0.min.js"></script>-->
<style>
#main_div {
background-image:url('https://adasphase2.blob.core.windows.net/democontainerblockblob/mm_background.jpg');
/* background-color: 00ff00; */
height:100%;
width:100%;
background-repeat:no-repeat;
background-size:100% 100%;
}
body {
/*background-color: #ff00ff;*/
height:100%;
width:100%;
}
h1 {
font-size: 3vw;
letter-spacing: 0px;
color:#F8F8F8;
font-family: sans-serif;
padding:0% 5% 5% 5%;
}
img {
width:100%;
padding-top:10%;
/*padding-top:10%;
padding-left:5%;
padding-right:5%*/
}
label[for=password] {
display: none;
}
h2 {
display: none;
}
{
}
label[for=logonIdentifier] {
display: none;
}
#forgotPassword {
display: none;
}
#password, #logonIdentifier {
margin: 2% 5% 2% 5%;
width: 90%;
}
#password, #logonIdentifier {
margin: 1% 5%;
width: 86%;
padding: 2% 2%;
}
#next {
background-color: #222222;
border-style: solid;
border-radius: 5px;
border-color: #ffffff;
color: white;
padding: 2% 2%;
text-align: center;
font-size: 3vw;
font-family: sans-serif;
border-width: 1px;
width: 90%;
margin: 2% 5%;
text-transform: uppercase;
font-weight: bold;
}
#next:active {
background-color: #444444;
}
div.create {
display: none;
}
#forgot{
font-size: 3vw;
letter-spacing: 0px;
color:#F8F8F8;
font-family: sans-serif;
margin:2% 5%
}
</style
</head>
<body>
<div id="main_div">
<img id="background_background_image" src="https://adasphase2.blob.core.windows.net:443/democontainerblockblob/splash_stacked_logo.png" alt="Illustration" />
<h1>LOGIN WITH A TARPPORTAL.COM ACCOUNT OR CLICK REGISTER FOR A NEW ACCOUNT.</h1>
<div id="api"></div>
</div>
</body>
</html>
Page2 (combined page):
<!DOCTYPE html>
<!-- Build: 1.0.0.114 -->
<html>
<head>
<title>Loading...</title>
<script src="https://login.microsoftonline.com/static/library/require-2.1.17.min.js"></script>
<script>window.staticHost="https://login.microsoftonline.com/static";window.targetSlice="001-000";</script>
<script>var elementUrl="elements/selfasserted/unifiedSSP-1.0.8.min";</script>
<script>define('template.CP', [/** no dependencies. **/], {"list":[]});
define('template.SA_FIELDS', [/** no dependencies. **/], {"AttributeFields":[{"IS_TEXT":true,"IS_PASSWORD":false,"IS_DATE":false,"IS_RADIO":false,"IS_DROP":false,"IS_CHECK_MULTI":false,"IS_LINK":false,"VERIFY":false,"DN":"LogonIdentifier","ID":"logonIdentifier","U_HELP":"","DAY_PRE":"0","MONTH_PRE":"0","YEAR_PRE":"0","IS_REQ":true,"IS_RDO":false},{"IS_TEXT":false,"IS_PASSWORD":true,"IS_DATE":false,"IS_RADIO":false,"IS_DROP":false,"IS_CHECK_MULTI":false,"IS_LINK":false,"VERIFY":false,"DN":"Password","ID":"password","U_HELP":"Enter password","DAY_PRE":"0","MONTH_PRE":"0","YEAR_PRE":"0","IS_REQ":true,"IS_RDO":false}]});
define('language.data', [/** no dependencies. **/], {"email_pattern":"^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$","logonIdentifier_email":"Email Address","requiredField_email":"Please enter your email","logonIdentifier_username":"Username","createaccount_link":"Sign up now","requiredField_username":"Please enter your user name","createaccount_intro":"Don't have an account?","forgotpassword_link":"Forgot your password?","divider_title":"OR","cancel_message":"The user has forgotten their password","button_signin":"Sign in","social_intro":"Sign in with your social account","requiredField_password":"Please enter your password","invalid_password":"The password you entered is not in the expected format.","local_intro_username":"Sign in with your user name","local_intro_email":"Sign in with your existing account","invalid_email":"Please enter a valid email address","unknown_error":"We are having trouble signing you in. Please try again later."});
define('settings.data', [/** no dependencies. **/], {"remoteResource":"https://adasphase2.blob.core.windows.net/democontainerblockblob/RemoteServicesLoginPage.html","retryLimit":3,"api":"CombinedSigninAndSignup","csrf":"R2lYeVl1cEJLYWlpdENnSHJoOHpITHZtWWFaR2Y4eCsvcUZiK3JsTDd5OXFBZFAzUDViNDBtSTczUTd1YnpPS3RpVURmd1dPOGM1K0FZYU5Fam1IRkE9PTsyMDE2LTA1LTE4VDIyOjEzOjU3LjQxNTEwMjJaO0F6U0VkYlRUbDlHenNoQkVHK1JYSUE9PTt7Ik9yY2hlc3RyYXRpb25TdGVwIjoxfQ==","transId":"eyJUSUQiOiJmN2I4ODJjOS03NmJlLTQ0MzktYWJjNi1hNzE1NjM3ZDM4MGQifQ","pageMode":0,"config":{"operatingMode":"Email","sendHintOnSignup":"False","forgotPasswordLinkLocation":"AfterLabel","includePasswordRequirements":"true"},"hosts":{"tenant":"/lexustmstest.onmicrosoft.com/B2C_1_TMS_Lexus_SignUpandSignIn_Policy","policy":"B2C_1_TMS_Lexus_SignUpandSignIn_Policy","static":"https://login.microsoftonline.com/static/"},"locale":{"lang":"en","country":"US"}});
</script>
<script>var cookieEnabled=navigator.cookieEnabled?!0:!1,Constants;typeof navigator.cookieEnabled!="undefined"||cookieEnabled||(document.cookie="probe",cookieEnabled=document.cookie.indexOf("probe")!=-1?!0:!1),function(){document.querySelectorAll||(document.querySelectorAll=function(n){var i=i=document.createStyleSheet(),r=document.all,f=r.length,t,u=[];for(i.addRule(n,"k:v"),t=0;t<f;t+=1)if(r[t].currentStyle.k==="v"&&(u.push(r[t]),u.length>Infinity))break;return i.removeRule(0),u});String.prototype.trim||function(){var n=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;String.prototype.trim=function(){return this.replace(n,"")}}()}();cookieEnabled&&(Constants=[],Constants.ERROR_REDIRECT_CONSOLE_STRING="Redirecting back to B2C service with querystring",function(){for(var n,u=function(){},t=["assert","clear","count","debug","dir","dirxml","error","exception","group","groupCollapsed","groupEnd","info","log","markTimeline","profile","profileEnd","table","time","timeEnd","timeStamp","trace","warn"],i=t.length,r=window.console=window.console||{};i--;)n=t[i],r[n]||(r[n]=u)}(),require(["require"],function(){require.config({baseUrl:window.staticHost,paths:{jquery:"library/jquery-1.10.2.min",handlebars:"library/handlebars-2.0.0.min",requirecss:"library/require-css-0.1.8.min",simpleModal:"library/jquery.simplemodal-1.4.5.min",core:"js/core-1.0.17.min",metrics:"js/metrics-1.0.1.min",modal:"js/modal-1.0.1.min",iso:"js/iso-unified-1.0.2.min",element:elementUrl},map:{"*":{css:"requirecss"}},skipDataMain:!0});require(["core","settings.data","metrics","element"],function(n,t,i,r){try{window.Metrics=i;metricResource=window.Metrics.create(t.remoteResource);metricResource.start();function u(){var i,f=canSetHeaders=!0,e=t.retryLimit;window.XDomainRequest?(i=new XDomainRequest,f=canSetHeaders=!1):i=new XMLHttpRequest;i.open("GET",metricResource.id);canSetHeaders&&metricResource.id.indexOf(window.staticHost)===0&&i.setRequestHeader("x-ms-cpim-slice",window.targetSlice);i.onload=function(){var t,u;if(!f||f&&i.status===200){metricResource.end();t=(new Date).getTime();r.initialize(i.responseText);metricResource.setInitializationTime((new Date).getTime()-t);return}u="external?statusCode="+i.status+"&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(u);return};i.onerror=function(){var t=0,r;f&&(t=i.status);r="external?statusCode="+t+"&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(r)};i.timeout=function(){if(this.tryCount++,this.tryCount<=this.retryLimit){u();return}var t="external?statusCode=4&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(t);return};i.onprogress=function(){};i.send()}u()}catch(f){n.redirectToServer("error?statusCode=0&statusMessage="+encodeURIComponent(f.message)+"&resource="+encodeURIComponent(t.remoteResource))}})}))</script>
</head>
<body>
<style>.no_display{display:none}.error_container h1{color:#333;font-size:1.2em;font-family:'Segoe UI Light',Segoe,'Segoe UI',SegoeUI-Light-final,Tahoma,Helvetica,Arial,sans-serif;font-weight:lighter}.error_container p{color:#333;font-size:.8em;font-family:'Segoe UI',Segoe,SegoeUI-Regular-final,Tahoma,Helvetica,Arial,sans-serif;margin:14px 0}</style>
<noscript>
<div id="no_js">
<div class="error_container">
<div>
<h1>We can't sign you in</h1>
<p>Your browser is currently set to block JavaScript. You need to allow JavaScript to use this service.</p>
<p>To learn how to allow JavaScript or to find out whether your browser supports JavaScript, check the online help in your web browser.</p>
</div>
</div>
</div>
</noscript>
<div id="no_cookie" class="no_display">
<div class="error_container">
<div>
<h1>We can't sign you in</h1>
<p>Your browser is currently set to block cookies. You need to allow cookies to use this service.</p>
<p>Cookies are small text files stored on your computer that tell us when you're signed in. To learn how to allow cookies, check the online help in your web browser.</p>
</div>
</div>
</div>
<script>if (!cookieEnabled) document.getElementById('no_cookie').className = '';</script>
</body>
</html>
Any help/pointers are appreciated !
You can try
body, html { margin: 0; padding: 0; }
On line 1 of your first page add
<!doctype html>
and then further down you have a typo on the closing style tag
</style <--------
</head>
thanks for your help. I found this post helpful :
Stackoverflow
Adding html{ height:100%; } resolved the issue.