I am learning HTML and CSS and wanted to make a simple portfolio mockup page for myself and I am having a problem with the layout which I can't figure out.
![My page layout][1]: http://i.stack.imgur.com/EGsdM.png
The idea is that the boxes on left side of face and right side should be at the same height, but since something in my code is not quite right, they won't be when I apply same margin to a box on right and a box on left. On this picture through different margins I have gotten them pretty much to the right height but on bigger monitors the difference is more visible.
MY HTML code :
<!doctype html>
<html>
<head>
<title>Martin Hirvesaar</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-type" content="text/html; charset=ut f-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="reset.css">
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<img id="name" src="IMG/name.png" alt="Martin-Hirvesaar" />
<img id="face" src="IMG/face.png" alt ="low-poly-face" />
<div class="button" id="bio"><p>bio</p></div>
<div class="button" id="portfolio"><p>portfolio</p></div>
<div class="button" id="blog"><p>blog</p></div>
<div class="button" id="contact"><p>contact me</p></div>
</div>
</body>
</html>
My CSS :
body{
background-color:#80edc3;
width:100%;
height: 100%;
}
a{
text-decoration: none;
color:black;
}
a:hover{
font-size: 1.3em;
}
#container{
width:100%;
height: 1000px;
position: relative;
margin: 0 auto;
}
#face{
height:750px;
width:400px;
margin: 5% auto 0 ;
display: block;
padding-bottom: 10%;
}
#name{
height:12%;
width: 75%;
margin:10% 20% 0 15%;
display: block;
}
.button{
height:20%;
width:35%;
display: block;
}
.button p{
font-family: 'Permanent Marker', cursive;
font-size: 2.5em;
position: relative;
display: block;
padding-top:15%;
padding-left:9%;
color:black;
}
#bio p{
padding-left: 20%;
display: block;
position: relative;
}
#bio{
margin-top: -50%;
margin-left: 20%;
background-color: #87BCEB;
}
#portfolio{
margin-top: 5%;
margin-left: 20%;
background-color: #FFCE8A;
}
#blog p{
float:right;
padding-right: 15%;
}
#blog{
margin-top: -32.5%;
margin-left:50%;
background-color: #FFAE8A;
}
#contact{
margin-top:5%;
margin-left:50%;
background-color: #E77D99;
}
#contact p{
float:right;
padding-right: 4%
}
the webpage is online on : www.martinhirvesaar.com
Because you are using percentages for the margins the boxes will keep shifting depending on the size of the browser window. If you resize the window on your screen you can see how this will change. You'd want to use fixed pixel numbers to hold them in a specific place. (like margin-top: -20px; for example) Your image is a fixed size, while a lot of elements around it are moving around based %. I would redo the code to fix the elements in their positions around the image. You could then use #media query to resize for different screens.
Since you want the head image to "float" above the button blocks, position it absolutely in the middle with:
# face {
position: absolute;
left: 50%;
margin-left: -200px;
}
Then put your button blocks in a container in the natural layout order: bio, blog, portfolio, contact. You can then give them float: left with proper margins to position them correctly relative to one another.
Then use a margin to position the button container on the page where you want it.
Related
In the attached image below, I want to recreate the "1" circle to the left of the profile box. I'm currently trying to use CSS positioning to get it like the image above, but whenever I shrink my computer screen, the circle doesn't move with the profile box. I'm not quite sure how to fix it. I've attached my code below the image.
body{
width: 100%;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 80%;
margin: auto;
height: 100%;
}
.Ranking{
position: absolute;
left: 20px;
top: 10%;
transform: translateY(-50%);
background: #000;
color: #fff;
height: 52px;
width: 52px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
padding-top: 4px;
transition: background-color .25s linear .5s;
font-family: "Decima";
font-size: 30px;
line-height: 30px;
color: #f0f0f0;
font-weight: 300;
}
.Description{
flex:1;
background-color: blue;
grid-column: 2/5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel = "stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="Ranking"></div>
<div class="Name">One</div>
<div class="Summary">Summary: <br>He really hits, with a LF fit</div>
<div class="Level">Highest Level: A+ <br> Age: 21</div>
<div class="Body">Height: 6'1" <br> Weight: 215 lbs</div>
<div class="Profile"><img src="images/Dustin Harris.jfif"> </div>
<div class="Description">Five</div>
</div>
</body>
</html>
There is a CSS element called #media which will come helpful to you
#media screen (min-width: 800px) {
.container {
/* position and any property of the element according the small screen viewport*/
}
}
800px is the screen size under which the screen become reactive.
You might want to look at two aspects: HTML markup and CSS basics. TL;DR. See this CodePen example I put together for you.
position: absolute; looks for the closest parent that has position value of relative, absolute, or fixed. If there's no parent that has such position value, the element will be positioned absolute against the body. In your example, wrapper (i.e. the immediate parent) doesn't have position defined, thus Ranking will be positioned outside your intended area.
As a matter of fact, you won't likely need absolute positioning here. transform: translateX() indeed is a good starter. Instead of translateY(), you could move it horizontally by translateX().
Again, see this CodePen example I put together for you.
I'm making a gaming site and I'm having some troubles with text positions. What im trying to achieve is having my navbar text ontop of a custom navbar backgroud
how it looks now
navbar
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
height: 100%;
margin:0;
padding:0;
}
.topnav{
position:absolute;
text-align: center;
margin:auto;
width: 50%;
}
.topnav a {
line-height: 200px;
padding: 50px;
display: ;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
}
.navbackground {
position:absolute;
top: -50px;
left:0;
right:0;
bottom: 700px;
margin:auto;
width: 50%;
}
.banner {
position:relivent;
top: 10px;
left:0;
right:0;
bottom:0;
margin:auto;
width: 100%;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<img src="nav.png" class="navbackground ">
<img src="wallpaper.JPE" class="banner" >
</body>
</html>
I was considering adding the nav.png as a background image in the topnav class but i couldn't seem to get it to scale if you no how to scale it correctly or have any suggestions please let me know!
ps.. I'm new to CSS, HTML please cut me some slack :)
Even tough z-index property works (it controls how do elements stack on each other), since you have stated you are new to HTML, you should understand that probably the best way to achieve what you need is to correctly order your elements.
You now have:
topnav
link1
link2
link3
topnav background
webpage background
The elements are rendered on the way you write them. So, for example, to get the background to be rendered first, you have to write it first.
webpage background -- this will be rendered first
topnav
link1
link2
link3
topnav background
Also, for the topnav background, you need to place it before the topnav. But if also what you want is for the topnav to be relative to the background, you also will need to nest them:
webpage background
topnav background -- background is the parent of topnav
topnav
link1
link2
link3
That way, the order of rendering is:
Draw webpage background
Draw topnav background
Draw topnav (nothing here, just a placeholder)
Draw links
As you can see, your topnav in this case is kind of useless. You can just apply a background to the topnav and discard the topnav background element:
webpage background
topnav -- here we apply the background using background CSS property
link1
link2
link3
I hope that made it clear. You can achieve the same results without changing your HTML using z-index, but I recommend first to have a clear HTML and semantic.
You have to set z-index (higher one for nav)
More on w3schools.
topnav{
z-index: 1000;
}
You need to add z-index to the parent of Nav.
Setting it as a background image would be the better option, in my opinion.
You can scale the background image using the background-size CSS property which you set to either contain or cover (Depending on how you want it to behave if the aspect ratios of div and png don't match, see https://www.w3schools.com/cssref/css3_pr_background-size.asp).
Rather than scaling the background I'd suggest either scaling the image in an image editor to match the size of your navigation-div or setting the dimensions of the div to match your png.
Same for the background image. You could make it the background-image of the body or a surrounding div.
Here's an example: https://jsfiddle.net/hg5jxn3s/7/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
height: 100%;
margin:0;
padding:0;
background: url(wallpaper.JPE) no-repeat top left;
background-size: cover;
}
.topnav{
background:url(https://i.stack.imgur.com/h54t6.png) no-repeat top left;
background-size: contain;
position:relative;
text-align: center;
margin:0px auto;
width: 900px;
height: 150px;
padding:70px 0px;
}
.topnav a {
line-height: 1em;
padding: 0px 50px;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</body>
</html>
You'll notice that I've changed the width from flexible (50%) to a fixed width. I've done this because the navigation items themselves don't scale in your setup, so at a certain size they'd break into a second row which doesn't work with that background-image that well.
You can see what it would look like if you change the above CSS for topnav to:
.topnav{
background:url(https://i.stack.imgur.com/h54t6.png) no-repeat top left;
background-size: 100% 100%;
position:relative;
text-align: center;
margin:0px auto;
width: 50%;
height: auto;
padding:70px 0px;
}
see https://jsfiddle.net/hg5jxn3s/10/
Are you looking for something like this? ;)
Basicly in your code, give your .topnav{ ... } a position of relative + give it the background image as I did in this fiddle. Then make a new html div with a class="nav" and add the css .topnav .nav{ position: absolute; left: 10%; width: 80%; } and give the .topnav a a style of line-height: 60px; width: 24%; display: inline-block;
I think that were like almost all changed I made.
body {
background-color: black;
height: 100%;
margin: 0;
padding: 0;
}
.topnav {
display: block;
margin: 20px auto;
width: 80%;
height: 60px;
background-image:url(https://i.stack.imgur.com/h54t6.png);
background-repeat: no-repeat;
background-position: center;
background-size:100%;
position: relative;
}
.topnav .nav {
position: absolute;
left: 10%;
width: 80%;
}
.topnav .nav a {
line-height: 60px;
display: inline-block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
width: 24%;
}
.navbackground {
position: absolute;
top: -50px;
left: 0;
right: 0;
bottom: 700px;
margin: auto;
width: 50%;
}
.banner {
position: fixed;
top: 20px;
left: 0;
right: 0;
margin: auto;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<img src="https://cdna.artstation.com/p/assets/images/images/005/718/562/large/josh-bruce-headerfinal.jpg?1493246411" class="banner">
<div class="topnav">
<div class="nav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
</body>
</html>
Here's the codepen if it's easier. I'm also a beginner, just a heads up.
http://codepen.io/anon/pen/yaRpPL
My problem is that every time I hover over this circle, it extends the page size large enough that a scroll bar comes up when the circle reaches max size. I don't know how to explain, I just don't want that to happen...
Also, I can't get the text in the center of that circle to appear directly in the center. I feel like I've tried every CSS property I could think of.
Lastly, any tips on getting that circle to stay in the center for most common screen resolutions would be greatly appreciated. I have the margins set to percentages and it seems to be okay.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Echoes from Firelink</title>
<link href="homepage.css" type="text/css" rel="stylesheet">
<link rel="shortcut icon" href="coiledsword.ico">
</head>
<header>
home |
lite version
</header><!--End header-->
<body>
<div id="background_container">
<div id="content_container">
<p>From Software homepage</p>
</div>
</div>
</body>
</html>
CSS:
/* CSS page for the homepage. */
header {
text-align: center;
font-size: 10px;
}
#content_container {
background-color: black;
text-align:center;
color: white;
height: 200px;
width: 200px;
margin: 20% 45% 20% 45%;
border-radius: 50%;
transition: 2s;
}
#content_container:hover {
transform: scale(1.4);
}
You need to change your margin, Do not use percentage values.
If you need to center your text just the code below to the parent element.
display:flex;
justify-content:center;
align-items:center;
The css code:
header {
text-align: center;
font-size: 10px;
}
#content_container {
display:flex;
justify-content:center;
align-items:center;
background-color: black;
text-align:center;
color: white;
height: 200px;
width: 200px;
border-radius: 50%;
transition: 2s;
}
#content_container:hover {
transform: scale(1.4);
}
I want to create a header bar at the top of the web-page, give it a background color and then add a logo on it.
So the problem is:
The width of the bar should be the width of the page. Its height
should be the size of the logo (plus some padding added around the
logo image).
Or is there a way to make the bar as big as its
content plus the padding added to the content?
I actually searched SO and found this, I tried to reproduce it into my code but it does not seem to help me.
I have also seen this and this.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div {
position: absolute;
height: auto; //**** When changed to a percent value, it displays
width: 100%;
top: 0px;
left: 0px;
float: left;
background: #000029;
}
.logo {
position: fixed;
top: 5px;
left: 12px;
bottom: 4px;
}
</style>
</head>
<body>
<div class="div">
<img src="http://********Header.svg" alt="Logo" class="logo" >
</div>
</body>
</html>
It just does not display the background color at all, and when I change the value of height to some value in percent, it displays.
So what I want is that the height of the bar should fit to its content i.e. the logo image.
EDIT:-
Remove virtually all of your CSS rules and just use something as basic as:
.div {
background: #000029;
}
.logo {
vertical-align:top;
}
jsFiddle example
change you css code like below:
.div {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding:5px;
}
.logo {
}
see the demo here ---->http://jsfiddle.net/4A7Q9/1/
The style can be something along these lines:
<style>
.div {
width: 100%;
background: #000029;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
}
.logo {
}
</style>
I'm a total novice in HTML/CSS, but I'm having trouble with centering a fixed h1 element. It refuses to center itself and sticks to the left side of the page. I've tried setting the margin to auto, but it doesn't do a thing. Here's the code:
h1 {
color: #580101;
font-family: RobotoRegular;
position: fixed;
text-align: center;
}
* {
background-color: #ecebe9;
}
#navbar {
color: #000653;
background-color: #00001a;
height: 40px;
border-radius: 3px;
}
.sidebar {
background-color: black;
width: 90px;
height: 500px;
float: left;
margin: 30px 0px 0px 0px;
}
And the HTML:
<!DOCTYPE html>
<html>
<head>
<link href="Fonts/stylesheet.css" rel="stylesheet" type="text/css">
<title>Webpage</title>
</head>
<body>
<div id="navbar"></div>
<div class="sidebar"></div>
<h1>Hello World!</h1>
</body>
</html>
So, what should I do?
if you want to use fixed position then add width: 100%; css rule for h1 css style.
other just remove position that will work.
DEMO
Change <h1> position:fixed to position:relative
the reason its sticking to the side of the page is because hence the name its fixed for example. you cannot tell it to freely float in the center if you have 'basically' demanded the element to be fixed, if that makes sense
you could do this
<style>
.test{
position:fixed;
right:0;
left:0;
text-align:center;
background:#EEEEEE;
</style>
<h1 class="test">test</h1>
When using position, specify it's position...left, top, or right, bottom.