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;
Related
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>
I am a new css programmer and there is a very annoying problem in my code. when I put the grey bars in they are not touching the left side of the screen they touch the right side but not the left side and I do not know why there is nothing in my code that is stopping them so I do not know why it would be doing that please help me fix it thanks! (the big white space in the middle is supposed to be there it is for a picture.)
<!doctype html>
<html>
<head>
<title>AndrewDevs.Com</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" />
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<style type="text/css">
#white{
color:white;
}
.large {
font-size:300%;
}
#green {
color:black;
}
.underline {
text-decoration:underline;
}
.bold {
font-weight:bold;
}
.picture{
position: absolute;
top: 45px;
right: 0;
width: 1870px;
height: 10px;
}
.greybox {
background-color:#a5a5a5;
position: absolute;
top: 380px;
right: 0;
width: 1870px;
height: 10px;
border: 3px solid #a5a5a5;
}
.connect {
background-color:#6b6b6b;
position: absolute;
top: 340px;
right: 0;
width: 1870px;
height: 40px;
border: 3px solid #6b6b6b;
}
.top {
top:10px;
width: 1870px;
height:700px;
z-index:2;
text-align: center;
}
.bottom {
background-color:#0a0a0a;
width: 1600px;
height:200px;
text-align: center;
}
.purplebox {
background-color:#6b6b6b;
position: absolute;
top: 0px;
right: 0;
width: 1870px;
height: 40px;
border: 3px solid #6b6b6b;
}
.greenbox {
top:0px;
width: 1870px;
height: 500px;
z-index:2;
text-align: center;
margin:150px 100px 30px 10px;
float:center;
font-family: 'Oswald', sans-serif;
}
}
p {
padding:0;
margin:0;
}
</style>
</head>
<body>
<div class="greybox">
</div>
<div class="purplebox">
<p class="large"></p>
</div>
<div class="picture">
<img src="code.jpg" alt="code" height="300" width="1870">
</div>
<div class="connect">
<p> Connect with me! </p>
</div>
<div class="top">
<p id="green" class="large">idfk</p>
</div>
</div>
<div class="greenbox">
<p id="green" class="large">idfk</p>
</div>
<div class="greenbox">
<p id="green" class="large">idfk</p>
</div>
<div class="bottom">
<p id="white" class="large">Connect With me!</p>
</div>
By default the body on the page has this css:
body {
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
at the top of your css file just add:
body {
margin:0;
}
this way you're working with 0 margins to begin with.
Margins of <body> don't matter because those grey bars are absolutely positioned to the right therefore they stick to the right side of <html> element. If the screen resolution (the width of your screen or window) is bigger then the width: 1870px;, they are gonna stick to the right side and leave an empty space on the left.
If you want those grey boxes to always stick to both sides of your screen, use width: 100%; or no width and left: 0; instead:
.connect {
background-color: #6b6b6b;
position: absolute;
top: 340px;
right: 0;
width: 100%;
height: 40px;
border: 3px solid #6b6b6b;
}
or
.connect {
background-color: #6b6b6b;
position: absolute;
top: 340px;
right: 0;
left: 0;
height: 40px;
border: 3px solid #6b6b6b;
}
Both will stretch the element to the width of their parent element.
But it is good to set the body's position to relative and get rid of its default margins. In my opinion, you shouldn't use the <html> tag for styling. It will make those absolutely positioned grey boxes stick to the sides of <body> and not <html>:
body {
margin: 0;
position: relative;
}
See this link to learn more about positioning: http://www.w3schools.com/css/css_positioning.asp
I have the following HTML5 code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
max-width: 960px;
margin: 0 auto;
font-size: 120%;
}
header, nav {
margin: 0;
padding: 0;
border: 1px solid black;
}
header {
border-color: red;
}
img.mainpicture {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<header>
<img class="mainpicture" src="http://s29.postimg.org/ajjbb0n07/apic.jpg" alt="A picture"/></header><nav>Navigation area.</nav>
</body>
</html>
Can someone please explain why there is about 5 pixels of empty space between the <header> and the <nav> content, and how can I remove it?
By adding
header {
padding-bottom: 1px;
}
to the CSS file, the height of the white space is extended by one pixel, so it doesn't seem to have anything to do with the padding of <header>.
EDIT: I would like to do it without using <nav style="position: relative; top:-7px;">.
Set display block on the image for fixing fitting issues.
body {
max-width: 960px;
margin: 0 auto;
font-size: 120%;
}
header,
nav {
margin: 0;
padding: 0;
border: 1px solid black;
}
img.mainpicture {
width: 100%;
display: block;
}
<header>
<img class="mainpicture" src="//lorempicsum.com/futurama/960/200/2" alt="A picture" />
</header>
<nav>
Navigation area.
</nav>
Just add
img.mainpicture{
.....................
.....................
vertical-align: top;
}
That will fix the issue:)
It could be because of the inner elements having a margin, that is protruding outside! And also since you have an <img />, give a display: block; to it. Try overflow: hidden; for both header, nav:
header, nav {
overflow: hidden;
}
header img {
display: block;
}
Set the property margin-bottom equal to zero.
margin-bottom: 0;
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.
Note: I am a beginner. For some reason, my links that were working don't work at all anymore. What am I doing wrong?
Here's the HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="portfoliostyles.css">
<title>Home</title>
</head>
<body>
<div class="header"><img class="hoofd" src="images/leaugeau.png" alt="logo">
<ul>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<img class="line" src="images/line.jpg" alt="lijn" width='95%' height='2px'>
<div class=content>
<img class="image" src="images/thumbnails/watrgatrthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/typhlotrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
<img class="image" src="images/thumbnails/anneketrainerthumb.jpg" alt="watrgatr" width=400px height=400px>
</div>
</body>
</html>
And here's my CSS:
#charset "UTF-8";
/* CSS Document */
html,body
{
height: 150%;
width: 100%;
margin: 0px 0px 0px 0px;
}
.hoofd
{
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.header
{
height: 216px;
width: 99%;
position: fixed;
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;
}
ul
{
list-style-type:none;
margin-right:5%;
padding:0;
text-align:center;
}
li
{
display:inline;
float:right;
margin-right:2%;
font-size:45px;
line-height: 280px;
}
.content
{
padding: 230px 0 0 1.5%;
}
a
{
font-family: "HelveticaNeue-light";
text-decoration: none;
color: #000000;
}
a:hover
{
font-family: "HelveticaNeue-light";
color: #E8DA62;
}
h1
{
font-family: "HelveticaNeue-thin";
font-size: 24px;
}
p
{
font-family: "HelveticaNeue-thin";
font-size: 12px;
}
edit: Oh, and to clarify: My pages where, indeed, in the root folder, so no more folder-linking necessary.
But it got solved, thanks! Gotta work something out for the fixed line thing though. But it'll work out.
the problem with the CSS code is you are using fixed position on some classes.
would be better if you remove position: fixed; from below these two classes.
For better understanding check the Demo.
.header
{
height: 216px;
width: 99%;
position: fixed; /*Remove this line; so anchor tag could work*/
background-color: #FFFFFF;
}
.line
{
margin: 0px 0px 15px 0px;
padding-top: 216px;
position:fixed;/*Remove this line; so anchor tag could work*/
}
you are overlapping with position:fixed
remove it from
.line
Demo
It's kinda hard to see without an actual example, but it looks like your .line is on top of them. If I'm correct:
Since it's position:fixed, it is being overlayed at the top, then you have given it a padding-top:216px; which is increasing the area it is consuming from the top, likely overlaying itself ontop of your header and navigation menu.
To fix it, you should figure out another way to position .line wherever you are trying to. You likely want top:216:
.line {
margin: 0px 0px 15px 0px;
top: 216px;
position:fixed;
}