Every time I resize my page all the content will move to fit. However I have another page that uses the same CSS style and it does not move. Here is my code for the page:
CSS:
body{
background-color:#ccefff;
}
footer{
width: 100%;
}
button{
background-color: white;
color: black;
border: 2px solid #e7e7e7;
padding: 16px 32px;
}
button:hover{
background-color: #e7e7e7;
}
.wrapper{
min-height:100%;
}
.wrapper:after{
content: "";
display:block;
}
.wrapper:after{
height: 350px;
}
h1{
font-family: Arial, Helvetica, sans-serif;
font-weight: light;
color: white;
text-align: middle;
}
input[type=text]{
width: 500px;
border: 3px groove #ccc;
margin: 8px 0;
padding: 15px 20px;
-webkit-transition:0.5s;
transition: 0.5s;
box-sizing:border-box;
outline: none;
}
input[type=text]:focus {
border: 3px groove #555;
}
fieldset{
box-shadow: 1px 1px 10px ;
width= 100%;
height= 900px;
background-image:url("PICTURE");
background-size: cover;
}
.text_bot_01{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color:white;
font-size: 150%;
text-align: right;
}
.partner01
{
border: 2px solid grey;
}
HTML
<html>
<body>
<center>
<div class = wrapper>
<h1>Welcome to priority health for you - Your health is our priority </h1>
<p>Need a quote? Simply type your name below and press "Get a quote" </p>
<br>
<form method="post" action="index.php">
<input type="text" name="name01" placeholder="Please enter your first name ">
<button type="submit">Get a quote</button>
</form>
<p>Once you fill in the details, one of the team will contact you shortly </p>
</center>
<div class="text_bot_01">
<img src="PICTURE" align=right class="partner01" />
</fieldset>
<br>
<footer> <center>Copyright 2016 © Priority health for you </center></footer>
</html>
I have a wrapper but it seems every time I change something the entire layout will change.
Related
I have an HTML page with embedded CSS styling. It has a form with an input button that says "Submit Payment" using #fjButton and height of 54, which gets obeyed. I also have an that has an id #fjButton2 with a height of 14... both set to !important. The #fjButton2 doesn't get obeyed. Im's sure it's some stupid thing, but i just can't figure it out... the stays at 32px no matter what i do. See it at:
https://codepen.io/johnstonf/full/YzwGqNO
<!DOCTYPE html>
<html>
<head>
<title>Test-Store</title>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Inter&display=swap" rel="stylesheet">
<!-- Landing page styling -->
<style type="text/css">
body{
background-color: #f2f4f9;
}
h3, h5{
font-family: 'Fjalla One', sans-serif;
font-weight: 100;
}
h3{
font-size: 36px;
}
h5{
font-size: 24px;
}
p, label{
font-family: 'Inter', sans-serif;
}
hr{
color:#fff;
background-color: #fff;
border-top:1px solid #fff;
margin-top:10px;
margin-bottom: 10px;
}
#container{
width:1200px;
margin:0 auto;
padding-top: 3%;
}
.column-6{
text-align: center;
width: 50%;
float:left;
}
#left-wrapper{
background-color: #72cca7;
box-shadow: 0 1px 3px 0 #dce0e6;
border-radius: 14px;
border: 3px solid black;
margin-right: 14px;
margin-top: 14px;
padding: 13px;
}
#right-wrapper{
padding-top: 13px;
margin-top: 13px;
border-radius: 14px;
border: 3px solid black;
margin-right: 14px;
background-color: #72cca7;
box-shadow: 0 1px 3px 0 #dce0e6;
border-radius: 14px;
border: 3px solid black;
margin-right: 14px;
margin-top: 14px;
padding: 13px;
}
#profile-pic{
width:200px;
display:block;
margin: 0 auto;
border-radius: 50%;
float:left;
}
#left-wrapper-header{
min-width:50%;
float:left;
padding-left:20px;
}
#left-wrapper-header h3{
color:#fff;
}
#right-wrapper h3{
color: #10a195;
}
.Z9999{
margin-left: 1px;
width: 99%;
}
/* ------------------------ FORM FIELDS ------------------------ */
.form-field-12{
width: 100%;
margin-bottom: 6px;
padding-top: 3px;
}
.form-field-6{
width: 50%;
float:left;
margin-bottom: 1px;
}
select{
width: 100%;
height: 25px!important;
box-shadow: 0 1px 3px 0 #dce0e6;
padding: 1px 2px;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
font-size: 20px;
color: #44464a;
}
input{
box-shadow: 0 1px 3px 0 #dce0e6;
height:40px;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
width: 95%;
padding: 5px;
font-size: 16px;
}
input::placeholder {
color: #9fa1a6;
}
/* ------------------------ BUTTON STYLING ------------------------ */
#fjButton {
box-shadow: 0 1px 3px 0 #dce0e6;
font-family:'Fjalla One', sans-serif;;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
height: 54px !important;
width: 30%;
padding: 5px;
font-size: 16px;
text-decoration:none;
margin: 0px;
}
#fjButton2 {
box-shadow: 0 1px 3px 0 #dce0e6;
font-family:'Fjalla One', sans-serif;;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
height: 14px !important;
width: 30%;
padding: 5px;
font-size: 16px;
text-decoration:none;
margin: 0px;
}
.myButton:hover {
opacity: .6;
}
#media screen and (max-width:1200px){
#container{
width:80%;
}
.column-6{
width: 100%;
}
}
#media screen and (max-width:800px){
#container{
width:100%;
}
.Z9999{
margin-left: 20px;
width: 100px;
}
}
</style>
<!-- Success page styling -->
<style type="text/css">
h4{
font-family: 'Fjalla One', sans-serif;
font-weight: 100;
font-size: 24px;
}
#box{
max-width: 500px;
margin:0 auto;
margin-top: 100px;
padding:30px;
background-color: #fff;
text-align: center;
box-shadow: 0 1px 3px 0 #dce0e6;
border-radius: 4px;
border: 1px solid transparent;
}
.myButton {
background-color:#72cca7;
background-color:#26367e;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:17px;
padding:10px;
width:30%;
border-radius: 0;
text-decoration:none;
text-align: center;
transition: .3s;
}
.myButton:hover {
opacity: .6;
}
#succes-icon{
width: 100px;
}
</style>
</head>
<body>
<style type="text/css">
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
</style>
<script src="https://js.stripe.com/v3/"></script>
<div id="container">
<div class="column-6">
<div id="left-wrapper">
<img id="profile-pic" src="{% static 'images/logo-20may29.png' %}">
<div id="left-wrapper-header">
<h3>Item Purchase</h3>
</div>
<div style="clear:left"></div>
<hr>
<!-- Add form here -->
<form action="{% url 'charge' %}" method="post" id="payment-form">
<div class="form-field-12">
<label for="amount"><b>Pick a product from this dropdown:</b></label>
<select required name="amount" id="amount">
<option selected value="1">$1 CAD ------> TEST</option>
<option value="1">$1 CAD -----> 1 item</option>
<option value="2">$2 CAD -----> 2 items</option>
<option value="3">$3 CAD ----> 3 items</option>
<option value="4">$4 CAD ----> 4 items</option>
<option value="5">$5 CAD ---> 5 items</option>
</select>
</div>
<div class="form-field-6">
<label for="email"><strong>* Enter your email address:</strong></label>
<input required type="email" name="email" placeholder="* email...">
</div>
<div class="form-field-6">
<label for="username"><strong>* Desired username / login name:</strong></label>
<input required type="text" name="username" placeholder="* username...">
</div>
<div class="form-field-6">
<label for="email"><strong>Enter your Dogs name:</strong></label>
<input type="text" name="dog" placeholder="Dogs name...">
</div>
<div class="form-field-6">
<label for="email"><strong>Enter your Favorite beer:</strong></label>
<input type="text" name="beer" placeholder="Favorite beer...">
</div>
<div class="form-field-6">
<label for="country"><strong>* Enter your Country:</strong></label>
<input required type="text" name="country" placeholder="* Country...">
</div>
<div class="form-field-6">
<label for="phone"><strong>* Enter your phone number:</strong></label>
<input type="tel" id="phone" name="phone" placeholder="* Phone..."
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
<small>Format: 123-456-7890</small>
</div>
<div class="form-row">
<label for="card-element">
<strong>Credit or debit card</strong>
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert">
</div>
</div>
<div style="clear:left">
</div>
<hr>
<input id="fjButton" style="background-color:#10a195;height:12px" type="submit" value="Submit Payment" name="">
<hr>
<a href="https://opp.ca" target="_blank" id="fjButton2" style="background-color:#10a195; height:77px" >OPP Homepage</a>
<br><br><br><br>
</form>
</div>
</div>
<div class="column-6">
<div id="right-wrapper">
<img class="form-field-12" src="{% static 'images/Z9999.png' %}">
<h3> We appreciate you!</h3>
<hr>
</div>
</div>
</div>
<script>
// Create a Stripe client.
var stripe = Stripe('pk_live_blahblah');
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
// Submit the form with the token ID.
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
</script>
</body>
</html>
I found this finally... CSS - Why am I not able to set height and width of <a href> elements? and as it states...
"As the others have said, by default is an inline element, and inline elements can't specify a width or height. You can change it to be a block element like this":
a {
display: block;
}
Though it will then display (unsurprisingly) as a block, sitting on its own, outside the flow of the surrounding text. A better solution is to use display: inline-block which might be a best-of-both-worlds solution depending on your situation.
a {
display: inline-block;
}
Height won't have any effect on that <a> tag as it has a display of inline, so you simply need to change its display to something like inline-block to make it obey the set height, like
#fjButton2 {
box-shadow: 0 1px 3px 0 #dce0e6;
font-family:'Fjalla One', sans-serif;;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
color: #44464a;
height: 14px !important;
width: 30%;
padding: 5px;
font-size: 16px;
text-decoration:none;
margin: 0px;
display:inline-block;
}
Hope it helps.
I want to align the button and the text in the same line.
<div class="oferts">
<div class="container" style="line-height: 300px; text-align: center;">
<h1>Bucura-te de ofertele noastre alaturi de familia ta <button class="oferts-button">Vezi toate beneficiile terapiilor</button>
</div>
</div>
button {
background: transparent;
color: #666;
border: 1px solid #d4d4d4;
padding: 10px 20px;
margin: 0 10px 0 10px;
transition: border .3s ease-in;
}
button:hover {
border: 1px solid #909090;
padding: 10px 20px 10px 20px;
}
button a {
font-family: 'Raleway', sans-serif;
color: #666;
font-size: 14px;
}
.oferts-button a {
font-family: 'Raleway', sans-serif;
color: #fff;
}
.oferts-button:hover {
border: 1px solid #fff;
}
.oferts {
width: 100%;
display: table;
height: 300px;
background:url(../img/back.jpg) center no-repeat;
}
You can use the vertical-align css property on both elements:
container {
line-height: 300px;
text-align: center;
}
container > h1,
container > h1 a {
vertical-align: middle;
}
DEMO
HTML Removed h1 tags, as was not ending and didn't even found in css
NOTE: Used font-size - 32px because h1 tag = 32px
<div class="oferts">
<div class="container">
Bucura-te de ofertele noastre alaturi de familia ta
<button class="oferts-button">
Vezi toate beneficiile terapiilor
</button>
</div>
</div>
CSS Add this class to your CSS
.container
{
line-height: 300px;
text-align: center;
font-weight:bold;
font-size:32px;
}
I was just wondering how I can better optimize my website (its just a project, not real) for Snap mode in Windows. Whenever I go into that mode, it screws up the entire webpage (see attached photo).
Thanks Jacob
http://i.stack.imgur.com/V4yF2.jpg
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link type="text/css" rel="stylesheet" href ="C:\Users\toshiba\Documents\NetBeansProjects\HTML5Application\public_html\css\index.css">
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel ="stylesheet">
<meta charset="UTF-8">
<title> JP's Webservices</title>
</head>
<body>
<div id ="body">
<div class = "nav">
<ul>
<li>
About Me
</li>
<li>
Contact Me
</li>
<li>
Pricing
</li>
</ul>
</div>
<div class ="jumbotron">
<div class ='container'>
<div id ='h1'>
<h1> Need a website? </h1>
<p> Look no further </p>
</div>
</div>
</div>
<div id ="white">
<h1> Qualities </h1>
<h3> What makes me unique? </h3>
</div>
<div id ="gray">
</div>
<div class ="des" >
<div class ="row">
<div class= "col-md-4">
<h2> Knowledge. </h2>
<p> Straight 'outta Compton 1231231231231231231231231231231231231231231231231231231231 </p>
<hr>
</div>
<div class="col-md-4">
<h2> Commitment. </h2>
<p> To excellence and to serve as a value resource 123123123123123123123123123123123123 </p>
<hr>
</div>
<div class="col-md-4">
<h2> Perspective. </h2>
<p> New outlook on your web designs 12312312312311111111111111111111111111111111111111111 </p>
<br>
</div>
</div>
</div>
</body>
<footer>
<div id ='footer'>
</div>
<div id ='footer1'>
<p> Copyright #2014-2015 Jacob Platin </p>
<div id ='foot1'>
<a href="https://twitter.com/TheJakeoShark" target=newtab><img src="https://g.twimg.com/Twitter_logo_blue.png" width="72" height="46" border="0" /></a>
</div>
<div id ='facebook'>
<a href ='https://facebook.com/jacob.platin' target=newtab><img src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png' width ="65" height =" 53" /></a>
</div>
</div>
</footer>
</html>
CSS
.des {
position: absolute;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
text-align: center;
}
.nav li {
list-style-type: none;
text-align: center;
float: left;
width: 33.3%;
position: relative;
z-index: 10;
color: black;
padding-top: 17px;
font-weight: 700;
font-size: 18px;
}
.nav {
background-color: #660000;
height: 85px;
z-index: 1;
box-shadow: 1px 1px 5px black;
}
.nav a {
text-decoration: none;
color: black;
font-weight: 700;
color: white;
}
.jumbotron {
position:relative;
background-image: url(http://www.welivesecurity.com/wp-content/uploads/2013/01/012838004-printed-internet-html-code-tec.jpg);
width: 100%;
height: 530px;
}
#h1 > h1 {
color:#660000;
text-align:left ;
padding-top: 34px;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px black;
}
#h1 > p {
color:white;
text-align:left ;
padding-left: 5px;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px black;
font-weight: 300;
}
#master_wrapper{overflow:hidden!important;}
#footer {
width: 1902px;
height: 170px;
background-color: black;
box-shadow: 1px 1px 12px 4px black;
position: absolute;
top: 1300px;
}
#footer1 {
height: 85px;
width: 1902px;
background-color: #660000;
position: absolute;
margin-top: 0px;
box-shadow: -4px -2px 9px black;
top: 1300px;
}
#footer1 > p {
text-align: center;
font-family: 'Georgia', sans-serif;
color: white;
font-size: 18px;
padding-top: 24px;
}
#foot1 {
padding-top: 42px;
text-align: center;
padding-left: 205px;
}
#facebook {
margin-left: 820px;
position: absolute;
bottom: 3px;
top: 95px;
}
.des > h2 {
padding-top: 80px;
color: #660000
}
#photo1 {
background-image: url(http://financeandcareer.com/wp-content/uploads/2013/03/webProgrammingInternship.jpg);
width: 240px;
height: 200px;
position:relative;
}
.des > img {
margin-top: 40px;
box-shadow: 01px 01px 01px 5px black;
}
#h1 {
box-shadow: -1px -1px -32px black;
}
#gray {
width: 100%;
height: 300px;
background-color: #f7f7f7;
position: absolute;
z-index: -11;
margin-top: 0px;
}
#white > h1 {
z-index: 1;
padding-bottom: 100px;
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
color:#660000;
text-align: center;
}
#white > h3 {
font-family: 'Georgia', sans-serif;
text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
color:#660000;
position: absolute;
bottom: 230px;
text-align:center;
z-index: 0;
margin-left: 43.3%;
}
.row {
padding-left: 56px;
z-index:-1;
}
Are you referring to resizing the site via snapping (taking up 50%) of the screen width? If you want your site to work whatever the the screen width you need to use fluid containers and media queries, which make up the concept of responsive web design.
From the looks of things your site uses fixed widths which limit the ability for the content to re-size fluidly with the browser when you snap.
Responsive webdesign needs to be integrated form the get go, it can be annoying to update an existing site (but still possible). I'd recommend taking a look at this tutorial/overview: http://www.w3schools.com/html/html_responsive.asp
In short to fix your site you will need to get rid of the fixed widths you have set in pixels and uses percentages as they will adapt depending on the available width.
I have tried absolute to my footer to stay on the bottom of the page but it covers up the elements that are already at the bottom instead of going underneath them. Fixed does the similar thing except if the page is longer it will cover up elements in the center of the page. I literally just want the backgound color of my div to extend to the bottom of the page and have my logo and text stay in between the div at a set height. Here's what I've got.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css"/>
<title>
</title>
<div class="heading">
<img src="Images/Redbird.gif" alt="Redbird" style="float:left; padding-left:15px; padding-top:15px; width:150px;height:90px">
<form>
Search:
<input type="search" name="Search" style="float:right;">
</form>
<br></br>
<button type="button" id="Login">Login</button>
<button type="button" id="Login">Create New Account</button>
<h1>Technology Blog</h1>
<a href="index.html">
<img src="Images/House.png" alt="Home" style="width:35px; height:35px;">
</a>
</div>
<div class="table">
<table style+"width:100%">
<tr>
<td>Phones & Tablets</td>
<td>Computers & Laptops</td>
<td>Internships</td>
<td>Troubleshooting</td>
<td>Product Ratings & Reviews</td>
</tr>
</table>
</div>
</head>
<body>
<div class="Welcome">
<h2>Welcome</h2>
<p>Welcome to Illinois State University's Technology Blog. Here you can view and post questions, answers, reviews, and other information that is related to technology. This website is for Illinois State University Students ONLY! You must sign in or create an account to view or post on this website.</p>
</div>
<div class="Slideshow">
<img src="Images/DellComps.jpg" alt="Computers" style="width: 397px; height: 298px">
</div>
</body>
<div class="Footer">
<img src="Images/Seal.png" alt="ISU Seal" style="width: 40px; height: 40px; padding-bottom: 10px; padding-top: 10px">
Copyright 2014 # TEC 319 Group <br/> Illinois Sate University
</div>
</html>
heres the CSS. I only need to edit the .Footer tag i believe
html{
height: 100%;
position: relative;
}
h1{
text-align: center;
font-family: impact;
font-style: italic;
}
.heading{
background-color: #CA0000;
height:150px;
}
td{
border:5px solid black;
text-align:center;
background-color:#790000;
color:white;
padding:10px;
font-family: helvetica;
font-style: italic;
font-size: 15px;
}
table{
width:100%
}
.table{
background-color:black;
height:53px;
}
form{
float:right;
}
button{
float:right;
}
.Slideshow img{
display: block;
position: center;
margin-left: auto;
margin-right: auto;
}
.Footer img{
display: block;
position: center;
margin-left: auto;
margin-right: auto;
}
.Footer{
margin-top: 40px;
text-align: center;
background-color: #D8D8D8;
padding-bottom: 20px;
width: 100%;
}
.Preview td{
display: block;
text-align: left;
color: black;
background-color: white;
}
.Blog td{
display: block;
text-align: left;
color: black;
background-color: white;
border: 0px;
}
.newPost h2{
display: block;
position: center;
margin-left:auto;
margin-right: auto;
vertical-align: middle;
color: white;
background-color: #790000;
border: 5px solid black;
border-collapse: collapse;
width: 250px;
text-align: center;
}
h3 {
color: white;
background-color: #790000;
border: 5px solid black;
}
h4{
text-align: left;
font-size: 14pt;
color:#790000
}
.back h2{
display: block;
position: left;
border:5px solid black;
background-color:#790000;
color:white;
padding:10px;
font-family: helvetica;
font-style: italic;
font-size: 15px;
width: 100px;
}
form.comment{
float:left;
size
}
a.blogTitle:link {
color: #790000;
text-decoration: none;
}
a.blogTitle:visited{
color: #790000;
text-decoration: none;
}
a.blogTitle:active{
color: #790000;
text-decoration: none;
}
a.blogTitle:hover{
color: #CA0000;
text-decoration: none;
}
a:link {
color: white;
text-decoration: none;
}
a:visited{
color: white;
text-decoration: none;
}
a:active{
color: white;
text-decoration: none;
}
a:hover{
color: #CA0000;
text-decoration: none;
}
You need to set the footer position to relative to have it respect other elements on the page. Both absolute and fixed remove the element from the page flow, which causes overlapping.
Demo
Change position:relative to fixed in the demo CSS and then uncomment bottom to see the difference. You can also play with height on the body tag to see how behavior changes.
<div id="content">
<p>Content</p>
</div>
<div id="footer">
<p>Footer stuff</p>
</div>
body {
margin:0;
padding:0;
}
#content {
height:1200px;
width:100px;
background-color:#eee;
position:relative;
margin:0;
padding:0;
border:1px solid black;
}
#footer {
width:100px;
position:relative;
/* bottom:0; */
background-color:#eee;
margin:0;
padding:0;
border:1px solid black;
}
HTML:
<div class="div1">
<h2>Set RSVP & Check in</h2>
<p>
Set RSVP to remind all events you plan to go.
</p>
</div>
CSS:
.div1 {
float: left;
margin: 0 20px 0 0;
padding: 0;
width: 300px;
height: 156px;
}
.div1 h2 {
color: #fff;
font-size: 24px;
font-weight:bold;
box-shadow: 1px 1px 0 black;
}
And border appears like "table border" not the border on text:
http://screencast.com/t/OrFfBL9MK
I think you are confusing box-shadow with text-shadow.
Try this:
.div1 h2 {
color: #fff;
font-size: 24px;
font-weight:bold;
text-shadow: #000000 1px 1px 0px;
}