I'm working with the 960 grid system and I'm having trouble with keeping the footer inline with the grid, as well as at the bottom of the page. The following code is computed with a margin-left and a margin-right of 0px instead of auto-filling in the space between the edge of the page.
HTML
<footer class="botbar">
<small class="contact">name address information</small>
<small class="social">social media icons</small>
<small class="humans">human info</small>
<small class="copyright">© info</small>
</footer>
CSS
.botbar {
/*properties of container_16*/
margin-left:auto;
margin-right:auto;
width:960px;
/*my styling*/
clear: both;
position: absolute;
bottom: 0;}
.fcontact {
/*properties of prefix_1*/
padding-left:60px;
/*properties of container_16+grid_4*/
width:220px;
/*properties of grid_4*/
display:inline;
float:left;
margin-left:10px;
margin-right:10px;
.social {
/*properties of prefix_1*/
padding-left:60px;
/*properties of grid_4*/
display:inline;
float:left;
margin-left:10px;
margin-right:10px;
/*properties of container_16+grid_4*/
width:220px;
/*properties of suffix_1*/
padding-right:60px;}
.humans {
/*properties of grid_4*/
display:inline;
float:left;
margin-left:10px;
margin-right:10px;
/*properties of container_16+grid_4*/
width:220px;
/*properties of suffix_1*/
padding-right:60px;}
.copyright{
/*properties of grid_16*/
display:inline;
float:left;
margin-left:10px;
margin-right:10px;
/*properties of container_16+grid_16*/
width:960px;}
solved it, was able to do the .bottom class and add it to footer so <footer class="botbar bottom"> without needing a <div>
Related
I want three div's next to eachother (I placed them in a .wrapper div so I could float them to the left). The three div's should be centered on the page. So I thought, if I center the .wrapper with margin-left/right: auto, all the three divs would center up. This didnt work.
Also, when I resize the browser the divs move. I don't want that to happen.
I've googled endlessy and put lots of solutions in the script, nothing worked.
Also, it shows differently per browser (firefox, safari and Chrome).
Here's my HTML:
<div id="container">
<div class="wrapper">
<div id="lost"><img src="images/lost.png"></div>
<div id="compass"><img src="images/compass.png"></div>
<div id="sailor"><img src="images/sailor.png"></div>
</div>
<div id="sea">
<img src="images/seaAnimated.png" class="sea" id="animatedSea">
</div>
</div>
And my CSS:
body,html
{
margin:0px;
padding:0px;
}
#container
{
position:absolute;
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.wrapper
{
left:auto;
right:auto;
margin-left:auto;
margin-top:8%;
margin-right:auto;
padding-left:auto;
padding-right:auto;
width:100%;
height:75%;
}
#lost
{
float:left;
width:auto;
clear:both;
margin-left:auto;
margin-right:auto;
}
#compass
{
float:left;
width:auto;
height:75%;
margin-left:auto;
margin-right:auto;
}
#sailor
{
float:left;
width:auto;
height:75%;
margin-left:auto;
margin-right:auto;
}
#sea
{
position:absolute;
bottom:0px;
z-index:2;
background-image:url(images/sea.png);
background-repeat:repeat-x;
background-position:bottom;
height:25%;
width:100%;
}
#animatedSea
{
position:absolute;
bottom:10px;
width:auto;
height:25%;
z-index:-1;
}
try this
css
.wrapper{
text-align:center;
margin-top:8%;
width:100%;
height:75%;
}
#lost{
display:inline-block;
width:50px;
height:50px;
background-color:#0C0;
}
#compass{
display:inline-block;
width:50px;
height:50px;
background-color:#06F;
}
#sailor{
display:inline-block;
width:50px;
height:50px;
background-color:#96F;
}
html
<div class="wrapper">
<div id="lost">123</div>
<div id="compass">456</div>
<div id="sailor">789</div>
</div>
jsFiddle Code
You could use a fixed width on your wrapper to get it to center. You do have to specify a width (and not leave it empty) because divs are block-level, meaning that they fill the entire width by default.
http://jsfiddle.net/isherwood/CBMaX/2
.wrapper {
width: 240px;
margin-left:auto;
margin-right:auto;
}
#wrapper
{
text-align: center;
}
#compass
{
width:33.3%;
}
#sailor
{
width:33.3%;
}
#lost
{
width:33.3%;
}
Try this css. Include this css into your css.
i have a problem in aligning the div's vertically,what should be problem?
here is my html code
<div class="recentProfiles">
<div class="profiles" id="profile1">
</div>
<div class="profiles" id="profile2">
</div>
<div class="profiles" id="profile3">
</div>
</div>
css
.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
#profile1
{
float:left;
clear:both;
position:relative;
margin-left:5px;
margin-top:5px;
}
#profile2
{
position:relative;
margin-left:310px;
margin-top:5px;
}
#profile3
{
position:relative;
margin-left:620px;
margin-top:5px;
}
i want the three div's to be aligned vertically together inside the parent, here is the demo
I'm not sure why you need so many redundant codes to achieve like what you describe, just do:
.recentProfiles
{
width:300px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
Demo: http://jsfiddle.net/VvqXF/
That's because of your margins. If you take clear:both off profile1 and then add float: left onto all profiles, then take off those margins.
Demo: http://jsfiddle.net/WC5gT/
Try using float:left on class profiles and then no margin on profile1, profile2, profile3
Working example: http://jsfiddle.net/rK38V/
Have all the boxes float left (float: left) and remove all margin properties, like this: http://jsfiddle.net/2ABmU/
You get the idea of float wrong. Here's the new code: http://cdpn.io/AvJqI
HTML
<div class="recentProfiles">
<div class="profiles" id="profile1">
</div>
<div class="profiles" id="profile2">
</div>
<div class="profiles" id="profile3">
</div>
<div class="floatClear"></div>
</div>
CSS
.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
#profile1
{
float:left;
position:relative;
margin-left:5px;
margin-top:5px;
}
#profile2
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;
}
#profile3
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;
}
.floatClear {
clear: both;
}
In this I want the div #intro to float below the div #navtop.
At the moment it hovers below on the right side.
<style>
#wrapper {
width:850px;
height:auto;
margin:auto;
font-family:Arial, Helvetica, sans-serif;
}
#header {
height:100px;
width:850px;
margin:0;
margin-top:25px;
background:url(img/header.png) no-repeat #000 ;
border:2px #000 solid;
}
#navtop {
width:auto;
height:45px;
float:left;
background:#000;
padding-right:8px;
}
#navtop a {
width:500px;
margin:0px;
margin-left:8px;
padding-left:4px;
padding-right:4px;
color:#FFF;
padding-bottom:0px;
text-decoration:none;
}
#logo {
height:40px;
width:40px;
margin-left:4px;
}
#navtop a:link {
background:#666;
}
#navtop a:hover {
color:#999;
}
#intro {
width:auto;
height:auto;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
}
#about {
width:500px;;
height:auto;
float:right;
background:#666666;
margin-top:25px;
padding:5px;
border:2px #000 solid;
}
h2 {
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
margin:0px;
padding:0px;
}
body {
background:#999;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navtop"><img id="logo" src="img/logo.jpg" alt="logo" width="40" height="40" />
Home
About
tour
photos
contact
</div>
<div id="intro">
<img src="img/djpic.jpg" width="300" height="450" alt="pic" /></div>
<div id="about"> <h2>DJ TECHIE LUNCHBOX</h2>
<p>DJ Techie Lunchboxis the current dj who knows what an audience thinks , her upside down skiiny fettish style sjing will
leave any with a head without for for chips and shandy . chocolate malnurishment bring a chip bang mismosh to her long term goals
.</p>
.
</div>
</div>
</body>
It's because you have float: left; on #intro.
Try this:
#intro {
width:auto;
height:auto;
clear:left;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
}
#about {
width:500px;;
height:auto;
float:left;
background:#666666;
margin-top:25px;
padding:5px;
border:2px #000 solid;
}
edited to make the #about div float next to #intro div.
If you still want that floated to the left of whatever the other box (I assume you do), try adding a clear: left to the #intro CSS. This will cause the box to break down to below whatever element is causing it to move to the right and start a new line.
#intro {
width:auto;
height:auto;
float:left;
background:#666;
margin-top:70px;
padding:4px;
border:2px #000 solid;
clear:left;
}
don't use float:left on #navtop. It wants to line #navtop and #intro divs beside eachother
I am not 100% sure I understand what you are trying to accomplish but i will take a stab at it
you could target your #navtop with a rule
#navtop{clear: right;}
or simply remove the float: left from the #intro
either one of these will move the #intro under the nav
however if you want the intro to be next to something you will have to use clear:right on navtop
i'm struggling to find a solution to this anywhere. I have created a slider that works perfectly in Safari but when i view it in Firefox slider image 1 has no margin in between slider image 2 and neither 2 with 3 and so on. Creating a train of images that never quite fit in the slider window(almost like a lift opening at random points between floors).
second problem i'm having is creating the slider image as the link as apposed to just the .content h2 title being the link.
The slider is in Wordpress Epione theme.
any help would be greatly appreciated
this is my css-
/*SLIDER*/
#sliderwrap{float:left; width:auto; height:auto; background:none; margin-left:0px; margin-top:px; position:; z-index:3;}
.slidercontent{ margin-top:20px;width:auto; height:auto;}
#slider{ margin-left:0px; margin-top:0px; width:auto; height:auto;}
.content{ width:auto; margin-right:auto;}
.content p{ font-style:none; font-size:14px;}
.content h2{ position: relative; left: -650px; top:490px; font-family: 'helvetica; colour:#00000; font-size:10px; margin-bottom:15px; margin-top:20px;display:}
.content h2 a{ color:#00000; display:block; margin-left: 700px; text-decoration:none; text-shadow:none; text-transform:uppercase;}
#slider img{width:auto; height:auto; ; margin-left:0px; margin-top:22px; min-height:225px; }
.sframe{ background:url(images/sliderimg.png) no-repeat; float:center; ; height:auto; float:center; position:; z-index:0; margin-top:12px; margin-left:60px;}
.sl_control{ float:left; width:100px; height:5px; background:none; margin-top:-10px; margin-right:12px; position:relative;}
/* Easy Slider */
#slider ul, #slider li{margin:0;padding:0;list-style:none;}
#slider li, #slider2 li{ width:1000px;height:1100px}
#nextBtn{display:block; width:13px; height:14px; position:relative; left0px; top:0px; z- index:1000; right:120px; top:-718px; float:left; left:775px; margin-right:20px; }
#prevBtn{display:block; width:13px; height:14px; position:relative; left:300px; top:0px; z-index:1000; right:120px; top:-718px; float:left; left:-0px; margin-right:20px; }
#prevBtn{ left:-20px;}
#nextBtn a, #prevBtn a{ display:block;position:relative;width:13px;height:14px;
background:url(images/sl_left.png) no-repeat 0 0;}
#nextBtn a{ background:url(images/sl_right.png) no-repeat 0 0;}
.graphic, #prevBtn, #nextBtn{padding:0; display:block; overflow:hidden; text-indent:-8000px;}
/* Easy Slider END */
/*SLIDER END*/
and the front-page where the .php appears
<?php get_header(); ?>
<!--SLIDER-->
<div id="sliderwrap">
query('category_name= '. $slidecat .'&showposts='. $slidenum .'');
while ($sliders->have_posts()) : $sliders->the_post(); ?>
">
</div>
<div class="sl_control"></div>
<!--SLIDER END-->
<!--CONTENT-->
</div>
</div>
<!--CONTENT END-->
<!--SIDEBAR-->
<?php get_sidebar(); ?>
<!--SIDEBAR END-->
</div>
<!--Footer-->
<?php get_footer(); ?>
First of all:
Your CSS doesn't validate and I'm guessing Firefox is having issues parsing it as such. Try copying and pasting that snippet into http://jigsaw.w3.org/css-validator/ to see what I mean. Below is some (somewhat) corrected CSS:
/* SLIDER */
#sliderwrap {float: left; width: auto; height: auto; background: none; margin-left: 0px; z-index: 3;}
.slidercontent {margin-top:20px; width:auto; height:auto;}
#slider {margin-left: 0px; margin-top: 0px; width: auto; height: auto;}
.content{ width:auto; margin-right:auto;}
.content p{ font-style:none; font-size:14px;}
.content h2{ position: relative; left: -650px; top:490px; font-family: sans-serif; colour: #000000; font-size:10px; margin-bottom:15px; margin-top:20px;}
.content h2 a{ color:#000000; display:block; margin-left: 700px; text-decoration:none; text-shadow:none; text-transform:uppercase;}
#slider img{width:auto; height:auto; margin-left:0px; margin-top:22px; min-height:225px; }
.sframe{ background:url(images/sliderimg.png) no-repeat; height:auto; float:center; z-index:0; margin-top:12px; margin-left:60px;}
.sl_control{ float:left; width:100px; height:5px; background:none; margin-top:-10px; margin-right:12px; position:relative;}
/* Easy Slider */
#slider ul, #slider li{margin:0;padding:0;list-style:none;}
#slider li, #slider2 li{ width:1000px;height:1100px;}
#nextBtn{display:block; width:13px; height:14px; position:relative; left:0px; top:0px; z- index:1000; right:120px; top:-718px; float:left; left:775px; margin-right:20px; }
#prevBtn{display:block; width:13px; height:14px; position:relative; left:300px; top:0px; z-index:1000; right:120px; top:-718px; float:left; left:-0px; margin-right:20px; }
#prevBtn{ left:-20px;}
#nextBtn a, #prevBtn a{ display:block;position:relative;width:13px;height:14px;
background:url(images/sl_left.png) no-repeat 0 0;}
#nextBtn a{ background:url(images/sl_right.png) no-repeat 0 0;}
.graphic, #prevBtn, #nextBtn{padding:0; display:block; overflow:hidden; text-indent:-8000px;}
/* Easy Slider END */
/*SLIDER END*/
Note that this still won't parse for a couple of reasons -- first of all, float is either "left" or "right"; you can't do it "center". To do that with floats, you need to do things like "margin-left: 50%;" Secondly, fonts are always styled in some way -- you can't declare font-style as "none". I've left those in the above because I'm not sure how you want to deal with that.
Regardless, you can fork to different stylesheets based on browser in PHP; see:
http://php.about.com/od/learnphp/p/http_user_agent.htm
Hope this helps!
-æ.
Its a bit of a tough one to explain really.
this is it:
<div id="inside-cntr">
<!--GAME CONTENT GOES HERE!-->
<div style="position:relative; margin:15px; margin-top:35px; margin-bottom:20px; padding:1px; width:200px; height:200px; display:inline-block; float:left; background-color:#333;"></div>
<div style="position:relative; margin:15px; margin-top:35px; margin-bottom:20px; padding:1px; width:200px; height:200px; display:inline-block; float:right; background-color:#333;"></div>
<!--GAME CONTENT GOES HERE!-->
#inside-cntr { position:relative; width:760px; height:auto; min-height:50px; margin:0px; background-image:url(../images/global/main-content-inner.jpg); background-repeat:repeat-y; background-position:center; z-index:10; clear:both; }
What is happening is that the two div test blocks do not sit inside the expanding div container when both blocks have float attributes.
Also, i'm not too sure why I have to put such large margins to position the div blocks too?
#inside-cntr { overflow:hidden; zoom:1; }
Explanation: http://work.arounds.org/clearing-floats/