I'm developing a PHP/HTML5/CSS3 page and have run into an issue. I somehow had this working perfectly then added some code, made some changes, and broke it.
The concept was that multiple portions of the page would be at 100% width, but with predefined heights. Now however, at width:100% it runs the full width, less 15-20 px (~1%). It has properties CSS stylings such as:
html {
width: 100%;
}
body{
background-color:#fbf9ec;
font-family:"Times New Roman", Times, serif;
width:100%;
}
#upperContainer{
height: 100px;
width: 875px;
margin: 0 auto;
position: relative;
}
#topLogo{
width: 250px;
height:75px;
background-image:url(../images/logo.png)
}
#nav{
background-image:url(../images/nav-bg.png);
height: 32px;
width: 100%;
margin-left:-10px;
background-repeat:repeat-x;
}
#featuredContent{
height: 336px;
width: 100%;
margin-left:-12px;
background-image:url(../images/featured-bg.png);
}
#sliderA{
background: #3a7c38;
height: 326px;
width: 873px;
margin: 0 auto;
padding: 10px 0 0 0;
border:1px #353f35;
border-right-style:solid;
border-left-style:solid;
position: relative;
}
Any thoughts?
You have negative left margins set. Remove them and see if it lines up.
#nav{
margin-left:-10px;
}
#featuredContent{
margin-left:-12px;
}
Related
So here's my code:
#logo {
position:fixed;
color: white;
width: 100%;
padding: 5px;
left:0px;
top:0px;
height:50px;
width:100%;
background:#ffffff;
z-index: 1;
}
#page-container {
margin: auto;
width: 960px;
height: 100%!important;
background: #ffffff;
border-style: solid;
border-color: red;
}
html, body {
padding: 0;
}
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #000000;
background-color: #eef3f7;
}
#footer {
position:fixed!important;
position:absolute;
color: white;
clear: both;
width: 100%;
padding: 0;
left:0px;
bottom:0px;
height:30px;
background:#272695;
text-align:center;
}
I want to be able to set the page container height so that the footer over laps it all the way through. The issue I am getting is this:
What I want is to have my page-content rule to cover the whole top and bottom with no overlapping. I'm looking for something along the lines of this:
I honestly have tried everything I just don't know what the issue is.
Add this to your CSS.
body, html {
height: 100%;
}
The CSS height property is relative to it's parent and height defaults to auto. So to get your #page-container to be 100% you have to set the parent height.
So, i'm trying to center three of my divs on the page, #header, #nav, and #headerImg. I can't seem to center my #header and #nav divs using margin: 0 auto; though. They seem to be stuck to the left side of my page when I refresh the page.
Here is my style.css for my page:
div#header{ //I only have one image here.
position:absolute;
padding: 10px 20px;
width: 960px;
height: 49px;
top: 0px;
background-color: #2E5E8D
}
div#nav{ //I have 4 links here
position:absolute;
margin: 0 auto;
padding: 10px 20px;
width: 960px;
height: 20px;
top: 69px;
background-color: #2E5E8D
}
div#headerImg{ //I have one image here,
position: relative;
display: block;
margin: 0 auto;
width: 1000px;
top: 95px;
}
div#content{
position:relative;
top:109px;
width:1000px;
display: block;
margin: 0 auto;
}
div#content a{
color: blue;
text-decoration: none;
}
#content a:hover{
color: red;
text-decoration: underline;
}
#content dt{
margin-top: 10px;
}
div#footer{
position: relative;
margin: 0 auto;
top: 109px;
background-color: #333333;
color: white;
text-align: center;
font-size: 14px;
width: 1000px;
padding: 10px;
}
The width on my #header and #nav have to be set to 960px as per instructors request, and I'm sure he wanted the image inside my #headerImg to be inside my #header div, but i couldn't get the image from overlapping. Therefore, that's the only div of the 3 that I can center.
I tried using margin: 0 auto; and display: block on both but they don't seem to work. I tried using margin: 0 10% which seemed to work on my computer, but it is misaligned on another computer. My comments in the code are just to show what I have in the div.
Try add div#header and div#nav the following rules:
margin-left: -500px;
left: 50%;
I have a main div which has another two divs with in, I am trying to put the inner divs side by side. I have trie the following code, but I can't understand why it doesn't work. If apply float to my inner div they just disappear. Here is my code:
<div id="mainContainer">
<div id="leftSide"></div>
<div id="rightSide"> </div>
</div>
body{
background-color: #006847;
}
#mainContainer{
background-color: #FFFFFF;
max-width: 95%;
height: 500px;
margin: 0 auto;
box-shadow:10px 10px 5px red;
margin-top: 50px;
}
#leftSide{
background-color: #CE1126;
max-width: 40%;
height: 900px;
}
#rightSide{
max-width: 50%;
height: 900px;
background-color: purple;
float: right;
}
Use display:inline-block;
Change the height of your inner divs to 500px since your containers height is 500px.
Change max-width to width. width needs to be specified in order for max-width to work.
If you set a fixed width and a max-width, this means the following:
If the width goes above max-width, keep it at max-width. If the width
is below max-width, keep it on width.
Credits
Change to this:
#leftSide{
background-color: red;
width: 50%;
height: 500px;
display:inline-block;
}
#rightSide{
width: 50%;
height: 500px;
background-color: green;
float: right;
display:inline-block;
}
JSFiddle Demo
You should specify width of container and then use max/min-width to override it,
Try,
body {
background-color: green;
box-sizing: border-box;
margin:0;
padding:0;
}
#mainContainer {
background-color: blue;
width: 95%;
height: 900px;
margin: 0 auto;
box-shadow:10px 10px 5px grey;
margin-top: 50px;
}
#leftSide {
background-color: yellow;
width: 40%;
height: 900px;
float: left;
}
#rightSide {
width: 60%;
height: 900px;
background-color: red;
float: left;
}
Try not making the height of #mainContainer higher than the others:
#mainContainer{
background-color: #FFFFFF;
max-width: 95%;
**height: 900px;**
margin: 0 auto;
box-shadow:10px 10px 5px red;
margin-top: 50px;
}
I simplified your code and turned it into a JSFiddle. Basically, you don't want floats unless very necessary. Use display:inline-block; instead. http://jsfiddle.net/KybKc/
I got 3 div's side by side. The leftmost div have fixed size: 60px;
The other two divs are suppose to fill the rest of the screen.
The complicated part is that the middle and right div are supposed to contain scrollable tables. As of now, I have to scroll the page to get to the bottom of the table.
Here is a picture of the current look:
As you see, I got a menu on the left sided div (the yellow border).
The two red bordered divs are tables.
Issue 1: The right-most table which contains the songs doesnt fill the rest of the screen.
Issue 2: I cant get the tables (Playlists and the table of songs) to be scrollable. In other words, I want them to 'end' at the bottom of the page and have a scrollbar inside the tables tbody or something like that.
This is the code:
.div_container
{
top: 0;
bottom: 0;
border: 1px solid #0000FF; /* blue */
margin-top: 87px;
}
.div_menu
{
width: 60px;
background: #111111;
position: fixed;
float: left;
border: 1px solid #F7FE2E; /* yellow */
}
.div_playlists
{
width: 25%;
height: 100%;
top: 0;
bottom: 0;
margin-left: 60px;
float: left;
border: 1px solid #DF0101; /* red */
}
.div_tracks
{
max-width: 60%;
height: 100%;
float: left;
margin-left: 10px;
border: 1px solid #DF0101; /* red */
}
And for the tables:
table.playlists
{
width: 100%;
height: 100%;
text-align: center;
float: left;
background: #181818;
border-collapse: collapse;
}
table.playlists tbody
{
font-size: small;
overflow: auto;
width: 100%;
height: 100%;
}
table.tracks
{
width: 100%;
height: 100%;
text-align: center;
float: left;
background: #181818;
border-collapse: collapse;
}
table.tracks tbody
{
font-size: small;
overflow: auto;
width: 100%;
height: 100%;
}
The HTML:
<div class="div_container">
<div class="div_menu"></div>
<div class="div_playlists"></div>
<div class="div_tracks"></div>
</div>
Sorry for the noob question, I should probably use a bootstrap template or something, but I couldn't find any free templates that matched my design interest.
This is just a simple case of using position:fixed, as in this Fiddle example:
The CSS is the only interesting part:
div {
color:white;
position:fixed;
overflow:auto;
left:0;
right:0;
top:0;
bottom:0;
}
#top {
background:red;
height:64px;
bottom:auto;
}
#sidebar {
background:green;
width:64px;
top:64px;
right:auto;
}
#playlists {
background:navy;
left:64px;
top:64px;
width:192px;
right:auto;
}
#tracks {
background:brown;
left:256px;
top:64px;
}
Try this
CSS
overflow-y:scroll;
I am having difficulties achieving Css 100% so my website can look right in every web browser. I followed a tutorial I found HERE but no luck in getting it working. I have an example that contains a footer. This footer is also not in place. Also, I am trying to have the surrounding black frame cover my footer. Is there something I am doing wrong?
For better details please look at my
LIVE EXAMPLE
CSS
<style>
html,body {
padding: 0px;
margin: 0px;
background: #333333;
background-size: 100%;
line-height: 130%;
height: 100%
font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif;
font-size: 90%;
color: #5e5e5e;
}
/****** COLORBLOCK: this is the orangey-yellow bar behind the wrapper i the background. ******/
#colorblock {
position: absolute;
top: 60px;
left: 0px;
background: #c69a55;
z-index: -1;
height: 65px;
width: 100%;
padding: 0px;
margin: 0px;
}
/****** WRAPPER: this is the light gray box that is the background for all of the content. DO NOT EDIT. ******/
#container {
z-index: 1;
width: 850px;
position: relative;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#contentArea{
padding:1em 1em 5em;
min-height:700px;
width: 850px;
position:relative;
background: #f2f2f2;
border-right: 15px solid #000000;
border-left: 15px solid #000000;
position: relative;
}
/****** TOP BANNER: This is the banner with Greg's List logo and main navigation. Also includes the styles for the main navigation links. ******/
#header {
width: 100%;
height: 180px;
}
/****** FOOTER: This is the junk at the bottom of the page. Do NOT remove the clear div; it's what makes it stick to the bottom. ******/
#clear {
clear: both;
margin-bottom: 10px;
}
#addSpace{
padding-bottom:7px;
}
.bottomNav {
margin-right:auto;
margin-left:auto;
width:880px;
height: 200px;
background: #7a7a7a;
}
#footer{color:#FFF; position:absolute; bottom:0; width:100%; padding-bottom:10px; padding-top:10px;}
</style>
to set the footer in place you just need to reset width: 905px; in .bottomNav class
use ( width: calc ) property in css
for example.
u need header 100px and footer 100px with 100% content height
css
body, html{height:100%; margin:0px;}
.header{height:100px;}
.footer{height:100px;}
.content{height: 100%;
height: -webkit-calc(100% - 200px);
height: -moz-calc(100% - 200px);
height: calc(100% - 200px);
}
we set -200 bcoz header height 100px + footer height 100px so 100+100 = 200