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.
Related
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.
So I have this image that 300px by 100px and its 3 icons in one I want to use it using html and css but I cannot access the folder the image is on my desktop and the path of my file html is C:\Users\User\Desktop\index1.html. Here is the html and css any help I am new to this so I am kinda lost.
HTML FILE
<!DOCTYPE html>
<html>
<head>
<head>
<link rel= "stylesheet" href="primary2.css">
</head>
<body>
<ul class="button">
<li class="yellow"></li>
<li class="purple"></li>
<li class= "red"></li>
</ul>
</body>
</html>
primary.css file
.button{
list-style: none;
margin:0;
padding:0;
}
.button li {
width:100px;
height:100px;
display:inline-block;
background-color: #000;
margin-right:10px;
}
.button li.info{
background : url(../sprite.JPEG) no repeat;
}
The relative path ../ refers to the parent folder, i.e. C:\Users\User\ when called from C:\Users\User\Desktop\
To refer to files in the same directory as your file, you can use the relative path ./, or in most cases, the preceding slash isn't necessary... just specifying the file name should suffice for files located within the same folder.
../sprite.JPEG from C:\Users\User\Desktop\ refers to C:\Users\User\sprite.JPEG whereas ./sprite.JPEG or sprite.JPEG would refer to C:\Users\User\Desktop\sprite.JPEG.
Notice also how you've specified the .css file in your html link tag...
My comment obfuscated the code a bit, so I'll put the revision to the CSS here:
.button{
list-style: none;
margin:0;
padding:0;
}
.button li {
width:100px;
height:100px;
display:inline-block;
background-color: #000;
margin-right:10px;
}
.button li.yellow {
background : url(sprite.JPEG) no-repeat;
}
the only changes were to the last style definition.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML-Kit Tools HTML Tidy plugin">
<link href="layout.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div class="square" font=10px>
<p></p>
</div>
<div id="wrapper">
<img class="A" src="download.jpg" alt="Solar Panels"/>
<img class="B" src= "wind.jpg" alt="Windmills" />
<img class="C" src= "biomass.jpg" alt="Biomass" />
<img class="D" src= "renewable.jpg" alt="Renewable Energy" />
</div>
<hr>
<div id = "bottom">
<p>Contact:*********#gmail.com</p>
</div>
</body>
</html>
Here is my css
<style type="text/css">
p {
color:#f5f5dc;
font-size:50px;
text-align: center;
margin-top: 20px;
}
body{
background-color:#fffacd;
font-size:100%;
min-width:800px;
}
.square{
height: 100px;
width: 100%;
position:relative;
left:-20px;
border: 2px solid black;
border-radius: 5px;
background-color:#0066cc;
font-size:1.0em;
}
#wrapper{
width:100%;
margin-top: 40px;
margin-bottom: 40px;
}
.A, .B, .C, .D{
width:300px;
height:200px;
float:left;
border:1px solid black;
margin-right:10px;
margin-bottom:40px;
}
.D{
width:270px;
}
#bottom p{
color:black;
font-size:15px;
}
</style>
This is my code how can i minimize it without it squishing together?
i have tried making containers.
I have tried everything.
I added my css. When I say minimize, I mean when you make the page smaller. Everything gets squished together and the pictures go on top of each other and it looks horrible. It's fine when you maximize it.
You can use responsive CSS from bootstrap and can use its class when formatting.
http://getbootstrap.com/2.3.2/
for example.
<div class="row-fluid">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
A wild guess, set a min-width to the body.
INLINE
<body style="min-width: 800px;">
OR IN YOUR STYLESHEET
body {
min-width: 800px;
}
Change the 800px to the required minimum width you want. Then when the browser resizes to a width smaller than that number, the scrollbars will appear.
Please refer the fiddle and update it,
I have updated small errors, with one closing div missing,
and that with strict DTD in the heading, is the main reason for ruin the formatting..
you may use transitional/loose DTD if still learning,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
I am sure this will do, but still if problem persist, please update fiddle and post back the new link, with all codes.
Thank you for updating code of CSS, now after looking at your CSS, I can say the problem was float and I have updated my fiddel for the same, that works fine with Google Chrome Browser, please let me know if any problem persist, with specification.
Your problem is yours tag are not responsive in your views.
The easiest way is
Download bootstrap css and link in your html.
<!DOCTYPE html>
<html>
<head>
<style>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap_responsive.css">
</style>
</head>
<body>
<p>hello world.</p>
</body>
</html>
and check
http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem for futher details.
If you dont want to use bootstrap
there is purecss for second choice
http://purecss.io/
I'm trying to develop a Layout with CSS and using a Iframe. How can I show the full page in the iframe without scrolling? Is the iframe appropriate to show full web pages?
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>layout basic method web</title>
<style type="text/css" media="screen">
#container
{
width: 100%;
height: 100%;
background-color: #fff;
}
iframe
{
border-style: none;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="content">
<h2>Subheading</h2>
<IFRAME name='iframe1' id="iframe1" src="http://www.yahoo.com"></IFRAME>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
If you test the code, you see that the CSS create a scroll inside the page. How can I get rid of this scroll and show all the page?
Best Regards,
UPDATE:
I'm almost there. I only need that the scroll up/down goes over the Header, just like goes over the footer. Is that possible? Please see the code. Just copy/paste it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title>
<style type="text/css" media="screen">
#printhead {display:none;}
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:80%;
font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
/*overflow: hidden;*/
/* */
}
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;}
/*#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000; }*/
#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; color:#000; font-size:1em; border-bottom:1px solid #000;}
#foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:25px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}
.pad1 {display:block; width:18px; height:50px; float:left;}
.pad2 {display:block; height:50px;}
.pad3 {display:block; height:500px;}
#content p {padding:5px;}
.bold {font-size:1.2em; font-weight:bold;}
.red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}
h2 {margin-left:5px;}
h3 {margin-left:5px;}
</style>
</head>
<body>
<div id="head">
<div class="pad1"></div><h1>Header</h1>
</div>
<div id="content">
<div class="pad2"></div>
<IFRAME name="teste" src="http://www.yahoo.com" width="100%" height="100%" frameborder=0></IFRAME>
<!--<div class="pad3"></div>-->
</div>
<div id="foot">Footer</div>
</body>
</html>
Any clues on how to achieve this?
Best Regards,
You'll have to set the height of the iframe to match the height of the page you are looking at.
If the page is within the same domain you could use javascript to dynamically resize the frame to match the body size of the page you are viewing. There's a few jQuery plugins out there that will do that.
If it's an external domain you can't do this so you'll have to just set the height property of the iframe to match.
If you want to get rid of the scrollbar on the main window, add an overflow style:
#container {
width: 100%;
height: 100%;
background-color: #fff;
overflow: hidden;
}
You can do this with javascript:
function resizeFrame(){
var iframe = parent.document.getElementById('id of your iframe');
$(iframe).height($('#your top html tag inside your iframe').height());
$(iframe).width($('#your top html tag inside your iframe').width());
}
Then call this function on load & after any hide/unhide actions that will change the form length:
resizeFrame();
If you have margins/padding on the top level html tag inside the iframe, you might need to add px to the height() / width() like this:
$(iframe).height($('#your top html tag inside your iframe').height()+40);
$(iframe).width($('#your top html tag inside your iframe').width()+20);
An iframe cannot adjust size relative to the page it is showing. You would need to adjust it's size with javascript, which implies that you know the size of the page beforehand. If you are just after showing the content of another page inside yours, indeed have a look at ajax.
A very simple example can be found here:
http://aleembawany.com/2005/09/01/ajax-instant-tutorial
be aware that loading pages with ajax in a cross-domain context might not work due to security settings of the browser.
It should look like this - working on IE
but it is't showing like the above on Google Chrome:
Let me paste the codes I've been using :
Structure :
.header
|_ .h-box-style & .h-box-1
|_.ad-title
|_.ad-content
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>OrderBorder.com -- The way you want the deals for Apple mobile phones </title>
<link href="styles/main.css" type="text/css" rel="stylesheet"/>
<script src="scripts/jquery-1.4.4.min.js" type="text/javascript" language="javascript"></script>
<script src="scripts/cufon-yui.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<div class="main">
<div class="header">
<div class="h-box-1 h-box-style">
<span class="ad-title">Enjoy Group Savings</span>
<div class="ad-content">
Wholesale prices for your Apple gear get lower with larger group size.
</div>
</div>
<div class="h-box-2 h-box-style">
<span class="ad-title">Earn Points</span>
<div class="ad-content">
Keep earning points with every purchase you and your friends make.
</div>
</div>
<div class="h-box-3 h-box-style">
<span class="ad-title">Reach Borderline Prices</span>
<div class="ad-content">
Eat my dust group!!! Use your points to bring your own prices to the border.
</div>
</div>
</div>
</div>
</body>
</html>
and CSS Code:
body
{
margin:0px;
background-image:url(../images/background.jpg);
}
div.main
{
background-image:url(../images/main_background.jpg);
background-repeat:no-repeat;
height:950px;
width:897px;
margin-right:auto;
margin-left:auto;
}
div.main div.header
{
width:893px;
height:120px;
margin-top:120px;
float:left;
}
div.main div.header div.h-box-style
{
width:100%;
height:100%;
}
div.main div.header div.h-box-style span.ad-title
{
color:Black;
font-family:Arial;
font-size:20px;
width:100%;
background-color:Red;
}
div.main div.header div.h-box-style div.ad-content
{
color:Gray;
font-family:Arial;
font-size:12px;
width:100%;
height:40px;
}
div.main div.header div.h-box-1
{
float:left;
width:220px;
height:80px;
margin-left:80px;
margin-top:20px;
}
div.main div.header div.h-box-2
{
float:left;
width:220px;
height:80px;
margin-left:70px;
margin-top:20px;
}
div.main div.header div.h-box-3
{
float:left;
width:250px;
height:80px;
margin-left:30px;
margin-top:20px;
}
When I inspect source code with Google Chrome developer tool, I can see that css is applied to the .ad-title and ad-content but these codes don't change anything.
So I've pasted everything I've done. can some one help me why Google Chrome behaves like that and doesn't show the text on the page under `.header'.
Thanks in advance.
I'm running Chrome v. 8.0.552.224 and the text is displayed correctly... the problem is not in your html code...
I've found the problem. ad-title and ad-content are somehow matching some other internal css rules which don't belong to my application. When I change the names to h-title and h-content they started working fine.
Especially be careful, when you are using AdBlock extension since they don't like ad word.