I'm racking my brain over here, trying to find a way for my divs to stay together when page re-sizing happens. (I made all the colored lines on the page as divs, except for the two vertical and the long horizontal on bottom. That's part of a border). Also for the Title/Menu/Rest-of-the-page to stay cohesive.
A step-by-step would be very appreciated, as I'm kinda new to html and css, and my site is live. You can check it out for hands-on (instead of combing through the code/css I pasted) at http://www.yamatat.com
I'm trying to make the default size at 1366 x 768, as that's that size has the most global share right now.
Here's my html:
<title>You And Me And Thoughts And Talk with Doug Culp</title>
</head>
<div class="page-title-container">
<div id="orangeone"></div>
<div id="blueone"></div>
<div class="page-title">YOU AND ME AND THOUGHTS AND TALK WITH DOUG CULP</div>
<div id="orangetwo"></div>
<div id="bluetwo"></div>
<div id="bluethree"></div>
<div id="bluefour"></div>
<div id="bluefive"></div>
<nav>
<a id="home" class="menu" href="http://www.yamatat.com/index.html">HOME</a>
<a id="podcast" class="menu" href="http://www.yamatat.com/podcast.html">PODCAST</a>
<a id="media" class="menu" href="http://www.yamatat.com/media.html">MEDIA</a>
<a id="blog" class="menu" href="http://www.yamatat.com/blog.html">BLOG</a>
<a id="shows" class="menu" href="http://www.yamatat.com/shows.html">SHOWS</a>
</nav>
</div>
<body>
<h1 class="home_news"><span>NEWS STUFF//</span></h1>
<div id="underline_news"></div>
<div id="news"><span id="news_date">12/24/2013</span>
<p>It's been a wild ride so far. I'm writing this before the site goes live. You guys don't even know!! I learned how to make my own page so that I could make it and put it out for you guys, the listeners. The YAMATATers. Scalloped, baked, french
fried. Any way you want it, THAT's the way you need it. It's 5:20 am. I should really get to bed. Merry Christmas Eve everyone!!</p>
</div>
<a class="twitter-timeline" width="400" height="450" data-dnt="true" href="https://twitter.com/dougathan" data-widget-id="416479074542817280">Tweets by #dougathan</a>
<script>
! function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
</body>
</html>
And here's my css:
.page-title-container {
min-width: 85.375em;
}
h1 {
font-size: 60px;
color: #00BFFF;
text-align: center;
border-width: 10px;
border-radius: 6px;
margin-left: 45px;
margin-right: 45px;
font-family: 'Dosis', sans-serif;
padding-bottom: 0px;
margin-top: -20px;
}
.page-title {
font-size: 60px;
color: #00BFFF;
text-align: center;
border-width: 10px;
border-radius: 6px;
margin-left: 238px;
margin-right: 0px;
font-family: 'Dosis', sans-serif;
padding-bottom: -10px;
padding-top: 25px;
margin-top: -64px;
border-style: solid solid solid solid;
border-color: orange;
width: 1410px;
float: left;
font-weight: bold;
line-height: 55px;
}
a.menu:hover {
color: orange;
}
a:hover {
color: orange;
}
a:hover .body_link {
color: orange;
text-decoration: none;
}
#orangeone {
height: 10px;
width: 255px;
border-radius: 6px;
background-color: orange;
float: left;
margin-left: -8px;
margin-top: -15px;
position: relative;
}
#orangetwo {
height: 10px;
width: 255px;
border-radius: 6px;
background-color: orange;
float: right;
margin-right: 0px;
margin-top: -61px;
position: relative;
}
#orangethree {
height: 62px;
width: 10px;
background-color: orange;
float: left;
margin-left: -5px;
margin-top: 0px;
border-radius: 6px;
position: relative;
}
#orangefour {
height: 62px;
width: 10px;
background-color: orange;
float: right;
margin-right: 0px;
margin-top: 0px;
border-radius: 6px;
position: relative;
}
#orangefive {
height: 10px;
width: 1423px;
background-color: orange;
float: left;
margin-left: 240px;
margin-top: 0px;
border-radius: 6px;
position: relative;
}
#blueone {
height: 10px;
width: 240px;
background-color: #00bfff;
border-radius: 6px;
margin-left: -8px;
margin-top: 15px;
position: relative;
}
#bluetwo {
height: 10px;
width: 245px;
background-color: #00bfff;
border-radius: 6px;
margin-right: 0px;
margin-top: -46px;
float: right;
position: relative;
}
#bluethree {
height: 100px;
width: 10px;
background-color: #00bfff;
float: left;
margin-left: 222px;
margin-top: -40px;
border-radius: 6px;
position: relative;
}
#bluefour {
height: 100px;
width: 10px;
background-color: #00bfff;
float: right;
margin-right: 235px;
margin-top: -40px;
border-radius: 6px;
position: relative;
}
#bluefive {
height: 10px;
width: 1460px;
background-color: #00bfff;
float: center;
margin-left: 223px;
border-radius: 6px;
margin-top: 87px;
position: relative;
}
a.menu {
text-decoration: none;
float: top;
font-size: 46px;
color: black;
position: absolute;
font-family: 'Dosis', sans-serif;
margin-top: 0px;
}
#home {
margin-top: -66px;
margin-left: 400px;
}
#podcast {
margin-top: -66px;
margin-left: 600px;
}
#media {
margin-top: -66px;
margin-left: 890px;
}
#blog {
margin-top: -66px;
margin-left: 1125px;
}
#shows {
margin-top: -66px;
margin-left: 1350px;
}
.home_news, .home_pod {
font-family: Tahoma;
font-size: 55px;
color: black;
margin-top: 25px;
border-bottom: solid 10px black;
text-align: left;
display: inline;
border-radius: 0px;
position: relative;
margin-left: 40px;
}
.home_news span {
position: relative;
top: 12px;
}
.home_pod span {
position: relative;
top: 12px;
}
#news_date {
float: left;
font-weight: bold;
font-size: 30px;
margin-top: -20px;
margin-left: 0px;
}
#news {
float: left;
font-size: 24px;
margin-left: 40px;
margin-top: 105px;
width: 650px;
white-space: normal;
word-wrap: break-word;
}
.home_pod {
position: relative;
top: 12px;
font-family: Tahoma;
font-size: 55px;
color: black;
text-align: left;
margin-left: 40px;
}
#pod_date {
font-weight: bold;
font-size: 30px;
}
#pod {
font-size: 24px;
margin-top: 105px;
width: 650px;
white-space: normal;
word-wrap: break-word;
margin-left: 45px;
}
.twitter-timeline {
float: right;
margin-right: 10px;
margin-top: 25px;
}
a#Eegg_1 {
float: left;
margin-left: 35px;
margin-top: -110px;
}
#Eegg_1_expl {
float: left;
color: black;
display: block;
margin-top: 155px;
margin-left: -287px;
font-size: 18px;
}
a#youtube_link {
float: right;
margin-right: 210px;
margin-top: -5px;
}
a:hover #youtube_small {
float: right;
}
#bloggy_head {
float: left;
text-decoration: none;
margin-left: 800px;
margin-top: 50px;
}
#bloggy_doit {
float: left;
font-family: Courier;
font-size: 70px;
margin-left: 745px;
margin-top: 50px;
font-weight: bold;
}
.body_link {
color: black;
text-decoration: none;
}
.home_shows {
font-family: Tahoma;
font-size: 55px;
color: black;
margin-top: 25px;
float: left;
}
#underline_shows {
height: 10px;
width: 275px;
background-color: black;
float: left;
margin-left: -323px;
margin-top: 85px;
}
#show_calendar {
float: left;
font-size: 24px;
margin-left: -320px;
margin-top: 105px;
width: 650px;
white-space: normal;
word-wrap: break-word;
}
You could do this much simpler with a bookend design using images.
For example:
[Bookend Left Image][Title + Nav Div with flexible width and background][Bookend Right Image]
Related
For my site I want to show some products on my site and when you hover over these products, there should be more information. Currently the design for the product card is there. I have 2 questions that I cannot get to work.
I cannot get the shadow box around the whole div when I hover around it. Have tried to add a height to my div but that messed up the layout of my other divs. What am I doing wrong?
Also the border of my div goes through my button (at least the link I have styled as a button). How can I fix this?
.home-products {
width: auto;
height: 250px;
}
.product-image-home {
height: 200px;
}
.product-grid {
position: relative;
float: left;
margin-left: 3px;
margin-right: 3px;
text-align: center;
width: 225px;
}
.product-grid h3 {
margin: 0;
text-align: center;
margin-bottom: 5px;
font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}
.product-overlay-button {
background: #85bf31;
height: 550px;
border: none;
border-radius: 2px;
color: #fff;
font-weight: bold;
font-size: 14px;
padding: 0.6em 2em;
margin-top: 5px;
text-decoration: none;
text-align: center;
}
.product-grid:hover {}
.product-info {
display: none;
position: absolute;
width: 225px;
position: absolute;
text-align: center;
float: left;
margin-left: 3px;
margin-right: 3px;
}
.product-info p {
margin-left: 7px;
margin-right: 7px;
}
.product-grid:hover .product-info {
display: block;
}
.product-grid:hover {
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
<div class="home-products">
<div class="product-grid">
<img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
<h3>Bloodrage</h3>
<span>€38.90</span>
<div class="product-info">
<p>Some information about the product!</p>
Vergelijk prijzen
</div>
</div>
</div>
A lot of your issues come from .product-info having position: absolute;. So remove that (both of them, you have position: absolute; in there twice); then you can add some padding-bottom to .product-grid to "fit" your button inside the div.
Check out what I did here:
.home-products {
width: auto;
height: 250px;
}
.product-image-home {
height: 200px;
}
.product-grid {
position: relative;
float: left;
margin-left: 3px;
margin-right: 3px;
text-align: center;
width: 225px;
padding-bottom: 15px;
}
.product-grid h3 {
margin: 0;
text-align: center;
margin-bottom: 5px;
font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}
.product-overlay-button {
background: #85bf31;
height: 550px;
border: none;
border-radius: 2px;
color: #fff;
font-weight: bold;
font-size: 14px;
padding: 0.6em 2em;
margin-top: 5px;
text-decoration: none;
text-align: center;
}
.product-grid:hover {}
.product-info {
display: none;
width: 225px;
text-align: center;
float: left;
margin-left: 3px;
margin-right: 3px;
}
.product-info p {
margin-left: 7px;
margin-right: 7px;
}
.product-grid:hover .product-info {
display: block;
}
.product-grid:hover {
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
<div class="home-products">
<div class="product-grid">
<img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
<h3>Bloodrage</h3>
<span>€38.90</span>
<div class="product-info">
<p>Some information about the product</p>
Vergelijk prijzen
</div>
</div>
</div>
You can use shadow settings similar to 0px 0px 10px 4px (i.e. the first and second values are zero, so the shadow will be spread equally on all sides according to the third and fourth values):
.home-products {
width: auto;
height: 250px;
}
.product-image-home {
height: 200px;
}
.product-grid {
position: relative;
float: left;
margin-left: 3px;
margin-right: 3px;
text-align: center;
width: 225px;
}
.product-grid h3 {
margin: 0;
text-align: center;
margin-bottom: 5px;
font-size: 20px "Open Sans", Helvetica, Arial, sans-serif;
}
.product-overlay-button {
background: #85bf31;
height: 550px;
border: none;
border-radius: 2px;
color: #fff;
font-weight: bold;
font-size: 14px;
padding: 0.6em 2em;
margin-top: 5px;
text-decoration: none;
text-align: center;
}
.product-grid:hover {}
.product-info {
display: none;
position: absolute;
width: 225px;
position: absolute;
text-align: center;
float: left;
margin-left: 3px;
margin-right: 3px;
}
.product-info p {
margin-left: 7px;
margin-right: 7px;
}
.product-grid:hover .product-info {
display: block;
}
.product-grid:hover {
box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.2);
z-index: 1;
}
<div class="home-products">
<div class="product-grid">
<img class="product-image-home" src="https://cardpile.nl/wp-content/uploads/2021/04/blood-rage-460x460.jpg" alt="Homepage">
<h3>Bloodrage</h3>
<span>€38.90</span>
<div class="product-info">
<p>Some information about the product!</p>
Vergelijk prijzen
</div>
</div>
</div>
Here is the demo code
<div class="container">
<div class="header">
<img class="logo" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"/>
<span class="text">Title Here</span>
</div>
</div>
I am trying to put the "Title" in center and then place the logo, next to it in the left side of it.
The title name would be dynamic so it should always be at the center irrespective of length
Try
this demo
.container{
padding: 15px 15px 20px 15px;
height: 247px;
width: 780px;
border-radius: 5px;
margin-bottom: 30px;
background-color: #2D343D;
}
.logo {
width: 55px;
vertical-align:middle;
}
.header {
height: 56px;
color: #FFFFFF;
margin-top: 15px;
font-size: 29.98px;
letter-spacing: 0.43px;
line-height: 40px;
text-align: center;
position: relative;
}
Change CSS
.container{
padding: 15px 15px 20px 15px;
height: 247px;
width: 780px;
border-radius: 5px;
margin-bottom: 30px;
background-color: #2D343D;
}
.logo {
width: 55px;
float:left;
vertical-align:middle;
}
.header {
height: 56px;
color: #FFFFFF;
margin-top: 15px;
font-size: 29.98px;
letter-spacing: 0.43px;
line-height: 40px;
text-align:center;
position: relative;
}
http://jsfiddle.net/d902fzyn/
Is this how you want it to be?
.container {
padding: 15px 15px 20px 15px;
height: 247px;
width: 780px;
border-radius: 5px;
margin-bottom: 30px;
background-color: #2D343D;
position: relative;
}
.logo {
width: 55px;
vertical-align: bottom;
}
.header {
height: 56px;
color: #FFFFFF;
margin-top: 15px;
font-size: 29.98px;
letter-spacing: 0.43px;
line-height: 40px;
text-align: center;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
<div class="container">
<div class="header">
<img class="logo" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" />
<span class="text">Title Here</span>
</div>
</div>
I'm trying to make it so that when I user resizes there window it wont move anything on the page, and it wont resize anything. But I still wont the site to look the same on different screen sizes. Because right now the website moves my image and my buttons. The buttons also change size.
* {
box-sizing: border-box; }
#wrapper {
margin-left:auto;
margin-right:auto;
width:100%;
height: 100%;
}
body {
background-color: black;
font-family: "Source Sans Pro", sans-serif;
text-align: center;
color: #ccc;
}
div {
height: 100%;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
h3 {
position: absolute;
font-size: 100px;
font-weight: 100;
color: white;
margin-top: 70px;
margin-left: 80px;
}
img {
margin-top: 230px;
margin-right: 0px;
}
.home {
position: absolute;
border: 2px solid #CCCCCC;
text-align: center;
color: #ccc;
font-size: 26px;
line-height: 60px;
width: 10%;
height: 60px;
margin-top: 180px;
margin-left: 500px;
}
.about {
position: absolute;
border: 2px solid #CCCCCC;
text-align: center;
color: #ccc;
font-size: 26px;
line-height: 60px;
width: 10%;
height: 60px;
margin-top: 180px;
margin-left: 750px;
}
.projects {
position: absolute;
border: 2px solid #CCCCCC;
text-align: center;
color: #ccc;
line-height: 60px;
width: 10%;
height: 60px;
font-size: 26px;
margin-top: 180px;
margin-left: 1000px;
}
.contact {
position: absolute;
border: 2px solid #CCCCCC;
text-align: center;
color: #ccc;
line-height: 60px;
font-size: 26px;
width: 10%;
height: 60px;
margin-top: 180px;
margin-left: 1250px;
}
.home:hover{
border-color: #0091FF;
color: #0091FF;
}
.about:hover{
border-color: #0091FF;
color: #0091FF;
}
.projects:hover{
border-color: #0091FF;
color: #0091FF;
}
.contact:hover{
border-color: #0091FF;
color: #0091FF;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="background.js"></script>
<title>Home</title>
</head>
<body>
<div id="wrapper">
<canvas class='connecting-dots'></canvas>
<h3>Title</h3>
<div class = "home">Home</div>
<div class = "about">About</div>
<div class = "projects">Projects</div>
<div class = "contact">Contact</div>
<img src="astronaut.png">
</div>
</body>
</html>
Set min-width: and min-height: on your elements. That will prevent them from getting any smaller and then you can do max-width and max-height to prevent them from growing. Also, change it from width:10%; to a solid/absolute number. This is saying 10% of whatever screen it is displayed on.
http://codepen.io/Squeakasaur/pen/OpwWqG
* {
box-sizing: border-box; }
#wrapper {
margin-left:auto;
margin-right:auto;
width:100%;
height: 100%;
}
body {
background-color: black;
font-family: "Source Sans Pro", sans-serif;
text-align: center;
color: #ccc;
}
div {
height: 100%;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
h3 {
position: absolute;
font-size: 100px;
font-weight: 100;
color: white;
margin-top: 70px;
margin-left: 80px;
}
img {
margin-top: 230px;
margin-right: 0px;
}
.home {
position: absolute;
border: 2px solid #CCCCCC;
text-align: center;
color: #ccc;
font-size: 26px;
line-height: 60px;
width: 150px;
height: 60px;
margin-top: 180px;
margin-left: 500px;
}
.about {
position: absolute;
border: 2px solid #CCCCCC;
text-align: center;
color: #ccc;
font-size: 26px;
line-height: 60px;
width: 150px;
height: 60px;
margin-top: 180px;
margin-left: 750px;
}
.projects {
position: absolute;
border: 2px solid #CCCCCC;
min-width: ;
text-align: center;
color: #ccc;
line-height: 60px;
width: 150px;
height: 60px;
font-size: 26px;
margin-top: 180px;
margin-left: 1000px;
}
.contact {
position: absolute;
border: 2px solid #CCCCCC;
text-align: center;
color: #ccc;
line-height: 60px;
font-size: 26px;
width: 150px;
height: 60px;
margin-top: 180px;
margin-left: 1250px;
}
.home:hover{
border-color: #0091FF;
color: #0091FF;
}
.about:hover{
border-color: #0091FF;
color: #0091FF;
}
.projects:hover{
border-color: #0091FF;
color: #0091FF;
}
.contact:hover{
border-color: #0091FF;
color: #0091FF;
}
I am not much of a web designer, more of a backend developer. However, the frontend designer left me with a problem I am facing. I have a login and register links and navigation links on the right. I want these links to line up and display in the same navigation bar. At the moment, my links are distorted. They appear in the middle of the page I am dealing with. I want the login/register links to align to the left side of the navigation bar and I also want the right navigation tp sit within the main navigation. Neither of these things are happening (screenshot provided). how do I get th e user links to align to the left of the top navigation bar an the other links to stay to the right?
Here is a link to my screenshot: https://s30.postimg.org/tlkvrcv5t/Screen_Shot_2017_01_05_at_11_11_55_AM.png
and here is my code:
app.blade.php:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="{!! asset('css/stylesheet.css') !!}" />
</head>
<body>
<div class="mainheader">
<div class="subcontainer">
<div class="subcontainer-left">
<div class="subcontainter-title">Cryptoflip</div>
#if (Auth::guest())
<div class="subcontainer-button">
Login
</div>
<div class="subcontainer-button">
Register
</div>
#else
<div class="subcontainer-button">
<a href="/user/{{$user->name}}"Your Profile</a>
</div>
<div class="subcontainer-button">
Logout
</div>
#endif
</div>
</div>
<div class="subcontainer-right noselect">
<div class="subcontainer-button">
Support
</div>
<div class="subcontainer-button">
<a>Provably Fair</a>
</div>
<div class="subcontainer-button">
<a>Dice</a>
</div>
<div class="subcontainer-button bt-active">
Coinflip
</div>
</div>
</div>
<!-- Decoration -->
<!--<div style="height: 10px; width: 200px; margin: auto; margin-top: -50px; background-color: gold"></div>-->
</div>
<div class="maincontainer">
#yield('content')
</div>
</body>
</html>
stylesheet.css;
#font-face {
font-family: NexaBold;
src: url(NexaBold.otf); }
#font-face {
font-family: NexaLight;
src: url(NexaLight.otf); }
#font-face {
font-family: OpenSans;
src: url(OpenSans-Regular.ttf); }
body {
margin: 0;
background-color: #ecf0f1; }
.mainheader {
height: 75px;
font-family: NexaBold;
font-size: 28px;
line-height: 75px;
text-align: center;
vertical-align: middle;
background-color: #dce0e1; }
.menu {
height: 40px; }
.subcontainer-left {
height: 75px;
float: left; }
.subcontainer {
height: 75px;
margin: auto; }
.subcontainer-right {
height: 75px;
width: auto;
float: right; }
.subcontainer-button {
height: 75px;
width: 100px;
float: right;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 75px;
font-family: OpenSans;
font-size: 14px; }
.subcontainer-button a {
text-decoration: none;
color: black; }
.subcontainer-button a:visited {
text-decoration: none;
color: black; }
.subcontainer-button a:active {
color: black; }
.subcontainer-button a:hover {
border-bottom: 3px solid gray;
cursor: pointer; }
.subcontainer-title {
height: 75px;
float: left;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 75px;
font-family: OpenSans;
font-size: 14px; }
.bt-active a {
border-bottom: 3px solid gold; }
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.maincontainer {
height: 700px; }
.textheader {
height: 180px;
text-align: center;
vertical-align: middle;
line-height: 180px;
font-family: NexaLight;
font-size: 48px; }
.ongoing-header {
width: 700px;
margin: auto;
height: 70px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background-color: #bcc0c1; }
.subheader {
height: 70px;
width: 260px;
font-family: OpenSans;
font-weight: bold;
font-size: 22px;
text-align: center;
line-height: 70px;
vertical-align: middle;
float: left; }
.subheader-menu {
height: 36px;
background-color: #ccd0d1; }
.button {
height: 36px;
width: auto;
margin: auto;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 36px;
font-family: OpenSans;
cursor: pointer;
border-radius: 4px;
transition: 0.3s; }
.button:hover {
background-color: #ecf0f1; }
.subheader-right {
float: right;
padding-top: 16px;
width: 260px;
margin: auto;
margin-right: 24px; }
.ongoing-container {
width: 700px;
margin: auto; }
.ongoing-game {
height: 40px;
line-height: 40px;
vertical-align: middle;
text-align: center;
cursor: pointer;
font-family: OpenSans;
transition: 0.3s; }
.ongoing-game:nth-child(even):hover {
background-color: #f3f9fa; }
.ongoing-game:nth-child(odd):hover {
background-color: #f3f9fa; }
.ongoing-game:nth-child(even) {
background-color: #d3d9da; }
.ongoing-game:nth-child(odd) {
background-color: #dce0e1; }
.iconholder {
height: 20px;
width: 20px;
float: left;
margin-top: 4px;
margin-right: 4px; }
#username {
float: left;
height: 40px;
width: 220px;
text-align: left;
padding-left: 24px; }
#btcamount {
float: left;
height: 40px;
width: 220px;
text-align: right;
padding-right: 24px; }
#ongoing {
height: 40px;
width: 212px;
float: left; }
.bitcoinlogo {
height: 15px; }
.helpcontainer {
height: 600px;
width: 500px;
margin: auto;
font-family: OpenSans; }
.helpform {
margin-top: 20px;
height: 400px;
font-size: 12px; }
.helpform textarea {
resize: none;
font-family: OpenSans; }
#issuetext {
height: 100px;
width: 480px; }
#emailtext {
height: 18px;
width: 220px;
font-family: OpenSans; }
.submitbutton {
height: 40px;
width: 180px;
float: none;
margin: auto;
margin-top: 20px;
border: 1px solid gray;
background-color: white;
text-align: center;
vertical-align: middle;
line-height: 40px;
font-size: 14px;
cursor: pointer;
border-radius: 3px;
transition: 0.2s background-color; }
.submitbutton:hover {
background-color: lightgrey; }
/*# sourceMappingURL=stylesheet.css.map */
EDIT:Updated code.
Get rid of width on .subcontainer-left. Then give a width to .subcontainer-button.
.subcontainer-left {
height: 75px;
/* width: 200px; */
float: left;
}
.subcontainer-button {
height: 75px;
width: 100px;
...
}
You need to place "Cryptoflip" inside a div, for example "subcontainer-title":
<div class="subcontainer">
<div class="subcontainer-left">
<div class="subcontainer-title">Cryptoflip</div>
<div class="subcontainer-button">
Login
</div>
<div class="subcontainer-button">
Register
</div>
</div>
</div>
Then add the style for it copying ".subcontainer-button" and modify the content to match what you want it to look (float: left in first place):
.subcontainer-title {
height: 75px;
width: auto;
float: left;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 75px;
font-family: OpenSans;
font-size: 14px;
}
And change the width of subcontainer-left:
.subcontainer-left {
height: 75px;
width: 400px;
float: left;
}
Hey I'm currently working on a responsive web design for school and it is a disaster. Currently setting up the website before making it responsive and the text and images aren't going where I need them to go. This is my coding for css so far:
body{
background-color: #cd76dd;
font-family: 'Raspoutine Medium';
color:white;
}
#page-wrap{
width: 950px;
margin: 0 auto;
}
#containerIntro h1{
font-family: 'AlphaClouds';
background-color: #7ac8ff;
color:white;
font-size: 45px;
width: 100%;
padding-bottom: 10px;
position: static;
bottom: 0;
left: 0;
}
#containerIntro p{
font-family: 'AlphaClouds';
background-color: #7ac8ff;
color:white;
text-align: left;
font-size: 70px;
width: 100%;
}
h1: hover{
text-shadow: 0px 0px 20px white;
}
h1 p: hover{
text-shadow: 0px 0px 20px white;
}
h1{
position: absolute;
left: 0;
bottom: 0;
}
p{
background-color:#ffa1ff;
color:white;
text-align: left;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
font-size: 17px;
width: 450px;
height: 100%;
}
h2{
background-color: #ffa1ff;
color:white;
text-align: left;
padding-top: 20px;
padding-left: 10px;
font-size: 20px;
border: 2px #ffa1ff solid;
width: 450px;
height: 100%;
}
h3{
background-color: #ffa1ff;
color:white;
text-align: left;
font-size: 20px;
padding-left: 10px;
border: 2px #ffa1ff solid;
width: 450px;
height: 100%;
}
.gummy{
float: right;
}
.bubble{
float: right;
position: relative; right: -130px;
padding-top: 15px;
}
.pink{
float: left;
position: relative; top: -145px;
}
.blue{
float: right;
position: relative; top: -145px;
}
p.select{
background-color: #5d75ed;
text-align: right;
padding-bottom:10px;
padding-top: 10px;
font-size: 17px;
width: 170px;
float: right;
margin-top: -850px;
}
p.archives{
background-color: #f9e075;
text-align: right;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
font-size: 17px;
width: 170px;
float: right;
margin-top: -600px;
}
p.resources{
background-color: #ef5b66;
padding-bottom: 10px;
padding-top: 10px;
font-size: 17px;
width: 170px;
float:right;
margin-top: -500px;
}
div{
height: 287;
width: 198;
}
mock up for what it will look like
Inside of #containerIntro h1, you don't need to add position: static due to that being already set by default. Plus if an element is static, direction properties such as bottom, top, left, and right are completely ignored.
Try to use the property called clear and set it to both...
p {
clear: both;/*Element should have no other elements on the left and right side*/
}
clear:both; gets rid of floating objects on both the left and right sides of an element. I hope this helps!