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!
Related
I have created a div which is normal as a rectangular shape but I need a code to work such that lower edge of div is slanted and likewise other div's below it(which could have slanted edges again).Any help would be appreciated.
This is my code snippet until now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Assignment</title>
<!-- Bootstrap Styling css-->
<style type="text/css">
.container{
width: 100%;
padding-top: 25px;
background-color: black;
height: 300px;
}
#logo{
background-color: #FFFFFF;
float: left;
border-radius: 20px;
}
#eduhead{
/*padding-left: 40px;*/
margin-left: 10px;
color: #3C89AA;
font-weight: bold;
}
#newref{
color: white;
font-size: medium;
text-align: right;
font-weight: lighter;
}
table{
width: 100%;
}
#signup{
color:#FFFFFF;
border-style: solid;
border-width: 2px;
border-color: #3C89AA;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<th></th>
<th id="eduhead"><img src="assets/Group 31.png" id ="logo"
alt="img"> ASSIGNMENT</th>
<th>Blog</th>
<th>Packages</th>
<th>Login</th>
<th>Sign Up</th>
</tr>
</table>
</div>
<!--Including all the JavaScript Files of bootstrap-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
</script>
<!--Bootstrap Scrit CDN-->
The above is my code including all the CDN for Bootstrap. Any suggestions?
Here you can see different approaches to your problem. Below I placed an example, you can adjust precise values. I hope that helps.
.slanted {
position: relative;
background: red;
padding: 30px;
box-sizing: border-box;
clip-path: polygon(0 0,100% 0vw,100% 75%,0 100%)
}
<div class="slanted">
Content.
</div>
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.
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 6 years ago.
Below is the code I made for a simple html table. My goal is to center the entire table vertically in the center of the page based on the users height of the device. I tried to make a div with the height as 100% and width as 100% and placing the table 50% from top and left and no luck. Any ideas?
body {
background-color: #a00000;
}
table {
margin: 50px auto 25px auto;
padding: 0px;
background-color: #fff;
border-radius: 10px;
}
td {
background-color: #fff;
padding: 10px;
background-color: #fff;
border-radius: 10px;
}
img {
max-width: 120px;
max-height: 120px;
border: solid 5px #a00000;
border-radius: 5px;
background-color: #a00000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bobcat Menu</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<table align="center">
<tr>
<td>
<a href="mobincube://action/section/DropDay">
<img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/Schedule">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
</a>
</td>
</tr>
<tr>
<td>
<a href="mobincube://action/section/Calculators">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/News">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
</a>
</td>
</tr>
</table>
</body>
</html>
You can use flexbox to achieve the result you're looking for.
Set both the body & html to height: 100%;
Wrap the table with a wrapper div and use:
.wrapper {
display: flex;
height: 100%;
}
set the table margins to margin: auto;
This will ensure your table is always perfectly centered.
body, html {
height: 100%;
}
body {
background-color: #a00000;
margin: 0; /* remove default margins added by browsers */
}
.wrapper {
display: flex;
height: 100%;
}
table {
margin: auto;
padding: 0px;
background-color: #fff;
border-radius: 10px;
}
td {
background-color: #fff;
padding: 10px;
background-color: #fff;
border-radius: 10px;
}
img {
max-width: 120px;
max-height: 120px;
border: solid 5px #a00000;
border-radius: 5px;
background-color: #a00000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bobcat Menu</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<table align="center">
<tr>
<td>
<a href="mobincube://action/section/DropDay">
<img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/Schedule">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
</a>
</td>
</tr>
<tr>
<td>
<a href="mobincube://action/section/Calculators">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/News">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
Try adding the following CSS rules to the table element:
table{
/* ... */
position: absolute;
top: 50%;
transform: translateY(-50%);
}
display: table-cell; Add this on the parent div and then use vrtical-align on the table itself.
html:
<div id="parent">
<div id="child">Content here</div>
</div>
css:
#parent {display: table}
#child {
display: table-cell;
vertical-align: middle;
}
I believe you can do something like this to get yourself vertically centered on any given browser.
table {
margin: 50px auto 25px auto;
padding: 0px;
background-color: #fff;
border-radius: 10px;
position: relative;
top: 50%;
transform: translateY(50%);
}
https://jsfiddle.net/rodhartzell/s6x5toj9/
I am trying to get an image to show for the background of my navigation bar, I have looked at several samples of code and examples on this site and elsewhere but, I am having little luck fixing my mistakes.
This is the markup:
<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="img/png" href="Johns Cars Shadow.ico" />
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Johns Cars</title>
<style type="text/css">
#main {
box-shadow: 0px 10px 10px 15px #888888;
}
</style>
</head>
<body bgcolor="#ffffff" marginwidth="95" link="#FFFFFF">
<table id="main" bgcolor="#ffffff" width="1200" align="center">
<tr>
<td>
<div id="container" align="center" width="1200">
<div id="logo">
<table align="center" width="345" height="167">
<tr>
<td>
<div>
<img src="Johns cars Shadow.png" width="341" height="167"/>
</div>
</td>
</tr>
</table>
</div>
<div id="navbar">
<ul class="cssmenu">
<li id="active"><span>Home</span></li>
<li><span>Products</span></li>
<li><span>About</span></li>
<li id="last"><span>Contact</span></li>
</ul>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
And this is the css:
ul.cssmenu {
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
position: relative;
display: block;
height: 30px;
font-size: 12px;
font-weight: bold;
background-image: transparent url(../images/nav.png) repeat-x top left;
font-family: Arial, Helvetica, sans-serif;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
}
ul.cssmenu li {
display: block;
float: left;
margin: 0;
padding: 0;
}
ul.cssmenu li a {
display: block;
float: left;
color: #999999;
text-decoration: none;
font-weight: bold;
padding: 8px 20px 0 20px;
}
ul.cssmenu li a:hover {
color: #4d4d4d;
height: 22px;
background-image: transparent url(../images/nav.png) 0px -30px no-repeat;
}
ul.cssmenu li:active a {
display: inline;
height: 22px;
background-image: transparent url(../images/nav.png) 0px -30px no-repeat;
float: left;
margin: 0;
}
Any help would be welcomed!
When using the property background-image, you can't also supply color/bgposition/bgrepeat — in this case it expects only a url to an image, so your values here are treated as invalid and ignored. background is the valid shorthand property that lets you set multiple properties.
background: transparent url(../images/nav.png) repeat-x top left;
HTML:
<ul>
<li>Home</li>
<li class="active">About</li>
<li>Contact</li>
</ul>
CSS:
.active {
background:#ccc url(path/to/image/marker.png) center bottom no-repeat;
}
I have gotten my web page blocked out with CSS and here is the issue I am having, I want to just move the table of URL's to a more centered and lower position within the 'right' div tag. the colors are just for differentiation of field. ignore the img links.
This is the html code (for this assignment I am not allowed to use anything other than CSS and HTML. Below this code is the CSS file.
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Town of Oz Info</title>
<meta name="Zachary" content="Zachary Maltais" />
<link rel="stylesheet" type="text/css" href="oz.css" />
<!-- Date: 2012-09-05 -->
</head>
<body>
<!--Using a div based layout to position things on the page -->
<div id="header">
<!-- header code goes here -->
<h1 id="welcome">Welcome to Town of Oz</h1>
</div>
<div id="content">
<!-- All main content go here -->
</div>
<div id="right">
<!-- right side of screen code goes here -->
<!-- Table for navigation -->
<table id="navigation">
<tr>
<th><img src="images/arrow.gif"></th>
<th>Home</th>
</tr>
<tr>
<th><img src="images/arrow.gif"></th>
<th>Events</th>
</tr>
<tr>
<th><img src="images/arrow.gif"></th>
<th>Directions</th>
</tr>
<tr>
<th><img src="images/arrow.gif"></th>
<th>Weather</th>
</tr>
<tr>
<th><img src="images/arrow.gif"></th>
<th>Wizards</th>
</tr>
</table>
</div>
<div id="left">
<!-- left side of screen code goes here -->
</div>
<div id="footer">
<!-- footer code goes here-->
</div>
</body>
</html>
Here is the CSS:
body {
margin: 0px;
padding: 0px;
}
#page {
max-width: 950px;
max-height: 720px;
}
#header {
background: #ff9999;
position: absolute;
width: 950px;
height: 100px;
left: 0px;
top: 0px;
}
#content {
background: #9999ff;
position: absolute;
top: 100px;
left: 200px;
width: 750px;
height: 550px;
}
#right {
background: #ffff99;
position: absolute;
top: 100px;
height: 550px;
width: 200px;
margin: 0px;
padding: 0px;
}
#footer {
background: #99ff99;
position: absolute;
top: 650px;
width: 950px;
height: 70px;
}
#navigation {
position:absolute;
top:200;
left:50;
border:dotted;
border-color: black;
}
#welcome {
text-align: center;
color: blue;
font-style: oblique;
font-size: 250%;
font-family: "Perpetua";
font-weight: bold;
}
try this, i little changes to your ccs for the #navigation
#navigation {
border:dotted;
border-color: black;
margin: 0px auto;
position: relative;
top: 50px;
}
just change the top value if you want to put it down.
You could add this rule for the css
#right table{margin: 20px;}