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;
}
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);
});
The following CSS showld put the logo right in the middle as the margins are pushed by the same value from both left and right, and top and bottom, however, this happens only on firefox for some reason that I obviously don't have a clue of.
body {
background-image:url(Background.png);
background-size:100%;
background-repeat:repeat-y;
} /*backgroung*/
.logo {
left:0;
top:0px;
right:0;
bottom:0px;
position:absolute;
min-width:444px;
margin: 230px; 400px;
text-align:center;
} /*logo positioning*/
.logo {
background-image:url(Logo.png);
background-position:center;
background-repeat:no-repeat;
} /*logo image*/
.logo:hover {
background-image:url(Logo2.png);
background-repeat:no-repeat;
background-position:center;
} /*mouseover*/
Do you have a link we can check?
Try using “padding-top: 150px”. It usually works unless there is something that is keeping you from doing it. Or, try the regular trick “ zoom: 1”,”position: relative”, “display: block”.
Hope this helps.
in your css try to add height. that should fix the issue.
.logo {
left:0;
top:0px;
right:0;
bottom:0px;
position:absolute;
min-width:444px;
min-height:some xyz px;
margin: 230px; 400px;
text-align:center;
} /*logo positioning*/
I have included another div and created Pen.
This is the HTML as follows, and I am also posting the full CSS. The social icons I put in (facebook and twitter) respond perfectly in any browser. The logo's margins seem to be cut as I indicate in the CSS only if read with firefox. I have tried to specify the height but had the issue anyway.
If you know any trick that will work in any browser just explain me because I've been around CSS and HTML only for a week, so I know the normal commands but don't know many tricks, so I'd love to understand those tricks and why they work rather than normal css attributes.
<!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>LoD</title>
<link rel="stylesheet" type="text/css" href="Style.css" />
<link rel="shortcut icon" href="Favicon.ico" />
</head>
<body>
<div id="container">
<a href="Index.html" /><img class="logo" />
<ul id="social">
<li class="facebook";><img src="Facebook4.png" style="width:80px; height:73px;" onmouseover="this.src='Facebook2.png';" onmouseout="this.src='Facebook4.png';"/></li>
<li class="twitter";><img src="Twitter.png" style="width:80px; height:73px;" onmouseover="this.src='Twitter2.png'"; onmouseout="this.src='Twitter.png';"/></li>
<li class="plot";><img src="Plot.png" style="width:140px; height:73px" onmouseover="this.src='Plot3.png'" onmouseout="this.src='Plot.png'" onclick="this.src='Plot2.png'" /></li>
</ul>
</div><!--closes container-->
<footer id="copyright">
<p>© Giorgio Vitanza</p>
</footer>
</body>
</html>
Ok I fixed it! Apparently margin: [value in pixels] [value in pixels], with no ";" in between, fixed the issue in any browser. Strange but true
The problem is now, that when I zoom down the pic doesn't hold its central position.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<!-- META -->
<title>Nina Rakovec</title>
<meta name="description" content="Profesionalna igralka" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<div class="image"></div>
<div class="eng"></div>
<div class="slo"></div>
</body>
</html>
CSS:
body {
background: url("ninabg.jpg") left top no-repeat;
background-size: 100% auto;
}
div.image {
overflow: hidden;
content:url("logo2fix.png");
position:absolute;
right:1%;
bottom:3%;
height:40%;
width:35%;
}
div.slo {
content:url("slo.png");
position:absolute;
width:5%;
bottom:10%;
right:21%;
}
div.eng {
content:url("eng.png");
position:absolute;
width:5%;
right:12%;
bottom:10%
}
This is the code and it is showing properly in Chrome, but not in Internet Explorer or Firefox. What am I doing wrong? The only thing that's showing is the background, the 3 div tags are not showing up and I have no idea why.
Thanks in advance, I need this fixed and I'm clueless.
In HTML 4.01, it is not valid markup to have a <div> element inside an <a>. According to the spec, <a> tags can only contain inline elements. <div>'s are block level elements. Note that it is up to each browser on how they handle such situations. While Chrome may fix the content or render it in the method you desire, it's entirely possible Firefox and IE would view it as completely invalid and fail to render some or all of the markup (or strip the div tags out and leave the content intact).
See this question for further reference: Is putting a div inside an anchor ever correct?.
Reference: HTML 4.01 Specification
You shouldn't use the `content' property to display images like that. It's intended for use with pseudo-elements.
If those divs need bg images use the background-image property.
div.image {
overflow: hidden;
background-image::url("logo2fix.png");
position:absolute;
right:1%;
bottom:3%;
height:40%;
width:35%;
}
div.slo {
background-image::url("slo.png");
position:absolute;
width:5%;
bottom:10%;
right:21%;
}
div.eng {
background-image:url("eng.png");
position:absolute;
width:5%;
right:12%;
bottom:10%
}
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
}
I'm having an issue with IE9(and 8) with positioning empty(kinda) anchor elements over an image. The anchors contains text, but it's kicked off the page using CSS's text-indent property.
I'm working on a site that has a series of promo panels, they're all contained in an UL. Inside each LI there's a promo image, and 1 or more anchor elements positioned over different areas of it. The IMG and the A elements are absolutely positioned in the LI element. So, the basic structure looks like UL > LI > IMG A A A.
This setup works fine in Firefox and Chrome, but IE doesn't like it. I've tried using z-index on this setup with no luck.
Can anyone explain the issue that IE is having, and give a better solution for my CSS? I've made a quick/simplified example of my problem using a div, img, and a single anchor. This can be copy/pasted onto your machine to see it in action.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="Description" content="" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="" />
<style type="text/css">
#div {
z-index:1;
display: block;
background:red;
position:relative;
}
#image {
z-index:2;
position:absolute;
top:0;
left:0;
display:block;
}
#anchor {
z-index:3;
display:block;
overflow:hidden;
position: absolute;
top:0;
left:0;
text-indent:-9999px;
width:640px;
height:480px;
}
</style>
</head>
<body>
<div id="div">
<img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
clicky
</div>
</body>
</html>
I don't have much control over the UL > LI > IMG A layout. This is setup that as we get new promos we can easily update the image, and just add or remove anchors easily depending on how many 'calls to action' the image has. The positioning of the A elements are injected inline.
Thanks!
I had the same issue. Using your example, here's my solution:
<style type="text/css">
#div {
position:relative;
}
#anchor {
display:block;
width:640px;
height:480px;
overflow:hidden;
text-indent:-9999px;
position:absolute;
top:0;
left:0;
background:url(http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg) no-repeat 640px 480px;
}
</style>
<div id="div">
<img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
clicky
</div>
Since the anchor tag has a set width and height with overflow hidden, set the anchor tag's background image to the image that it's absolutely positioned over (or any image you've already included), BUT set the background-position to positive pixel values larger than the anchor's width and height and background-repeat to no-repeat. By doing this, the anchor tags work in IE, AND the browser doesn't download extra resources so you save bandwidth. Note: the img tag doesn't need any special styling, and the containing div only needs position relative.
If you don't want to worry about setting the background-position, don't have control over the size of any dynamically generated images, and/or aren't concerned about saving bandwidth, you could also create and use a small (1x1) clear/transparent image (set background-repeat if necessary).
Alternately, augmenting Billy Moat's fiddle example: http://jsfiddle.net/7NpLq/29/
I think you could use a plain old HTML image map to achieve what you're wanting here:
http://www.w3schools.com/tags/tag_map.asp
Otherwise here's a fiddle doing what I think you were trying to do originally:
http://fiddle.jshell.net/7NpLq/
This issue affects IE10 as well, but not IE11. An alternative to the background image approach is to apply background-color: rgba(0, 0, 0, 0); to the anchor. Note that this won't work in IE8, which doesn't support rgba colors.