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
}
Related
I cannot get this background image to appear. It is supposed to appear in the background with the header overlapping it. I'm using an id selector. I literally copied this straight from the book i have for my class and it's not working at all.
Here is my code. I'm very new to css
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fall Nature Hikes</title>
<style>
#content { background-image: url(fall.jpg);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
width: 640px;
height: 480px;
padding-top: 20px; }
h1 { background-color: #FFFFFF;
opacity: 0.6;
font-size: 4em;
padding: 10 px; }
</style>
</head>
<body>
<div id="content">
<h1>Fall Nature Hikes</h1>
</div>
</body>
</html>
In my browser it works right for another image, you can check the url(fall.jpg) path is right？
I checked, your code can show the image, you can see this sample:
> https://jsfiddle.net/a9qm1j2t/
It's just copy all your html and css source code.
I think you should check image path and image type again, and make sure it's right.
May be your image path is not proper.
First check where is your css file and image file.You can verify your image path by inspecting your code on browser and in style check your image path.
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.
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 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.