I have a website that I thought was OK, but apparently some people have issues with the text, and because of that I may have shot myself in the foot when it comes to showing off my portfolio to employers. The major problem is I'm not seeing what other people are seeing. Or, maybe they are seeing what I'm seeing, but it's just not designed well.
First of all, I would like you to check my website: http://mmking9999.com
After browsing around for a bit, please have a look at my code and tell me where I went wrong. If you have any other suggestions, let me know. Here's the code for the main page:
<html>
<head>
<link rel="stylesheet"
type="text/css" href="http://mmking9999.com/css/style.css" />
</head>
<body>
<!--Site logo. Clicking on it will redirect to this page.-->
<div class="logo">
<img src="http://mmking9999.com/Images/SiteLogo.png" />
</div>
<!-- Menu window goes here. The text are images that link to other pages.-->
<div class="menu">
<img src="http://mmking9999.com/Images/MenuWindow.png" />
</div>
<div class="portfolio_url">
<img src="http://mmking9999.com/Images/portfoliourl.png" />
</div>
<div class="blog_url">
<img src="http://mmking9999.com/Images/blogurl.png" />
</div>
<div class="random_url">
<img src="http://mmking9999.com/Images/randomurl.png" />
</div>
<div class="email">
<img src="http://mmking9999.com/Images/emailicon.png" />
</div>
<div class="linkedin">
<img src="http://mmking9999.com/Images/linkedinicon.png" />
</div>
<div class="twitter">
<img src="http://mmking9999.com/Images/twittericon.png" />
</div>
<div class="window"><br><br><p>Welcome to my website! My name is Mike Murray, a rookie game developer/designer. Here, you'll find stuff about what I do and what I hope to become in the future. I am an avid gamer, and it was that passion that led me to want to create the video games that people like to play. Having played video games for over 20 years, I figure I should be able to create something cool with the knowledge I have!</p></div>
</body>
</html>
And here is the CSS I'm using:
/*The code for the body sets the default settings for all pages */
body
{
background-image:url('http://mmking9999.com/Images/sitewallpaper.png');
}
/* Link colours. I use bright colours to contrast the black window. */
a:link {
COLOR: #86C6FE;
}
a:visited {
COLOR: #FF0000;
}
a:hover {
COLOR: #FFFF00;
}
a:active {
COLOR: #00FF00;
}
/* Main window. Used to display text and images */
img
{
margin: 2px;
height: auto;
width: auto;
float: left;
}
h1
{
color:red;
text-align:center;
font-family:calibri;
}
p
{
/* font */
color:rgb(255,255,255);
font-family:"Small Fonts", calibri, arial, "Times New Roman";
font-size:18px;
text-align:left; width:700px; margin-left:200px;
}
/* Main window. All info is displayed in here */
div.window
{
background-image:url('http://mmking9999.com/Images/IframeWindow.png');
background-repeat:no-repeat;
position:relative;
width:60%;
height:70%;
top:80px;
left:500px;
/*text*/
/*color:rgb(255,255,255);
font-family:"Small Fonts", calibri, arial, "Times New Roman";
font-size:18px;*/
}
/* Menu */
div.menu
{
position:relative;
width:40%;
height:10%;
}
/*Site logo */
div.logo
{
position:relative;
width:40%;
height:5%;
left:500px;
}
/*Images (so they aren't constrained by the attributes defined in div.window)*/
div.image
{
position:absolute;
left:20px;
}
/* In case I need another row of images */
div.image2
{
position:relative;
left:-150px;
width:90%;
height:90%;
}
/*Menu urls*/
div.portfolio_url
{
position:relative;
left:-175px;
top:30px;
}
div.blog_url
{
position:relative;
left:-305px;
top:90px;
}
div.random_url
{
position:relative;
left:-445px;
top:150px;
}
div.email
{
position:relative;
top:250px;
left:-600px;
}
div.linkedin
{
position:relative;
top:250px;
left:-580px;
}
div.twitter
{
position:relative;
top:250px;
left:-560px;
}
/*iframe
{
position:relative;
top:80px;
left:280px;
width:60%; height:70%;
}*/
Thanks for any advice you can provide.
http://d.pr/i/OhIF
Try using position:absolute rather than relative on your divs.
Related
I have been constructing UI development for a year now and I want to explore new structures in regards to designing.
so I am styling my panel-heading that it would look something like this.
as of now I have only done the default style for panel heading via bootstrap css.
I just posted an example to how can make it with position. if you don't need then check 2nd snippet
.main {
position:relative;
}
.tilt {
position:absolute;
top:30px;
left:0px;
transform:rotate(-90deg);
color:#000;
padding:0 10px;
border:1px solid #000;
text-align:center;
}
.tilt p {
margin:0px;
}
<div class="main">
<div class="tilt">
<p>
HELLO
</p>
</div>
</div>
.tilt {
transform:rotate(-90deg);
color#000;
padding:0 10px;
border:1px solid #000;
text-align:center;
display:inline-block;
margin-top:22px;
}
.tilt p {
margin:0px;
}
<div class="tilt">
<p>
HELLO
</p>
</div>
I am having a hard time centering my logo on the center of my header. When displayed correctly it would look like this: "Name" Logo "Surname" .Being the logo at the center, and the "name" and "surname" displaying at both sides of it, "name" on it's left and "surname" on it's right.
(You'll understand better with the picture I'm posting)
Header: logo not centered
So I would like the circled logo to be the center of the header, then have "Pousada" adapt to it at it's right and same with "Team" at it's left.
This is my CSS and HTML:
*{
font-family: 'Oswald', sans-serif;
}
#rafa {
background-color: #000000;
background-repeat:no-repeat;
background-position: 40% 0;
background-size:30%;
color: #fff;
padding: 0.5rem 0 0 0;
border-top:none;
}
#BJJ {
text-align:center;
height: 4rem;
font-weight: normal;
}
.escudo{
text-align:center;
}
.group:after {
content: "";
display: table;
clear: both;
}
#uno {
text-align:center;
vertical-align:middle;
font-size: 2em;
display:inline-block;
}
#dos {
text-align:center;
font-size:2em;
display:inline-block;
vertical-align:middle;
}
img {
max-width: 15%;
clear:both;
display:inline-block;
vertical-align:middle;
}
ul {
color: #000;
list-style: none;
text-align:center;
background: #fff;
border-bottom: solid #000 1.5px;
padding:0;
height: 2.5em;
border-top:none;
}
li {
display:inline-block;
padding: 0 1em;
border-right: 2px;
}
#welcome{
text-align:center;
}
/************ESTILO LINKS*************/
li a {
text-decoration:underline;
color: #000;
}
.Inicio {
color: #fff;
text-decoration:none;
}
/*****************ARTE SOAVE*******************/
/*****************EL EQUIPO*******************/
/*****************LA ESCUELA*******************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="Treehouse Programación/Recursos/normalize.css" rel="stylesheet">
<link href="estilo.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700|Roboto+Condensed:300" rel="stylesheet">
<title>Pousada Team Brazilian Jiu-Jitsu</title>
</head>
<body>
<header id="rafa">
<a href="Pousada Team.html" class="Inicio">
<h3 id="BJJ">Brazilian Jiu-Jitsu</h3>
<div class="escudo group">
<h3 id="uno">Pousada</h3>
<img src="309011_3565552909659_642031164_n.jpg"/>
<h3 id="dos">Team</h3>
</div>
</a>
</header>
<nav>
<ul>
<li>Arte soave</li>
<li>El Equipo</li>
<li>La Escuela</li>
</ul>
</nav>
<div id="welcome">
<h3>Bienvenido al equipo</h3>
</div>
<div>
</div>
</body>
</html>
I have tried with float, but didn't do well with it. What I have tried here is to use inline-block to have the 3 elements of this header ("Pousada", "logo" and "Team") align.
Any help with this particular problem I have and any content recommendations (or project practices) to fully understand HTML and CSS principles (like layouts and positioning) so I can learn them and move on to more functional aspects like Javascript, will be HUGELY appreciated, you can totally expect any help back that I can provide.
Thanks in advance, and if there's anything I can do to make this place better, please let me know.
Best regards,
Miguel
Here is a quick fix for you:
I have added a background color to the div's to help you identify them.
HTML:
Add your header, add your logo inside the header... then add both the first and the last names inside of the logo div. By adding the names inside of the logo; when ever you move the logo the names will move relative to it.
<div class="Header">
<div class="Logo">
<div class="FirstName">FirstName</div>
<div class="LastName">LastName</div>
</div><!-- End CenterContent -->
</div><!-- End Header -->
CSS:
I use the single line method of writing my css.
You can easily adjust the dimensions of the logo DIV and you can move the names around as needed.
.Header{position:relative; width:100%; height:300px; display:block; float:left; background:SILVER;}
.Logo{position:relative; margin:auto; width:200px; height:200px; background:BLACK;}
.Logo > .FirstName{position:absolute; top:90px; left:-100px; min-width:1em; text-align:center;}
.Logo > .LastName{position:absolute; top:90px; right:-100px; min-width:1em; text-align:center;}
Your Welcome.
So, I am using vh, and, to my knowledge, it is 1 percent the view height of the page. It should work like percentages, but for borders and possibly other things. In Chrome, though, it wont work and leaves white space at the bottom of the Web page. Here is what I am using:
div /*It most be any element I'm just using div for an example*/
{
border:.5vh solid red;
}
I am asking this because Chrome (being the frustrating piece of work it is) doesn't convert .1vh to .1% like like internet explorer does and I'm left with white space at the bottom. Here is what I'm working on:
HTML:
<head>
<!--
Assignment: Personal Website
Date: 10/4/16
Name: Bradley Elko
-->
<title>Bradley's Website (Me)</title>
<link rel="stylesheet" href="personalWeb1.css">
<meta charset="UTF-8"/>
<meta name="description" content="My personal website"/>
<meta name="keywords" content="Brad,Website,Personal,Information"/>
<meta name="author" content="Bradley William Elko"/>
<link rel="stylesheet" href="personalWeb1.css">
</head>
<body>
<div class="div01">
<h1 class="h101"><a class="a00p5" href="personalWeb1.html" style="text-decoration:none">Bradley's Website</a></h1>
</div>
<div class="div02">
<h2 class="h201">
<a class="a01" href="personalWeb2.html" style="text-decoration:none">My Band</a>
<a class="a01" href="personalWeb3.html" style="text-decoration:none">My Ideas</a>
</h2>
</div>
<div class="div03">
<h2 class="h202">About Me</h2>
</div>
<div class="div04">
<div class="div05">
<p>Date: 10/4/2016 (Latest Update)</p>
<blockquote>
Summary:
<br/>
<br/>
Welcome to my personal website! I am Bradley William Elko, and I am from Brunswick Ohio. I am currently attending MCCC (Medina County Carrer Center). I am taking SEWD1 (a coding class at MCCC). I always had an interest in coding. I am glad to be making my own personal website!
</blockquote>
</div>
</div>
</body>
CSS:
a.a00p5
{
color:#950f0f;
padding-left:1.9px;
}
a.a00p5:hover
{
color:red;
}
a.a00p5:active
{
color:#ffffff;
background-color:#B6B2AE;
}
a.a01
{
color:#950f0f;
border-left:.3vh solid #950f0f;
border-right:.3vh solid #950f0f;
margin-left:1%;
margin-right:1%;
}
a.a02,a.a03,a.a04
{
color:#ffffff;
}
a.a02:hover,a.a02:active
{
color:#3b5998;
}
a.a03:hover,a.a03:active
{
color:#00aced;
}
a.a04:hover,a.a04:active
{
color:#bb0000;
}
.address01
{
text-align:center;
}
body{
overflow:hidden;
margin:0px;
}
div.div01
{
position:relative;
text-align:center;
height:14.3%;
width:100%;
font-family:Arial, Helvetica, sans-serif;
background-color:#73778c;
border-top:.4vh solid #950f0f;
}
div.div02
{
border-top:.3vh solid #950f0f;
border-bottom:.3vh solid #950f0f;
position:relative;
height:5%;
width:100%;
background-color:#73778c;
text-align:center;
}
div.div03
{
position:relative;
background-color:#73778c;
height:10%;
border-bottom:.3vh solid #950f0f;
}
div.div04
{
position:relative;
height:69%;
width:100%;
background-color:#73778c;
border-bottom:.4vh solid #950f0f;
}
div.div05
{
position:relative;
width:50%;
height:80%;
margin-left:auto;
margin-right:auto;
padding-left:1%;
background-color:#b6b2ae;
overflow-y:scroll;
}
h1.h101
{
color:#950f0f;
font-size:6.75vh;
margin:0%;
}
h2.h201
{
text-align:center;
font-size:4.5vh;
margin:0%;
padding:0%;
}
h2.h201,a:hover
{
color:red;
}
h2.h201,a:active
{
color:white;
}
h2.h202
{
font-size:5.2vh;
color:#950f0f;
margin:0px;
text-align:center;
}
img.img01
{
width:100px;
height:100px;
}
img.img02
{
width:100px;
height:81.2px;
}
img.img03
{
width:100px;
height:100px;
vertical-align: bottom;
}
table
{
border:2px solid #950f0f;
margin-top:3%;
margin-bottom:9%;
margin-left:auto;
margin-right:auto;
}
td:active
{
background-color:#ffffff;
}
td.td01
{
border:2px solid #3b5998;
padding-top:35.5px;
padding-bottom:36.5px;
}
td.td02
{
border:2px solid #00aced;
padding-top:35.5px;
padding-bottom:36.5px;
}
td.td03
{
border:2px solid #bb0000;
padding-top:35.5px;
padding-bottom:36.5px;
}
th.th01
{
border:2px solid #3b5998;
background-color:#ffffff;
}
th.th02
{
border:2px solid #00aced;
background-color:#ffffff;
}
th.th03
{
border:2px solid #bb0000;
background-color:#ffffff;
}
If you look closely at the bottom of the Web page (on Chrome), you can see white space at the bottom of the page. You have the really look at the bottom to see it. This doesn't happen on Internet Explorer (I'm using a pre-installed version of IE on windows ten, but I don't know what version). If you don't get the same problem, I get I'm sorry that this wasted your time, but I can show you screenshot proof if you really want it.
Things to note:
I have two other pages so there maybe be other things in my css text document that you may encounter. Ignore it.
If percentages don't work than is there another way to simulate them for borders in Chrome?
Thank you for for your time!
In Chrome, border widths are rounded down to the nearest pixel. Depending on the calculated results of your vh border widths, the sum of the heights and border widths of all your elements may be less than 100%.
You can solve this by applying box-sizing: border-box to all of your elements. This will ensure borders do not change the dimensions of your elements, so you'd only have to ensure your <div> heights add to 100%.
* {
box-sizing: border-box;
}
However, you choose to do it, never use fixed heights if you can avoid it. Let CSS handle the dimensions naturally.
This has been bothering me for a while. I have currently vertically align a border contain the word "Facebook" to an image but, vertical align isn't completely centering the word with the image.
Update 1: I am using Width 100% and Line-Height 100%. This is close to how I want it but not quite. https://gyazo.com/f67cff590476c9e11601172b5b1dafd5 I want the border and the image to align. Here is my old code:
HTML
<div id="div06">
<img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
<span id="span01">Facebook</span>
</div>
CSS
#div06
{
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01
{
border:3px solid blue;
padding: 35px;
margin: 25;
}
Here is my current edit:
#div06{
margin-top:3%;
width:100%;
line-height:100%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01{
border:3px solid #3b5998;
color:#000000;
font-family:arial, bold;
font-size: 30px;
padding: 35px;
margin: 25;
}
It is vertically aligned in the full version but visually it's not (https://gyazo.com/f67cff590476c9e11601172b5b1dafd5 In this screenshot, the text does center align but the order doesn't. How do I make the border align?). I want them to align. If it is visually vertical for you then this problem only exists with the full version. I think it might be the image but, I don't know. How Do I fix this?
Also if you need the full code I will provide it below.
Full Code
HTML
<head>
<!--
Assignment: Personal Website
Date: 10/4/16
Name: Bradley Elko
-->
<link rel="stylesheet" href="personalWeb1.css">
</head>
<body>
<div id="div01">
<h1 id="h101">Bradley's Website</h1>
</div>
<div id="div02">
<h3 id="h301">My Band</h3>
<h3 id="h302">My Handlers</h3>
<h3 id="h303">My Ideas</h3>
</div>
<div id="div03">
<div id="div04">
<h2 id="h201">Formal Unknown Cereal Killer</h2>
</div>
<div id="div05">
<p id="p01">Date: 10/05/2016 (Latest Update)
<blockquote>
Summary:
<br/>
<br/>
Formal Unknown Cereal Killer is a band I made on September 30th, 2016. I don't have anyone else in it, but I will keep trying to get more members. The band will be a metalcore band(a rock genre). I may implement other instruments into the band (such as a violin, flute, clarenet, or another unique instrument). If you want to keep up to date check us out. The links are down below.
</blockquote>
<div id="div06">
<img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
<span id="span01">Facebook</span>
</div>
<div id="div07">
<img id="img02" src="https://pbs.twimg.com/profile_images/767879603977191425/29zfZY6I.jpg"/>
</div>
</div>
</div>
</body>
CSS
a:link{
color:#1a0000;
border-right:2px solid;
border-left:2px solid;
padding:5;
}
a:visited{
color:#950f0f;
}
a:hover{
color:red;
}
a:focus{
color:#eeeedd;
}
#div01 {
position:fixed;
top:0px;
left:0px;
right:0px;
height:80px;
bottom:90%;
font-family:Arial, Helvetica, sans-serif;
font-size:25px;
background-color:#73778c;
color:#950f0f;
text-align:center;
border-top:3px solid #950f0f;
border-bottom:2px solid #950f0f;
padding-top:0;
display:inline-block;
}
#h101{
margin-top:10;
margin-bottom:10;
}
#div02{
position:fixed;
top:85px;
left:0px;
right:0px;
display:inline-block;
background-color:#73778c;
color:#950f0f;
border-bottom:2px solid #950f0f;
text-align:center;
padding-top:5;
padding-bottom:5;
font-family:verdana;
font-size:12px;
}
#h301{
display:inline;
}
#h302{
margin-left :20%;
margin-right:20%;
display:inline;
}
#h303{
display:inline;
}
#div03{
position:fixed;
padding-top:0;
top:114px;
left:0%;
right:0%;
bottom:0%;
background-color:#73778c;
color:#950f0f;
border-bottom:3px solid #950f0f;
}
#div04{
font-size:30;
text-align:center;
margin-top:-30;
}
#h201{
font-family:Times New Roman;
}
#div05{
margin-left:100;
margin-right:100;
margin-bottom:100;
margin-top:-30;
padding-top:10;
padding-bottom:10;
padding-left:30;
padding-right:20;
border:3px solid #950f0f;
background-color:#e0e0d1;
}
#div06{
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
}
#div07{
margin-top:3%;
}
#img01{
width:10%;
vertical-align:middle;
}
#span01{
border:3px solid blue;
padding: 35px;
margin: 25;
}
#img02{
width:10%;
}
Also (If you get this far you don't have to answer this. I'm just curious), how do you get Fullscreen inspect elements? Whenever I use it, it takes up a portion of the page that displays the portion of the website, but I want it to display the Fullscreen results [(This has been answered)].
Trying using text-align:
#div06 {
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
text-align: center;
}
And to make the chrome dev-tools full screen, press the 3 small dots close to the side (menu button), and beside 'Dock side' there is a button to 'pop out'. This will make a new window with which you can resize as much as you need.
My friend told me I should use a table and it worked! Here is the snippet of code:
HTML
<table>
<tr>
<div id="div06">
<th><img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/></th>
<th><span class="span01"><a class="a02" style="text-decoration:none" target="_blank" href="https://www.facebook.com/groups/247367778991930/">Our Facebook Band Group</a></span></th>
</div>
</tr>
</table>
CSS
#img01
{
width:100px;
height:100px;
vertical-align:middle;
}
span.span01
{
border:3px solid #ffffff;
color:#000000;
font-family:arial;
font-size: 16px;
padding:38.5px;
margin: 25;
}
I'm trying to reproduce some pieces of CSS from the http://flink.to website, especially the tiles which contains for each article the picture, the title, the author, the link to the author page and the link to the article.
Here is the HTML for one tile :
<div class="block-module">
<a href="http://flink.to/stories/54b6e61de3039db33f00000b" class="article-link">
<span class="button">View Story</span>
</a>
<img src="https://cdn01.flink.to/api/image/54f492ec30323921c9000000/300/300/fill">
<div class="block-about">
<h2 class="block-title">Arch Enemy’s Perpetual Revolution</h2>
<span class="block-stats">
by Andrew Epstein
</span>
</div>
</div>
Here is the CSS for one tile :
.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.button { color:#ffffff; background-color:#337d94; }
.author-link { color:#659dae; }
Everything's OK except that we can't access the article and the "view story" link which is supposed to show up only when we hover the picture, in the middle/center of it.
Edit : Here is a demo : http://jsfiddle.net/5qwejk20/
As the website's CSS sheet of Flink.to is really very complicated, I didn't find how to resolve this. Could you please help me ?
There is a lot of CSS, and obviously it's hard to tell what does what and it will need to be trimmed. But from what I can tell these are the styles making it happen. The button opacity is initially 0 (hidden), so needed to change to 1.
JSFiddle
I added this style to make it show with the cursor
.view-full-module.mod-custom-icon:hover .button.view-full-custom-el {
opacity: 1;
}
By looking at the css the elements are hiding and showing by using the z-index property and CSS Positioning. Try the following code, I use different values of z-index to overlap elements. Remember that the z-index property only is valid for elements with position:absolute,position:relative or position:fixed so you have to scaffold your website having this on mind. I also added an id to the img to select it on the css. http://jsfiddle.net/cfahhmkj/
HTML
<div class="block-module">
<a href="http://flink.to/stories/54b6e61de3039db33f00000b" class="article-link">
<span class="button">View Story</span>
</a>
<img class="albumImage" src="https://cdn01.flink.to/api/image/54f492ec30323921c9000000/300/300/fill">
<div class="block-about" >
<h2 class="block-title">Arch Enemy’s Perpetual Revolution</h2>
<span class="block-stats">
by Andrew Epstein
</span>
</div>
</div>
CSS
.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.button { color:#ffffff; background-color:#337d94; }
.author-link { color:#659dae; }
.article-link {
position:absolute;
left:110px;
top: 120px;
z-index:-1;
}
.albumImage{
position:absolute;
z-index:0;
}
.albumImage:hover{
z-index:-2;
}