How to create a text inside a box using HTML and CSS? - javascript

I'm trying to create a text(S) inside a rectangular box and the other one(Fox.) outside the box,
Just like this:
I tried to create it but something is wrong
Here's the code:
div {
width: 18px;
height: 72px;
padding: 10px;
border: 5px solid black;
margin: 0;
}
<html>
<head>
</head>
<body>
<div><h1>S</h1></div><p><h1>Fox.</h1>
</body>
</html>

Fixed it for you.
The problem was that you used 2 h1 next to each other.
Each h1 will automatically go to a new line.
I fixed it by using only one h1 and added a <block> where you can add the styles.
block {
width: 18px;
height: 72px;
padding: 10px;
border: 5px solid black;
margin: 0;
}
<html>
<head>
</head>
<body>
<h1>
<block>S</block> Fox.
</h1>
</body>
</html>

the basic idea is not bad! Now I will show you a solution to your problem and we will analyze all the components together.
Let's think about the structure of DIV. First you will need two divs with a reference class or reference ID and you want them to be arranged side by side.
To put them side by side you could create an additional parent div, of flexible type (called father).
We also need 2 texts. In this example I will use simple spans.
We also create a style.css file where we will store the style of our containers
So we can write this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Link your stylesheet -->
<link rel="stylesheet" href="style.css">
<title>Title</title>
<div id="father">
<div id="sonOne"><span>S</span></div>
<div id="sonTwo"><span class="fox">FOX.</span></div>
</div>
</head>
<body>
</body>
</html>
For the style instead, we need to assign the parent a flexible orientation and line type. For the style, on the other hand, we need to assign a flexible, row-type orientation to the parent. To the first div should be put the border and to the second div, the text inside should be bold
Create style.css and try all togheter. Run this!!!
#sonTwo,#sonOne {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#sonTwo,#sonOne span {
font-size: 50px;
}
#father {
display: flex;
flex-direction: row;
}
#sonOne {
border: 2px solid black;
border-radius: 5px;
padding: 5px;
}
#sonTwo {
padding: 5px;
}
.fox {
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Link your stylesheet -->
<link rel="stylesheet" href="style.css">
<title>Title</title>
<div id="father">
<div id="sonOne"><span>S</span></div>
<div id="sonTwo"><span class="fox">FOX.</span></div>
</div>
</head>
<body>
</body>
</html>
For the S on the other hand, you could assign a font from Google Fonts that we have the borders the way you like them

Related

how to get #document-fragment?

I am trying to make a search bar type of thing , by seeing youtube video : https://youtu.be/TlP5WIxVirU?t=471
but got stuck don't know why
the stack overflow is executing and getting the desired output but my pc doesnot
what could be the reason ??
I want to get the output as : Output
but while I execute this code, I'm getting the error as :
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'content')
at script.js:7:39
please help me
const userCardTemplate = document.querySelector("[data-user-template]")
fetch("https://jsonplaceholder.typicode.com/users").then(res => res.json()).then(data => {
const card = userCardTemplate.content.cloneNode(true).children[0]
console.log(card)
})
.search-wrapper{
display: flex;
flex-direction: column;
}
input {
font-size: 1rem;
}
.user-cards {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
gap: .25 re,;
margin-top: 1rem;
}
.card {
border: 1px solid black;
background-color: white;
padding: .5 rem;
}
.card .header{
margin-bottom: .25 rem;
}
.card .body {
font-size: .8rem;
}
.hide{
display: none;
}
<!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">
<title>Search Engine</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="search-wrapper">
<label for="search">Search Users</label>
<input type="search" id ="search">
</div>
<div class="user-cards" >
</div>
<template data-user-template>
<div class="card">
<div class="header">
</div>
<div class="body">
</div>
</div>
</template>
</body>
</html>
The error says exactly what you needed to read. userCardTemplate was not found in the DOM. The reason being the moment in which you trigger the <script> execution. And that's in head. At the moment the parser stopped to read the current DOM there was no such element.
Instead you have two solutions:
Use the defer attribute:
<script src="script.js" defer></script>
in order to defer your script execution, or
place the SCRIPT right before the closing BODY tag:
<script src="script.js"></script>
</body>

