I have a website that looks fine in my resolution and even in the more common 1024 x 768. Yet, in someone else's browser in 1024 x 768, it's too wide and the website doesn't even center correctly.
Is there a way to have a proper width layout that doesn't change when the resolution is changed?
/* Body */
body {
background: #535353;
font-family: Arial;
font-size: 12px;
color: Black;
}
form {
margin:0;
padding:0;
display: inline
}
* {
margin: 0;
padding: 0;
}
/* Header */
#header {
margin-left: 100px;
margin-right: 100px;
overflow: hidden;
}
/* Logo */
#logo
{
background-color: White;
}
/* Menu */
#menu {
margin-left: 100px;
margin-right: 100px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0 0 0 0;
text-align: left;
background-color: #AB0000;
font-size: 14px;
color: White;
font-weight: bold;
}
#menu a {
font-size: 14px;
color: White;
font-weight: bold;
}
#menu a:hover {
color: Yellow;
}
/* Spacer */
#spacer {
background-color: #8C8C8C;
}
/* Sidebar */
#sidebar {
margin-left: 100px;
margin-right: 100px;
padding-left: 10px;
font-weight: bold;
text-align: left;
background: url(Images/leftborder.jpg) repeat-x left top;
background-color: #C2C2C2;
}
#sidebar p {
color: Black;
font-weight: normal;
font-size: 11px;
}
#sidebar a{
color: Black;
font-weight: normal;
font-size: 11px;
}
/* Quick Links */
#quicklinks a{
color: White;
font-size: 12px;
font-weight: bold;
text-decoration:none
}
/* Content */
#content {
margin-left: 200px;
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
background-color: #C2C2C2;
}
#content p {
font-size: 12px;
}
#content a{
color: Black;
font-weight: bold;
}
/* Gallery */
#gallerylinks{
border-color:Black;
}
/* Footer Space */
#footerspace {
background-color: #AB0000;
}
/* Footer */
#footer {
width: 891px;
height: 70px;
margin-left: 100px;
margin-right: 100px;
margin-top: 0px;
margin-bottom: 0px;
padding: 0 0 0 0;
text-align: center;
background-color: #C2C2C2;
font-weight: bold;
color: Black;
}
#footer a {
font-weight: bold;
color: Black;
}
#footer a:hover {
color: Yellow;
}
If you don't want the width to change with resolution/browser size, then use absolute widths in your CSS as opposed to percentages (860px as opposed to 90%).
However if it looks different in someone elses browser, it could be because of their font and font size being different.
Usually you want your layout design to accommodate the users screen resolution. You can get that done by setting your container widths to percentages. Obviously this should be set for the containers and not images.
If the layout changes on different computers, it's likely to be because of
Using a different browser and/or operating system
The browser window is resized on one of the computers
Different text size that breaks the layout (Text resizing in IE does this)
Your markup and CSS-code is full of errors.
Care to post some code?
You have two options:
Adjust your layout so that it renders properly in percentage units; resize the width of your browser window to test
Set your container width using length units (such as pixels) instead of percentage units
Make sure to test in multiple browsers as there are usually subtle variations in the way they interpret the CSS rules. Also consider using a CSS reset library to make this easier.
Browser-based apps are guests on the desktop! You can't ever assume things like screen resolution. You must test your app in as many ways as you can image. Also, use tools like Google's BrowserSize http://browsersize.googlelabs.com/ or FF's WebDeveloper https://addons.mozilla.org/en-US/firefox/addon/60/ to see what your browser app looks like in difference screen sizes.
Also, if the person has a wide screen monitor running at 1024x786, that would make things appear a little weird, too.
This is about centering correctly.
Without the HTML it's a little hard to figure out exactly what's going on, but I don't really see any CSS that would center things.
The trick to centering things in CSS is that you want equal amount of space to the left and right of an item, but since you don't know how big the user's window will be, you don't know how big this space is going to be. The solutions is to use margin:0 auto;
If you guess at the left and right margin sizes for centering things, then you will usually end up with a left margin that is what you specified and a right margin that depends on the user's window size, so things won't look centered if the window size gets bigger than a certain amount.
Here's the deployment on an example page:
The CSS:
#page {
/*
width must be specified or the div will take up all the horizontal
space it can (can be ems, %, whatever)
*/
width:860px;
/*
Top and bottom margins are zero.
Left and right are automatically the same.
*/
margin:0 auto;
}
The HTML
<div id="page">
<h1>Something interesting</h1>
<p>Something enthralling</p>
</div>
I ended up restyling the webpage in 1024X768. Then everything worked out for all other resolutions.
Related
I currently have a text-align: center; h1 element. It also has a background-color: #000506;. The current issue is that this background color fills the whole line as shown here:
What I want it to do is to only fill the area where the text is. The only way I've been able to do this is making the left and right margins really large, and even then it's not perfect.
margin-left: 600px;
margin-right: 600px;
you can reset display to use the table-layout model so it will shrink to fit content.
example
h1 {
display: table;
margin: auto;
/* extra style */
border-radius: 1em;
background: #333;
color: #eee;
padding: 0 0.5em;
line-height:1em;
}
<h1>Sheet List</h1>
theoraticly and very soon, display won't be needed, width and margin:auto will do fine when max-content will be widely implemented.
h1 {
width:max-content;
margin: auto;
/* extra style */
border-radius: 1em;
background: #333;
color: #eee;
padding: 0 0.5em;
line-height:1em;
}
<h1>Sheet List</h1>
https://developer.mozilla.org/en-US/docs/Web/CSS/width#fill
max-content
The intrinsic preferred width.
I'm trying to make a horizontal scroll gallery for a portfolio of photography on my website, but I want the images to be responsive to height (to fit varying screen sizes). To try and do this I have used the unit: vh and this is causing me problems.I have a position:fixed header and footer so they always stay on the screen while you scroll through the gallery. With the CCS I have used this means as the screen gets smaller, the images go underneath the header & footer rather than constantly staying inbetween them.
I have seen a website with an ideal horizontal gallery very similar to what I am trying to achieve. You can check out the website here. On the linked website the images always seem to stay equidistant from the header and footer.When inspecting the element it looks like they're using tables, which I understood to be a big no, no. Is this how they are achieving this effect on the gallery?
I've linked a JS Fiddle to a very basic version of my design so you can see what I've done so far.
JS Fiddle: https://jsfiddle.net/pmh9zvta/1/
Basically, in a sentence I'm asking how I can achieve the same effect as the example website in the link.
Robin,
Hmm...so vh can actually achieve a pretty similar effect. Your example images are rather extreme, though (1500x100).
Check out this fiddle I made (using your code as a base):
https://jsfiddle.net/Benihana77/5xw21tvc/
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
height: 100%;
box-sizing: border-box;
position: relative;
}
body {
position: relative;
margin: 0;
padding-bottom: 100px;
min-height: 100%;
}
#header {
width: 100%;
padding: 10px;
margin-right: auto;
margin-left: auto;
position: fixed;
background-color: #fff;
background: rgb(255, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, 0.92);
text-align: center;
z-index: 1;
}
#gallery-wrapper {
position: relative;
padding-top: 60px;
overflow-x: scroll;
}
#gallery-wrapper img {
height: 70vh;
width: auto;
}
#footer {
font-family: Corda-Light;
font-size: 14px;
color: #333;
width: 100%;
padding: 5px;
padding-top: 13px;
padding-bottom: 8px;
padding-left: auto;
padding-right: auto;
position: absolute;
bottom: 0;
background-color: #efefef;
text-align: center;
background-color: #fff;
background: rgb(255, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, 0.9);
z-index: 1;
}
/* Navigation Bar Styling */
.nav {
border-bottom: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 10px;
}
/* Horizontal Gallery Styling */
ul.gallery-row {
white-space: nowrap;
}
ul.gallery-row li {
list-style: none;
display: inline;
}
/* Footer Styling */
.footer {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.footer img:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
Main changes
Added a wrapper around your content for better management (within JSFiddle and out).
Changed your footer to be positioned absolutely, along with a host of other changes that allow it to stick to the bottom until your Viewport is too short. Then it gets pushed down like a normal footer. This keeps your content from going behind the footer.
Made the "gallery-wrapper" with "overflow-x:scroll". I'm personally not a fan of side-scrolling galleries, but if your heart is set on it, this will keep the side-scrolling contained to this block, and no your entire website (in turn obviating the need for a "fixed" footer).
Chose some more realistic image dimensions to work with, and a shorter vh (70).
Regarding your example, as best as I can tell, they're using Javascript to rewrite the height of the "scrollHolder" container DIV. So their solution is not CSS-only, instead using JS to read the height of the browser and adjust the height accordingly.
I'd also say their approach is flawed, as it doesn't scale properly to browser width. On a thinner screen, you can only see zoomed-in pieces of each image.
So, in addition to the above changes, I'd recommend:
Setting media-queries at an appropriate browser width (say 760) so that your images become scaled by browser width, not height (so vw, not vh).
This might require some special "min-height" settings in order to keep your tall images from becoming toooo tall, and short images from becoming little munchkins.
Ok, here is the issue I am having. I am hoping to seek some guidance on this. I am sure I am doing something wrong, but what that something is I don't know. I have attached two screen shots to show what I am doing here. The second one will show the anchor tags, which are display: inline at the moment overlapping each other when the browser window is to small.
**** CORRECTLY DISPLAYED ****
**** INCORRECTLY DISPLAYED ****
#linkWrapper A {
padding: 10px;
border: 5px dashed #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
width: 200px;
height: 30px;
margin: 0 auto;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 30pt;
display: inline;
}
Since you dont post the html, my wild guess would be that the height CSS property does not suffice the whole button height.
So instead, use
CSS
#linkWrapper A {
height: 100px;
line-height: 100px;
}
It is a good habit to include the line-height property for cross browser compability.
One suggestion is try to use it on % for height and width which helps lots of time, along with issues
about your issue, when screen in decreased the div or span font-size will remain as it is, that's why you will see two line one above and below, you can use #media query in CSS which help you in customizing for different screen width and height variant
#media (min-width: 481px) and (max-width: 850px) {
#linkWrapper A {
padding: 10px;
border: 5px dashed #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
width: 200px;
height: 30px;
margin: 0 auto;
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 30pt;
display: inline;
}
}
NOTE:
above css i have just copied and pasted, please change the css properties as you desired, so as above you can give for any width size screens
let me know if you have trouble
I've created a couple of simple buttons using a link and some CSS to give it a background and I'm trying to center it on my page. However, because the text in one of the buttons is longer than the other, the buttons are of different sizes and for consistency, I'd like them to be the same width.
How can I keep these buttons the same size? Trying to float them and use percentage widths results in them not being centered. The relevant markup is below.
<section class="buttonsSection">
<a class="button" href="#">Very Long Sentence</a>
<a class="button" href="#">Short Phrase</a>
</section>
.button {
padding: 10px 15px;
background-color: deepskyblue;
color: white;
}
.buttonsSection{
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.buttonsSection a {
margin: 3px;
}
JSFiddle: http://jsfiddle.net/Dragonseer/eTvCp/11/
Answer
While both of the answer below are valid, I'm updating my answer to using Flexbox. Most modern browsers have excellent support for it, including IE11 which will be released in the very near future. Flexbox appears to provide a much better solution to doing complex layouts which requires less effort than it's alternatives, such as floating items.
use a fixed width with inline-block on the buttons.
Working Fiddle
.button {
padding: 10px 15px;
background-color:deepskyblue;
color: white;
display: inline-block;
width: 20%; /*or any other width that suites you best*/
}
.callToAction {
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
using inline-block provides a little-bit of margin between the elements (caused by a white-space in the HTML) so I removed the marin from the CSS, but you can put it back.
Easily done with flexbox:
.button {
padding: 10px 15px;
width: 150px; /* Fixed width links */
background-color:deepskyblue;
color: white;
margin: 3px;
}
.callToAction {
margin: 30px 0;
display: flex; /* Magic! */
justify-content: center; /* Centering magic! */
}
Working Example
.button
{
width: 150px; /* Your custome size */
background-color:deepskyblue;
color: white;
margin: 3px;
padding: 10px 15px;
}
Section a
{
width: 150px; /* for your all buttons */
}
I would like to understand the correct way to align different size type between different div classes. Right now, the code forces the smaller type to align with the top of the larger type. How do I align the type across all divs on the same typography baseline with the cleanest code. This seems like really easy stuff, but I cannot find an answer.
I also hope this is semantically correct (I am trying to create a row of data that is responsive and can resize and rearrange (float) on different devices). All suggestions welcome.
Link to Demo
You need to adjust the line-height and possibly the vertical margins for each font size so the match a baseline grid.
I'd recommend reading this : http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/
Sounds like you need CSS' line-height property. That way you can make the lines of text the same height but affect font-size separately
#artist { /* Selector to affect all the elements you want */
color: #000;
font-size: 18px; /* Default font size */
line-height:18px; /* Line height of largest font-size you have so none go */
/* above the top of their container */
}
Demo
Adjusting where text is placed is done with padding and margin. but for this setting a p class to each of your divs gives you control of wher eyou want text placement within the div. of course your padding will vary for your baseline shift since you have mutiple em sizes of your fonts. fiddle http://jsfiddle.net/rnEjs/
#artist {
padding: 5px;
float: left;
width: 100%;
background-color: #036;
color: #000;
font-size: 18px;
overflow: hidden;
}
.genre {
width: 5em;
float:left;
height: 50px;
background-color: #09F;
}
.genre p {
padding:5px 5px;
}
.artistName {
float: left;
width: 175px;
height: 50px;
background-color: #F39;
}
.artistName p {
padding:5px 5px;
}
.birth {
float: left;
width: 5em;
height: 50px;
font-size: 12px;
background-color: #F90;
}
.birth p {
padding:15px 5px;
}
.medium {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #099;
}
.medium p {
padding:15px 5px;
}
.gallery {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #FF6;
}
.gallery p {
padding:15px 5px;
}
.website {
float: left;
width: 10em;
height: 50px;
font-size: 12px;
background-color: #99F;
}
.website p {
padding:15px 5px;
}
<div id="artist">
<div class="genre">
<p>Genre</p>
</div>
<div class="artistName">
<p>Artist First Last</p>
</div>
<div class="birth">
<p>birth year</p>
</div>
<div class="medium">
<p>medium</p>
</div>
<div class="gallery">
<p>gallery name</p>
</div>
<div class="website">
<p>website</p>
</div>
</div>
I found a good answer to your question from this Stackoverflow thread: Why is vertical-align:text-top; not working in CSS.
The gist of it is the following:
Understand the difference between block and inline elements. Block elements are things like <div> while inline elements are things like <p> or <span>.
Now, vertical-align attribute is for inline elements only. That's why the vertical-align didn't work.
Using the Chrome dev tool, you can tinker with your demo and see that it works: specifically, inside <div> tags, put <span> tag with appropriate style.