Hey guys I want my two #previews to float side by side. I have tried adding float:left but it doesn't work. At the moment they are just sitting on top of each other. All my code is below, thank you for any help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
background: #F4F4F4;
font-family: 'Lobster', cursive;
}
#logo {
background: url(logo.png);
width: 300px;
height: 75px;
margin: 70px 200px;
}
#container {
width: 1300px;
}
h2 {
text-align: center;
font-size: 29px;
color: #444;
}
p {
text-align: center;
font-size: 22px;
color: #444;
}
.line {
background: url(line.png);
width: 972px;
height: 1px;
margin: 0 auto;
}
#previews {
border: 5px solid #FFF;
width: 300px;
margin: 50px 200px;
}
</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg" /></div>
<div id="previews"><img src="preview.jpg" /></div>
</div>
</body>
</html>
Float them both to the left and it will work. You'll also need to clear them then.
A few things:
a) DIVs are block-level. You would need to define them as display:inline; for float to work.
b) You should be using class instead of ID. An ID is supposed to appear once on a page only. Classes can appear as many times as you wish.
That's all:
<div id="previews">
<img src="preview.jpg" style="float:left;" />
<img src="preview.jpg" style="float:left;" />
</div>
You can also use this:
#previews img {
float:left;
}
<div id="previews">
<img src="preview.jpg" />
<img src="preview.jpg" />
</div>
<html lang="en"><head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>body {background: #F4F4F4;font-family: 'Lobster', cursive;}#logo {background: url(logo.png);width: 300px;height: 75px;margin: 70px 200px;}#container {width: 1300px;}h2 {text-align: center;font-size: 29px;color: #444;}p {text-align: center;font-size: 22px;color: #444;}.line {background: url(line.png);width: 972px;height: 1px;margin: 0 auto;}#previews {border: 5px solid #FFF;width: 300px;display:inline-block; vertical-align:top; margin:50px 100px;}</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg"></div>
<div id="previews"><img src="preview.jpg"></div>
</div>
</body></html>
You simply add display:inline-block; vertical-align:top; under the CSS for #previews. You will also need to reduce the amount of horizontal margin used for #previews because the width of the container is only 1300px.
Related
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>erjan_vue</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div id="erjan_vue_1">
<h1>events tutorial</h1>
<div id="canvas" v-on:mousemove="updateXY">{{x}}, {{y}}</div>
</div>
<script src = "main.js"></script>
</body>
</html>
But it's only visible when I change it in inspect chrome mode. I can change its bg color and see it:
Actual styles.css not working:
#canvas{
padding:200px 20px;
border: 5px solid red;
height: 200px;
border-color: red;
background-color: red;
width: 500px;
text-align: center;
}
taken from the tutorial here
The tutorial I m following was written a year ago(april 2017) and has no actual app.vue file which should have 3 things:
<template>
<script>
<styles>
Now this "styles" is where css stuff should go to.
I followed the advice of Sazzad Hosan from the comments above and just added a very ugly inline style:
<div style="padding:200px 20px;
border: 5px solid red;
height: 200px;
border-color: red;
background-color: red;
width: 500px;
text-align: center;" id="canvas" v-on:mousemove="updateXY">{{x}}, {{y}}</div>
</div>
And it worked, like Sazzad said - "inline styles" take precedence over others.
Body properties such as different font works but div tag properties like in #mainpic or #header just don't work
body {
font-family: Callibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
#mainpic {
<img src="../image/cutmypic.png";
alt="image not found";
/>background-position: "centre";
position: absolute;
bottom: 0;
center: 0;
}
}
#header {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>My Introduction</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/newcss.css" />
</head>
<body background="image/bg.jpg">
<div id=“ container”>
<div id=“ header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"></div>
<div id=“ content”>/div>
<div id=“ navigation”> a link to the other web page</div>
<div id=“ footer”> contains your name and student number</div>
</div>
</body>
</html>
Okay first up: use classes not IDs. Good css never has any ids in it (except for some very very specific cases)
Secondly, you got html in your css, so that does not work.
Thirdly, you cannot nest css selectors. Instead of
.wrapper {
/* some css */
.element {
/* some css */
}
}
you have to write
.wrapper {
/* wrapper css */
}
.wrapper .element {
/* element css */
}
Close all brackets properly in the CSS code, move the img tag from the CSS to the HTML code and don't use invalid properties or values ("centre", "center") in your CSS.
Also, you are using lots of typographical quotes in your codes. You have to replace all these with regular quotes - it won't work otherwise.
body {
font-family: Calibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
}
#mainpic {
background-position: center;
position: absolute;
bottom: 0;
}
#header {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>My Introduction</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/newcss.css" />
</head>
<body background="image/bg.jpg">
<div id=“ container”>
<div id=“ header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"><img src="../image/cutmypic.png" ; alt="image not found" ; /></div>
<div id=“ content”></div>
<div id=“ navigation”> a link to the other web page</div>
<div id=“ footer”> contains your name and student number</div>
</div>
</body>
</html>
body {
font-family: Callibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
}
#mainpic {
background-position: center;
position: absolute;
bottom: 0;
/*center:0;*/
}
#header {
color: white;
}
<body background="image/bg.jpg">
<div id=“container”>
<div id=“header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"></div>
<div id=“content”></div>
<div id=“navigation”> a link to the other web page</div>
<div id=“footer”> contains your name and student number</div>
</div>
</body>
The 1st your problem is that you have several typos.
For example, <div id = “content”>/div>.
The 2nd problem is that you can not use HTML tag in CSS.
The 3rd problem is that there is no syntax center in CSS.
And when you use background-position, you don't need to use " " , and you should write center NOT centre.
I am a beginner to HTML and CSS. i have some knowledge of javascript, not jquery and also responsive design.
So I want to make a 3 column grid aligned to center and each with 33.33% width. Also a little space between each horizontally and some space on either side. but i can seem to align it to the center.
here is my html. I also want it to be Responsive. It should be reduced to two columns then to one and stuff like that. How could i achieve this?
Here is my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="Home.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="layout" align="center">
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
<div class="success"> </div>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.success {
display:inline-block;
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center
}
.success li:last-child {
float: none;
width: auto;
}
.layout {
width:75%;
}
You need to start again.
Basically your html structure needs to reflect your 3 column layout. Usually this is achieved with <div> tags.
so something like:
<div id="content">
<div id="contentleft">
your first column content is here
</div>
<div id="contentcenter">
the stuff for the middle goes here
</div>
<div id="contentright">
etc. etc. etc.<br>
...
</div>
</div>
then your .css can do something along the following lines:
#content {
width: 900px;
}
#contentLeft {
width:33%;
float:left;
}
#contentcenter {
width:33%;
padding:1%;
float:left;
}
#contentright {
width: 33%;
float:right;
}
I am trying to place a div which contains a clickable picture on a div which contains a background. However, this keeps happening:
http://gyazo.com/2144dfe91b46898e125787b2f5249542
It goes below the image and I don't understand why.
here is my code:
!DOCTYPE html>
<html>
<head>
<title>SlammedPK</title>
<link rel="shortcut icon" href="dragonclaws.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css">
<style type"text/css">
#title{
height:100%;
width:100%;
display:inline-block;
}
#forum{
height:10%;
width:10%;
background-image:forum.png;
display:block;
}
</style>
</head>
</body>
<div id="container">
<div id="title" style="position:relative" alt="title">
<img src='fulltitle.png' style='width:100%;height:100%' alt='[]' />
</div>
<div id="forum" style="position:absolute" alt="forum">
<IMG SRC="forum.png" ALT="forum">
</div>
</div>
</body>
</html>
if you could help that would be wonderful.
I made this JsFiddle: http://jsfiddle.net/2c7eQ/
Make both #forum and #title are position: absolute
HTML:
<div id="container">
<div id="title">
div1
</div>
<div id="forum">
div2
</div>
</div>
CSS:
#title{
position: absolute;
border: 1px solid;
background-color: blue;
height:100%;
width:100%;
}
#forum{
position: absolute;
left: 100px;
top: 100px;
border: 1px solid;
background-color: green;
height:10%;
width:10%;
}
First off, your format for the background image is incorrect, you need background-image: url(forum.png); and the same thing for #title. I'm not sure why you give it a background image when you also have an img within it though
As for your issue, you need to give #container position:relative; or position:absolute. Absolutely positioned elements have to be a child or a relatively positioned parent
Hi well I basically want to move down my logo div which is inside my topBar div however when ever I use padding or margin it moves the whole top bar down or the logo just repeats its self (and yes I have tried background-repeat: no-repeat)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div id="logo">
<p>chattrd</p>
</div>
</div>
</body>
</html>
body {
background: #F7F7F7;
font-family:Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.alert {
font-size: 10px;
color: #FFF;
background: #1f1f1f;
height: 14px;
padding-left: 10px;
font-family: Arial;
}
.topBar {
background: #0C3;
height: 40px;
}
#logo {
background-image:url(../images/logo.png);
height: 26px;
width: 121px;
overflow: hidden;
display: block;
text-indent:-999px;
}
The reason it is behaving this way is that you are using the image as a background. If you want to carry on with this approach, the easiest way to be able to move it vertically is to place another div before the #logo-div like so:
<body lang="en">
<div class="alert">Do you want advertsing space? Contact us: <b>advertising#chattrd.com</b></div>
<div class="topBar">
<div id="spaceDiv"></div>
<div id="logo"></div>
</div>
</body>
The height of the spaceDiv can be used to move the #logo-div using the following CSS:
#spaceDiv{
height:6px;
}