Alright, here is a link to the site I am working on. http://danberinger.com/preview.html
I currently have the message inside its own div(#messagebox) and the picture in its own div (#picture). Both of these divs are floated to the left. I put them inside a container div called #intro_container. I would like to center this containing div, but am having trouble with it. I have tried setting the margins to 0 and auto but that did not work. This must be some sort of issue with the amount of different levels of divs that I am trying to work with....
Any help would be greatly appreciated!
Set a width on your #intro_container container, otherwise margin: 0 auto; won't work.
For 0 auto to work, you must specify a width.
You can put everything within a container div, with something like width 900px margin 0 auto, or you can simply apply these styles to intro container.
Right now your css is scaling everything to the viewport width, so float left sends the pictures to the width of intro_container, which has no defined width.
Also note, you can apply your id directly to the image! no need to wrap that in a div. It is good practice to style elements semantically.
sometimes it's good to center things like that:
<html>
<head>
</head>
<body>
<div style="position:relative;width:400px;height:400px;background-color:green">
<div style="position:absolute;margin-left:50%; left: -100px; width:200px;height:200px; background-color:red">
here attribute 'left' is half of this container width
</div>
</div>
</body>
</html>
always working
Related
(Pre-posting update to my question: I figured it out before posting, but am posting anyways for the public's information-- even though this is pretty obscure stuff.)
I'm working on a new scrolling site for a game here's the working page: http://pman.mindevo.com/
I have been able to get all the backgrounds matched up and scrolling together for a parallax effect, but now I'm working on getting an animation that moves across the screen (eventually I'll work more on using SVG sprites to actually have the character animated), but I can't seem to get the pixel sizes to match up properly.
My latest and best working solution so far is to make the SVG the same height as the rest of the background images. The problem I'm having is at different browser widths the character's 'pixels' (I use this term loosely because it's vector) do not match up with the background's 'pixels'.
Does anyone have any suggestions in keeping him the same pixel-by-pixel size as the backgrounds at different browser widths?
Here's some information about the background SVGs (the SVG open tag):
This is one of the tree background parallax layers:
<svg xmlns="http://www.w3.org/2000/svg" width="2697" height="150" viewBox="0 0 2697 150">
Here's the character's ('Potatoman') svg header:
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="150" viewBox="0 0 10 150">
Originally it was embedded in the page as just an <img> by itself. Like so:
<div class="section2" data-1999="height:0;" data-2000="height:100%" data-3999="height:100%" data-4000="height:0" class="skrollable skrollable-between">
<h2> Some dialogue and potatoman animation happens in this section</h2>
<img src="images/theMan.svg" id="theMan" data-2000="left:-100%;" data-2300="left:0%" data-3300="left:0%;" data-4000="left:100%">
</div>
With the CSS like so:
#theMan {
position:absolute;
left: 0;
bottom:1.3em;
height:100%;
width:4%;
}
I had trouble getting it spaced properly vertically once it changed width.
Now that you've read this post, I figured out while doing it just how to make it work. If anyone has better ideas I will accept them as well. Otherwise I'm going to post my own answer to this question as I figured it out, but if anyone else is every working with Pixel graphics and wants to do what I'm doing, they have all the information right here.
So Here's how I had to change things around. First I removed the width property on the image (#theMan) and let it fall back to my basic img CSS like so
#theMan {
bottom:0;
height:100%;
left: 0;
position:absolute;
}
/* for reference img is set like so: */
img {width: 100%;}
Then I had to change my data attributes to manipulate the browser wide and browser high img to this:
<img src="images/theMan.svg" id="theMan" data-2000="left:-50%;" data-2300="left:0%" data-3300="left:0%;" data-4000="left:50%">
Since the image ended up centered in the page because it's width became 100%, shifting the entire image only 50% instead of 100% worked out, now when it scales it scales at the same rate as the background images as it's the same dimensions.
I have a website which has to be working on all browsers. I am designing a menu like the below image
I made this menu by using the following html and css code
Html
<ul class="menu">
<li><img src="images/ico1.png" alt="home"><span>Home</span></li>
li><img src="images/ico2.png" alt="products"><span>Products</span></li>
<li><img src="images/ico3.png" alt="Quality Assurance"><span>Quality Assurance</span></li>
<li><img src="images/ico4.png" alt="Gallery"><span>Gallery</span></li>
<li><img src="images/ico5.png" alt="Contact"><span>Contact Us</span></li>
</ul>
Css
.menu { float:left;}
.menu li {float: left;padding: 19px 45px; background:url(../images/seperator.png) no-repeat right;}
.menu li.last{ background:none !important;}
.menu li a { text-decoration:none; color:#553614; font-size:18px; font-family: 'fengardo_neueregular';}
.menu li a:hover{ color:#fff;}
.menu li span { float: left; margin-left: 5px;margin-top: 9px;}
It works perfectly in chrome, Ie9, firefox etc. But when i check in Ie8 the menu is collapsed like the below image
How do i rectify this error?
don't have ie8 at my disposal currently, but after looking # your markup/styles here are my thoughts:
1. the misalignment is more than likely margin-padding issues...looks like there is not enough room for the spans on the same line as the icon, and this break is amplifying it because once the spans are pushed off that line, they have margin-top declared, which is just pushing them farther away.
You have a few options here: 1st of all, target the menu in IE8 with conditional comments; illuminate the involved elements (i like to use contrasting bgs/borders/etc., whatever makes each element stand out from the group) and inspect them in F12...if the answer(s) isn't obvious off the bat, start comparing physical pixel sizes to another browser. So if you use Chrome in this case...you can find an element's dimensions by hovering over if Developer Tools are open...how does Chrome's size(s) compare to IE8's size(s)? If they sizes are not disparate, repeat this process for the same elements, only checking positioning, layout, padding, and margins. (# least) One of these should not match up to the other browser. You're going to want to compensate for the user agent rendering differences, and this is achievable using the conditional comments we've already used to target the menu. So lets pretend that all the li elements are vaguely 130px wide...if you notice that they're only 115px in IE, apply 15 more pixels of width to IE8 and only IE8 via the cc's.
i'm rambling bc i suck, but i'll try and wrap this up...your markup example is missing an opening bracket on the second li, prolly want to fix that first before you do anything else.
ditch the padding on the lis. also, apply display:inline to them and make your anchors display:block; float:left...that's a super easy to way to get rid of and/or test margin/padding issues.
i'd also place the icon into the a as background-images...that's me being particular, but that's actually a solution to your problem too...the spans can't collide with the imgs if there are no more img elements in the markup.
another possible easy solution here: the spans are floating left and applying a left margin...simply having the float:right could be a solution; floating them right and ditching the margin-left would be my second attempt, if simply float:right didn't resolve it.
I'm trying to wrap my head around CSS positioning guidelines. I'm trying to figure out how to make a sticky footer but have it stop being sticky when the main content area can no longer be condensed. An example of what I'm talking about can be found here http://ryanfait.com/sticky-footer/. Can someone explain to me why the footer stops being sticky and particularly what CSS properties cause this to occur? For me, as I look at the CSS it looks like the footer should just stay sticky to the bottom of the browser window always, but this isn't the case here. Why?
Thanks for the help.
Give this one a try.
http://www.cssstickyfooter.com/ (link no longer valid)
It is similar to Ryan's one but, from memory, I think I've had better luck with this (although both are very similar).
You have to declare the footer outside of the wrapper and give some height for footer and margin-top should -(footer-height)px
<div id="wrapper">
---
------
</div>
<div id="footer">
</div>
# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}
Here's a brief summary of a layout I use fairly consistently as a basis for projects that require a sticky footer. Not sure where I initially got all the code from but it was pieced together over quite a while.
http://jsfiddle.net/biznuge/thbuf/8/
You should be able to see from the fiddle that you require a '#container' element which will wrap the whole of the page. this gives you 100% height (note the hacks for ie present in the css), and allows and child elements of this 'container' element to derive a height, or position relative to it.
Pitfalls of this method are:
You need to provide some padding/margin at the bottom of the '#main'
element so that the footer is displaced further than it naturally
would, so need to know at least a broad range of what your footer
height should be.
IE doesn't seem (<=IE8 not tested 9) to recognize browser resize
events if you only resize the bottom edge of the browser, so in
that particular case the stickiness would fail, until a horizontal
resize was also presented as an event.
if you want a fixed width to the layout you should place this
constraint not on the '#container' element, but on the '#page'
element, and perhaps introduce extra elements beneath '#footer' to
provide any width constraints there.
Good Luck!
I have div containing multiple divs and text. The inner divs are alternately floated left and right and the text flows along side them in all browsers (including IE8) except for IE7. In IE7 the text is pushed to the bottom so that it is aligned with the top of the final inner div. I have tried all sorts of solutions and have read a good article on the subject
However, I'm still unable to prevent the text from being cleared in IE7. Here's the relavent HTML (please note this div is nested within an HTML table with a specified width as it is a legacy site. I have tried pulling the div out of the table, but the same behaviour occurs anyway):
<div>
<div class="left"></div>
<div class="right"></div>
Text goes here
<br />
Text goes here
</div>
And CSS:
.left { float:left; }
.right { float: right;}
I have tried applying display:inline, display: inline-block, clear: none, overflow: hidden, specifying widths, position: relative to the containing div, various hacks such as IE7 conditional with zoom: 1, min-width: 1% - basically hours of pulling my hair out and dredging Google for answers but I haven't found anything that works. Has anyone encountered this problem before and got a fix for it?
(for testing i am running IE8 in compatability mode in Vista)
I am sure of the headaches that IE7 brings. Thank God that it is much better than IE6, but it was a headache for me in many situations.
In this case I recommend that you generate IE7 specific code using tables!
Having major issues getting my wordpress website to display correctly in IE6.
Link to screenshot below. My background image is missing, the nav is knocked down a few extra pixels, and most of my content is off center.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ie6_wpterra.jpg
FF screenshot (linked below) is what it should look like. Have tried in Safari, a couple versions of Firefox, and IE7, and all look just the way that they are supposed to. IE6 is the only one giving me trouble.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ff_wpterra.jpg
Any ideas??
Link: www.genevarealtytrust.com/content
I've validated my code, and have tried a few things, but no success.
Help! Appreciate it!
You can try using conditional styles. In document's head section paste:
<!--[if lte IE 6]>
<link rel="stylesheet" media="screen,projection" href=www.example.com/ie.css" type="text/css" />
<![endif]-->
Now You can start editing ie.css without worrying about spoiling design for other browser.
Extra space around nav: IE sometimes has default margins/paddings different from other browsers. Try defining
#something {
margin: 0;
padding: 0;
}
explicitly in Your new css.
No background: Maybe it's the alignment. Try adding somethig like "top left" to Your background-image definition. Example:
background-image: url('../img/site-bg.jpg') no-repeat scroll top right;
Content centering: In CSS there are two ways to center content. First: setting the parent element text-align property to center;. Second: Defining width and setting margin to top-bottom-margin-value auto;. Example:
#something {
width: 100px;
margin: 10px auto;
}
I hope this will help solve any of Your problems :)
This isn't really an answer to your question (and since I don't have enough rep to comment :) ), but try running through this list of common IE CSS bugs. It's helped me work out some kinks in my CSS, but IE 6 is a warzone. Otherwise, I'd really suggest getting the fantastic book Bulletproof Web Design.
Thanks for the tips guys! Daveslab, I'll definitely keep that list handy, and thanks for the book recommendation.
Centering Issue/Missing Background Image:
I made the alternate css doc and that gave me more room to experiment - I was able to resolve the missing background image and centering issue by simplifying the CSS a bit for the problematic section by trial and error. (removed float, position...)
Extra pixels:
What finally ended up fixing the 3 pixels on the bottom of my header was... just stupid.
Evidently IE6 was applying an extra 3 pixels to the bottom of the header image because my html code for that div was split into 3 lines...
<div id="header">
<img src="url" />
</div>
I just had to combine them all into one line, and the extra padding on the bottom disappeared. Dumb... (and ugly)
<div id="header"><img src="url" /></div>
I still have an extra pixel on the right side that I'm trying to resolve - still investigating.