I have had to put all of the code here so you can see my question in context with this code for a basic website. The part of this code I'm referring to is the media query coded below as:
# media (max-width: 700px)
body { background-color: #fff; }
I've done some research on media queries as required and know that in this code that when the page is at width 700px or less it will become the color of #fff which I think is a white color. But what would be the purpose of putting the code here besides a teaching exercise? Is it so that it will fit a mobile phone if the web page where to be opened on such a device? I thought that instead of using a media query that the width of the webpage to fit a device like a mobile phone was established in the meta tags viewport description. Please bear in mind I'm a newbie and just starting to learn about coding about a month ago.
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sansserif;
}
div {
width: 600px;
margin: 5em auto;
padding: 50px;
background-color: #fff;
border-radius: 1em;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
#media (max-width: 700px)
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
</style>
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is established to be used for illustrative examples in
documents. You may use this
domain in examples without prior coordination or asking for permission.</p>
<p>More information... </p>
</div>
It looks like your code is missing a bracket for the media query. I believe it should look like this. When the window is less than 700px the background is white. When greater than 700px it's a gray. Try re-sizing the window to see what I mean.
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
Snippet
body {
background-color: #f0f0f2;
margin: 0;
padding: 0;
font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sansserif;
}
div {
width: 600px;
margin: 5em auto;
padding: 50px;
background-color: #fff;
border-radius: 1em;
}
a:link, a:visited {
color: #38488f;
text-decoration: none;
}
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
<div>
<h1>Example Domain</h1>
<p>This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission.</p>
<p>More information...
</p>
</div>
Look at following JSFiddle: http://jsfiddle.net/ep6mtoa7/ (Btw. there was a missing { after the Media Query that I inserted here)
#media (max-width: 700px) {
body {
background-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
If you increase the width of the box, you will see a grey background and in the middle will be a Box with rounded edges. If you decrease the width of the box, you will see that the grey background disappers and the box disappears too, but the white Background stays. The real need is because the box has a height, so only the box part would be white and the rest (top and bottom area) would still be grey.
Look at following JSFiddle: http://jsfiddle.net/ep6mtoa7/1/ (I removed the background-color: #fff)
You will see that the bottom part is still grey. If you put in the background-color part it will be white.
To your other question: The media query looks for device width, so mostly devices have a smaller width than your PC would have. The meta-tag part says something like if the zoom should kick in or if it's even allowed.
So if you saying that your page should be 1024px wide, the phone would fit the page into a 1024px viewport and you don't have to zoom in/out as an user.
At this point I am not sure if it's smart to go so deep into it, maybe first learn the basics more and then go deeper. But I like the effort you putting in, also google and read read read read as much blogs and stackoverflow threads as you can, this is a must do and will improve you alot!
I have a strange situation with an image and a section. You can download html, css and img1 from my github
The situation: I have a section tag which has padding:15px from all sides. In the section I have an img, floated left, then a p and a span with two buttons. The section has also a border and margin:35px
My problem: The image doesn't respect the section's bottom padding and goes through the sections bottom border.
I tried to put the img in a div inside the section, and also tried to give a height value for the section and 100% for the image's height but it didn't change anything
What is the best solution for this problem, so that the picture takes all the height of the section respecting the section's top, left and bottom paddings?
In the github, one step back, is a ppt-file TASKS.ppt. The third slide is what I try to achieve.
EDIT: Since code is requested, here it is:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Music categories</title>
<link href="Ex03MusicCategories.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Music Categories</h1>
</header>
<section>
<img src="img1.png" />
<div>
<p>Even more websites all about website templates on <span>Just Web Templates</span> .</p>
<span>
<input type="button" value="Listen" />
<input type="button" value="Add" />
</span>
</div>
</section>
</body>
</html>
CSS:
body {
background-color: #EEE;
padding-top: 14px;
padding-left: 12px;
padding-right: 8px;
padding-bottom: 25px;
}
body header h1 {
font-weight: lighter;
font-size: 1.5em;
font-family: Arial;
letter-spacing: -2px;
}
section {
border-style: solid;
border-color: #989898;
border-width: 2px;
padding: 15px;
margin: 35px 0px;
}
section img {
float: left;
}
section img:after {
clear: both;
}
image img1.png
This is a classic, search for clearfix. One possible solution is
section {
overflow: hidden;
}
See JSFiddle
Update:
There's an article about CSS float and clear at CSS-Tricks - All About Floats.
Essentially, you need clear, when
an element should stay below a floated element
and some clearfix, when
the parent of a floated element collapses and you want the parent wrap around/include the floated children
You can also look at Stackoverflow css-float tag wiki (an alias of css-clear) or clearfix
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Exmaple:
http://jsfiddle.net/vjqjv/7/
I have an image inside of a container (see #slider-section in the jsFiddle) which has a fluid height and a fixed max-height.
I have set max-height and max-width on my image to 100% (see #slider-img).
The Problem: When the browser window gets beyond a certain width, the image ignores the max-width and max-height setting and just gets larger then its container.
You can see it if you open the jsFiddle and expand the width of the browser.
The goal is to get the image to never exceed the width and height of its container and keep its aspect ratio.
This could be achieved by giving the container (#slider-section) a fixed height. However this is not a possible solution for me since it needs to be a fluid height.
Does anyone have a solution?
Is this what you need ? http://jsfiddle.net/vjqjv/10/
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>test</title>
</head>
<body>
<section id="slider-section" class="clearfix">
<div id="slider-img-container">
<img id="slider-img" src="http://s1.directupload.net/images/120715/jy5nvhce.png" alt=""/></div>
<div id="slider-div-remaining" class="slider-div">
<div>
<h1>empfang</h1>
<p>Der Empfangsbereich - weil es für den ersten Eindruck keine zweite Chance gibt!</p>
</div>
</div>
</section>
</body>
</html>
CSS:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0 none;
font: inherit;
margin: 0;
padding: 0;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none outside none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a
{
text-decoration: none;
color: black;
}
html, body
{
height: 100%;
width: 100%;
margin: 0;
}
#slider-section
{
height: 58.3658%;
}
#slider-img-container
{
float: left;
height: 100%;
margin-right:5px;
}
#slider-img
{
max-height: 100%;
display: block;
max-width:100%;
}
.clearfix::after {
clear: both;
}
.clearfix::before, .clearfix::after {
content: "";
display: table;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
}
I use Twitter Bootstrap in one of my projects, but I have the problem that my content goes out of the browser view. Normally you see the scrollbar on the right side of the screen, but not in my case. I searched in bootstrap css file after overflow: hidden; or something like that and deleted it, but that didn't solve the problem.
Does someone know how to enable scrollbar in bootstrap css? (without bootstrap css the bars are showed)
edit:
I have find out that the problem the navbar-fixed in the black navbar which you can add. Without postition: fixed it works fine.
Make sure all the <div> from the navbar are closed. If not, the fixed property is inherited by the descending tags and the scroll bars disappears.
I found removing the "position: fixed" for the navbar resolved this problem for me:
.navbar-fixed-top, .navbar-fixed-bottom {
/*position: fixed;*/
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
This guy also has some more useful info: http://davidlains.com/strange-twitter-bootstrap-scrolling-issue
Override it with your last stylesheet.
( Probably your own theme stylesheet. )
html, body {
overflow: visible;
}
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
Hope this is what you are looking for
You are missing a closing </div> in your HTML code. For every <div class="foobar"> you must have a closing </div>. This (scrolling issue) can happen when using twitter bootstrap and not closing your divs.
After my Browser was today updated to Firefox 7.0 on some of my pages elements are replaced with ... (elipses) and the z-index of items is all messed up.
I tried the same site in 3.6.2 and 6.0 and it is working fine. As soon so the machine updates to 7.0 or 8.0 beta it now longer renders so the problem is related to firefox.
I made a sample html page that shows the problem.
In the upper div i would expect the image to display in the button us it does in the lower div but it is replaced with .... It seems to be the text-overflow: ellipsis; css but why would this change on updating?
Does anyone have a suggestion?
<!DOCTYPE html>
<html>
<head>
<title>Infor DataGrid Sample </title>
<style>
.slick-headerrow-column {
background: #d5d5d5;
border-bottom: 0 none;
height: 100%;
margin-left: 2px;
padding-top: 2px;
}
.slick-headerrow-column, .slick-cell {
cursor: default;
float: left;
overflow: hidden;
padding: 3px;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
z-index: 1;
}
.inforFilterButton {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAB0ElEQVQ4T62USWoCQRiF+wQeQZKt4MKVG68RSFAkS/EG3sBlFCdUslNxIYgLiVEQZwWHheKwMA444EIFPcCLr0gbDWgrpOFRXV1VX/31/r9Lkv770Wg0OofDMXa73fB6vfD7/QgEAkLBYPAm/cyf6A6PdICNfD4f4vE4stksCoUCyuUyKpXKzcpkMohGowiFQiPJ5XIhFoshn8+j0Wig0+mg1+thMBjcpVqthkQiAcnj8YA71Ot19Pt9jMdjLBYLoeVyeZM4dzqdCo7E4+ZyObTbbQFbrVbYbDZCFotFjMl9pZZ2SUxCsVhEt9vFfD7Her3GbrfDfr/HoQBgt9vFu5K4hr4LYKlUEr4xdEbBxZFIBFarFVqtVhEmb1atVn+B9O8UaDQakUwmoVarMZvNboJeBRLEnQmmz0pH5vhFIC0g0GazwWAwCOg14JvTJcYvAgmifzwypVKpLgIJe3oxnQOZTXrIlklhIhilHBWjJFjOvNzKMAKZ5WOErJ+/WVbyzB98F5FRzyazKLcjMJVK3QX8SH2ewUzmV/GnyMBhOBwWHX48LWylKDm+3W4xmUzQbDbRarWGkl6vfzzcEl+8bdLptLhtWPHc4B4R5nQ6H74BwAUeSLCHS8oAAAAASUVORK5CYII=");
border: medium none;
height: 16px;
left: -3px;
position: relative;
top: 4px;
width: 20px;
z-index: 10;
}
</style>
</head>
<body style="margin:10px;padding:10px">
<div class="ui-state-default slick-headerrow-column c2">
<button class="inforFilterButton contains" style="top: -3px;" title="Contains" type="button"> </button>
</div>
<br>
<br>
<button class="inforFilterButton contains" style="top: -3px;" title="Contains" type="button"></button>
</body></html>
Firefox 7 is the first Firefox release to implement text-overflow: ellipsis. It also implements what the spec said when Firefox 7 shipped, which was that if only one value is provided then it applies to both start and end sides of the overflowing container. In your case your buttons are positioned so they overflow the left edge of the container, so they're overflowing and get converted to ellipses.
Based on feedback from the experience with Firefox 7, the spec has since been changed to a behavior that's more compatible with the way IE originally implemented text-overflow: ellipsis, but there may be more changes happening there. The wonders of unstable specs that are written to not match deployed browser behavior...