Here is my site : rickymason.net/blurbs
If you take a look at it in chrome, you'll see that the AJAX on the right loads properly, and the CSS correctly formats it.
In firefox, its a different story. I've played around with it, but can't find the problem.
Here is my template(divs):
<html>
<head><?php echo $head; ?></head>
<div id="wrapper">
<div id="topnav"><?php echo $topnav; ?></div>
<div id="leftbar">
<?php echo $logo; ?>
<img src="<?php echo $profile['avatar_loc']['location'] ?>" alt="avatar_user"/>
<div id="select">
<?php echo $create; ?>
<div id="filter_select"><?php echo $category; ?></div>
<div id="addfilter"><?php echo $addfilter; ?></div>
</div>
</div>
<div id="boardwrapper">
<div id="boardborder">
<div id="board" alt="Welcome to Blurb!"><img src="img/board/loading.gif" alt="loading"/></div>
</div>
<div id="boardbot"></div>
</div>
<footer>
<?php echo $footer; ?>
</footer>
</body>
</div>
</html>
Here is my CSS
.board {
display: table;
padding-left: 35px;
padding-top: 10px;
}
.board #row {
padding-bottom: 15px;
}
.board #author p {
position: absolute;
top: inherit;
padding-left: 3px;
padding-top: 53px;
color: white;
font: 16px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
text-shadow: 0px 2px 3px #555;
}
.board #author {
display: table-cell;
border: 1px solid #97cae6;
width: 75px;
height: 75px;
}
.board #arrow {
background-image: url('../img/board/corner.jpg');
display: table-cell;
width: 35px;
height: 75px;
}
.board #subject {
position: relative;
max-height: 75px;
display: table-cell;
width: 653px;
max-width: 653px;
height: 75px;
border-top: 1px solid #97cae6;
border-bottom: 1px solid #97cae6;
}
.board #subject a {
position: absolute;
top: inherit;
padding-top: 18px;
}
.board #info {
display: table-cell;
width: 180px;
height: 75px;
border-top: 1px solid #97cae6;
border-bottom: 1px solid #97cae6;
border-right: 1px solid #97cae6;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
Hopefully something jumps out at you and you can help! Thanks!
In the file board.css, changing this:
.board #arrow {
background-image: url('../img/board/corner.jpg');
display: table-cell;
width: 35px;
height: 75px;
}
to this:
.board #arrow {
background: url('../img/board/corner.jpg') no-repeat;
display: table-cell;
width: 35px;
}
Should fix your problem.
JA
Related
Currently I am developing a Facebook like Messenger. Right now I am working under a chat-area, this thing should be fixed. But if I give position:fixed suddenly div disappear. I don't know what to do.
Here is my HTML/PHP code.
<?php
// Turn off all error reporting
//shop not login users from entering
if(isset($_SESSION['id'])){
$user_id = $_SESSION['id'];
}else{
}
require_once("./inc/connect.inc.php");
?>
<header>
<link rel="stylesheet" href="home - Copy.css" />
<nav>
<h3><a class="h3" href="#">Cp</a></h3>
<div>
<?php
//Start your session
session_start();
//Read your session (if it is set)
if (isset($_SESSION['user_login']))
echo $_SESSION['user_login'];
?>
</div>
<div><span>Logout</span></div>
<div><span>Settings </span></div>
</nav>
<body>
<div class="shead">
<div class="a1"> <li >Frequent Member</li>
<ul>
<?php
//show all the users expect me
$user_id = $_SESSION['id'];
$q = mysql_query("SELECT * FROM `users` WHERE id!='$user_id'");
//display all the results
while($row = mysql_fetch_assoc($q)){
echo "<a href='home.php?id={$row['id']}'><p>{$row['username']}</p></a>";
}
?>
</ul>
</div>
<div class="a2"> <li >Site's Popular in Your College</li></div>
</div>
</header>
<div class="rss">
<?php
//include('rssclass.php');
//sinclude('rss.php');
?>
<div class="message-right">
<!-- display message -->
<div class="display-message">
<?php
//check $_GET['id'] is set
if(isset($_GET['id'])){
$user_two = trim(mysql_real_escape_string( $_GET['id']));
//check $user_two is valid
$q = mysql_query( "SELECT `id` FROM `users` WHERE id='$user_two' AND id!='$user_id'");
//valid $user_two
if(mysql_num_rows($q) == 1){
//check $user_id and $user_two has conversation or not if no start one
$conver = mysql_query( "SELECT * FROM conversation WHERE (user_one='$user_id' AND user_two='$user_two') OR (user_one='$user_two' AND user_two='$user_id')");
//they have a conversation
if(mysql_num_rows($conver) == 1){
//fetch the converstaion id
$fetch = mysql_fetch_assoc($conver);
$conversation_id = $fetch['id'];
}else{ //they do not have a conversation
//start a new converstaion and fetch its id
$q = mysql_query( "INSERT INTO `conversation` VALUES ('','$user_id',$user_two)");
$conversation_id = mysql_insert_id($con);
}
}else{
die("Invalid $_GET ID.");
}
}else {
die("Click On the Person to start Chating.");
}
?>
</div>
<div class="send-message">
<!-- store conversation_id, user_from, user_to so that we can send send this values to post_message_ajax.php -->
<input type="hidden" id="conversation_id" value="<?php echo base64_encode($conversation_id); ?>">
<input type="hidden" id="user_form" value="<?php echo base64_encode($user_id); ?>">
<input type="hidden" id="user_to" value="<?php echo base64_encode($user_two); ?>">
<div class="textbox">
<input class="t_box" type="text" id="message" placeholder="Enter Your Message"/>
<button class="t_btn" id="reply">Reply</button>
<span id="error"></span>
</div>
</div>
</div>
<!--
<div class="textbox">
<form action="#" method="post">
<input type="text" name="msg_body" class="t_box" id="t_box" >
<input type="submit" class="t_btn" id="t_btn" name="submit" value="Send">
</form>
</div>-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
Here is my css and .message-right is the element where problem occurs.
#import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', Arial, sans-serif;
background-color: #222;
overflow-x: hidden;
text-align: center;
}
header {
position: fixed;
width: 100%;
height: 50px;
background-color: #FFD700;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
header > nav > div {
float: right;
width: 10.6666%;
height: 100%;
position: relative;
}
header > nav > div > a {
text-align: center;
width: 100%;
height: 100%;
display: block;
line-height: 50px;
color: #222;
transition: background-color 0.2s ease;
text-transform: uppercase;
}
header > nav > div:hover > a {
background-color: rgba(0, 0, 0, 0.1);
cursor: pointer;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
text-decoration: none;
background-color: #FFD700;
font-weight: bolder;
}
h3{
float: left;
height: 100%;
text-align: bottom;
padding-top: 10px;
padding-left: 10px;
}
.h3{
color: #222;
font-size:25px;
}
.nav{
position: fixed;
}
.title-head {
font-size:18px;
font-weight:bold;
text-align:left;
background-color:#F5F6F7;
color:#000;
float: left;
width: 455.33px;
}
.feeds-links {
text-align:left;
width: 455.33;
font-size: 20px;
padding:5px;
border:1px solid #dedede;
padding-top:inherit;
color: #000;
background-color: #FFFFFF;
}
.rss{
float: right;
padding-top: 100px;
}
.h2{
color: #000;
background: #ffd700;
height: 45px;
width: 455.33px;
padding-top: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.textarea{
float: left;
padding-top:553px;
width: 455.3px;
position: fixed;
}
.t_box{
float: left;
border-radius: 5px;
border: 1px solid #FFD700;
background-color: #fff;
padding: 5px 5px;
font-size: 1em;
width: 78%;
outline: none;
}
.textbox{
background-color: #FFD700;
border: 1px solid #FFD700;
margin-top: 565px;
padding: 10px;
height: 50px;
width:455.5px;
float: left;
}
.t_btn{
text-decoration: none;
color:#222;
font-weight: bold;
background-color: transparent;
border: none;
font-size: 1em;
cursor: pointer;
height: 33px;
width: 70px;
outline: none;
}
.shead{
height: 50px;
width: 910px;
float: right;
margin-top: 0px;
background: #FFD700;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
position: sticky;
border-top: #000;
}
.a1{
text-align: center;
width: 50%;
display: block;
line-height: 50px;
color: #000;
font-size: 19px;
list-style: none;
font: #000;
}
.a2{
text-align: center;
width: 50%;
display: block;
line-height: 50px;
color: #222;
float: right;
transition: background-color 0.2s ease;
font-size:19px;
text-decoration: none;
margin-top: -150px;
list-style: none;
}
.frequentmem{
display: block;
height: 100%;
width: 100%;
float: right;
}
.message-right{
margin-right:908px;
background: #fff;
height: 615px;
width:455.5px;
margin-top: 50px;
float: left;
position: fixed;
}
hr{
background: #e9e9e9;
border: 0;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 1px;
margin: 0;
min-height: 1px;
}
.message{
width: 455.3px;
background: #fff;
height: 50px;
padding: 8px 24px;
}
float:left doesn't do anything if your position is fixed, you should add left:0 instead, on the other hand, you should always specify vertical and horizontal position of a fixed element unless you want it to stay on the part of the page it was rendered this means if your message-right are is rendered below the fold it will not be visible to your users unless you tell it at what coordinates it should remain fixed
I think floating divs and fixing the position do not go well together.
Try removing the float:left and as the user above suggested, adding the left: some_pixels, top: some_pixels to align the div "absolutely" on the page. I usually add a border/background color to divs to identify where they are on the page (then remove later), so you can try that to to make sure it is where you expect it to be.
.message-right{
margin-right:908px;
background: #fff;
height: 615px;
width:455.5px;
margin-top: 50px;
**float: left;** <-- remove
position: fixed;
left: 50px;
top: 50px;
}
With a fixed position, maybe your div is behind some other content. Have you tried using a z-index ? Setting the z-index to 1 would move it forward over another div. Also, you have no top, bottom, right or left dimensions for your fixed position. You could try moving the div around by assigning those values. Example.
Anyways, it is hard to tell what your problem is without the HTML to go with the CSS. Posting that would help you get better response.
I don't have 50 reputation, so I had to add this comment as an answer.
your code looks fine. Adding a border should do the trick.For instance:
But without the rest of the code(html and css) it would be hard to know what is wrong.
.chat-area{
margin-right:908px;
background: #fff;
border:1px solid black;<-- like this
height: 615px;
width:455.5px;
margin-top: 50px;
float: left;
position: fixed;
}
I'm trying to make this footer, where every element is vertically aligned. But for some reason, copyright for example isn't vertically aligned.
Can anyone help me finding out what is wrong? Or what I am missing?
Footer HTML:
<div id="footerSocial">
<div id="socialNetwork">
Connect with us
<img src="/www/assets/newImages/footer/facebook.png">
<img src="/www/assets/newImages/footer/twitter.png">
<img src="/www/assets/newImages/footer/google plus.png">
<img src="/www/assets/newImages/footer/pinterest.png">
<img src="/www/assets/newImages/footer/tumblr.png">
</div>
<div id="footerNewsletter">
Subscribe to Newsletter
<input id="subscribeNewsletter" name="email" type="text">
<input id="subscribe_ok" type="image" src="/www/assets/newImages/footer/Ok.png" onclick="saveNewsletter(this);">
</div>
<div id="copyright">
Copyright 2013 - Dreaming Different
</div>
</div>
Footer CSS:
#footerSocial {
display: inline-block;
text-align: center;
width: 100%;
margin-top: -25px;
}
#socialNetwork {
display: inline-block;
float: left;
font-size: 10px;
color: #747474;
}
#footerNewsletter {
display: inline-block;
margin: 0 auto;
font-size: 10px;
color: #747474;
}
#footerNewsletter #subscribe_ok {
margin-bottom: -5px;
}
#copyright {
display: inline-block;
float: right;
font-size: 10px;
color: #747474;
}
#footerSocial {
border: 1px solid black;
}
#socialNetwork {
border: 1px solid green;
}
#footerNewsletter {
border: 1px solid red;
}
#copyright {
border: 1px solid blue;
}
Fiddle Demo
You can use a table layout to achieve what you want :
#footerSocial { display: table; text-align: center; width: 100%; font-size: 10px;color: #747474;}
#footerSocial > div {display: table-cell; }
#footerNewsletter #subscribe_ok { margin-bottom: -5px; }
#footerSocial { border: 1px solid black; }
#socialNetwork { border: 1px solid green; }
#footerNewsletter { border: 1px solid red; }
#copyright { border: 1px solid blue; }
Example
I am making a webpage using CSS when I encountered a problem. My menu bar doesn't center the links vertically in the bar. It should be really simple, but I need help. Sorry for making it so long, I just didn't want to leave anything out.
HTML:
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<title>noobyDev</title>
<style>
body {
background-color: CCFFFF;
text-align: center;
}
div.background
{
width: 90%;
height: 200px;
background color: #00FF66;
border: 2px solid black;
margin: 0 auto;
text-align: left;
}
div.background h3
{
margin: 0px 40px;
}
div.logo
{
width: 350px;
height: 75px;
background: url(logo.png);
margin: 30px 40px;
}
div.nav
{
background-color: #00CC66;
border: 2px solid black;
width: 90%;
margin: 0 auto;
text-align: left;
height: 30px;
border-top: 0px solid black;
}
.menu
{
margin: 5px 10px;
background: #00CC66;
color: black;
-webkit-transition: color;
}
.menu:hover
{
color: red;
}
div.center
{
width: 90%;
height: 700px;
background color: white;
border: 2px solid black;
border-top: 0px solid black;
margin: 0 auto;
text-align: left;
}
div.column1 h1
{
margin: 30px 40px;
}
div.column1 p
{
margin: 30px 40px;
}
div.column1
{
width: 70%;
height: 100%;
float: left;
display: block;
border-right: 2px solid black;
}
div.column2
{
width: 30%
height: 100%;
float: left;
display: block;
text-align: left;
}
div.column2 a
{
margin: 30px 40px;
display: block;
text-decoration: none;
font-size: 30px;
font-color: black;
}
div.legal
{
width:90%;
height: 50px;
background color: white;
border: 2px solid black;
border-top: 0px solid black;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="background">
<div class="logo">
</div>
<h3>Have you failed today?</h3>
</div>
<div class="nav">
<a style=text-decoration="none" href="index.html" class="menu">Home</a>
<a style=text-decoration="none" href="html.html" class="menu">HTML</a>
<a style=text-decoration="none" href="javascript.html" class="menu">Javascript</a>
<a style=text-decoration="none" href="css.html" class="menu">CSS</a>
<a style=text-decoration="none" href="java.html" class="menu">Java</a>
<a style=text-decoration="none" href="news.html" class="menu">News</a>
<a style=text-decoration="none" href="games.html" class="menu">Games</a>
<a style=text-decoration="none" href="other.html" class="menu">Other</a>
</font>
</div>
<div class="center">
<div class="column1">
<h1>Home</h1>
<br>
<p>Welcome to noobyDev.com! This is my site where I document all of my fails and successes worth sharing. Feel free to use them unless otherwise instructed to do so. Check back often and admire my awesomeness!</p>
</div>
<div class="column2">
Video?
</div>
</div>
<div class="legal">
<p>This site is heavily protected with a gargantuan army of mutant cotton balls; I would recommend not stirring trouble up. Just so you know, this site looks the best in Internet Explorer.</p>
</div>
</body>
</html>
Just add a line-height to div.nav:
div.nav
{
background-color: #00CC66;
border: 2px solid black;
width: 90%;
margin: 0 auto;
text-align: left;
height: 30px;
line-height: 30px;
}
Here's the JS Bin to test: http://jsbin.com/oliwit/1/
There are generally a lot of misconceptions on how to utilize the vertical-align within CSS, I found this post very helpful on how to get a full understanding of it... http://phrogz.net/css/vertical-align/
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background: #00BFFF;
font-family: "Candara";
src: url(data/candara.ttf);
}
#wrapper {
margin: 0 auto;
width: 800px;
padding: 15px;
}
#wrapper:after {
content: ".";
display: block;
clear: both;
height: 0;
overflow: hidden;
}
#header {
display: block;
background-color: blue;
}
#header .left {
display: inline-block;
padding: 15px 25px;
float: left;
}
#header .left h1{
display: inline-block;
font-weight: bold;
}
#header .right {
float: right;
display: inline-block;
}
#header .right span{
display: block;
}
#page {
display: block;
float: left;
}
#page .box{
display: inline-block;
background: black;
float: left;
}
#header, .box {
background: blue;
opacity: 0.7;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="left">
<h1>Title</h1>
</div>
<div class="right">
<span><b>needle:</b> <?php //echo $haystack; ?></span>
<span><b>needle:</b> <?php //echo $haystack; ?></span>
<span><b>Last update:</b> <?php //echo $lastupdate; ?></span>
</div>
</div>
<div id="page">
<div class="left box">
Heey mannn
</div>
</div>
</div>
</body>
</html>
This is the design im aiming for, but its not working at all, instead, i get this.
And i don't know what im doing wrong, i realy don't. Can you guys help me? All the things i want are in the image. And the red areas are just to mark that i want those boxes there. I also made a jsfiddle with the code. If anything is unclear, leave a comment please, instead of just thumbing it down, because its realy hard to explain...
If you want a transparent background, use rgba or hsla colors.
Example:
background-color: rgba(0, 0, 255, 0.7); /* Blue, opacity 0.7*/
Here's code, which renders what you have in your design image. Tested only in Chrome. This is not optimal nor an optimized solution but should let you continue with your design.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body {
background: #00BFFF;
font-family: "Candara";
src: url(data/candara.ttf);
}
#wrapper {
margin: 0 auto;
width: 800px;
}
#header {
width: 720px;
height: 100px;
margin-top: 20px;
padding: 10px 40px;
background: rgba(0, 0, 255, 0.7);
-webkit-border-radius: 13px;
border-radius: 13px;
}
.title_area {
float: left;
width: 300px;
margin-top: 12px;
padding: 25px 25px;
background: #f00;
-webkit-border-radius: 13px;
border-radius: 13px;
}
#header .info_area {
float: right;
width: 200px;
height: 60px;
margin-top: 30px;
padding: 5px;
background: #f00;
-webkit-border-radius: 13px;
border-radius: 13px;
}
#page {
clear: both;
margin: 20px 0px;
}
.content {
float: left;
width: 380px;
height: 500px;
padding: 20px;
background: rgba(0, 0, 255, 0.7);
-webkit-border-radius: 13px;
border-radius: 13px;
}
.up_right {
float: left;
width: 320px;
height: 240px;
margin-left: 20px;
margin-bottom: 20px;
padding: 20px;
background: rgba(0, 0, 255, 0.7);
-webkit-border-radius: 11px;
border-radius: 11px;
}
.down_right {
float: left;
width: 320px;
height: 200px;
margin-left: 20px;
padding: 20px;
background: rgba(0, 0, 255, 0.7);
-webkit-border-radius: 11px;
border-radius: 11px;
}
.close {
clear: both;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="title_area">
<h1>Title</h1>
</div>
<div class="info_area">
<div><b>needle:</b> <?php //echo $haystack; ?></div>
<div><b>needle:</b> <?php //echo $haystack; ?></div>
<div><b>Last update:</b> <?php //echo $lastupdate; ?></div>
</div>
</div>
<div id="page">
<div class="content">
Heey mannn
</div>
<div class="up_right">
Hou hou
</div>
<div class="down_right">
Yeah
</div>
<div class="close"></div>
</div>
</div>
</body>
</html>
rgba is a good solution, but
It might be cross browser issue as well
try this, instead of just opacity:0.7
opacity: 0.7;
-moz-opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);
Problem:
https://postimg.cc/image/tunhwh8qj/
The trouble I am currently having is that the border around my body is not outlining everything. As I have recently learned I'm guessing this means an element is out of the flow due to floating? However I am not certain how to fix it in this case.
My html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="swaggersstyle.css">
<title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<img src="final.jpg" id="banner">
<ul id="nav">
<li class="links">Home</li>
<li class="links">Location</li>
<li class="links">Facilities</li>
<li class="links">Attractions</li>
<li id = "endlink">Bookings</li>
</ul>
<div id="leftcolumn">
<p>hghadgadgadg</p>
<p>easfasf</p>
<p>safSFS</p>
<p>afafafadf</p>
<p>safasf</p>
<p>saasfasf</p>
<p>fasfsaf</p>
</div>
<div id="mainc">
<p>Make Yourself at Home</p>
<p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>
<div class="slideshow">
<img src="1.jpg" width="600" height="450" />
<img src="2.jpg" width="600" height="450" />
<img src="3.jpg" width="600" height="450" />
</div>
</div>
<div id ="footer">
<p> fsafasfasf </p>
</div>
</body>
</html>
and my CSS is:
html{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
body{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
height: 100%;
}
#banner{
padding: 0px;
margin: 0;
display: block;
}
#nav {
list-style-type: none;
padding: 0px;
margin: 0px;
overflow: hidden;
border-bottom: 1px solid #7f7f7f;
border-top: 1px solid #7f7f7f;
}
#mainc {
float: left;
width: 654px;
background-color: white;
margin: 0;
padding-left: 8px;
padding-right: 4px;
height: 100%;
}
#leftcolumn {
padding-left: 3px;
float: left;
background-color: #dad8bf;
width: 290px;
border-right: 1px solid #7f7f7f;
height: 100%;
}
#footer {
clear: both;
position: relative;
bottom: 0.5px;
margin: 0;
background-color: #dad8bf;
border-top: 1px solid #7f7f7f;
}
#footer p{
margin: 0;
}
.links {
float: left;
margin: 0px;
border-right: 1px solid #7f7f7f;
}
#endlink {
float: left;
margin: 0px;
border-right: none;
}
#lastlink{
display: block;
width: 184px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
#lastlink:hover{
background-color: #999999;
}
a:link {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:visited {
display: block;
width: 183px;
font-weight: bold;
color: #444444;
background-color: #dad8bf;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
margin-top: 0px;
}
a:hover {
background-color: #999999;
}
a:active{
background-color: #999999;
}
.slideshow {
height: 483px;
width: 632px;
margin: auto;
padding: 0px;
}
.slideshow img {
padding: 0px;
border: 1px solid #ccc;
background-color: #eee;
}
thanks in advance guys!!
This is happening because your body has fix height of 100%.Change body tag css as:
height:auto;
min-height: 100%
if this doesn't work then add following with this:
overflow:auto;
Probably better NOT to use the body element for your container. Instead, just add
<div class="container"></div>
around your code and in your CSS changehtml to body and body to div.container.
body{
font-family: sans-serif;
background-color:#464E54;
height: 100%;
}
div.container{
width: 960px;
margin: auto;
background-color: white;
border: 3px solid black;
padding: 0;
}
Edit: I completely missed the 100%, that's gotta be it.
Add overflow: hidden to your body element. When elements are floated it will not push the parent container height past it unless there is a clearer