I am designing a header menu for my website. I want to place my logo on header menu such that I get something like this :
But, with my css, what I am getting is :
My CSS is :
*{
background-color: #DBDBDB;
}
.headerMenu{
background-image: url(../img/headerMenu.png);
height: 50px;
border-top: 0px;
border-bottom: 0px;
padding-top: 0px;
padding-left: auto;
padding-right: auto;
width: 100%
}
#wrapper{
background-image: url(../img/headerMenu.png);
margin-right: auto;
margin-left: auto;
width: 1000%;
padding-top: 0px;
padding-bottom: 0px;
}
.logo{
width: 80px;
}
.logo img
{
padding-left: 50px;
width: 150px;
height: 38px;
}
PS : The logo is transparent. I don't know why this is happening. Please help me out.
HTML :
<!doctype html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
<div class="headerMenu">
<div id="wrapper">
<div class="logo">
<img src="./img/logoS.png"/>
</div>
</div>
</div>
</body>
</html>
Remove background Color from
*{
background-color: #DBDBDB;
}
Make it as
body{
background-color: #DBDBDB;
}
Solution 1
Remove:
*{
background-color: #DBDBDB;
}
and only apply that to the elements you need (probably the body or .wrapper).
Solution 2
Remove the background of .logo and img
.logo, img {
background-color:none;
}
Related
For the life of me I absolutely CANNOT figure out why my background image is not working. Any help to solve this would be GREATLY appreciated. In the CSS portion, you will find "Backg.jpg". For whatever reason, it refuses to show up even when put as a png, named differently, put in a different folder, or even put into the html (Background image for the body). It's currently structured into a folder called "img". If needed, I can provide screenshots to better show how the folders are. But I can near 95% guarantee folder structure isn't the issue unless i'm just missing something critical.
<!doctype html>
<html lang="">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="socialmediaicons">
<img src="img/fb.png">
<img src="img/twitter.png">
<img src="img/g+.png">
</div>
<h1>COMPUTER</h1>
<h3>Services for both home, and business</h3>
</div>
</div>
</body>
</html>
And
#import url(https://fonts.googleapis.com/css?family=Martel+Sans);
* {
padding: 0;
border: 0;
margin: 0;
font-family: 'Martel Sans', sans-serif;
}
body {
background-image: url(img/backg.jpg);
}
#wrapper {
background-color: #ffffff;
background-position-x: center;
background-position-y: top;
background-position: center top;
background-repeat: no-repeat;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#socialmediaicons {
width: 12%;
margin: 0 auto;
}
#socialmediaicons img {
width: 35px;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
}
#header {
border: 2px solid red;
}
#header h1 {
text-align: center;
font-size: 120px;
padding-top: 25px;
letter-spacing: 5px;
}
#header h3 {
text-align: center;
padding-top: 10px;
font-size: 18px;
padding-bottom: 10px;
}
File structure can be found
here
URLs in CSS files are relative to the CSS file that contains them.
In other words, the file you're trying to load from your CSS is:
/css/img/backg.jpg
Change the url to either be absolute (the FQDN and path) or navigate relative to the CSS file:
url( ../img/backg.jpg );
Please remove background-color from #wrapper
#wrapper {
/*background-color: #ffffff;*/Remove or comment this line
}
#import url(https://fonts.googleapis.com/css?family=Martel+Sans);
* {
padding: 0;
border: 0;
margin: 0;
font-family: 'Martel Sans', sans-serif;
}
body {
background-image: url(https://image.freepik.com/free-vector/abstract-background-in-geometric-style_1013-17.jpg);
}
#wrapper {
/*background-color: #ffffff;*/
background-position-x: center;
background-position-y: top;
background-position: center top;
background-repeat: no-repeat;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#socialmediaicons {
width: 12%;
margin: 0 auto;
}
#socialmediaicons img {
width: 35px;
padding-left: 10px;
padding-right: 10px;
padding-top: 15px;
}
#header {
border: 2px solid red;
}
#header h1 {
text-align: center;
font-size: 120px;
padding-top: 25px;
letter-spacing: 5px;
}
#header h3 {
text-align: center;
padding-top: 10px;
font-size: 18px;
padding-bottom: 10px;
}
<html lang="">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="socialmediaicons">
<img src="img/fb.png">
<img src="img/twitter.png">
<img src="img/g+.png">
</div>
<h1>COMPUTER</h1>
<h3>Services for both home, and business</h3>
</div>
</div>
</body>
</html>
Both Matt and Moishe have a point, so first check filenames and positions.
After that you'll notice that it still won't work because of your wrapper id:
#wrapper
it has 100% width/height and it's overlaying over your body with position: fixed and top:0; left:0.
If you remove that wrapper you'll notice that it's showing image correctly.
Could be a misspelling... try to add it manually in your <div> to see if it reads accordingly. ie: <img src="img/back.jpg"> Because you'll get intellisense aid, that should be the right route to copy and paste in your CSS.
Another try.. just convert your png file to jpg.... maybe is inheriting transparency or white background which melt with your body css... Let me know if helps.
Don't work background-image in div with class nav-item. All images are in the same directory. Background in header works. And with img src everything is good. Where is the problem?
I tried everything.
header {
background: url('backSmall2.png');
height: 670px;
}
img {
width: 14%;
transform:skewY(-1deg);
margin-top: 40px;
margin-left: 40px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transform: rotate(-3deg);
}
.nav-item {
width: 12%;
background-image: url('frame.png');
margin-top: 80px;
margin-left: 140px;
}
.logo-contacts {
background-image: url('frame.png');
}
.contacts {
width: 100%;
height: 300px;
background-color: aqua;
}
<!DOCTYPE html>
<html>
<head>
<link href="normalize.css" rel='stylesheet'>
<link href="index-style.css" rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<script src="jquery-2.2.1.js"></script>
</head>
<body>
<header>
<img src="logo1.png">
<div class="nav-item"></div>
</header>
<a name="contacts">
<div class="contacts">
</div>
</a>
</body>
</html>
You should give your background-image some more information about position.
For example:
.nav-item {
width: 12%;
background-image: url('frame.png');
background-position: center; /* Added */
background-size: cover; /* Added */
background-repeat: no-repeat; /* Added */
margin-top: 80px;
margin-left: 140px;
}
Read more about the background property at Mozilla Developer Network.
The problem is that your div is empty - So - it has no height. Try adding height to the CSS class:
.nav-item {
width: 12%;
background-image: url('frame.png');
margin-top: 80px;
margin-left: 140px;
height: XXXpx;
}
<!-- language: lang-css -->
header {
background: url('backSmall2.png');
height: 670px;
}
img {
width: 14%;
transform:skewY(-1deg);
margin-top: 40px;
margin-left: 40px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
transform: rotate(-3deg);
}
.nav-item {
width: 600px;
height:600px;
background-image: url('frame.png');
margin-top: 80px;
margin-left: 140px;
}
.logo-contacts {
background-image: url('frame.png');
}
.contacts {
width: 100%;
height: 300px;
background-color: aqua;
}
<!DOCTYPE html>
<html>
<head>
<link href="normalize.css" rel='stylesheet'>
<link href="index-style.css" rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<script src="jquery-2.2.1.js"></script>
</head>
<body>
<header>
<img src="logo1.png">
<div class="nav-item"></div>
</header>
<a name="contacts">
<div class="contacts">
</div>
</a>
</body>
</html>
Basicly if you look at http://drugraid.3owl.com you can see they have a banner and when you resize the webpage the middle column stays cenetered at all times while the side banners slowly creep in to the center. Here is the code i have so far. It would be great if someone helped me.
<!--HTML CODE-->
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Testing layouts</title>
</head>
<body>
<div id="wrapper">
<div id="left">1 TEST</div>
<div id="middle">2 TEST</div>
<div id="right">3 TEST</div>
</div>
</body>
</html>
CSS CODE
body {
margin: 0px;
}
#wrapper {
height: 35px;
padding-top: 2px;
padding-left: 2px;
padding-right: 2px;
min-width: 900px;
}
#left {
background-color: #ADA5A1;
height: 35px;
width: 16%;
float: left;
}
#middle {
background-color: #7D726D;
height: 35px;
width: 68%;
float: left;
}
#right {
background-color: #ADA5A1;
height: 35px;
width: 16%;
float: left;
}
ALSO if you have time u can try to make it work with... the margin of 2px so the boxes have spacing of 2px; next to each other
try just one container centered
http://codepen.io/gcyrillus/pen/IdrGa
#maincontainer {
min-height:100%;
width:60%;
min-width:600px;
margin:auto;
}
I have a div and when i put a picture inside that dive and only set the width of the picture so it can have its proper proportions the div does not expand to the size of the div its in?
Please could you help?
(If you run the code below I want the pink div to expand when I add anything into it)
Thanks a lot!
html
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="gigantic">
<div class="main">
<div class="twitterPP">
<img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png">
</div>
<div class="mainMedia">
<img src="http://rack.1.mshcdn.com/media/ZgkyMDEzLzAzLzA4LzY1L2F0dC4yZjU4Mi5qcGcKcAl0aHVtYgk5NTB4NTM0IwplCWpwZw/91fe06f6/108/att.jpg">
</div>
</div>
<div class="main">
</div>
</div>
</body>
</html>
css
.gigantic
{
width: 900px;
margin-right: auto;
margin-left: auto;
background-color: #0f0;
padding: 6px;
margin-top: 100px;
}
.main
{
width: 800px;
background-color: #f0f;
margin-right: auto;
margin-left: auto;
margin-bottom: 100px;
}
.twiterpp
{
width: 60px;
float: left;
margin-right: 50px;
margin-left: 50px;
}
.twitterpp img
{
width: 55px;
height: 55px;
border-radius: 3px;
margin-left: 6px;
margin-top: 6px;
position: relative;
}
.mainMedia
{
float: right;
width: 700px;
}
.mainMedia img
{
width: 700px;
}
Try setting like this -
HTML
<div class="img-box"></div>
Css -
.img-box {
background-image: url(images/yourimg.gif);
background-repeat: no-repeat;
width: 100px;
padding: 0px 0px 0px 0px;
}
Then set width to match your own preference and padding to control image placement
You can use height:auto; to set the height of the div automatically when the image changes. The same for width as well if you want to set the width automatically.
Also you typed .twitterpp when it should be .twitterPP. Avoid using caps for classes and ids.
I have an image, and then a series of links. The hover works as intended on the text links, but when I place it on an image, in chrome and safari it only changes the background color for a portion of the image, not the whole thing...which I really dont understand. I tried jsfiddle as well as some of the other tools mentioned on SO, please look at the code below if you know why this is happening:
<html>
<head>
<title>Welcome!</title>
<style type="text/css">
#header {
background-color:#2C2C2C;
height:88px;
width:100%;
margin: 0px auto 0 auto;
}
#header_logo_link {
float: left;
width: 250px;
}
#header_logo_link img {
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 10px;
background: transparent;
}
#header_logo_link :hover {
background-color: #4d4d4d;
}
body, .wrapper {
min-height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
min-height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header">
<div id="header_logo_link">
<img src="logo.png">
</div>
<div id="header_logo_link">
Home
</div>
</div>
</div>
</body>
</html>
I'm not exactly sure what you're asking, but if you're trying to change the color around the image when it's rolled over, try adding some padding to the a element and display:block.
<html>
<head>
<title>Welcome!</title>
<style type="text/css">
#header {
background-color:#2C2C2C;
height:88px;
width:100%;
margin: 0px auto 0 auto;
}
#header_logo_link {
float: left;
width: 250px;
}
#header_logo_link img {
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 10px;
background: transparent;
}
#header_logo_link :hover {
background-color: #4d4d4d;
}
body, .wrapper {
min-height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
min-height: 100%;
}
a.img_rollover{
padding:5px;
display:block;
}
a.img_rollover:hover{
background-color: #00F; /*This is your new rollover color*/
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header">
<div id="header_logo_link" class="img_rollover">
<img src="logo.png">
</div>
<div id="header_logo_link">
Home
</div>
</div>
</div>
</body>
</html>