![enter image description here][1]i have a problem. The image i put into the background is divided into four part. Header, body1,body2 and footer. My problenm is when body1 and body2 join together there is a line in the image. This also apply the same to body2 when i put a repeat, the line is there at the bottom. The problem is when one image in a div display then another image after that a line appear between them
This is my code:
<div id="header"
style="background-image:url('Graphic/banner.png'); height: 84px;">
</div>
<div id="Body1"
style="background-image:url('Graphic/topper.png'); height: 364px;" >
</div>
<div id="Body2"
style="background-image:url('Graphic/body.png'); height: 364px;">
</div>
<div id="Footer"
style="background-image:url('Graphic/footer.png'); height: 82px;">
</div>
Any idea how to make the line disapear?
Try This: here i have no spaces between the div's, make sure that there are no
white spaces on your images.
<html>
<head>
<title></title>
</head>
<body>
<div id="header"
style="background-image:url('#'); background-color: #EBC64D; height: 84px;">
</div>
<div id="container">
<div id="Body1"
style="background-image:url('#'); background-color: #07ED5F; height: 364px;" >
</div>
<div id="Body2"
style="background-image:url('#'); background-color: #2E16A8; height: 364px;">
</div>
</div>
<div id="Footer"
style="background-image:url('#'); background-color: #E01B6A; height: 82px;">
</div>
</body>
</html>
Related
I have a problem I just can't seem to solve despite following directions in my previous post, I just began learning html/css. This is my button as it appears right now:
here
& this is where I would like it to appear. It does not seem to move despite changing the top, left or bottom:
here
& this is where I want it to be. The background is simply an image its not multiple divs. this is the only code I have:
<section>
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-7-12">
<div><p class="ae-2">
<button style{
top: 100px;
right: 1000px;
left: 10000000px;
}
>Try yourself</button
>
</p></div>>
</div>
</div>
</div>
</div>
<img
src="assets/img/background/fire2.png"
width="1450"
height="850"
></img>
</section>
I think you should use left, top etc. styles with percentages. If we look at the center of the button in the second picture:
top: 35%, left: 60%
Also, you should change display to block in order to see the button as a rectangle element. I gave also width and height. You can change them if you want.
So, I changed your HTML code as:
<section>
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-7-12">
<div><p class="ae-2">
<button
style="position: absolute; display: block; top: 35%; left: 60%;
width: 120px; height: 60px;">
Try yourself
</button>
</p></div>
</div>
</div>
</div>
</div>
<img
src="assets/img/background/fire2.png"
width="1450"
height="850"
>
</section>
These are the screenshots:
There are a few mistakes in your HTML. Firstly, the style attribute needs to be a string. The position attribute needs to be first. So it would be "position: absolute;top: 100px;right: 1000px; left: 10000000px;". img tags do not have a closing tag.
Correct HTML:
<section>
<div class="content">
<div class="container">
<div class="wrap">
<div class="fix-7-12">
<div><p class="ae-2">
<button style="position: absolute;top: 100px;right: 1000px; left: 10000000px;"
>Try yourself</button
>
</p></div>>
</div>
</div>
</div>
</div>
<img
src="assets/img/background/fire2.png"
width="1450"
height="850"
>
</section>
I am going to make a website like this http://watcherboost.com/
SO i want to create middle menu for my website.so i need to create a div tag which is always top on following background:
This is the code i tried
<form id="form1" runat="server">
<div>
<div id="top" style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
</div>
</form>
<div style="height: 300px;background-color: #0E5D7B; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div style="height: 650px; background-color: #C2C2C2; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div style="height: 300px;background-color: #0E5D7B; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div id="middle" style="margin-left: 150px;margin-right:150px;margin-top:-250px;background-color:black"></div>
I want to get this last div (id =middle) to always top mode like upper website.
But unfortunately my div (id=middle) is not showed the page..
Please advice how to edit this code
Thanks
Your div is not showing up, because it doesn't contain any content. Add height property to its inline CSS.
If you want a div stay on top you should set:
position:fixed;
top:0px;
try this:
https://jsfiddle.net/TiG3R/ug4vvo48/
I'm trying to put a background image on my form (like behind the text and inputs, just like a background image of my web site), using the Bootstrap framework but the image appears at the bottom and I want it inside the "container".
My code is something like this:
<div class="container">
<div class="thumbnail">
<form....>
<fieldset>
.
.
.
</form>
<img src="cs.jpg" class="img-responsive">
</div>
<div>
Have you tried setting the background image of that container as the image? IE:
.container {
background-image: url("cs.jpg");
}
Or you can do it inline:
<div class="container" style="background-image: url('cs.jpg');">
...
</div>
or you could try like this..
<body>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>...</p>
</div>
</div>
</body>
and in css like this:
.jumbotron {
position: relative;
background: #fff url("slide.jpg") center center;/*slide.jpg =>you image*/
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
I am coding a website for college coursework and I am writing it in DreamWeaver. When I go into design view it is all visible but when I view it in Safari or Chrome I can't see it at all. Please can you help me?
Please visit http://jsfiddle.net/NA6eN/ to see my code so far.
#wrapper
{
width: 90%;
margin: 0 auto;
color:#CCC;
}
#top_box
{
position: absolute;
min-width: 90%;
max-width: 90%;
margin: 0 auto;
height: 92%;
right: 5%;
background: white;
width: 80%;
border: 5px rgba(0, 239, 255, 0.5) solid;
border-top: none;
}
You have so many missing > objects, that's why the error. Fix your html and try again and it works fine, like this:
<body>
<div id="wrapper">
<div id="top_box"></div>
<div class="background"></div>
<div id="menu_box">
</div>
<div id="main_box">
</div>
<div id="Bottom_box">
</div>
</div>
</body>
</html>
Fiddle
You didn't close the wrapper div:
<div id="wrapper"
should be
<div id="wrapper">
Missing to close >
DEMO
<body>
<div id="wrapper">
<div id="top_box"></div>
<div class="background"></div>
<div id="menu_box">
</div>
<div id="main_box">
</div>
<div id="Bottom_box">
</div>
</div>
</body>
You didn't close your div's properly:
<div id="menu_box"
</div>
do it like this:
<div id="menu_box">
</div>
otherwise the browsers can't parse your html.
Fixed version: http://jsfiddle.net/Z2k8d/
You didnt end tag for div id wrapper
its
<div id="wrapper"
now change it to
<div id="wrapper">
Invaild in your HTML code : (HTML opening/closing tags)
Original :
<div id="wrapper"
<div id="top_box"></div>
<div class="background"></div>
<div id="menu_box" </div>
<div id="main_box" </div>
<div id="Bottom_box" </div>
</div>
Fix to :
<div id="wrapper">
<div id="top_box"></div>
<div class="background"></div>
<div id="menu_box"></div>
<div id="main_box"></div>
<div id="Bottom_box"></div>
</div>
Trick in jsFiddle
click on buttom for more readable
You see that code in red color ?, Its mean your HTML not vaild
Fix it ! like your is missing closing tag , closing tag with no opening tag... bla bla bla
Result :
Vaild !
Demo : http://jsfiddle.net/NA6eN/3/
Useful tool for you : http://validator.w3.org/#validate_by_input
I'm trying to figure out why my <div> element does not expand to cover everything it contains. I've seen this in Google Chrome's "Elements" view when I press Shift+Ctrl+J. I expected my "content" div to be sized to include <p>A</p> and <p>B</p>, but it doesn't.
PS-- I've read some comments that a footer is normally positioned absolute, but this is just to show the error.
Here is the simplified page:
<html>
<head>
<style type="text/css">
#footer{
background-color: lightblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content" align="center">
<div style="width:50%;">
<p align="left">
Two divs:
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
</p>
</div>
</div>
<div id="footer" align="center">
<div style="width:90%;" align="center">
Here is my footer.
</div>
</div>
</body>
</html>
Add
<div style="clear:both"></div>
After
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
add this to the css:
#content { overflow: hidden; }