I realise this question has been asked many times but i am going crazy trying to figure it out.
I am quite new to html and want to built a static header (940px x 30px) containing our logo, navbar, and a few social networking icons.
What i'm struggling to do is make the header fit the entire page, it leaves part of my background on show on the left, top and right sides which is frustrating.
below is the code i have used.
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" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>TWChome</title>
</head>
<body>
<div id="header">
<div id="headercontents">
Hello
</div>
</div>
</body>
</html>
CSS Code
#charset "utf-8";
/* CSS Document */
body {
background-image:url(../images/bg.jpg);
}
div#header {
display:block;
width:auto;
height:auto;
background-image:url(../images/bar.jpg);
}
div#headercontents {
width:50%;
}
Try this:
body{margin:0;padding:0}
it is actualy not that hard:
#header {
width: 940px;
height: 30px;
margin: 0 auto;
}
First you set the dimensions you say you want it to have, and then you center it. Nothing more to it. Also I have no idea why you are setting the #header-contents to a width of 50%...
update for header with background image:
#header {
height: 30px;
background: url(../images/bar.jpg) no-repeat center center; /* for a single image with height of approx 30px */
background: url(../images/bar.jpg) repeat; /* alternative for a tile you want to repeat */
}
#headercontents {
width: 940px;
margin: 0 auto;
}
and indeed always apply some reset css as stated by others.
Related
I have run in to a problem that effects specifically Safari on iOS.
I am building a page which has a fixed position header that is the width of the viewport. The content of the page is a series of images (variable in number) which should scroll to the right. The header should remain in place when the user scrolls.
On iOS Safari, the fixed header, is slightly larger than the viewport, and also scrolls at a different speed than the rest of the content.
I've cut the code down to the following, and still cannot work out how to solve this problem - the following code works perfectly in all other browsers that I have tested. (I am targeting IE8+)
I've hosted the example of this problem here.
Thanks for any advice and help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style>
html {
font-size: 10px;
height:100%;
white-space: nowrap;
}
body {
height:100%;
padding:0;
margin:0;
}
#dgs2 {
height:75%;
display:inline-block;
}
img{
height: 100%;
}
#pad{
height:6em;
padding-bottom:1px;
}
#header{
position:fixed;
width:100%;
height:6em;
border-bottom:1px solid;
}
.menuRight{
float:right;
}
</style>
</head>
<body>
<div id="header">
<div class="menuRight"><h2>Menu</h2></div>
<h1>Testing scroll on iPhone</h1>
</div>
<div id="pad"></div>
<div id="dgs2">
<img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/><img src='img/red.png'/><img src='img/blue.png'/>
</div>
</body>
</html>
I know this question is a year old at this point, but the issue still exists in iOS and I had the EXACT same issue with fixed elements drifting, and it was driving me nuts. The answer is pretty simple: Just wrap the div #bgs2 (or whatever element has "white-space:nowrap" on it) with div.wrapper (the class is unimportant obviously), and set the overflow to auto:
.wrapper {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
I also added webkit-overflow-scrolling, which helps with avoiding repaints.
Someone in the future is bound to find this bizarre issue, so hopefully it helps.
If your happy using jQuery, then you could use something like:
$(window).ready(function() {
var bodyWidth = $(window).width();
$("#header").width(bodyWidth).css('width', bodyWidth);
});
I included both the attribute width and the css width, just to be sure it works in all browsers. Also if you change your meta tag to:
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
That should also help.
Update 1
Sorry, I didn't read the CSS styles properly for the header. The styles for the header should be as follows:
#header{
position:fixed;
top: 0; // Set these positioning attributes
left: 0; // to hold the header in the top left.
width:100%;
height:6em;
border-bottom:1px solid;
}
Update 2
Again, another CSS update. I notice you have code like follows:
html {
font-size: 10px;
height:100%;
white-space: nowrap;
}
body {
height:100%;
padding:0;
margin:0;
}
#dgs2 {
height:75%;
display:inline-block;
}
You need to change it to read like the following:
html {
font-size: 10px;
height:100%;
}
body {
height:100%;
padding:0;
margin:0;
}
#dgs2 {
height:75%;
display:inline-block;
white-space: nowrap;
}
If you move the white-space: nowrap; to the #dsg2 div instead of assigning it to the html then this should be your final fix. Also, add the following to the jQuery code to accompany what you have already:
$(window).resize(function() {
var bodyWidth = $(window).width();
$("#header").width(bodyWidth).css('width', bodyWidth);
});
I'm setting a landing page for My new website
I've created an image, and I'm setting it as the background image. Unfortunately, I can't seem to figure out at all how to get it to be full screen, and scrollable - so you can just scroll up/down to see the full image - but without having any white spaces or anything.
<!DOCTYPE html>
<html>
<title>On The Ropes Boxing! Coming Soon!</title>
<body>
<style>
html {
height: 100%;
margin:0px;
background: url(comingsoon.jpg) no-repeat top center;
background-size: cover;
background-attachment: scroll;
}
body {
min-height: 100%;
margin:0px;
}
#appcontainer {
position: relative
background-color: rgba(255, 255, 255, 0.7);
width:560px; height:2220px;
left:20px; top:20px;
}
<img src="comingsoon.jpg" style="minwidth:100%;height:100%;" alt="" />
</style>
</body>
</html>
That is what I have so far. I'm completely new to HTML and CSS, so I'm basically just learning on the job and going through trial and error. I fully expect to be told I'm doing this completely the wrong way. Any advice is appreciated - just be aware that I may need to be told as if I'm an idiot :)
Thanks so much.
Replace the img tag in your code with this:
<img src="http://www.ontheropesboxing.com/comingsoon.jpg" style="width:100%;position:absolute;z-index:-1" alt="" />
And move it out of the style tags.
Before I get into the answer, allow me to correct your code first.
The basic format for a webpage is this:
<!doctype HTML>
<html>
<head>
//Titles, scripts, styles, etc.
</head>
<body>
//Everything else, can also hold scripts and styles.
</body>
</html>
You're missing a head in your code.
Second, don't place html tags inside style tags (referring to your img).
As for your question,
<!DOCTYPE html>
<html>
<head>
<title>On The Ropes Boxing! Coming Soon!</title>
<style>
html, body {
height: 100%;
width: 100%;
margin:0px;
border: 0;
}
.splash {
width: 100%;
z-index: 0;
}
//Rest of styles
</style>
</head>
<body>
<img src="http://www.ontheropesboxing.com/comingsoon.jpg" class="splash" />
</body>
</html>
Putting the image as the background won't work, as the page won't have anything to scroll to. Putting the background as an image will allow the page to scroll.
I'm trying to create a website with a dynamically resizable background image (which I have achieved) but also have my logo and navigation links in a black to transparent gradient image area across the top of my page (successfully created this, as well).
The issue I'm running into is that the larger dynamic background image is overtaking the background image that is creating the area behind my logo and navigation, but not overlaying the logo or text itself. Below is the HTML and CSS that I have so far.
<!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>Michael Hunter Photography</title>
<link rel="stylesheet" type="text/css" href="portfolio-style1.css">
</head>
<body>
<div id="header">
<div id="logo"><img src="logo1-trans1.png" /></div>
<div id="navbar">
Home |
Portfolio |
Blog |
About |
Contact
</div>
</div>
</body>
</html>
My CSS
#charset "UTF-8";
/* CSS Document */
#font-face
{
font-family:"BankGothic Md BT Medium";
src: url('bankgthd.ttf')
,url('bankgthd.eot');/*IE9*/
}
body{
background-image:url(header-gradient.png);
background-repeat: repeat-x;
position:static;
z-index:1;
}
#logo {
float:left;
position:relative;
left:20px;
top:20px;
}
#navbar {
font-family:"BankGothic Md BT Medium";
font-size:23px;
color:#FFF;
float:right;
position:relative;
top:75px;
right:15px;
}
#navbar a {
color:white;
text-decoration:none;
}
html {
background: url(bg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
The "html {" section is the code that I've gotten to work for my dynamic background image, and is the only vanilla CSS that I've gotten to work how I want it to, so I really don't want to mess with it. The gradient image for use behind my navigation and logo at the top (basically as the header) is up under the "body" in CSS. If you haven't figured it out, the goal was to use the gradient to gracefully transition to the main background image, but it isn't working as intended. I've tried positioning the main background image to z-index it, but that screws it up and doesn't work properly.
I know I'm missing a step that's probably absurdly obvious, but I can't figure it out. Thanks!
you want to put the background in body tag, and the header image in header tag. not the body tag. and it needs a height.
#header{
background:url(header.jpg);
height:200px;
}
as far as i understood, i think this is what you are trying to do
http://jsfiddle.net/x8Kff/
hope it helps.
Let me preface this question with the warning that I'm a self-taught (amateur) web developer (and not a very good one). I've been trying for a long time to find an effective way of centering web pages using AP Divs. I've tried setting "margin: 0 auto;" and I've tried setting "margin-left: auto;". Both work for that one div. But I then have to use that as a wrapper to design within, so when I put more divs inside that, they don't center.
I may be completely approaching this wrong; if so, please correct me. Code (not working) for a basic version of what I want to do is below. If you run that code, if I were to place, say, an image in apDiv1, it would scale to the page size fine; but the text in apDiv2 does not.
<!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>Test Page</title>
<style type="text/css">
#apDiv1 {
margin: 0 auto;
width:600px;
}
#apDiv2 {
position:absolute;
width:50px;
height:24px;
z-index:1;
left: 47px;
top: 29px;
}
</style>
</head>
<body>
<div id="apDiv1">
<div id="apDiv2">Hello</div>
</div>
</body>
</html>
I can center a div inside another div just fine using margin-left:auto; and margin-right:auto;:
Working example: http://jsfiddle.net/xjKhT/
In my own opinion, it is not good to use appdivs(coz it depends on how you positioned it on the design). You can do it(centering stuffs) on your own, check this:
Centering(Simple Sample)
<style>
#header {
margin:auto;
width:600px;
background:#000;
padding:5px;
}
#title {
width:50px;
margin:auto;
background:#CCC;
padding:5px;
}
</style>
<div id="header">
<div id="title">Hello World</div>
</div>
Custom AppDivs adds extra styles which is not really necessary:)
Updated example
Ok after some guessing and poking I think you mean that you want to absolutely position the elements inside the center-aligned wrapper.
position: absolute will be absolute to the page UNLESS the parent has position: relative.
#apDiv1 {
margin: 0 auto;
width:600px;
position:relative;
}
I'm not so good at CSS design, but I'm just working on a content display layout for a website.
I basically wanna make a thin line by putting an image inside a container div. and set all dimension properties as below.
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style>
#thinLineWrap{
width: 510px;
height: 3px;
background-color: #000000;
}
#thinLineWrap img{
width: 170px;
height: 3px;
background-color: #000000;
margin-top: 0px;
float:left
}
</style>
</head>
<body>
<div id="thinLineWrap">
<img src="images/thin_line.gif" border="0">
</div>
</body>
</html>
But when viewing the output in Chrome inspect, the output result couldn't seem to have the specified sizes as expected, as illustrated in the snapshot below.
You might also notice that my image width and height became 171px and 4px respectively, unlike what it was set in the stylesheet section.
Any possible mistake I might have done? Why did the image element become 1 pixel bigger than it should be?
any advice would be very appreciated.
EDIT:
A copy of the original problematic thin line image is here. Not sure if there could be anything wrong with the image itself.
https://lh5.googleusercontent.com/-kDRsR493dZU/UMOXRBbty9I/AAAAAAAAAh8/g58GnqQZ3pk/s128/thin_line.gif
You defined an Img within the #thinlinewrap to have the properties.
div#thinLineWrap{
border:0px;
}
#thinlineWrap img{
height:3px;
}
Might be the code you are looking for.
i found it out.you'r img inherited it's border from another style ,try overriding it like this :
#thinLineWrap img{
border:none;
width: 170px;
height: 3px;
background-color: #000000;
margin-top: 0px;
float:left
}