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);
}
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 trying to remove the whitespace around my header photo, which should cover the entirety of the page. I'm running a local server on my computer (localhost) to test this PHP file.
I've already tried all of the relevant answers I could find here on Stack Overflow. I've looked up multiple threads and done the following:
1) reset the CSS styles by changing margins and padding to 0
2) surrounded the image tag with body tags, which should now be reset
3) Changed the width setting to 100% and height to auto
index.php:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="container">
<img class="image"
src="https://cdn.shopify.com/s/files/1/0533/2089/files/header-
design-position-absolute_fcabc9a2-0fdb-4057-a6fb-f84f16840eba.png?
v=1507118933" alt="Header Picture">
<div class="name"> ⏤ NAME ⏤ </div>
<div class="tagline"> traveler. consultant. developer.</div>
</div>
</body>
<html>
style.css:
* {
margin:0;
padding:0;
}
/* container holding both the header photo and text */
.container {
position: relative;
text-align: center;
color: white;
}
/* main header image */
.image {
filter: drop-shadow(8px 8px 10px gray); filter: contrast(75%);
width: 100%;
height: auto;
}
/* name text */
.name {
position: absolute;
top: 17.5%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 600%;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
}
/* tagline text */
.tagline {
position: absolute;
top: 23.5%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 200%;
font-family: "Comic Sans MS", cursive, sans-serif;
}
All I want is for there to be no white space around the picture such that it stretches across the page. Instead, I keep getting white space around the edges that I can't get rid of.
Upadte I'm implementing some of the changes now and seeing why suddenly this simplified version works. It must be something in the rest of my code (which I have not included) Let me reupdate this code with the rest of it first.
This works fine when tested locally and on jsfiddle. However your HTML is missing a <head> tag. The CSS <link> should go inside of it.
My first suggestion here is to use the background-image CSS property as then you gain more control over the image box, and you can then set the actual page body or section to render the image.
.your-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
One thing to note is that the <img> tag is included in screen readers while background images are not, making your website more user-friendly to those who use screen readers as the background here is less relevant to the content.
One thing to think about is that all HTML elements have their own predefined margins and padding as well as other attributes based on the browser they are rendered in, an example of this is the 8px margin placed on the <body> element by default in most browsers, which can be overwritten in your code by being explicitly defined.
Just as a side note, there are some libraries that assist with the incongruencies between our different browsers and how they render our elements, I would take a look at normalize.css which is a great CSS only library with plenty of documentation.
It seems that the problem in your image so, try to crop the image.
* {
margin:0;
padding:0;
}
/* container holding both the header photo and text */
.container {
position: relative;
text-align: center;
color: white;
}
/* main header image */
.image {
filter: drop-shadow(8px 8px 10px gray); filter: contrast(75%);
width: 100%;
height: auto;
}
/* name text */
.name {
position: absolute;
top: 17.5%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 600%;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
}
/* tagline text */
.tagline {
position: absolute;
top: 23.5%;
left: 40%;
transform: translate(-30%, 50%);
font-size: 200%;
font-family: "Comic Sans MS", cursive, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style=" background-color: #000000">
<div class="container">
<img class="image"
src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Header Picture">
<div class="name"> ⏤ NAME ⏤ </div>
<div class="tagline"> traveler. consultant. developer.</div>
</div>
</body>
<html>
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.
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.