website resolution issues - css

I use % for everything so my site works the same in all screen resolutions. However the position of the content is misplaced and varies from resolution to resolution and from browser to browser. A thing that I noticed and is probably related to the problem is that the background image doesn't react to zoom. The content however reacts.
html {height: 200%; width: 100%;}
body {
min-width: 99%;
height: 100%;
margin: 0;
padding: 0;
color: #969696;
background-color: black;
text-align: center;
font-family: Arial;
font-size: 100%; }
container {
position: relative;
height: 100%;
margin: auto;
width: 85%;
text-align: center;
border: 1px solid red;
background-image: url('images/bgmain.png');
background-repeat: no-repeat;
background-size: 100% 100%;
overflow: hidden; }
navbar {
position: relative;
min-height: 2%;
margin-top: 21%;
margin-left: 2%;
padding: 0 auto;
width: 95%;
text-align: center;
overflow: hidden; }
For example the navigation bar in my resolution is fine while on other resolutions its misplaced. Is there any mistake? Do I miss something? Thanks in advance.

A reset of css styles would help to gain much control to your styles. Refer to this link http://meyerweb.com/eric/tools/css/reset/ and this http://developer.yahoo.com/yui/reset/ and also this http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

Related

Text won't fill the container in a column

I've been experimenting with various columns techniques and I'm liking this one. I plan on having one more image under them and centered. I have the images flipping once selected. My problem is the text on the back (.flip-item-desc) is inheriting the 50% width from the container (#top div). I can't figure out how to make the text div fill the back of the image.
#top div, #bottom div{
background-color: aqua;
text-align: center;
margin: 1% auto;
width: 50%;
height: auto;
}
.flip-item-desc{
font-family: sans-serif;
font-weight: bold;
color: white;
text-align: center;
font-size: 80%;
line-height: 1.237;
background: rgba(0,0,0,0.5);
width: 96%;
height: auto;
margin: 2% 2%;
padding: 2%;
position: absolute;
top:0;
left: 0;
overflow: hidden;
}
I copied and pasted my code with hosted image here: https://jsfiddle.net/digi57/ojLtu049/1/
I added a few lines in your CSS code -
.flip-item-desc {
min-width: 96%;
}
.back {
overflow: hidden;
}
here is the fiddle - https://jsfiddle.net/ojLtu049/2/

Why is one of the media query rules not applied?

I've recently discovered media queries as a tool, so don't have much experience (seconds day, really).
I have a #logo that uses a margin-left of 7% of the width, but the rule that changes it to 25px doesn't work for some reason. Interestingly, the rest of the particular media query works fine, just the logo one doesn't. What could be the problem?
#media (max-width: 1320px) and (min-width: 105.1px){
#wrapper {
width: 100%;
}
#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 25px;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}
}
#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 7%;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}
Your media query needs to go after the normal set of rules for #logo for your query to override your default rules. You can remove your important flag once you do that.
You need to clean up your media query a bit, as there is some redundancy. Also, you need to decide how you want to structure your CSS, as in mobile first approach or large screen then target down for smaller screens. In your code there isn't really a good reason to use !important as structuring the initial CSS will correct the issue.
Also in your example, a min-width:105 is sort of useless as mobile screens have a min-width of roughly 320px (I'm speaking generally). Here is how you would have it set up if you want all your styles to apply until the screen width goes wider than 1320px.
Here's a jsfiddle as an example: http://jsfiddle.net/disinfor/t9rq36mn/
Note, I changed the (min-width) in the fiddle to 600px so you can actually see it working. You can also change min-width to max-width in the fiddle to see it work in reverse.
MOBILE FIRST APPROACH:
#wrapper {
width: 100%;
}
#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 25px;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}
#media screen and (min-width:1320px) {
#logo {
margin-left: 7%;
}
}
LARGE SCREEN FIRST APPROACH:
#wrapper {
width: 100%;
}
#logo {
width: 195px;
height: 96px;
position: relative;
max-width: 230px;
max-height: 110px;
min-width: 115px;
min-height: 96px;
border: thin solid #000000;
float: left;
margin-left: 7%;
margin-top: -1px;
background-repeat: no-repeat;
background: black;
}
#media screen and (max-width:1319px) {
#logo {
margin-left: 25px;
}
}
Basically, you only need to change the property of the element that actually changes once you reach that media query parameter (min-width, max-width, min-device-width,max-device-width, etc.)
Hopefully that helps clear things up.

Position and Height trouple with layered divs using z-index

