I'm looking to use auto-center values for two div elements .main_h2 and .first_button, which are the child of div #demo. I tried to use position:relative for parent and position:absolute for child but unable to put elements in center.
The Code:
<!doctype html>
<html>
<head>
<style>
#demo {
width: 1440px;
height: 592px;
border: 0.1px solid #87509c;
background-color: #87509c;
position: relative;
}
.logo {
position: absolute;
top: 50px;
background-image: url("logo.jpg");
width: 117px;
height: 40px;
margin-left: 210;
margin-top: 54;
}
ul {
list-style-type: none;
position: absolute;
top: 47px;
right: 10%;
}
ul, li {
float: right;
margin-left: 30px;
padding: 10px;
font-size: 12pt;
color: white;
font-family: tahoma;
}
.main_h2 {
font-size: 32.16pt;
color: white;
text-align: center;
position: absolute;
top: 235px;
left: 260px;
width: 60%;
}
.first_button {
position: absolute;
top: 381px;
left: 572px;
background-color: #eb7d4b;
color: white;
padding: 10px;
text-align: center;
font-size: 8pt;
height: 60px;
width: 283;
}
</style>
</head>
<body>
<div id="demo">
</div>
<div class="logo">
</div>
<ul>
<li>WORK</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
<li>HOME</li>
</ul>
<div class="main_h2">
Hi there! We are the new kids on the block
and we build awesome websites and mobile apps.
</div>
<button class="first_button">WORK WITH US!</button>
</body>
</html>
Try something like this:
#demo {
width: 100%;
height: 100%;
border: 0.1px solid #87509c;
background-color: #87509c;
}
.header {
display: flex;
}
.logo {
position: relative;
top: 25px;
left: 25px;
background-image: url("logo.jpg");
width: 117px;
height: 40px;
background-color: white;
}
ul {
list-style-type: none;
}
ul, li {
float: right;
margin-left: 30px;
padding: 10px;
font-size: 12pt;
color: white;
font-family: tahoma;
}
.main_h2 {
font-size: 32.16pt;
color: white;
text-align: center;
position: relative;
top: 50%;
left: 50%;
width: 60%;
display: flex;
flex-direction: column;
transform: translate(-50%, -50%);
}
.first_button {
position: relative;
background-color: #eb7d4b;
color: white;
padding: 10px;
text-align: center;
font-size: 8pt;
width: 283px;
transform: translate(-50%);
left: 50%;
margin-top: 10px
}
<body>
<div id="demo">
<div class="header">
<div class="logo">
</div>
<div>
<ul>
<li>WORK</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
<li>HOME</li>
</ul>
</div>
</div>
<div style="height:500px;">
<div class="main_h2">
Hi there! We are the new kids on the block
and we build awesome websites and mobile apps.
<button class="first_button">WORK WITH US!</button>
</div>
</div>
</div>
</body>
Related
I want to position the text on top of the image, but with 40px margin. I also want to position the two buttons on each side of the li (one on the right side and one on the left side). I've tried with the code below, and various other solution, but with no luck. The closest I've come is what the picture below shows, but the buttons are not in position. I want to have the same layout for every li, so I want this to apply to every li on the page.
CSS:
.container {
width: 100%;
}
.posts {
position: absolute;
top: 200px;
bottom: 0;
right: 30px;
margin: 0;
}
.post {
background-color: #606060;
border-radius: 30px;
width: 600px;
min-height: 300px;
float: right;
margin-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
bottom: auto;
top: auto;
}
.img {
background-color: #606060;
background-repeat: no-repeat;
background-size: contain;
width: 90%;
height: 300px;
position: relative;
margin-bottom: 100px;
border-radius: 50px;
}
.content {
font-size: 15px;
text-align: left;
min-height: 120px;
position: relative;
left: 10px;
color: white;
font-weight: 700;
margin-top: 40px;
}
.comment {
background-color: #006FC4;
border: 1px solid #00508D;
font-size: 15px;
color: #FFFFFF;
padding: 5px;
border-radius: 7px;
height: 30px;
position: absolute;
bottom: 0;
float: left;
}
.like {
background-color: #006FC4;
border: 1px solid #00508D;
font-size: 15px;
color: #FFFFFF;
padding: 5px;
border-radius: 7px;
height: 30px;
position: absolute;
float: right;
}
HTML:
<div class="container">
<ul class="posts">
<li class="post">
<div class="content">Test</div>
<button class="comment" onclick="comment('posts/XiqNjxsov3hUXX1zJLk3ta7mQul2/userPosts/PkIm2NOhjOlTZk7J7Dyk')">Comment</button>
<button class="like" onclick="like('posts/XiqNjxsov3hUXX1zJLk3ta7mQul2/userPosts/PkIm2NOhjOlTZk7J7Dyk')">Like</button><img class="img" src="https://firebasestorage.googleapis.com/v0/b/mysharify-4ea69.appspot.com/o/posts%2F6.png?alt=media&token=f1881e5e-e9f4-4e90-bf0f-f211a74ccd42" onclick="openImage('https://firebasestorage.googleapis.com/v0/b/mysharify-4ea69.appspot.com/o/posts%2F6.png?alt=media&token=f1881e5e-e9f4-4e90-bf0f-f211a74ccd42')"></li><br><br>
<li class="post">
<div class="content">dasdasd</div>
<button class="comment" onclick="comment('posts/hg23gh1beGO7cpUvRSkKpqcY9O22/userPosts/TpiuWCRoZQliuhmlj1su')">Comment</button>
<button class="like" onclick="like('posts/hg23gh1beGO7cpUvRSkKpqcY9O22/userPosts/TpiuWCRoZQliuhmlj1su')">Like</button></li><br><br>
</ul>
</div>
I'm not entirely sure what you're going for based on your post (would be helpful to have a link to something similar to what you're trying to get), but here's my best guess.
HTML (I removed the second LI, since they'll all look the same anyways and that one didn't have an image)
<div class="container">
<ul class="posts">
<li class="post">
<div class="content">Test</div>
<button
class="comment"
onclick="comment('posts/XiqNjxsov3hUXX1zJLk3ta7mQul2/userPosts/PkIm2NOhjOlTZk7J7Dyk')"
>
Comment
</button>
<button
class="like"
onclick="like('posts/XiqNjxsov3hUXX1zJLk3ta7mQul2/userPosts/PkIm2NOhjOlTZk7J7Dyk')"
>
Like
</button>
<img
alt="foo"
class="img"
src="https://firebasestorage.googleapis.com/v0/b/mysharify-4ea69.appspot.com/o/posts%2F6.png?alt=media&token=f1881e5e-e9f4-4e90-bf0f-f211a74ccd42"
onclick="openImage('https://firebasestorage.googleapis.com/v0/b/mysharify-4ea69.appspot.com/o/posts%2F6.png?alt=media&token=f1881e5e-e9f4-4e90-bf0f-f211a74ccd42')"
/>
</li>
</ul>
</div>
CSS
.container {
width: 100%;
}
.posts {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
list-style: none;
}
.post {
background-color: #606060;
border-radius: 30px;
width: 100%;
float: right;
position: relative;
margin: 1rem 0;
}
.img {
position: relative;
background-color: #606060;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
border-radius: 50px;
}
.content {
font-size: 15px;
position: absolute;
z-index: 10;
color: white;
font-weight: 700;
margin: 40px;
}
.comment {
background-color: #006fc4;
border: 1px solid #00508d;
font-size: 15px;
color: #ffffff;
padding: 5px;
border-radius: 7px;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
}
.like {
background-color: #006fc4;
border: 1px solid #00508d;
font-size: 15px;
color: #ffffff;
padding: 5px;
border-radius: 7px;
position: absolute;
bottom: 0;
right: 0;
z-index: 10;
}
I am working on my final project for my intro to HTML and CSS class.
I am building a very simple website, and everything seemed to be going alright until I wanted to see how the page looks when I resize the browser window. The page looks fine until any sort of resizing is done, and then all of the elements start to get really messed up.
I am a complete noob and have been stuck trying to fix this for almost an hour now. I'm not really sure what to do. I'm trying to make the elements scale until a certain minimum width, but I fear ive built the whole website wrong from the beginning..
Here is the code, if someone could give some insight I would be very grateful..
#wrapper {
height: 1000px;
margin: 0 auto;
background-color: black;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
#header {
height: 150px;
position: absolute;
background-color: red;
width: 100%;
}
#welcome {
left: 75px;
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
font-family: courier;
position: absolute;
font-size: 64pt;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
#main-nav {
position: absolute;
bottom: 0;
right: 0;
}
#main-nav ul li {
float: left;
}
#main-nav ul li a {
color: #fff;
display: inline-block;
padding: 20px;
text-decoration: none;
font-family: courier;
font-size: 24pt;
white-space: no-wrap;
}
#main-nav ul li a.current {
font-weight: bold;
font-size: 28pt;
}
#main-nav ul li a:hover {
color: #ffb0ac;
}
#main-content {
position: relative;
width: 100%;
height: 500px;
}
.intro {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: courier;
font-size: 36pt;
color: #fff;
}
.button {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<h1 class="w">Welcome</h1>
</div>
<nav id="main-nav">
<ul>
<li><a class="current" href="#">Home</a></li>
<li>Introduction</li>
<li>Keys</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="main-content">
<h1 class="intro">Basic Music Theory Introdution</h1>
<img class="button" src="images/button.jpg" alt="button">
</div>
</div>
<!-- End of wrapper-->
Your elements are all using fixed pixel sizes in css. you have other options there, you can set elements to percentage of viewport width (50vw) or height (50vh), or just a percentage (50%). If percentage is used inside of another element it will be scaled to that element not the browser window.
Also - you have pt sizes in your css. those dont exist in css and would need to be changed to px. There are various calculations out there for converting pt size to other units.
for example I've copied your snippets below and changed a few sizes to use viewport width (vw) viewport height (vh) and percentages. your css could be like this:
#wrapper {
height: 100vh;
margin: 0 auto;
background-color: black;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
#header {
height: 30vh;
position: absolute;
background-color: red;
width: 100%;
}
#welcome {
left: 5vw;
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
font-family: courier;
position: absolute;
font-size: 15vw;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
#main-nav {
position: absolute;
bottom: 0;
right: 0;
}
#main-nav ul li {
float: left;
}
#main-nav ul li a {
color: #fff;
display: inline-block;
padding: 20px;
text-decoration: none;
font-family: courier;
font-size: 4vw;
white-space: no-wrap;
}
#main-nav ul li a.current {
font-weight: bold;
font-size: 28pt;
}
#main-nav ul li a:hover {
color: #ffb0ac;
}
#main-content {
position: relative;
width: 100%;
height: 500px;
}
.intro {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: courier;
font-size: 36pt;
color: #fff;
}
.button {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<h1 class="w">Welcome</h1>
</div>
<nav id="main-nav">
<ul>
<li><a class="current" href="#">Home</a></li>
<li>Introduction</li>
<li>Keys</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div id="main-content">
<h1 class="intro">Basic Music Theory Introdution</h1>
<img class="button" src="images/button.jpg" alt="button">
</div>
</div>
<!-- End of wrapper-->
I just started my first practice site and I cant seem to position the navigation bar where I want it. I want it centered in the header right above the midbody. I look on W3 but i still cant seem to grasp it. Any help would be greatly appreciated.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link type="css/text" rel="stylesheet" href="animate.css">
<title>
</title>
</head>
<body>
<div class="Header">
<div id="navbar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div class="MidBody">
<div id="leftbody"></div>
<div id="rightbody"></div>
<div id="lowerbody"></div>
</div>
<div class="footer"></div>
</body>
</html>
CSS:
.Header {
width: calc(100%-16px);
height: 100px;
border-radius: 5px;
background-color: transparent;
}
.MidBody {
background-color: #141414;
width: calc(100%-16px);
height: 850px;
margin-top: 3px;
border-radius: 5px;
position: relative;
}
.footer {
background-color: #CCCCCC;
width: calc(100%-16px);
height: 50px;
margin-top: 5px;
border-radius: 5px;
}
#leftbody {
background-color: #F1F1F1;
width: 49%;
height: 425px;
left: 0;
margin-top: 3px;
margin-left: 3px;
position: absolute;
z-index: 1;
border-radius: 5px;
opacity: .25;
}
#rightbody {
background-color: #F1F1F1;
width: 49%;
height: 425px;
right: 0;
margin-top: 3px;
margin-right: 3px;
position: absolute;
z-index: 1;
border-radius: 5px;
opacity: .25;
}
#lowerbody {
width: 99%;
height: 49%;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
margin-top: 432px;
margin-bottom: 2px;
border-radius: 5px;
background-color: #F5F5F5;
position: absolute;
}
body {
background-image: url("http://www.freewebheaders.com/wordpress/wp- content/gallery/love-emotions/i-love-you-nice-quotes-website-header.jpg");
background-repeat: repeat;
background-attachment: fixed;
}
li {
display:inline;
top: -35px;
}
#navbar {
color: #F8F8F2;
font-family: Arial Black;
margin: auto;
}
Here is a Live Demo that centers your navbar both horizontally and vertically. text-align: center is used to align it horizontally, and line-height: 100px is used to center it vertically.
If you would like it centered on only one axis or the other, remove one of those two declarations.
.Header {
width: calc(100%-16px);
height: 100px;
border-radius: 5px;
background-color: red;
}
.MidBody {
background-color: #141414;
width: calc(100%-16px);
height: 850px;
margin-top: 3px;
border-radius: 5px;
position: relative;
}
.footer {
background-color: #CCCCCC;
width: calc(100%-16px);
height: 50px;
margin-top: 5px;
border-radius: 5px;
}
#leftbody {
background-color: #F1F1F1;
width: 49%;
height: 425px;
left: 0;
margin-top: 3px;
margin-left: 3px;
position: absolute;
z-index: 1;
border-radius: 5px;
opacity: .25;
}
#rightbody {
background-color: #F1F1F1;
width: 49%;
height: 425px;
right: 0;
margin-top: 3px;
margin-right: 3px;
position: absolute;
z-index: 1;
border-radius: 5px;
opacity: .25;
}
#lowerbody {
width: 99%;
height: 49%;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
margin-top: 432px;
margin-bottom: 2px;
border-radius: 5px;
background-color: #F5F5F5;
position: absolute;
}
body {
background-image: url("http://www.freewebheaders.com/wordpress/wp-content/gallery/love-emotions/i-love-you-nice-quotes-website-header.jpg");
background-repeat: repeat;
background-attachment: fixed;
}
ul {
margin:0;
padding:0;
}
li {
display: inline;
top: -35px;
}
#navbar {
color: #F8F8F2;
font-family: Arial Black;
margin: auto;
text-align: center;
line-height: 100px;
}
<div class="Header">
<div id="navbar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div class="MidBody">
<div id="leftbody"></div>
<div id="rightbody"></div>
<div id="lowerbody"></div>
</div>
<div class="footer"></div>
I am making a hearer using HTML and CSS. I am using li tags to create menu and a tag inside that. I am trying to apply some CSS properties to a tag however it is not working. Please help, below is my code:
<!doctype HTML>
<html>
<head>
<title>Aesthetic</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div class='header'>
<div class='name'>Aesthetic</div>
<div class='menu'>
<ul>
<li style="background:#c3c3c3;color:#000000;"><a href='#'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
.header{
background-color: #000000;
position: fixed;
top: 0px;
left: 0px;
width:100%;
height: 100px;
}
.name{
color: #ffffff;
font-weight: bold;
font-size: 50px;
font-style: italic;
float: left;
position: relative;
top: 15px;
width: 300px;
left: 10%
}
.menu{
float: right;
font-size: 20px;
position: relative;
top: 20px;
width: 300px;
right: 10%;
}
.menu ul li{
display: inline;
margin-left: 20px;
width: 40px;
height: 60%;
color: #ffffff;
};
.menu ul li a{
text-decoration: none;
color: #ffffff;
}
You have a stray semi-colon (;)
.menu ul li{
...
}; /* <-- HERE */
Which is causing the following block to be ignored.
Working example:
.header {
background-color: #000000;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
}
.name {
color: #ffffff;
font-weight: bold;
font-size: 50px;
font-style: italic;
float: left;
position: relative;
top: 15px;
width: 300px;
left: 10%
}
.menu {
float: right;
font-size: 20px;
position: relative;
top: 20px;
width: 300px;
right: 10%;
}
.menu ul li {
display: inline;
margin-left: 20px;
width: 40px;
height: 60%;
color: #ffffff;
}
.menu ul li a {
text-decoration: none;
color: #ffffff;
}
<div class='header'>
<div class='name'>Aesthetic</div>
<div class='menu'>
<ul>
<li style="background:#c3c3c3;color:#000000;"><a href='#'>Home</a>
</li>
<li><a href='#'>Services</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</div>
</div>
I would like to have the div story at the bottom of the picture(mainMedia) but i also want the about div to be on top of the photo.
When i try do it the story div goes to the top because the mainMedia dive is position:absolute but i have to keep it that to keep the about dive on top of it... any ideas?
Could you please help?
Thanks a lot!
HTML
<html>
<head>
<title> Beta</title>
<!-- css links -->
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="gigantic">
<div class="main">
<div class="twitterProfilePicture">
<img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png">
</div>
<div class="push">
<div class="mainMedia">
<img src="http://blog.sunsafaris.com/wp-content/uploads/2013/02/dune-king-lion.jpg">
<div class="about">
<p><span>Mashable</span></br>3 Hours ago</p>
</div>
</div>
</div>
<div class="Story">
<div class="heading">
</div>
<div class="text">
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body
{
margin: 0;
background-color: rgb(233,234,237);
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}
p
{
margin: 0;
}
.gigantic
{
width: 800px;
height: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
margin-top: 40px;
/*background-color: #fff;*/
}
.main
{
width: 700px;
height: 400px;
/*background-color: #000;*/
margin-right: auto;
margin-left: auto;
padding: 30px;
}
.twitterProfilePicture
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.twitterProfilePicture img
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.mainMedia
{
width: 630px;
height: auto;
/*background-color: #fff;*/
float: right;
border-radius: 4px;
position: relative;
margin-bottom: 10px;
}
.mainMedia img
{
width: 630px;
height: auto;
position: relative;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.about
{
position: absolute;
/*background-color: #000;*/
overflow: hidden;
height: 35px;
position: absolute;
top: 7px;
left: 7px;
font-size: 12px;
color: rgb(94,118,171);
}
.about span
{
color: #385874;
font-size: 16px;
}
.story
{
width: 630px;
height: 300px;
background-color: #fff;
position: absolute;
margin-left: 70px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: static;
bottom: 0;
}
Here's my take on what you're trying to achieve:
I put a fiddle here for you.
What you need to do is stick the story div inside the mainMedia div. You also have your css referencing ".story" when it should have been ".Story".
HTML:
<div class="gigantic">
<div class="main">
<div class="twitterProfilePicture">
<img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png">
</div>
<div class="push">
<div class="mainMedia">
<img src="http://blog.sunsafaris.com/wp-content/uploads/2013/02/dune-king-lion.jpg"/>
<div class="about">
<p><span>Mashable</span></br>3 Hours ago</p>
</div>
<div class="Story">
<div class="heading">Heading</div>
<div class="text">Text Story here</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body
{
margin: 0;
background-color: rgb(233,234,237);
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
}
p
{
margin: 0;
}
.gigantic
{
width: 800px;
height: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
margin-top: 40px;
/*background-color: #fff;*/
}
.main
{
width: 700px;
height: 400px;
/*background-color: #000;*/
margin-right: auto;
margin-left: auto;
padding: 30px;
}
.twitterProfilePicture
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.twitterProfilePicture img
{
width: 55px;
height: 55px;
border-radius: 3px;
/*background-color: #fff;*/
position: relative;
float: left;
}
.mainMedia
{
width: 630px;
height: auto;
/*background-color: #fff;*/
float: right;
border-radius: 4px;
position: relative;
margin-bottom: 10px;
}
.mainMedia img
{
width: 630px;
height: auto;
position: relative;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.about
{
position: absolute;
/*background-color: #000;*/
overflow: hidden;
height: 35px;
position: absolute;
top: 7px;
left: 7px;
font-size: 12px;
color: rgb(94,118,171);
}
.about span
{
color: #385874;
font-size: 16px;
}
.Story
{
background-color: black;
opacity:0.5;
position: absolute;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
bottom: 3px;
color:white;
width:630px; /*I made this the same as your mainMedia*/
}
I hope that helps.