https://stackoverflow.com/questions/13568693/collapsed-wesite-template-when-i-mininize-the-browser. Sorry for my previous meaningless question.
I have a HTML website template with 100% width. The webpage is showed correctly in full browser window. But i change the size of the browser window means the entire design collapsed. I think the fault is in css html and body tag. can any one fix this error.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>title</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
</head>
<body>
<header id="header">
<hgroup>
<h1 class="site_title">Admin</h1>
<h2 class="section_title">Dashboard</h2><div class="btn_view_site">View </div>
</hgroup>
</header> <!-- end of header bar -->
<section id="secondary_bar">
<div class="user">
<p>John Doe (3 Messages)</p>
<!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
</div>
<div class="breadcrumbs_container">
<article class="breadcrumbs">Admin <div class="breadcrumb_divider"></div> <a class="current"></a></article>
</div>
</section><!-- end of secondary bar -->
css :
html, div, map, dt, isindex, form, header, aside, section, section, article, footer {
display: block;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
background: #F8F8F8;
font-size: 12px;
}
.clear {
clear: both;
}
I'm still not sure exactly what you want. However, if you don't want the width of the page to resize then you need to use a size unit that will not change with the width of the window, such as px or em, for example:
width: 1000px;
Related
I have the following Problem:
for a while now my Website started showing a border all around it. Sadly I don't know when so I can't find a backup which was not bugged. I probably tried everything but I cannot fix it. Here is the start of my css code:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 400;
color: #777;
}
.all-area {
overflow: hidden;
}
section,
.section {
position: relative;
}
.container {
width: 100%;
margin: 0 auto;
}
.container-fluid {
padding: 0 5%;
}
The problem should be in this part, right? I am new to CSS (like very new) but I tried putting a div before my body and even that would appear withhin the border, so It would not stick on the upper left side of the screen.
Here is the start of my HTML so you can see the classes:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Title -->
<title>RRive - Home</title>
<!-- Favicon -->
<link rel="icon" href="assets/img/icon/rrive-favicon3.png">
<!-- ***** All CSS Files ***** -->
<!-- Style css -->
<link rel="stylesheet" href="assets/css/main.css">
<!-- Responsive css -->
<link rel="stylesheet" href="assets/css/responsive.css">
</head>
<body class="miami">
<!--====== Preloader Area Start ======-->
<div id="loader">
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</div>
<!--====== Preloader Area End ======-->
<!--====== Scroll To Top Area Start ======-->
<div id="scrollUp" title="Scroll To Top">
<i class="icofont-bubble-up"></i>
</div>
<!--====== Scroll To Top Area End ======-->
<div class="all-area">
<!-- ***** Header Start ***** -->
<header class="section header-area">
A guy who tried fixing it told me it was a padding I had on my body which was causing the problem, but there is no padding on my body, as far as I can see. I even tried adding padding 0 and margin 0 to some classes in css trying to find the one that was causing it but obviously no luck there...
I set the font-size in the HTML root element, to use rem units in the project. After that, I couldn't apply any styles on the body element. The inspector shows that it's using the user agent default stylesheet. The other styles do apply, but the body element is completely broken.
It's the same in Chrome, Firefox and Safari. Also the font-family, color, padding etc. are all broken.
If needed you can download the project via this link.
If I comment out the * and HTML selectors, the padding, font-family is back, but the rems are incorrect because of the default 16px font-size.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: #777;
padding: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>Natours</title>
</head>
<body>
<header class="header">
<div class="logo-container">
<img src="./img/logo-white.png" class="logo" alt="natours logo">
</div>
<div class="heading-container">
<h1 class="heading-primary">
<span class="heading-primary-main">Outdoors</span>
<span class="heading-primary-sub">is where life happens</span>
</h1>
Discover our tours
</div>
</header>
</body>
</html>
How can i set correctly the root font-size to use rems? What causes this problem?
This is very strange. I copied, opened, closed the file like ten times. Then deleted (not commented) out the html selector and just rewrote it again. This fixed the issue. I have never seen anything like this before.
The whole bootstraps thing is killing me. I'm so lost on this subject if there's anyone who can help me out on this, I'll be really thankful.
Sorry that my style sheet can't connect to this website.
My nav-bar looks like
this
but it should look like
this
I truly hope you can help me get out of this mess!
* {
font-family: 'Oxygen', sans-serif;
background-color: maroon;
}
/** Header **/
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/flying-cat.png') no-repeat;
width: 150px;
height: 150px;
left: 15px;
background-size: contain;
margin: 10px 10px 10px 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<div id="logo-img"></div>
</a>
</div>
</div>
</nav>
</div>
</div>
</nav>
</header>
</body>
</html>
The image doesn't fit because you've set it to be an absolute size, which is larger than the nav-bar. Your CSS class logo-img contains height: 150px which makes it break out of the nav-bar. Set a lower height property so that it fits within the nav-bar.
You've also used a div inside that navbar-brand div which isn't necessary and is causing problems, even in bootstrap boiler plates the navbar-brand image is an image element within that div. Put an image tag inside that navbar-brand div, specify a width and specify a height of auto so that it scales within its boundaries.
Here is the way it is done in Bootstrap examples, you will need to tweak this when using your own image source though.
Edit your navbar-header HTML so it looks like this:
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<img src="https://placeholdit.co//i/555x150"></a>
</div>
Add the following rule to your CSS:
.navbar-brand {
padding: 10px;
}
The problem was the unnecessary styling that bootstrap applies.
So
You'll need to set your Header to fixed height, Then set the div with the background to a height within the header's height for a logo it's should be problematic in the long run, In case of making the website responsive.
I made a somewhat close to what you need demo, take it from there to your desired design.
* {
font-family: 'Oxygen', sans-serif;
margin:0;padding:0;
}
header{
height: 100px;
}
#header-nav {
background-color: #f6b319;
border-radius: 0;
}
#header-nav,.container,.navbar-header,.navbar-brand{height: 100%;}
#logo-img {
background: url('4.png') no-repeat;
display:inline-block;
width:80px;
border:1px solid;
height: 80px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">
<div id="logo-img"></div>
</a>
</div>
</div>
</nav>
</div>
</div>
</nav>
</header>
</body>
</html>
would like some help as i m trying to print the html page. I would like to have the header and the footer on all pages when printing.
this is my current code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style media="screen">
.header{
top: 0;
width: 100%;
height: 100px;
height: 100px;
}
.content{
}
.footer{
padding-top: 50px;
width: 100%;
height: 100px;
}
</style>
<div class="header">
header
</div>
<div class="content">
<table>
<tr><td>dfdsfsdfsdf start</td></tr>
<tr><td>dfdsfsdfsdf</td></tr>
<tr><td>dfdsfsdfsdf</td></tr>
<tr><td>dfdsfsdfsdf end</td></tr>
<!-- there will be around 1000 record of <tr><td></td></tr>-->
</table>
</div>
<div class="footer">
footer
</div>
</body>
</html>
currently the header is not in the second page and the footer goes to the second page and there is no footer for the first page. So how can i do it so that it will look like a bank statement or any other statement where on every page there is a header and a footer and the value from the table remains in the middle of every page
Here is the image which i m getting currently
Here is the image which i m getting currently
You may just want to provide the data as a downloadable .pdf or .doc, and configure that file to have a header and footer on each page. That's what my bank does with my statements.
I don't think HTML5 supports what you're trying to do. Though it would be cool feature for HTML6.
I'm getting a little problem with my HTML page. I would like to set my horizontal line to the left side.
Up to now, my line is always situated in the center of my page and I don't reach to move this line between my text.
This is my little HTML script :
<html>
<head>
{% load staticfiles %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/>
<style>
body {
font-family: Courier New, Courier, monospace;
text-align: justify;
list-style-type: none;
}
.header {
line-height: 80%;
margin:left;
}
</style>
</head>
<body>
<div class = "header">
<h3> Département </h3>
<p></p>
(variable)
<hr align="left" width="10%">
<h3> Commune </h3>
<p></p>
(variable)
</div>
</html>
And my HTML page looks like :
Do you have an idea ?
You can try set display: inline-block; to your <hr> to render the horizontal line as an inline element with block properties.
Also make sure that your markup and CSS is valid! E.g. a CSS rule margin: left; is wrong. Right would be: margin-left: 10px;.
Plus: It's not recommended to use inline styles, as the code becomes less maintainable. Try defining the rules in the CSS section of your HTML document or a separate CSS file.
.header {
line-height: 80%;
}
hr {
width: 10%;
display: inline-block;
}
<div class="header">
<h3> Département </h3>
<p>(variable)</p>
<hr>
<h3> Commune </h3>
<p>(variable)</p>
</div>
Just add (variable) text inside any HTML element. So that hr tag will come below it.
<html>
<head>
{% load staticfiles %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/>
<style>
body {
font-family: Courier New, Courier, monospace;
text-align: justify;
list-style-type: none;
}
.header {
line-height: 80%;
}
</style>
</head>
<body>
<div class = "header">
<h3> Département </h3>
<p></p>
<span>(variable)</span>
<hr align="left" width="10%">
<h3> Commune </h3>
<p></p>
<span>(variable)</span>
</div>
</html>