I'm trying to create a simple layout like so
http://www.ttmt.org.uk/forum/col-1.html
http://jsfiddle.net/Y3kvj/
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="css/master.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
*{
margin:0;
padding:0;
}
html, body{
background:#eee;
height:100%;
}
h1{
font-family:sans-serif;
color:#ddd;
}
#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:auto;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
margin-left:320px;
}
#media only screen and (max-width:700px){
#leftCol{
float:none;
}
#rightCol{
float:none;
margin:20px 0 0 0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftCol">
<h1>Left Col</h1>
</div><!-- #leftCol -->
<div id="rightCol">
<h1>Right Col</h1>
</div><!-- #rightCol -->
</div><!-- #wrapper -->
<!--jQuery -->
</body>
</html>
It's fixed width left column and fluid right column
When the window is resized i would like the left col to drop below the right col - In this example it doesn't
I know this is because the code order.
If I put the left col below the right col when the window resizes it drops below as I would like.
http://www.ttmt.org.uk/forum/col-2.html
http://jsfiddle.net/x8bKD/
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="css/master.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
*{
margin:0;
padding:0;
}
html, body{
background:#eee;
height:100%;
}
h1{
font-family:sans-serif;
color:#ddd;
}
#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:auto;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
float:right;
}
#media only screen and (max-width:700px){
#leftCol{
float:none;
}
#rightCol{
float:none;
margin:0 0 20px 0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="rightCol">
<h1>Right Col</h1>
</div>
<div id="leftCol">
<h1>Left Col</h1>
</div>
</div><!-- #wrapper -->
</body>
</html>
My problem now Is how do I make the right col stretch so it fills the space.
Negative Margins
I know I can do this with negative margins like so
http://www.ttmt.org.uk/forum/col-3.html
http://jsfiddle.net/vkZPj/
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" href="css/master.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
*{
margin:0;
padding:0;
}
html, body{
background:#eee;
height:100%;
}
h1{
font-family:sans-serif;
color:#ddd;
}
#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:auto;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
width:100%;
margin-left:-290px;
float:right;
}
#rightCol-inner{
margin-left:290px;
}
#media only screen and (max-width:700px){
#leftCol{
float:none;
}
#rightCol{
float:none;
margin:0 0 20px 0;
}
#rightCol-inner{
margin-left:0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="rightCol">
<div id="rightCol-inner">
<h1>Right Col</h1>
</div><!-- #rightCol-inner -->
</div>
<div id="leftCol">
<h1>Left Col</h1>
</div>
</div>
</body>
</html>
Is the negative margin the only way - it would add a ton of div's to my code
Having a hard time understanding it just what you want with all of the examples you listed, but....
Order your div's this way:
<div id="wrapper">
<div id="leftCol">
<h1>Left Col</h1>
</div>
<div id="rightCol">
<h1>Right Col</h1>
</div>
</div>
Put an overflow:hidden in #wrapper:
#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:hiddeen;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
Float both columns to the left, give the right column a max-width:
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
max-width:500px;
float:left;
}
If you want to see the right column stretch you need to put some content in it (e.g. - lorum ipsum).
Related
I try this osm-way sample for a-frame and ar.js:
`
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>AR.js osm example</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script>
<script type='text/javascript' src='index.js'></script>
<script type='text/javascript' src='osm.js'></script>
<script type='text/javascript' src='osmway.js'></script>
<script type='text/javascript' src='gps-vector-ways.js'></script>
<style type='text/css'>
#status {
font-family: Roboto, sans-serif;
color: white;
position: absolute;
top:50%;
left:calc(50% - 100px);
font-size: 150%;
font-weight: bold;
}
</style>
</head>
<body style='margin: 0; overflow: hidden'>
<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false'>
<div id='status'></div>
<a-camera gps-projected-camera='simulateLatitude: 51.049; simulateLongitude: -0.723' rotation-reader position='0 20 0' wasd-controls='acceleration: 1300'></a-camera>
<a-entity id='osmElement' osm gps-vector-ways />
</a-scene>
</body>
</html>
`
This sample work fine even iof a change the properties simulateLatidude and simulateLongitude on gps-projected-camera.
How i can display the osm gps-vector-way based on the current user gps position without simulate it ? I search but i don't find results. Thanks in advances
Im using python3 pdfkit to convert html to pdf .
When using macbook , CSS (Bootstrap 5) are not applied properly while generating pdf but the same works fine in ubuntu .
is there any issue with MAC OS ? im using MacOS Big Sur Version11.4
Thanks in advance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Georgian&display=swap" rel="stylesheet">
<style>
#media print {
#LEFT li {
height: auto !important;
}
}
/* #LEFT li{
height: 100%;
} */
.bg-ab {
background-color: #f5f4f7 !important;
}
.icon_circle_success {
border-radius: 50%;
border: 1px solid #198754;
padding: 6px 6px;
margin-right: 6px;
font-size: 12px;
color: #198754;
display: flex;
align-items: center;
}
.icon_circle_dark {
border-radius: 50%;
border: 1px solid;
padding: 6px 6px;
margin-right: 6px;
font-size: 12px;
color: #000;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="row p-0 m-0" id="pdf" style="font-family: Arial, Helvetica, sans-serif;">
<ul class="connectedSortable left_list mb-0 col-3 pt-4 px-0" id="LEFT" style="background-color: rgb(12, 83,
157); color: white;">
<div class="text-center px-3">
<span class="text-capitalize" id="designation">Box1 Col-3</span>
</div>
</ul>
<ul class="connectedSortable left_list mb-0 col-9 pt-4 px-0 !important" id="LEFT" style="background-color: rgb(201, 204, 37); color: white;">
<div class="text-center px-3">
<span class="text-capitalize" id="designation">Box 2 Col-9</span>
</div>
</ul>
</div>
</body>
</html>
HTML Page output
python3 code to generate pdf
import pdfkit;
options = {
'margin-top' : '.3in',
'margin-bottom' : '1in',
'margin-left' : '.1in',
'margin-right' : '.1in',
}
pdfkit.from_file('pdfTest.html', 'pdfTest.pdf',options=options,verbose=True);
PDF Generation output
I need to use the same code for my mobile site as my desktop site (below). How can I enlarge my mobile site's text size so it looks the same as my desktop site?
This is my header info and title:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Title</title>
This is my Cascading Style Sheet data:
<style type="text/css">
<!--
A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:hover {text-decoration: underline;}
img {
height: auto;
max-width: 100%;
object-fit: contain;
}
table {table-layout: fixed; width: 100%;}
td {word-wrap: break-word;}
-->
</style>
</head>
This is my cream background colour:
<body style="background-color: rgb(255, 239, 227);">
This is the content of my site, where I would insert text between the <p> and </p> tags:
<div style="text-align: center;">
<table width="80%">
<tbody>
<tr>
<td>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<br>
<br>
</body>
</html>
Insert the following code before the </head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This makes the text size appear the same size as your desktop site.
I am not sure if this is a material related code or not.
But if you see this code, you'll find that the width of the i element is wider than that displayed by the red border. You cannot navigate to the beginning of the text input as it still points to the material icon, help_circle.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>
<style type="text/css">
div.tipped-small
{
margin-top:-10px;
margin-right:10px;
display:inline-block;
width:15px;
height:15px;
padding:5px;
border-radius:50%;
cursor:pointer;
position:relative;
overflow:none;
}
div.tipped-small i
{
width:15px;
color:#4857BA;
font-size:15px;
line-height:15px;
cursor:pointer;
position:absolute;
overflow:none;
}
</style>
</head>
<body>
<div id="container">
<div class="tipped-small">
<i class="material-icons" style="border:1px solid red">help_circle</i>
</div>
<input type="text" style="height:15px;border:1px solid red"/>
</div>
</body>
</html>
https://codepen.io/anjanesh/pen/LqYXZe
How do I get the i tag to be only 15px ?
I want to create a basic two columns layout in HTML with a table, but I want the table to "occupy" the FULL PAGE. without margins ("white spaces" between borders and browser's window), let me be more clear with an example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pagina nueva 4</title>
<meta name="Microsoft Theme" content="none">
</head>
<body>
<table border="4" width="100%" height="567" style="border-collapse: collapse; border: 3px solid #FF0000" bordercolorlight="#FF0000">
<tr>
<td bgcolor="#008080"> </td>
<td width="160" bgcolor="#000000"> </td>
</tr>
</table>
</body>
</html>
As you can see there, we have a green table with a black sidebar and red borders, all on top of a white background. The thing is, I want the borders to be "absolute" without having white space between user's browser window and them. I want the table to occupy the Full Page without spaces or "margins" or whatever they are, sorry for being redundant.
How can I do that?
This should do it:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pagina nueva 4</title>
<style>
body {
margin: 0px;
padding: 0px;
}
.container {
width: 100%;
min-height: 567px;
padding: 0px;
border: 3px solid #FF0000;
}
.container .content {
background-color: #008080;
}
.container .sidebar {
background-color: #000000;
width: 160px;
}
</style>
</head>
<body>
<table class="container">
<tr>
<td class="content"> </td>
<td class="sidebar"> </td>
</tr>
</table>
</body>
</html>
I also found another way to do it, here's the sample code (Comments in Spanish):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabla ajustable al navegador y colunma fija de 200px</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
overflow: auto;
}
#tabla {
width: 100%;
border-collapse: collapse;
border: 1px solid #444;
background-color: #ffc;
}
.celda_dcha {
width: 200px;
border: 1px solid #444;
background-color: #cfc;
}
</style>
</head>
<body>
<!-- los bordes y colores son para testar la maqueta -->
<!-- este esquema se adapta a cualquier resolución de pantalla, conservando la columna de la derecha siempre los 200px -->
<!-- probado en iexplorer 7 y 8, ff 3.6, opera 10 y safari 5 -->
<table id="tabla">
<tr>
<td>Contenido</td>
<td class="celda_dcha">Columna para imágenes</td>
</tr>
</table>
</body>
</html>