Recently I have the problem that when I click the download button it always open not Download the File(RAR)
Here's the Web hope you can help me guys fixing this problem cause I'm good at making the button or a function
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding:0:;
margin:0;
background-color:#f4f4f4;
}
/* Global */
.container{
width:80%;
margin:auto;
overflow:hidden;
}
header ul{
margin:0;
padding:0;
}
.button_1{
height: 38px;
background: #1b3f8b;
border: none;
padding-left: 20px;
padding-right: 20px;
color: white;
}
.dark{
padding: 15px;
background:#35424a;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
h6{
text-align:right;
}
/* Header */
header{
background:#B3E8FF;
color:#FFFFFF;
padding-top:30px;
min-height:70px;
padding-bottom:0;
border-bottom:#80D9FF 3px solid;
}
header a{
color:white;
text-decoration:none;
text-transform:uppercase;
font-size:16px;
}
header li{
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header #branding{
float:left;
}
header #branding h1{
margin-top:0;
margin-bottom:10px;
}
header nav{
float:right;
margin-top:10px;
}
header .highlight , header .current a{
color:#1b3f8b;
font-weight:bold;
}
header a:hover{
color:#cccccc;
color-weight:bold;
}
/*showcase*/
#showcase{
min-height: 650px;
background: url('../img/showcase.png') no-repeat 0 -5px;
text-align: center;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
color: #ffffff;
}
#showcase h1{
margin-top: 330px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p{
font-size: 20px;
}
/*newsletter*/
#newsletter{
padding: 15px;
background: #B3E8FF;
color: #ffffff;
}
#newsletter h1{
float: left;
}
#newsletter form{
float: right;
margin-top: 15px;
}
#newsletter input[type="email"]{
padding: 4px;
height: 25px;
width: 250px;
}
/*boxes*/
#boxes{
margin-top: 20px;
}
#boxes .box{
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
#boxes .box img{
width: 200px;
}
#boxes h1{
text-align: center;
}
/*sidebar*/
aside#sidebar{
float:right;
width:30%;
margin-top:10px;
}
/*main-col*/
article#main-col{
float:left;
width:65%;
}
footer{
padding: 20px;
margin-top: 20px;
color: #1b3f8b;
background-color:#B3E8FF;
text-align: center;
font-size: 20px;
}
/*Repaint Gallery*/
.gallery img{
width:350px;
height:140px;
}
th{
font-size: 2em;
background-color:#35424a;
color:white;
}
td{
padding:25px;
text-align: center;
}
#repaintgallery table{
width: 100%;
margin:auto;
height: 100%;
}
/*Download Button*/
.download{
width:120px;
height:30px;
font-size:20px;
text-align:center;
background:#35424a;
border:none;
color:white;
display: inline-block;
text-decoration: none;
}
/*Media Queries*/
#media(max-width: 768px){
header #branding,
header nav,
header nav li,
#newsletter h1,
#boxes .box,
article#main-col,
aside#sidebar,
#newsletter form, #repaintgallery table{
float:none;
text-align:center;
width: 100%;
}
header{
padding-bottom: 20px;
}
#showcase h1{
margin-top: 40px;
}
#newsletter form button{
display:block;
width: 510px;
margin:auto;
}
#newsletter form input[type="email"]{
width:500px;
margin-bottom:5px;
}
#repaintgallery img{
width:170px;
height:85px;
margin:auto;
}
#repaintgallery table{
display: block;
}
.download {
width:60px;
height:25px;
font-size:10px;
text-align:center;
background:#35424a;
border:none;
color:white;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="google-site-verification" content="kvxETPFss98nnIOWhaBbkHlKLAr3--nT5321XnFUVUg" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="FSX Repaints">
<meta name="keywords" content="fsx, repaints, project airbus, just flight, pmdg, captainsim, premier airraft design, pad, airlines, project opensky, posky, tom's ruth">
<meta name="author" content="Raven Lescano">
<title>Repaints | Raven's Hangar</title>
<link rel="stylesheet" href="./css/style.css" type="text/css">
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<!-- favicon -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="favicon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="favicon/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="favicon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="favicon/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="favicon/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon/favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">RAVEN'S</span> HANGAR</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li class="current">Repaints</li>
<li>About Us</li>
</ul>
</nav>
</header>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Newsletter</h1>
<form>
<input type="email" placeholder="Enter Email....." ="">
<button type="submit" class="button_1">Subscibe</button>
</form>
</div>
</section>
<section id="repaintgallery">
<div class="gallery">
<table>
<tr>
<th colspan="3">Repaints</th>
</tr>
<tr>
<td><img src="img/template7.png" alt=""><a class="download" href="repaints/tnc.rar" download>Download</a></td>
<td><img src="img/template9.png" alt=""><a class="download" href="repaints/agn.rar" download>Download</a></td>
<td><img src="img/template10.png" alt=""><a class="download" href="repaints/cen.rar" download>Download</a></td>
</tr>
<tr>
<td><img src="img/template3.png" alt=""><a class="download" href="repaints/ph.rar" download>Download</a></td>
<td><img src="img/template11.png" alt=""><a class="download" href="repaints/usao.rar" download>Download</a></td>
<td><img src="img/template17.png" alt=""><a class="download" href="repaints/ma.rar" download="ma.rar">Download</a></td>
</tr>
<tr>
<td><img src="img/template15.png" alt=""><a class="download" href="repaints/PH75th.rar" download>Download</a></td>
<td><img src="img/template16.png" alt=""><a class="download" href="repaints/CEBN.rar" download>Download</a></td>
</tr>
<tr>
<td><img src="img/template12.png" alt=""><a class="download" href="repaints/bin.rar" download>Download</a></td>
<td><img src="img/template13.png" alt=""><a class="download" href="repaints/as.rar" download>Download</a></td>
<td><img src="img/template14.png" alt=""><a class="download" href="repaints/001.rar" download>Download</a></td>
</tr>
</table>
</div>
</section>
<footer>
<p>Raven's Hangar, Copyright © 2017</p>
</footer>
</body>
</head>
</html>
IMG
[https://i.stack.imgur.com/TGoFg.jpg][1]
Try Here
[https://ravens-hangar.tk/repaints.html][1]
If you use html tag for link. just add a extra attribute download with it.
thats mean you can write
<a href="sample.jpg" download></a>
now file will prompt to download file with name sample.jpg
if you give value to download like;
then file will prompt to download with new name demo.jpg
try it and inform me about your problem.
Related
Specific posts on my Tumblr page keep bleeding into to the theme background. It is only happening with posts that include both images and text, however not with each one of them. I've tried everything I could to fix it but it has only made it worse.
I have also tried changing my overflow tag to hidden from visible but all it does is cut off the overflowed part instead of stopping the overflow.
This is what it looks like:
text overflowing
image overflowing
Here are the codes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- Theme by conkersradfurday, massively edited from destroyer's theme
-->
<html>
<head>
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#e5e5e5"/>
<meta name="color:center background" content="#ffffff"/>
<meta name="color:post" content="#f9d6b6"/>
<meta name="color:sidebar" content="#ffffff"/>
<meta name="color:interests title" content="#ffffff"/>
<meta name="color:sidebox" content="#ffffff"/>
<meta name="color:sidebox border" content="#6699cc"/>
<meta name="color:sidebox left" content="#B0CFF0"/>
<meta name="color:sidebox right" content="#D3E7FB"/>
<meta name="color:sidebox bold:" content="#39658c"/>
<meta name="color:Orange Text" content="#ff6600"/>
<meta name="color:Orange Background" content="#ffcc99"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:text headers" content="#000000"/>
<meta name="color:bold text" content="#000000"/>
<meta name="color:label background" content="#f4f4f4"/>
<meta name="color:link" content="#003399"/>
<meta name="color:link hover" content="#cc0000"/>
<meta name="color:notes" content="#464646"/>
<meta name="color:notes hover" content="#949494"/>
<meta name="color:nav link" content="#ffffff"/>
<meta name="color:nav link hover" content="#000000"/>
<meta name="color:nav background" content="#6697cf"/>
<meta name="color:header background" content="#003399"/>
<meta name="color:asker background" content="#FF9933"/>
<meta name="text:Sex" content="Female"/>
<meta name="text:Age" content="15 Years Old"/>
<meta name="text:City" content="Hollywood"/>
<meta name="text:Country" content="California"/>
<meta name="text:Music" content=""/>
<meta name="text:Movies" content=""/>
<meta name="text:Tv" content=""/>
<meta name="text:Books" content=""/>
<meta name="text:Heroes" content=""/>
<meta name="text:Headline" content="I'm back<br>on MySpace!"/>
<meta name="text:Background Size" content="25%" />
<meta name="text:Profile Song" content="http://mp3.qqkjkl.com/mp3/18/30336027.mp3" />
<meta name="text:Mood" content="Nostalgic" />
<meta name="text:Status" content="Single"/>
<meta name="text:Orientation" content="Bisexual"/>
<meta name="text:Ethnicity" content="r"/>
<meta name="text:Religion" content=""/>
<meta name="text:Occupation" content=""/>
<meta name="image:Portrait" content=""/>
<meta name="image:Background" content=""/>
<meta name="if:Show Infinite Scroll" content="1" />
<meta name="if:Show Photo Caption" content="1" />
<meta name="font:Header Title" content="'Verdana', Impact, Gadget, sans-serif, Arial, Trebuchet MS, Helvetica, Tahoma, sans-serif" />
<meta name="font:Body" content="'verdana', arial, Trebuchet MS, Helvetica, Tahoma, sans-serif" />
<meta name="text:Custom Link One" content="" />
<meta name="text:Custom Link One Title" content="" />
<meta name="text:Custom Link Two" content="" />
<meta name="text:Custom Link Two Title" content="" />
<meta name="text:Custom Link Three" content="" />
<meta name="text:Custom Link Three Title" content="" />
<meta name="text:Custom Link Four" content="" />
<meta name="text:Custom Link Four Title" content="" />
<title>{Title}</title>
<link rel="stylesheet" href="http://static.tumblr.com/usaykzx/o8Bku9w35/reset.css" type="text/css" />
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
{block:IfShowInfiniteScroll}<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:IfShowInfiniteScroll}
<style type="text/css">
body{
margin-top:0px;
text-align:justify;
color: {color:Text};
font-family: {font:Body};
font-size: 11px;
line-height: 12px;
background-color:{color:Background};
background-image:url({image:Background});
background-attachment: repeat;
background-position:top left;
background-repeat: repeat;
background-size:{text:Background Size};{text:Background Size}
}
a, a:link, a:visited, a:active{color: {color:link}; text-decoration:none;
font-family: {font:Body};
font-size: 11px; line-height:12px; }
a:hover{color: {color:link hover}; line-height:12px;}
#tumblr_controls{
position:fixed!important;}
b, strong{color: {color:bold text};
font-family: {font:Body};
font-size: 11px; line-height:12px;}
#wtf {
background-color:{color:center background};
margin-top:0px;
width:750px;
overflow: visible;
margin-left: -375px;
left:50%;
position: absolute;
padding-top:10px;
color: {color:Text};
font-family: {font:Body};
font-size: 11px;
line-height: 12px;}
#entry {
background-color: {color:post};
border: 0px solid {color:post};
z-index:6;
float:right;
overflow:visible;
width:400px;
height: auto;
padding: 6px;
margin:0px 10px 6px 0px;}
#sidebar {
position: absolute;
overflow:hidden;
margin-top: 0px;
margin-left:-364px;
left: 50%;
background-color:{color:sidebar};
width: 304px;
height: auto;
padding: 0px;}
#sidebox {
border-top:20px solid {color:sidebox border};
border-left:2px solid {color:sidebox border};
border-right:2px solid {color:sidebox border};
border-bottom:2px solid {color:sidebox border};
overflow:hidden;
margin-top: 0px;
background-color:{color:sidebox};
width: 300px;
height: auto;
padding: 0px;}
#sidebox b {color:{color:sidebox bold};}
#info {
background-color: {color:post};
border: 0px solid {color:post};
z-index:6;
float:right;
overflow:visible;
width:400px;
height: auto;
padding: 6px;
margin:0px 10px 6px 0px;}
#notes {
background-color: {color:post};
border: 0px solid {color:post};
z-index:6;
float:right;
overflow:visible;
width:400px;
height: auto;
padding: 6px;
margin:0px 10px 6px 0px;}
#entry img { max-width:400px;}
p{
margin-top:0px;
margin-bottom:0px;}
#question{
overflow:SHOW;
padding-bottom:3px;
margin-bottom:3px;}
#askr{
display:block;
float:left;
width:33px;
overflow:hidden;
margin-right:3px;}
ul {
list-style: disc;
padding: 4px 0px 6px 20px;}
blockquote{padding:0px; padding-left:5px; margin:5px; border-left:2px solid {color:label background};}
blockquote img{display:block; width:100%;}
blockquote p{padding:0px; margin:0px;}
blockquote blockquote{position:relative; left:6px; margin-top:0px; margin-right:0px; padding-right:0px;}
#bottominfo{
padding:2px 0px 0px 0px;
display:block;}
.answer p{margin:0px;}
.notes img{
width:10px;
position:relative;
top:1px;}
ol.notes, .notes li{
list-style:none;
margin:0px;
padding:0px;}
small {font-size:8px; line-height:8px; letter-spacing:0px;}
big {font-family:arial black; color:{color:text}; font-size:14px;}
.audio {width:100%; background:black; border:0px dotted #D6D6D6;}
a img{border:none;}
.label {
color: {color:bold text};font-weight: bold; line-height:12px;}
.odd {
background-color:{color:label background};}
h1 {
font-size: 12px;
line-height: 12px;
font-family: verdana;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
color:{color:text headers};
text-align: left;
margin:0px;
padding-bottom:1px;}
h2 {
font-size: 16px;
line-height: 16px;
font-family: impact;
font-weight:normal;
text-transform: uppercase;
letter-spacing: -1px;
color:{color:text headers};
text-align:left;}
h3 {
font-size: 18px;
line-height: 20px;
font-family: {font:Header Title};
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
color:{color:text headers};
text-align: left;
margin:0px;
padding-bottom:4px;}
h4 {
font-size: 12px;
line-height: 12px;
font-family: {font:Header Title};
font-weight: bold;
text-transform: capitalize;
letter-spacing: -1px;
color: {color:Orange Text};
text-align: left;
margin:0px;
padding-bottom:4px;}
h5 {
font-size: 12px;
line-height: 12px;
font-family: {font:Header Title};
font-weight: bold;
text-transform: capitalize;
letter-spacing: -1px;
color: {color:interests title};
text-align: left;
margin:0px;}
a.links1 {
text-align:center;
margin-top:6px;
margin-bottom:8px;
color: {color:nav link};
display: inline-block;
text-transform: capitalize;
font-family:arial;
font-weight:normal;
font-size:12px;
padding: 2px;}
a.links1:hover {
color: {color:nav link hover};}
#ask {
font-size:12px;
line-height:12px;
padding:4px;
margin-bottom:4px;}
img.middle {
vertical-align:middle;
margin-bottom:3px;}
#notez {
margin-top: 0px; margin-bottom:4px; width:400px;}
#notez a {
font-family: arial;
font-size: 9px;
line-height: 10px;
letter-spacing:1px;
text-transform: normal;}
table {
border-collapse: separate;
border-spacing: 3px;}
#header1 {
padding:4px;
margin-left:328px;
margin-bottom:6px;
width:404px;
height: 12px;
background-color:{color:Orange Background};}
#header2 {
padding:4px;
margin-left:328px;
margin-bottom:6px;
width:404px;}
#header3 {
padding:4px;
margin-left:328px;
margin-bottom:6px;
width:404px;
border-style: solid;
border-width: 2px;
border-color:#000;}
#myspaceheader {
width:750px;
height:81px;
background-color:{color:header background};
margin-left: auto;
margin-right: auto;}
{CustomCSS}
#navigation {
width:750px;
height:30px;
background-color:{color:nav background};
margin-left: auto;
margin-right: auto;}
{CustomCSS}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
</head>
<body>
<div id="myspaceheader">
<div align=right><font color="white">Sign Up</font></div>
<div align=center><form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/>
<input type="submit" value="Search"/>
</form></div>
<div align=left><img src="http://i.imgur.com/MKqRxyf.png" title="Join the MySpace rebirth!" /></div>
</div>
<div id="navigation">
<center>
Home |
{block:AskEnabled}Ask{/block:AskEnabled} |
Archive|
{block:SubmissionsEnabled}Submit{/block:SubmissionsEnabled}|
{block:HasPages}
{block:Pages}
{Label}
{/block:Pages}
{/block:HasPages}
{block:ifCustomLinkOneTitle}{text:Custom Link One Title}{/block:ifCustomLinkOneTitle} |
{block:ifCustomLinkTwoTitle}{text:Custom Link Two Title}{/block:ifCustomLinkTwoTitle} |
{block:ifCustomLinkThreeTitle}{text:Custom Link Three Title}{/block:ifCustomLinkThreeTitle} |
{block:ifCustomLinkFourTitle}{text:Custom Link Four Title}{/block:ifCustomLinkFourTitle}
</center>
</div>
<div id="wtf">
<div id="sidebar">
<h3>{Title}</h3>
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div style="clear:both;">
<div style="float:left;">
{block:IfPortraitImage}
<img src="{image:Portrait}" width="200">
{/block:IfPortraitImage}
</div>
<div style="float:right;">
<div style="margin-left:8px;">
"{text:Headline}" <br> <br>
{text:Sex} <br>
{text:Age} <br>
{text:City} <br>
{text:Country} <br><br>
<img src="http://media.tumblr.com/tumblr_m2lh9lgwvA1qaxq5z.gif">
</div>
</div>
</div>
</td>
</tr>
</table><br>
Last Login: <script type="text/javascript">
<!--
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(month + "/" + day + "/" + year)
//-->
</script>
<br><br>
<b><color="{color:post}">Mood:</color></b> {text:mood}</a>
<br>
View My: <b>Pics</b> | <b>Archive</b>
<br>
<br>
<div id="sidebox">
<div style="position:absolute; margin-top:-16px; "><h5>Contact {title}</h5></div>
<table width="300" border="0" cellspacing="6" cellpadding="0">
<tr>
<td width="150" align="left"><img src="http://i.imgur.com/J4RAuTM.gif" /></td>
<td width="150"><img src="http://i.imgur.com/UCOmMMp.gif"></a></td>
</tr>
<tr>
<td width="150" align="left"><img src="http://i.imgur.com/dtwze3M.gif" /></td>
<td width="150"><img src="http://i.imgur.com/QYs8aR4.gif"></a></td>
</tr>
</table>
</div><br>
<br>
<br>
<div style="border:1px solid {color:sidebox border}; width:302px;">
<h1>MySpace URL:</h1>
http://{name}.tumblr.com
</div><br>
<br>
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="295" height="51">
<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="FlashVars" value="mp3={text:Profile Song}&width=295&height=51&buttonwidth=54&sliderwidth=40&skin=http%3A//i.imgur.com/uh9op43.jpg&sliderovercolor=310057&buttoncolor=140014&buttonovercolor=fcfcfc" />
</object>
<config>
<param name="mp3" value="{text:Profile Song}"/>
<param name="width" value="295"/>
<param name="height" value="51"/>
<param name="buttonwidth" value="54"/>
<param name="sliderwidth" value="40"/>
<param name="skin" value="http%3A//i.imgur.com/uh9op43.jpg"/>
<param name="sliderovercolor" value="310057"/>
<param name="buttoncolor" value="140014"/>
<param name="buttonovercolor" value="fcfcfc"/>
</config>
<br><br>
<div id="sidebox">
<div style="position:absolute; margin-top:-16px; "><h5>{title}'s interests</h5></div>
<table width="300" border="0" cellspacing="6" cellpadding="0">
<tr>
<td width="100" align="left" bgcolor="{color:sidebox left}"><b>Music:</b></td>
<td width="188" bgcolor="{color:sidebox right}">{text:Music}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Movies:</b></td>
<td bgcolor="{color:sidebox right}">{text:Movies}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Television:</b></td>
<td bgcolor="{color:sidebox right}">{text:TV}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Books:</b></td>
<td bgcolor="{color:sidebox right}">{text:Books}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Heroes:</b></td>
<td bgcolor="{color:sidebox right}">{text:Heroes}</td>
</tr>
</table>
</div><br>
<div id="sidebox">
<div style="position:absolute; margin-top:-16px; "><h5>{title}'s Details</h5></div>
<table width="300" border="0" cellspacing="6" cellpadding="0">
<tr>
<td width="100" align="left" bgcolor="{color:sidebox left}"><b>Status:</b></td>
<td width="188" bgcolor="{color:sidebox right}">{text:Status}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Orientation:</b></td>
<td bgcolor="{color:sidebox right}">{text:Orientation}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Ethnicity:</b></td>
<td bgcolor="{color:sidebox right}">{text:Ethnicity}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Religion:</b></td>
<td bgcolor="{color:sidebox right}">{text:Religion}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Occupation:</b></td>
<td bgcolor="{color:sidebox right}">{text:Occupation}</td>
</tr>
</table>
</div>
</div>
<div id="header3"><br><br><center><b><color="{color:post}"></color><font style="font-size:16px!important;">{title} is in your extended network.</b></center><br><br></font></div>
<div id="header1"><h4>{title}'s Blurbs</h4></div>
<div id="header2">
{block:Description}<h4>About Me:</h4> {Description}<br><br>{/block:Description}
</div>
<div id="header1"><h4>{title}'s Posts</h4></div>
<div class="autopagerize_page_element">
{block:Posts}
<div id="entry">
{block:IndexPage}
<div id="notez">
<h1>{ShortMonth} {DayOfMonth} {Year} {12Hour}:{Minutes} {AmPm}</h1>
{NoteCount} Notes - View Post - Reblog
</div>
{/block:IndexPage}
{block:Text}<h2>{Title}</h2>{Body}{/block:Text}
{block:Photo}
{block:IndexPage}
<center><img src="{PhotoURL-500}" width="400" border="0"></center>
{block:IfShowPhotoCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowPhotoCaption}
{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" width="400" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:Photo}
{block:Photoset}<center>{block:IndexPage}{Photoset-400}{/block:IndexPage}{block:PermalinkPage}{Photoset-400}{/block:PermalinkPage}</center>{block:PermalinkPage}{/block:PermalinkPage}
{block:IfShowPhotoCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowPhotoCaption}
{/block:Photoset}
{block:Quote}<h2>"{Quote}"</h2>{block:Source}{Source}{/block:Source}{/block:Quote}
{block:Link}<a href="{URL}" class="link" {Target}><h2>{Name}</h2></a>{block:Description}{Description}{/block:Description}{/block:Link}
{block:Chat}
{block:Title}{Title}{/block:Title}
{block:Lines}
{block:Label}
<div class="{Alt}"><span class="label"><strong>{Label}</strong></span>
<span class="line">{Line}</span></div>
{/block:Label}
{/block:Lines}
{/block:Chat}
{block:Video}<center>{block:IndexPage}<div id="video">{Video-400}</div>{block:IfNotHidePhotoCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfNotHidePhotoCaption}{/block:IndexPage}<img src="http://i.imgur.com/hR6o8o2.png"/>
{block:PermalinkPage}<div id="video">{Video-400}</div>{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}</center>
{/block:Video}
{block:Audio}
<center><div class="audio">{AudioPlayerBlack}</div></center>
{block:Caption}{Caption}{/block:Caption}
{/block:Audio}
{block:Answer}
<table style="border-bottom:1px solid #a0a0a0;padding-bottom:5px;margin-bottom:5px;">
<tr>
<td style="vertical-align:top;padding-right:30px;padding-left:30px;padding-top:10px;padding-bottom:30px" bgcolor={color:asker background}><b>{Asker}</b><br><br><img src="{AskerPortraitURL-96}"></td>
<td style="vertical-align:top;"><strong></strong><br>{Question}</td>
</tr>
</table>
{Answer}
{/block:Answer}
</div>
{block:PermalinkPage}
{block:Date}
<div id="info"><div id="bottominfo">
Posted: {ShortDayOfWeek} {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} at {12Hour}:{Minutes}{AmPm}{block:RebloggedFrom}<br>Originally posted by {ReblogRootName}.{/block:RebloggedFrom}
{block:Photo}{block:HighRes}<br>HighRes: view{/block:HighRes}{/block:Photo}
{block:Answer}<BR>Ask: {AskLabel}{/block:Answer}
{block:Audio}<BR>Plays: {FormattedPlayCount}{block:ExternalAudio}<BR>Download: here.{/block:ExternalAudio}{/block:Audio}
{block:HasTags}<BR>Tagged: {block:Tags}{Tag} {/block:Tags}{/block:HasTags}{block:NoteCount}<BR>Notes: {NoteCount}{/block:NoteCount}
</div></div>
{/block:Date}
{/block:PermalinkPage}
{block:PostNotes}
<div id="notes">{PostNotes}</div>
{/block:PostNotes}
{/block:Posts}
</div> </*Infinite Scroll*/>
{block:Pagination}
<div id="entry">
<center> <table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200">
{block:PreviousPage}<div align="left">◄ Previous</div>{/block:PreviousPage}
</td>
<td width="200">{block:NextPage}<div align="right">Next ►</div>{/block:NextPage}
</td>
</tr>
</table></center>
</div>
{/block:Pagination}
<center><img src="http://media.tumblr.com/tumblr_m2lokcAnTG1qaxq5z.png" width="750" height="2"><br></center>
<center><small>©2003-<script type="text/javascript">
<!--
var year = currentTime.getFullYear()
document.write(year)
//-->
</script> MySpace.com. Theme by conkersradfurday. All Rights Reserved. </small></center>
<style type="text/css">
ul#likes {
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
li.like_post {
/* Should match the width specified in the Likes tag */
width: 150px;
padding: 0 40px 0 0;
float: left;
}
li.like_post img {
max-width: 100%;
}
li.like_post blockquote {
margin: 0;
padding: 0 0 0 10px;
border-left: 1px solid #eee;
}
li.like_post ol,
li.like_post ul {
margin: 0 0 0 15px;
padding: 0;
}
li.like_post .like_link a {
font-weight: bold;
}
li.like_post .like_title {
font-weight: bold;
}
li.like_post .post_info_bottom {
margin: 10px 0 0 0;
display: block !important;
}
</style>
</head>
</html>
So I have a span element that is near an image. The surrounding elements have no padding or margin that would block it. But for some reason, the image is messing it up. I can't change the image's CSS to position: absolute; as it ends up screwing the dimensions, and it messes up the responsiveness.
In the Stack Overflow version, it seems fine, but as soon as you scale it up, it looks odd.
body{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.pfp{
width:4%;
height:4%;
border-radius:50%;
margin:0;
padding:0;
}
.name{
vertical-align: top;
margin:.5%;
margin-right:.2%;
font-weight: bold;
}
.user-tag{
vertical-align: top;
margin:0;
margin-right:.2%;
color:grey;
padding:0;
}
.date{
vertical-align: top;
margin:0%;
color:grey;
}
.text{
display:block;
margin-left:5%;
}
.tweet{
margin:3%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tweet">
<img class="pfp" src="https://walli.quosmos.com/files/thumbs/4/3/4/4347c0a1e9e62b48b3692aa0ea5707165f6c0f15/TesselationV__800_800.png"></img>
<span class="name">John Doe</span>
<span class="user-tag">#JohnDoe</span>
<span class="date">· Feb 25</span>
<span class="text">The image is also scaled oddly.</span>
</div>
<script src="script.js"></script>
</body>
</html>
Why is it sent downwards, and is there anyway to fix it?
I know it's a display:block; element, but if I don't give it that, it will appear on the same line as the info.
You can set the image (.pfp) height to 100%, so the width will be set automatically.
If you then also add a wrapper for the upper line and set the position to relative and its height to 2em it should have a nice height for one line of text and the image will never be to big.
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.pfp {
border-radius: 50%;
margin: 0;
padding: 0;
height: 100%;
}
.name {
vertical-align: top;
margin: .5%;
margin-right: .2%;
font-weight: bold;
}
.user-tag {
vertical-align: top;
margin: 0;
margin-right: .2%;
color: grey;
padding: 0;
}
.date {
vertical-align: top;
margin: 0%;
color: grey;
}
.text {
display: block;
margin-left: 5%;
}
.tweet {
margin: 3%;
}
.tweetheader {
position: relative;
height: 2em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tweet">
<div class="tweetheader">
<img class="pfp" src="https://walli.quosmos.com/files/thumbs/4/3/4/4347c0a1e9e62b48b3692aa0ea5707165f6c0f15/TesselationV__800_800.png"></img>
<span class="name">John Doe</span>
<span class="user-tag">#JohnDoe</span>
<span class="date">· Feb 25</span> </div>
<span class="text">The image is also scaled oddly.</span>
</div>
<script src="script.js"></script>
</body>
</html>
Is that what you are looking for?
body{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.pfp{
width:4%;
height:4%;
border-radius:50%;
margin:0;
padding:0;
}
.name{
vertical-align: top;
margin:.5%;
margin-right:.2%;
font-weight: bold;
}
.user-tag{
vertical-align: top;
margin:0;
margin-right:.2%;
color:grey;
padding:0;
}
.date{
vertical-align: top;
margin:0%;
color:grey;
}
.text{
display:block;
margin-left:5%;
}
.tweet{
margin:3%;
display: flex;
align-items: center;
justify-content: flex-start;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tweet">
<img class="pfp" src="https://walli.quosmos.com/files/thumbs/4/3/4/4347c0a1e9e62b48b3692aa0ea5707165f6c0f15/TesselationV__800_800.png"></img>
<span class="name">John Doe</span>
<span class="user-tag">#JohnDoe</span>
<span class="date">· Feb 25</span>
</div>
<span class="text">The image is also scaled oddly.</span>
<script src="script.js"></script>
</body>
</html>
I am trying to make a multi user website for Alaskan fishing reports. I am going to find people from different towns, villages/ cities to write reports on their area for other people to learn from. I want to know how to make a system that can keep all the usernames with the passwords assoctiated. I already got the login system done.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title> LOGIN Form</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<rel='stylesheet' type='text/css'>
<style>
body{
margin:0;
padding:0;
background:url("log.jpg");
background-size: cover;
font-family: sans-serif;
}
.log{ width:1366px;
height:696px;
}
.loginbox{ width: 320px;
height: 450px;
background: #000;
color: #fff;
top:20%;
left:36%;
position:absolute;
transform: translate{-50%,-50%}
box-sizing: border-box;
padding: 70px 30px;
opacity:.7;
}
.avatar{ width: 100px;
height: 100px;
border-radius:50%;
position:absolute;
top:-14%;
left:calc(50% - 50px);
}
h1{ margin:0;
padding: 0 0 20px;
text-align: center;
font-size: 30px;
font-family:AR JULIAN;
color:red;
}
.loginbox p{ margin:0;
padding: 0;
font-weight:bold;
}
.loginbox input{width: 100%;
margin-bottom:20px;
}
.loginbox input[type="text"], input[type="password"]{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline:none;
height:40px;
color:#fff;
font-size:16px;
}
.loginbox input[type="submit"]{
border: none;
outline:none;
height:40px;
background:#fb2525;
color: #fff;
font-size:18px;
border-radius:20px;
}
.loginbox input[type="submit"]:hover
{ cursor:pointer;
background:#ffc107;
color:#000;
}
.loginbox a{
text-decoration:none;
font-size:12px;
line-height:20px;
color: darkgrey;
}
.loginbox a:hover
{
color:#ffc107;
}
.active{
color:#fff;
background:#e02626;
border-radius:4px;
}
</style>
</head>
<body>
<img class="log">
<div class="loginbox">
<img src="avatar1.jpg" class="avatar">
<h1>Login to Alaska Fishing Reports</h1>
<form>
<p> Username</p>
<input type="text" name="" placeholder="Enter Username">
<p> Password</p>
<input type="password" name="" placeholder="Enter Password"><br>
<input type="submit" name="" value="Login">
Lost your password?<br>
Don't have an acoount?
</form>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax-utils.js"></script>
<script src="js/script.js"></script>
To create login page, you must learn server side programming, like PHP and MySQL. That might be little complicated and only with HTML CSS and JS you cannot create fully functioning login pages. You should also make security for your clients.
I am making a website for myself and I am having trouble with padding. The case I am working on involves showing a basic calculator in what ive done. The eventual goal is to have text show up upon hovering over the image, but for now the text on the image is at the top, when it needs to be in the middle.
Any comments about the code or ways to improve are greatly appreciated, and thank you very much for your help.
Also, after a little bit of research it occured to me to use the display:block, but that has not been working for me.
Thanks, Ian.
CODE:
body {
background-color: #EDEEEF;
}
#header {
width: 100%;
}
#container {
position: relative;
}
#text {
z-index: 100;
position: absolute;
font-size: 20px;
left: 50%;
height: 50px;
width: 15%;
top: 30px;
}
#text,
#text1,
#text2,
#text3 {
background-color: #FFF;
border-radius: 2px;
border: 2px;
font-family: 'Open Sans', sans-serif;
background: none;
color: #A4A4A4;
padding: 0;
}
button {
border-radius: 2px;
border: 2px;
background: none;
padding: 0;
}
button:hover {
color: #FFF;
font: #FFF;
border-radius: 5px;
border: 2px;
cursor: pointer;
}
#text:hover,
#text1:hover,
#text2:hover,
#text3:hover {
color: #EEE;
}
#text1 {
z-index: 100;
position: absolute;
font-size: 20px;
top: 30px;
width: 10%;
height: 50px;
left: 65%;
}
#text2 {
z-index: 100;
position: absolute;
font-size: 20px;
left: 75%;
top: 30px;
height: 50px;
width: 15%;
}
#text3 {
z-index: 100;
position: absolute;
font-size: 20px;
left: 90%;
top: 30px;
height: 50px;
width: 10%;
}
#AbM,
#Contact,
#CM {
font-family: 'EB Garamond', serif;
background-color: #FFF;
}
#PW {
background-color: #EDEEEF;
font-family: 'Open Sans', sans-serif;
#abtbackground-color: #EDEEEF;
}
#ABM {
width: 60%;
font-family: 'Open Sans', sans-serif;
}
#CM {
margin-left: 40%;
font-family: 'Open Sans', sans-serif;
}
#te {
border-bottom: 1px solid #000;
font-family: 'Open Sans', sans-serif;
display: inline;
left: 40%;
width: 40%;
}
#AbT,
#AbM,
#PW,
#Contact {
font-family: 'EB Garamond', serif;
color: #2F2F2F;
}
#ABM,
#PWW,
#te {
font-family: 'Open Sans', sans-serif;
}
.category {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
#ttt {
left: 200px;
padding-left: 200px;
}
#abs,
#aa {
display: inline-block;
}
#content {
display: block;
height: auto;
background-color: #EDEEEF;
}
#content > img {
float: center;
width: 15%;
height: auto;
display: block;
margin: 5px 30px;
}
#c1:hover,
#c2:hover {
-webkit-filter: brightness(50%);
opacity: 100%;
}
#BBB:hover ~ #c1 {
-webkit-filter: brightness(50%);
}
#BBB {
position: absolute;
font-size: 20px;
color: transparent;
top: 1375px;
width: 10%;
height: 50px;
left: 36%;
opacity: 0;
}
#B2 {
color: #FFF;
font-size: 20px;
font-family: 'EB Garamond', serif;
}
#onboard {
width: 15%;
float: center;
display: block;
height: 400px;
background: url(http://oi67.tinypic.com/2w50waa.jpg) 50% 0 no-repeat;
background-size: cover;
}
#onboard:hover {
-webkit-filter: brightness(50%);
}
#AN {
display: block;
font-family: 'EB Garamond', serif;
padding-top: 1000px;
}
#cal1 {
display: inline-block;
opacity: 0;
font-family: 'EB Garamond', serif;
padding-top: 100px;
}
#BAW {
font-size: 20px;
padding-top: 100px;
font-family: 'EB Garamond', serif;
}
<!DOCTYPE html>
<html>
<HEAD>
<title>Ian Winson</title>
<link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- <link rel="SHORTCUT ICON" HREF="favicon.png"> -->
<!-- ****** faviconit.com favicons ****** -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- ****** faviconit.com favicons ****** -->
</HEAD>
<body>
<header style="overflow:hidden; margin:0">
<div id="container">
<center>
<img src="http://i.imgur.com/p7jCsXM.jpg" width="100%"></img>
</center>
<font color="#2F2F2F" size="5"><button id="text" align="right" onClick="document.getElementById('ABT').scrollIntoView();" > ABOUT THIS WEBSITE</button>
<button id="text1" align="right" onClick="document.getElementById('ABM').scrollIntoView();"> ABOUT ME</button>
<button id="text2" align="right" onClick="document.getElementById('PW').scrollIntoView();">PROGRAMMING WORK</button>
<button id="text3" align="right" onClick="document.getElementById('Contact').scrollIntoView();">CONTACT</button>
</font>
</div>
</header>
<center>
<div id="AbT">
<font color="#2F2F2F" face="Garamond">
<br><br>
<h1>About This Website</h1>
<div id="ABM">
</font>
<font face="Open Sans">
<p>This Website was started in Early March 2016, and I intend for it to be my platform to post updates,
recent coding projects, resumes, and more. I am self taught in HTML, so my apologies if there are
any bugs
</p>
<br><br>
</font>
</div>
</div>
</center>
<center>
<div id="AbM" background-colo="pink">
<font color="#2F2F2F" face="Garamond">
<br><br>
<h1>About Me</h1>
<div id="ABM">
</font>
<font face="Open Sans">
<p>I'm a sophomore at Jesuit College Preperatory School in Dallas Texas(As of Early 2016).
I have been programming for ~2 years, and mainly know Java. I have made a few apps for android, none of which have been released.
I also have done some work programming for my FTC Robotics team, 9157. I am also a member of FRC team 2848.
</p>
<br><br>
</font>
</div>
</center>
<center>
<div id="PW">
<font color="#2F2F2F" face="Garamond">
<h1>Programming Work</h1>
<div id="PWW">
<font face="Open Sans">
<p>As previously mentioned, I mainly know Java, and this is my first big project in HTML.
I have made Java apps including:<br>
</div>
<div id="content">
<div id="onboard">
<div id="Cal1" <p id="AN">Basic</p><button id="AK"> Learn More</button>
</div>
</div>
<img id = "c2" src="http://oi68.tinypic.com/aax9vo.jpg" alt="" width="20%" />
<div id = "QQQ">
<p id = "Q1" style="padding-top: 150px;">Advanced Calculator</p>
<p id = "Q2"> Learn More</p>
</div>
</div>
</div>
</center>
</font>
<center>
<div id="Contact">
<font color="#2F2F2F" face="Garamond">
<br><br>
<h1>Contact Me</h1>
<div id="ABM">
</font>
<font face="Open Sans">
<p>If you are looking to contact me, please do it through the provided links below.<br>
<b>Questions</b><br>
Email: iankwinson#gmail.com<br>
<b>Social Media:</b><br>
Instagram: <a href="https://www.instagram.com/ianwinz/" >#ianwinz</a><br>
Twitter: #ianwinz
</div>
</p>
<br><br>
</font>
</center>
</div>
</div>
</body>
<script src="main.js"></script>
</html>
In your CSS:
#AK {
padding-top: 150px;
}
It seems like the ID you are using for your button is #AK and there is no styling for that in your current CSS code. Try to manipulate the 100px (+/-) to match your needs of where you want it to be.
https://jsfiddle.net/8a0q2o0e/#&togetherjs=CN62LLHwxA
You could try using absolute position on your button place this at the bottom of your css
#onboard{
position: relative; /** Container to make sure position absolute stays in place **/
}
#ak{
position: absolute;
width: 100%;
top: 50%;
left: 0;
}
I am trying out a guide from YouTube, but I can't get the right_aside and left_aside elements to show on my screen. I have been looking for hours now, and I can't find the problem. Did I miss something?
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>my websitebeta</title>
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="indexStyle.css" />
</head>
<body>
<header id="main_header">
<div id="second_header"></div>
</header>
<menu id="main_menu"></menu>
<div id="main_wrapper">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="180">
<aside id="left_aside"></aside>
</td>
<td>
<section id="main_content"></section>
</td>
<td valign="top" width="180">
<aside id="right_aside"></aside>
</td>
</tr>
</table>
</div>
<footer id="main_footer"></footer>
</body>
</html>
This is my CSS:
*{
padding: 0px;
margin: 0px;
}
body{
color:#000;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
background: #FFF;
}
#main_header{
width:100%;
height:100px;
background: #F90;
}
#second_header{
min-width:960px;
height:60px;
padding:20px;
margin:0px auto 0px;
}
#main_menu{
width: 100%;
height: 40px;
background: #09F;
}
#main_wrapper{
min-width:1000px;
margin-top: 0px;
margin-bottom: 0px;
}
#left_aside{
width: 180px;
min-height:700;
background: #9f0;
}
#main_content{
margin:0px 20px 0px;
min-height:700;
}
#right_aside{
width: 180px;
min-height:700;
background: #f00;
}
#main_footer{
width: 100%;
height: 50px;
background: #09F;
margin: 0px;
}
It looks like you've forgotten the px after your min-height in both the left and right asides.
It should look like: min-height:700px;
Good luck!