I've gone through previous posts talking about why their media query isn't working, but it seems they are not relevant to my problem. So I'm here to seek help.
Hi guys,
Super newbie here, I've been haunting by this problem for over a week now, and I hope I can get some help here... Here's my code. I don't know the proper way to ask a question, so if there's anything to improve, let me know.
The point of the code is to make a layout that is responsive to the different width of the browser.
/* HTML */
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>HEADER YES PRAISE THE lORD</h1>
<div class="div-1">
\<h2\>Chicken\</h2\>
\<p\>The chicken is a type of domesticated fowl, a subspecies of the red junglefowl. It is one of the most common and widespread domestic animals, with a total population of more than 19 billion as of 2011.\</p\>
</div>
<div class="div-2">
\<h2 style="background\-color:blue;"\>Beef\</h2\>
\<p\>Beef is the culinary name for meat from cattle, particularly skeletal muscle. Humans have been eating beef since prehistoric times. Beef is a source of high\-quality protein and essential nutrients.\</p\>
</div>
<div class="div-3">
\<h2 style="background\-color:lime;"\>Sushi\</h2\>
\<p\>Sushi is a Japanese dish of specially prepared vinegared rice, usually with some sugar and salt, combined with a variety of ingredients, such as seafood, vegetables, and occasionally tropical fruits\</p\>
</div>
</body>
</html>
/* CSS */
{
box\-sizing: content\-box;
}
h1{
text\-align: center;
}
p{
clear:both;
padding: 10px;
}
div h2{
background\-color: red;
float: right;
border\-left: 2px solid black;
border\-bottom: 2px solid black;
text\-align: center;
padding:10px;
margin:0px;
width:100px;
}
.div-1{
box\-sizing: content\-box;
border:2px solid black;
color:white;
background\-color:grey;
margin:10px;
float:left;
}
.div-2{
box\-sizing: content\-box;
border:2px solid black;
color:white;
background\-color:grey;
margin:10px;
float:left;
}
.div-3{
box\-sizing: content\-box;
border:2px solid black;
color:white;
background\-color:grey;
margin:10px;
float:left;
}
#media(min-width: 992px;){
.div-1{
width:33%;
}
.div-2{
width:33%;
}
.div-3{
width:33%;
}
}
#media(min-width: 768px)and(max-width:991px){
.div-1{
width:50%;
}
.div-2{
width:50%;
}
.div-3{
width:100%;
}
}
#media(max-width: 767px){
.div-1{
width:100%;
}
.div-2{
width:100%;
}
.div-3{
width:100%;
}
}
#media screen and (min-width: 800px){
//your code here
}
it is good to use something like
<div class="box first/1"></div>
<div class="box second/2"></div>
insted of
<div class="div-1"></div>
<div class="div-2"></div>
to avoid duplications in your css
Two things:
Add initial-scale=1.0 in your meta content tag.
Specify media type, in this case it is screen.
#media screen and (min-width: 992px;){
.div-1{
width:33%;
}
So, I'm building a website template, more specifically; I'm making a universal CSS spreadsheet, and it's looking pretty good so far. But I ran into a big problem attempting to make a half sized <div> class whereas two would align side by side. Check out my website so far (mind the swags) and notice how when you stretch the browser out far enough, they aren't centered correctly due to their sizes being 45%. I've found that having two .lefthalf and .righthalf classes kinda helps, but more problems are caused than solutions. Also, making the browser too small causes both <div>s to go on top and below each other, but they are still floating left.
Could anyone find a solution where:
1. They don't fall back when the browser is expanded.
2. When the browser is too small to support alignment, they go above and below each other.
I hope I've made myself very clear and please help if you can.
FEEL FREE TO EXPLORE THROUGH Inspect Element ON MY WEBPAGE
for #2 problem this happened because you padding adds up to the size of the div and makes it overflow.
put this inside your .goog2 class.
.goog2{
box-sizing: border-box;
}
for #1 problem try this put this inside your .goog2 class
.goog2{
width:48%;
margin:1%;
}
if you dont want to have margin on each side of div and align each div on the side just make it 0 for each div.
#div1{
margin-left:0;
}
#div2{
margin-right:0;
}
You can use Bootstrap or Foundation for this issue, you don't have to implement those styles while Bootstrap/Foundation have a good grid system for you to use.
By the way, I solved this problem for you in the snippet.
/*--Kairo Jewell--*/
/*-CSS Stylesheet-*/
* {
box-sizing: border-box;
}
a {
font-size:large;
font-family:arial
}
a:link {
color:#0077ff;
background-color:transparent;
text-decoration:none;
font-weight:bold;
}
a:visited {
color:#0077ff;
background-color:transparent;
text-decoration:none;
font-weight:normal;
}
a:hover {
color:red;
background-color:transparent;
text-decoration:underline;
}
a:active {
color:red;
background-color:pink;
text-decoration:underline;
}
body {
background-color:#e0e0e0;
margin:0px;
}
h1 {
font-family:impact;
color:darkgreen;
}
p {
font-family:arial;
font-size:large;
color:green;
margin-top:0px;
margin-bottom:0px;
}
.goog {
background-color:white;
color:#222222;
margin:5px;
padding:10px;
box-shadow:0px 5px 10px #aaaaaa;
clear:both;
}
.goog2 {
padding: 0px 5px;
width:50%;
float:left;
}
.container {
margin:0 auto;
clear:both;
}
.wrap {
position:center;
margin:0px;
width:auto;
height:inherit;
}
.center {
position:center;
margin:0 auto;
}
#header, #footer {
position:fixed;
margin:0 auto;
width:100%;
}
#header {
z-index:99998;
top:0px;
height:50px;
background-color:00aaaa;
}
#footer {
bottom:0px;
z-index:999999;
height:20px;
}
#content {
margin-top:75px;
margin-left:auto;
margin-right:auto;
margin-bottom:50px;
float:top;
width:80%;
}
span.bad {
font-size:120%;
color:red;
}
span.dark {
font-size:120%;
color:darkgreen;
font-weight:bold;
}
.swag-content {
box-shadow:0px 5px 10px #aaaaaa;
background-color:white;
color:#222222;
}
#media screen and (max-width: 768px) {
.goog2 {
width: 100%;
margin-bottom: 5px;
}
}
<div id="content">
<div class="goog">
<p>Swag</p>
</div>
<div class="container">
<div class="goog2">
<div class="swag-content">
<p>Swag Swag Swag Swag Swag Swag Swag Swag Swag Swag Swag Swag</p>
</div>
</div>
<div class="goog2">
<div class="swag-content">
<p>Swag2Swag Swag Swag Swag Swag Swag Swag Swag Swag Swag Swag</p>
</div>
</div>
</div>
<div class="container"></div>
<div class="goog">
<p>Swag
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>Swag</p>
</div>
</div>
Hope it help
When the browser gets too small to support alignment, you could use a media query to change the CSS. Something along the lines of:
.two-col {
width:48%;
float:left;
height:300px;
background:#222;
margin:0 1% 0 1%;
}
#media screen and (max-width: 768px) {
.two-col {
width:100%;
float:none;
margin:0 0 15px 0;
}
}
http://jsfiddle.net/145fbw6k/
I am working for this company that has hired me to turn a new home page design of theirs into html and css. In the design they gave me there is a search box in the header that they would like to be same as the one on their current webpage (http://shop.manorfinewares.com/intro.html). I am unsure how to navigate their current page's source code in order to successfully transfer the search box to the new page I am designing for them. Here is the header code that I have so far...
CSS:
#header{
position:absolute;
width:100%;
top:0;
height:107px;
min-width:600px;
border-bottom: 1px dotted #86beca;
}
#headerContainer{
position:relative;
width:100%;
margin:0 auto;
top:0;
height:107px;
max-width:1280px;
min-width:600px;
border-bottom: 1px dotted #86beca;
}
.headerUtilityContainer{
float:left;
padding-top:4px;
margin-left:8%;
width:22%;
height:103px;
}
.headerUtilityContainer img{
float:left;
margin-top:2px;
width:40%;
height:9px;
}
.headerLogoContainer{
float:left;
margin:0px;
width:40%;
height:107px;
}
.headerLogoContainer img {
display:block;
margin-top:30px;
margin-left:auto;
margin-right:auto;
width: 55%;
max-width:250px;
height: 57%;
}
.searchContainer{
float:left;
text-align:right;
font-size:70%;
padding-top:4px;
margin-right:8%;
width:22%;
height:103px;
}
.headerBorderDiv{
float:left;
width:100%;
margin:0 auto;
padding:0px;
height:2px;
border-bottom: 1px dotted #86beca;
HTML:
<div id="header">
<div id="headerContainer">
<div class="headerUtilityContainer">
<img src="images/manorSocialButtons.png" />
</div>
<div class="headerLogoContainer">
<img src="images/homePageLogo.png"/>
</div>
<div class="searchContainer">
LOGIN / REGISTER CART (0)
</div>
</div>
</div>
ANY advice will be very helpful as I am not sure where to start. I have never worked with XLS search bars in the past
It's still unclear as to what exactly you want, a right floated search bar with clear icon on input? I have created this fiddle for you, it replicates the behaviour of site you mentioned.
http://jsfiddle.net/DP22Y/
HTML
<div id="container">
<div id="utility">Utility</div><!--
--><div id="logo">Logo</div><!--
--><div id="search">LOGIN / REGISTER | CART (0)
<span class="clearable">
<input class="data_field" type="text" name="search" placeholder="Search..."/>
<span class="icon_clear">x</span>
</span>
</div>
</div>
CSS
#container{
margin:0 auto;
height:100px;
width:80%;
}
#utility, #logo, #search{
box-sizing: border-box;
color:#000;
height:100%;
float:left;
}
#utility{
background:#f1f1f1;
width:33.3%;
padding:10px;
}
#logo{
background:#e0e0e0;
width:33.3%;
padding:10px;
}
#search{
background:#e9e9e9;
width:33.3%;
padding:10px;
text-align:right
}
#search > #data_field{
margin:10px 0 10px;
padding:5px;
width:100px;
float:right;
}
span.icon_clear{
position:absolute;
right:10px;
top:0px;
display:none;
cursor:pointer;
font: bold 1em sans-serif;
color:#38468F;
}
span.icon_clear:hover{
color:#f52;
}
.clearable{
position:relative;
}
.data_field{
padding-right:17px; /* add space for the 'x' icon*/
width:100px;
}
jQuery
$(document).on('propertychange keyup input paste', 'input.data_field', function(){
var io = $(this).val().length ? 1 : 0 ;
$(this).next('.icon_clear').stop().fadeTo(300,io);
}).on('click', '.icon_clear', function() {
$(this).delay(300).fadeTo(300,0).prev('input').val('');
});
As far as the functionality is concerned, that is a different question altogether. That depends on what language you are using, do you want to make the results appear on page reload or without that using ajax, whats the db scheme etc. But the basic search would be something like this
Wrap search field with a form
Set an action and method for the form
Action will be the page the search results will be shown on
Hi my code works correctly in Firefox, but in IE I'm getting the default vertical scrollbar. When I minimize the page I get the vertical and horizontal scrollbars I want, but in IE I get an additional vertical scrollbar. How can I get rid of it just in IE? I am using a CSS Reset. Here is my 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,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
border:0;
outline:0;
/*font:inherit;*/
font-size:100%;
vertical-align:baseline;
text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
display:block;
}
body{
line-height:1;
}
ol,ul{
/*list-style:none;*/
}
blockquote,q{
quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:’’;
content:none;
}
/* remember to define visible focus styles!
:focus{
outline:?????;
} */
/* remember to highlight inserts somehow! */
ins{
text-decoration:none;
}
del{
text-decoration:line-through;
}
table{
border-collapse:collapse;
border-spacing:0;
}
/*CUSTOM*/
a {
/*color:#365C8C;*/
}
a:hover {
text-decoration:underline;
/*color:#365C8C;*/
}
p {
font:.85em arial,regular;
}
ul {
font:.85em arial,regular;
}
.bar {
background-color:#365C8C;
height:30px;
width:100%;
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
/*overflow-x:hidden;*/
min-width:1225px;
}
body {
position:relative;
padding:0 0 0 0;
margin:0 0 0 0;
overflow:auto;
height:100%;
width:100%;
background-color:#ADCCEB;
/*background-color:black;*/
/*background: url(background.png);*
/*background-size:100%;*/
}
.bold {
font-weight:bold;
}
.contentcontainer {
width:825px;
height:910px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
/*background-color:red;*/
}
.extcontentcontainer {
width:825px;
height:645px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:0px;
/*background-color:red;*/
}
img.fullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
min-width:1225px;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
img.extfullbackground {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
min-width:1225px;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
And here is some of the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pathfinder Outage Page</title>
<link rel="stylesheet" href="boilerplate.css">
</head>
<body class="fullbackground">
<img class="fullbackground" src="background.png" />
<div class="topbackground">
<div class="top">
<div class="topleft">
<img class="pf_logo" src="pathfinder_logo.png"/>
</div>
<div class="topmiddle">
<h1 class="title">Pathfinder is Temporarily Unavailable</h1>
</div>
<div class="topright" ></div>
</div>
</div>
<div class="bar"></div>
<div style="width:1225px; height:910px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto;">
<div class="contentcontainer">
Remove:
overflow: auto;
From the body in the CSS.
That should fix it.
It looks like both your body and your div are producing scrollbars because you set the height to 100%, the div inside the body is larger than the body, and the body itself is larger than your window, so you have two overflowing elements inside each other. Just get rid of height: 100% in your div nad you should be fine.
Use the "if IE" built in HTML to put in custom css files to fix the issue in IE like:
<!--[if IE]>
<link rel="stylesheet" href="ie-specific.css">
<![endif]-->
Check to see if Compatibility Mode for Intranet Sites is on. I had this issue and when I disable Compatibility Mode the second scroll bar went away.
I think there is another way to fix this without getting rid of the overflow: auto style.
My understanding of the issue and the workaround suggested is based on this nice article you could check for more details: https://remysharp.com/2008/01/21/fixing-ie-overflow-problem
The way I understood the problem is that in Chrome and Firefox, the scroll-bars are drawn outside the containers, so they don't affect the container width when shown.
While in IE the scroll-bars are drawn inside the containers and their width/height is what's causing the container to overflow and display a second scroll-bar.
A typical use case where this would happen is on tables with vertical scroll (too many rows) and horizontal scroll (too many columns):
the table body which already has a horizontal scroll because of the long list of columns, will add a second horizontal scroll because of the x-overflow that the vertical scroll width will add will add when drawn inside the table body (for the long list of rows).
One of the tricks I tried and that seemed to work is to add a padding to the container to allow it to draw the scroll bar without overflowing:
To fix a double horizontal scroll-bar:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.container-overflowing-vertically-class {
padding-right: 20px;
}
}
To fix a double vertical scroll-bar:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.container-overflowing-horizontally-class {
padding-bottom: 20px;
}
}
I am working on a responsive website and I ran into a problem with the form. I have a outer container that hold the form and the submit button. When the user's browser reaches 524px or smaller the submit button will move below the outer container. Everything works fine in Firefox but when I'm using Safari/Chrome the submit button will not move back into the outer container.
I have an example of the problem here: yourl.co
Here is my HTML:
<div id="content">
<div id="formContent">
<form id="forms">
<input id="email" type="email" class="text" placeholder="You#example.com" name="user[email]"/>
<input id="submit" type="button" class="text" name="user[submit]" value="Notify Me!"/>
</form>
</div>
</div>
And here is my CSS:
#content{
width:100%;
max-width:573px;
height:auto;
margin:45px auto 0 auto;
}
#formContent{
width:99%;
height:56px;
margin:40px auto 0 auto;
background-color:#f6f5f5;
}
#forms{
border:none;
height:51px;
}
#forms #email{
width:75.1%;
height:51px;
border:none;
margin-top:2px;
background-color:#f6f5f5;
margin-left:6px;
}
#forms #email[type="email"]{
font-family:ubuntu-light;
font-weight:100;
font-size:1.875em;
color:#7baec6;
}
#forms #email[type="email"]:focus{
color:#498cab;
outline:none;
}
#forms #submit{
width:21.5%;
height:47px;
float:right;
margin-right:6px;
margin-top:5px;
border:1px solid #0e5779;
cursor:pointer;
}
#media only screen and (max-width: 524px){
#formContent{
width:95%;
max-width:524px;
margin:40px auto 73px auto;
}
#forms #email{
width:95%;
border:none;
margin-top:2px;
background-color:#f6f5f5;
margin-left:6px;
}
#forms #submit{
width:125px;
margin:12px auto 0 auto;
float:none;
display:block;
}
}
If you need anymore information I will be glad to provide it. Thanks for your help!
If you'll add css float: left; to #forms #email everything will be fine.
You can test it here: http://jsfiddle.net/witchfinderx/qwnXT/1/