Right this is going to sound really weird, but.
I'm doing a mobile site, nothing fancy etc, and basically in the middle is my content with divs around it, which I have made to float left. but I would like the whole content itself to be in the center without loosing the boxes being next to each other if that makes sense?
index.php
<a name="top"></a>
<!doctype html>
<html>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en-gb">
<head>
<title>michae|dylanEdwards - artistic blog</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link href = "_includes/style.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="_includes/style.css" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="_includes/simplemenu.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="_includes/simplemenu.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:image" content="http://www.michaeldylanedwards.co.uk/admin/uploads/op-image.png"/>
<meta property="og:description" content="michae|dylanEdwards is a contemporary British Art and Design Student at Liverpool John Moores University. In which creates works in which provide a sociological question in regards to how society sees itself. Also by means of design."/>
<meta name="description" content="michae|dylanEdwards is a contemporary British Art and Design Student at Liverpool John Moores University. In which creates works in which provide a sociological question in regards to how society sees itself. Also by means of design.">
<meta name="keywords" content="art blog mickword michaeldylanedwards michae|dylanEdwards michael dylan edwards liverpool john moores university sociological history"/>
</head>
<body>
<center>
<?php include("_includes/header.html"); ?>
<div id="content">
<center>
<?PHP
$category = "6";
$template = "Mobile_new_home";
$number = "6";
include("../admin/show_news.php");
?>
</center>
</div>
<?php include("_includes/bottom.html"); ?>
</center>
</body>
</html>
style.css
div#content {
width: 85%;
}
/* Front News Styles */
div#news_base {
background-image: url(../_img/1.fw.png);
width: 235px;
height: 240px;
float: left;
}
div#articles_base {
background-image: url(../_img/1.fw.png);
width: 235px;
height: 240px;
margin-bottom: 20px;
float: left;
}
div#news_float {
width: 20px;
height: 20px;
float: left;
}
div#newscontent {
width: 235px;
height: 205px;
}
div#newsshadow {
background-image: url(../_img/shadow.png);
width: 215px;
text-align: left;
color: #F0F0E1;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
div#newsshadowbottom {
background-image: url(../_img/shadow.png);
width: 215px;
height: 15px;
text-align: left;
font-size: 10px;
color: #F0F0E1;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
Haha any help would be great, thanks in advance!
edit: oh and here is the mobile site: www.michaeldylanedwards.co.uk/m
Remove float:left in your .news_float class.
And add display:inline-block into .bloglink class. That is all you need to do since you already give align-content: center; to the main div.
.bloglink{
display: inline-block;
}
div#news_float {
width: 20px;
height: 20px;
}
Related
Not too sure why, but it is showing up as a blank screen.
How it looks:
Here is my file structure:
css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #ffffff;
color: #555;
font-family: 'lato', 'Arial';
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
header{
background-image: url(/resources/css/images/hero.jpg);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="resources/vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OmniFoods</title>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super Healthy meals</h1>
I’m hungry
Show me more
</div>
</header>
</head>
<body>
</body>
</html>
I guess you are looking for this in wrong directory, beacuse your style is already in "resources/css/". Try to continue this directory by doing this:
header{
background-image: url("./images/hero.jpg");
}
You need to wrap the soure in quotes like this
background-image: url("./resources/css/images/hero.jpg");
I am making a website, which contains a game. The instructions area is supposed to be on the right side of the screen, and the upgrades area is supposed to be on the left. Right now, this is what I have.
(please don't comment on anything besides the div tags, I know I'm messing up the sizes)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Clicker</h1>
<br>
<div class=game><!--Game-->
<div class='text1'><!--Instructions-->
<h2>Instructions</h2>
<p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
</div><!--/Instructions-->
<div class='upgrades'><!--Upgrades-->
<p>ttttt</p>
</div><!--/Upgrades-->
</div><!--/Game-->
</body>
</html>
CRayen's answer didn't look like it actually accomplished what you wanted, so take a look here.
I did a few things:
Moved the upgrades div out of the text1 div so they are both
direct children of the game div
Set game to have a display value of flexbox, which is a new-ish CSS layout technique that really helps with this style of design.
Gave both upgrade and instruction boxes a flex-basis of 20%, which is similar to your width: 20%;
Removed the margin-right on upgrades
I highly recommend looking into Flexbox for more info on how to create and edit layouts like this!
I have made few changes to the CSS:
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
p {
font-family: 'Roboto', sans-serif;
padding: 15px
}
.text1 {
background-color: lightgrey;
text-align: left;
border: 1.4px solid grey;
border-radius: 10px;
height: 20em;
width: 20%;
float: right;
}
.mono {
font-family: 'Roboto Mono', monospace;
}
h2 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
.upgrades {
background-color: lightgrey;
text-align: left;
border: 1.4px solid grey;
border-radius: 10px;
height: 20em;
width: 20%;
float: left;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Clicker</h1>
<br>
<div class=game><!--Game-->
<div class='text1'><!--Instructions-->
<h2>Instructions</h2>
<p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
</div><!--/Instructions-->
<div class='upgrades'><!--Upgrades-->
<p>ttttt</p>
</div><!--/Upgrades-->
</div><!--/Game-->
</body>
</html>
I'm making a very simple web page but i need help positioning it in the center. How would I go about vertically and horizontally centering this? I have tried several other posts on here but none seem to work so it would be great if some could help me based on my specific code.
I provided the HTML below:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>
example — example & example
</title>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="stylesheet" href="/assets/stylesheets/main.css">
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<style>
body {
font-family: 'Dosis';
}
</style>
</head>
<body>
<div style="text-align: center; font-size:16px; text-transform: uppercase;">
example.IO
<br>
USA
<br><br>
example & example
<br>
coming soon 2018
<br><br>
support#example.io
<br><br>
purchase a example
<br>
purchase examples2
<br>
<br>
</div>
</html>
just try that
body > div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Give a class name to your main div and use position absolute.
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<head>
<meta charset="utf-8">
<title>
example — example & example
</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" href="/assets/stylesheets/main.css">
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<style>
body {
font-family: 'Dosis';
}
</style>
</head>
<body>
<div class="content" style="text-align: center; font-size:16px; text-transform: uppercase;">
example.IO
<br> USA
<br><br> example & example
<br> coming soon 2018
<br><br>
support#example.io
<br><br>
purchase a example
<br>
purchase examples2
<br>
<br>
</div>
To horizontally center a block element (like ), use margin: auto;
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
<head>
<meta charset="utf-8">
<title>
example — example & example
</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" href="/assets/stylesheets/main.css">
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<style>
body {
font-family: 'Dosis';
}
</style>
</head>
<body>
<div class="center" style="text-align: center; font-size:16px; text-transform: uppercase;">
example.IO
<br> USA
<br><br> example & example
<br> coming soon 2018
<br><br>
support#example.io
<br><br>
purchase a example
<br>
purchase examples2
<br>
<br>
</div>
css
.outer-box {
height: 100vh;
dispaly: flex;
width: 100%;
justify-content: space-around;
}
.inner-box {
display: block;
position : relative;
width: auto;
}
html
<div class="outer-box">
<div class="inner-box" style="text-align: center; font-size:16px; text-transform: uppercase;">
example.IO
<br> USA
<br><br> example & example
<br> coming soon 2018
<br><br>
support#example.io
<br><br>
purchase a example
<br>
purchase examples2
<br>
<br>
</div>
</div>
Consider using flexbox to control your centering.
<body>
<div class="content">
example.IO
<br>
USA
<br><br>
example & example
<br>
coming soon 2018
<br><br>
support#example.io
<br><br>
purchase a example
<br>
purchase examples2
<br>
<br>
</div>
</body>
and then css that ties to the .content class name referenced in the HTML above:
body {
min-height: 100vh;
margin: 0;
}
.content {
text-align: center;
font-size:16px;
text-transform: uppercase;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
I'm a total newbie to coding, just trying to create a circle for a course, but it's not working. Can someone help and suggest what I'm doing wrong?
<!doctype html>
<html>
<head>
<title>JavaScript Lesson</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#circle = {width: 50px;
height: 50px;
border-radius: 25px;
background-color: red;
}
</style>
</head>
<body>
<div id="circle"> </div>
</body>
</html>
Everything is fine, except that = in <style> tags. Just remove that.
#circle {width: 50px;
height: 50px;
border-radius: 25px;
background-color: red;
}
The HTML div for the navigation bar design in CSS will not work.
CSS
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background:url(../images/bg.jpg) no-repeat scroll center top #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('../images/navigation.png') no-repeat center top;
height: 198px;
width: 737px;
}
This is just a short example.
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg">
Any help will be much appreciated!
Make sure the URL to your image is correct.
Place the URL in between ' or " tags (url("../images/navigation.png"))
Add a width to your div, f.e. width: 200px;
EDIT: When looking at your full HTML, you also need to close your <body> and <html> tags.
Your full code will look like this:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="robots" content="index, follow"/>
<meta name="keywords" content="bla"/>
<meta name="description" content="bla"/>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="shortcut icon" href="favicon.png"/>
</head>
<body>
<div id="header_menu_bg"></div>
</body>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
.clear {
clear:both;
height:0px;
}
body {
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg {
background: url('http://placehold.it/737x198') no-repeat center top;
height: 198px;
width: 737px;
}
DEMO: JSBin (JSFiddle doesn't seem to work at the moment)
You need to assign it a width attribute.
#header_menu_bg {
background: url(../images/navigation.png) no-repeat center top;
height: 280px;
width: 200px; }
EDIT
Check in the console log, to see if there are issues with the browser finding your image. Perhaps you have the wrong path.
EDIT 2
Close your <body> and <div> tags.
Assuming you have referenced the css file correctly and no error in your html coding structure I suggest clearing your browser cache.
background: url(../images/navigation.png) no-repeat center top;
you need "" or '' like this:
background: url('../images/navigation.png') no-repeat center top;
probably this helps you
The following css works and puts an image in the DIV. Fiddle is not working at the moment and I can't put a link for it now.
#header_menu_bg
{
background-image: url('fnordware.com/superpng/pngtest16rgba.png');
height: 32px;
width: 32px;
}
You either have a wrong url or something else is wrong if this css doesn't work for you.
Try this :
Download the sample image from Here and save it as bg.jpg.
Create a new folder and put the 2 below files & a image in same folder.
HTML (index.html)
<!DOCTYPE html>
<head>
<title>WEBSITE</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<div id="header_menu_bg">
</body>
</html>
CSS (main.css)
body
{
background-color: #13120d;
margin: 0;
padding: 0;
font-family: Tahoma;
font-size: 13px;
}
#header_menu_bg
{
background: url('bg.jpg') no-repeat center top;
width: 280px;
height: 500px;
}
RESULT: