I have a paragraph that appears really far left in I.E but its fine in firefox and chrome, I have been trying to fix this for a while now but i cant seem to get it to display correctly in all browsers
Codepen : https://codepen.io/mikegr/pen/ggXdVG
HTML
<p class = "info">Welcome to the programming part of my portfolio,<br>
here you can find a link to my github profile all of my programming work is.<br>
There is also a link to a bonus Snake game I created using JavaScript.<br>
the languages I am experienced in include html,css,javascript,php,mysql,java,python and c++</p>
CSS
.info{
clear:both;
position: fixed;
display:block;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
top: 70%;
transform: translateY(-50%);
text-align: center;
color: black;
font-family: 'Comfortaa', cursive;
padding: 10px;
font-style: italic;
font-weight: 700;
font-size: 16px;
text-align: center;
background-color: rgba(255,255,255, 1);
width: fit-content;
height: fit-content;
border: 2px solid black;
border-radius: 50px;
width: -moz-max-content;
width: -webkit-max-content;
display: table;
}
Looks like it's mainly because fit-content isn't supported in IE. http://caniuse.com/#feat=intrinsic-width.
.info {
clear: both;
position: fixed;
top: 0;
left: 50%;
margin: auto;
top: 70%;
transform: translate(-50%, -50%);
text-align: center;
color: black;
font-family: 'Comfortaa', cursive;
padding: 10px;
font-style: italic;
font-weight: 700;
font-size: 16px;
text-align: center;
background-color: rgba(255, 255, 255, 1);
border: 2px solid black;
border-radius: 50px;
}
<p class = "info">Welcome to the programming part of my portfolio,<br>
here you can find a link to my github profile all of my programming work is.<br>
There is also a link to a bonus Snake game I created using JavaScript.<br>
the languages I am experienced in include html,css,javascript,php,mysql,java,python and c++</p>
You should probably include a browser style reset CSS in your header before your main CSS script. These types of scripts reset browser CSS styles to be uniform among different ones.
I can recommend
Normalize.css but there are many out there!
Try the code given below. just copy and paste it as it is. I hope it will work fine.
<html>
<head>
<style>
.info{
position: relative;
display:block;
top: 500px;
margin: auto;
transform: translateY(-50%);
text-align: center;
color: black;
font-family: 'Comfortaa', cursive;
padding: 10px;
font-style: italic;
font-weight: 700;
font-size: 16px;
background-color: rgba(255,255,255, 1);
width: 50%;
width: fit-content;
height: fit-content;
border: 2px solid black;
border-radius: 50px;
width: -moz-max-content;
width: -webkit-max-content;
}
</style>
</head>
<body>
<p class = "info">Welcome to the programming part of my portfolio,<br>
here you can find a link to my github profile all of my programming work is.<br>
There is also a link to a bonus Snake game I created using JavaScript.<br>
the languages I am experienced in include html,css,javascript,php,mysql,java,python and c++
</p>
</body>
</html>
Related
I am fairly new to coding and had to make a html website for uni, this ive tried position: absolute etc but still messed up any help please. sorry if ive done this question wrong or uploaded too much im new to this. Basically i want things exactly where i placed them but to resize on different devices and resolutions etc.
html { webkit-background-size: cover;
moz-background-size: cover;
o-background-size: cover;
background-size: cover;
}
/*this is the main title*/
h2 {
color: White;
font-family: optima;
font-size: 100px;
}
Ive tried commenting the code to help understand whats what.
/*this is for the logo*/
h3 {
text-align: center;
max-width: 100%;
}
/*this is the sub title*/
h4 {
color: White;
font-family: optima;
font-size: 20px;
border-width: 5px;
}
/*centering text for all pages titles other than contact us*/
.text-center {
margin: 0;
padding:0;
text-align: center;
position: absolute;
top: 50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
}
/*centering text for contact us*/
.text-center2 {
margin: 0;
padding:0;
text-align: center;
position: absolute;
top: 30%;
left:50%;
transform: translateX(-50%) translateY(-50%);
}
/*icons to take you to other pages*/
.material-icons {
color: white;
font-size: 48px;
}
/* When moving the mouse over the button, adds tomato color */
.material-icons:hover {
color: tomato;
}
/*left text box title*/
.head-text h1 {
font-family: 'Roboto', sans-serif;
font-style: normal;
font-size: 25px;
margin: 0;
padding:0;
text-align: center;
position: absolute;
top: 10%;
left:7%;
transform: translateX(-10%) translateY(-10%);
color: White;
}
/*right text box title*/
.head-text h5 {
font-family: 'Roboto', sans-serif;
font-style: normal;
font-size: 25px;
margin: 0;
padding:0;
text-align: center;
position: absolute;
top: 12%;
left:70%;
transform: translateX(-10%) translateY(-10%);
color: White;
}
/*left text box on pages*/
.Body-Text p {
font-family: 'Roboto', sans-serif;
font-style: normal;
font-size: 20px;
top: 15%;
left: 1%;
width: 30%;
position: absolute;
z-index: 1;
visibility: show;
color: white;
border: 2px solid white;
background-color: grey;
}
You can use media queries to set different style rules for different resolutions.
Give this a read, hopefully it should help you understand how to implement them.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
To make an HTML page responsive(responsive means it works pretty fine and cool on all devices of all sizes). It is not possible by absolute positioning. 1) You have to use media queries [e.g. # media all width or e.g #import url("googleimage123.com")]
2) The language Bootstrap is used for this. Its just like HTml and css. With Bootstrap you can Build fast, responsive sites. Quickly design and customize responsive mobile-first sites.
Here are some links to learn these:
To learn Bootstrap: https://www.w3schools.com/bootstrap/
To learn to use Media Queries in Css: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
To learn any computer/ programming language, or to get help regarding any issue related to them, I would prefer you to go along with w3schools.com
Good luck and have fun through your coding journey!
I used figma to build a design and exported css code below. I added some div classes but it still doesn't fit properly.
I tried making the classes a subclass of the main class but it still didn't work.
I assumed this might work the way columns and rows do, the rows comes first then the columns follow.
.pagingg {
position: absolute;
width: 338px;
height: 61px;
left: 88px;
top: 97px;
background: #FBF6F6;
border: 1px solid #F8EBEB;
box-sizing: border-box;
border-radius: 2px;
}
.pagingg.firstpg {
position: absolute;
width: 88px;
height: 19px;
left: 104px;
top: 106px;
background: #FFFFFF;
border: 1px solid #E6C3C3;
border-radius: 2px;
}
.pagingg.pgnum {
position: absolute;
width: 58px;
height: 14px;
left: 223px;
top: 110px;
font-family: Open Sans;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 14px;
/* identical to box height */
color: #000000;
}
.pagingg.lastpg {
position: absolute;
width: 89px;
height: 16px;
left: 214px;
top: 133px;
background: #FFFFFF;
border: 1px solid #E6C3C3;
border-radius: 1px;
}
.nextpg {
position: absolute;
width: 88px;
height: 19px;
left: 319px;
top: 106px;
background: #FFFFFF;
border: 1px solid #E6C3C3;
border-radius: 2px;
}
.pagingg.fpg {
position: absolute;
width: 22px;
height: 15px;
left: 138px;
top: 106px;
font-family: Open Sans;
font-style: normal;
font-weight: 300;
font-size: 11px;
line-height: 15px;
/* identical to box height */
color: #000000;
}
.pagingg.pgnumtext {
position: absolute;
width: 58px;
height: 14px;
left: 223px;
top: 110px;
font-family: Open Sans;
font-style: normal;
font-weight: normal;
font-size: 10px;
line-height: 14px;
/* identical to box height */
color: #000000;
}
.pagingg.lastpgtext {
position: absolute;
width: 21px;
height: 15px;
left: 247px;
top: 133px;
font-family: Open Sans;
font-style: normal;
font-weight: 300;
font-size: 11px;
line-height: 15px;
/* identical to box height */
color: #000000;
}
.pagingg.nextpgtext {
position: absolute;
width: 26px;
height: 15px;
left: 350px;
top: 107px;
font-family: Open Sans;
font-style: normal;
font-weight: 300;
font-size: 11px;
line-height: 15px;
/* identical to box height */
letter-spacing: 0.075em;
color: #000000;
}
<div class="pagingg">
<div class="pagingg firstpg">
First
</div>
<div class="pgnum">
<div class="pgnumtext">2 0f 5</div>
</div>
<div class="lastpg">
<div class="lastpgtext">Last</div>
</div>
<div class="nextpg">
<div class="nextpgtext">Next</div>
</div>
</div>
Do not use position:absolute on every element. Use it only when absolutely necessary. You can read about it here -> CSS Position
For this requirement you can just use flexBox which is the recommended solution for layout purposes.
Read more about flexbox -> a-guide-to-flexbox or here -> MDN Flexbox
See below:
.pagingg {
display:flex;
flex-wrap:wrap;
width: 300px;
justify-content: space-between;
align-items: center;
}
.lastpg {
width: 100%;
text-align: center;
}
.text {
border: 1px solid black;
background-color: grey;
display:inline-block;
padding: 5px 20px;
}
<div class="pagingg">
<div class=" firstpg">
<div class="firstpgtext text">
First
</div>
</div>
<div class="pgnum">
<div class="pgnumtext ">2 0f 5</div>
</div>
<div class="nextpg">
<div class="nextpgtext text">Next</div>
</div>
<div class="lastpg">
<div class="lastpgtext text">Last</div>
</div>
</div>
Figma will generate you only general styles, like font-size, font-weight, color, background, letter-spacing etc.
For position, display, width, height, padding and other specific style you will need to write code.
Everyone is correct. You don't want to use Figma's absolute positioning in your HTML/CSS.
Instead you need to start by understanding the structure you need and figure out the nesting and positioning. You can position elements in HTML/CSS using grids, which are more modern and work better than previous approaches like tables, floats, etc.
A great tool that will help you get started quicker, is Desech Studio which imports your Figma file and positions elements relatively using grids, automatically. You still have to do some adjustments here and there, but it's a better starting point than absolute zero.
I'm relatively new to creating websites and I had an HTML/CSS questions I hope someone could help me with!
I noticed that in Safari and Google Chrome, my grey box is not where it is supposed to be (I assume because I made the .veryouter a fixed px, but when I tried to use percentages and resized the page and changed the page sizing, my text box started to move off the page! I'm trying to have everything stay in place when resizing the window, so I'm unsure if changing it to percentage is the answer or not..) I have attached pictures to show the difference, Chrome is it vertically centered while on Safari it isnt). //The code snippet looks odd, sorry about that!
Thank you for any help :) I appreciate it]1
html{
height: 97%;
}
body{
background-image: url("Metakingpic.png");
background-size: 1300px;
min-width: 1080px;
height: 100%;
}
.veryouter{
height: 589px;
}
#outer{
height: 100%;
width: 550px;
display: flex;
justify-content: center;
align-items: center;
}
#inner{
position: relative;
background-color: #696969;
opacity: .5;
height: 540px;
width: 370px;
}
h1{
margin-top: 40px;
margin-bottom: 0;
}
p{
margin-top: 40px;
margin-right: 10px;
}
.words{
font-family: 'Londrina Outline', cursive;
color: #ffffff;
font-size: 55px;
line-height: 50px;
letter-spacing: 5px;
padding-left: 23px;
}
.font2{
font-family: 'Slabo 27px', serif;
color: #ffffff;
font-size: 23px;
line-height: 32px;
letter-spacing: 2px;
margin-left: 20px;
}
.image{
height: 114px;
width: 174px;
position: absolute;
bottom: 0;
right: 0;
z-index: 100;
font-size: 25px;
}
.arrow{
position: absolute;
bottom: 0;
right: 0;
padding-right: 15px;
padding-bottom: 15px;
z-index: -1;
}
.n{
padding-top: 25px;
font-weight: bold;
color: white;
width: 125px;
text-align: center;
font-size: 30px;
font-family: 'Londrina Outline', cursive;
position: relative;
letter-spacing: 5px;
}
a{
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link href = "intro.css" type = "text/css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/css?family=Londrina+Outline" rel="stylesheet">
</head>
<body>
<div class = "veryouter">
<div id = "outer">
<div id = "inner">
<div class = "words">
<h1>My <br></br>PHOTO<br></br>BOOK</h1>
</div>
<div class = "font2">
<p> Press "NEXT" to continue! </p>
</div>
</div>
</div>
</div>
<div class = "image">
<a href = "https://www.facebook.com/" >
<div class = "n">NEXT</div>
</a>
<img class = "arrow" src = "Arrow.png" atl = "Arrow"/>
</div>
</body>
</html>
This is most likely because those two browsers have different default css rules, I would recommend using a css reset, either use https://meyerweb.com/eric/tools/css/reset/ or https://github.com/necolas/normalize.css/
If you're not familiar with these reset css - they basically normalize the default browser styles. I personally prefer using normalize.css on all my projects.
To align the container center need to add the following style :
#outer{
height: 100%;
width: 550px;
display: flex;
justify-content: center;
margin-top: 20px;
display: -webkit-box;
-webkit-box-pack: center; /* justify-content */
-webkit-box-align: center; /* align-items */
}
#inner{
position: relative;
background-color: #696969;
opacity: .5;
height: 100%;
width: 370px;
}
Hope the changes will help.Try this code and let me know if any concern.
I'd like to make a message-alert box in my web app. I created the main style but I have problems on small screen sizes.
Here's the image for the regular 1366x768 computer screen:
And here is for a typical mobile device:
Problems:
The X button has tagled with the message.
The main message wrapper has fixed and wasn't expand when the message came out of the wrapper.
How to fix the two above problems? Do I have to follow another path? I use position: fixed; property-value to keep my message on top.
Here are my HTMl and CSS code:
HTML:
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style=" cursor: pointer;">✕</div>
</div>
CSS:
.top-msg {
width: 100%;
height: 55px;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: right;
padding-top: 17px;
padding-right: 30px;
//border: 1px solid white;
//height: 100%;
width: 3%;
}
.top-msg-inner {
top: 15px;
position: absolute;
display: inline-block;
padding-left: 10px;
width: 80%;
//border: 1px solid white;
}
.top-msg-ico {
min-width: 65px;
height: 100%;
background-color: #fff;
display: inline-block;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
FIDDLE:
https://jsfiddle.net/4oLvyajo/
UPDATE -SOLUTION!-
After some help from LGSon answer I manage to finish all the design, so I accepts his answer but the hole solution is in the fiddle below.
FIDDLE:
https://jsfiddle.net/4oLvyajo/4/
Images:
Here is a start for you
.top-msg {
width: 100%;
position: fixed;
background-color: rgba(42,45,50,0.6);
color: rgba(250,251,255,0.95);
font-family: "Lato", sans-serif;
font-size: 18px;
}
.top-msg-close {
float: left;
box-sizing: border-box;
padding-top: 17px;
padding-right: 30px;
width: 45px;
}
.top-msg-inner a {
text-decoration: none;
color: RGBA(0, 0, 0, 0.6);
font-weight: bold;
}
.top-msg-inner a:hover {
color: RGBA(0, 0, 0, 0.5);
}
.top-msg-inner {
float: left;
box-sizing: border-box;
padding: 0 10px;
width: calc(100% - 110px);
}
.top-msg-ico {
float: left;
width: 65px;
height: 57px;
background-color: #fff;
background-color: rgba(0,0,0,0.7);
text-align: center;
font-size: 45px;
}
<div class="top-msg">
<div class="top-msg-ico">
!
</div>
<div class="top-msg-inner">
<p>Only letters and nubers are allowed for email. See security for more info.</p>
</div>
<div class="top-msg-close" style="cursor: pointer;">✕</div>
</div>
replace the width: 80% with margin-right: 40px, and you'll have to play around with the top: 15px as well (at -11 I had it looking right, but you can play around with that)
Here is the updated Fiddle
If you want everything scalable you'll need a completely different approach. First of all, if you place a right floating element under a block element it will float right, but underneath it. You'll need to define the floating close button element first.
Anyway, here's the updated Fiddle
It needs some minor tweaks in the padding and margins, but I think this is very close to what you're looking for
I am trying to vertically center a border around the 'about' div class containing the 3 paragraphs. The border is too high, I want to move it down to vertically center it. I can adjust the height but I can't move the border down at all.
<div class='about'>
<p>
JavaScript (/ˈdʒɑːvəˌskrɪpt/[5]) is a high-level, dynamic, untyped, and interpreted programming language.
</p>
<br>
<p>
Despite some naming, syntactic, and standard library similarities, JavaScript and Java are otherwise unrelated and have very different semantics.
</p>
<br>
<p>
JavaScript is also used in environments that are not web-based, such as PDF documents, site-specific browsers, and desktop widgets.
</p>
<br>
</div>
Here is the CSS
.about {
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
border-right: 1px solid white;
border-left: 1px solid white;
padding-right: 15px;
padding-left: 15px;
height: 200px;
}
It is difficult to visualize what I need without looking at the complete code on jsfiddle: https://jsfiddle.net/njh5scyd/
Please help! Been trying to figure this out...
Thank you
You should do this with :after and :before pseudo-elements:
/*main.css*/
html, body, h1, h2, h3, h4, div, p, ul, ol, li {
padding: 0;
border: 0;
margin: 0;
font: inherit;
font-size: 100%;
font-family: 'Helvetica Neue', 'Helvetica', 'sans-serif';
color: white;
background-color: black;
}
h1 {
font-size: 70px;
font-weight: bold;
text-align: center;
}
h2 {
font-size: 22px;
font-weight: 200;
text-align: center;
border-bottom: 1px solid white;
padding-bottom: 10px;
}
h2 strong {
font-weight: 500;
}
.tagline {
padding: 15px 0 25px 0;
width: 700px;
margin: 0 auto;
}
.links ul li {
display: inline;
padding: 20px;
font-weight: bold;
}
.links {
text-align: center;
}
.links a {
text-decoration: none;
color: white;
text-decoration: underline;
}
.about {
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
padding-right: 15px;
padding-left: 15px;
position: relative;
}
.about:before {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 50%;
border-left: 1px solid white;
content: '';
}
.about:before {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 50%;
border-right: 1px solid white;
content: '';
}
<body>
<div class='header'>
<h1>Daffy Duck</h1>
</div>
<div class='tagline'>
<h2>fdsfsdfsdfsdfds <strong>fewfwefwef</strong> fdsfdsfsdf <strong>sdfdfsf</strong></h2>
</div>
<div class='links'>
<ul>
<li><a href='file:///Users/Frank/Desktop/moee.html' target='_self'>Home</a></li>
<li><a href='file:///Users/Frank/Desktop/javascrip.html' target='_self'>Portfolio</a></li>
<li>Resume</li>
<li><a href='file:///Users/Frank/Desktop/game.html' target='_self'>About</a></li>
<li>Why Me</li>
</ul>
</div>
<div class='about'>
<p>
JavaScript (/ˈdʒɑːvəˌskrɪpt/[5]) is a high-level, dynamic, untyped, and interpreted programming language.[6] It has been standardized in the ECMAScript language specification.[7] Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web content production; the majority of websites employ it and it is supported by all modern web browsers without plug-ins.
</p>
<br>
<p>
Despite some naming, syntactic, and standard library similarities, JavaScript and Java are otherwise unrelated and have very different semantics. The syntax of JavaScript is actually derived from C, while the semantics and design are influenced by the Self and Scheme programming languages.
</p>
<br>
<p>
JavaScript is also used in environments that are not web-based, such as PDF documents, site-specific browsers, and desktop widgets. Newer and faster JavaScript virtual machines (VMs) and platforms built upon them have also increased the popularity of JavaScript for server-side web applications.
</p>
<br>
</div>
</body>
You have a fixed height of 200px on your .about element. Unless you have a definite purpose for it, you should remove it. If you do that your .about element will extend naturally and wrap around the content inside it properly.
That will naturally affect your border, which is directly tied to your .about element. The height of your .about has a direct relationship with your border, which surrounds the .about element. Smaller height than the content? Smaller height of the border as well.
Let me know if you have any questions or need anything further from this point on.
html {
background-color: black; /* added for testing purposes only */
}
.about {
color: white; /* added for testing purposes only */
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
border-right: 1px solid white;
border-left: 1px solid white;
padding-right: 15px;
padding-left: 15px;
}
<div class='about'>
<p>
JavaScript (/ˈdʒɑːvəˌskrɪpt/[5]) is a high-level, dynamic, untyped, and interpreted programming language.
</p>
<br>
<p>
Despite some naming, syntactic, and standard library similarities, JavaScript and Java are otherwise unrelated and have very different semantics.
</p>
<br>
<p>
JavaScript is also used in environments that are not web-based, such as PDF documents, site-specific browsers, and desktop widgets.
</p>
<br>
</div>
you can just draw the borders on <p> and drop these <br> : https://jsfiddle.net/njh5scyd/3/
.about {
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
}
.about p {
border-right: 1px solid white;
border-left: 1px solid white;
padding: 15px;
margin:0;
}
background-image/background-size can help to tune this as well : https://jsfiddle.net/njh5scyd/4/
.about {
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
padding-right: 15px;
padding-left: 15px;
background:
linear-gradient(to bottom, white, white) center right no-repeat,
linear-gradient(to bottom, white,white) center left no-repeat;
background-size: 1px 60% ;
}
It's simple. just change .about's style like below:
.about {
width: 500px;
text-align: center;
margin: auto;
padding-top: 50px;
/*border-right: 1px solid white;
border-left: 1px solid white;*/
padding-right: 15px;
padding-left: 15px;
/*height: 200px;*/
position:relative;
}
Then put new styles below.
.about::before,.about::after{
content:" ";
width:1px;
height:200px;
top:calc(50% - 100px);
left:0;
position:absolute;
background:#FFFFFF;
}
.about::after{
right:0;
left:initial;
}
Check my live demo on jsfiddle