Attempting an assignment, and managed the initial step, but when I go into the index.html on my browser I see weird characters in the box.
inspector view vs text editor view
Then I proceeded to link CSS into the .html file and it appeared exactly as it did in the inspector view image. (see below for css code and html code with link)
I tried editting the files, removing cache from my browser and saw a suggestion to check on inspector and remove the stylesheet. But no luck, I have no idea what to do at this point.
body,
html {
height: 100%;
width: 100%;
position: absolute;
padding: 0;
margin: 0;
overflow: hidden;
background-color: #0c93b0;
}
#profile_screen {
position: absolute;
height: 100%;
width: 100;
}
#information_holder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
background-color: #666666;
}
#my_name {
color: white;
font-family: helvetica;
text-align: center;
font-weight: normal;
}
#date_of_birth {
color: white;
text-align: center;
font-family: helvetica;
font-size: 16px;
font-weight: normal;
}
#current_age,
#current_weight {
color: white;
text-align: center;
font-family: helvetica;
font-size: 14px;
font-weight: normal;
}
#main_navigation_holder {
position: absolute;
top: 200px;
width: 100%;
min-height: 200px;
}
.main_button {
width: 50% height: 100% -webkit-appearance: none;
background-color: transparent;
outline: none;
border: none;
background-position: center center;
background-size: 85px;
background-repeat: no-repeat;
}
#settings_page_button {
position: absolute;
left: 0;
background-image: url(‘../images/currentmedications#2x.png’);
}
#health_history_button {
position: absolute;
right: 0;
background-image: url(‘../images/medicalhistory#2x.png’);
}
#add_item_screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
<!doctype>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./index_files/index.css">
</head>
<body>
<div id=“profile_screen” class=“screen”></div>
<div id=“information_holder”>
<h1 id=“my_name”> John Doe</h1>
<h2 id=“date_of_birth”>02/28/2015</h2>
<h3 id=“current_age”>01 yrs old </h3>
</div>
</div>
<div id=“add_item_screen” class=“screen”></div>
<div id=“list_of_history_screen” class=“screen”></div>
<div id=“settings_screen” class=“screen”></div>
<div id=“main_navigation_holder”>
<input type=“button” id=“settings_page_button” value="Settings" />
<input type=“button” id=“health_history_button” value="Health History" />
</div>
</body>
</html>
Use " instead of “ and
Put this code in the head and try again ?
<meta charset="UTF-8">
Your code should be like this
<div id="profile_screen" class="screen"></div>
<div id="information_holder">
<h1 id="my_name"> John Doe</h1>
<h2 id="date_of_birth">02/28/2015</h2>
<h3 id="current_age">01 yrs old </h3>
</div>
<div id="add_item_screen" class="screen"></div>
<div id="list_of_history_screen" class="screen"></div>
<div id="settings_screen" class="screen"></div>
<div id="main_navigation_holder">
<input type="button" id="settings_page_button" value="Settings" />
<input type="button" id="health_history_button" value="Health History" />
</div>
Just use normal quote characters " " instead of “ ” in your html file.
Check it out here
Related
I don't have that much experience in HTML/CSS. As it says in the title, I have a problem with the input (where it says "What do you think about ?"). I left click on input field so I can write something inside it but when I click the submit logo it is not clickable. And the other problem is with Create account. It is not recognized as a link. The other links work but this one doesn't. It is also not clickable. After I added more CSS code those problems appeared.
Can someone help me with this problem?
P.S : This is a project for a non-programmer friend.
* {
box-sizing: border-box;
}
body {
background: url(images/backgroundWallpaper.jpg) fixed no-repeat center center;
background-size: cover;
margin: 0;
}
#font-face {
font-family: "myFont";
src: url("fonts/coolvetica\ rg.ttf")
}
/* ************************************ HOME PAGE ************************************ */
.header {
background-color: rgb(19, 25, 33);
width: 100%;
height: 140px;
}
.searchbar {
position: relative;
margin-left: 265px;
bottom: 63px;
}
#input {
width: 750px;
height: 48px;
font-size: 17px;
}
#searchbarBtn {
position: relative;
height: 48px;
width: 48px;
font-size: 21px;
top: 2px;
}
#loginBtn {
position: relative;
padding-left: 1140px;
bottom: 95px;
color: white;
font-size: 17px;
}
.logoImg {
width: 240px;
padding-left: 15px;
padding-top: 15px;
}
.viewCart {
color: white;
font-size: 40px;
position: relative;
padding-left: 1370px;
bottom: 128px;
}
.cartBtn {
font-size: 17px;
position: relative;
left: 5px;
bottom: 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: blue;
}
nav {
display: inline;
position: relative;
bottom: 37px;
padding-left: 18px;
word-spacing: 15px;
}
.navBtn {
font-size: 17px;
}
header {
background: url(images/headerWallpaper.jpg) center center;
width: 100%;
height: 750px;
margin-top: -20px;
position: relative;
z-index: 1;
}
.main {
padding: 0px 130px;
}
footer {
background-color: rgb(19, 25, 33);
clear: both;
color: white;
text-align: center;
font-size: 17px;
height: 50px;
padding-top: 15px;
font-family: "myFont";
}
<!DOCTYPE html>
<html>
<head>
<title>Danube</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="header">
<img class="logoImg" src="images/logo.png">
<div class="searchbar">
<form>
<input id="input" type="text" placeholder="What do you think about ?" name="search">
<button id="searchbarBtn" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="loginBtn">Hello, Create account</div>
<div class="viewCart">
<i class="fa fa-shopping-cart"></i>
<a class="cartBtn" href="#">My Basket</a>
</div>
</section>
<nav>
<a class="navBtn" href="#">Home</a>
<a class="navBtn" href="#">Offers</a>
<a class="navBtn" href="#">Products</a>
<a class="navBtn" href="#">Showrooms</a>
<a class="navBtn" href="#">Contact</a>
</nav>
<div class="main">
<header>
</header>
</div>
<footer>
<div>S.C. DANUBE ROMANIA S.R.L. este inregistrata cu numarul 000 / 2022 in registrul de evidenta a prelucrarilor de date cu caracter personal</div>
</footer>
</body>
</html>
There's a lot of problems with the code. Try avoiding fixed values like px for things. Keep your website responsive - you can use flex or something for maintaining a responsive layout.
It is easier to see the problem when you inspect it using Firefox's(or any other browsers) inspecting tool.
You can fix the problems you stated by implementing suggestions told by us here but they may break something else since we don't know the whole code.
Firstly, you can see that the header element is above the search bar and hence the search bar is unfocusable. You can either change the z-index of the header element to -1 or something or you can set the search bar's z-index to a bigger value.
The Create Account link has the same problem as well. In this case,the element with the viewCart class is overlapping the link. What you need to do is in it's style change the padding-left property to margin-left and it will stop overlapping.
Again, try to keep things simple by using a more dynamic way so that elements are positioned and sized automatically instead of you having to specify the sizes yourself.
First of all, the button always have a default cursor, if you want to change the cursor to the pointer on hovering you must add this: button:hover {cursor: pointer}
Second of all, you're using positions wrongly and don't understand them. Read about positions here.
I deleted all of the position relatives and top & bottom.
* {
box-sizing: border-box;
}
body {
background: url(images/backgroundWallpaper.jpg) fixed no-repeat center center;
background-size: cover;
margin: 0;
}
#font-face {
font-family: "myFont";
src: url("fonts/coolvetica\ rg.ttf")
}
/* ************************************ HOME PAGE ************************************ */
.header {
background-color: rgb(19, 25, 33);
width: 100%;
height: 140px;
}
.searchbar {
margin-left: 265px;
}
#input {
width: 750px;
height: 48px;
font-size: 17px;
}
#searchbarBtn {
height: 48px;
width: 48px;
font-size: 21px;
}
/* EDITED HERE */
#searchbarBtn:hover {
cursor: pointer
}
#loginBtn {
padding-left: 1140px;
color: white;
font-size: 17px;
}
.logoImg {
width: 240px;
padding-left: 15px;
padding-top: 15px;
}
.viewCart {
color: white;
font-size: 40px;
position: relative;
padding-left: 1370px;
bottom: 128px;
}
.cartBtn {
font-size: 17px;
position: relative;
left: 5px;
bottom: 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: blue;
}
nav {
display: inline;
position: relative;
bottom: 37px;
padding-left: 18px;
word-spacing: 15px;
}
.navBtn {
font-size: 17px;
}
header {
background: url(images/headerWallpaper.jpg) center center;
width: 100%;
height: 750px;
margin-top: -20px;
position: relative;
z-index: 1;
}
.main {
padding: 0px 130px;
}
footer {
background-color: rgb(19, 25, 33);
clear: both;
color: white;
text-align: center;
font-size: 17px;
height: 50px;
padding-top: 15px;
font-family: "myFont";
}
<!DOCTYPE html>
<html>
<head>
<title>Danube</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="header">
<img class="logoImg" src="images/logo.png">
<div class="searchbar">
<form>
<input id="input" type="text" placeholder="What do you think about ?" name="search">
<button id="searchbarBtn" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<div id="loginBtn">Hello, Create account</div>
<div class="viewCart">
<i class="fa fa-shopping-cart"></i>
<a class="cartBtn" href="#">My Basket</a>
</div>
</section>
<nav>
<a class="navBtn" href="#">Home</a>
<a class="navBtn" href="#">Offers</a>
<a class="navBtn" href="#">Products</a>
<a class="navBtn" href="#">Showrooms</a>
<a class="navBtn" href="#">Contact</a>
</nav>
<div class="main">
<header>
</header>
</div>
<footer>
<div>S.C. DANUBE ROMANIA S.R.L. este inregistrata cu numarul 000 / 2022 in registrul de evidenta a prelucrarilor de date cu caracter personal</div>
</footer>
</body>
</html>
both are incorrectly positioned, they are pushing to the top and some element is overlapping over them.
I recreated your code by positioning them slightly lower using position: relative; top : 100px and then input box was accepting clicks and create link was working.
box-sizing: border-box;
}
body {
background: url(images/backgroundWallpaper.jpg) fixed no-repeat center center;
background-size: cover;
margin: 0;
}
#font-face {
font-family: "myFont";
src: url("fonts/coolvetica\ rg.ttf")
}
/* ************************************ HOME PAGE ************************************ */
.header {
background-color: rgb(19, 25, 33);
width: 100%;
height: 140px;
}
.searchbar {
position: relative;
margin-left: 265px;
bottom: 63px;
}
#input {
width: 750px;
height: 48px;
font-size: 17px;
position: relative;
top: 100px;
}
#searchbarBtn {
position: relative;
height: 48px;
width: 48px;
font-size: 21px;
top: 2px;
}
#loginBtn {
position: relative;
padding-left: 1140px;
color: white;
font-size: 17px;
}
.logoImg {
width: 240px;
padding-left: 15px;
padding-top: 15px;
}
.viewCart {
color: white;
font-size: 40px;
position: relative;
padding-left: 1370px;
bottom: 128px;
}
.cartBtn {
font-size: 17px;
position: relative;
left: 5px;
bottom: 5px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
color: blue;
}
nav {
display: inline;
position: relative;
bottom: 37px;
padding-left: 18px;
word-spacing: 15px;
}
.navBtn {
font-size: 17px;
}
header {
background: url(images/headerWallpaper.jpg) center center;
width: 100%;
height: 750px;
margin-top: -20px;
position: relative;
z-index: 1;
}
.main {
padding: 0px 130px;
}
footer {
background-color: rgb(19, 25, 33);
clear: both;
color: white;
text-align: center;
font-size: 17px;
height: 50px;
padding-top: 15px;
font-family: "myFont";
}```
Please check the changes in #loginBtn and #input
I am recreating website to practice my html and css skills.
I am doing mobile first, and when i set my device width/height on Iphone 6/7/8 ( 375x667 ) (and of course it may be the case for other widths ) body content spills to the right of viewport border.
I know this may be too much code but i am really stuck on this and i don't really know what is causing this problem.
I am previewing it in Opera Developer Tools.
Thanks in advance .
CSS:
body {
background-color: #fff;
font-family: sans-serif;
overflow: auto;
}
/* NAVIGATION HEADER */
header {
display: flex;
height: 80px;
max-width: 100%;
}
.logo {
flex-basis: 27%;
padding: 14px 5px;
}
.menu {
list-style-type: none;
flex-basis: 70%;
}
.menu li {
display: inline-block;
padding: 20px 3px;
}
.menu a {
text-decoration: none;
color: #595959;
font-size: 20px;
}
/* HERO */
.hero {
position: relative;
text-align: center;
}
h1 {
font-size: 39px;
font-weight: 800;
text-align: center;
line-height: 1;
margin-top: 55px;
}
.hero h3 {
text-align: center;
font-size: 19px;
font-weight: normal;
color: #595959;
word-wrap: normal;
margin: 20px 20px;
}
.button {
/* position: absolute; */
display: inline-block;
background-color: #e54545;
padding: 8px 26px;
padding-top: 13px;
border-radius: 60px;
color: white;
line-height: 1.5;
font-size: 18px;
text-align: center;
font-weight: 400;
}
/*
.seework {
top: 230px;
left: 30%;
}
*/
.bckgrnd {
position: relative;
display: inline-block;
background-image: url("pozadina.png");
background-size: cover;
background-position: center;
width: 100%;
height: 250px;
top: -50px;
z-index: -1;
margin: 0;
}
.strelica {
display: inline-block;
position: relative;
font-size: 30px;
font-weight: bold;
color: #595959;
z-index: 2;
text-align: center;
top: 80%;
border: 2px solid #595959;
box-sizing: border-box;
padding: 1px 12px 6px;
border-radius: 50%;
}
/* SIVI SKROL*/
.skrol {
position: relative;
left: 0;
background-color: #595959;
padding: 20px;
margin: 0;
min-width: 100%;
}
#media(min-width: 750px) {
.logomob {
display: none;
}
}
#media(max-width: 750px) {
.logodesk {
display: none;
}
}
HTML:
<!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>nLight - User Experiance & User Interface Design Studio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">
<img src="logomob.png" alt="nLight logo" class="logomob hidedesk">
<img src="logodesk.png" alt="nLight logo" class="logodesk hidemob">
</div>
<nav>
<ul class="menu">
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="hero">
<h1>Independent Interface design studio.</h1>
<h3>We are located in sunny Novi Sad, Europe, and work with people worldwide</h3>
<div class="button seework">See Work</div>
<div class="bckgrnd"> <div class="strelica"> ↓ </div> </div>
</section>
<section class="skrol">
<div class="skrolhed">
<h2> Simple solutions to complex problems. </h2>
<p> User Experience / Interface Design & Front-end Development.
One man studio. 10+ years of experience.
</p>
</div>
<div class="skrolbox1">
<em>DESIGN</em>
<h3>We do Interface design and we are serious about it.</h3>
<p>Web applications, SAAS, marketing web sites. From discovery, prototyping, and design, through iterations to final product.</p>
</div>
<div class="skrolbox2">
<em>DEVELOPMENT</em>
<h3>Front-end Development</h3>
<p>Creating front end strategy that scales. Including living style guide, documentation and methodology to on-board new developers.</p>
</div>
<div class="button about">About Us</div>
</section>
<footer>
<img src="logofut.png" alt="nLight logo" class="logofut">
<p>© 2019 nLight. Hand Made in Europe.</p>
</footer>
</body>
</html>
Not sure if this is the fix you are looking for, but replacing min-width: 100% by max-width: 100% for skrol seems to do it.
.skrol {
position: relative;
left: 0;
background-color: #595959;
padding: 20px;
margin: 0;
max-width: 100%; /*instead of min-width*/
}
So I've been testing how my website looks with different screen sizes and I noticed my footer is positioned correctly at the bottom right of the screen for resolutions 800x600 to 1920x1080 BUT on 2560x1600 it does NOT position at the bottom right
/w h y/ ?
Im using CrossBrowserTesting
Here's my code:
body {
font-family: 'Courier New', Courier, monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
html, body, #wrapper {
max-width: 100%;
min-height: 100%;
min-width: 960px;
margin: 0 auto;
}
#wrapper {
position: relative;
}
#content {
height: 1200px;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
#verr {
}
.boi:active,
.iob:active {
top: 2px;
}
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
right: 10px;
}
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
padding-left: 93%;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<div id="manyarms">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~" style="width:310px; height:250px;">
<p style="color: #6458b7;" id="verr">Here comes a very special boi!</p>
</div>
<div id="sensible">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" style="width:310px; height:250px;">
<p style="color:#6458b7;">He loves to pose for photos!</p>
</div>
</div>
<div id="footer">
© Hecc
</div>
</div>
</body>
</html>
Is this an error in my code or this a bug in CrossBrowserTesting?
Any assistance is greatly appreciated!
If you replace your :
#footer {
padding-left: 93%;
}
with
#footer {
float: right;
margin-right: 10px;
}
You will fix your div on the right and that regardless if the screen is large, medium or small.
your #wrapper streches and its css is - max-width: 100%;and your #footer is inside the #wrapper
soo maybe your content doesnt stretch the wrapper to full width and thats why the #footer isnt in the far right of screen(because its in far right of #wrapper)try to take #footer out of #wrapper OR make #wrapper width:100% and body and html width:100%
I am by no means a web developer, I am more on the infrastructure side of things. Anyway, I built a FreeBSD server with an AMP stack on an XServe G4 and wanted to spruce up the generic landing page that only printed "It Works!" on a plain white screen to something a bit more interesting when I ran into a an issue with CSS.
Here's the page - it works exactly the way it's supposed to on Chrome, Opera, Safari on both Mac and Win10 (I didn't check Safari on Win10)
On Microsoft Edge, I get this:
What do I need to do in my CSS so that I can correctly position that element?
The code for the page is below
<html>
<head>
<style>
body {
background-image: url("splash.png");
background-repeat: no-repeat;
background-position: center;
background-color: #BEBEBE;
font-family: "Arial", "Verdana", "serif";
justify-content: center;
}
#container { display: block; position: relative;
width: 60%;
top: 60%;
font-weight: bold;
margin: auto;
}
#pretext { display: inline-block; color: #b80000; font-size: 3em;
}
#posttext { display: inline-block;
color: #FFFFFF; font-size: 3.5em;
font-weight: 1500; }
#logo {
height: 50px;
position: absolute;
bottom: 1%;
right: 1%;
padding-bottom: 5px;
}
#logo img { height: inherit; vertical-align: top; }
#svr-info { font-size: .75em;
color: #dae6f7;
width: auto;
position: absolute;
bottom: 0px;
right: 10px;
padding-top: 5px;
}
#phpinfo a { font-size: .75em;
text-decoration: none;
}
a:hover { font-size: 1.3em; }
</style>
</head>
<body>
<div id="container">
<div id="pretext">Think</div>
<div id="posttext">Correctly.</div>
</div>
<div id="logo">
<img src="powerpc-logo.png" />
<img src="apple-logo.png" />
</div> <br>
<div id="svr-info">
<?php
echo $_SERVER['SERVER_SOFTWARE'];
echo "---";
echo php_uname('r');
echo " ";
echo php_uname('m');
?>
</div>
<div id="phpinfo">
PHPINFO Page
</div>
</body>
</html>`
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
body {
margin: 0px;
padding: 0px;
}
.container {
height: 100vh;
}
.text1 {
display: inline-block;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container" >
<div style="display: table; margin: 0 auto; text-align: center; position: relative; top: 30%;">
<img src="logo.png" style="width: 100px; height: 100px;"/>
<br/>
<h1 class="text1">Think Correctly</h1>
</div>
<div style="position: absolute; bottom: 10px; right: 10px;">
<img src="logo2.png"/><span>Logo 2</span>
</div>
</div>
</body>
</html>
try to make it using this code
you can read this about using tables vs using divs with display table
divs vs tables
I cant get my text to align right:
#login_status
{
font-size: 1.2em;
text-align: right;
display: block;
float:right;
}
Here is the other pertinent css:
#logo
{
position: absolute;
top: 15%;
margin-left: 1em;
}
#login_status
{
font-size: 1.2em;
text-align: right;
display: block;
float:right;
}
#header_container
{
background: #7fc041;
height: 7.4em;
left: 0;
right: 0;
position: fixed;
width: 100%;
top: 0;
}
#header_text
{
margin-left: 9.75em;
font-size: 2em;
color: White;
font-style: italic;
}
and the html/server controls:
<div id="header_container">
<div id="header">
<div id="headerBar">
<img src="images/logo.png" id="logo"/>
<span id="header_text">Scrum Reports</span>
<asp:LoginStatus ID="LoginStatus1" runat="server" CssClass="login_status" />
</div>
</div>
</div>
Well I'm no asp.net expert, but I see you using #login_status with text-align: right and CssClass="login_status", which seems to me like it would output
<div class="login_status">
Thus you should either change #login_status to .login_status, or have it set the id rather than the class because the styles seem to be fine.
http://jsfiddle.net/ExplosionPIlls/mzUTW/