How can I make the last element of this CSS DYNAMIC Columns grid to occupy all the columns?

Well, I have this box container class which is a CSS Grid container. As you can see, it's dynamic because of using repeat(auto-fit, minmax(340px, 1fr))
.box-container {
height: 100vh;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-rows: 100px;
}
.box:nth-child(odd) {
background-color: lightblue;
border: 1px solid #000;
}
.box:nth-child(even) {
background-color: aquamarine;
border: 1px solid #000;
}
<!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">
<title>Document</title>
</head>
<body>
<div class="box-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Resizing the viewport's width, we can get to this situation:
I want that last element to occupy two columns instead of just one, but I can't manage to set that dynamically.
So this is what I expect once I get to that point resizing the viewport's width:
But I only know how to do that statically, spanning that last child. And it's not what I want because I only want it to span the two columns in that point of the viewport's width, and setting it up not dynamically would make it to span ALWAYS the two columns.
You get the required behaviour easily by using flex. The flex-wrap propery will take care of adjusting the items inside the container.
So, when you have small screen device, flex-wrap will move the items those overflows to a new row. Hence, we use flex-grow to tell the items to grow based on the space available.
And the flex-basis will tell the items to limit the minimun width it can shrink.
Here is the working example.
.box-container {
height: 150px;
display: flex;
flex-wrap: wrap;
}
.box{
display: flex;
flex-grow: 1;
flex-basis: 150px;
}
.box:nth-child(odd) {
background-color: lightblue;
border: 1px solid #000;
}
.box:nth-child(even) {
background-color: aquamarine;
border: 1px solid #000;
}
<!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">
<title>Document</title>
</head>
<body>
<div class="box-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Codepen which demostrated above example.

Cannot connect html to css

