I'm copying a website to train with CSS (I'm trying to reproduce this:click here to see the image) but I'm having a problem copying borders, this is the result: click here to see and this is the code that I wrote:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Technology - BBC News</title>
<style>
.topbar {
width: 1000px;
height: 40px;
background-color: #ffffff;
}
body {
margin: 0px;
padding: 0px;
}
.logo {
margin-top: 8px;
width: 100px;
float: left;
margin-left: 16px;
}
.topbar-section {
border-left: 1px solid grey;
height: 40px;
float: left,
}
</style>
</head>
<body>
<div class="topbar">
<img src="bbc-blocks-dark.png" class="logo"></div>
</div>
<div class="topbar-section">Sign in</div>
</body>
</html>
May I have your help please?
When I look at this code in Chrome - I can see the left border on .topbar-section.
When you say you are having problems - can you tell us what is happening? Are they not showing, or showing incorrectly?
From what I can see - the main problem is that you have made 2 separate divs where it should be one div inside another.
You've also got 3 closing and only 2 opening - if you are using an editor such as Atom or Notepad++ this can help you keep track of your opening and closing elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Technology - BBC News</title>
<style>
.topbar {
width: 1000px;
height: 40px;
background-color: #ffffff;
}
body {
margin: 0px;
padding: 0px;
}
.logo {
margin-top: 8px;
width: 100px;
float: left;
margin-left: 16px;
border-right: 1px solid grey;
}
.topbar-section {
height: 40px;
float: left;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="topbar">
<img src="bbc-blocks-dark.png" class="logo">
<div class="topbar-section"><p>Sign In</p></div>
</div>
</body>
</html>
Related
I have the following CSS code. For some reason, the background-color is not working. can somebody pls help?
<!DOCTYPE HTML>
<!--Inform the Browser that the document is HTML-->
<html lang="en-US">
<head>
<meta charset="UTF-8">
<head>
<style type="text/css">
.leftpane{
width: 20%;
height: 80%;
border-color: brown;
border-width: .25em;
border-style: double;
float: left;
margin-right: 1em
background-color: orange;
}
</style>
<title>Trying CSS </title>
</head>
<body>
<div class="leftpane">
hi hi hi
<br/>
</div>
</body>
</html>
You forgot to put semicolon after previous rule:
margin-right: 1em /* <------ ooops! */
background-color: orange;
Lack of ; makes parser ignore everything following after, so background-color: orange; is never considered.
semicolon is missing before the background-color, Please correct it, Give semicolon to
margin-right: 1em;
Try this using correct CSS syntax....
.leftpane {
width: 20%;
height: 80%;
border-color: brown;
border-width: .25em;
border-style: double;
float: left;
margin-right: 1em;
background-color: orange;
}
<div class="leftpane">
hi hi hi
<br/>
</div>
I am helping a student with a project and we are going through a tutorial. The tutorial is here:
https://ihatetomatoes.net/demos/parallax-scroll-effect/
Here is our index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>joeys school project</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<body>
<main>
<section id="slide-1" class="homeSlide">
<div class="bcg" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#slide-1">
<div class="hsContainer">
<div class="hsContent" data-center="opacity: 1" data-106-top="opacity: 0" data-anchor-target="#slide-1 h2">
<h2>Mac Vs. Windows</h2>
<p>Which is better? Which should you choose?</p>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
Here is our main.css:
body {
margin: 0;
}
.mac_header {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}
/* CSS */
.hsContainer {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
opacity: 0;
}
.hsContent {
max-width: 450px;
margin: -150px auto 0 auto;
display: table-cell;
vertical-align: middle;
color: #ebebeb;
padding: 0 8%;
text-align: center;
}
.hsContent h2,
.copy h2 {
color: #ffffff;
font-size: 45px;
line-height: 48px;
margin-bottom: 12px;
}
.hsContent p {
width: 400px;
margin: 0 auto;
color: #b2b2b2;
}
.hsContent a {
color: #b2b2b2;
text-decoration: underline;
}
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
}
/* Slide 1 */
#slide-1 .bcg {
background-image:url('../img/computers-1227142.jpg');
height: 733px;}
The issue is we can see the block for the text when we inspect the page in Chrome, but it is not displaying the text over the image. All we see is the outline of the div where it is located. We have researched how to get this working and also followed the tutorial correctly. Also we have compared our code to the tutorial and can't see where the disconnect is. Any ideas? At this point a solution that works instead of what is in the tutorial will be fine as well.
Inspite of setting all margins and padding to 0, I'm suddenly finding that processing my html & css using a Prepros, is adding extra (unwanted) space under my last item eg. footer. While running the same html & css directly from Notepad++, does not do this (thankfully). Can someone please explain why this is happening since I will eventually be using Prepos and running from a local host.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8">
<title>Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>header
</header>
<div class="wrapper">wrapper1
</div>
<div class="wrapper">wrapper2
</div>
<footer>footer
</footer>
</body>
</html>
Here is the CSS:
html{
margin: 0;
padding: 0;
border: 3px solid green;
}
body{
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
border: 3px solid lightblue;
height: 100vh;
}
header{
flex: 1;
height: 50%;
background-color: red;
border: 3px solid black;
}
.wrapper{
flex: 1;
height: 20%;
background-color: blue;
border: 3px solid black;
}
footer{
height: 5%;
position: absolute:
bottom: 0;
background-color: orange;
margin: 0;
padding: 0;
}
Here are images of the same code running, first from file:/// and the other from localhost:
(edit: addition)Is it possible that this has something to do with the prepros.cfg file that gets added by Prepros? I am also using a trial version of Prepros - could this be causing the issue? Would appreciate any clarification on this matter. NOTE: Above is the discrepancy in every browser i tried it on (Chrome, Firefox and Opera).
I can't seem to get my div to align side by side inside a div, can someone see where the problem is? I am trying to position the divContainer element with a height up to the buttonPanel element and the 2 testDiv elements positioned side by side. I also tried setting the testDiv element with float: left but that didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Test</title>
<style type="text/css">
* {
font-family: tahoma;
font-size: 8pt;
}
#buttonPanel {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: right;
background-color: buttonface;
}
#buttonPanel hr {
margin: 0;
}
#buttonPanel button {
margin: 10px;
width: 75px;
}
#divContainer {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 45px;
border: 2px solid #FFFF00;
}
.testDiv {
display: inline-block;
width: 50%;
height: 100%;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="divContainer">
<div id="test1" class="testDiv">test1</div>
<div id="test2" class="testDiv">test2</div>
</div>
<div id="buttonPanel">
<hr/>
<button id="btnOK">OK</button>
<button id="btnCancel">Cancel</button>
</div>
</body>
</html>
Let me give you an example:
you have two div left-div say ldiv and right-div say rdiv.These divs are inside main-div say mdiv
ie
<div class = "mdiv">
<div class="ldiv">
</div>
<div class="rdiv">
</div>
</div>
then you css shoul be like this:
#mdiv{}
#ldiv {float:left;}
#rdiv{ float:left;}
Make the following changes to your code: http://jsfiddle.net/ak9Gs/. box-sizing instructs the browser to take padding and borders into account when sizing an element.
CSS:
.testDiv {
width: 50%;
height: 100%;
border: 2px solid blue;
box-sizing: border-box;
}
.testDiv:first-of-type {
float: left;
}
.testDiv:first-of-type {
float: right;
}
You are giving width as 50% and border with 2px that's why your div'a were not placed sise by side. If you remove border you can get your div's as you need.
DEMO
CSS:
.testDiv {
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#ccc;
}
.testDiv:first-child{
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#f0f0f0;
}
I gave color difference instead of border for both test div's.
change the testDiv class to have display of inline then they will be side by side
.testDiv {
display: inline;
width: 50%;
height: 100%;
border: 2px solid blue;
}
Hope this helps.
I'm having trouble with extra padding (4px) between two IMG tags. This occurs in Firefox 7.0.1, Safari 5.1.1, Chrome 11.0.696.68, and Opera 10.53 on a Mac (Snow Leopard).
I have uploaded the example here:
http://husnoo.com/img_extra_space/img_extra_space.html
With a screenshot of what it looks like:
http://husnoo.com/img_extra_space/shot.png
The 4 pixels between the two IMGs shouldn't be there.
Thanks!
Nawal.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Title here</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
toolbar {
background-color: #ddd;
margin: 0px;
padding: 0px;
width: 32px;
height: 32px;
}
#tool1 {
background-color: #0dc;
margin: 0px;
padding: 0px;
width: 32px;
height: 32px;
}
#tool2 {
background-color: #6dc;
margin: 0px;
padding: 0px;
width: 32px;
height: 32px;
}
</style>
</head>
<body>
<div id="toolbar">
<img id="tool1" src="select.png">
<img id="tool2" src="transform_move.png">
</div>
</body>
</html>
Don't break lines between images instead of
<img id="tool1" src="select.png">
<img id="tool2" src="transform_move.png">
do
<img id="tool1" src="select.png"><img id="tool2" src="transform_move.png">
You have to remove the space between the two img tags.
Or you can add display:block; to them and float:left;