I'm making a site from scratch, and haven't gotten far before getting stuck-
It's very simple code, and nowhere do I specify margins or padding, yet when I view the page in Chrome and Firefox, there's this margin on the left side keeping anything from existing for the first 25 or so pixels. Something tells me this is normal/default, but is there any way I can completely center the page, surely it cannot be truly centered with this left:10px looking thing...
Here's the CSS:
.header {
height:100px;
width:100%;
top:100px;
z-index: 1;
position:fixed;
background-color:#767676;
top:0px;
}
html {
background-color:transparent;
color:#555555;
font-family: 'Roboto', 'Univers';
line-height: 1.0em;
width:100%;
height:100%;
background-color:#f8f8f8;
}
...And a screenshot showing exactly what I'm talking about:
http://i.stack.imgur.com/vFDID.png
You probably need a CSS reset of some sort to erase browser defaults. On my projects, I include * { padding: 0; margin: 0; } at the top of my CSS. This takes care of almost everything.
Related
I apologize if this question is super simple. I have been trying to use a third party website builder for a client for ease of access/editing later on but he really wants a responsive site that resizes and centers itself no matter what browser/resolution it's displayed on. I am pretty sure I will need to just start from scratch and build him something completely customized. I'm struggling to even know where to start with this as coding responsive sites is still new to me. Any help or guides that someone could point me to would be greatly appreciated.
#page {
margin-left:auto;
margin-right:auto;
width:960px;
}
#stage {
margin: 1em auto;
width: 360px;
height: 540px;
}
#stage a {
position: absolute;
}
#stage a img {
padding: 0px;
border: 0px solid #ccc;
background: #fff;
}
Do you want the body to be always centered so it doesn't have layout problems on different devices or do you want every element to be center aligned?
I think it's the first one.
You could use width:95vw; on the body element and margin:auto;.
You could work with media queries.
It's also important to add the viewport meta tag in the head.
Let me know if I understood the question
I really have issues understanding how to handle the top notch on iPhone. I use a css in which I added the following snippet
#Constants {
includeNativeBool: true;
...
Default {
border: 0px;
margin: 0px;
padding: 0px;
}
Form {
cn1-derive: Default;
}
Toolbar {
cn1-derive: Form;
}
StatusBar { /* This is required on the very top on iOS */
cn1-derive: Toolbar;
padding: 13px;/*mandatory*/
}
but still it shows wrong on iPhone with the top notch. OK, the statusbar padding is set to 13px but how to make this value depend on the phone it's running? Can you help tell me what I am missing?
Thanks for any help you can provide.
Emmanuel
This is set to the right amount of padding by default so I would recommend you just remove the definition of status bar entirely. It's transparent and padded with millimeters when applicable e.g. in Android it's 0px but on iOS it has 2 millimeters. This isn't a lot for iOS and things can appear tight (which is what some developers want) so you might want to have another millimeter or two of padding in the Toolbar if you override padding.
I would like to make the top nav bar in a foundation page collapse into the menu form earlier than it does by default because in lower res desktop screens it semi collapses and is neither in mobile view or full desktop view. I tried modifying the following line:
#media only screen and (min-width: 40.063em) { <---This is the line I changed
.top-bar {
background: #333333;
*zoom: 1;
overflow: visible; }
-----many more lines-------------------------
It sort of worked, as the bar collapsed earlier in the re-sizing but the menu stopped working. Any ideas as to how I can accomplish this?
Any help will be greatly appreciated, thank you.
(I'm using foundation 5 by the way)
I know this is an old question but if you haven't found the answer yet, or for anyone else who may be viewing this...
It looks like you were off to a good start.
Around line 1662
#media only screen and (min-width: 9999px) {
.top-bar {
background: #333333;
*zoom: 1;
overflow: visible; }
But you actually need to make changes in 2 additional locations.
Around line 3714:
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:9999px)/";
width: 9999px; }
Around line 1436:
meta.foundation-mq-topbar {
font-family: "/only screen and (min-width:9999px)/";
width: 9999px; }
Full answer is here: Changing Topbar breakpoint using css?
Hope this helps!
I'm using text shadows for most text site wide, but when you highlight / select the text - the text looks fuzzy. So in order to remove the text shadow I use this css from here.
::-moz-selection,
::-webkit-selection,
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
The problem is that for some reason moz-selection doesn't seem to work (anymore?) in mozilla (Firefox).
Here's the jsFiddle
It seems like the problem was due to grouping multiple css rules (for the vendor specific css) together in conjuntion with the ::selection pseudo element.
I originally thought that it was sufficient to write each statement on a separate line.
I was mistaken.
So if I replace this code:
::-moz-selection,
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
..With this code:
::-moz-selection
{
text-shadow: none;
background: #333;
color: #fff;
}
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
.... bingo, it works.
FIDDLE
Support is also very good (for desktop): Caniuse
Also, if you use LESS or SASS - you could easily write a mixin to get around the repitition.
The following is documented on Mozilla Developer Network:
Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase, as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved (based on discussion in the W3C Style mailing list).
The ::selection pseudo-element currently isn't in any CSS module on the standard track. It should not be used in production environments.
Similar questions have been asked here before, but after reading through them I've not yet found an answer that works with my site.
I've built the site around Bootstrap but added some of my own media queries. Live test site is at: http://agoodman.com.au
The sections being changed by the media queries are "our fees" and the "map" overlay. If you're on a laptop, resizing the browser makes these sections display as blocks.
My stylesheet links:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/user.css" rel="stylesheet">
"User.css" is just a separate file because I wanted to be able to keep and update bootstrap's main framework as necessary. User.css overrides the styles in bootstrap. My media queries in user.css are as follows:
#media screen or handheld(max-width: 979px) {
.fee-buttons {
height: auto;
font-weight: 600;
position: relative;
padding: 0;
margin: 0;
list-style: none;
}
.fee-buttons .transformation {
width: 100% !important;
height: 300px;
position: relative;
z-index: 10;
left:0;
}
.fee-buttons .hourly, .fee-buttons .membership {
float: none;
width: 100% !important;
}
li.button{
overflow:visible;
}
}
#media screen or handheld(max-width: 995px) {
#overlay {
position: relative;
display: block;
width: auto;
right: 0;
padding:1em;
}
}
As I said, on desktop browsers this works fine, but on mobile browsers it's not working at all. I've tested both on an iPhone 4 (using safari) and on an HTC Desire (using the stock android browser) and both display the same way - ignoring the media query and just displaying the full website with lots of really squished and unflattering content.
Any ideas on what I'm doing wrong here?
EDIT:
Here are screenshots of what it's SHOULD look like at a small screen width:
And what it currently looks like on Android and iPhone, where the device is ignoring my media queries:
Sorry to answer my own question, but I found something that worked.
There was an error with the way I set up the media query. Instead of
#media screen or handheld(max-width: 995px)
I changed the query to
#media handheld, screen and (max-width: 995px)
as suggested by this guy: https://stackoverflow.com/a/996820/556006
and it worked perfectly across all devices. Thanks to those who offered suggestions, upvotes to all of you.
displaying the full website with lots of really squished and unflattering content.
This might be due to the fact that your media queries target large screens with a width of 979 and 995 pixels. Mobile screens are much smaller.
To target something like an iPhone 4 you need a max-width of 960px (that's why bootstraps default is at 960) for landscape and 480px for portrait.
Since you can't target all possible screen sizes bootstrap offers a sensible list of default widths which you should stick to too.