I just starting turning away of doing all things in and am playing with div and floats.
I have a homepage that need to have a two column in top and one beneath.
When the user have a small screen as a mobile, it need to put every box on each row as the example.
What is the correct way of doing this?
This show the code: http://jsfiddle.net/boje/cMF4P/1/
This is what the homepage do now.
Some of the code
/* ===== form2 ===== */
fieldset.fieldsetLeft {
width:47%;
float:left;
padding: 10px;
margin-bottom: 15px;
}
fieldset.fieldsetRight {
width: 45%;
float:right;
padding: 10px;
margin-bottom: 15px;
}
.clearBoth {
clear: both;
}
For smart phones & tablets you can make a dedicated css file which will overload the normal css style sheet:
In your header .html:
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="smart_tablet.css" type="text/css" />
Then into smart_tablet.css redefine the specific:
fieldset.fieldsetLeft {
width:100%;
float: none;
}
fieldset.fieldsetRight {
width: 100%;
float: none;
}
In your code you can change float right to float left on the right box and it will work as intended.
http://jsfiddle.net/PzAsJ/
fieldset.fieldsetRight {
width: 45%;
float:left;
padding: 10px;
margin-bottom: 15px;
}
However have a look at css3 media queries, it gives you much more possibillities.
Related
I have a few different stylesheets and one has #media queries that for some reason are being loaded regardless of screen size in IE. The #media queries were in my main Site.css file so I moved them to a 'new' stylesheet for all browsers. If put them in an IE specific stylesheet and remove them from all other stylesheets then everything works as planned since i'm targeting IE10 with the JS that adds the ie10 class if the correct browser loads so i'm good. Problem is that i need those #media queries for things to work on all other browsers and since IE10 and above have stopped using conditional statements i cant exclude the 'new' stylesheet by using the <!--[if !IE] comment.
If i use:
<!--[if !IE]>
<link href="#Url.Content(string.Format("{0}/css/search-media-queries.css", Model.RequestAuthorityUrl))" rel="stylesheet" type="text/css" />
<![endif]-->
It seems to work on all IE but it doesn't load the stylesheet in the other browsers. The syntax for the location of the stylesheet is a little odd but theres a purpose to that and it has nothing to do with the issue so i dont want to clutter this question wit
Any advice on how i should go about adding these styles to all browsers EXCEPT ie and then i can have them in the IE specific stylesheet so they wont load right away and break my layout. I understand this probably sounds confusing and was a difficult bug to finally figure out because i also couldn't see my code in the IE inpsector to debug so i had to just take out CSS until i finally noticed what it was.
ORIGINAL ISSUE:
What was happening is that i have a div with some inputs and have made that div responsive and tweaked with #media queries. If i load the page the div and it's contents are displayed as if already using one of the #media queries although the browser size is outside of the scope of the #media queries. If I resize the browser (make it smaller) and then i set it back to fit the full size of my screen then the correct layout is applied.
UPDATE CSS CODE EXAMPLE:
#media screen and (max-width: 1222px)
{
div#spiSearchWidget
{
width: auto;
}
div#spiSearchWidget #spiStartDate
{
margin-right: 20px;
margin-bottom: 0px;
}
div#spiSearchWidget .endDate
{
}
div#spiSearchWidget .adultLbl
{
margin-right: 58px;
margin-left: 20px;
}
div#spiSearchWidget .childLbl
{
margin-bottom: 0px;
}
div#spiSearchWidget select#Children
{
margin-left: 10px;
}
div#spiSearchWidget #spiSrchBtn
{
clear: none;
margin: 20px 70px 0px 70px;
}
}
#media screen and (max-width: 1104px)
{
#spi-walkin-searchbox .availContLrg
{
width: 20%;
}
div#spiSearchWidget
{
width: auto;
}
div#spiSearchWidget #spiStartDate
{
margin-left: 20px;
margin-bottom: 10px;
}
div#spiSearchWidget .endDate
{
clear: both;
margin-left: 10px;
}
div#spiSearchWidget .adultLbl
{
margin-left: 42px;
clear: both;
}
div#spiSearchWidget .childLbl
{
clear: both;
margin-bottom: 0px;
margin-left: 34px;
}
div#spiSearchWidget select#Children
{
margin-left: 10px;
clear: both;
}
div#spiSearchWidget #spiSrchBtn
{
clear: both;
margin: 20px 20px 0px 20px;
}
}
All of that is loaded from the beginning for some reason.
Your problem isnt about excluding stylesheets, it should be about getting it to work properly in all modern browsers. They removed conditional comments for a reason.
IE10 is not bad at rendering. Ive personally never had an issue with responsive code and IE9+. Maybe post a snippet so we can see how you're doing it?
I found this helpful, from http://www.impressivewebs.com/ie10-css-hacks/
if (/*#cc_on!#*/false && document.documentMode === 10) {
document.documentElement.className+=' ie10';
}
I have an issue with responsive design on my site. The problem is that, when the page is loaded, I can see the "the mobile look" but its zoomed out. I think it's a problem that my page has some element which sets the width to some large number. Because of that I have a horizontal slider and a large empty white area on the right side of the screen.
Any ideas how to fix this?
Site is at http://www.studentskizivot.com/
I used viewport at header.php (head)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#media code :
html{
background:none!important;
width:100%;
}
#text-51, #text-79, #polls-widget-7 {
display:none;
}
#bglink{
display:none;
}
body {
background:none!Important;
margin:0px auto;
}
#footercontent .footerboxlast{
margin-top:15px;
}
#footercontent .footerbox {
width: 209px;
display: block;
clear: both;
float: left;
margin: 15px 16px 0px 0px;
border: #FF0000 solid 0;
padding: 0;
background: url(images/skin1/footer_bgrdbox.png);
font-family: "Open Sans";}
nav#primary-navigation{margin-top:15px;}
#header-widget-area{display:none;}
#topbar{padding: 0.4em 0.8em;}
#secondary-navigation select.tinynav{
font-size:1.4rem;}
div#main div#content div#wdsi-slide_in.wdsi-slide div.wdsi-slide-wrap{
display:none!important;
}
.logo-image-enabled #site-title {
line-height: 1.5;
width: 100%;
}
#topbar{width:100%!important;}
.logo-image-enabled #site-title { line-height: 1.5; width: 100%; }
.logo-image-enabled #branding{padding:0px;}
.topbar-enabled #header{background:#EEEEEE;}
#topbar{line-height:14px}
#topbar{padding: 0.4em 0.8em;}
}
Also , when I open the page in firefox for android, many of these css rules do not apply. Opera, Chrome, Maxton, all work well, but firefox is messy. Any clues why?
many, many thx!
In your source code, there is an element that has an inline style with a width of 1041px. Once you remove that your site is good. It's the last element in "#footer".
<div style="height:8px; width:1041px; background:#fff; position: relative; float:left;"></div>
First of all, here's the jsfiddle for the particular markup/styling in question.
Main question is why the img and text box (dark_block) do not have the same margin. Both are set to 100% width of the container div, so I'm not sure what's up. Mind taking a look?
Other things I'm still trying to figure out and googling (thus far) has not helped me:
When the text box is in-line (to the left) of the photo container, how do I get it to be the same height as the photo container
If the image's width is smaller than the photo container, how do I get it to center horizontally and vertically?
For accessibility sake, can I just create a non-responsive version of the css before the #media tag stuff?
Sorry, I'm sort of new to web development, and any help would definitely be appreciated. Also if anything in the code fragment seems awfully done, call me out! I'd love to learn some best-practices in addition to solving the issue at hand. Especially display types, having a hard time wrapping my head around 'em.
Appreciate you taking the time to look at this!
John
CODE:
<div id="home_top_container">
<div id="photo_slider">
<img src="redacted">
</div>
<div id="dark_block"></div>
</div>
#home_top_contianer {
width: 100%;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
}
#media screen and (min-width: 800px){
#photo_slider{
float:right;
background-color: #cccccc;
padding: 0px;
width: 69%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#photo_slider{
float:none;
background-color: #cccccc;
padding: 0px;
width: 100%;
min-width: 500px;
display: inline-block;
}
}
#media screen and (min-width: 800px){
#dark_block {
float:left;
background-color: #383838;
padding: 10px;
width: 28%;
display: inline-block;
}
}
#media screen and (max-width: 799px){
#dark_block {
float:left;
background-color: #383838;
margin-top: 20px;
padding: 10px;
width: 100%;
min-height: 200px;
display: inline-block;
}
}
img {
max-width: 100%;
margin: 0px;
}
You need to read up on the CSS box model. The width of an element refers to its content. The padding, border and margin are then added it to it. That means your #dark_block is actually 100% + 2*10px wide.
The proper solution would be to set #dark_block to display: block and remove both floatand width. The default value for width is auto, which automatically makes the block as wide s possible without overflowing. Rule of thumb in web development: If you give a display: block element width: 100%, then you are doing something wrong.
Another simple solution would be to set box-sizing: border-box; on #dark_block, however box-sizing is a relatively new property, so it won't work if you need to support older browsers.
Getting them to the same height, is not a trivial thing. You could use the display: table-* properties, and give them height: 100% but that requires you to put #dark_block first in the HTML.
Quick example:
<div id="home_top_container">
<div>
<div id="dark_block"></div>
<div id="photo_slider">
<img src="http://caldwellfellows.ncsu.edu/wp/wp-content/uploads/2013/06/Justin-sews.jpg">
</div>
</div>
</div>
#home_top_container > div > div {
display: table-cell;
width: 50%;
border: 1px solid red;
}
img {
width: 100%;
}
Again centering vertically is not a trivial thing in CSS. Your best bet would be to use display: table-cell with vertical-align: middle.
Most certainly. Especially you should move all properties that are common to all media-variants to outside the media rules, so that you don't repeat them.
Also it's no need to repeat the media rules around each rule. Just have one media rule:
#media screen and (min-width: 800px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
#media screen and (max-width: 799px) {
#photo_slider {
/* ... */
}
#dark_block {
/* ... */
}
}
I have just recently created a website which uses multiple divs. I then zoomed in and out, and particular DIV's move to the left corner, whilst the others move to the right corner of the screen.
Below are the codes for my website, if anyone could help me it would be much appreciated. I have left out majority of the body after the header, as it is affected, but was thinking that this error was to do with one of the DIV's such as the "container" div, and not in a detail in each particular DIV.
HTML:
<html>
<head>
<title> Test Website</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="container">
<div id="top_section">
<div id="logo">
<img src="images/pbc_WHITE_bg.tif" width="180px" height="168px">
</div>
</div>
<div id="navigation">
<ul id="nav_menu">
<li>HOME </li>
<li> NEWS</li>
<li> MEDIA </li>
<li> CONTACT</li>
</ul>
</div>
</div>
CSS:
{
position: relative;
margin: 0;
padding: 0;
font-weight: lighter;
}
body {
padding: 0px;
}
p {
color: grey;
font-family: "brandon-grotesque",sans-serif;
font-size: 13px;
}
h1 {
color: black;
font-weight: lighter;
font-size: 14px;
font-family: "brandon-grotesque",sans-serif;
}
a {
font-size: 14px;
color: grey;
font-family: "brandon-grotesque",sans-serif;
}
#container {
margin: 0px auto;
/*background: pink;*/
width: 100%;
height: 169px;
border-bottom: 1px solid #F2F2F2;
}
#top_section {
width: 400px;
height: 170px;
/*background: black;*/
float: left;
}
#logo {
margin-left: 170px;
}
#navigation {
position: relative;
background: blue;
margin-top: 70px;
width: 700px;
float: right;
margin-right: 50px;
}
ul#nav_menu {
list-style-type: none;
}
ul#nav_menu li {
display: inline-block;
padding-right: 5px;
width: 150px;
text-align: right;
position: relative;
float: left;
}
ul#nav_menu li a{
text-decoration: none;
text-align: right;
}
The code you pasted is fine, the problem must be somewhere else that you neglected to share. The problems you see are likely a mix of using floats, text-align: right, and a mix of inline and block elements. Take the time to learn how each of these work together for more consistent and easy HTML development.
Use
overflow: auto;
in you css class where it is needed
OR you may also use
div {
border: 1px solid black;
width: 70px;
overflow: hidden;
white-space: nowrap;
}
There is something they call responsive design it might help you out ;)
it changes because of the fact that screen width isn't the same on every screen + if you scale down the browser window it also changes or on zoom in-out.
the solution is doing this:
you can fix this by using #media query's and a viewport in your css , and add this meta tag to your html:
<meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>
and with the #media query's and viewport you declare what size you have per screen width using this media query + viewport in css:
#media screen and (min-width: 820px) and (max-width: 920px) {
#viewport { width: 820px; }
// your css for screens between 820 and 920 pixels in width goes here
}
i mostly use the value's : from 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, #media screen and (min-width: 1200px){ #viewport { width: 1200px; }(this last one will set the size for any screen bigger than 1200 px in width so your code for the biggest version goeds here}
So this means you will have 6 times your css code which is adapted will be adapted to the size.
This is called adaptive or responsive design and is pretty easy to do
For more info you might check this http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
A little tip if there are div's making your design or webpage flow over on the side's you might add overflow:hidden to those div's in the css this should fix that issue.
I have faced the same kind of problem and I was using pixels. Some say that we should use em instead of px. But it was not possible for me at that point to change all the pixels to ems.
I managed to prevent divs from moving on zooming out by making the size of the container div a little extra so that it can accommodate little change that happens on re-sizing the content while zooming. Hope this helps
This is the website, and more specifically, the page.
I'm currently working on a responsive theme, which has media queries, but something about the CSS modifications I've made, are preventing the menu (top right in gold), and the sidebar (this only exists on the blog page, but it is important... it's the box at the right of the content block) from merging with the header/title/left-hand content. It shows up on the ipad mini, the regular ipad 4, but it is okay in an android browser screen. You can observe the issue by resizing the browser.
#media only screen and (min-width:768px) {
.site-navigation .nav-menu {
display: block;
}
}#media only screen and (max-width:767px) {
.menu-toggle {
display: block;
}
}#media only screen and (min-width:768px) and (max-width:959px) {
.wrap {
max-width: 728px;
}
That is the media screen css. The respective divs are all positioned relatively. Does anyone have any advice on how to fix this problem? Any code tidbits?
The first thing I see is that this HTML is not closed:
<div id="header" onclick="location.href='http://camillagabrieli.com
That needs to be fixed first. Try adding outlines to your CSS:
* { outline: 1px dashed black }
I find that helps a lot when it comes to seeing what's actually wrong with the different floated elements. There are quite a few things wrong with your arrangement and your CSS. You don't need to relatively position all of these things.
To fix the main content section:
Add the following to #main:
overflow:hidden;
And make #content and #sidebar-primary like this:
#content {
float: left;
width: 75%;
margin-left: 40px;
margin-right: 10px;
margin-top: 10px;
min-height: 50px;
}
#sidebar-primary {
float: left;
width: 20%;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
height: 50%;
}
I'm not sure why you had margin-top: -460px; in your code, but that was what was breaking it, as was the fact that #main wasn't actually containing #content and #sidebar-primary. The code still needs cleaning up, but this will fix it more immediately.
Does this help?