I have following table:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TTT</title>
<style>
/* on both */
body {
overflow-x: hidden;
}
.full-width {
position: relative;
margin: 0 -9999rem;
padding: .25rem 9999rem;
background-color: #000;
color: white;
font-size: 1.125rem;
}
</style>
</head>
<body>
<table class="full-width" style="background-color: #000;">
<td style="color: #FFF">
Text
</td>
<td style="color: #FFF">
Text 2
</td>
</table>
</body>
</html>
Setting html overflow-x: hidden is not an option. Would work but destroy my outbound table. Only on Safari I've a scrollbar. And here.
Snippet partly from here: https://css-tricks.com/full-browser-width-bars/
Related
Essentially I need to figure out how to Create a large black box and then on top of it I want to have the text "MyCloud" with the "My" being white and the "Cloud" being another color. I got the text to finally be different colors but now the black box has disappeared.
<!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>MyCloud</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>
<div myCloud>
<span style="color: red">My</span><span style="color: blue;">Cloud</span>
</div>
</h1>
<h2>Completed Projects:</h2>
<h3>Contact Us</h3>
</body>
</html>
*{
background-color: rgb(255, 255, 255);
}
.myCloud{
background-color: black;
}
h2{
background-color: #6331a8;
text-align: center;
color: white;
}
h3{
color: black;
background-color: #599ed4;
text-align: right;
text-decoration: underline;
padding-right: 30px;
}
you forget something in your code HTML.
try to add class before myCloud
like this:
class="myCloud"
You currently have:
<h1>
<div myCloud>
<span style="color: red">My</span><span style="color: blue;">Cloud</span>
</div>
</h1>
Looks like you forgot class= before myCloud.
Try this:
<h1>
<div class="myCloud">
<span style="color: red">My</span><span style="color: blue;">Cloud</span>
</div>
</h1>
EDIT: You were setting all background colors to be white with the * style at the top of your stylesheet.
.myCloud{
background-color: black;
}
h2{
background-color: #6331a8;
text-align: center;
color: white;
}
h3{
color: black;
background-color: #599ed4;
text-align: right;
text-decoration: underline;
padding-right: 30px;
}
<!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>MyCloud</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1 class="myCloud">
<span style="color: red">My</span><span style="color: blue;">Cloud</span>
</h1>
<h2>Completed Projects:</h2>
<h3>Contact Us</h3>
</body>
</html>
I`m having this issue when I am viewing the email using Gmail App (Mobile):
The table columns are stacking on mobile on all email clients except the Gmail App
I noticed that the styles are not working on google, but if i put the CSS using inline (Ex. style="background-color:red") it works.
I saw a lot of articles saying that the does not works on gmail, but another saying that works if you put it inside the tag.
Main Layout:
#using Sitecore.Mvc.Analytics.Extensions
<!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" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
<!-- Used for storing title of the email -->
#Html.Sitecore().Field("Subject")
</title>
<!-- The VisitorIdentification control ensures that people viewing this page with a traditional web browser will be classified as humans not bots. This control is not required if people only view messages using Email clients -->
#Html.Sitecore().VisitorIdentification()
#if (Sitecore.Context.PageMode.IsExperienceEditorEditing)
{
<link href="~/Assets/5-Components.min.css" rel="stylesheet" />
}
<style type="text/css">
body {
margin: 0px !important;
padding: 0px !important;
}
.wrapper > tbody > tr > td {
box-sizing: border-box;
}
##media only screen and (max-width:720px) {
.wrapper {
width: 90% !important;
margin: auto;
}
.templateColumnContainer {
display: block !important;
/* padding: 0 !important; */
width: 100% !important;
}
.marginBtm {
margin-bottom: 0px;
}
.footerLeft {
border-right: 5px #c2c2c2 solid;
border-bottom: 0px #c2c2c2 solid !important;
}
.footerRight {
border-left: 5px #c2c2c2 solid;
border-top: 0px #c2c2c2 solid !important;
}
}
</style>
</head>
<body style="min-height: 97vh; background-color:#c2c2c2; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box" class="#((Sitecore.Context.PageMode.IsExperienceEditorEditing) ? "edit-mode" : string.Empty)">
<div style="min-height: 97vh; margin:0; padding-top: 16px; background-color:#c2c2c2; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box">
<center>
#Html.Sitecore().Placeholder("mail-body")
</center>
</div>
</body>
</html>
Component Placeholder:
#model XX.Project.EXM.Models.ColumnComponent
<table width="600" cellpadding="0" cellspacing="0" class="wrapper">
<tbody>
<tr>
<td width="50%" class="templateColumnContainer marginBtm" style="background-color: #Model.BackgroundColor; border: 5px #c2c2c2 solid; Padding: #Model.getFormattedPaddingDistance(); color:#Model.TextColor;">
#Html.Sitecore().DynamicPlaceholder("mail-left-double-column")
</td>
<td width="50%" class="templateColumnContainer" style="background-color: #Model.BackgroundColor; border: 5px #c2c2c2 solid; Padding: #Model.getFormattedPaddingDistance(); color:#Model.TextColor;">
#Html.Sitecore().DynamicPlaceholder("mail-right-double-column")
</td>
</tr>
</tbody>
</table>
When GMail encounters an error in your CSS, it will remove the entire <style> block from the head.
You have 2 # symbols in front of your media query.
##media only screen and (max-width:720px) {
I am creating a website for the first time and have run into an issue with the way my page is displayed in Internet Explorer. The page should have a banner with the logos of our sponsors as links to the sponsor's website. It works in Chrome, displaying like
this, a webpage with small, reasonably sized images for the logos. But in IE (version 11), it looks like this, a webpage where I can't even see the whole logo because it is so big. Can someone look at my code and tell me what to change (preferably in simple language since I am a beginner)? Thank you!
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>LTP | Home</title>
<meta name="description" content="Welcome to Language Training Programme">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Microsoft Theme" content="none, default">
<meta name="Microsoft Border" content="none, default">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styling.css" type="text/css" rel="stylesheet">
<!--WHY SPACING SOMETIMES WRONG??-->
</head>
<body>
<!--UNRELATED CODE-->
<table class="sponsors" width=100%>
<tr>
<td width=40%>
<h1>Thank You Sponsors</h1>
</td>
<td rowspan="2">
<img src="Po-Leung-Kuk-logo.png" height="10%">
</td>
<td rowspan="2">
<img src="UBS_logo_logotype_emblem.png" height="3.5%">
</td>
<!--LOOKS BAD IN EXPLORER??-->
</tr>
<tr>
<td class="chinesethankyou">
<h1>谢谢赞助商</h1>
</td>
<td></td>
<td></td>
</tr>
</table>
</body>
* {
margin: 0px;
}
h1 {
font-family:Arial;
color:white;
font-size:25px;
}
h2 {
font-family:Arial;
color:rgb(0,121,194);
font-size: 36px;
padding:20px 0px;
}
.tdlinks {
font-family:Arial;
color:rgb(144,38,143);
font-size: 1.5vw;
font-weight: bold;
padding-bottom: .7vw;
}
.tablelinks {
margin:30px 30px 5px 0px;
}
.sponsors {
background-color: rgb(144,38,143);
box-sizing: border-box;
width: 100%;
padding: 20px 30px;
}
p { /*line spacing*/
font-family:Arial;
color:black;
font-size:14px;
padding:10px 0px;
}
a,a:visited {
color: rgb(144,38,143);
text-decoration: none;
}
.line {
margin:0px 0px 0px 0px;
}
.chinesethankyou{
padding-top: 10px;
}
Getting things to work in other browsers besides chrome can be a little tricky. I recommend checking this site out, if you haven't already W3Schools. My best advice is use Google Chrome first and then move on to another browser. Google Chrome is pretty easy to use without having to do anything extra for its browser.
Setting image height and width will work
.sponsors img{
width: 150px;
height: 150px;
display: inline-block;
}
I want to design a form input with icon inside of it.
when I click on this form element(:focus) then that icon is getting disappear and I want icon to be visible all the times.
<!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>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,body {height: 100%;}
input {
width: 400px ;
height: 4em;
border: none ;
padding: 1em 0 1em 2em ;
color: black;
background: url('https://www.bluebadgeinsurance.com.au/wp-content/uploads/multi-user-icon.png') left center no-repeat ;
background-size: 30px 30px ;
}
</style>
</head>
<body>
<form name="myForm">
<input type="text" name="username" placeholder="username">
</form>
<script>
</script>
</body>
</html>
looks like its a problem with 'live server' from vs-code and without live server there is no problem.
So I'm trying to add my CSS code to my HTML code on notepad++ but every time I run it, the only thing I see is my code and not all the content I want about website. How do I fix this?
Here is a snip of my html code:
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
</head>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br></br>
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
Please find your updated code here, This is how you should add/write CSS to HTML :
I would suggest you to move your <style> tag to <head> area.
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="cascade.css" rel="stylesheet" type="text/css">
<style type="text/css" >
//here is a snip of my css code
#charset "utf-8";
/* CSS Document */
nav div {
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<h1 style= "text-align:center; color: black;"> Nikki </h1>
<br>
</body>
</html>
To apply css you have to put css under tag or you can use external stylesheet..Read more here
Please check this example
<!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>Untitled Document</title>
<style>
nav div
{
display: inline;
text-align: center;
width: 18%;
padding: 5px;
}
p
{
text-transform:none;
font-size: 20px;
color: black;
font-family: "proxima-nova";
letter-spacing:1px;
text-align: left;
}
</style>
</head>
<body>
<div>This is Div.</div>
<p>This is paragraph.</p>
<div style="color:red; font-family:Verdana, Geneva, sans-serif;"> This is Inline CSS Style</div> <!--Inline CSS Style-->
</body>
</html>
You have used css for div and p tag and i have showed you how to use them according to your css. You can also give css in inline way but it just depends on need(mostly avoid it.)
Hope this will help or let me know if there is any confusion or issue..ty