I'm relatively new to creating websites and I had an HTML/CSS questions I hope someone could help me with!
I noticed that in Safari and Google Chrome, my grey box is not where it is supposed to be (I assume because I made the .veryouter a fixed px, but when I tried to use percentages and resized the page and changed the page sizing, my text box started to move off the page! I'm trying to have everything stay in place when resizing the window, so I'm unsure if changing it to percentage is the answer or not..) I have attached pictures to show the difference, Chrome is it vertically centered while on Safari it isnt). //The code snippet looks odd, sorry about that!
Thank you for any help :) I appreciate it]1
html{
height: 97%;
}
body{
background-image: url("Metakingpic.png");
background-size: 1300px;
min-width: 1080px;
height: 100%;
}
.veryouter{
height: 589px;
}
#outer{
height: 100%;
width: 550px;
display: flex;
justify-content: center;
align-items: center;
}
#inner{
position: relative;
background-color: #696969;
opacity: .5;
height: 540px;
width: 370px;
}
h1{
margin-top: 40px;
margin-bottom: 0;
}
p{
margin-top: 40px;
margin-right: 10px;
}
.words{
font-family: 'Londrina Outline', cursive;
color: #ffffff;
font-size: 55px;
line-height: 50px;
letter-spacing: 5px;
padding-left: 23px;
}
.font2{
font-family: 'Slabo 27px', serif;
color: #ffffff;
font-size: 23px;
line-height: 32px;
letter-spacing: 2px;
margin-left: 20px;
}
.image{
height: 114px;
width: 174px;
position: absolute;
bottom: 0;
right: 0;
z-index: 100;
font-size: 25px;
}
.arrow{
position: absolute;
bottom: 0;
right: 0;
padding-right: 15px;
padding-bottom: 15px;
z-index: -1;
}
.n{
padding-top: 25px;
font-weight: bold;
color: white;
width: 125px;
text-align: center;
font-size: 30px;
font-family: 'Londrina Outline', cursive;
position: relative;
letter-spacing: 5px;
}
a{
text-decoration: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link href = "intro.css" type = "text/css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/css?family=Londrina+Outline" rel="stylesheet">
</head>
<body>
<div class = "veryouter">
<div id = "outer">
<div id = "inner">
<div class = "words">
<h1>My <br></br>PHOTO<br></br>BOOK</h1>
</div>
<div class = "font2">
<p> Press "NEXT" to continue! </p>
</div>
</div>
</div>
</div>
<div class = "image">
<a href = "https://www.facebook.com/" >
<div class = "n">NEXT</div>
</a>
<img class = "arrow" src = "Arrow.png" atl = "Arrow"/>
</div>
</body>
</html>
This is most likely because those two browsers have different default css rules, I would recommend using a css reset, either use https://meyerweb.com/eric/tools/css/reset/ or https://github.com/necolas/normalize.css/
If you're not familiar with these reset css - they basically normalize the default browser styles. I personally prefer using normalize.css on all my projects.
To align the container center need to add the following style :
#outer{
height: 100%;
width: 550px;
display: flex;
justify-content: center;
margin-top: 20px;
display: -webkit-box;
-webkit-box-pack: center; /* justify-content */
-webkit-box-align: center; /* align-items */
}
#inner{
position: relative;
background-color: #696969;
opacity: .5;
height: 100%;
width: 370px;
}
Hope the changes will help.Try this code and let me know if any concern.
Related
I am coding a Facebook clone with some changes to enhance my skills, but I have ran into a problem.
I have an image(profile picture) and text(user name) under the <h1> of Home. I am trying to align the text exactly to the center to the right of the image
example:
[
top of image
CENTER OF IMAGE TEXT
bottom of image
] ( what I expected/Wanted)
I am not getting the result I want. Instead, the image the text is at the top to the right of the image.
example:
[
top of image
center of image
BOTTOM OF IMAGE TEXT
](result)
The HTML:
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personnal-info">
<img class="sidebar-profile-picture" src="icons\my profile.jpg">
<p class="my-user-name">Said User</p>
</div>
</div>
The CSS:
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
background-color: white;
width: 400px;
margin-left: 20px;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 220px;
}
.sidebar-profile-picture {
height: 30px;
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
display: inline-block;
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
}
Flexbox is perfect for these cases. Change the .personalInfo div to a flexbox by adding the display: flex property. Then you have access to many other properties for centering, etc.
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
background-color: white;
width: 400px;
margin-left: 20px;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 220px;
}
.sidebar-profile-picture {
height: 30px;
width: 30px; /* demo only */
background-color: blue; /* demo only */
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
/* display: inline-block; -> not necessary anymore*/
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
}
/* FLEXBOX */
.personal-info{
display: flex;
flex-direction: row; /* display children in a horizontal row */
align-items: center; /* vertically align items in the center */
}
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personal-info">
<img class="sidebar-profile-picture">
<p class="my-user-name">Said User</p>
</div>
</div>
Not sure I understand your requirement correctly.
You can use flex to achieve the below result.
Let me know if this works
.personnal-info {
display:flex;
align-items: center
}
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personnal-info">
<img class="sidebar-profile-picture" src="//via.placeholder.com/50x50">
<p class="my-user-name">Said User</p>
</div>
</div>
hey Mihai T thanks for the response ! It actually worked.
But didn't put it in an ideal position.
I actually fixed the problem by putting position: relative; on personnal-info.
Then I put in my-user-name
position: absolute; top: -8px;
PS: It also worked with bottom: -8px; instead of top: -8px.
Thanks !
Edge renders page wrong afer loading it, but after clicking refresh it renders it correctly.
Works as expected on Chrome and Firefox
<html>
<head>
<style>
body {
font-family: 'Open Sans', sans-serif;
overflow: hidden;
}
.day {
position: relative;
float: left;
width: 12%;
background-color: white;
}
.header_class {
position: relative;
height: 5%;
background-color: blue;
color: white;
font-size: 12px;
text-transform: uppercase;
text-align: center;
line-height: 5vh;
}
.row_class {
position: relative;
height: 5%;
color: black;
font-size: 12px;
text-align: center;
line-height: 5vh;
}
</style>
</head>
<body>
<div class="day">
<div class="header_class">header</div>
<div class="row_class">row1</div>
<div class="row_class">row2</div>
<div class="row_class">row3</div>
<div class="row_class">row4</div>
</div>
</body>
</html>
The text should be centered in the header box and below, but it is above the box when the page loads. If i click F5 or refresh it renders as expected.
There seems to be a bug in Microsoft Edge when using viewport height vh. Try setting a line-height in pixels and it should work. If you want to center the items then I suggest using flexbox, its widely supported in most browsers these days:
body {
font-family: 'Open Sans', sans-serif;
overflow: hidden;
}
.day {
position: relative;
width: 12%;
background-color: white;
display: flex;
justify-content: center;
align-content: center;
min-height:0;
flex-direction: column;
}
.header_class {
position: relative;
height: 5%;
background-color: blue;
color: white;
font-size: 12px;
text-transform: uppercase;
text-align: center;
line-height: 25px;
}
.row_class {
position: relative;
height: 5%;
color: black;
font-size: 12px;
text-align: center;
line-height: 25px;
}
You can manually wait until the page fully loads, and then display, reducing the chance of it rendering wrong.
window.onload = function();
I am having trouble in using the anchor tag(in this instance).
for($i=0;$i<$numrows;$i++)
echo "
<div class='singleItem'>
<img src= $arr3[$i] class='itemImage'>
<div class='itemName'> $arr1[$i] </div>
<div class='itemPrice'><br> Php$arr2[$i]
<div class='orderButtonDiv'>
<a href='menu_burger.php?itemid=$arr4[$i]'>ORDER</a>
</div>
</div>
</div> "
As you may notice i am creating multiple instance of singleItem and upon finishing,it seems i am not able to click the anchor tag. As if maybe it got behind by something. I know the link works since upon inspecting elements in chrome shows correct links.
here is the css
.itemImage{
width :80%;
height: 80%;
object-fit: contain;
object-position: left;
padding-top:4%;
padding-left: 2%;
float:left;
position:absolute;
left: 0;
}
.itemName{
color: red;
text-decoration: none;
font-family: "Akzidenz-Grotesk BQ",sans-serif;
font-size: 150%;
font-weight: bold;
margin-left: 40%;
margin-top: 4%;
z-index -1;
}
.itemPrice{
color: black;
text-decoration: none;
font-family: "Akzidenz-Grotesk BQ",sans-serif;
font-size: 110%;
margin-left: 41%;
margin-top: 15%;
position: absolute;
bottom: 25%;
z-index -1;
}
.singleItem{
width: 48%;
background-color: #e0dede;
border:1px solid red;
height: 150px;
position: relative;
z-index: -1;
}
.rowItem{
display: flex;
justify-content: space-between;
padding-bottom: 2%;
height: 150px;
margin-top: 1%;
}
.listItems{
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
width: 75%;
/* margin-top: 130px ; */
}
.orderButtonDiv{
display: inline;
border: 2px solid red;
position: relative;
right: -50%;
margin-top: 15%;
z-index 3;
}
.orderButtonDiv a {
text-decoration: none;
color: red;
width: 100%;
height: 100%;
font-family: "Akzidenz-Grotesk BQ",sans-serif;
font-size: 90%;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
}
I tried almost everything by making the whole singleItem,orderButtonDiv class clickable by using Jquery and still to no success.
if someone could offer some help it would be great, and appreciated Thank you
To redirect to an anchor, this anchor must have an id and your url #yourid
Link to My ID
this link redirect to this div :
<div id="myId">My ID</div>
I believe it has something to do with the z-index: -1; on the divwith the singleItem class - when this is removed the anchor tag is clickable - hope that helps
There is error in writing z-index please check it should be z-index:1 you have missed the (:) and instead fo giving z-index:-1; set the z-index:1; and check.
<a href='menu_burger.php?itemid=$arr4[$i]'>ORDER</a>
pls change into
ORDER
hope this will b correct if not sorry try it
I am trying to make a responsive tweet button with the twitter bird floated left, the text next to it and centered.
My code is:
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align: center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
width: 100%;
padding-bottom: 10%;
}
img .tweet {
float: left;
}
/* Tweet This: */
.span-content {
display: block;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
</div>
</div>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
CSS
I've tried pretty much everything under the sun.
I can't seem to get the rectangle to shrink and widen when I resize the page or go into Dev Tools and use the mobile device pane.
I understand CSS less than I do JavaScript at this point. Not sure if I should use flexbox in this instance or how I would do that.
Here is the CodePen
you can use quotes using pseudo element ::before and a::after
Thank you. This works for the most part. However I can't get the
twitter bird to float left and the text to be beside it. Any
suggestions?
I used flexbox the text will be next to the twitter button on desktop view, and below on mobile view.
#import url(https://fonts.googleapis.com/css?family=Open+Sans|Satisfy);
/*Styles for whole page */
img {
max-width: 100%;
border: 7px solid #00a5ef;
}
#page-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center
}
h1 {
font-weight: bold;
text-transform: uppercase;
font-size: 30px;
margin-top: 50px;
width: 300px;
line-height: 1;
font-family: 'Open Sans', sans-serif;
color: #1485C7;
text-align: center;
letter-spacing: 0;
}
/* On: */
h1 .center {
text-transform: capitalize;
font-weight: normal;
font-family: "Satisfy";
vertical-align: text-bottom;
line-height: 10px;
color: #1485C7;
}
h1 .bigger {
font-size: 46px;
color: #1485C7;
display: block
}
/* Rectangle 1: */
.flex-rectangle {
background: #fff none repeat scroll 0 0;
flex: 1 15%;
margin: 0 15%;
max-width: 300px;
padding: 10px;
position: relative;
quotes: "\201C""\201D";
text-align: center;
top: 0;
}
.flex-rectangle::before {
color: #00a5ef;
content: open-quote;
font-family: Georgia;
font-size: 25vw;
left: -15vw;
position: absolute;
top: 50%;
}
.flex-rectangle::after {
color: #00a5ef;
content: close-quote;
font-family: Georgia;
font-size: 25vw;
position: absolute;
right: -15vw;
top: 50%;
}
.text {
align-self: flex-end
}
.span-content {
display: inline-block;
color: #00A5EF;
margin: 0 auto;
padding: 5px;
border: 3px solid #00A5EF;
}
<div id="page-wrap">
<div class="flex-rectangle">
<div class="heading">
<h1>Random Quotes<span class="center">On</span><span class="bigger">Design</span></h1>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
<div id="buttons">
<div class="span-content">
Tweet This
</div>
</div>
</div>
<div class="text">
<h1>Random Quotes</h1>
</div>
</div>
you have to place the bird and the text to one div and code for the image element in order to code for the image part you have to call first the first parent div and other div in one code where the image element is located .flex-rectangle .image-wrapper imgto edit the code for image. and also you have to insert the html code for <span>Tweet This</span> inside the .image-wrapper to make the image go left and your text go center.
CSS CODE :
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align:center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
margin: auto;
max-width: 125;
max-height: 50px;
width: 100%;
padding-bottom: 15%;
}
.flex-rectangle .image-wrapper img {
float: left;
max-width: 50px;
max-height: 50px;
width: 100%;
}
/* Tweet This: */
.span-content {
display: block;
text-align: center;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
HTML Code:
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet"/>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
</div>
</div>
I am having trouble with finding my link. When I open up my html and css in the file, I cannot visibly see it (I believe it is stuck under my div, even though the z-index is higher?) I am not entirely sure why, any help would be greatly appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="Stylesheet" href="Stylesheet.css" />
<title>Derpycats.com</title>
</head>
<body>
<!--Background (Carbon Fibre)-->
<body background="background.jpg" alt="Background" />
<!--Header-->
<h1 id="header">DerpyCats.com</h1>
<div id="headerdiv"></div>
<!---Links-->
Home
</body>
</html>
CSS:
/* Sets the pixel density to "fill browser" */
* {
width: 100%;
height: 100%;
}
/* Heading */
#header {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #D9411E;
z-index: 2;
position: fixed;
font-size: 50px;
bottom: -50px;
}
/* CSS for the heading div */
#headerdiv {
border-radius: 5px;
z-index: 1;
position: fixed;
width: 99%;
margin-top: -20px;
height: 100px;
background-color: white;
margin-bottom: 10px;
}
/* Css for the links */
a {
z-index: 3;
font-family: Verdana, sans-serif;
}
/* CSS for the normal paragraphs */
.paragraph {
color: white;
font-family: Courier, serif;
}
P.S. I don't believe this matters, but I am on OSX using sublime text 2.
I didnt understand what are you trying to do but, #headerdiv overlays your link.
You can give z-index = -1 value to your #headerdiv to send it back.
little Change in css will work here
#headerdiv {
border-radius: 5px;
z-index: 1;
/*position: fixed; this is creating problem*/
width: 99%;
margin-top: -20px;
height: 100px;
background-color: white;
margin-bottom: 10px;
}