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.
Related
i am trying to keep the footer div at the bottom of the screen when the content is shorter than the view port, but it also has to remain at the bottom on the page content(not the view port) when the content is taller than the view port.
So far it remains at the bottom of the content when zoomed in, but i can't get it to stick to the bottom when zoomed out. There are samples with position: absolute; that i have seen, but it makes the footer remain at the bottom of the view port and not the content when zoomed in.
I have to do this for a school unit, is there a way to do this?
For now i have the footer position as relative, though i guess that wont do anything but stick it close to the last div, yeah? but i seem to find what i need to do.
Here is the site:
http://www.foodforthought.webatu.com/Index.html When you zoom right out you will see the footer not stay at the bottom.
Here is my CSS:
* { padding: 0; margin: 0; font-family: verdana; }
html {
height: 100%;
}
body {
font-size: 13px;
color: #000;
background-color: white;
background-position: center;
background-repeat: repeat-y;
background-image: url('../images/background.jpg');
}
/* Main div container */
#wrapper {
margin: 0 auto;
width: 960px;
height: auto;
}
/* Header div */
#wrapper #header {
height: 200px;
background-color: green;
}
/* Special event section */
#header p {
position:relative ;
left: 30px;
top: -100px;
width: 300px;
z-index: 1;
color: white;
border-style: dashed;
padding: 5px;
border-width: 1px;
}
/* Horizontal list div */
#wrapper #navigation {
height: 25px;
background-color: white;
display: block;
}
/* Horizontal list */
#navigation ul {
padding-top: 5px;
list-style-type: none;
text-align: center;
width: 960px
}
/* Horizontal list items */
#navigation li {
display: inline-block;
text-transform: uppercase;
vertical-align: middle;
}
/* Horizontal list link */
#navigation a {
height: 25px;
width: auto;
display: block;
line-height: 15px;
text-align: center;
vertical-align: middle;
text-decoration: none;
color: black;
padding-left: 8px;
padding-right: 8px;
}
/* Horizontal list hover attribute */
#navigation a:hover {
color: Darkgrey;
}
/* Content div */
#wrapper #content {
display: inline-block;
height: auto;
width: 950px;
background-color: white;
padding-left: 10px;
padding-right: 0px;
}
/* Content headings */
#content h2 {
text-transform: capitalize;
padding: 10px;
}
/* Content image(global) */
#content img {
padding: 2px;
border-width: 1px;
margin: 10px;
margin-left: 20px;
Margin-right: 15px;
}
/* Content bullet list */
#content ul {
padding: 15px;
font-size: small;
margin-left: 10px;
}
/* Content paragraph text */
#content p {
padding-left: 10px;
font-size: small;
}
/* Content image */
#content #img1 {
float: left;
border-style: dashed;
}
/* Content image */
#content #img2 {
float: right;
border-style: solid;
border-width: 1px;
border-color: #BDA27E;
}
/* Content image */
#content #img3 {
float:left;
border-style:double;
margin-top: 20px;
margin-left: 8px;
border-width: 5px;
border-color: #996633;
}
/* Side menu div*/
#wrapper #content #menu {
float: right;
padding: 0px;
margin: px;
width: 220px;
height: 1118px;
}
/* Side menu*/
#menu ul {
list-style-type: none;
float: right;
text-align: right;
width: 170px
}
#menu li {
background-image: url('../images/pg_menu_bg.png');
}
/* Side menu link */
#menu a {
height: 30px;
display: block;
vertical-align: middle;
text-decoration: none;
color: black;
font-size: small;
padding-top: 8px;
margin-left: 10px;
margin-right: 0px;
}
/* Side menu hover attribute */
#menu a:hover {
color: darkgrey;
}
/* Footer div */
#wrapper #footer {
height: 40px;
background-color: #82AAF1;
width: 960px;
margin: 0px, auto;
position: relative;
bottom: 0;
}
/* Foot note */
#footer p {
text-align: center;
color: #6A1B1B;
padding-top: 15px;
font-size: 10px;
}
.padext {
padding-top:2px
}
Sorry i am still a beginner.
Thank you for you time.
If you HTML is like this:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
apply the following CSS.
#wrapper {
min-height:100%;
position:relative;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
The padding-bottom of the #content is set as the height of the footer.
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
}
I recommend you to refer the following link : How To Keep Your Footer At The Bottom Of The Page With CSS
my bootstrap mobile style won't render unless I add a extra closing brace to the end can someone tell me what I did wrong
this is the styles that I created and they should work but they are not working and they pass the validator test.
#media only screen and (max-width: 766px){
.movie{
width:300px;
height: 300px;
margin:0;
padding:0;
}
body > div > div > h3 {
margin-left: 300px;
padding-top: 200px;
}
a:link {
outline: 0;
font-size: 9px;
display: block;
padding-right: 50px;
}
h3{
font-size: 20px;
margin-top:20%;
}
h3.port {
margin-left: 150px;
color: #9932CC;
margin-top: 50px;
}
img {
float: left;
margin-right: 15px;
width:50%;
height:50%;
margin-top:0;
}
p {
margin-left: 10px;
margin-top:5%;
padding: 0;
color: #9932CC;
font-size: 15px;
}
.navbar .nav > li > a {
color: #9932CC;
}
body > div > div > a > img {
display: none;
}
.navbar-brand {
float: left;
padding: 10px 15px;
font-size: 20px;
}
/* twitter
====================================== */
div#iPhone {background: url("../images/iphone.png") no-repeat;
width:275px;height:500px;
display: inline-block;
padding-top: 90px;
padding-left:2em;
margin-left: 0px;
}
iframe#twitter-widget-0.twitter-timeline[style] {width:70px !important;}
div#iPhone iframe[id^="twitter-widget-0"] {min-width:170px !important;
margin-right: 20px;
}
/* iframe
======================================= */
.movie {
text-align: center;
width: 350px;
height: 345px;
margin-left: 0px;
margin-right: 200px;
}
.paragraph {
width: 50px;
margin-left: 10%;
}
.thumbnail {
color: #333;
margin-left: 100%;
width: 100%;
background-color: transparent;
border:0px;
}
.btn-primary {
color: #000;
background-color: #aff6b8;
border-color:black;
margin-top: 5%;
width:100%;
}
}
}
mobile style won't render unless I add a extra closing brace to the end
Yes, the #media syntax involves an extra set of braces:
#media only screen and (max-width: 766px) {
element {}
}
The last closing brace you added is equivalent to the last one in the code above.
This question is a duplicate, but there was only one answer (not accepted or rated), almost no discussion, and the OP did not report back if it solved the problem. My css uses the suggestion, and it does not solve my problem, which I believe is the same.
I have a nav column floated to the left, and a content block (section) floated left against the nav bar. Then I have a footer section (this is html5). I am trying to create a footer nav that is inline.
The footer nav appears below the nav column, but to the left of the text (which extends past the nav column). Also, it appears in block format, not inline.
The html is roughly:
<nav>
<ul>
<li><a>...</a></li>
..
..
</ul>
</nav>
<section>
...text...
</section>
<footer>
<ul>
<li><a>...</a></li>
..
..
</ul>
</footer>
And the css is roughly:
nav {
float: left;
..
..
}
section {
float: left;
..
..
}
footer {
clear: both;
}
footer li {
display: inline;
}
Here is an example.
http://jsfiddle.net/abalter/NdExx/2/
You have several CSS issues that need to be fixed.
you use a lot of absolute/relative positioning without real need.
you don't specify vendor specific when they are needed.
you have an extra closing bracelet in your CSS (in the end).
you have a double declaration (its harmless, but annoying).
BTW, if you use that fixed CSS you will see that the clear:both; suddenly works.
(it didn't work before because the text-section was absolutely positioned)
also: I would recommend you to enclose the & text-section in one div, thus forcing the <footer> to always be below them even without clearing.
about your inline problem in the footer, although the li elements are set to display:inline; all of them contains divs, so in the end, they will behave like block elements.
as an easy fix, I changed the footer li selector in the end of the CSS to footer *, but you should specify exactly what you want to be inline.
so, here's a Fiddle to demonstrate the changes.
Fixed CSS (+Vendor specifics, -typos, -double declaration)
#background-image
{
background: url(http://www.arielbalter.com/BuzzJoy/img/green_and_roasted_half_and_half.jpg);
width: 100%;
top: 0;
left: 0;
opacity: 0.6;
position: fixed;
background-repeat: repeat-y;
padding: 0;
margin: 0;
}
header
{
width: 100%;
padding: 0;
margin: 0;
}
#buzz-joy-logo
{
width: 100%;
height: auto;
top: 0%;
position: relative;
z-index: 2;
display: block;
padding: 0;
margin: 0 auto 0 auto;
}
nav
{
padding: 0;
margin: 0 0 0 15%;
float: left;
}
nav li
{
display: inline;
}
.nav-link
{
position: relative;
width: 10em;
height: 5.3em;
background-image: url(http://www.arielbalter.com/BuzzJoy/img/CoffeeCupNoSteam.png);
display: block;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
text-align: center;
margin: 0 0 1em 0;
padding: 0;
text-decoration: none;
}
.nav-link:hover
{
color: DarkGoldenRod;
}
.nav-cup-image
{
height: 100px;
width: auto;
padding: 0;
margin: 0;
}
.nav-text
{
position: relative;
color: Yellow;
font-size: 1.5em;
text-align: center;
font-family: "GillSansUltraBoldCondensedRegular", sans-serif;
font-weight: 100;
margin: 0% 13% 0 0;
padding: 0.6em 0em 10em 0;
}
.nav-text:hover
{
color: DarkGoldenRod;
}
#nav-list
{
list-style-type: none;
padding: 0;
}
.text-section
{
width: 40%;
background-color: GoldenRod;
background-color: rgb(188, 121, 0);
background-color: #BC7900;
opacity: 0.9;
padding: 0 2em 0 1em;
margin: 1% 0 0 0;
float: left;
}
.text-section h1
{
font-family: "GillSansUltraBold", sans-serif;
font-size: 2em;
margin: 0 0 0.2em 0;
padding: 0;
}
.text-section h2
{
font-family: "OpenSansExtraBold", sans-serif;
font-size: 1.8em;
margin: 0.4em 0 0em 0;
padding: 0;
}
.text-section p
{
font-family: "OpenSans", sans-serif;
font-size: 1em;
padding: 0;
margin: 0 0 0.3em 0;
}
footer
{
clear: both;
}
footer *
{
display: inline;
}
In your example you just need to set the .text-section to:
position: relative;
and the footer goes to the bottom like you want.
Otherwise your generic code will basically do what you're looking for. Here's a quick pen showing the concept: Example Pen
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".)
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.