I need some help finessing a layout I’m working on.
Here is a link to the current status of the site:
http://sometimesyoubreakaclarinet.com/
What you’ll see is a large pink area behind the gray content area, it is roughly a third down the page. For some reason, it is only forming to 100% of the height/width of the browser when I actually want it to match the height of the content. How do I get the height to fill down to fit to the content, in the same way the gray content area is already doing?
Secondly, I want this pink area to begin at the end of the background banner image at the top rather than where it is now. How do I achieve this? Do I need to change the position from relative to something else?
The goal here is to have the pink area flow over the banner image and title; something like what is outlined here:
http://line25.com/tutorials/how-to-create-a-simple-collapsing-header-effect
I’ve include what I think is the relevant CSS code below, possibly I’ve left something important out but you should be able to locate the CSS file on the link above if necessary.
#menu { width: 100%; height: 32px; margin: auto; padding: 6px auto 0; top:0px; z-index: 10;
position: fixed; text-decoration: none; background: rgba(44,44,44,0.95); }
#photograph { width: 100%; margin: 0 auto; background: #8a2dc7 url('img/header-2014-apr-1200.jpg') fixed center top no-repeat;
background-position: center top; background-size: 100%; min-height: 250px; height: 250px; top:0px;
position: fixed; }
#sitetitle { width: 100%; height: auto; margin: 0 auto; padding: 25px 0 0 0; background: transparent; position: fixed; } #deck { width: 100%; height: 100%; min-height: 100%; margin: 0 auto; padding: 0; position: relative;
background: transparent; z-index: 4; }
#card { width: 800px; height: auto; margin: 170px auto 0; padding: 10px 18px;
text-decoration: none; background: #2c2c2c; }
#curtain { width: 100%; height: auto; min-height: 100%; margin: 220px auto 0; padding: 0; position: relative;
background: #f12fde; z-index: 2; }
Hopefully someone can help me figure this out. Thank you!
does this fix your issue? Change the css of #curtain to..
#curtain {
width: 800px;
height: auto;
min-height: 100%;
margin: 0 auto;
padding: 0;
position: relative;
background: #f12fde;
z-index: 2;
top: 0;
}

Vertically aligning a div and proper scrolling overflow, is this possible?

I've discovered that I can have one or the other, but can't seem to figure out both.
My HTML is as follows:
<div id="middle">
<div id="middleinner"></div>
</div>
And the CSS goes a little something like this (z-indexes set for something else on the page, left out here because it's irrelevant, plus there's a few commented out things as I tried to figure it out as I went along):
html, body{
font-family: helvetica, sans-serif;
font-size: 1em;
height: 100%;
overflow: hidden;
}
#middle{
/* display: table;*/
display: table;
height: 80%;
width: 90%;
/* position: fixed;*/
position: absolute;
top: 10%;
left: 5%;
right: 95%;
bottom: 90%;
color: #000;
z-index: 0;
}
#middleinner{
padding: 0.5em 1em 0.5em 1em;
background-color: #F9F9F9;
display: table-cell;
/* display: inline-block;*/
border-radius: 1.5em;
vertical-align: middle;
/* margin-left: auto;
margin-right: auto;*/
text-align: center;
/* position: relative;*/
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
z-index: 20;
}
Anyway, if I change middleinner's position to relative instead of absolute, I've got vertical alignment at the cost of proper overflow handling. If I set it to absolute, I've got proper overflow handling at the cost of vertical alignment.
Is there a pure-CSS way that I can handle this?
Yes, a combination of line-height, inline-block, and vertical-align can do it.
#middle {
width: 80%;
margin: 10px auto;
border: 1px dashed black;
height: 500px;
line-height: 500px;
vertical-align: middle;
text-align: center;
}
#inner {
height: 50px;
width: 80%;
overflow: auto;
display: inline-block;
line-height: 1.1em;
}
Demo
To have it work with a dynamic height element, you'll have to use some JavaScript, since you're using jQuery, I'll go with that. It's perfectly possible to use vanilla JS for this one too.
resize = function(el) {
el.css({lineHeight: el.height() + "px"})
};
$(document).ready(function() {
var $middle = $("#middle");
resize($middle);
$(window).on("resize", function() {
resize($middle);
})
})

main content div won't center

i have a twitter layout, well sorta.. the main table kinda looks like it, with the way it's sectioned off...
html {
-webkit-user-select: none;
text-shadow: 2px 2px 2px #000;
color: #fff;
font-smooth: always;
padding: 0;
width: 100%;
height: 100%;
background: url("./img/main_back.jpg");
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
body
{
height: 100%;
width: 100%;
}
.content_wrap {
position: relative;
top: 5px;
display: inline-table;
margin-right: auto;
margin-left: auto;
width: 90%;
height: 100%;
background-color: transparent !important;
}
.left_table {
overflow: hidden;
display: table-cell;
text-align: center;
width: 50%;
height: 100%;
padding-left: 5px;
padding-bottom: 20px;
}
.right_table {
display: table-cell;
text-align: center;
width: 20%;
height: 100%;
}
html5 doc type
header <-- floated left
section <-- floated right
section <-- content wrap
section <-- left_table
aside <-- right_table
footer <-- fixed position, bottom 0px
markup is spot on, i check it with the w3c site all the time.
can't get it to center, it's off center by about 30 to 40px, anyone have any ideas?
I notice that nowhere in yoru code do you actually have a center on your content div...
Perhaps you mean this?
body
{
height: 100%;
width: 100%;
text-align: center;
}
Also, first comment has a point.

Resources