I have a bourgeoning website http://rushycreekfarm.com.au/ with a central image that has two arrows either side to change slides. However, I'm not sure how to align the arrows vertically centre. The arrows have a container (in red) and the entire slideshow has a container (in blue). I would like the arrows to be half way up the blue container.
<!DOCTYPE html>
<html>
<head>
<title>Rushy Creek Farm</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="details" class="header">765 Brockman Highway | 0438695434 |
tracyrob#wallworks.com.au
</div>
<div class="title">
<h1>RUSHY CREEK FARM</h1>
</div>
<div class="nav-bar">
HOME
ABOUT
<a href="https://www.stayz.com.au/accommodation/wa/south-
west/augusta/9189326">BOOK</a>
CONTACT
</div>
<div class="slideshow">
<div class="arrow-container">
<img id="arrow-left" class="arrow" src="./arrow-left.jpg">
</div>
<img id="main-image" src="./images/droneshot.jpg">
<div class="arrow-container">
<img id="arrow-right" class="arrow" src="./arrow-right.jpg">
</div>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
<html>
And here is the CSS:
.header {
font-family: garamond;
text-align: center;
height: 10px;
border-bottom: 1px solid rgb(220,220,220);
padding-bottom: 12px;
}
.title {
text-align: center;
letter-spacing: 2px;
}
body {
font-family: Georgia;
}
.nav-bar {
background-color: skyblue;
}
.nav-bar a {
cursor: pointer;
display: inline-block;
background-color: skyblue;
color: white;
text-decoration: none;
font-size: 25px;
padding: 16px 40px;
border-radius: 3px;
transition: 0.3s;
letter-spacing: 2px;
}
.nav-bar a:hover {
background-color: rgb(57,97,140);
}
.slideshow {
background-color: blue;
text-align: center;*/
}
#main-image {
display:inline-block;
width: 60%;
}
.arrow {
cursor: pointer;
display: inline-block;
background-color: gray;
transition: 0.3s;
}
#arrow-left {
float: right;
}
#arrow-right {
float: left;
}
.arrow-container {
background-color: red;
display: inline-block;
width: 19%;
}
.arrow:hover {
background-color: rgb(220,220,220);
}
You can use flexbox:
.slideshow {
display: flex;
align-items: center;
}
Since flexbox removes the space between the elements that display: inline-block adds, you can now use width: 20% for the arrow containers:
.arrow-container {
width: 20%;
}
You can use absolute positioning and a translation transform.
.slideshow {
background-color: blue;
position: relative; // new
text-align: center;
}
.arrow-container {
background-color: red;
display: inline-block;
position: absolute; // new
top: 50%; // new
transform: translateY(-50%); // new
width: 19%;
}
.arrow-container.left {
left: 0; // new
}
.arrow-container.right {
right: 0; // new
}
You can use absolute positioning to position the arrows vertically:
.arrow-container {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Related
1 2 I am trying to make the Google Search Page in HTML & CSS. However, when I try to center the Google Logo, the image re-adjusts itself when the device width is changed. I've been stuck in this section for quite a while now, and cannot seem to find any answers to my inquiry. Some assistance would be appreciated.
body {
width: 100%;
max-width: 100%;
background-color: #202124;
overflow: hidden;
}
.navbar {
display: flex;
float: right;
position: relative;
word-spacing: 11px;
padding-top: 13px;
padding-right: 129px;
}
.navbartxt a {
text-decoration: none;
color: white;
font-family: arial, sans-serif;
font-size: 13px;
}
.navbartxt a:hover {
text-decoration: underline;
}
.dots {
width: 16px;
position: absolute;
margin-left: 123px;
margin-top: 1px;
}
.pfp {
position: absolute;
border-radius: 100%;
margin-top: -7px;
margin-left: 163px;
}
.searchbox {
display: flex;
position: absolute;
}
.searchsections {
width: 100%;
max-width: 100%;
display: flex;
position: relative;
}
.Google {
position: absolute;
margin-top: 72px;
margin-left: 240px;
}
<nav>
<div class="navbar">
<div class="navbartxt">
Gmail
Images
</div>
<img class="dots" src="/CSS/CSS Images/9 dots.png" />
<img class="pfp" src="/CSS/CSS Images/MyPfpGoogle.png" />
</div>
</nav>
<section class="searchsections">
<div class="Google">
<img src="/CSS/CSS Images/Google Logo.png" />
</div>
</section>
Just replace your .Google class with this :-
.Google {
display: flex;
justify-content: center; /* for horizontal center */
align-items: center; /* For Vertical Center */
}
.Google > img {
display: block;
}
How it works learn Here
I've been attempting to get multiple buttons to align vertically and horizontally next to each other in the center of the page. This is what I am aiming for: aligned buttons
However, I have only either gotten the images to center, but then they are not horizontally aligned. Or, I have gotten them to align horizontally, but they are not centered. Here is the code I am using on the buttons.
//used to remove the transition item so that the image changes. This is necessary to show image transition on load.
$(".hoverImage").removeClass("transitionHoverImage")
//sets welcome text opacity to 0 so it can be faded in
$('.welcomeText').css("opacity", 0);
//wait a second before attempting to fade text in. Second parameter of "fadeTo" sets opacity to 1 (100%)
$('.welcomeText').delay(1400).fadeTo(800, 1);
$('.portfolioBtn').css("opacity", 0);
$('.portfolioBtn').delay(1400).fadeTo(800, 1);
$('.resumeBtn').css("opacity", 0);
$('.resumeBtn').delay(1400).fadeTo(800, 1);
body {
font-family: Oswald, Baloo, Calibri, sans-serif;
background: black url(../images/background.jpg) no-repeat center;
height: 3600px;
display: block;
margin-left: auto;
margin-right: auto;
}
.about {
display: block;
text-align: center;
background-color: #ffffff rgba(255, 255, 255, 0.5);
position: relative;
width: 904px;
padding: 33px 27px 34px;
z-index: 1;
}
.logo {
position: fixed;
left: .25em;
top: 3%;
height: 210px;
width: 150px;
z-index: 1;
}
/* you want to set up a transform, translate for this transform: translate (0, -100px); and */
.hoverImage {
position: relative;
z-index: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.transitionHoverImage {
transform: translate(0px, 200px);
}
.door {
transition: transform 1.5s ease-out;
}
.welcomeText {
position: relative;
top: 120px;
z-index: 1;
font-size: 7em;
color: white;
text-align: center;
}
.centerBtns {
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: -700px;
text-align: center;
width: 15%;
margin: 0 auto;
font-size: 2em;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
padding: 1.5em 2.8em;
z-index: 2;
}
.resumeBtn {
}
.portfolioBtn {}
/* why is this so finnicky?!?!?!?!?!?!?!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!???????????
/* dropdown menu code starts here */
/*this is the code for the revealed box and the dropshadow of box */
.dropdown-content {
display: none;
position: fixed;
right: 2em;
top:3%;
background-color:#343434;
min-width: 1em;
border-radius: 1em;
box-shadow: .25em 0em .5em #343434;
padding: 0em;
z-index: 1;
}
/* this is the highlight color when you hover over an item */
.dropdown-content a:hover {
background-color: dimgray;
}
/*w3 said I needed this code, so I put it in */
.dropdown:hover .dropdown-content{
display:block;
}
/*revealed dropdown style */
.dropdown-content a {
color: lightgray;
border-radius: 6px;
border-style: solid;
border-color: #343434;
background-color: #343434;
font-weight: bold;
text-align: center;
padding: .5em;
text-decoration: none;
display: block;
}
/*menu button for dropdown*/
.menu-button {
position: fixed;
right: 2em;
top:3%;
font-weight: bold;
font-size: 1em;
color: lightgray;
padding: 1em;
background-color: #343434;
border-color: #343434;
border-style: solid;
border-width: 2px;
border-radius: 6px;
z-index: 1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- favicon links-->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<title>DenneyDesign</title>
<!-- CSS Stylesheets -->
<link href="css/style.css" rel="stylesheet">
<ling href="css/animate.css" rel="stylesheet">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Baloo|Oswald" rel="stylesheet">
</head>
<body>
<!--Menu Bar-->
<div class="dropdown">
<button class="menu-button">MENU</button>
<div class="dropdown-content">
HOME
ABOUT
ARTWORK
RESUME
SOCIAL
</div>
</div>
<!--Logo-->
<div>
<img class ="logo" src="images/logo.png">
</div>
<!--Welcome Text-->
<div>
<header>
<h1 class='welcomeText'>WELCOME</h1>
</header>
<!--Hover Image-->
<img class="door hoverImage transitionHoverImage" src="images/door_slider.png">
</div>
<!--Buttons-->
<div>
<button class="centerBtns"><b>PORTFOLIO</b></button><button class="centerBtns resumeBtn"><b>RESUME</b></button>
</div>
<!--About-->
<div>
<header>
<h1><a name="about">ABOUT</a></h1>
</header>
</div>
</body>
<!--javascript-->
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</html>
Thanks for your help!
Flexbox does this easily. Use display: flex; justify-content: center; align-items: center; on the parent.
div {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
background: black;
}
<div>
<button>button</button>
<button>button</button>
</div>
Using flexbox is indeed the simplest solution, but just in case I re-arranged your CSS:
.centerBtns {
position: relative;
text-align: center;
color: black;
background-color: #fdc552;
border-radius: 1em;
border-color: #805300;
box-shadow: 0px 10px 15px black;
z-index: 2;
width: 40%;
font-size: 1.5em;
padding: 1.5em;
line-height: 3em;
}
<div>
<button class="centerBtns"><b>PORTFOLIO</button><button class="centerBtns resumeBtn">RESUME</b></button>
</div>
If you want both buttons to have the same width make sure the width % is large enough to contain the text. Or if not just remove the width property and tweak around with the last 3 properties to get the results you want.
There are some issues with the code you've provided, and I believe that may be making it difficult to isolate the problem.
A stripped down version of what you posted shows how this can be achieved with a combination of relative positioning and flexbox.
body {
height: 100vh;
background-size: auto auto;
background-color: red;
position: relative;
}
.nav {
border: solid 1px blue;
background: rgba(0,0,255,0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 750px;
display: flex;
align-items: center;
justify-content: center;
}
.nav__button {
font-size: 44px;
margin: 50px;
width: 250px;
padding: 30px 0;
}
<div class="nav">
<button class="nav__button">Portfolio</button>
<button class="nav__button">Resume</button>
</div>
Plunker mirror of the above here: http://plnkr.co/edit/LwJyRFFpSE9dj4KtCuw6
You can use FlexBox. If you have a few buttons, you can set the "justify-content" property as "center", and set a margin to each button. On the other hand, if you have many buttons, you can set the "justify-content" as "space-around", and remove the margin.
https://jsfiddle.net/pablodarde/nhxukt5c/
HTML
<div class='buttons'>
<button>
<b>PORTFOLIO</b>
</button>
<button>
<b>RESUME</b>
</button>
</div>
CSS
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.buttons button {
display: inline-flex;
margin: 5px;
}
Here is the outcome
What I want to achieve are
A gray circle surrounding the '<' with the letter in the center
It and 'untitled' aligns vertically to the center
However despite setting the width and height to the same size, the 'circle' still ends up in an oval shape.
The use of flex's align-items: center; also fails to achieve the alignment.
How can I fix the css? Here is a link to the sample code
html
<div class='flex-container'>
<div class='arrow-container'>
<a class='btn-icon' href='#'>
<span class='square-btn icon icon-back'></span>
</a>
</div>
<div class=title>
<a href='#'>Untitled
</a>
</div>
</div>
css
.flex-container {
display: flex;
align-items: center;
}
.icon {
font-size: 50px;
}
.icon-back::before {
content: '<';
}
.title {
margin-left: 5px;
font-size: 50px;
}
.square-btn {
height: 50px;
width: 50px;
}
.btn-icon {
padding: 5px;
border-radius: 50%;
background-color: gray;
text-decoration: none;
}
This seems to work. No changes to HTML.
.flex-container {
display: flex;
align-items: center;
}
.icon {
font-size: 50px;
}
.icon-back::before {
content: '<';
}
.title {
margin-left: 5px;
font-size: 50px;
}
.square-btn {
height: 50px;
width: 50px;
border-radius: 50%; /* new */
background-color: gray; /* new */
display: flex; /* new */
align-items: center; /* new; align arrow vertically */
justify-content: center; /* new; align arrow horizontally */
}
.btn-icon {
/* padding: 5px; <-- remove */
/* border-radius: 50%; <-- remove */
/* background-color: gray; <-- remove */
text-decoration: none;
}
<div class='flex-container'>
<div class='arrow-container'>
<a class='btn-icon' href='#'>
<span class='square-btn icon icon-back'></span>
</a>
</div>
<div class=title>
<a href='#'>Untitled
</a>
</div>
</div>
jsFiddle
This can be done with a single html element and pseude-elements. One neat advantage of making everything depend on the font-size is, that the icon scales proportionally with the font size of the link.
.link {
font-size: 50px;
margin-left: 1.1em;
}
.icon {
position: relative;
}
.icon-back::before {
content: '<';
position: absolute;
left: -.9em;
display: inline-block;
z-index: 2;
}
.icon-back::after {
content: '';
border-radius: 50%;
background-color: gray;
width: 1em;
height: 1em;
position: absolute;
top: 50%;
left: -1.1em;
/* Use translateX() and translateY()
if you care about old browsers */
transform: translate3d(0, -45%, 0);
}
<a class="link icon icon-back" href="#">Untitled</a>
Grouping classes makes things harder, also, use unicode in css content when it's not alpha-numerical text, try this:
<div class="flex-container">
<div class="arrow-container">
<a class="btn-icon" href="#">
<span class="icon-back"></span>
</a>
</div>
<div class="title">
<a href="#">Untitled
</a>
</div>
</div>
<style type="text/css">
.flex-container {
display: flex;
align-items: center;
}
.btn-icon {
font-size: 50px;
text-decoration: none;
}
.icon-back::before {
content: "\003c";
border-radius: 50%;
background-color: gray;
font-size: 40px;
height:40px;
width:40px;
vertical-align:middle;
display:inline-block;
margin-bottom:5px;
text-align:center;
}
.title {
margin-left: 5px;
font-size: 50px;
}
</style>
I'm having huge problems trying to arrage my DIVs, as I found that this thing is not as simple as it seems, just put a DIV and inside that DIV another 2 and you're done. The image bellow shows how I would want my page to be structured:
sur1.
surf2: surfleft, surfright. surf3. surf4 Where . means another line and , means that DIVs should be one next to another.
And also can't center that image vertical and horizontall middle on surfright from surf 2 parent.
#font-face
{
font-family: FONT;
src: url(Montserrat-Regular.ttf);
}
p.title1
{
font-size: 2.5em;
margin: 0;
}
p.title2
{
font-size: 3em;
}
.i1
{
height: 400px;
float: right;
display: block;
margin-top: 150px;
}
div.surf1
{
display: block;
background-image: url("surf1.jpg");
background-position: center;
background-size: cover;
height: 600px;
}
div.surf2 {
width: fit-content;
position:absolute;
background: #41c3ac;
height: 600px;
}
div.surfleft {
float:left;
display: block;
width: 45%;
padding-top: 80px;
height: 600px;
background: #8C78B1;
}
div.surfright {
float: right;
background: #ff6b57;
}
div.surf3
{
background: #ff6b57;
height: 600px;
}
div.surf4
{
background: #8C78B1;
height: 600px;
}
div.text1
{
padding-top: 100px;
color: white;
text-align:center;
font-size: 2.5em;
}
div.button
{
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236,229,167,0.2);
color: #e7dd84;
transition: 0.35s;
}
div.button:hover
{
background-color: white;
color: black;
border-color: white;
transition: 0.35s;
}
body
{
margin: 0;
font-family: FONT;
color: white;
}
<!doctype html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="surf1">
<div class="text1">
<b>Welcome to smartlearning.com, <br>the place where you can <br>learn and practice English</b>
</div>
<br><br><br><br><br>
<div class="button">
Go to site
</div>
</div>
<div class="surf2">
<div class="surfleft">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english by combining fun with hard-working.</li>
</ul>
</div>
<div class="surfright">
<img src="console.png" alt="404 Image not Found" height="400px">
</div>
</div>
<div class="surf3"></div>
<div class="surf4"></div>
<body>
</body>
</html>
Please note that you may use correct width values to have fine edges in your design.
div.surf1
{
display: block;
background-color: #cdcdcd;
height: 100px;
}
div.surf2 {
background: #41c3ac;
height: 100px;
}
div.surfleft {
float:left;
display: block;
width: 50%;
height: 100px;
background: #8C78B1;
}
div.surfright {
float: right;
width: 50%
background: #ff6b57;
}
div.surf3
{
background: #ff6b57;
height: 100px;
}
div.surf4
{
background: #8C78B1;
height: 100px;
}
body
{
margin: 0;
font-family: FONT;
color: white;
}
<div class="surf1">
<div class="text1">Surf 1</div>
</div>
<div class="surf2">
<div class="surfleft">Surf left</div>
<div class="surfright">Surf right</div>
</div>
<div class="surf3">Surf 3</div>
<div class="surf4">Surf 4</div>
I need to present a header menu with 3 elements:
one is left aligned
one is centered
one is right aligned
I would like a gray background for this menu.
The problem: if I have links in my left or right elements and it is not clickable because of the centered element.
How to prevent this problem? or another way of having this kind of menu?
Any idea is highly appreciated.
jsFiddle: http://jsfiddle.net/sxmf0Lve/
<div class="headerContainer">
<div class="headerLeft">
Left
</div>
<div class="headerTitle">Middle</div>
<div class="headerRight">
Right
</div>
</div>
.headerContainer {
padding-top: 10px;
padding-left: 0px;
padding-right: 5px;
max-width: 100%;
height: 30px;
background-color: #fcfcfc;
border-bottom: 1px solid #f6f6f6;
}
.headerTitle {
position: absolute;
/* z-index: -1; */
top: 10px;
width: 100%;
margin: auto;
text-align: center;
font-size: x-large;
font-weight: bold;
}
.headerLeft {
float: left;
}
.headerRight {
float: right;
}
Updated fiddle: http://jsfiddle.net/7mo7hyza/
Your z-index idea is good, but you didn't perform it well: z-index only works between elements that are both not in the normal workflow of the document (they have position: absolute/relative/..)
So you simply have to position your left/right containers with position: absolute instead of float, and make the big container relative so that you can position the other containers relatively to that one.
.headerContainer {
position: relative;
} .headerTitle {
z-index: 0;
} .headerLeft {
position: absolute;
left: 0;
z-index: 1;
} .headerRight {
position: absolute;
right: 0;
z-index: 1;
}
Make the left and right position relative and give them a higher z-index.
.headerContainer {
padding-top: 10px;
padding-left: 0px;
padding-right: 5px;
max-width: 100%;
height: 30px;
background-color: #fcfcfc;
border-bottom: 1px solid #f6f6f6;
}
.headerTitle {
position: absolute;
/* z-index: -1; */
top: 10px;
width: 100%;
margin: auto;
text-align: center;
font-size: x-large;
font-weight: bold;
}
.headerLeft,
.headerRight {
position: relative;
z-index: 2;
}
.headerLeft {
float: left;
}
.headerRight {
float: right;
}
<div class="headerContainer">
<div class="headerLeft">
Left
</div>
<div class="headerTitle">Middle</div>
<div class="headerRight">
Right
</div>
</div>
Try to avoid using float-ing elements or messing with the z-index. There are two more appropriate methods for what you're trying to achieve:
Method 1: CSS box model
.headerContainer {
padding-top: 10px;
padding-left: 0px;
padding-right: 5px;
max-width: 100%;
height: 30px;
background-color: #fcfcfc;
border-bottom: 1px solid #f6f6f6;
display: flex;
flex-wrap: nowrap;
}
.headerLeft,
.headerTitle,
.headerRight {
display: inline-block;
}
.headerLeft,a
.headerRight {
flex-grow: 0;
}
.headerTitle {
flex-grow: 1;
text-align: center;
font-size: x-large;
font-weight: bold;
}
<div class="headerContainer">
<div class="headerLeft">
Left
</div>
<div class="headerTitle">Middle</div>
<div class="headerRight">
Right
</div>
</div>
See JsFiddle
Method 2: Table layout
.row {
display: table-row;
width: 100%;
background-color: #eee;
}
.cell {
display: table-cell;
}
.middle {
width: 100%;
text-align: center;
}
<div class="headerContainer row">
<div class="cell">
Left
</div>
<div class="cell middle">
<h1>Middle</h1>
</div>
<div class="cell">
Right
</div>
</div>
See JsFiddle