so, I'm new to this and I'm working on a basic redirect Tumblr theme [not important] but I have a banner which is a div box and I want to fit into an image as it would if I was using overflow:hidden. the only problem is, that command isn't working. Part of the code had to be copied and pasted, and I think something within the c/p'ed css is keeping that from working. Also, sorry in advance if my code is written terribly, again I'm new at this.
The white background/banner that says 'this blog has moved' is what I'm trying to hide so it doesn't overlap the border.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</HEAD>
<STYLE>
body {background-color: #dff2f4;}
img {
height: 500px;
width: 710px;
margin-top: 100px;
margin-left: 355px;
border-width: 15px;
border-radius: 50px;
border-style: double;
border-color: white;
overflow: hidden;
background-color: #cbdaff;
}
.centered {
font-family: 'SourceSansPro-ExtraLight';
transform: translate(-50%, -50%);
background-color: white;
text-align: center;
position: absolute;
color: #dadada;
top: 50%;
left: 50.7%;
width: 750px ;
font-size: 30px;
letter-spacing: 10px;
overflow: hidden;
padding: 7px 7px 7px 7px;
}
#font-face {
font-family: 'SourceSansPro-ExtraLight.ttf';
src: url('fonts/SourceSansPro-ExtraLight.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</STYLE>
<BODY>
<div class="banner">
<div class="centered">THIS BLOG HAS MOVED</div>
<img src="https://66.media.tumblr.com/0ec32bfc5aeafd4db56b123737224ef8/tumblr_pn6qcyuFhy1xiq9t5o2_r1_540.gif">
</div>
</BODY>
</HTML>
Is this?
body {background-color: #dff2f4;}
.img {
background: url("https://66.media.tumblr.com/0ec32bfc5aeafd4db56b123737224ef8/tumblr_pn6qcyuFhy1xiq9t5o2_r1_540.gif");
height: 500px;
width: 710px;
margin-top: 100px;
margin-left: 355px;
border-width: 15px;
border-radius: 50px;
border-style: double;
border-color: white;
overflow: hidden;
background-color: #cbdaff;
}
.centered {
font-family: 'SourceSansPro-ExtraLight';
transform: translate(-50%, -50%);
background-color: white;
text-align: center;
color: #dadada;
margin-top: 50%;
width: 750px ;
font-size: 30px;
letter-spacing: 10px;
padding: 7px 7px 7px 7px;
}
#font-face {
font-family: 'SourceSansPro-ExtraLight.ttf';
src: url('fonts/SourceSansPro-ExtraLight.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="banner">
<div class="img">
<div class="centered">THIS BLOG HAS MOVED</div>
</div>
</div>
Related
The position of the portfolio page is well positioned but I think I don't use correctly propriety margin-left, I think that I have to use another propriety?
Then, my second problem is that my languages page is too far from my portfolio page, I would like to fix to 50 px. But I cannot do because I am stuck with my first problem.
Thank you for help.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
}
.page-left{
display: inline-block;
margin-left: 430px;
}
<body>
<header>
<div class="header-block">
<div class="page-left">Portfolio</div>
<div class="page-left">Languages</div>
</div>
</header>
</body>
You should create a new selector for your code for the second question:
View the result in full screen for actual margin-left working.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
}
.page-left{
display: inline-block;
margin-left: 430px;
border:1px solid black;
}
.Languages{
display: inline-block;
margin-left: 30px;
border:1px solid red;
}
<body>
<header>
<div class="header-block">
<div class="page-left">Portfolio</div>
<div class="Languages">Languages</div>
</div>
</header>
</body>
Just add margin-left: 430px; to the header-block div
You can use "flex" it's help you
In different screen sizes It will help arrange the right proportions
Try.
body{
margin: 0px;
padding: 0px;
}
header{
background-color: #B1DBE8;
height: 98px;
}
.header-block{
font-size: 11px;
text-transform: uppercase;
padding-top: 8px;
font-weight: 700;
color: #777;
line-height: 20px;
display: flex;
}
.page-first{
display: inline-block;
margin-left: 430px;
}
.page-second{
margin-left: 50px;
}
<body>
<header>
<div class="header-block">
<div class="page-first">Portfolio</div>
<div class="page-second">Languages</div>
</div>
</header>
</body>
Example.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I did check the other questions, but none of them fixed my problem. When I resize the page, my elements are moving everywhere, all squashed up. I even tried doing a wrapper div, and that didn't help. Are we allowed to post web sites? Because I have the site live.
<!DOCTYPE html>
<html>
<head>
<title>Promises!-Contact</title>
<meta charset="UTF-8">
<style>
#body {
margin: 0 auto;
width: 370px;
height: 1%;
margin-top: 100px;
border-radius: 15px;
border: 5px dotted #00A396;
background-clip: content-box;
background-color: #F8B72E;
text-align: justify;
font-family: Kirvy;
overflow: hidden;
font-size: 13px;
}
#wrapper {
width: 100%;
margin: 0%;
padding: 0%;
}
p { padding: 10px;}
#title {
text-align: center;
font-size: 24px;
top-margin: 0px;
padding: 0px;
}
nav {
font-family: KBAStitchInTime;
font-size: 12px;
color: #EC225F;
right: 220px;
top: 140px;
position: relative;}
#dot1 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot2 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot3 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot4 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
a:link { color:#EC225F; text-decoration:none; }
a:visited{ color: purple; }
a:hover{ color: ;}
a:active {}
body {background-color: #262626;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
<span id="dot1">.</span>About<br>
<span id="dot2">.</span>Pages<br>
<span id="dot3">.</span>Poems<br>
<span id="dot4">.</span>Home<br>
</nav>
<div id="body">
<p id="title">Contact!</p>
<p> I love getting mail! Find me at:</p>
</div>
</div>
</body>
</html>
I am sending emails by phpmailer and I need to add an external font. I tried 2 ways to add it and no one is working.
1) I tried to use <link href='https://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'><meta charset="UTF-8"> in header of my mail. When I read source of email in my Gmail it is something like this:
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'><meta charset="UTF-8">
</head>
<body style="background-color: #232227;">
<div id="content" style="width: 600px; background-color: white; margin: 0 auto; padding-bottom: 20px; border-radius: 5px;margin-top: 50px;">
<div id="photo" style="width: 600px; height: 300px; background-image: url('https://mywebsite.com/pic/mail.jpg'); background-size: 100% 100%; border-top-left-radius: 5px; border-top-right-radius: 5px;"></div>
<div id="temat" style=style="width: 600px; font-family: 'Titillium Web', sans-serif; color: #232227; font-size: 30px; text-align: center; margin-top: 20px; margin-bottom: 10px;">Hello<span style="color: #1274FF; font-size: 30px;">!</span></div>
<div id="tresc" style="width: 500px; margin: 0 auto; font-family: 'Titillium Web', sans-serif; color: #232227; font-size: 16px; text-align: justify;">content</div>
<div id="button" style="width: 240px; height: 45px; line-height: 45px; text-decoration: none; margin: 0 auto; background-color: #1274FF; cursor: pointer; font-family: 'Titillium Web', sans-serif; color: white; font-size: 22px; text-align: center; margin-top: 30px; margin-bottom: 30px; border-radius: 5px;">Activate</div>
</div>
</body>
</html>
So looks good but still don't work.
2) I used font-face and effect is same:
<html>
<head>
<style>#font-face{
font-family: 'Titillium Web';
src: url(https://mywebsite.com/font.ttf);}
</style><meta charset="UTF-8">
</head>
<body style="background-color: #232227;">
<div id="content" style="width: 600px; background-color: white; margin: 0 auto; padding-bottom: 20px; border-radius: 5px;margin-top: 50px;">
<div id="photo" style="width: 600px; height: 300px; background-image: url('https://mywebsite.com/pic/mail.jpg'); background-size: 100% 100%; border-top-left-radius: 5px; border-top-right-radius: 5px;"></div>
<div id="temat" style=style="width: 600px; font-family: 'Titillium Web', sans-serif; color: #232227; font-size: 30px; text-align: center; margin-top: 20px; margin-bottom: 10px;">Hello<span style="color: #1274FF; font-size: 30px;">!</span></div>
<div id="tresc" style="width: 500px; margin: 0 auto; font-family: 'Titillium Web', sans-serif; color: #232227; font-size: 16px; text-align: justify;">content</div>
<div id="button" style="width: 240px; height: 45px; line-height: 45px; text-decoration: none; margin: 0 auto; background-color: #1274FF; cursor: pointer; font-family: 'Titillium Web', sans-serif; color: white; font-size: 22px; text-align: center; margin-top: 30px; margin-bottom: 30px; border-radius: 5px;">Activate</div>
</div>
</body>
</html>
Apparently this is possible, but email client compatibility is hazy. Additionally, this is a large resource for something like an HTML newsletter (as opposed to a web page, where you can control rendering and loading).
If you really wish to do this, see here for some good information on the subject:
https://www.campaignmonitor.com/dev-resources/will-it-work/webfonts/
I am trying to center the div with id="center" both vertically and horizontally within the body tag without distorting the placement of the content: M, cicle div and Coming soon... text. Can't really get it to work even though it should be a simple thing..
HTML:
<body>
<div id="center">
<div class="circle"><div>M</div></div>
<h2>Coming soon...</h2>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
font-family: futura;
}
body {
height: 100%;
width: 100%;
background-color: black;
}
h2 {
color: #f6c003;
font-family: serif;
font-style: italic;
font-weight: 400;
font-size: 0.9em;
margin-top: 10px;
}
.circle {
text-align: center;
width: 50px;
height: 50px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #f6c003;
}
.circle div {
float:left;
width:50px;
padding-top:25px;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:black;
font-style: bold;
font-weight: 700;
font-family: serif;
font-size: 2.5em;
}
Fiddle
You can use some absolute positioning to get it done
#center {
position:absolute;
left:50%;
top:50%;
margin: -33px 0 0 -43px;
}
The key being that you have negative margins of half the width and half the height to properly position th element ( fixed size only )
Also make sure your body is set to position: relative; in order for the absolute positioning to work correctly.
<style>
body {
height: 100%;
width: 100%;
background-color: black;
}
h2 {
color: #f6c003;
font-family: serif;
font-style: italic;
font-weight: 400;
font-size: 0.9em;
margin-top: 10px;
}
.circle {
text-align: center;
width: 50px;
height: 50px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #f6c003;
}
.circle div {
float:left;
width:50px;
padding-top:25px;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:black;
font-style: bold;
font-weight: 700;
font-family: serif;
font-size: 2.5em;
}
#center
{
position:absolute;
left:50%;
top:50%;
}
</style>
<body>
<div id="center">
<div class="circle"><div>M</div></div>
<h2>Coming soon...</h2>
</div>
</body>
As much as I hate tables, tables do a good job of vertically aligning. Maybe there's a better way?
<body>
<table>
<tr>
<td>
<div id="center">
<div class="circle"><div>M</div></div>
<h2>Coming soon...</h2>
</div>
</td>
</tr>
</table>
</body>
Style:
table {
width: 100%;
height: 100%;
border-spacing: 0px;
border-collapse: collapse;
}
.center {
margin: auto;
}
I have text-based navigation. Rolling over "contact" displays the address (layer) over all the other menu buttons. I would like the email address and the phone number to be rollovers (changing color from grey to red) and as well clickable links.
Problem: roll-out makes the address disappear, which is intended but it's impossible to click address/phone links.
Would it work if the roll-out effect (disappearing) would be delayed? Is there a CSS only solution?
Here's the page:
raphaelzwyer.com/testRapha/rollover_test.html
<!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>raphaelzwyer</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;}
#font-face {
font-family: 'BotonReg';
src: url('fonts/BotonReg.eot');
src: url('fonts/BotonReg.eot?#iefix') format('embedded-opentype'),
url('fonts/BotonReg.woff') format('woff'),
url('fonts/BotonReg.ttf') format('truetype'),
url('fonts/BotonReg.svg#BotonReg') format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;}
#font-face {
font-family: 'BotonMed';
src: url('fonts/BotonMed.eot');
src: url('fonts/BotonMed.eot?#iefix') format('embedded-opentype'),
url('fonts/BotonMed.woff') format('woff'),
url('fonts/BotonMed.ttf') format('truetype'),
url('fonts/BotonMed.svg#BotonMed') format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;}
html, body {
background-color: #FFFFFF;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
color: #a9a9a9;
height: 100%;
width: 100%;
font-family: "BotonReg", "Courier", "Courier New", "Bookman Old Style", serif;
font-size: 16px;
overflow-y: scroll;
letter-spacing: 0.065em;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
font-smooth: 1em;
text-shadow: 0 1px 1px rgba(255,255,255,.3);}
a {
text-decoration: none;
color: #a9a9a9;}
a:hover {
text-decoration: none;
color: #be1f2d;}
a:focus {
text-decoration: none;
color: #be1f2d;}
li {
list-style-type: none;
display: inline;}
.clear {
clear: both;}
#container {
position: relative;
top: 0px;
margin: 0px auto;
width: 860px;
min-height: 100%;
height: auto !important;
height: 100%;
border: none;}
#topmenu {
position: relative;
top: 0px;
left: 212px;
width: 660px;
height: 48px;}
.menubuttons {
position: relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("images/menubg.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
float: left;}
.menubuttons:hover {
position: relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("images/menubg_h.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
float: left;}
.menubuttonactive {
position :relative;
top: 0px;
width: 100px;
height: 36px;
background-image: url("images/menubg_a.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
float: left;}
.menubuttonactive a {
color: #be1f2d;}
#addressbox {
position: absolute;
top: 0px;
width: 548px;
left: 212px;
height: 22px;
background-image: url("images/menubg.png");
background-repeat: repeat-x;
padding: 10px 0px 0px 0px;
letter-spacing: 0.062em;
text-align: right;
float: left;
z-index: 900;}
#addressbox:hover {
position: relative;
top: 0px;
width: 548px;;
height: 22px;
background-image: url("images/menubg_h.png");
background-repeat: repeat-x;
float: left;
z-index: 900;
color: #be1f2d;}
#addressboxbelow {
position: absolute;
top: 36px;
width: 548px;
left: 212px;
height: 22px;
background-image: url("images/menubg_h.png");
background-repeat: repeat-x;
text-align: right;
float: left;
z-index: 900;}
#contactrollover {
position: relative;
top: 0px;
margin: 0px 0px -36px 0px;
width: 100px;
left: 0px;
float: left;
z-index: 900;}
#contactrollover div {
width: 100px;
height: 50px;
float: left;}
#contactrollover a span {
display: none;
color: #a9a9a9;}
#contactrollover a {
display: block;}
#contactrollover a:hover span {
display: block;
position: absolute;
top: 0px;
left: -560px;}
.buttonspaces {
height: 36px;
list-style: none;
float: left;}
</style>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
</head>
<body onload="MM_preloadImages('images/menubg_b.png','images/th_att_b.png','images/th_bmw_b.png','images/th_directv_b.png','images/th_giostra_b.png')">
<div id="container">
<div id="topmenu">
<ul id="menulist">
<li class="menubuttonactive">portfolio</li>
<li class="buttonspaces"><img src="images/spacer.png" width="68" height="36" alt="spacer" /></li>
<li class="menubuttons">about</li>
<li class="buttonspaces"><img src="images/spacer.png" width="12" height="36" alt="spacer" /></li>
<li class="menubuttons">resume</li>
<li class="buttonspaces"><img src="images/spacer.png" width="180" height="36" alt="spacer" /></li>
<li id="contactrollover"><div class="menubuttons">contact<span id="addressbox"><p>917-650-9534, info#raphaelzwyer.com<br/ ></p>143 leonard street, apartment 5, brooklyn ny 11206</span></div></li>
</ul> <!-- end of menulist -->
</div> <!-- end of topmenu -->
</div> <!-- end of container -->
<script type="text/javascript" src="js/raphaelzwyer.js"></script>
</body>
</html>
No, there is no css only solution for delaying this. However you could get this to work, if your add the hover effect not on the a but on #contactrollover.
It doesn't work right now because there is a space between #contactrollover a and #adressbox.
So it should look like this.
#contactrollover:hover span {
display: block;
position: absolute;
top: 0px;
left: -560px;}
For this to work in internet explorer the :hover pseudoclass needs to be on a link. So you can ether change the div #contactrollover to a link or get rid of the space in some other way.
All you have to do is add some padding to the popup, so that there's no space there.
#contactrollover a:hover span {padding-right: 12px;}