I made a form to send email on a website built on Laravel. It used to work without problems, but then I added an html/css template to the email. The user should receive an html/css template in the email, but is receiving only text.
This is my send function
public function sendmail(Request $request)
{
$str = preg_replace('/\s\s+/', ' ', $request->emails);
$arr=explode(" ", $str);
$emails = array_slice($arr, 1, -1);
$subject = $request->subject;
$body = $request->body;
$sent = 0;
$declined = 0;
$decEmails=[];
$send = 0;
$declined = 0;
foreach($emails as $email)
{
$send = Mail::send(['html' => 'pages.sendemail'],['subject'=>$subject, 'body'=>$body], function($message) use ($email, $subject)
{
$message->to($email)->subject($subject);
});
if( $send == 1 )
{
$sent++;
}
else
{
array_push($decEmails, $email);
$declined++;
}
}
return view('sent', compact('sent','declined','decEmails') );
}
and this is my view
<!DOCTYPE html>
<html>
<head>
<title>Ebay Georgia</title>
<!--<link type="image/x-icon" rel="icon" href="images/icon.ico">-->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("footer");
document.createElement("section")
</script>
<style>
*{ margin:0; padding:0}
html, body{width:100%; min-height:100%;}
a{ text-decoration:none;}
li{ list-style-type:none;}
img{border:0;}
#font-face {
font-family: 'Conv_BPG DejaVu Sans ExtraLight 2012';
src: url('fonts/BPG DejaVu Sans ExtraLight 2012.eot');
src: local('☺'), url('fonts/BPG DejaVu Sans ExtraLight 2012.ttf') format('truetype'), url('../fonts/BPG DejaVu Sans ExtraLight 2012.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Conv_BPG DejaVu Sans ExtraLight Caps 2012';
src: url('fonts/BPG DejaVu Sans ExtraLight Caps 2012.eot');
src: local('☺'), url('fonts/BPG DejaVu Sans ExtraLight Caps 2012.ttf') format('truetype'), url('../fonts/BPG DejaVu Sans ExtraLight Caps 2012.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*main css*/
#wrapper{
width:92%;
max-width:600px;
padding:29px 4% 10px 4%;
background:#1c75d7 url(../images/corner.png) no-repeat right bottom;
background-size:auto 100%;
margin:50px auto;
}
#maincContent{
-webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.24);
box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.24);
background-color:#fff;
margin-bottom:13px;
position:relative;
clear:both;
overflow:hidden;
border-bottom-right-radius:40px;
}
#head{
width:92%;
max-width:550px;
margin:25px auto;
}
#head h1{
width:94px;
height:47px;
margin:25px 5.45%;
}
#head h1 a{
display:block;
text-indent:-9999px;
width:100%;
height:100%;
background: url(../images/logo.png) no-repeat center center;
}
#content{
width:92%;
max-width:550px;
margin:25px auto;
}
#content h2{
color:#5c5c5c;
font-size:15px;
margin-bottom:20px;
font-family: 'Conv_BPG DejaVu Sans ExtraLight 2012';
margin:0px 5.45% 25px 5.45%;
}
#content .parpagraph{
color:#5c5c5c;
font-size:15px;
margin-bottom:20px;
font-family: 'Conv_BPG DejaVu Sans ExtraLight 2012';
font-weight:600;
margin:0px 5.45% 25px 5.45%;
}
#content .parpagraphGreen{
color:#86b817;
font-size:14px;
margin-bottom:20px;
font-family: 'Conv_BPG DejaVu Sans ExtraLight Caps 2012';
font-weight:600;
margin:0px 5.45% 44px 5.45%;
}
#content img{
display:block;
margin:0px 5.45% 60px 5.45%;
}
#maincContent::after {
content: "";
position: absolute;
z-index:2;
bottom: 0;
right: 0%;
width: 0px;
height: 0px;
border-top:35px solid #dbdbdb;
border-right: 35px solid #dbdbdb;
#footer{
width:92%;
max-width:550px;
margin:0 auto;
}
#footer ul{
margin-left:7%;
overflow:hidden;
}
#footer ul li{
display:inline-block;
float:left;
width: 31px;
height:35px;
margin-right:2%;
}
#footer ul li a{
display:block;
width:100%;
height:100%;
text-indent:-9999px;
margin-bottom:8px;
}
#footer ul li a.mail{
background:url(../images/mail.png) no-repeat center center;
}
#footer ul li a.fb{
background:url(../images/fb.png) no-repeat center center;
}
#footer ul li a.link{
background:url(../images/link.png) no-repeat center center;
}
</style>
</head>
<body>
<section id="wrapper"><!--id="wrapper"-->
<section id="maincContent"><!--id="maincContent"-->
<header id="head"><!--header-->
<h1>Ebay Georgia</h1>
</header><!--End of header-->
<section id="content"><!--id="content"-->
<h2> {!! $subject !!}</h2>
<div class="parpagraph">
{!! $body !!}
</div><br>
<div class="parpagraphGreen">
მადლობა ჩვენი სერვისით სარგებლობისთვის.
</div>
<img src="../images/line.png" alt="#" />
</section><!--End of id="content"-->
</section><!--En dof id="maincContent"-->
<footer id="footer"><!--id="footer"-->
<ul>
<li>mail</li>
<li>facebook</li>
<li>link</li>
</ul>
</footer><!--End of id="footer"-->
</section><!--End of id="wrapper"-->
</body>
</html>
By default, the view given to the Mail::send() method is assumed to contain HTML. So no need to give html key to your view array, this should work:
Mail::send('pages.sendemail', ['subject'=>$subject, 'body'=>$body]...
But if you want to send a plain text you must define it as ['text' => 'pages.sendemail'].
Related
I'd like to be able to take any div, no matter it's background color and give it a slight change in color, either darker or lighter depending on my situation
Currently, I can do it with css but then I have to pick the color. I want it for an unknown colored or white or black button.
function theFunction(){
console.log("woho");
}
body {
display: flex;
gap: 5px;
align-items: center;
height: 100vh;
justify-content: center;
margin: 0; }
.button1 {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
border-radius: 130px;
cursor: pointer;
font-weight: 500;
font-size: 50px;
font-family: "Lexend", sans-serif;
user-select: none;
background-color: #0084ff;
transition: background-color 0.2s ease; }
.button1.selected {
background-color: #0077e6;
color: white; }
.button1:hover {
background-color: #006acc;
color: white; }
.button1:active {
background-color: #99ceff;
color: black; }
.text {
text-align: center; }
<!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.0" />
<title>Perfect Button</title>
<link rel="stylesheet" href="index.css" />
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght#100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet" />
</head>
<body>
<div class="button1" onclick="theFunction()">
<div class="text">Click Me</div>
</div>
<div class="button1 selected" onclick="theFunction()">
<div class="text">Click Me</div>
</div>
<script src="index.js"></script>
</body>
</html>
To do it for any background color of any div use:
$--color: #0084ff;
$--black: black;
$--white: white;
$--background-active: ligther($--color, 30%);
body {
display: flex;
gap: 5px;
align-items: center;
height: 100vh;
justify-content: center;
margin: 0;
}
#mixin backgroundLigthen($--color, $--percentage) {
background-color: lighten($--color, $--percentage);
$--background: lighten($--color, $--percentage);
#include adjust-text-color($--background);
}
#mixin backgroundDarken($--color, $--percentage) {
background-color: darken($--color, $--percentage);
$--background: darken($--color, $--percentage);
#include adjust-text-color($--background);
}
#mixin adjust-text-color($--background) {
#if (lightness($--background) < 50%) {
color: $--white;
} #else {
color: $--black;
}
}
.button1 {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
border-radius: 130px;
cursor: pointer;
font-weight: 500;
font-size: 50px;
font-family: "Lexend", sans-serif;
user-select: none;
background-color: $--color;
transition: background-color 0.2s ease;
#if (lightness($--color) > 50%) {
color: $--white;
}
&.selected {
#include backgroundDarken($--color, 5%);
}
&:hover {
#include backgroundDarken($--color, 10%);
}
&:active {
#include backgroundLigthen($--color, 30%);
}
}
.text {
text-align: center;
}
For a scss example: https://jsfiddle.net/gu2r4jqk/7/
I am using laravel version 9 for doing my project. and there is a feature that needs to let the user export the event ticket. I try to use the package barryvdh/laravel-dompdf . right now I encounter the error of
Call a member function get_cellmap() on null
I tried to read others' posts with a similar issue, but I found out most of them are using the for the view so seems like the solution working for them is not appropriate for me.here is my code :
controller
public function GenerateTicket($id)
{
$tickets = GiftGivingBeneficiaries::where('gift_giving_id', $id)->get();
# Retrieve the last batch no. from the gift giving.
$batch_no = GiftGiving::findOrFail($id)->batch_no;
GiftGiving::findOrFail($id)->update([
'last_downloaded_by' => Auth::id(),
'batch_no' => $batch_no + 1,
]);
$pdf = PDF::loadView('charity.gifts.generate_ticket', compact('tickets'));
return $pdf->download('event_tickets.pdf');
}
View Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from bootdey.com #bootdey on twitter -->
<!-- All snippets are MIT license http://bootdey.com/license -->
<title>Genearate Ticket</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<h1>Event Tickets</h1>
#foreach ($tickets as $key=> $ticket)
<table>
</table>
<div class="row">
<input type="hidden" value="{{$key + 1}} ">
<article class="card fl-left">
<section class="date">
<time datetime="23th feb">
<span>Ticket No.</span><br>
<span>{{ $ticket->ticket_no }}</span>
</time>
</section>
<section class="card-cont">
<small>Event Name:{{ $ticket->GiftGiving->name }}</small>
<h3>{{ $ticket->name }}</h3>
<div class="even-date">
<i class="fa fa-calendar"></i>
<time>
<span>{{ $ticket->GiftGiving->start_at }}</span>
</time>
</div>
<div class="even-info">
<i class="fa fa-map-marker"></i>
<p>
{{ $ticket->GiftGiving->venue }}
</p>
</div>
Batch No.{{ $ticket->GiftGiving->batch_no }}
</section>
</article>
</div>
#if ( $key == 5 )
<div style="page-break-before:always;"> </div>
#endif
#endforeach
</div>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Oswald');
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box
}
body {
background-color: #dadde6;
font-family: arial
}
.fl-left {
float: left
}
.fl-right {
float: right
}
h1 {
text-transform: uppercase;
font-weight: 900;
border-left: 10px solid #fec500;
padding-left: 10px;
margin-bottom: 30px
}
.row {
overflow: hidden
}
.card {
display: table-row;
width: 100%;
background-color: #fff;
color: #989898;
margin-bottom:20px;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
border-radius: 4px;
position: relative;
border: #2b2b2b 1px solid;
}
.card+.card {
margin-left: 2%
}
.date {
display: table-cell;
width: 45%;
position: relative;
text-align: center;
border-right: 2px dashed #dadde6
}
.date:before,
.date:after {
content: "";
display: block;
width: 30px;
height: 30px;
background-color: #DADDE6;
position: absolute;
top: -15px;
right: -15px;
z-index: 1;
border-radius: 50%
}
.date:after {
top: auto;
bottom: -15px
}
.date time {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.date time span {
display: block
}
.date time span:first-child {
color: #2b2b2b;
font-weight: 600;
font-size: 150%
}
.date time span:last-child {
text-transform: uppercase;
font-weight: 600;
margin-top: -10px
}
.card-cont {
display: table-cell;
width: 75%;
font-size: 100%;
padding: 10px 10px 30px 50px
}
.card-cont h3 {
color: #3C3C3C;
font-size: 130%
}
.row:last-child .card:last-of-type .card-cont h3 {
text-decoration: line-through
}
.card-cont>div {
display: table-row
}
.card-cont .even-date i,
.card-cont .even-info i,
.card-cont .even-date time,
.card-cont .even-info p {
display: table-cell
}
.card-cont .even-date i,
.card-cont .even-info i {
padding: 5% 5% 0 0
}
.card-cont .even-info p {
padding: 30px 50px 0 0
}
.card-cont .even-date time span {
display: block
}
.card-cont a {
display: block;
text-decoration: none;
width: 80px;
height: 30px;
background-color: #D8DDE0;
color: #fff;
text-align: center;
line-height: 30px;
border-radius: 2px;
position: absolute;
right: 10px;
bottom: 10px
}
.row:last-child .card:first-child .card-cont a {
background-color: #037FDD
}
.row:last-child .card:last-child .card-cont a {
background-color: #F8504C
}
#media screen and (max-width: 860px) {
.card {
display: block;
float: none;
width: 50%;
margin-bottom: 10px
}
.card+.card {
margin-left: 0
}
.card-cont .even-date,
.card-cont .even-info {
font-size: 75%
}
}
.page-break {
page-break-after: always;
}
</style>
<script type="text/javascript">
</script>
</body>
</html>
also, this is what my view looks like. Hope to know what part did I miss for it,every answer is highly appreciated.
Not sure if this will help but the way I execute this in my app is like so:
Maybe try storing it first then accessing it? Then delete them after 1 hour?
$pdf = PDF::setOptions(['isHtml5ParserEnabled' => true, 'isRemoteEnabled' => true])->loadView('charity.gifts.generate_ticket', compact('tickets'));
$pdf->setPaper('a4', 'landscape');
Storage::disk('reports')->put('tickets'. '.pdf', $pdf->output());
$url = Storage::disk('reports')->url('tickets'. '.pdf');
please i need help
i have my html code which working very fine ,and trying to loadview it as pdf stream
but the output pdf file , not same as html , and text not above image , but get below it
my controller code
public function pdfdownload($id)
{
$id = Crypt::decrypt($id);
$course = Course::where('id', $id)->first();
$orders = Order::where('course_id', $id)->first();
$progress = CourseProgress::where('course_id', $course->id)->where('user_id', Auth::user()->id)->first();
$pdf = PDF::loadView('front.certificate.download', compact('course', 'progress'), [],
[
'title' => 'Certificate',
'orientation' => 'L'
]);
// return $pdf->download('certificate.pdf');
return $pdf->stream('certificate.pdf');
}
my html code
<!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.0">
<title>Document</title>
<style type="text/css" media="all">
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body{
margin: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1,h2,h3,h4,h5,h6{
margin: 0 0 15px;
}
.certificate-wrapper{
max-width: 910px;
border: 1px solid #007B83;
}
.certificate-wraper img {
max-width: 100%;
}
/* certificate Antipasto Pro */
.certificate_content {
position: absolute;
top: 182px;
right: 29px;
width: 480px;
}
.certificate_content h2 {
font-size: 29px;
text-transform: uppercase;
color: #29AFA7;
margin-top: 10px;
}
.certificate_content h3 {
text-transform: uppercase;
color: #29AFA7;
font-size: 21px;
}
.certificate_content span {
text-transform: uppercase;
}
.prisciples {
font-size: 25px;
margin-top: 39px;
}
.credit {
margin-top: 27px;
}
.prof {
margin-top: 28px;
}
.date_time {
display: block;
margin-top: 66px;
margin-left: 99px;
color: #000;
font-size: 18px;
}
.code {
margin-top: 22px;
display: block;
margin-left: 83px;
font-size: 14px;
}
/* certificate-end */
.position-relative{
position: relative;
}
</style>
</head>
<body>
<div class="certificate-wrapper">
<div class="certificate-wraper position-relative certificater-img">
<img src="certi-main-bg.png" alt="">
<div class="certificate_content">
<h2>Basma sherif abd alwahab</h2>
<h3 class="prisciples">Principles of Dento-alveolar Surgery
with Live Demo on Suture Techniques</h3>
<h3 class="credit">2 creidt hours</h3>
<h3 class="prof">Prof.Ahmed Elsharkawy</h3>
<div class="certi_abs_content">
<span class="date_time"> april</span>
<span class="code">code</span>
</div>
</div>
</div>
</div>
</body>
</html>
that how img show in html page
html view
that's how pdf stream output looks like
pdf stream
please i would really appreciates any help
, how to solve that
and why pdf not view same as html >?
I think your main issue is that laravel-pdf is a wrapper for mPDF which does not support flex.
See this list for css that is supported: https://mpdf.github.io/css-stylesheets/supported-css.html
I'm making an image slider, and everything works so far but my previous and next buttons are not centering vertically on the main image. I'm trying to make it responsive as well.
I tried everything but I don't know what I'm missing. The absolute position with top: 50% doesn't seem to do the trick. Here's the codepen.
$('#imgDetail li img').click(function(){
$('#unidoor').attr('src',$(this).attr('src'));
});
$('#next').on('click',function(){
var imgSrc = $('#unidoor').attr('src');
var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').next().find('img').attr('src');
console.log(nextSrc);
nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:first').attr('src')): $('#unidoor').attr('src',nextSrc);
});
$('#prev').on('click',function(){
var imgSrc = $('#unidoor').attr('src');
var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').prev().find('img').attr('src');
console.log(nextSrc);
nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:last').attr('src')): $('#unidoor').attr('src',nextSrc);
});
* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding:0;
font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
}
.header{
margin: 0 auto;
width: 100%;
background-color: #333;
padding: 30px 0 0 0;
}
.header h1{
margin: 0;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.header ul {
list-style-type: none;
margin: 0;
/* padding: 0; */
overflow: hidden;
padding: 20px 0px 30px 0;
text-align: center;
}
.header li {
display: block;
display: inline-block;
/* border-right: 1px solid #bbb; */
border-right: 1px solid #bbb;
height: 25px;
}
.header li:last-child{
border-right: none;
}
.header li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 0px 40px;
font-size: 1em;
}
.header li a:hover{
color: #7bbe9a;
/* color: #80b198; */
}
#green-room {
background: #333 !important;
}
#unidoor {
position: relative;
width: 90%;
margin: 0 auto;
display: block;
}
#prev {
position: absolute;
top: 50%;
left: 10%;
transform: translate(-10%, -50%);
}
#next {
position: absolute;
top: 50%;
right: 10%;
transform: translate(-10%, -50%);
}
/* .previous {left: 10%;}
.next {right: 10%;} */
/* .prev-next-button a {
position: absolute;
left: 20%;
top: 20%;
} */
#imgDetail ul {
margin: 0 auto;
display: block;
width: 50%;
}
.thumb {
width: 25%;
height: auto;
margin: 15px 5px 0 5px;
}
#imgDetail li {
display: inline; margin-right: 10px;
}
#imgDetail a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
#imgDetail a:hover {
background-color: #7bbe9a;
color: white;
opacity: 1;
}
.previous {
background-color: #fff;
opacity: 0.5;
color: black;
}
.next {
background-color: #fff;
opacity: 0.5;
color: black;
}
/* .round {
border-radius: 50%;
} */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body id="green-room">
<div class="header">
<div id="title"><h1>Lorem Ipsum 3D Online Portfolio</h1></div>
<nav id="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="imgDetail">
<br>
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" alt="" id="unidoor" />
‹
›
<ul>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="thumb" /></li>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="thumb" /></li>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="thumb" /></li>
</ul>
</div>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({reset: true});
sr.reveal('#unidoor');
</script>
</body>
</html>
Hello there you can wrap the <div id="imgDetail"> in an outer div class for instance <div class="slideshow-container"> and then add your CSS which would look like this:
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
You can get the changes on codepen. Happy coding :)
I have a website I'm working on and I'm positive it is something obvious that I'm overlooking here.
My main issue and why I'm here: My page looks great in Chrome and Safari, but FF v.21 (Mac) takes the textcont and linkcont layers and puts them all the way to the right, outside of the container I have for them. I know they are floating, but I can't seem to get them to show correctly there.
*EDIT: 6-18 # 1p--*I solved the other issue, but Firefox still is putting the two inner containers OUTSIDE of the main content container.
*EDIT: 6-20 # 9:45a--*I found that if I added "Position: absolute;" to the #contentbox, everything seemed to work in Chrome, Safari, and Firefox (can't test it on IE currently), BUT my #copybox div (last layer that displays the year with copyright at the very bottom) would align overtop of the #contentbox at the top. I tried using absolute position on that div, but just made it visible, relative made it hidden--but still up top where it shouldn't be. Any ideas? If I can get the absolute positioning to work on the content, I just need a fix to keep the #copybox following the end of the #contentbox layer.
Firefox Screenshot: http://i41.tinypic.com/20t0xh0.png
Chrome/Safari (correct): http://i40.tinypic.com/a4y1ar.png
Style Code:
#charset "UTF-8";
/* CSS Document */
body {
background-color: #FAD434;
font-family: Helvetica, arial, sans-serif;
font-size: 14px;
}
#container {
width: 100%;
padding: 0px;
margin: 0 auto;
}
#headercont {
width: 900px;
margin: 0 auto;
}
#header {
width: 100%;
height: 65px;
margin: 0 auto;
background-color: #000000;
background-image:url(img/logo.png);
background-repeat: no-repeat;
background-position: left;
border-bottom: 2px solid #fad434;
}
#picheader {
height: 360px;
background-image:url(img/NHYC_BoySmile.jpg);
background-repeat: no-repeat;
background-position: top center;
}
#contentbox {
width: 100%;
background-image: url(img/content_bkgd.jpg);
background-position: bottom center;
background-repeat: repeat-x;
background-color: #ffffff;
margin-top: 0px;
padding-bottom: 50px;
}
#contentcont {
width: 900px;
margin: 0 auto;
overflow: auto;
}
#textcont {
width: 70%;
padding: 0px 0px 25px 10px;
float: left;
}
#linkcont{
width: 25%;
padding-top: 63px;
padding-right: 10px;
padding-left: 10px;
float: right;
}
#copybox {
width: 100%;
font-size: 10px;
text-align: center;
padding: 15px;
}
/* --- HEADER TEXT --- */
h1 {
font-size: 40pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
h2 {
font-size: 24 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
h3 {
font-size: 18 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
/* --- LINK LIST --- */
.links li {
list-style-type:none;
line-height: 20pt;
}
/* --- MENU --- */
#menu {
width: 100%;
margin: 0 auto;
padding-top: 325px;
}
#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
}
#menu ul li{
padding: 10px 25px;
position: relative;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-transform: uppercase;
}
#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#menu ul a:hover, #menu ul a:active {
background: #f28c3d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Index.php Code:
<!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" />
<title>NHYC - Ohio</title>
<link href="nhyc_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="headercont">
<div id="header">
<p align="right"><img src="img/socialmedia_icons.png" alt="Social Media" border="0" usemap="#socialmedia" style="padding-right:15px; padding-top: 18px;"/>
<map name="socialmedia" id="socialmedia">
<area shape="rect" coords="2,4,27,25" href="#" target="_blank" alt="Facebook" />
<area shape="rect" coords="42,4,69,24" href="#" target="_blank" alt="Twitter" />
</map>
</p>
</div> <!--End of header-->
<div id="picheader">
<div id="menu">
<ul>
<li>About Us</li>
<li>Mission</li>
<li>Services</li>
<li>Admission</li>
<li>Employment</li>
<li>Contact</li>
</ul>
</div>
<!--End of navigation-->
</div> <!--End of picheader-->
</div> <!--End of headercont-->
<div id="contentbox">
<div id="contentcont">
<div id="textcont">
<?php
if (!isset($_REQUEST['topic']))
include("aboutus.php");
else
{
$topic = $_REQUEST['topic'];
$nextpage = $topic . ".php";
include($nextpage);
} ?>
</div><!--End of textcont-->
<div id="linkcont">
<h3>Resources</h3>
<ul class="links">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div> <!--End of linkcont-->
</div>
</div> <!--End of contentbox-->
</div> <!--End of container-->
<div id="copybox">
2013 © NHYC
</div> <!--End of copybox -->
</body>
</html>
#contentbox {
overflow: hidden;
}
...will correct your issue.
You have an uncleared float there, and overflow: hidden will clear it. Read more about block formatting context (the weird hidden CSS nuance that overflow: hidden applies) here.