I have an <img> tag inside a <div> tag and they both have classes but when I try to style the img class inside of CSS, it doesn't work? Also, whenever I try to set the div class to an id and change it in CSS, it disappears. Any help?
JSFiddle: https://jsfiddle.net/mmfm4vee/
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/loading.js"></script>
<!--Stylesheet Links-->
<link rel="stylesheet" text="text/css" href="css/style.css">
<link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">
<!--Font Links-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<!--Website Header-->
<div id="header">
<div class="steam-info">
<img class="steam-avatar" src="<?$steamprofile['avatar'];?>">
<ul>
<li><a href=#></a>
</ul>
</div>
</div>
</body>
CSS:
/* Website Header */
#header {
background:rgb(28,28,28);
width:100%;
height:60px;
position:absolute;
box-shadow:0px 0px 8px 2px black;
border-top:3px solid rgb(235,50,50);
z-index:99999999;
left:0px;
top:0px;
}
.steam-info {
background:rgb(50,50,50);
border-left:3px solid rgb(235,50,50);;
width:160px;
height:40px;
position:absolute;
z-index:999999999;
top:10px;
left:1160px;
}
.steam-info a {
display:block;
color:rgb(255,255,255);
height:100%;
width:100%;
font-size:30px;
}
.steam-avatar {
width:30px;
height:30px;
}
Looking through the code, there appears to be no problem adjusting the style of the image when using an image through placehold.it.
I simply replaced <?$steamprofile['avatar'];?> with http://placehold.it/200 and was able to both see the image, and succesfully change the way it displays with simple changes to:
.steam-avatar {
width: 100px;
height: 30px;
}
Therefor, I conclude that the problem is with the way your PHP script grabs the image from Steam.
Updated code with that slight change can be found here.
Sorry this can't be of more help, but the code appears to be functioning correctly aside from the image coming through from Steam.
Related
I have an external CSS file name main.css. The ID of nav and footer are working fine but the ID of header doesn't work. When I put the header part in HTML file, it works.
Why does it not work in CSS file.
HTML File:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<meta charset="UTF-8">
</head>
<body>
<div id="header">
<h1>Furkan İlhan</h1>
</div>
<div id="nav">
Hakkında<br>
Kariyer<br>
</div>
<div id="footer">
Tüm Hakkı Saklıdır. Furkanilhan.com
</div>
</body>
</html>
CSS File:
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
The image of result
Because You Use class="header" Property And External CSS Defined ID # Header.
So You Change
#header {
}
Use This Code In CSS
.header {
}
Work 100% Perfectly
Dhaval is wrong - You had it right with the #header since you have it as an id in your HTML.
remove the <style></style> tags from your CSS sheet.
Let me know how you go
Regards,
Kostantinos
It seems the links require id to be defined in each <div></div> to work, not just the class name.
My case was a bit different, where the links didn't work with just class defined in html and .clasname defined in css file.
My aim is to build a image slider, where WHILE the APPLE logo animation runs, the apple products swoop by from under. The problem is this, I have added #keyframes animation to make the iPhone appear from right (our right) and then leave as it swoops put of the screen to left.
But then when I added the MACBOOK, and I didn't even add an animation to it or anything, it runs along with the iPhone!
Here's the html and styles:
html:
<html>
<head>
<title>Slider</title>
<link rel="stylesheet" type="text/css" href="styles/styles_Apple.css">
<link rel="stylesheet" type="text/css" href="styles/styles_Google.css">
<link rel="stylesheet" type="text/css" href="styles/styles_Samsung.css">
<link rel="stylesheet" type="text/css" href="styles/styles_Nikon.css">
</head>
<body>
<div class="slider">
<div class="Apple_logo"><img src="images/logos/Apple_logo color.png" style="width:100px; height:125px;"></div>
<div class="iPhone_6"><img src="images/mobiles/Mobile1.png" style="height:400px" width="200px;"</div>
<div class="Apple_Macbook"><img src="images/laptops/apple macbook pro 2.png" style="height:400px; width:550px;"></div>
</div>
</body>
</html>
styles:
.slider
{
height:600px;
width:980px;
border:thick;
border-color:#000;
border-style:groove;
vertical-align:middle;
margin:0 auto;
}
.Apple_logo
{
border:thick;
border-color:#000;
border-style:groove;
width:100px;
margin-left:1000px;
-webkit-animation-name:Apple_logo_appear;
-webkit-animation-duration:10s;
}
#-webkit-keyframes Apple_logo_appear
{
0%{margin-left:1000px; opacity:.3}
50%{margin-left:440px; opacity:1}
100%{margin-left:440px; opacity:0;}
}
.iPhone_6
{
position:absolute;
border:thick;
border-color:#000;
border-style:groove;
width:200px;
height:400px;
margin-left:1000px;
-webkit-animation-name:iPhone_6_appear;
-webkit-animation-duration:2s;
-webkit-animation-delay:1s;
animation-fill-mode: forwards;
}
#-webkit-keyframes iPhone_6_appear
{
0%{margin-left:1000px; opacity:.3}
50%{margin-left:440px; opacity:1}
100%{margin-left:-500px; opacity:0;}
}
.Apple_Macbook
{
border:thick;
border-color:#000;
border-style:groove;
margin-left:1300px;
}
This code isn't right:
<div class="iPhone_6"><img src="images/mobiles/Mobile1.png" style="height:400px" width="200px;"</div>
it should be
<div class="iPhone_6"><img src="images/mobiles/Mobile1.png" style="height:400px;width:200px;"></div>
(notation of the height/width parameters within the style attribute, and the <img> tag isn't closed - this should be the cause of your problem.)
I have my css button that wont work, it only comes up as a simple hyper link..
I have it all setup right with the css reference and everything.. Heres a look at my code:
.B1 {
background-color:#44c767;
-moz-border-radius:16px;
-webkit-border-radius:16px;
border-radius:16px;
border:4px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:18px 63px;
text-decoration:none;
text-shadow:1px 0px 8px #2f6627;
}
.B1:hover {
background-color:#5cbf2a;
}
.B1:active {
position:relative;
top:1px;
}
<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<link rel="stylesheet" type="text/css" href="file:///Users/lucasaltmann/Desktop/styles2.css">
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>
CSS is top and HTML is bottom. It runs fine when I run it on here but its not working for me..
PS: I am running mac snow leopard and firefox (Chrome did not work either)
It works here but not on your computer - well the CSS is probably not loaded correctly. You have an absolute path to the CSS file, so try this instad:
<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>
Put you .html and style2.css in the same folder and it should work.
Another solution:
Replace your html with this:
<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<style>
.B1 {
background-color:#44c767;
-moz-border-radius:16px;
-webkit-border-radius:16px;
border-radius:16px;
border:4px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:18px 63px;
text-decoration:none;
text-shadow:1px 0px 8px #2f6627;
}
.B1:hover {
background-color:#5cbf2a;
}
.B1:active {
position:relative;
top:1px;
}
</style>
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>
Now the CSS is inside the html file.
I am looking to make a footer type thing for blakehawley.com where it has some different links and such. It is supposed to be a banner style, and by that I mean it is supposed to stay at the bottom and be fixed. The div is "menu"
Here is my HTML:
<html>
<head>
<link rel="stylesheet" media="all and (min-width: 1378px)" href="style/grid-1378.css">
<link rel="stylesheet" media="all and (min-width: 1218px) and (max-width: 1377px)" href="style/grid-1218.css">
<link rel="stylesheet" media="all and (min-width: 978px) and (max-width: 1217px)" href="style/grid-978.css">
<link rel="stylesheet" media="all and (min-width: 748px) and (max-width: 977px)" href="style/grid-748.css">
<link rel="stylesheet" media="all and (min-width: 0px) and (max-width: 747px)" href="style/grid-400.css">
<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<title>The Official Site of Blake Hawley</title>
</head>
<body>
<div id="homeimage">
<img src="style/images/blakehome.jpg">
</div>
<div id="name">
Blake Hawley
</div>
<div id="maincontent">
<a class="twitter-timeline" href="https://twitter.com/BlakeHawley5" data-widget-id="414439781083267072">Tweets by #BlakeHawley5</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div id="menu">
</div>
</body>
</html>
Here is my CSS:
body{
margin:0 auto;
}
#homeimage{
margin:0 auto;
margin-top:20px;
width:720px;
height:480px;
box-shadow:5px 5px 5px #888888;
}
#name{
text-align:center;
font-family:'Playfair Display', serif;
font-size:130px;
}
#maincontent{
margin-bottom:20px;
}
#menu{
position:fixed;
float:bottom;
height:200px;
width:1218px;
border:3px solid green;
box-shadow:0px -5px 5px #888888;
}
li{
list-style:none;
}
Anything that you guys see?
#menu{
position:fixed;
bottom: 0px;
height:200px;
width:1218px;
border:3px solid green;
box-shadow:0px -5px 5px #888888;
}
Guess did should do the trick, changed second rule
(Maybe make the width: 100% as well)
Float is for an image inside some text, can be left or right, instead of float, you should use positioning, in your case :
bottom:0px;
also, if you want your footer to take the whole screen, use
width:100%;
First the menu tag is empty(you cant see it becouse of it).
Second you didnt position it with using the properties left,top,bottom or right.
and Third there isn't such thing like "float:bottom;"
#menu{
position:fixed;
margin:0 auto;/*use it if you want to show middle of the webpage if not remove it*/
left:/* put*/ px;/* use it if you want to move your div from the left postion*/
height:200px;
width:1218px;
border:3px solid green;
box-shadow:0px -5px 5px #888888;
}
keep remember float:bottom is not correct rule more info visit www.w3schools.com !
Why isn't "position:fixed;" keeping my page header in the same place?
this happens due to display:flex for #pageTitle. The menu when expanded tries to fit in, pushing other elments in the same parent div.
Separate .responsive-menu from #pageTitle into a new div.
I need my banner to sit tight against the top of the browser. Problem is that there is a small white gap btween the div that the image sits in and the top...Ive tried setting padding to 0 for div and body and it doesnt work :-(
<!DOCTYPE html>
<html>
<head>
<title>Welcome Home</title>
<link type="text/css" rel="stylesheet" href="/Shared/Css/Style.css" />
<link type="text/css" rel="stylesheet" href="/Shared/Css/Navigation.css" />
<script language="javascript" type="text/javascript" src="../../Shared/Scripts/jquery-1.6.2.min.js"></script>
</head>
<body>
<div style="padding-top:0px;">
<div id="header-image">
<img alt="Header" src="../../Security/FileFetcher.aspx?RelativePathToFile=App/images/topnav.jpg&mimetype=image/jpeg" />
</div>
</div>
</body>
</html>
body
{
background: url("/Security/FileFetcher.aspx?RelativePathToFile=App/images/background.jpg&mimetype=image/jpeg") repeat-x scroll 0 0 transparent;
padding:0px 0px 0px 0px;
}
#main-content-container
{
margin-left:auto;
margin-right:auto;
width:930px;
border-left:2px solid Gray;
border-right:2px solid Gray;
}
#header-image
{
width:960px;
margin-left:auto;
margin-right:auto;
padding-top:0px;
}
You need to set the <body>'s margin:
body {
margin: 0px;
}
Try adding this above the body options in your stylesheet
* {margin:0;padding:0;}
You could also look at one of the many CSS reset options