Contents of my webpage(be it header,menu etc.,) are not fitting into browser window.Below is the HTML & CSS code i have used
HTML
<div id="header">
</div>
CSS
#header {
height:150px;
width:100%;
position: relative;
background-image: url("top_frame.png");
And here is the output I get:
Add the following:
body {
margin: 0;
}
in the CSS.
Here is the fiddle.
I replaced background-image with background : red; for testing purpose as I didn't have the image
Please use Normalize.css before your custom css.
Related
So this is the code. I am not sure what problem there is. So first there is internal and 2nd one below there is inline, which is working. I think the problem is the image because inline css is working fine with other images but not with just one (Capture.png).
<!DOCTYPE html>
<html>
<style> <!-- this is where I am adding the internal css -->
body{
padding: 0px;
margin: 0px;
}
.cap{ <!-- this is the class for the image -->
position: absolute;
height:100px;
width:200px;
left:150px;
}
</style>
<body>
<div class="cap"><img src="Capture.png"/></div>
</body>
</html>
But this works!
<div class="cap"><img src="Capture.png" style=" position: absolute;
height:100px;
width:200px;
left:150px;"/></div>
The code below works because the style is being applied directly to the image.
<div class="cap"><img src="Capture.png" style=" position: absolute;
height:100px;
width:200px;
left:150px;"/>
</div>
Notice that the .cap class is for the div that contains the image, not the image itself. The image in the code below isn't working because the CSS you wrote is being applied to the div and not to the image.
<div class="cap"><img src="Capture.png"/></div>
The following piece of code selects the image. You're styles should be applied to the image using the code below.
<style>
.cap img { <!-- notice the change from ".cap" to ".cap img" -->
position: absolute;
height:100px;
width:200px;
left:150px;
}
</style>
I hope this answers your question. I recommend reading more into CSS Selectors to get a better understanding of how they work. Happy coding!
Your'e not selecting the image with the css because .cap is the div that houses the img - to apply the CSS to the image within that - you will need to target it. Either by applying a class to the image or targetting it within the containing div (using .cap img...). As a rule - it is always best to apply styling in the CSS rather than inline styling.
The reason the inline version worked is because that styling is applied directly to the image.
To use the inline style rule - add img to the .cap as shown below.
.cap img{
position: absolute;
height:100px;
width:200px;
left:150px;
}
I'm a beginner and I'm trying to fit my header on the top but it's not fitting. Here is screenshot:
Here is my source code:
<header style="height: 50px;background-color: rgb(26, 26, 26);">
<div class="container"></div>
</header>
Can you please let me know, What's wrong here? Help would be appreciated.
You need to add the following style in your css. There is default styles of browser which needs to overridden, in order to achieve the requirement.
html, body {
margin : 0;
padding : 0;
}
All Browsers have default inbuilt CSS implemented, due to which the page appear misalligned. You need to add reset.css http://cssreset.com/
or else add css code to disable browser default behaviour for example:
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
I have a quick question, I'm making a simple html document, with an image that I want to fill the entire page.
For some reason, it wants to create a border around the image. I've tried border="0"; and padding 0px 0px 0px 0px;
Here is the code in which I have: (You can also check it out live if you prefer www.kidbomb.com/chefwannabe)
<!DOCTYPE html>
<html>
<head>
<title>Pre-Order Now!</title>
</head>
<body>
<img style="width: 100%; overflow:hidden;" src="http://www.kidbomb.com/chefwannabe/chefwannabepreview.png" />
</body>
</html>
Add the following CSS in your code. Default body will give some margin and padding. So better whenever you start new work, add this style in your css for getting the proper result.
body
{
padding:0;
margin:0;
}
Instead of using the img tag, set the background-image property of the body tag so it encompasses the entirety of the page.
body {
background-image: url("path/to/image.jpg");
height: 100%;
width: 100%;
}
I would like the top half of this image to display by default, and then use some CSS to make the image shift upward so that the bottom half shows when the mouse hovers over it. Here is the code and what I've tried, but it is not working. Can anyone help me make this code work?
HTML:
<div id="next">
<img src="images/next3.png" alt="next page">
</div>
CSS:
#next a:hover{background: url('images/next3.png') 0 -45px;}
EDIT:
HTML:
<div id="next">
</div>
CSS:
#next {
height:40px;
width:160px;
background-image:url('images/next3.png');
}
#next:hover{background-position: 100% 100%;}
I think you need to use background-position attribute to achieve this.
CSS
div
{
height:40px;
width:160px;
background-image:url('http://i.stack.imgur.com/OOGtn.png');
}
div:hover
{
background-position:100% 100%;
}
JS Fiddle Example
You can also look into CSS Sprites.
You need to use it as a background in the first place. The <img> is covering the background.
Get rid of the image HTML and just use some CSS like this
a {
display: inline-block;
height: 40px;
width: 160px;
background: transparent url(img.jpg) 0 0 no-repeat;
}
a:hover {
background-position: 0 40px;
}
In this case you will need to remove your <img> tag and consistently use the CSS background attribute for both cases. Also define your height and width width of your a tag with CSS too.