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
Related
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*/
}
I have a project for a photography site. I am fairly new so still struggling with some of the basics. My project will have a header, a main div where the photos will be displayed and a footer. I want my main div to fill as much space as possible with the footer right at the bottom (as you'd expect). But this is what I am getting:
I have provisionally set the background-color of the header and footer to yellow, the color of the main div to red and the body is set to green. This is to better solve the issue. What I want is no green and the footer to be right at the bottom, with the rest being red, no matter the size of the window.
Here is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="JavaScript2b.js"></script>
<script type="text/javascript" src="JavaScript2.js"></script>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
</head>
<body>
<div id="header">
</div>
<div id="wrap">
<div id="container">
<div id="controllers">
<div id="previous" class="buttons">
<p id="try" onclick="change(-1);">PREVIOUS</p>
</div>
<div id="next" class="buttons">
<p id="try2" onclick="change(1);">NEXT</p>
</div>
</div>
<div id="imagewrap">
<img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
</div>
<div>
<p id="tag">Text</p>
</div>
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>
</html>
css
#font-face {font-family: Eagle-Light;
src: url("Eagle-Light.otf") format("opentype");
}
#font-face {font-family: Raleway Light;
src: url("Raleway Light.otf") format("opentype");
}
body {
/* height: 100%;*/
background-color: green;
}
#header {
height: 100px;
width: 100%;
background-color: yellow;
}
#footer {
height: 100px;
width: 100%;
background-color: yellow;
}
p {
color: #818181;
font-family: Eagle-Light;
line-height: 1.7em;
padding: 0px;
margin: 0px;
font-size: 0.5em;
letter-spacing: 0.21em;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
text-decoration: none;
color: inherit;
}
div {
margin: 0px;
padding: 0px;
}
#wrap {
clear: both;
padding: 0px;
width: 100%;
background-color: red;
}
body {
margin: 0px;
padding: 0px;
}
#container {
min-width: auto;
position: relative;
/* height: 77%;*/
width: 550px;
margin: 0 auto;
/* margin-top:7%;*/
}
#controllers {
position: static;
height: 20px;
}
#previous {
position: absolute;
left: 0px;
}
#next {
position: absolute;
right: 0px;
}
#tag {
position: static;
height: 20px;
line-height: 1.7em;
padding-top: 5px;
}
.buttons {
cursor: pointer;
}
#imagewrap{
border: 1px solid #818181;
overflow: hidden;
z-index: 2;
background-color: red;
}
#front {
display: block;
}
Thank you,
David
The problem is that your main div takes up very little space and therefore the body extends to cover the screen. In this case you could fix the footer always in the lowest position
#font-face {font-family: Eagle-Light;
src: url("Eagle-Light.otf") format("opentype");
}
#font-face {font-family: Raleway Light;
src: url("Raleway Light.otf") format("opentype");
}
body {
/* height: 100%;*/
background-color: green;
}
#header {
height: 100px;
width: 100%;
background-color: yellow;
}
#footer {
position: absolute;
height: 100px;
width: 100%;
background-color: yellow;
display: block;
bottom: 0;
}
p {
color: #818181;
font-family: Eagle-Light;
line-height: 1.7em;
padding: 0px;
margin: 0px;
font-size: 0.5em;
letter-spacing: 0.21em;
}
a:link {
text-decoration: none;
color: inherit;
}
a:visited {
text-decoration: none;
color: inherit;
}
div {
margin: 0px;
padding: 0px;
}
#wrap {
clear: both;
padding: 0px;
width: 100%;
background-color: red;
}
body {
margin: 0px;
padding: 0px;
}
#container {
min-width: auto;
position: relative;
/* height: 77%;*/
width: 550px;
margin: 0 auto;
/* margin-top:7%;*/
}
#controllers {
position: static;
height: 20px;
}
#previous {
position: absolute;
left: 0px;
}
#next {
position: absolute;
right: 0px;
}
#tag {
position: static;
height: 20px;
line-height: 1.7em;
padding-top: 5px;
}
.buttons {
cursor: pointer;
}
#imagewrap{
border: 1px solid #818181;
overflow: hidden;
z-index: 2;
background-color: red;
}
#front {
display: block;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<div id="header">
</div>
<div id="wrap">
<div id="container">
<div id="controllers">
<div id="previous" class="buttons">
<p id="try" onclick="change(-1);">PREVIOUS</p>
</div>
<div id="next" class="buttons">
<p id="try2" onclick="change(1);">NEXT</p>
</div>
</div>
<div id="imagewrap">
<img src="Images/01PARANA/Image1.jpg" height="100%" id="front" />
</div>
<div>
<p id="tag">Text</p>
</div>
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>
</html>
#wrap {
min-height: calc(100vh-200px);
}
This will set the wrap to be the screen height minus the height of the header and footer.
The 200px value can just be changed to be the combined height of the header and footer.
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%
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
I'm just getting started on HTML5 and CSS3 (working through The Odin Project) and the first project is to duplicate the Google homepage. I was able to get everything set up, but it seems like my CSS is somehow preventing my header links from acting like links. You can't click on them and the hover effects don't work.
They work fine on my footer and my nav text-decoration is applied, so I'm not sure what's making it act like it's not a link. I've only tested it in Chrome, so I'm not even worried about compatability issues yet. Am I doing the HTML5 wrong? Or is it some kind of weird rule like you can't use hover effects with inline-block or something? I'm not familiar enough with it yet to have learned all those nuances yet...
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li>+Mara</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="images/options.png" width="35px"></li>
<li><img src="images/bell.png" width="35px"></li>
<li><img src="images/plus.png" width="35px"></li>
<li><img src="images/photo.jpg" width="40px" class="rounded_img"></li>
</ul>
</nav>
<div class="container">
<img class="logo" src="https://www.google.com/images/srpr/logo11w.png" width="320px"/>
<center><form action="#" method="post" name="google_search_form">
<input type="search" name="googlesearch" class="search"><br/><br/>
<input type="submit" value="Google Search" class="button">
<input type="submit" value="I'm Feeling Lucky" class="button">
</form></center>
</div> <!--End container-->
<footer>
<ul>
<span class="left"><li>Advertising</li></span>
<span class="left"><li>Business</li></span>
<span class="left"><li>About</li></span>
<span class="right"><li>Settings</li></span>
<span class="right"><li>Terms</li></span>
<span class="right"><li>Privacy</li></span>
</ul>
</footer>
</body>
</html>
And the CSS:
.container{
position: relative;
vertical-align: middle;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 270px;
clear: right;
}
.search {
width: 650px;
height: 35px;
margin-top: 40px;
font-size: 27px;
background: url('images/voice.gif') 97% 50% no-repeat;
opacity:0.6;
background-size: 17px;
border: blue solid 1px;
}
.button {
font-family: Helvetica, Roboto, sans-serif;
font-weight: bold;
color: black;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
border-radius: 2px;
width: 140px;
height: 40px;
}
nav {
width: 600px;
height: 30px;
font-size: 1em;
font-family: Helvetica, Roboto, sans-serif;
font-weight: lighter;
text-align: center;
position: relative;
float: right;
}
nav ul {
height: auto;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
padding: 10px;
vertical-align: middle;
}
.atext {
text-decoration: none;
color: black;
}
.atext: hover {
text-decoration: underline;
background-color: yellow;
}
.aicon {
opacity: 0.6;
}
.aicon:hover {
opacity: 1.0;
}
footer {
width: 102%;
height: 40px;
left: -20px;
right: -20px;
font-size: 1em;
font-family: Arial, sans-serif;
position: absolute;
bottom: 0;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
}
footer ul {
height: auto;
padding: 0;
margin: 0;
}
footer li {
display: table-cell;
padding: 10px;
vertical-align: middle;
}
footer li a {
text-decoration: none;
color: gray;
}
.left {
float: left;
margin-left: 20px;
}
.right {
float: right;
margin-right: 20px;
}
.rounded_img {
border-radius: 20px;
}
Any help will be greatly appreciated. Thanks!
Oh, and I haven't even started on JavaScript yet, so I'd like to avoid JavaScript if possible!
Here is a fiddle: http://jsfiddle.net/Lvfmwhvu/
The problem is your container element, if you remove the position relative it will work, but not sure if it will be maintained in the same position, but you can check it and modify your css accordingly:
.container{
vertical-align: middle;
}
Hope this helps.
Your main container isn't clearing the floated navbar. Because it falls later in your document, it has a higher layer index and covers the navbar. Try this:
.container {
...
clear: both;
}
Demo