I am having two problems. The first one, is that I am getting a break in FF, IE and chrome between the top img and the logo. The second problem only appears in IE and what happens is there is a border around the logo. What am I doing wrong?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2E Network - Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"><img src="Images/top_page.png" width="963" height="29"><div id="logo"><img src="Images/logo.jpg" width="921" height="272" alt="Logo" longdesc="/index.php"></div>
</div>
<div id="main">
</div>
<div id="footer"><img src="Images/bottom_page.png" width="963" height="50">
</div>
</div>
</body>
</html>
Seperate CSS style Sheet
body {
background-image: url(Images/bkg.png);
background-repeat: repeat-x;
}
#wrapper {
width: 963px;
margin: auto;
}
#main {
background-image: url(Images/wrapper_bkg.png);
background-repeat: repeat-y;
}
#logo {
background-image: url(Images/wrapper_bkg.png);
background-repeat: repeat-y;
}
#logoimg {
margin-left: 15px;
}
Check the current page here
to fix the gap make the top image to display:block;
and the border
you can see it here
http://www.jsfiddle.net/CcvTD/2/
edit:updated so the borders are removed too
This will get rid of the border:
#logoimg img {
border:0px;
}
To fix the gap, try:
#header img, #logo {
margin:0px;
}
Related
It does show background color and top div tag but background image is not visible up. I'm pretty new at html and css so kindly explain a little too.
here is my html and css code
body {
background-image: url("https://i.giphy.com/media/H75Lo6V4M5pWrDo8mZ/giphy.webp") no-repeat;
background-color: Linen;
padding: 0;
margin: 0;
}
<!doctype html>
<html>
<head>
<title>Train of Thoughts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top">
<h3 style="float: left">M</h3>
<h3 style="float: right">F</h3>
</div>
<br>
</body>
</html>
html{
}
body{
background: url("https://i.giphy.com/media/H75Lo6V4M5pWrDo8mZ/giphy.webp") no-repeat;
background-color: Linen;
padding: 0;
margin: 0;
}
.top{
background-color: Black;
overflow: hidden;
color: White;
border: solid 5px Black;
border-radius: 0 0 25px 25px;
padding: 0 25px 0 25px
}
<!doctype html>
<html>
<head>
<title>Train of Thoughts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="top">
<h3 style="float: left">M</h3>
<h3 style="float: right">F</h3>
</div>
<br>
</body>
</html>
You can try using
background-size: cover;
which will stretch the image to cover the page, but since the resolution of the gif is rather different than the screens, it will look kinda weird.
Also, the no-repeat is the reason, it doesnt show at all. Without it, it will show, but several times next to each other.
I just started learning HTML and I've been stuck at this for hours.
The picture just won't show up.
.background {
background-image: url(https://c1.staticflickr.com/9/8153/7297534158_55171c3bf1_b.jpg);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Preptechies: The Wiki</title>
<link rel="stylesheet" href="Assets/main.css">
</head>
<body>
<div class="wrapper">
<header id="header">
<h1>Welcome to our <strong>Webpage</strong>!!</h1>
<h2>This is our group members</h2>
</header>
<div class="background">
</div>
</div>
</body>
</html>
I took the CSS from W3Schools because I want to make the image fit the whole background and won't repeat & move when I'm scrolling the browser.
The problem is .background doesn't have a height.
Yes, you have height: 100%, but this is relative to .wrapper which doesn't have a height.
Add: html, body, .wrapper { height: 100% } to fix this.
.background{
background-image: url(https://c1.staticflickr.com/9/8153/7297534158_55171c3bf1_b.jpg);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
html, body, .wrapper { height: 100% }
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Preptechies: The Wiki</title>
<link rel="stylesheet" href="Assets/main.css">
</head>
<body>
<div class="wrapper">
<header id="header">
<h1>Welcome to our <strong>Webpage</strong>!!</h1>
<h2>This is our group members</h2>
</header>
<div class="background">
</div>
</div>
</body>
</html>
So I wanted to center my header... but I stumbled across a problem right away. I want to have a container that's going to have a repeating BG(stripe lines) and in the center I want a header with the logo and menu.
Thing is, I can't get the header div to center to the parent(container).
This is the HTML part
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="css/master.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<dic class="header">
<img src="images/logo.png" width="260" height="56">
</div>
</div>
</div>
</body>
</html>
and the CCS is
#charset "utf-8";
body {
background-color: #00162d;
}
.container {
width: 100%;
height: 100px;
background: url(../images/header_bg.jpg) repeat-x;
}
.header {
margin: 0 auto;
width: 980px;
}
Thanks in advance!
p.s. It's amazing how much you can forget if you don't code for 3 years!
<dic class="header">
Should be
<div class="header">
Working example: http://jsfiddle.net/dVvjm/
My result: http://i.imgur.com/P50RS.png
My style.css
body {
background: url("img/bgs.png") repeat #cccccc;
color: #000000;
}
main {
margin-left: auto;
margin-right: auto;
}
My index.html
<html>
<head>
<title>Progress</title>
<link rel="stylesheet" href="css3-progress-bar.css" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<div id="main">
<p><b>215/160 LBS.</b></p>
<div class="bar_mortice rounded green_mortice">
<div class="progress rounded green" style="width: 05%;"></div>
</div>
</div>
</body>
</html>
Why is the text not centering? Also, the progress bar was not centering until I added the
margin: 0 auto;
I tried that under main but no luck. Any ideas?
In the css, you need to use #main instead of just main.
Also, you'll want to give it some width, otherwise it may take up the entire width. Try this:
#main {
margin-left: auto;
margin-right: auto;
width: 50%;
}
Hey,
I have a big problem with my container-sketch. How can I realize this ? When I set the width from the two navigations (blue container) there are under the logo (red container). The two navigation will run across the screen, right next to the logo. If I resize the browser window, the two navigations should NOT slide under the logo. Has anybody a example for me ?
<html lang="en">
<head>
<meta charset="utf-8" />
<title>New</title>
<style type="text/css">
.logo {
float: left;
width: 260px;
height: 50px;
background: green;
}
.nav-main {
background: red;
}
.nav-sub {
background: blue;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
.logo
</div>
<div class="nav-main">
.nav-main
</div>
<div class="nav-sub">
.nav-sub
</div>
</div>
</body>
.header{
min-width:320px;
}
check example
Try adding width to the nav-main and nav-sub
See http://jsbin.com/isuxu4 for a demo