I'm building an WIP placeholder page for myself and I'm stuck with centering the media content with CSS. I managed to get it to work on mobile but the content is slightly to the right on desktop.
UPDATE:
I've added the entire code along with the CSS I selected to support it. As you can tell, the .display section of the CSS is where I'm having the most trouble (assuming I've troubleshot this right). From what I've been told here & read elsewhere, the tags I initially tried in HTML don't apply to HTML5 so I'm hoping to get CSS to finish it off. Like I mentioned before, when previewing on mobile, it works fine and the links at the bottom of the page stack nicely but it all falls apart in full desktop.
Here's the code below:
#charset "utf-8";
/* CSS Document */
.content {
max-width: 500px;
margin: auto;
}
.display{
position:relative;
display: block;
padding: 0;
margin:0 auto;
width: auto;
text-align:center;
display:flex;
justify-content:center;
}
.button {
background-color: #FFFFFF;
border: #000000;
border-bottom-width: 2px;
text-decoration-color: #FFFFFF;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
}
.help-block.with-errors {
color: #ff0000;
margin-top: 5px;
}
.overlay {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0, 0, 0, 0.8);
z-index:100;
color:white;
display: none;
font-family: 'source_sans_proregular';
line-height: 25px;
-webkit-text-size-adjust:none;
text-size-adjust:none;
}
.container {
width:100%;
height:100%;
margin:0;
padding:0;
border:0;
}
.container td {
vertical-align: middle;
text-align: center;
}
.centerAlign {
text-align: center;
}
.margin2x {
margin-bottom: 24px;
}
.margin1x {
margin-bottom: 12px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>mAdjetey is getting an upgrade</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="index_files/mine.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="index_files/favicon.png">
</head>
<a name="tepin"></a>
<div class="display" align="center">
<img src="index_files/uc_main.png" style="max-width:100%" height="auto" alt="Website under redesign">
</div>
<div class="display">
<div class="w3-topbar">
<img src="index_files/icon_email.png" alt="Email">
</div>
</div>
<div class="display" align="center">
Back to top of page
</div>
</html>
theres several ways but in this example I'm applying "display: block" to the image so that it can use the margin property.
/* CSS */
.display img {
display: block;
padding: 0;
/* maybe some top margin too? margin: 30% auto 0 */
margin: 0 auto;
width: auto;
}
<!-- HTML -->
<div class="display" align="center">
<img src="index_files/uc_main.png" style="max-width:100%" height="auto" alt="Website under redesign">
</div>
The align attribute is not supported in HTML5. Use CSS instead.
.className{
text-align:center
}
Or you can always use display flex
.className{
display:flex;
justify-content:center
}
Related
My webpage is hosted on github pages. And it works fine when its on a big screen. However, whenever I and my friends open the page on a device or window that's smaller than the webpage, the option to scroll to the left doesn't exist. In contrast, it's available to scroll right(to the image's right end). How can I solve this problem? And what causes this error?
This is the link to my github repo: https: https://github.com/vroomeee/miniblog
And this is the link to my actual webpage: https://vroomeee.github.io/miniblog
I have searched for similar problems on google, but the closest thing I found was:
Can't scroll to the left on the webpage.
However it still remains unanswered.
I tried overflow: auto; and margin: 0 auto; with div, but all of them don't seem to work.
Here is my html code:
<!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=0.7, maximum-scale=0.7">
<title>In the memory of vroomeee</title>
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div id="container">
<h1>Vroomeee pictures</h1>
<img src="1.JPG" alt="a picture of vroomeee">
<br>
<button>get next photo</button>
<p>부름이 보고 싶다ㅎㅎ</p>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
And here is my css file:
h1{
color: purple;
font-weight: 1;
text-transform: uppercase;
border-top: 5px solid;
font-size: 75px;
margin: 40px;
letter-spacing: 2px;
}
body {
background-color: salmon;
color: purple;
font-family:sans-serif;
font-weight: bold;
}
img {
height: 500px;
border-radius: 0%;
}
button {
margin: 30px auto 0;
padding: 20px 25px;
background-color: salmon;
font-size: 20px;
text-align: center;
border:1px solid #2E1263;
text-transform: uppercase;
text-decoration: none;
outline: none;
letter-spacing: 4px;
color: purple;
}
button:hover {
text-decoration: underline;
transition: 0.4s;
background-color: purple;
color: salmon;
}
#container{
display:flex;
flex-direction: column;
align-items:center;
justify-content: center;
height:100vh;
}
Have you tried adding a min-width of your image's general dimensions to its container or body? Though I'm not sure why you'd want horizontal scrolling at all. Maybe add a max-width:100vw to the image?
I'm working on a short one-page site with a rotating set of pix. Somehow the js script and images are breaking the site's ability to scale down. I'm not an experienced coder, so I'm flailing a bit.
I'm pretty sure it's to do with some of the fixed widths in the CSS, but removing them creates even more trouble. Any help tracking down the cause would be much appreciated. Here's a Codepen link to the problem.
HTML:
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html" ; charset="utf-8" />
<meta name="created" content="Fri, 22 Jan 2016 17:43:40 GMT" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="jvs_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div class="maingrid">
<div class="slides">
<img src="http://tests.markgarvey.com/slideshow_images/out1.png" max-width:100%;>
<img src="http://tests.markgarvey.com/slideshow_images/out2.png" max-width:100%;>
<img src="http://tests.markgarvey.com/slideshow_images/out3.png">
<img src="http://tests.markgarvey.com/slideshow_images/out4.png">
<img src="http://tests.markgarvey.com/slideshow_images/out5.png">
<img src="http://tests.markgarvey.com/slideshow_images/out6.png">
<img src="http://tests.markgarvey.com/slideshow_images/out7.png">
<img src="http://tests.markgarvey.com/slideshow_images/out8.png">
<img src="http://tests.markgarvey.com/slideshow_images/out9.png">
<img src="http://tests.markgarvey.com/slideshow_images/out10.png">
</div>
<!-- end of slides div -->
<div class="centertext">
<img src="http://tests.markgarvey.com/images/JVSA_weblogo3.png" width="281" height="106" alt="" title="" border="0" />
<p class="name">FIRSTNAME LASTNAME</p>
<p class="address">1234 Example Street<br> Princeton, New Jersey 12345<br> testing#email.net
<br> 505.422.6563
</p>
<p>Solemnly he came forward and mounted the round gunrest. He faced about and blessed gravely thrice the tower, the surrounding country and the awaking mountains. Then, catching sight of Stephen Dedalus, he bent towards him and made rapid crosses
in the air, gurgling in his throat and shaking his head. Stephen Dedalus, displeased and sleepy, leaned his arms on the top of the staircase and looked coldly at the shaking gurgling face that blessed him, equine in its length, and at the light
untonsured hair, grained and hued like pale oak.
</p>
</div>
<!-- end of centertext div -->
</div>
<!-- end of maingrid div -->
</div>
<!-- end of wrap div -->
<script>
function nextSlide() {
var q = function(sel) {
return document.querySelector(sel);
}
q(".slides").appendChild(q(".slides img:first-child"));
}
setInterval(nextSlide, 5000)
</script>
</body>
</html>
CSS:
#wrap {
max-width: 100%;
width: 1000px;
background: #FFF;
margin: 0 auto;
}
.maingrid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-items: center;
justify-items: center;
margin-top: 50px;
}
.centertext {
align-self: center;
justify-self: center;
margin-top: 20px;
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
text-align: left;
letter-spacing: normal;
line-height: 19px;
padding-bottom: 5px;
font-family: Verdana, Arial, sans-serif;
color: #000000;
font-size: 1em;
line-height: 20px;
}
img {
max-width: 100%;
height: auto;
}
.name {
font-size: 1.5em;
font-weight: bold;
font-variant: small-caps;
margin-bottom: 5px;
}
.address {
margin-top: 8px;
line-height: 24px;
font-family: Arial, sans-serif;
color: #000000;
font-size: 1em;
line-height: 19px;
}
/* the slide container with a fixed size */
.slides {
max-width: 100%;
width: 1000px;
height: 670px;
position: relative;
}
/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img {
height: auto;
display: block;
position: absolute;
transition: opacity 1s;
opacity: 0;
max-width: 100%;
width: 1000px;
margin-bottom: 60px;
}
/* the first image is the current slide. it's faded in. */
.slides img:first-child {
z-index: 2;
/* frontmost */
opacity: 1;
}
/* the last image is the previous slide. it's behind the current slide and it's faded over. */
.slides img:last-child {
z-index: 1;
/* behind current slide */
opacity: 1;
}
Thanks for any help.
Your fixed widths (of 1000px) are to blame.
Try:
.slides {
width:100%;
max-width: 1000px;
height: 670px;
position: relative;
}
/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img {
height: auto;
display: block;
position: absolute;
transition: opacity 1s;
opacity: 0;
width:100%;
max-width: 1000px;
margin-bottom:60px;
}
Here is an edited codepen.
So I'm trying to make a website for a company of mine, and the idea is that my main page is going to have a giant image with a button in the center (horizontally and vertically) that says "More!" but the button will not center nor will the text inside of the button, Below I'll put my HTML code as well as my CSS code too.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biostone Interactive | Main</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header-image">
<div id="header-button">
More!
</div>
</div>
<div id="nav">
</div>
<div id="container">
</div>
</body>
</html>
And here is my CSS:
* {
padding: 0;
margin: 0;
font-family: Lucida Sans Unicode, Tahoma, Arial;
}
#header-image {
width: 100%;
height: 600px;
background-color: black;
}
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
}
#header-button-text {
text-align: right;
text-decoration: none;
color: white;
}
(Note this code isn't complete because I deleted some of it to try and fix it)
Please help me and tell me what I did wrong! Thanks :D
To center text within a container, use text-align:center;
To center a container, use margin-left:auto;margin-right:auto;
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
text-align: center;
margin-left: auto;margin-right:auto;
}
#header-button-text {
text-decoration: none;
color: white;
}
change the header button css to:
#header-button {
position:absolute;
top:50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
}
The margin values need to be half of the dimension attributes, so if you change width and height you have to update the margins.
Here is the code:
body{
background-image:url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg');
}
div.header{
background-color:#F0F8FF;
text-align:center;
padding:3px;
opacity:0.2;
height:60px;
}
h1{
font-family:'Lucida Console';
font-weight:bold;
color:blue;
}
div.header ul {
font-style:none;
font-size:50%;
list-style-type:none;
position:relative;
right:700px;
bottom:50px;
}
ul{
list-style-type:none;
line-height:220%;
}
a:link{
color:white;
font-size:150%;
text-decoration:none;
}
a:visited{
color:white;
font-size:150%;
text-decoration:none;
margin:10px;
}
a:hover{
font-size:220%;
color: #7CB9E8;
}
div.gallary img{
position:relative;
left:160px;
top:150px;
margin:5px;
width:200px;
height:200px;
}
img:hover{
width:220px;
height:220px;
border: 1px solid #ccc;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel = "stylesheet" href = "stylesheet.css">
</head>
<body>
<div class = "header">
<h1>Gordong Guitar Lesson</h1>
<ul>
<li>Mailbox:147ox</li>
<li>phone: (151)-232-4576</li>
<li>Zip:223</li>
</ul>
</div>
<div class +"nav" >
<ul>
<li>Home</li>
<li>Lessons</li>
<li>Videos</li>
<li>apply</li>
</ul>
</div>
<div class = "gallary">
<img src = "http://www.londonguitaracademy.com/wp-content/uploads/guitar-lessons1.jpg"></img>
<img src = "http://lessonsthatrock.com/wp-content/uploads/2012/02/guitar-lessons-long-beach1.jpg"></img>
<img src = "http://tampabaymusicacademy.com/blog/wp-content/uploads/2015/10/guitarlessons.jpg"></img>
<img src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTUpvERhA8lpbGi7ic9GGThcF20NZl1ZrDTT_N-mqvZwTqdpw7vMA"></img>
<img src = "http://hobartguitarlessons.files.wordpress.com/2011/11/guitar-man-new_221.jpg?w=300&h=300"></img>
</div>
</body>
</html>
My questions is when I run this code and hover over the links or the images,
They all seem to be connected through some invisible box. For example when I hover over the "Home" link. Every link and every img moves downward. How do I fix this? Thank you.
They are not connected at all, they are just responding to the elements growth because your links are making your font bigger on hover and your images are getting border on hover.
The best way to avoid this behavior is setting the border-sizing property:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
* { Box-sizing: Border-box } FTW by Paul Irish
https://jsfiddle.net/j9rxzc2n/
please check this one it's misbehaving because its size was being increased while hovering. so I fixed its size, now it's working fine without up and down.
I only added this one line: ul li{height:30px; }
I'm guessing this is what you wanted? https://jsfiddle.net/link2twenty/8ktphwyo/
body {
background-image: url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg');
}
div.header {
background-color: #F0F8FF;
text-align: center;
padding: 3px;
opacity: 0.2;
height: 60px;
}
h1 {
font-family: 'Lucida Console';
font-weight: bold;
color: blue;
}
div.header ul {
font-style: none;
font-size: 50%;
list-style-type: none;
position: relative;
right: 700px;
bottom: 50px;
}
ul {
list-style-type: none;
line-height: 220%;
}
a:link {
display: inline-block;
color: white;
font-size: 150%;
text-decoration: none;
transform-origin: left;
}
a:visited {
color: white;
font-size: 150%;
text-decoration: none;
margin: 10px;
}
a:hover {
transform: scale(1.2, 1.2);
color: #7CB9E8;
}
div.gallary img {
position: relative;
left: 160px;
top: 150px;
margin: 5px;
width: 200px;
height: 200px;
border: 1px solid rgba(0, 0, 0, 0);
}
div.gallary img:hover {
z-index: 100;
transform: scale(1.1, 1.1);
border-color: #ccc;
}
<div class="header">
<h1>Gordong Guitar Lesson</h1>
<ul>
<li>Mailbox:147ox</li>
<li>phone: (151)-232-4576</li>
<li>Zip:223</li>
</ul>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Lessons</li>
<li>Videos</li>
<li>Apply</li>
</ul>
</div>
<div class="gallary">
<img src="http://www.londonguitaracademy.com/wp-content/uploads/guitar-lessons1.jpg" />
<img src="http://lessonsthatrock.com/wp-content/uploads/2012/02/guitar-lessons-long-beach1.jpg" />
<img src="http://tampabaymusicacademy.com/blog/wp-content/uploads/2015/10/guitarlessons.jpg" />
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTUpvERhA8lpbGi7ic9GGThcF20NZl1ZrDTT_N-mqvZwTqdpw7vMA" />
<img src="http://hobartguitarlessons.files.wordpress.com/2011/11/guitar-man-new_221.jpg?w=300&h=300" />
</div>
I've made it so none of the size changes effect the page flow. I've used css scaling rather than actually changing the size values and for borders I gave each image an invisible border that was coloured in rather than adding a border after.
You have:
a:link{
color:white;
font-size:150%;
text-decoration:none;
}
a:hover{
font-size:220%;
color: #7CB9E8;
}
This means when you move the mouse over a link (<a>), your font size becomes 220% instead of the regular 150% - that's what is causing the moving you describe - the size of any text will increase by approximately 50% (150/220).
EDIT / ADDED:
And the same with images (<img>tags) - you have:
div.gallary img{
width:200px;
height:200px;
}
img:hover{
width:220px;
height:220px;
}
which means: Your images in <div class="gallary">are 200x200px, but when you move the mouse over them, they become bigger: 220x220px, which also moves everything that comes after it...
I have some weird problem with my webpage.
I made a simple website, where there is a background image, covering the webpage, header on it with logo and menu icon... the menu icon and the menu worked, until now... I made two divs, with height:100vh; and they are 100vh from the top of the webpage... it looks great, but the menu is not working.. how, why?
for better understanding.. here is link to the site: http://david.addagio.cz/own/
ok.. so there is the code:
css:
html {
background: url(bistro2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {margin: 0;
padding: 0;
}
a{
text-decoration:none;
z-index:10;
}
#header {
background-color: none;
height: 110px;
width: 100%;
top:0px;
position: fixed;
}
h1 {
z-index:10;
color:white;
font-size: 35px;
padding: 0;
margin: 0;
font-family:Segoe UI Light;
padding-bottom:10px;
}
h2 {
color:white;
font-size: 22px;
padding: 0;
margin: 0;
font-family:Segoe UI Light;
line-height:50px;
z-index:10;
}
#head{
border-bottom:2px solid white;
margin-bottom:50px;
}
#menu{
margin-bottom:10px;
}
#social_icons{
height:570px;
background-color: rgba(0,0,0,0.1);
}
#main{
float: left;
}
#main img {
width:60px;
height:27px;
padding:45px;
}
#share{
float: right;
}
#share img {
padding:45px;
width:30px;
height:16px;
padding-top:50px;
}
.menu {
background-color: rgba(0,0,0,0.7);
top:0;
right: -400px;
height: 100%;
position: fixed;
width: 400px;
z-index:-10;
}
#third {
background-color:#E8E8E8 ;
}
#second, #third {
width:100%;
height:100vh;
padding:0px;
margin:0;
margin-left:auto;
margin-right:auto;
}
#second {
background-color:#F0F0F0 ;
margin-top:100vh;
}
html:
<!DOCTYPE html>
<html>
<head>
<title>UX design</title>
<link href="styles_m.css" rel="stylesheet" type="text/css">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
</head
<body>
<div class="menu">
<div id="wrapper">
<div id="head">
<h1>Menu</h1>
</div>
<div id="menu">
<h2>O mě</h2>
<h2>Proč si mě vybrat</h2>
<h2>Portfolio</h2>
<h2>Ukázky prací</h2>
<h2>Objednávkový formulář</h2>
</div>
<div id="head">
<h1>Sociální sítě</h1>
</div>
<div id="social_icons">
</div>
</div>
</div>
<div id="header">
<div id="main">
<img src="my_logo.png">
</div>
<div id="share">
<img name="menu" src="my_menu.png">
</div>
</div>
<div class="wrapper">
<div id="second">
</div>
<div id="third">
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="main.js">
</script>
</body
</html>
The menu script is working properly. You have to set a top property for the .menu class:
.menu{
...
top: 0;
...
}
One of those added, new divs is now covering up the menu but you have changed the markup as I write this and can't help with the answer. However, this is a typical problem when floated or absolutely positioned elements rise up into a position that covers up another element.
EDIT: In fact, that's the case. position:fixed for the header is the same as being absolutely positioned. Then your menu and logo are both floated. These all take those items out of the normal flow which is allowing your new divs to cover them up.