I tried to run my html file but it doesn't know where the css file is .I have two files index.html and style.css both on my desktop.Here how my index.html file looks like :
<!DOCTYPE html>
<html lang="en">
<head>
<link href="./style.css" rel="stylesheet" type="text/css"/>
</head>
<section class="header">
// lots of info here
</section>
and my css has all the things needed.
but the html doesn't get connected to the css file
here is how a part of my style.css look like :
.user {
& {
width: 300px;
margin-left: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
i {
font-size: $large;
&:hover {
color: $white;
cursor: pointer;
}
}
&__notifications {}
&__inbox {}
...
Wrap your <section> as well as other html elements after your <head> tag within <body> tags.
Recompile the scss code to css.
If the files are in the same directory, you should be using style.css as your href (without any leading slashes or dots). And don't forget to close your <body> and <html> tags at the end.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="header">
//lots of info here
</section>
</body>
</html>
Also, it looks like your CSS is actually written in a preprocessing language (possibly SCSS). You should remove all of the variables ($...) and flatten all of the nested selectors (&).
.user {
width: 300px;
margin-left: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.user i {
font-size: 10em; /* or whatever $large was */
}
.user i:hover {
color: #fff; /* or whatever $white was */
cursor: pointer;
}
.user__notifications {}
.user__inbox {}

HTML not stretching to window on sever but working locally

I am facing a strange issue while creating a responsive webpage.
Basically, I created a simple html page(Page 1) and uploaded it to a blob storage. The page is then run in Azure AD's B2C portal which inserts login form into my html page (using CORS) and shows the combined page to the user. Since I have the source code of the final combined page(Page 2) which automatically merges my content with Azure's form, I am able to test the page from my local machine as well.
The issues I am facing is that Page 1 (which I upload to blob) stretches to window perfectly (both height and width), but Page-2 after it's merged with Azure login-form does not stretch along height.
I have already verified using chrome developer tools (enabled using F12 on chrome) that css style on html/body in page2 is the one I applied and only other thing added to it by browser/Azure is {display: block;} which I think should not cause this current issue.
Below are the source codes :-
Page 1 :
<html>
<head>
<title>User Details</title>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link type="text/css" rel="stylesheet" href="https://login.microsoftonline.com/static/tenant/default/css/common-1.0.4.css">
<link type="text/css" rel="stylesheet" href="https://login.microsoftonline.com/static/tenant/default/css/selfAsserted.1.0.8.css">
<script src="https://login.microsoftonline.com/static/tenant/default/js/layout-1.0.0.min.js"></script>-->
<style>
#main_div {
background-image:url('https://adasphase2.blob.core.windows.net/democontainerblockblob/mm_background.jpg');
/* background-color: 00ff00; */
height:100%;
width:100%;
background-repeat:no-repeat;
background-size:100% 100%;
}
body {
/*background-color: #ff00ff;*/
height:100%;
width:100%;
}
h1 {
font-size: 3vw;
letter-spacing: 0px;
color:#F8F8F8;
font-family: sans-serif;
padding:0% 5% 5% 5%;
}
img {
width:100%;
padding-top:10%;
/*padding-top:10%;
padding-left:5%;
padding-right:5%*/
}
label[for=password] {
display: none;
}
h2 {
display: none;
}
{
}
label[for=logonIdentifier] {
display: none;
}
#forgotPassword {
display: none;
}
#password, #logonIdentifier {
margin: 2% 5% 2% 5%;
width: 90%;
}
#password, #logonIdentifier {
margin: 1% 5%;
width: 86%;
padding: 2% 2%;
}
#next {
background-color: #222222;
border-style: solid;
border-radius: 5px;
border-color: #ffffff;
color: white;
padding: 2% 2%;
text-align: center;
font-size: 3vw;
font-family: sans-serif;
border-width: 1px;
width: 90%;
margin: 2% 5%;
text-transform: uppercase;
font-weight: bold;
}
#next:active {
background-color: #444444;
}
div.create {
display: none;
}
#forgot{
font-size: 3vw;
letter-spacing: 0px;
color:#F8F8F8;
font-family: sans-serif;
margin:2% 5%
}
</style
</head>
<body>
<div id="main_div">
<img id="background_background_image" src="https://adasphase2.blob.core.windows.net:443/democontainerblockblob/splash_stacked_logo.png" alt="Illustration" />
<h1>LOGIN WITH A TARPPORTAL.COM ACCOUNT OR CLICK REGISTER FOR A NEW ACCOUNT.</h1>
<div id="api"></div>
</div>
</body>
</html>
Page2 (combined page):
<!DOCTYPE html>
<!-- Build: 1.0.0.114 -->
<html>
<head>
<title>Loading...</title>
<script src="https://login.microsoftonline.com/static/library/require-2.1.17.min.js"></script>
<script>window.staticHost="https://login.microsoftonline.com/static";window.targetSlice="001-000";</script>
<script>var elementUrl="elements/selfasserted/unifiedSSP-1.0.8.min";</script>
<script>define('template.CP', [/** no dependencies. **/], {"list":[]});
define('template.SA_FIELDS', [/** no dependencies. **/], {"AttributeFields":[{"IS_TEXT":true,"IS_PASSWORD":false,"IS_DATE":false,"IS_RADIO":false,"IS_DROP":false,"IS_CHECK_MULTI":false,"IS_LINK":false,"VERIFY":false,"DN":"LogonIdentifier","ID":"logonIdentifier","U_HELP":"","DAY_PRE":"0","MONTH_PRE":"0","YEAR_PRE":"0","IS_REQ":true,"IS_RDO":false},{"IS_TEXT":false,"IS_PASSWORD":true,"IS_DATE":false,"IS_RADIO":false,"IS_DROP":false,"IS_CHECK_MULTI":false,"IS_LINK":false,"VERIFY":false,"DN":"Password","ID":"password","U_HELP":"Enter password","DAY_PRE":"0","MONTH_PRE":"0","YEAR_PRE":"0","IS_REQ":true,"IS_RDO":false}]});
define('language.data', [/** no dependencies. **/], {"email_pattern":"^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$","logonIdentifier_email":"Email Address","requiredField_email":"Please enter your email","logonIdentifier_username":"Username","createaccount_link":"Sign up now","requiredField_username":"Please enter your user name","createaccount_intro":"Don't have an account?","forgotpassword_link":"Forgot your password?","divider_title":"OR","cancel_message":"The user has forgotten their password","button_signin":"Sign in","social_intro":"Sign in with your social account","requiredField_password":"Please enter your password","invalid_password":"The password you entered is not in the expected format.","local_intro_username":"Sign in with your user name","local_intro_email":"Sign in with your existing account","invalid_email":"Please enter a valid email address","unknown_error":"We are having trouble signing you in. Please try again later."});
define('settings.data', [/** no dependencies. **/], {"remoteResource":"https://adasphase2.blob.core.windows.net/democontainerblockblob/RemoteServicesLoginPage.html","retryLimit":3,"api":"CombinedSigninAndSignup","csrf":"R2lYeVl1cEJLYWlpdENnSHJoOHpITHZtWWFaR2Y4eCsvcUZiK3JsTDd5OXFBZFAzUDViNDBtSTczUTd1YnpPS3RpVURmd1dPOGM1K0FZYU5Fam1IRkE9PTsyMDE2LTA1LTE4VDIyOjEzOjU3LjQxNTEwMjJaO0F6U0VkYlRUbDlHenNoQkVHK1JYSUE9PTt7Ik9yY2hlc3RyYXRpb25TdGVwIjoxfQ==","transId":"eyJUSUQiOiJmN2I4ODJjOS03NmJlLTQ0MzktYWJjNi1hNzE1NjM3ZDM4MGQifQ","pageMode":0,"config":{"operatingMode":"Email","sendHintOnSignup":"False","forgotPasswordLinkLocation":"AfterLabel","includePasswordRequirements":"true"},"hosts":{"tenant":"/lexustmstest.onmicrosoft.com/B2C_1_TMS_Lexus_SignUpandSignIn_Policy","policy":"B2C_1_TMS_Lexus_SignUpandSignIn_Policy","static":"https://login.microsoftonline.com/static/"},"locale":{"lang":"en","country":"US"}});
</script>
<script>var cookieEnabled=navigator.cookieEnabled?!0:!1,Constants;typeof navigator.cookieEnabled!="undefined"||cookieEnabled||(document.cookie="probe",cookieEnabled=document.cookie.indexOf("probe")!=-1?!0:!1),function(){document.querySelectorAll||(document.querySelectorAll=function(n){var i=i=document.createStyleSheet(),r=document.all,f=r.length,t,u=[];for(i.addRule(n,"k:v"),t=0;t<f;t+=1)if(r[t].currentStyle.k==="v"&&(u.push(r[t]),u.length>Infinity))break;return i.removeRule(0),u});String.prototype.trim||function(){var n=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;String.prototype.trim=function(){return this.replace(n,"")}}()}();cookieEnabled&&(Constants=[],Constants.ERROR_REDIRECT_CONSOLE_STRING="Redirecting back to B2C service with querystring",function(){for(var n,u=function(){},t=["assert","clear","count","debug","dir","dirxml","error","exception","group","groupCollapsed","groupEnd","info","log","markTimeline","profile","profileEnd","table","time","timeEnd","timeStamp","trace","warn"],i=t.length,r=window.console=window.console||{};i--;)n=t[i],r[n]||(r[n]=u)}(),require(["require"],function(){require.config({baseUrl:window.staticHost,paths:{jquery:"library/jquery-1.10.2.min",handlebars:"library/handlebars-2.0.0.min",requirecss:"library/require-css-0.1.8.min",simpleModal:"library/jquery.simplemodal-1.4.5.min",core:"js/core-1.0.17.min",metrics:"js/metrics-1.0.1.min",modal:"js/modal-1.0.1.min",iso:"js/iso-unified-1.0.2.min",element:elementUrl},map:{"*":{css:"requirecss"}},skipDataMain:!0});require(["core","settings.data","metrics","element"],function(n,t,i,r){try{window.Metrics=i;metricResource=window.Metrics.create(t.remoteResource);metricResource.start();function u(){var i,f=canSetHeaders=!0,e=t.retryLimit;window.XDomainRequest?(i=new XDomainRequest,f=canSetHeaders=!1):i=new XMLHttpRequest;i.open("GET",metricResource.id);canSetHeaders&&metricResource.id.indexOf(window.staticHost)===0&&i.setRequestHeader("x-ms-cpim-slice",window.targetSlice);i.onload=function(){var t,u;if(!f||f&&i.status===200){metricResource.end();t=(new Date).getTime();r.initialize(i.responseText);metricResource.setInitializationTime((new Date).getTime()-t);return}u="external?statusCode="+i.status+"&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(u);return};i.onerror=function(){var t=0,r;f&&(t=i.status);r="external?statusCode="+t+"&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(r)};i.timeout=function(){if(this.tryCount++,this.tryCount<=this.retryLimit){u();return}var t="external?statusCode=4&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(t);return};i.onprogress=function(){};i.send()}u()}catch(f){n.redirectToServer("error?statusCode=0&statusMessage="+encodeURIComponent(f.message)+"&resource="+encodeURIComponent(t.remoteResource))}})}))</script>
</head>
<body>
<style>.no_display{display:none}.error_container h1{color:#333;font-size:1.2em;font-family:'Segoe UI Light',Segoe,'Segoe UI',SegoeUI-Light-final,Tahoma,Helvetica,Arial,sans-serif;font-weight:lighter}.error_container p{color:#333;font-size:.8em;font-family:'Segoe UI',Segoe,SegoeUI-Regular-final,Tahoma,Helvetica,Arial,sans-serif;margin:14px 0}</style>
<noscript>
<div id="no_js">
<div class="error_container">
<div>
<h1>We can't sign you in</h1>
<p>Your browser is currently set to block JavaScript. You need to allow JavaScript to use this service.</p>
<p>To learn how to allow JavaScript or to find out whether your browser supports JavaScript, check the online help in your web browser.</p>
</div>
</div>
</div>
</noscript>
<div id="no_cookie" class="no_display">
<div class="error_container">
<div>
<h1>We can't sign you in</h1>
<p>Your browser is currently set to block cookies. You need to allow cookies to use this service.</p>
<p>Cookies are small text files stored on your computer that tell us when you're signed in. To learn how to allow cookies, check the online help in your web browser.</p>
</div>
</div>
</div>
<script>if (!cookieEnabled) document.getElementById('no_cookie').className = '';</script>
</body>
</html>
Any help/pointers are appreciated !
You can try
body, html { margin: 0; padding: 0; }
On line 1 of your first page add
<!doctype html>
and then further down you have a typo on the closing style tag
</style <--------
</head>
thanks for your help. I found this post helpful :
Stackoverflow
Adding html{ height:100%; } resolved the issue.

facebook photo/ image vertical align?

How does facebook vertically align its photos? I inspected their img tag and its parent. The parent doesn't use padding and the img doesn't use margins. There is vertical-align, but I don't think it applies in this case(see Image not vertical-align:middle). I normally vertically align using margins (and sometimes with javascript) so I'm interested in how facebook does it without padding or margins. Does anyone know how they do it?
After doing some research in facebook's website i found the answer,here is the code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.img_contain {
height: 700px;
text-align: center;
line-height: 700px;
border: #333333 1px solid;
}
.img_contain img {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="img_contain">
<img src="images/image.jpg" />
</div>
</body>
</html>
Only thing i was missing is adding <!DOCTYPE html> at the top of the document.Now its working.
And one more thing the height and line-height of the parent should be equal and it should be greater than height of the image it contains
TESTED CODE using display: table-cell
*refer to http://www.w3schools.com/cssref/pr_class_display.asp*
test page at http://anotherfeed.com/stack/css/valign.php
<!DOCTYPE html>
<html>
<head>
<title>StackOverflow on Another Feed</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div style="height: 500px; min-height: 500px; width: 500px; border: 1px solid; display: table-cell; vertical-align: middle; text-align: center">
<img src="http://anotherfeed.com/facebook_icon.png" style="display: inline-block; margin-left: auto; margin-right: auto;" />
</div>
</body>
</html>

Categories

Resources