I am designing the Bootstrap form. I wanted to make the block responsive.
Code:
<div class="main_txt">
<div class="main_row_sep" >
<div class="main_service main_auto" >
<h4>
<a title="Automotive" href="searchcat1.aspx?cat=Automotive">Automotive</a></h4>
<p>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Auto Spare Parts">Auto
Spare Parts</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Commercial Vehicles">
Commercial Vehicles</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Oil value Lubricants">
Oil value Lubricants</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Tyres and Batteries">
Tyres and Batteries</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Automotive Tools">
Automotive Tools</a>
<span class="right">more ...</span></p>
</div>
<div class="main_service main_build" >
<h4>
Building and Interiors</h4>
<p>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Aluminum and Steel Profiles">
Aluminum and Steel Profiles</a>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Bathroom and Kitchen Equipment">
Bathroom and Kitchen Equipment</a>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Cables and Electrical">
Cables and Electrical</a>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Hardware and Tools">
Hardware and Tools</a>
<span class="right"><a href="searchcat1.aspx?cat=Building and Interiors">more
...</a></span></p>
</div>
</div>
</div>
CSS:
.main_service {
width:254px;
height:136px;
float:left;
padding:20px 20px 0 90px;
}
.main_auto {background:url(images/category/auto.gif) no-repeat;}
.main_build {background:url(images/category/build.gif) no-repeat;}
.main_row_sep {
width:100%;
}
I am not getting how to apply grid system to div tag so that it becomes responsive.
first add bootstrap
<!-- 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">
then replace your HTML code with this one
<div class="container">
<div class="row" >
<div class="main_auto col-md-6" >
<h4>
<a title="Automotive" href="searchcat1.aspx?cat=Automotive">Automotive</a></h4>
<p>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Auto Spare Parts">Auto
Spare Parts</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Commercial Vehicles">
Commercial Vehicles</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Oil value Lubricants">
Oil value Lubricants</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Tyres and Batteries">
Tyres and Batteries</a>
<a title="" href="searchsubcat.aspx?cat=Automotive&subcat=Automotive Tools">
Automotive Tools</a>
<span class="right">more ...</span></p>
</div>
<div class="main_build col-md-6" >
<h4>
Building and Interiors</h4>
<p>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Aluminum and Steel Profiles">
Aluminum and Steel Profiles</a>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Bathroom and Kitchen Equipment">
Bathroom and Kitchen Equipment</a>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Cables and Electrical">
Cables and Electrical</a>
<a href="searchsubcat.aspx?cat=Building and Interiors&subcat=Hardware and Tools">
Hardware and Tools</a>
<span class="right"><a href="searchcat1.aspx?cat=Building and Interiors">more
...</a></span></p>
</div>
</div>
</div>
you can see that 3 classes been added ( container, row , col-md-6 )
here's a link to see the result https://jsfiddle.net/3ypn1g9k/
you can always visit https://getbootstrap.com for more information about Bootstrap and customize your code the way you want
I hope this is want you want:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Title</title>
<style>
img{
border:5px solid grey;
width:100%;
height:100%;
}</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
check: https://jsfiddle.net/8pn27vhL/5/
Related
I would like to use Handlebars with Parcel, but without importing handlerbars partials, but having them in a script tag in html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Autocomplete!</title>
<link rel="stylesheet" href="./public/stylesheets/whitespace-reset.css">
<link rel="stylesheet" href="./public/stylesheets/gallery.css">
<script type="module" src="./public/typescript/gallery.ts"></script>
</head>
<body>
<main>
<h1>Amanda Rose's Photos</h1>
<div id="slideshow">
<div id="slides">
<figure data-id="1">
<img src="https://via.placeholder.com/1280x1024" />
<figcaption>
Some text.
</figcaption>
</figure>
<figure data-id="2">
<img src="https://via.placeholder.com/1280x1024/ffffff/0066cc" />
<figcaption>
Some text.
</figcaption>
</figure>
<figure data-id="3">
<img src="https://via.placeholder.com/1280x1024/0066cc/ffffff" />
<figcaption>
Some text.
</figcaption>
</figure>
</div>
<ul>
<li><a class="prev" href="#">Prev</a></li>
<li><a class="next" href="#">Next</a></li>
</ul>
</div>
<section>
<header>
<h2>City Lights</h2>
<p><time>Taken on 3/31/15</time></p>
<div class="actions">
<a href="/api/photos/like" data-id="1" data-property="likes" class="button like">
♡ 5 Likes
</a>
<a href="/api/photos/favorite" data-id="1" data-property="favorites" class="button favorite">
☆ 2 Favorites
</a>
</div>
</header>
<!-- code omitted -->
</section>
</main>
<script id="photos" type="text/x-handlebars">
{{#each photos}}
<figure data-id="{{id}}">
<img src="{{src}}" />
<figcaption>{{caption}}</figcaption>
</figure>
{{/each}}
</script>
<!-- code omitted -->
</body>
</html>
The issue that I have is that Parcel is saying that I am missing transformers for handlebars. Since these partials are not in a separate file adding
"transformers": {
"*.hbs": [
"parcel-transformer-handlebars"
]
}
to my .parcelrc file won't do a thing even when I install parcel-plugin-handlebars.
Does anyone have an idea how to change this? I have tried changing transformers to plugin-transformers-handlebars for html files but this messes up everything else.
i have a probleme with my css in jsp project
the probleme is that the css doesn't apply on page
i've tried to change the path of css files but it doesn't work
i've also to change
by : <%#include file="../assets2/css/bulma.css" %> but it Caused more errors related to jsp compilation ...
on network tap (inspect elements) :
network tabmy project files
the code on my .jsp file :
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page import="entities.Dossier" %>
<%# page import="entities.Responsable" %>
<%# page import="entities.Tache" %>
<%#page import="java.util.ArrayList"%>
<%#page import="java.util.List"%>
<%#page import="web.TrackingServlet"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>tAccueil</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Premium Bootstrap 4 Landing Page Template" />
<meta name="keywords" content="bootstrap 4, premium, marketing, multipurpose" />
<meta content="Themesdesign" name="author" />
<!-- favicon -->
<link rel="shortcut icon" href="images/favicon.ico">
<!-- google font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<!--Slider-->
<link rel="stylesheet"type="text/css" href="css3/owl.carousel.css" />
<link rel="stylesheet"type="text/css" href="css3/owl.theme.css" />
<link rel="stylesheet"type="text/css" href="css3/owl.transitions.css" />
<!-- Magnific-popup -->
<link rel="stylesheet" type="text/css" href="css3/magnific-popup.css">
<!-- css -->
<link href="css3/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css3/icons.css" rel="stylesheet" type="text/css" />
<link href="css3/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--Navbar Start-->
<nav class="navbar navbar-expand-lg fixed-top navbar-custom sticky sticky-light" id="navbar">
<div class="container">
<!-- LOGO -->
<a href="http://localhost:8080/Tracking/Acceuil" class="logo-sticky">
<img src="img/logogo.png" alt="" class="logo-dark" height="32" />
<img src="img/logogo.png" alt="" class="logo-light" height="32" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<i class="remixicon-menu-fill"></i>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mx-auto navbar-center" id="mySidenav">
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
Startseite
</li>
<c:if test="${session == null }">
<li class="nav-item">
Anmelden
</li>
</c:if>
<c:if test="${session != null }">
<li class="nav-item">
Mein Raum
</li>
<li class="nav-item">
Abmelden
</li>
</c:if>
</ul>
</div>
</div>
</nav>
<!-- Navbar End -->
<!-- HERO START -->
<section class="hero-4-bg position-relative bg-gradient" id="home">
<div class="container">
<div class="row align-items-center hero-4-content">
<div class="col-lg-5">
<h1 class="text-white hero-4-title font-weight-medium mb-4 line-height-1_4">Verfolgen Sie Ihre Datei</h1>
<p class="text-white-50 mb-5">WEBTRACK bietet den schnellsten und genauesten Verfolgungsdienst auf der Grundlage einer intelligenten Datenanalyse..</p>
<div class="text-center subcribe-form mt-4">
<form action="progression" method="post">
<c:if test="${id_doc != null }">
<input type="text" value="${id_doc }" name="tracking">
</c:if>
<c:if test="${id_doc == null }">
<input type="text" placeholder="Geben Sie die Tracking-Nummer ein..." name="tracking">
</c:if>
<button type="submit" class="btn rounded-pill btn-purple">Verfolgen </button>
</form>
</div>
</div>
<div class="col-lg-6 offset-lg-1">
<div class="hero-4-img mt-5 mt-lg-0">
<img src="images/hero-4-img.png" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="home-bottom-shape">
<img src="images/home-4-bottom-shape.png" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
</section>
<!-- HERO END -->
<!-- FOOTER END -->
<!-- javascript -->
<script src="js2/jquery.min.js"></script>
<script src="js2/bootstrap.bundle.min.js"></script>
<script src="js2/scrollspy.min.js"></script>
<script src="js2/jquery.easing.min.js"></script>
<!-- COUNTER -->
<script src="js2/counter.int.js"></script>
<!-- carousel -->
<script src="js2/owl.carousel.min.js"></script>
<!-- Magnific Popup -->
<script src="js2/jquery.magnific-popup.min.js"></script>
<script src="js2//magnificpopup-int.js"></script>
<!-- Main Js -->
<script src="js2/app.js"></script>
</body>
</html>
I think you want to include a .css file to jsp. try this
<jsp:include page="../css3/index.css"/>
or
<%#include file="/WEB-INF/include/header.jsp"%>
I have wordpress website, I have applied custom HTML on Home page for footer. It appears well but on the post page the footer is not appearing like it should as on the Home page.
I think there is some CSS which is missing. I am not able to figure this out. Please help.
Home page Screen shot : https://ibb.co/f5wZxx
POst page screen shot : https://ibb.co/mz6Zxx
I have made some changes on the code below as I cant reveal the brand name.
Code :
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="footer, address, phone, icons" />
<title>Footer With Address And Phones</title>
<link rel="stylesheet" href="wp-content/themes/oblique/inc/class/class-customizer-theme-info-control/css/style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
<body>
<footer class="footer-distributed">
<div class="footer-left">
<p class="footer-links">
Home
·
About
·
Contact
</p>
<p class="footer-company-name">2018 | All Rights Reserved</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-globe"></i>
<p>Official website - Español</p>
</div>
<div>
<i class="fa fa-globe"></i>
<p>Official website - English</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p></p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About </span>
</p>
<div class="footer-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
</footer>
</body>
i need help with responsive image when orientation change.
When mobile change to landscape mode, show white space inside page wrapper just after image, creating a space between image and fixed footer.
When click on a button panel image fix.
html:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/app-theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure.min.css" />
<link rel="stylesheet" href="css/index.css" />
<title>Elephant</title>
</head>
<body>
<div class="app">
<div data-role="page" id="pageone" data-title="Elephant" data-url="pageone">
<!--Menu Panel-->
<div id="menu-panel" data-role="panel" data-position="left" data-display="push" data-position-fixed="true">
<ul id="page-menu" data-role="listview">
<li data-icon="search"><a data-rel="close" href="#pageone">Search</a></li>
<li data-icon="cloud"><a data-rel="close" href="#pageone">Weather</a></li>
<li id="location-btn" data-icon="location"><a data-rel="close"
href="#pageone">Location</a></li>
<li data-icon="camera"><a data-rel="close" href="#pageone">Camera</a></li>
<li data-icon="gear"><a data-rel="close" href="#pageone">Configuration</a></li>
</ul>
</div>
<!--/ Menu Panel-->
<!--Actions Panel-->
<div id="overlay-panel" data-role="panel" data-position="right" data-display="overlay" data-position-fixed="true">
<ul id="page-menu" data-role="listview">
<li id="camera-btn" data-icon="camera"><a data-rel="close" href="#pageone">Photo</a></li>
<li data-icon="video"><a data-rel="close" href="#pageone">Video</a></li>
<li data-icon="audio"><a data-rel="close" href="#pageone">Audio</a></li>
<li data-icon="alert"><a data-rel="close" href="#pageone">File</a></li>
</ul>
</div>
<!--/Actions Panel-->
<header id="page-header" data-role="header" data-position="fixed">
<a id="menu-btn" href="#menu-panel" data-role="button"
data-rel="close" data-icon="bars" data-iconpos="notext">Menu</a>
<h1>
<div id="spinner" class="visually-hidden ui-loader"></div>
<span class="visually-hidden">Elephant</span>
</h1>
<a href="#overlay-panel" data-role="button" class="ui-btn-right"
data-icon="bullets" data-iconpos="notext">Media</a>
</header>
<div id="main-content" role="main" class="ui-content">
<div class="ui-grid-solo">
<div id="photos-container" class="ui-block-a">
<img style="display: block;" id="smallImage" src="img/test.jpeg" />
<!-- <img style="display: none;" id="largeImage" src="" /> -->
</div>
</div>
</div>
<footer id="page-footer" role="contentinfo" data-role="footer" data-position="fixed">
<h1></h1>
</footer>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
css:
#photos-container {
width: 90%;
margin-left: 5%;
}
#photos-container img {
max-width: 100%;
}
Thank you very much
Regards
Thanks for your attention.
Error comes calculating min-height. I fixed it writting:
#media screen and (orientation: landscape) {
.ui-mobile .ui-page {
min-height: 0 !important;
}
}
Regards
I am very new to CSS. please go easy on me.
I am interested in putting a survey (using survey monkey) into a website. I want it to be in a fixed position as a side bar on the left and shrink the size of the survey box. Where am I going wrong?
<!DOCTYPE html>
<html dir='ltr' lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<div>
<head>
<title>
Home
| qfo4produce
</title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<link href='css/inuit.css' media='all' rel='stylesheet'>
<link href='css/grid.inuit.css' media='all' rel='stylesheet'>
<link href='css/style.css' media='all' rel='stylesheet'>
</head>
<body class='wrapper'>
<div id='header'>
<a href='index.html' rel='home'>
<img src='images/banner.png' alt="" title='Home'>
</a>
</div>
<div>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
top:0;
left:-30;
iframe { width: 250px !important; }
height:100%;
}
</style>
<div id="surveyInfo"> <div><script src="http://www.surveymonkey.com/jsEmbed.aspx?sm=wtvL1HViBjWad5DOwtqu7A_3d_3d"> </script>
</div>
<ul class='nav'>
<li class='first'>
<a href='what-is-qfo.html' title='What Is QFO?'>What Is QFO?</a>
</li>
<li>
<a href='team.html' title='Team'>Team</a>
</li>
<li>
<a href='examples.html' title='Examples'>Examples</a>
</li>
<li>
<a href='technology.html' title='Technology'>Technology</a>
</li>
<li class='last'>
<a href='mailto:info#franwell.com' title='Contact'>Contact</a>
</li>
</ul>
<a class='login' href='qfo.aspx.html' title='Login'>Login</a>
<div id='main'>
<p>
<img src='images/summary.png' alt="Summary of QfO Process" />
</p>
</div>
Copyright © 2011 Hussmann Corporation and Franwell, Inc.
</div>
</body>
</html>
You can set the width of the autogenerated iframe. This will force the SurveyMonkey iFrame to be smaller.
http://jsfiddle.net/H6WNP/
iframe { width: 250px !important; }
I just gave you a generic answer because your post is missing a lot of html that corresponds to your CSS. I think this is what you are after though.