this is my code. Materialize.showStaggeredList() not firing on button click.
when i try to click button i want sign up link on side of the browser window but the button click is not firing. I have seen the docs of Materialize and work accordingly but failed. Any help
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
html
{
height: 100%;
background: url(Images/234.jpg) no-repeat center center;
background-size: cover;
}
</style>
<title>HelpingO</title>
<link rel="stylesheet" href="materialize/css/materialize.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="materialize/css/materialize.css" />
<script src="materialize/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<nav style="background-color:#554253">
<div class="navbar-wrapper">
<a href="#" class="brand-logo col s2 left-align">
<img src="Images/AWT-Plane.png" style="width:40px; position:relative;top:10px;" />
HelpingO</a>
<ul class="right hide-on-med-and-down">
<li>Contact</li>
<li>Services</li>
<li>About Us</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Home</li>
</ul>
<i class="material-icons">menu</i>
</div>
<div class="navbar-wrapper col s3">
<div class="col s12 m12 l12 right-align">
Click Me </div>
</div>
</nav>
<ul id="staggered-test" class="right">
<li style="opacity:0"><i class="material-icons">email</i></li>
<li style="opacity:0"><i class="material-icons">web</i></li>
<li style="opacity:0"><i class="material-icons">android</i></li>
</ul>
<div class="container">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<h2 class="header center" style="color:#443355">Finding Travel Companion Seems Impossible?</h2>
<div class="row center">
<h5 class="header col s12 dark">Want to pay less when flying to India?</h5>
</div>
<div class="row center">
Get Started
</div>
<br><br>
</div>
</div>
</div>
</body>
<html>
It looks like you have declared your scripts in the wrong order. Materialize uses jQuery so it needs to be loaded first -
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="materialize/js/materialize.min.js"></script>
Then to get your staggered list to work you'll need to change materialize to Materialize (note the capital "M") -
Click Me </div>
In full (working) -
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
html {
height: 100%;
background: url(Images/234.jpg) no-repeat center center;
background-size: cover;
}
</style>
<title>HelpingO</title>
<link rel="stylesheet" href="materialize/css/materialize.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.js"></script>
</head>
<body>
<nav style="background-color:#554253">
<div class="navbar-wrapper">
<a href="#" class="brand-logo col s2 left-align">
<img src="Images/AWT-Plane.png" style="width:40px; position:relative;top:10px;" /> HelpingO
</a>
<ul class="right hide-on-med-and-down">
<li>Contact</li>
<li>Services</li>
<li>About Us</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Home</li>
</ul>
<i class="material-icons">menu</i>
</div>
<div class="navbar-wrapper col s3">
<div class="col s12 m12 l12 right-align">
Click Me </div>
</div>
</nav>
<ul id="staggered-test" class="right">
<li style="opacity:0"><i class="material-icons">email</i></li>
<li style="opacity:0"><i class="material-icons">web</i></li>
<li style="opacity:0"><i class="material-icons">android</i></li>
</ul>
<div class="container">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<h2 class="header center" style="color:#443355">Finding Travel Companion Seems Impossible?</h2>
<div class="row center">
<h5 class="header col s12 dark">Want to pay less when flying to India?</h5>
</div>
<div class="row center">
Get Started
</div>
<br><br>
</div>
</div>
</div>
</body>
<html>
Related
I have a text ("Bokdeko") that with a size of 20px is fine, but if I modify the font size to 30px it gets misaligned as you can see in the images:
with 20px: https://postimg.cc/75bSFGnR
with 30px: https://postimg.cc/0M1mKt1g
As you can see, the text "Bokdeko" appears scrolled down in the second image, which is the one with a font size of 30px.
this is the css and html code that I have.
the css file:
#import url(https://fonts.googleapis.com/css2?family=Oranienbaum&family=PT+Sans+Narrow&display=swap);
.icono
{
width:30px;
height:20px;
}
.nav-section .row {
height: 30px;
align-items: center;
}
.contenedor{
width:485px;
height:540px;/*tamaño alto foto*/
margin :auto;
}
.slick-prev:before, .slick-next:before {
color:black !important;
}
.titulo{
font-family: 'Oranienbaum', serif;
font-size: 30px;
}
the html file:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<LINK REL=StyleSheet HREF="css/bootstrap.css" TYPE="text/css">
<link rel="stylesheet" href="estilos_menu.css">
<link rel="stylesheet" href="estilos.css">
<style>
.icono
{
width:30px;/*tama�o del icono*/
height:20px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row nav-section" >
<div class="col-sm-12 col-lg-2 bg-secondary my-auto" style="z-index:3;">
<!--<div class="hamburguer">-->
<div class="row" style="margin-top:30px !important;margin-bottom:30px !important;">
<div class="col-4">
<div>
<ul class="nav">
<li><img class="icono" src="hamburguer.png">
<ul>
<li>Tienda
<ul>
<li>Ver todo</li>
<li>Armarios</li>
<li>Sillas</li>
<li>Sillones</li>
<li>Sofás</li>
<li>Mesas</li>
<li>Mesillas y cajoneras</li>
<li>Lámparas</li>
</ul>
</li>
<li>Blog
<ul>
<li>Estilo minimalista</li>
<li>Estilo nórdico</li>
<li>Estilo retro</li>
<li>Estilo rústico</li>
<li>Estilo clásico</li>
<li>Espacios exteriores</li>
<li>Fusión de estilos</li>
<!--</li>-->
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div> <!-- div col-->
<div class="col-8 titulo bg-info">
BOKDEKÓ
</div>
</div>
</div>
<div class="col-sm-10 col-lg-5 bg-danger my-auto" >
<div class="row" style="margin-top:30px !important;margin-bottom:30px !important;">
<div class="col-2">
Cuenta
</div>
<div class="col-2">
Registrarse
</div>
<div class="col-8">
Busca productos
<input type=text name=buscar size='12' maxlength='15' value='' style="padding-top:1px;padding-bottom:1px;font-size:9px;">
</div>
</div>
</div><!--div col-->
<div class="col-sm-12 col-lg-5 bg-info my-auto"><!--align-self-center-->
<div class="row" style="margin-top:30px !important;margin-bottom:30px !important;">
<div class="col-3 ">
Mi lista
</div>
<div class="col-3 bg-success">
Carrito
</div>
<div class="col-6 bg-warning">
Hola
</div>
</div>
</div> <!--div col-->
</div> <!--div row-->
</div>
<script src="js/popper.min.js" type="text/javascript"></script>
<script src="js/jquery-3.5.1.slim.min.js" type="text/javascript"></script>
<script src="js/utilidades.js" type="text/javascript"></script>
</body>
</html>
I have to move my ESPN to most left on the Navbar and I need to add a scan icon in Navbar like this image. I am drawing the same picture but I won't be able to add the scan icon and add 3 bars right after the programming tab. I am designing the same picture in HTML but I can't get rid of these 2 to 3 things. Any help is really appreciated.
following this image
This is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/responsee.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<link rel="stylesheet" href="css/template-style.css">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
</head>
<body class="size-1140">
<header role="banner" class="position-absolute">
<nav class="background-transparent background-transparent-hightlight full-width sticky">
<div class="s-20 l-2">
<a href="index.html" class="logo">
</a>
</div>
<div class="top-nav s-20 l-20">
<p class="nav-text"></p>
<ul class="right chevron">
<a style="text-align:right;">ESPN</a>
<li><a style="text-align:right;">HOME</a></li>
<li><a style="text-align:right;">SCHEDULE</a></li>
<li><a>PROGRAMMING</a>
<ul>
</ul>
</li>
<li><a >ABOUT</a></li>
<li><a >NEWS</a></li>
<li><a >CONTACT</a></li>
<li><a>SELECTLANGUAGE</a>
<ul>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN -->
<main role="main">
<!-- Main Header -->
<header>
<div class="carousel-default owl-carousel carousel-main carousel-nav-white background-dark text-center">
<div class="item">
<div class="s-12">
<img src="img/header.jpg" alt="">
<div class="carousel-content">
<div class="content-center-vertical line">
<div class="margin-top-bottom-80">
<!-- Title -->
<h1 class="text-white margin-bottom-30 text-size-60 text-m-size-30 text-line-height-1">ESPN SPORTS<br> PROGRAMMING</h1>
<div class="s-12 m-10 l-8 center"><p class="text-white text-size-14 margin-bottom-40">Welcome to ESPN's catalog of sports content available for broadcast worldwide.<br> Every year we distribute more than 6000 hours of live events, highlight series, <br> studio and scripted media to broadcasters across the globs.</p></div>
<div class="line">
<div class="s-10 m-10 l-3 center">
<a class="button button-white-stroke s-6" style="background-color:red;" href="/">+CONTACT US</a>
<a class="button button-white-stroke s-6" style="background-color:black;" href="/">WATCH DEMO</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<script type="text/javascript" src="js/responsee.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/template-scripts.js"></script>
</body>
</html>
my result
I think you are broken down into the wrong part. The logo and nav sections that need to be separated are easier to adjust.
nav {
display: flex;
align-items: center;
justify-content: space-around;
}
ul {
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
flex: 2;
}
p img {
width: 100px;
}
p {
flex: 1;
}
<nav>
<p><img src="https://cdn.iconscout.com/icon/free/png-256/espn-282356.png"></p>
<ul>
<li>HOME</li>
<li>SCHEDULE</li>
<li>PROGRAMMING</li>
<li>ABOUT</li>
<li>NEWS</li>
<li>CONTACT</li>
<li>SELECTLANGUAGE</li>
</ul>
</nav>
You can do this:
put this in head
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
put this where you want your icon to appear
<a><i class="material-icons">menu</i></a>
Good day, slight issue here, I cannot seem place all three of my images in the same row together, can anyone help solve the issue? the first is in one row, then the second and third overlap each other. I have already used bootstrap's 12 column grid but the other 2 just kept going down a row. Also, is there a bootstrap code where the image adjusts to the row? thank you for reading.
heres a js fiddle link: https://jsfiddle.net/wxofr2ae/5/
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Homepage</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="img/link_health.jpg" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="img/link_wellness.jpg" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
</body>
</html>
CSS:
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 300px;
height: 300px;
}
Okay! I just solve your problem by doing just 3 steps:
Step 1: add the closing tag for the <div class="box"> of the BEAUTY block.
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you forgot this closing tag -->
Step 2: remove a redundant </div> tag of the <div class="container"> block
Step 3: change the css class, make width: 100%, this step will solve the image overlap:
.bhw_link {
width: 100%;
height: 300px;
}
You missed closing div <div class="box"> and change css of
.bhw_link {
width: 100%;
height: auto;
}
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 100%;
height: auto;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link"></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
It's just because you ommitted the closing tag
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you omitted this closing tag-->
</div>
Try class "img-responsive" for your image tag if you want to scale the image to the parent element or just set it to width 100% because the image is already inside the grid system of bootstrap
I'm new to Twitter Bootstrap framework and CSS.
I want my right sidebar height to go along with the height of my main content. How should I do that.
<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="includes/Bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="includes/Bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="page-container">
<div class="container">
<div class="container-fluid">
<header class="margin-top">
<div class="row-fluid">
<img border=0 src="images/header.jpg" alt="">
</div>
</header>
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li>Home</li>
<li>Contact </li>
<li>About Us</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
<div class="hero-unit">
If I have a long content here.. The sidebar does not follow the height of the content.
</div>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
</div>
</div>
</body>
</html>
your container seems to be fine and has a auto height so what is the problem
here you see the fiddle
http://jsfiddle.net/cancerian73/ZpZCD/
.container {background-color:#fc0;}
<body>
<div class="container">
<div class="navbar1 navbar navbar-inverse">
<div class="navbar-inner">
<ul class="nav pull-right">
<li>sign in</li>
</ul>
</div>
</div>
</div><!--/container NAVBAR-->
<div class="container">
<div class="row-fluid">
<div class="header">
<div class="span12">
<h1> Hello World</h1>
</div>
</div><!--/inner-wrapper-->
</div><!--/row-fluid-->
</div><!--/container-->
</body>
EDIT
In this classes like span**, navbar, row-fluid, container create default padding.
Take a look into this page: http://jsfiddle.net/SjYyj/1/
There is a gap between "header" class and "navbar"! How to remove that without adjusting padding!
Edit - Update:
Well, you basically want the padded area to have a background color, without changing the padding.
The simplest solution I could think of is:
Wrap the whole 'back end' with a fixer class, and give it a background color.
html:
<!DOCTYPE html>
<hhttp://jsfiddle.net/SjYyj/#forktml lang="en">
<head>
<title>Home</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css"
rel="stylesheet">
</head>
<body>
<div class="fixpadding"><!--Fixer-->
<div class="container">
<div class="navbar1 navbar navbar-inverse">
<div class="navbar-inner">
<ul class="nav pull-right">
<li>sign in
</li>
</ul>
</div>
</div>
</div>
<!--/container-->
<div class="container">
<div class="row-fluid">
<div class="header">
<div class="span12">
<h1> Hello World</h1>
</div>
</div>
<!--/inner-wrapper-->
</div>
<!--/row-fluid-->
</div>
<!--/container-->
</div>
<!--End Fixer-->
<script src="./js/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
</body>
</html>
css:
.header {
background-color: grey;
}
.fixpadding {
background-color: grey;
border-radius:4px 4px 0 0; /* Fine-tuning with nav bar */
}
Try it out.
Edit 2:
You may see that if you resize the window, the background color will "spread-out" .
To fix this, I've warped all of the body with a container, and set some more css:
html:
<div class="container">
<div class="fixpadding">
...
</div>
<!--End Fixer-->
</div>
css:
.header {
background-color: grey;
}
.fixpadding {
background-color: grey;
background-size: contain;
border-radius:4px 4px 0 0;/* Fine-tuning with nav bar*/
}
Check it out.
Edit 3:
You can't color a padded area specifically.
I made some changes to show you what you could do:
Try it here.
The red and green colors are there so you could see the impact.
I've hard-coded the css into the html so you won't need to hassle with the selectors.
HTML:
<!DOCTYPE html>
<hhttp://jsfiddle.net/SjYyj/#forktml lang="en">
<head>
<title>Home</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="background-color:red;border-radius:4px 4px 0 0;">
<div class="navbar1 navbar navbar-inverse">
<div class="navbar-inner">
<ul class="nav pull-right">
<li>sign in</li>
</ul>
</div>
</div>
</div><!--/container-->
<div class="container" style="background-color:green;">
<div class="row-fluid">
<div class="header">
<div class="span12">
<h1> Hello World</h1>
</div>
</div><!--/inner-wrapper-->
</div><!--/row-fluid-->
</div><!--/container-->
<script src="./js/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
</body>
</html>