I was wondering how I would delete the white space that is presented in this photo in css or html. I want the background to be transparent. Thanks
http://i.stack.imgur.com/IRlE9.png
This is the code I used :
<html>
<head>
<link rel="stylesheet" type="text/css" href="./StyleSheets/style.css">
</head>
<body>
<div id="header">
<div class="img">
<img src="./Images/Abado.png">
</div>
<div class="Navbar">
Home
About us
Forums
Login
Signup
</div>
</div>
</body>
</html>
body{
padding:0;
margin:0;
}
img{
height: 50px;
background-color:transparent;
}
#header{
margin:0;
padding:0;
width:100%;
background:#124EF4;
height: auto;
}
.Navbar{
margin:0;
padding:0;
float:left;
background: #0033BF;
}
.Navbar a{
text-decoration: none;
font-size: 18px;
color:white;
}
You can use photoshop or any other image editor program to make your images transparent. In photoshop, you can select the magic eraser tool and delete the white background, and save the photo as in png format.
Related
I want my footer inner div wrappers to mov from right to underneath left and center when I use responsive media queries. However, when moving last element "Contact us" from right to left, it goes below but it does not center, and the previous div "follow us" is not position in the same line as "copyright".
Codepen here
HTML
<!doctype html>
<html>
<head>
<title>Agency</title>
<meta charset="utf-8">
<link href="footer.css" rel="stylesheet" merdia="handheld">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="footer">
<h1>Footer</h1>
<div class="copyright">
<h3>Copyright</h3>
</div>
<div class="social">
<h3>Follow us:</h3>
<p> Twitter, Facebook, Youtube</p>
</div>
<div id="contactfooter">
<h2> Contact </h2>
<p>Contact Form would go here</p>
</div>
</div>
</body>
CSS
/*footer.css*/
*{
margin:0;
padding:0;
font-family: 'Open Sans', sans-serif;
}
body
{
background-color:#DCDCDC;
}
.wrapper{
max-width:1200px;
width:100%;
margin:auto;
}
.header{
width:100%;
background-color:green;
height:20vh;
}
.footer{
width:100%;
background-color:orange;
font-size:1em;
overflow:hidden;
padding-bottom:3%;
clear:both;
padding-top:5%;
border-top:3px solid #0099FF;
color:black;
}
.copyright{
width:25%;
background-color:red;
float:left;
margin-left:10%;
}
.copyright p{
font-size:0.938em;
line-height: 2em;
}
.social{
width:20%;
background-color:yellow;
float:left;
margin-left:8%;
}
#contactfooter{
width:20%;
background-color:blue;
float:right;
margin-right:10%;
display:block;
}
#contactfooter h2, #contactfooter{
font-size:1.250em;
text-align: center;
}
/*---------MEDIA QUERIES----------*/
#media (max-width:1020px){
.copyright{
margin-left:25%;
float:left;
}
.social{
float:right;
margin-right:25%;
}
#contactfooter{
float:left;
width:30%;
margin:auto; /*does not margin to the center of the footer wrapper.. why?*/
/*margin-right:0%;
margin-left:45%;*/
}
}
You do not need to change their margins for smaller screens, just fix their width.
I am trying to learn HTML/CSS ,for that I am trying to convert a PSD TO HTML,here is what I am trying to do
Here what I have don't so far
,as you see there is space between my two divs ,and I don't seem to undestand why ,
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" >
</head>
<body>
<header>
<div class=Container>
<p> <span style="font-size:16px;color:#b4b4b4 ">phu concepts</span><br>
<span style="font-size:52px "><span style="color:#990202">TEST</span>
<span style="color:#f1a2a2">PROJECT</span></span>
</p>
<img src="Images/ChatImg_02.png" style="position: relative;float:right;top:-90px" >
<div id="headerDIV" >
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
SERVICES
</li>
<li>
GALLERY
</li>
<li>
CONTACT US
</li>
</ul>
</div><!--headerDIV-->
</div><!--headerDivContainer-->
<div id="topRedStrip"></div>
</header>
<section id="main">
<div class=mainContainer>
<div class="slider"> <!---THIS is the DIV that doesn't listen-->
<img src="Images/sliderImage_06.png" alt="Slider Image" style="position:relative; float:left">
</div>
</div><!--Container-->
</section>
<footer>
</footer>
</body>
</html>
and here is my css
#headerDIV
{
}
header p
{
font-family: "myriad Pro";
margin-bottom:0;
margin-top:0;
width:500px;;
}
#chatDiv
{
position:relative;
float:right;
}
#topRedStrip
{
position:relative;
top:12px;
background-repeat: repeat-x;background-image:url('../images/redStrip_03.jpg');
width: 100%;
z-index: -2;
height: 8px;
}
.slider
{
position:relative;
float:left;
}
#headerDIV
{
position:relative;
top:0;
right:-90px;
z-index:-1;
background-image:url('../images/headerBLACk_03.png');
background-repeat:no-repeat;
width:470px;
height: 200px;
float: right;
}
.Container
{
margin: 0 auto;
width:936px;
}
.mainContainer
{
margin: 0 auto;
width:936px;
height:auto;
}
header ul
{
padding: 0;
margin:0;
z-index: -1;
}
header li
{
list-style-type: none;
float:left;
padding-left: 30px;
font-family: "myriad Pro";
font-size:12px;
color: #504848;
padding-top:9px;
}
Can anyone tell me why I get empty space between the div,
Thanks
Every major browser has an inspect mode which allows you to examine the box model and to alter CSS definitions until they match. I suggest you dig into these tools, as they will open you the door to handle all of these questions.
Here's Chrome as example:
Once you have entered the inspection mode, you can browse through the elements and see what is causing the distance.
It seems to be because the height of your header div is 200px:
#headerDIV
{
position:relative;
top:0;
right:-90px;
z-index:-1;
background-image:url('../images/headerBLACk_03.png');
background-repeat:no-repeat;
width:470px;
**height: 200px;**
float: right;
}
It doesn't need to be 200px when the only thing in it is the black navigation bar.
so I did searches on here beforehand, trying to find an answer to my question, but all the solutions I found gave me no results. Basically, I have an image in my div#wrapper that I'd like to display, but it won't unless I fill the area -after- the respective div with text.
I have overflow:auto; in my #wrapper since I have floats in the succeeding divs.
CSS file:
#media only screen and (min-width: 25em) {
html {
background: url(images/gridbg.jpg) repeat fixed center top;
}
}
#media only screen and (max-width:25em) {
html {
background-color:#0c0c1f;
}
}
img {
border:0px;
}
textarea:focus, input:focus{
outline: none;
}
#wrapper {
margin:0 auto;
width:60em;
overflow:auto;
background-image:url(images/cont-bg.png);
}
#content {
text-align:justify;
position:fixed;
width:59em;
height:100%;
overflow:auto;
padding-top: 0.4em;
padding-bottom: 0.4em;
padding-left: 0.4em;
padding-right: 0.4em;
outline:none;
z-index:2;
margin-top:12em;
}
#homeNav {
position:fixed;
float:left;
margin-left:0.65em;
margin-top:0.65em;
z-index:3;
}
#primaryNav {
z-index:2;
float:right;
margin-left:28em;
margin-top:1em;
position:fixed;
}
#navGFX {
background-image:url(images/navGFX.png);
background-repeat:no-repeat;
width:60em;
height:8em;
float:left;
position:fixed;
z-index:1;
margin-top:3em;
}
HTML file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ag Design</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="scrollstyles.css"/>
<script type='text/javascript' src="js/flexcroll.js"></script>
</head>
<body>
<div id="wrapper">
<div id="navGFX">
<div id="homeNav"><img src="images/buttons/btn_logo.png"></div>
<div id="primaryNav">
<img src="images/buttons/btn_home.png">
<img src="images/buttons/btn_link1.png">
<img src="images/buttons/btn_link2.png">
<img src="images/buttons/btn_link3.png">
<img src="images/buttons/btn_link4.png">
</div>
</div>
<div id="content" class="flexcroll">
This area is full of filler text
</div>
</div>
</body>
</html>
I haven't the foggiest clue what I'm doing wrong. Anyone have any ideas? :/
Just remove the CSS:
position: fixed;
from the #wrapper id and the background-image will appear
So, essentially the last time I ever did any web-page development, there was only HTML, and I didn't have anymore than a basic understanding anyways. So now, I'm playing catch up and trying to learn CSS. My issue is a horizontal navbar, which doesn't stay perfectly centered. I've tried adjusting widths, and borders, and margins but I'm missing something.
With my current layout, there is a tad more whitespace on the left than the right, and I am stuck.
Here's the jsfiddle:
http://jsfiddle.net/PkvZ7/
CSS:
<!-- JASCO NAVBAR -->
ul
{
width:100%;
list-style-type: none;
margin-left:auto;
margin-right:auto;
padding:none;
overflow:hidden;
}
li
{
align:center;
width:20%;
margin:0;
padding:0;
display:inline-block;
list-style-type: none;
}
a:link,a:visited
{
display:block;
width:100%;
font-weight:bold;
font-size:20px;
color:#FFFFFF;
background-color:#FF6103;
text-align:center;
padding:5px;
text-decoration:none;
font-variant:small-caps;
}
a:hover,a:active
{
background-color:#000000;
color:#FF6103;
}
#container {
width:100%
}
<!-- TOP CSS-->
.top {
position:absolute;
width:80%;
height:10%;
margin-left:auto;
margin-top:20px;
margin-right:auto;
color:#000000;
padding:0;
}
<!-- CONTENT CSS-->
.content {
position:absolute;
width 100%;
margin-left:10px;
margin-right:10px;
padding:3px;
color:#dddddd;
}
#img
{
}
<!-- TOP IMAGE CSS-->
img.center {
display:block;
margin-left:auto;
margin-right:auto;
}
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jascostyle.css">
<title>Single"Frame" Test</title>
</head>
<body>
<div id="container">
<center>
<div class="top">
<img class ="center" width="80%" height="5%" href="#temp" src="#temp" alt="JASCO ENERGY"/>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class="content">
<h1>This is under construction!</h1>
</div>
</div>
</body>
</html>
I appreciate any help/explanation on this matter.
Thanks.
You need a fixed width + margin-left:auto and margin-right:auto. You should not be using absolute positioning for your content - let it flow naturally.
The <center> tag has been deprecated, so use the same technique for your outer "container" wrapper with a width of 960px;.
ul {
width:500px;
list-style-type: none;
margin-left:auto;
margin-right:auto;
padding:0;
}
In general when using list-based menus, use float:left on your LI, use display:block on the A-tag and put all other styling on the A-tag, not the list itself.
See my tutorial: I Love Lists.
I am learning on how to work with CSS. Currently, I am trying to learn about CSS positioning. I use different background color for each div section, so I know which area of the page that gets affected when I make code changes.
I am working right now on my header page and stumbled into one thing that I do not understand. I have a logo and put it inside its own div. The problem that I can see, below the logo there is a whitespace (i use pink background color for the div) and I cannot get rid of it. So below is the code that I use and the screenshot of what the header looks like currently.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Print Repair Form</title>
<style type="text/css">
* {
margin:0;
padding:0;
font: 12px/1.5 Georgia, serif;
}
#page-wrap {
width: 800px;
margin: 0 auto;
}
#header {
background-color:#88d;
overflow: auto;
}
#logo {
float:left;
background-color: #ffccff;
}
#logo a img {
border:none;
}
#address-container {
display: table;
float: left;
width: 164px;
background-color: #FC730A;
height: 104px;
}
#address-content{
display:table-cell;
vertical-align: middle;
}
#repair-header {
background-color:#d4d4d4;
float:left;
width:380px;
}
#customer-info {
float: left;
width:220px;
background-color: #ffff99;
}
#wo-info {
background-color: #99ff99;
}
#content {
clear:both;
background-color:#33d;
}
</style>
</head>
<body>
<div id="page-wrap">
<div id="header">
<div id="logo">
<img src="/fms/images/windows8-cropped.jpg" />
</div> <!-- div logo -->
<div id="address-container">
<div id="address-content">
456 Some Addresses <br />
The City, XP 444411 <br />
1-800-000-0000 <br />
www.someaddress.com
</div>
</div>
<div id="repair-header">
<p>Repair Detail</p>
</div>
<div id="customer-info">
<p>12345678</p>
<p>Facility Name</p>
</div>
<div id="wo-info">
<p>WO: 12345789</p>
</div>
</div> <!-- div header -->
<div id="content">
<p>Content is here</p>
</div>
</div> <!-- div page-wrap -->
</body>
</html>
Add the property
line-height: 0;
to your logo div
#logo {
float:left;
background-color: #ffccff;
line-height: 0;
}
and modify your image css to:
#logo a img {
border:none;
vertical-align:bottom;
}