Well, I have a weird problem. I search a lot for the last several hours and all the similar problems couldn't fit exactly on my own.
In my website, all the urls with a second slash have a big white space at the bottom of the website. All the site above this space is scrollabe.
I have the same CSS file in all my url
http://localhost/testurl
http://localhost/testurl/withanotherslash
The first url doesn't have a problem, while the second has the white space. I checked the same html file in both urls.
Here is how I load the css in the second url:
<link rel="stylesheet" href="../static/css/bootstrap.min.css" />
<link rel="stylesheet" href="../static/css/jquery-ui.css" />
<link rel="stylesheet" href="../static/css/font-awesome.css" />
<link rel="stylesheet" href="../static/css/unicorn.css" />
I use two dots in the second url and one dot in the first url. I test it in Chrome and Firefox.
Here is a screenshot:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../static/css/bootstrap.min.css" />
<link rel="stylesheet" href="../static/css/jquery-ui.css" />
<link rel="stylesheet" href="../static/css/font-awesome.css" />
<link rel="stylesheet" href="../static/css/unicorn.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/unicorn.js"></script>
</head>
<body data-color="grey">
<div id="wrapper">
<div id="header">
<div style="width:200px;">
<img style="display:block;margin-left:auto;margin-right:auto;padding-top:5px" src="../static/img/paulie.gif"/>
</div>
</div>
<div id="sidebar">
<div id="search" style="margin-top:80px">
<form method="post" action="/authorsearch">
<input type="text" name='authorname' placeholder="Search for an author...">
<button type="submit"></button>
</form>
</div>
<ul>
<li><i class="fa fa-home"></i><span>Dashboard</span></li>
<li><i class="fa fa-book"></i><span>Articles</span></li>
<li><i class="fa fa-user"></i><span>Editors</span></li>
<li><i class="fa fa-user"></i><span>Authors</span></li>
<li><i class="fa fa-globe"></i><span>Countries</span></li>
<li class="submenu">
<i class="fa fa-flask"></i><span>Settings</span>
<ul>
<li><span>Add an article</span></li>
<li><span>Add a user</span></li>
<li><span>All users</span></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<div id="content-header" class="mini">
<h1>My title</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 center" style="text-align: center;">
<ul class="quick-actions">
<li>
<a href="/">
<i class="icon-home"></i>
Dashboard
</a>
</li>
<li>
<a href="/articles">
<i class="icon-survey"></i>
Articles
</a>
</li>
<li>
<a href="/editors">
<i class="icon-people"></i>
Editors
</a>
</li>
<li>
<a href="/authors">
<i class="icon-people"></i>
Authors
</a>
</li>
<li>
<a href="/countries">
<i class="icon-web"></i>
Countries
</a>
</li>
</ul>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<div class="widget-box">
<div class="widget-title">
<h5>Users Database</h5>
</div>
<div class="widget-content nopadding">
<table id="myTable" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Username</th>
<th>Password</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
%for user in users:
<tr>
<td>{{user['username']}}</td>
<td>{{user['password']}}</td>
<td>test</td>
</tr>
%end
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-bottom:0px">
<div id="footer" class="col-xs-12">
2014 © Title. Brought to you by me
</div>
</div>
</div>
</body>
</html>
The CSS file is from this bootstrap template
And here is my backend in Python Bottle and how I call the CSS files:
#bottle.get('/static/css/<filename:re:.*\.css>')
def stylesheets(filename):
return bottle.static_file(filename, root='./static/css/')
That's how the theme is designed to work. On a shorter page like this one you'll see that gap on larger screens.
An easy solution is to set the body background color to the same as the footer/wrapper color, which extends the footer color to the bottom of the page. E.g.
body {background: #3c3c3c;}
An alternative would be to use a sticky footer setup, but that's messier and might look a bit silly anyhow.
Related
If in my HTML file, Font Awesome icons are showing up as blank squares in all browsers, even though I've linked the stylesheet correctly and I've tried to install the package using npm, but it throws a npm ERR! code E401. I've also checked the browser developer console for error messages, but there are no errors being displayed.
<!DOCTYPE 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.0">
<!-- Load icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<title>EVERYTHING CHEMISTRY</title>
</head>
<body>
<div class="Grid-container">
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<i class="fa-solid fa-bars"></i>
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3 id="Website name">EVERYTHING CHEMISTRY</h3>
<img id="Logo" src="icon.png" alt="Hydrogen atom">
<img id="Chemistry Lab" src="Chemistry.JPG" alt="Chemist Lab">
<!-- The form -->
<form class="example" action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="Page Title">
<h1 id="name">Periodic</h1>
<h1 id="subname">Table</h1>
</div>
<div class="Subheading">
<h2 id="Subheading 1">118 Elements</h2>
<h2 id="Subheading 2">7 Periods</h2>
</div class="Body text">
<p id="Translations">{Eng: Periodic Table; Arabic: الجدول الدوري; Afrikaans: Periodieke tabel; Mandarin: 周期表
(zhōuqī biǎo); Urdu: پیرودیک ٹیبل.}</p>
<p id="Definition">The periodic table is a tabular arrangement of the chemical elements, organized on the basis
of their atomic number, electron configurations, and chemical properties. Elements are presented in rows
(called periods) and columns (called groups or families) according to their increasing atomic number. The
elements in a group have similar chemical and physical properties, and those in a period show a progression
of properties as the atomic number increases. The table provides a useful summary of the properties of the
elements and their chemical reactivity. It is widely used in chemistry and other sciences to predict the
properties and behavior of elements and their compounds.</p>
Click Here to Smoothly Scroll Down
<i class="fa-solid fa-angle-down"></i>
<div id="down">
<h1>You are down!</h1>
</div>
</div>
</body>
</html>
The class names that you are using are for fontawesome v6 and you are including an older version v5 in your project, make sure you copy the icons classes for the version that you are using
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="Grid-container">
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<i class="fa-solid fa-bars"></i>
Link 1
</div>
</div>
</div>
<h3 id="Website name">EVERYTHING CHEMISTRY</h3>
<form class="example" action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<i class="fa-solid fa-angle-down"></i>
this is the link for v5 icons
https://fontawesome.com/v5/search?o=r&s=regular
Guys I am stuck in making a top info bar where I can put all the necessary details like phone number, mail id and some social icons, and I am using Bootstrap 4.1.3 and Font-awesome 5.5 but whenever I try to put a hyperlink after the icon it comes down to the next line. How to properly align it in one line. I have tried a lots of methods but got no results so far.
Please check the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Anything</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="top-info d-sm-none d-md-block">
<div class="col-md-8">
<ul class="list-inline">
<li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span>Login</span></li>
<li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span>Login</span></li>
<li class="list-inline-item"><i class="fas fa-sign-in-alt"></i><span>Login</span></li>
</ul>
</div>
<div class="col-md-4">
<i class="fas fa-sign-in-alt"></i><span>Login</span>
</div>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>
I changed some things in your code, i added the class col-md-8 in the faulty div and so the code is this one <div class="col-md-8">. You can also check the result here https://codepen.io/ekk0/pen/xyOoBB?editors=1000. My guess is that because originally you used col-md-4 it would be a bit buggy. Hope it helps!
Include i tag inside span tag like this
<span> <i class="fas fa-sign-in-alt">Login</i></span>
https://jsfiddle.net/isubhamb/jztosgbd/13/
I'm creating cross-platform mobile application with Framework7. I made modal Login screen like in tutorial from https://www.tutorialspoint.com/framework7/login_screen_start_app.htm
The code of my index.html with this login modal:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
<title>App Title</title>
<link rel="stylesheet" href="styles/framework7.min.css">
<link rel="stylesheet" href="styles/my-app.css">
<link rel="stylesheet" href="styles/icons.css">
</head>
<body>
<div id="app">
<!-- Status bar overlay for fullscreen mode-->
<div class="statusbar"></div>
<div class="panel-overlay"></div>
<div class="views">
<div class="login-screen modal-in">
<!-- Default view-page layout -->
<div class="view">
<div class="page">
<div class="page-content login-screen-content" style="background: whitesmoke; align-items: center;">
<div class="block-header">Login</div>
<!-- Login form -->
<div class="list color-theme-blue">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Имя пользователя</div>
<div class="item-input-wrap">
<input type="text" name="username" placeholder="Имя пользователя" required validate>
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Пароль</div>
<div class="item-input-wrap">
<input type="password" name="password" placeholder="Пароль" required validate>
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<div class="list">
<ul>
<li>
<div class="row justify-content-space-around">
<button class="col-80 button button-fill color-gray">Войти</button>
</div>
</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/framework7.min.js"></script>
<script src="js/my-app.js"></script>
</body>
</html>
My problem is that login's form stays on the top of screen but I want to see it in the middle. To achieve this I've tried some framework css align classes from https://framework7.io/docs/typography.html but it didn't bring any effect. So I need your help to solve this issue
give some width to your login-screen-content div and make it center using margin:0 auto
.login-screen-content {
width: 400px;
margin: 0 auto;
}
or create one div and put your login form there and use above css to it
I want to create a wordpress page which I can put the html code to do the following please
1) Google custom search box (which i can get the GCS code from google) but it has to be OVER an image. not above or below the image :). image will be hosted on my site media library
2) round icons buttons below the search box similar to the one i have attached which bounces when mouse over (images of these icons can be changed and destination urls assigned by me)
the attached example is the yahoo new tab extension for firefox
any help is appreciated.
i have attached the sample page image and the view source code of that page to help understand my context. the difference is that the search will be by google instead of yahoo
thank you friends!
view code below as its not letting me attached doc
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" type="text/css" href="newtab.css">
<link rel="stylesheet" type="text/css" href="brand.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body id="bg" class="flexContainer bgImage">
<div id="bookmarksAbsolute">
<div id="bookmarksFlex" class="uiBG"></div>
</div>
<div id="searchTrendingNowContainer"></div>
<div id="mainContainer">
<div id="uiBlur"></div>
<div id="uiContainer">
<form id="submitSearchNew">
<img id="magnifierNew" src="icons/mag3.svg">
<input type="text" id="searchBoxNew" autocomplete="off" name="p" tabindex="1">
</form>
<div id="searchSuggestContainerNew" class="searchSuggestContainerNew displayNone"></div>
</div>
<div id="urlHidden"><span id="urlContent"></span></div>
</div>
<div id="darkOverlay"></div>
<div id="pageFooter">
<div id="ownerContainer">
<a id="ownerName" class="credit"></a>
<a id="onFlickr" class="credit flickr"></a>
</div>
<div class="newTopSitesContainer" id="topSites"></div>
<div id="urlInfo"></div>
</div>
<div class="dropup" id="dropupMenu">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
</button>
<ul class="dropdown-menu options-list">
<li><a id="toggleViewText" class="toggleText unselectable"> </a></li>
<li class="divider"></li>
<li id="tnDiv" class="displayNone"><a id="toggleTN" class="unselectable"> </a></li>
<li id="tnDivider" class="divider displayNone"></li>
<li><a id="editButton" class="unselectable"> </a></li>
<li class="divider"></li>
<li><a id="feedBack" class="feedBackLink unselectable"> </a></li>
</ul>
</div>
</body>
<script src='newtab.js'></script>
</html>
I do not understand you, if you need show up input tag and image in other image?
If is it yes, use z-index CSS for image for example:
<div class="base"> <!-- z-index = 1 -->
<input type="search" class="search" /> <!-- z-index = 2 -->
<div class="buttons_footer"> <!-- z-index = 2 -->
<button></button>
<button></button>
<button></button>
.....
</div>
</div>
I hope to help
I have the following HTML:
<!DOCTYPE html>
<head>
<title></title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'portfolio/mystyle.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'portfolio/animate.css' %}" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bodyback">
<div class="col-md-12" align="center" style="height:100%">
<a href="{% url 'home' %}">
<img style="margin-top: 20px;"
class="h-logo animated fadeInDown" src="{% static 'portfolio/img/hero.png' %}"
width="180" height="180" alt="">
</a>
<br>
<section id="hi">
<div class="container animated fadeInUp" align="center">
<h2 style="color:#45b29a;" align="center">Hi.</h2>
<p class="p_class" align="center">I'm Gentle Joseph, <br>a 24 year old web designer/developer from Singapore.<br> I have a passion for web design and love to create for web and mobile devices.</p>
</div>
</section>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
<br><br><br><br><br><br><br><br>
<section>
<div>
<h1 style="color:#45b29a;" align="center">What I can do.</h1>
<br><br>
<table>
<tr>
<td align="right" width="50%">
<img
class="h-logo animated fadeIn"
src="{% static 'portfolio/img/design.gif' %}"
width="200" height="200" alt=""></a>
</td>
<td align="center" width="50%"><h3>Design what you want.</h3><br>
<p class="p_class"> I like to keep it simple. My goals are to focus on<br> typography, content and conveying the message that you want to send.</p>
</td>
</tr>
<tr>
<td align="center" width="50%"><h3>Develop what you need.</h3><br>
<p class="p_class"> I'm a developer, so I know how to create your<br> website to run across devices using the latest<br> technologies available.</p>
</td>
<td align="left" width="50%">
<img
class="h-logo animated fadeIn"
src="{% static 'portfolio/img/develop.gif' %}"
width="100" height="100" alt=""></a>
</td>
</tr>
</table>
</div>
</section>
<br><br><br><br><br>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
<button class="btn btn-xs"></button>
</div><br>
</body>
<div align="center" class="more_about">
<a href="{% url 'academics' %}"> Read more about gentle
<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
</div>
<footer>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-md-12" align="right" style="margin-top: 6px;">
<ul class="social-network social-circle">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
</footer>
</html>
And my CSS:
.more_about {
background-color: red;
}
Please ignore all the classes i mentioned in my HTML, because my CSS doesn't have those classes. But i dont know why when i load the page instead of the div where i mentioned my class, the entire page getting background red. Any idea why guys? Thanks in advance.
Please correct the following mistakes in your code and it will fix the issue
1) You have closed your body tag before that div having class more_about
Body tag should always be closed in the end below the footer.
2) You need to add div with class clearfix as shown below just before your div with class .more_about to clear all the float applied to the upper divs.
<div class="clearfix"></div> <!-- this will clear all the floats -->
<div align="center" class="more_about">
<a href="{% url 'academics' %}"> Read more about gentle
<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
</div>
I think this what you expected,just you need to add float:left
.more_about{
background-color: red;
float:left;
}