i have recently generated css using Fireworks cs5 and i cannot seem to set my my header full width.I have been trying various solutions but none has worked very well so far.I need Div2 which is my header to be full width.
Here is the code.
#charset "utf-8";
body {
background-color: #fff;
font-size: 62.5%;
margin: 0;
padding: 0;
}
body * {
font-size: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
p {
margin-bottom: 1.1em;
margin-top: 0;
}
#main p.lastNode {
margin-bottom: 0;
}
a:link img, a:visited img {
border: none;
}
div.clearFloat {
clear: both;
font-size: 0;
height: 0;
line-height: 0px;
}
li.clearFloat {
clear: both;
}
ul.symbolList {
display: inline;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.AbsWrap {
position: relative;
width: 100%;
}
.rowWrap {
width: 100%;
}
#main {
margin: 0 auto;
width: 960px;
}
#Div {
margin-left: 0px;
margin-top: 0px;
display: inline;
float: left;
margin-bottom: 0;
background-color: #333;
width: 960px;
padding-top: 0px;
height: 849px;
}
html > body #Div {
height: auto;
min-height: 850px;
}
#Div2 {
margin-left: 0px;
margin-top: 0px;
display: inline;
float: left;
margin-bottom: 0;
background-color: #e8807d;
width: 960px;
padding-top: 0px;
height: 99px;
}
html > body #Div2 {
height: auto;
min-height: 100px;
}
Remove float:left and display: inline — that should do it. (And the width property, if that doesn't define what you mean by "full width".)
Related
So here is the css code and when i go to developer tools (Mozila) the code isn`t executed in responisve mode as it should.
The margin-left:auto; is underlined as u can see in the picture that i uploaded.
I am new to responsive design.If you wanna see the whole project(page) click here, please help.
Developer tools image
#media screen and (max-width: 750px) {
img {
margin-left: auto;
}
}
body {
margin: 0;
overflow: auto;
background-color: #a6a6a6;
}
img {
margin-left: 40%;
}
p {
text-align: center;
font-size: 1.2em;
}
ul {
font-size: 1.3em;
margin-left: 15%;
margin-right: 15%;
}
small {
text-align: center;
margin-left: 45%;
}
hr {
display: block;
height: 1em;
border: 0;
border-top: 0.1em solid #4d4d4d;
margin-right: 10%;
margin-left: 10%;
padding: 0;
}
#title {
float: left;
text-align: center;
background-color: #cccccc;
width: 100%;
top: 0;
position: fixed;
margin-left: 0;
font-size: 1.25em;
}
#content {
background-color: #e6e6e6;
margin-left: 5%;
margin-top: 10%;
margin-right: 5%;
margin-bottom: 6%;
}
#e {
font-size: 2em;
}
#timeline {
font-size: 1.5em;
}
#sources {
font-size: 1.8em;
}
#Author {
font-size: 1.6em;
}
a {
cursor: pointer;
text-decoration: none;
}
a:visited {
cursor: pointer;
text-decoration: none;
color: blue;
}
a:hover {
cursor: pointer;
text-decoration: none;
}
Order of declarations in CSS matters. Move the media query BELOW the img { margin-left:40%; } and it should work.
The media queries you see in style sheets tend to be better placed at the bottom. Place
#media screen and (max-width:750px){
img{
margin-left:auto;
}
}
underneath the last CSS declaration
Hi guys I am having a problem with my responsive CSS. It is working fine with max-width:321px but not when I try to do max-width:500px. I am trying to understand why and what I am doing wrong. Please help...
/*/Mobile MAINCSS/*/
img {
max-width: 100%;
height: auto;
}
#media screen and (max-width: 320px) {
/*/Nav and Header/*/
iframe {
width: 100%;
height: 700px;
}
body {
color: red;
}
#nav {
display: none;
width: 100%;
}
#logomain {
width: 100%;
height: auto;
display: none;
}
.logo {
display: none;
}
.logoright {
display: none;
}
.mobile-number {
display: block;
text-align: center;
background:#333399;
}
.mobile-number a:link {
color: red;
text-decoration: none;
}
.mobile-number a:visited {
color: red;
text-decoration: none;
}
#head_wrap {
width: 100%;
height: auto;
}
#head {
width: 100%;
height: auto;
}
/*/Mobile Navigation/*/
#mobilenav {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
background: #333399;
color: white;
font-size: 18px;
text-align: center;
}
.mobile ul {
display: inline;
margin: 0 auto;
width: 100%;
height: auto;
}
.mobile ul li {
display: inline-block;
padding: 10px;
}
.mobile a:link {
color: white;
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 1px black;
border-radius: 5px 5px 5px 5px;
padding: 5px;
}
.mobile a:visited {
color: white;
}
}
/*/Content/*/
#content {
width: 100%;
height: auto;
}
#content_wrapper {
width: 100%;
height: auto;
}
#bizmain {
width: 100%;
height: auto;
}
.bizexpress {
float: none;
}
.bizpro {
float: none;
}
.pro {
float: none;
}
/*/Footer/*/
#footer {
width: 100%;
height: auto;
}
/*/Additional Updates 02/28/2015/*/
.main-right {
width: 100%;
height: auto;
text-align: center;
}
.main-left {
width: 100%;
height: auto;
float: none;
text-align: center;
}
.form {
width: 100%;
height: auto;
}
.form-control {
width: 50%;
}
.input-group-addon {
font-size: inherit;
}
/*/Website Design/*/
.evoke {
width: 100%;
height: auto;
}
.evokeemotions {
width: 100%;
height: auto;
}
.resource1 {
float: none;
text-align: center;
}
.resource2 {
float: none;
text-align: center;
}
.resource3 {
float: none;
text-align: center;
}
}
#media screen and (max-width: 500px)
{
}
#media screen and (max-width: 320px)
{
}
You are right no problem please. place 500px Css above 300px
I have the following SASS code:
ul {
&.threeColList1 {
margin: 30px auto 0 auto;
padding: 0;
list-style: none;
width: 775px;
li {
width: 225px;
height: 330px;
float: left;
text-align: left;
margin-right: 50px;
.name {
margin-bottom: 5px;
}
.position {
margin-top: 0;
font-weight: bold;
}
&.last {
margin-right: 0;
}
}
}
&.threeColList2 {
margin: 0 auto;
padding: 0;
list-style: none;
width: 850px;
li {
width: 225px;
height: 175px;
float: left;
text-align: left;
margin-right: 75px;
h3 { font-size: 1.5em; }
p { font-size: 1.2em; }
&.last {
margin-right: 0;
}
}
}
}
How would you approach DRY'ing this up? If it weren't for the inner li elements such as h3, name, position, DRY'ing it would be pretty straight forward. Your answer will be helpful in understanding more about what you can do with SASS to keep your code DRY.
I converted this from scss to sass format, but I think it should be straightforward enough.
The basics are I would rework the classes on the html to be a little less specific and then just pull things out as it makes sense.
Here's the full refactor:
ul
&.threeCol
padding: 0
list-style: none
margin: 0 auto
li
width: 225px
float: left
text-align: left
&.last
margin-right: 0
&.list1
margin-top: 30px
width: 775px
li
height: 330px;
margin-right: 50px;
.name
margin-bottom: 5px
.position
margin-top: 0
font-weight: bold
&.list2
width: 850px
li
height: 175px
margin-right: 75px
h3
font-size: 1.5em
p
font-size: 1.2em
I have generated css for a page i am building in Adobe Fireworks Cs5 and i am wondering how i can set the full width for my header and other divs.I will show the css code up to the header section.
#charset "utf-8";
body {
background-color: #fff;
font-size: 62.5%;
margin: 0;
padding: 0;
}
body * {
font-size: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
p {
margin-bottom: 1.1em;
margin-top: 0;
}
#main p.lastNode {
margin-bottom: 0;
}
a:link img, a:visited img {
border: none;
}
div.clearFloat {
clear: both;
font-size: 0;
height: 0;
line-height: 0px;
}
li.clearFloat {
clear: both;
}
ul.symbolList {
display: inline;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.AbsWrap {
position: relative;
width: 100%;
}
.rowWrap {
width: 100%;
}
#main {
margin: 0 auto 0 0;
width: 960px;
}
#Div {
position:absolute;
margin-left: 0px;
margin-top: 0px;
display: inline;
float: left;
margin-bottom: 0;
background-color: #333;
width: 960px;
margin-left:-480px;
left:50%;
padding-top: 0px;
height: 849px;
}
html > body #Div {
height: auto;
min-height: 850px;
}
#Div2 {
/* This is the Header*/
margin-left: 0px;
margin-top: 0px;
display: inline;
float: left;
margin-bottom: 0;
background-color: #300;
width: 960px;
padding-top: 0px;
height: 99px;
}
html > body #Div2 {
height: auto;
min-height: 100px;
}
Block level elements, such as div, are always full width if they are not contained inside some other element or positioned otherwise. In your case, it looks as if you absolutely positioned some elements without setting a width. This may cause the div to collapse onto itself unless it has content. Also, if you use percent to set a width, always remember that it's a percent of the parent. Is the parent set to any unit size itself?
Change display property in #Div2 to the following:
#Div2 {
...
display: block;
...
}
This will make the header div (#Div2) the full width of the container div (both 960px wide).
I would change the the same property in #Div1 as well.
I am working on a website located here:
http://www.freshhealthybistro.com/temp/
I used a 960 grid, and the css for the 960 was taken from the website:
(google 960 gs because I can only post one hyperlink)
I realize that maybe I should have just avoided using the 960, but anyway... I did use it and unfortunately my website isn't uniform across browsers. The gray table underneath the slideshow (the one on the right hand side) should be extending to be the length of the slideshow so that it isn't shorter and both tables line up to be the same length. Instead, it is shorter on every browser and if I attempt to change the properties from % to px then it is still not uniform. In the firefox browser, even the table that is encasing the slideshow is drastically different than every other browser and looks like the website is broken. Here is my CSS:
#charset "UTF-8";
/* CSS Document */
body {
margin:0;
padding:0;
background-image:url(../images/fgc_bg.png);
color: #FFFFFF;
font-family: arial,sans-serif;
}
h1 {
font-size: 24px;
color: #FFFFFF;
font-family: arial,sans-serif;
line-height: 50px;
}
#container {
position:absolute;
height: 100%;
left: 50%;
width: 1200px;
margin: 0;
margin-left: -600px;
}
#navigation {
position: float;
float: left;
background-image:url(../images/topbar.png);
width: 960px;
height: 50px;
margin-top: -825px;
margin-left: 120px;
}
#footer {
position: float;
float: left;
background-image:url(../images/topbar.png);
text-align: center;
width: 960px;
height: 50px;
margin-top: -25px;
margin-left: 120px;
}
#clearfooter {
position: float;
float: left;
width: 1200px;
height: 50px;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
z-index: 1;
float: left;
position: float;
margin-left: 1%;
margin-right: 1%;
}
.grid_1 {
width:6.333%;
}
.grid_2 {
width:14.667%;
}
.grid_3 {
margin-left: 120px;
margin-top: 30px;
width:23.0%;
}
.grid_4 {
width:31.333%;
}
.grid_5 {
width:39.667%;
}
.grid_6 {
width:48.0%;
}
.grid_7 {
margin-top: 30px;
width:50.666%;
}
.grid_8 {
width:64.667%;
}
.grid_9 {
width:73.0%;
}
.grid_10 {
margin-top: 50px;
margin-left: 120px;
width: 940px;
}
.grid_11 {
width:89.667%;
}
.grid_12 {
width:98.0%;
}
#logo {
position: float;
float: left;
background-image:url(../images/logo.png);
z-index: 100;
width: 266px;
height: 266px;
margin-top: -933px;
margin-left: 472px;
}
#content{
position: relative;
float: left;
background-image:url(../images/contentbg.png);
width: 1200px;
height: 800px;
margin: 150px 0 0 0;
z-index: -20;
}
#background {
position: relative;
float: left;
overflow: auto;
background-color:#bf6b31;
width: 100%;
height: 800px;
padding: 0;
margin: 150px 0 0 0;
z-index: -100;
}
#clearfix {
clear: both;
}
I am also having a weird problem with the slideshow. In IE6, the slideshows navigation (the 4 buttons in the bottom right hand corner) is functioning as it should. In every other browser these buttons are not functioning, and unclickable by the visitor. I don't know what the reason for this is, but I am assuming it may have something to do with the z-index. Here is the CSS file for the slideshow:
.featuredbox-wrapper{
display: none;
}
.featuredbox-wrapper,
.featuredbox{
top: 0px;
left: 0px;
width: 940px;
height: 400px;
margin-left:auto;
margin-right:auto;
position: relative;
overflow: hidden;
font-family: Verdana, Tahoma, "Lucida Sans";
font-size: 9pt;
font-weight: normal;
z-index: 10;
}
.featuredbox .description{
bottom: 55px;
left: 5px;
font-size: 16pt;
color: #FFF;
width: 500px;
height: 20px;
position: absolute;
font-style:none;
font-weight:normal;
}
.featuredbox-wrapper .navigation{
bottom:15px;
right:15px;
padding:0px;
position:absolute;
z-index: 100;
height: 20px;
width: 100px;
}
.featuredbox-wrapper .navigation ul{
list-style: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.featuredbox-wrapper .navigation li{
float: left;
height: 20px;
width: 20px;
margin: 0px 5px 0px 0px;
padding: 0px;
background-color: #FF0000;
cursor: pointer; cursor: hand;
background:transparent url(../images/inactive.png) no-repeat scroll 0 0;
}
.featuredbox-wrapper .navigation li.hover{
cursor: pointer; cursor: hand;
}
.featuredbox-wrapper .navigation li.active{
cursor: pointer; cursor: hand;
background:transparent url(../images/active.png) no-repeat scroll 0 0;
}
.featuredbox .box-slide1,
.featuredbox .box-slide2 {
position: absolute;
top: 0px;
left: 0px;
height: 300px;
width: 600px;
z-index: -1;
background: #FFF;
color: #000;
}
Thank you for the assistance. I am still learning CSS and appreciate the help with understanding where I went wrong. Uniformity between browsers is currently my major complaint area.
The main issue is that you chose to use a grid system, but then did not make your slider conform to the size it needed to be to fit the grid. The point of using a grid system is to have the uniform sizing/spacing it provides. So one answer to your dilemma is to downsize your slider images so they fit the grid.