Background no repeat
hi. how do i make a background image not repeat in html, in a
table cell? Thanks
> I don't know if it is possible with just html
Not possible.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"cripaustin" <[email protected]> wrote in
message
news:gdkmkh$ghu$[email protected]..
> wait. sorry. false call again. ...but I did it with a
CSS style which i
> applied to the entrie cell. Seems to work fine on
firefox, safari and ie.
Similar Messages
-
Main Wrapper, Container and background-image repeat problem-and Footer :-)
Hi everyone,
First off, i tried almost every idea i could get to solve this on my own but now im...aaa...
Well, the problem is i have a main wrapper with a background image repeat. A header,menu, body container - which has a left column and right column. I want that main wrapper,body container and both of the columns to grow auto according to content. I tried the height:100%. When i float the columns the text from left column spills over on to the footer. The left column also does not autogrow towards the footer?! I was able to set the footer at the bottom which i want it to remain at the bottom of the main wrapper, but the main wrapper and the columns do not grow automatically...I guess it has something to do with float and the clear properties but what???
body{
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
font-size: 11px;
font-family: verdana;
text-align: center;
background:url(back_index3.png) repeat-x scroll 0 0 #E4E4E4;
#main_wrapper {
width: 959px;
margin:0 auto;
margin-top:80px;
background:url(backslice.png) repeat-y;
height:auto;
min-height:800px;
#header {
width: 959px;
margin-left: auto;
margin-right: auto;
height:119px;
background:red;
padding-top: 0px;
padding-bottom: 0px;
#topmenu {
background-color:#blue;
height:30px;
margin:0px;
width: 959px;
margin-left: auto;
margin-right: auto;
#body_container {
height:100%;
width: 949px;
margin: 0 auto;
#content {
float:left;
width: 645px;
background:yellow;
border-right:1px solid #ffffff;
padding:10px;
height:100%;
text-align:left;
#sidebar {
float:left;
width: 283px;
background:#234234;
height:100%;
#footer {
clear:both;
height:200px;
background-color: #686768;
margin:0 auto;
border-top: 1px solid #F6F6F6;
text-align:center;
width: 100%;
<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
<div id="header">
<span id="header_logo">title</span>
</div>
<div id="topmenu">
menu
</div>
<div id="body_container">
<div id="content">
content to be added
</div>
<div id="sidebar">
hallow2
</div>
</div>
</div>
<div id="footer">
asd
</div>
</body>
</html>
Thanks in advance if somebody can help me out here.
you can see an image of the problem in the attachement down thr... thnx<html xmlns="">
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="3css.css" />
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<div id="main_wrapper">
<div id="header">
<span id="header_logo">title</span>
</div>
<div id="topmenu">
menu
</div>
<div id="body_container">
<div id="content">
content to be added
</div>
<div id="sidebar">
hallow2
</div>
</div>
</div>
<br clear="all" />
<div id="footer">
asd
</div>
</body>
</html>
Hope this will work well -
Preview what a background 'Image Repeat' will look like?
I want to preview some website background images that I have which are 1 pixel wide without having to upload to the website and refresh the page. Is there a way to preview images repeating in either Adobe Bridge or Adobe Photoshop or any product in the Adobe Creative Cloud for that matter without having to upload to the website and refresh the page? I would ideally like to scroll through the images and have it simulate the repeat horizontal style.
Not sure that is what I'm looking for.
I have over 2000 different gradients for website backgrounds that I just want to scroll through to pick the one I want but I need the image to repeat horizontally so that I can see it because it's only 1 pixel wide ...
Ideally, I would like to just be able to hit my arrow key down and down and down and preview what the background would look like super quickly so I can pick the one I like best.
Hopefully that makes better sense.
Thanks!
Something like this website, but where i don't have to upload files to the web.
http://lab.rails2u.com/bgmaker/ -
Background Image repeating for table cells
I am trying to put different images as the background to all
the cells in a table, so I can put text over the top of them, but I
cant have an image without it repeating. Ive tried going into the
code and adding background-image: "no-repeat" but that hasn't
worked. I know nothing of CSS and it seems really confusing - so if
this is the answer please give me CSS for dummies instructions.
Layers drive me bonkers as no 2 browsers display them in the same
place.
URL is:
http://www.visionsportsmedia.com/BillyTestSite/test
At the moment only cell one is a background image, the rest
are images inserted normally.
Hope you can help.
Thanks.Your question reflects the confusing mess your life will be
if you persist
with web authoring without taking the time to learn some HTML
and CSS.
You have -
<th height="351" colspan="6" "scope="col">
Note the extra doublequote just before 'scope'.
Also note that your preloads (look at the body tag) as well
as your image
swaps (look elsewhere - everywhere you see 'file:///') are
all broken -
pointing to files on your hard drive. Finally, you might want
to just think
about making a page where there is no readable content
(everything here is
in images). It will get a zero search engine ranking....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"little bob" <[email protected]> wrote in
message
news:gqo8jh$ejo$[email protected]..
>I am trying to put different images as the background to
all the cells in a
> table, so I can put text over the top of them, but I
cant have an image
> without
> it repeating. Ive tried going into the code and adding
background-image:
> "no-repeat" but that hasn't worked. I know nothing of
CSS and it seems
> really
> confusing - so if this is the answer please give me CSS
for dummies
> instructions. Layers drive me bonkers as no 2 browsers
display them in the
> same
> place.
>
> URL is:
http://www.visionsportsmedia.com/BillyTestSite/test
>
> At the moment only cell one is a background image, the
rest are images
> inserted normally.
>
> Hope you can help.
>
> Thanks.
> -
CSS - background image repeat-y
Hello,
QUESTIONThis works great in IE v6.0. How can I get the
background position to work in Firefox 2.0?
Instead of a tiled background that I can control where it
begins to tile within a DIV, in Firefox 2.0 it displays
the image once and doesn't tile like it does in IE. Argh!
background-image:
url(images/SideNav/side_nav_bottom_repeat.gif);
background-repeat: repeat-y;
background-position: 0% 218px;
I just went through a CSS training video and applied some of
the things taught.
It was very helpful thanks you. However it worked in IE but
not in Firefox.
http://movielibrary.lynda.com/html/modPage.asp?ID=279
5. Adding Colors and Backgrounds
Movie: Positioning backgrounds
Is there a work around for Firefox?Zero is zero no matter what units you have on it. I am not
aware of any
mixed unit issue like that.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Alexander Ross" <[email protected]> wrote in message
news:f0rkhi$kht$[email protected]..
>I have some vague recolection about weird behaviors with
mixed units. Try:
>
> background-position: 0px 218px;
>
> If not, post a link to your page
>
>
>> background-image:
url(images/SideNav/side_nav_bottom_repeat.gif);
>> background-repeat: repeat-y;
>> background-position: 0% 218px; -
Background image repeat-y not showing
I have done a search here without success.
I have a rough setup of a site that will show the background
repeat-y in a div in IE but will not display it in firefox or
safari.
My css and and xhtml validate W3C.
I am no pro and have tried several things I can think of
without any luck.
Here is the url
http://www.asmc.ca/index2.html
Thanks in advanceThe problem was that the div on which the background image
was applied was
collapsing around its non-floated descendents. You needed to
do something
to clear those floats before closing the div#innerwrapper.
The
'overflow:hidden' style forces the browser to establish a new
block context
for that div, effectively clearing the floats within, and
allowing the div
to wrap even the floated elements.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Bryan628" <[email protected]> wrote in
message
news:g6qsdt$350$[email protected]..
> Thanks Murray,
> That did the trick. So it was happening for 2 reasons?
> 1 the div I had it on?
> 2 the overflow hidden code?
>
> What does the overflow hidden mean/do
> And thanks again guys
>
>
>
quote:
Originally posted by:
Newsgroup User
> Change your #innerwrapper rule to this -
>
> #innerwrapper {
> height: auto;
> width: 768px;
> background: url(images/body_bkgrnd.jpg) repeat-y;
> overflow:hidden;
> }
>
> and see if that helps.
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> ==================
>
>
> "Bryan628" <[email protected]> wrote in
message
> news:g6qqk1$1ag$[email protected]..
> > And thanks for your time.
> >
http://www.asmc.ca/index2.html
> >
> > Bryan
>
>
>
>
> -
Background image repeat, like css repeat_y
I imagine this is possible, but I haven't figured it out as yet.
I simply want to add a background image that does not scale, but functions exactly like a HTML/CSS background:
background-repeat: repeat-y;
background-position: left top;
Thanks.Just because the swc is 700 kb doesn't mean your project will increase by that amount.
Only classes that are actually being used are compiled into your project.
As an alternative, you can use this simple class I wrote:
http://muzakdeezign.com/flex3/flex3lib/ImageTile.as
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:display="com.muzakdeezign.flex.display.*"
layout="absolute"
backgroundColor="#282E3E"
backgroundImage=""
>
<!-- only repeat x-axis -->
<display:ImageTile width="100%" height="1200" source="@Embed('skins/bg.png')" includeInLayout="false" />
<!-- repeat x-axis y-axis -->
<!--<display:ImageTile width="100%" height="100%" source="@Embed('skins/bg.png')" includeInLayout="false" />-->
<!-- only repeat y-axis -->
<!--<display:ImageTile width="800" height="100%" source="@Embed('skins/bg.png')" includeInLayout="false" />-->
</Application> -
Background image repeating, even with no-repeat?
I can't seem to figure out why my background image is repeating in Safari. I have set the page properties to no-repeat and it is working well in Firefox (Mac), but in Safari, my background image is repeating. Does anyone have any suggestions? Thanks so much.
Url: http://www.aquapup.com/zoe/author.htmlWhich background are you seeing repeat? I presume it's the ../zoe/images/Zoe_site_off_01.jpg one, but I'm not seeing it repeat in Safari.
.zoetextbackground {
background-image: url(../zoe/images/Zoe_site_off_01.jpg);
background-repeat: no-repeat;
.buglettetextbackground {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
line-height: 18px;
font-weight: normal;
padding-left: 180px;
padding-right: 340px;
position: relative;
vertical-align: middle;
background-image: url(../zoe/images/Zoe_site_off_01.jpg);
background-repeat: no-repeat;
.buglettetextbackground_book {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 13px;
line-height: 18px;
font-weight: normal;
padding-left: 410px;
padding-right: 360px;
position: relative;
vertical-align: middle;
background-image: url(../zoe/images/Zoe_site_off_01_alt.jpg);
background-repeat: no-repeat; -
Can I make background no repeat without styles?
I know that body background is deprecated in favor of using a style BUT I have a need to write a very old school html version of a business card type of Outlook 2007 "signature". Styles seem to not be recognizable when following the method for an html signature in Outlook so I first went way back to tables and loose images and background colors etc which worked but it would be a lot nicer if I could use a background image on the body tag.
So I am trying to get just one background image with no repeat using plain old html and no styles.
I can do it with this code but it repeats. <body background="Email-Sig-bkg.jpg">
This did not stop the repeating either <body bgproperties=fixed background="Email-Sig-bkg.jpg">
I saw one post that said it can not be done without styles or css.
Can anyone confirm so that I give up searching?
here is a link to the signature done WITH styles but which now must be re coded with no styles. The text areas must be editable in outlook 2007 when added as a "signature"
http://www.freshcreativeinc.com/testing/dynamicsignature/mascosig1.html
Thanks JimBackground images are not supported in all email clients.
How to Code HTML Emails
http://www.sitepoint.com/article/code-html-email-newsletters/
Use inline CSS styles for fonts and background colors. Use Tables to hold
your page elements. Use absolute URLs to images on your web server. And
give people who can't see your HTML page in their email client a link to the
HTML page on your web server.
Chart showing how various email clients handle CSS.
http://www.campaignmonitor.com/css/
Download some HTML Email Templates from the links below to get started.
Mail Chimp
http://www.mailchimp.com/resources/html_email_templates/
Constant Contact
http://www.constantcontact.com/email-marketing/html-email-templates/index.jsp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com -
NavBar Background Image repeats in Netscape
Portal generates the following HTML to place an image in a NAVBAR:
<TABLE BORDER="0" class="RegionBorder" background="http://www.gevityhr.com/pls/portal30/docs/293.GIF" CELLSPACING="0" CELLPADDING="0" WIDTH="100%">
This works great in IE 5.0 the image shows up once. In Netscape 4.x the image repeats for each navbar element.On Sun, 25 Jun 2006 00:29:18 +0000 (UTC), "Hydrowizard"
<[email protected]> wrote:
> Also for some reason the background image in the navbar
div is not shown in
>macs using firefox and mozilla (internet explorer in macs
shows it) and linux
>users. What is the cross browser solution for this?
Thanks
Could it just be timing out? The server is EXTREMELY slow.
Gary -
Repeating background not repeating fully
Hi, on the page I have created below, I have made links with the green repeating background that can be seen. However I'm trying to get the background to expand to the width of the page. I've done this before successfully but when I enter my css to do it again, there must be an error.
http://angelsmovingservices.comkarina1717 wrote:
Hi, on the page I have created below, I have made links with the green repeating background that can be seen. However I'm trying to get the background to expand to the width of the page. I've done this before successfully but when I enter my css to do it again, there must be an error.
http://angelsmovingservices.com
Use this CSS and it should work:
#wrapper #header {
/* float: left; */
width: 980px;
text-align: center;
background-image: url(http://angelsmovingservices.com/images/movers-button.jpg);
background-repeat: repeat-x;
I have removed the float by commenting it out and also inserted the image to the header. this means you don't need that image in the next CSS covering links.
#wrapper #links {
width: auto;
height: 35px;
background-color: #5A7F0E;
/* background-image: url(http://angelsmovingservices.com/images/movers-button.jpg);
background-repeat: repeat-x; */
Good luck. -
Cell background not repeating?
Ok I have a site that has a ton of cells and tables
everywhere. It was made in Photoshop, sliced up in Fireworks, and
put together in Dreamweaver. The only issue I have is that the nav
goes along the left and top, and the rest of the area is for
content. Well, of course each page will have different content, and
the page needs to scroll down to accommodate however long it is.
But the cell along the left will not repeat its background image,
leaving a huge gap! Unless I sit there and put a million <br>
tags in it, it does this. I have tried everything, including
background-repeat CSS tags in the img src line. I don't get it!
Check it out:
Error site
You can see the huge black space in the two cells on the
left, where the background images are not repeating. They only show
up near the bottom.
I'm sure the best answer would be to put the entire table
together differently and completely re-design it, but I honestly
can't because within a couple of days I have to be able to hand
this template over to someone who knows nothing about HTML, and
have them add/edit pages in Contribute from here on out. I can't
exactly tell them "Oh just press enter a million times in that cell
until it seems like it's the right length"...
Thanks SO much in advance!!>>It was made in Photoshop, sliced up in Fireworks, and
put together in
>>Dreamweaver
A sure recipe for disaster and probably the root of all your
problems. When
one constructs, or rather "kludges" a website that way, they
generally
produce exactly what you are describing: an inflexible,
fragile site.
If you want it to work properly the best way is to start over
and construct
it correctly. Create only your graphics in Photoshop or
Fireworks and the
construct your site in DW using valid HTML & CSS.
Sorry. Web design and construction is not easy or simple, if
you want to do
it well that is.
Walt
"Nightywolf" <[email protected]> wrote in
message
news:[email protected]...
> Ok I have a site that has a ton of cells and tables
everywhere. It was
> made in
> Photoshop, sliced up in Fireworks, and put together in
Dreamweaver. The
> only
> issue I have is that the nav goes along the left and
top, and the rest of
> the
> area is for content. Well, of course each page will have
different
> content, and
> the page needs to scroll down to accommodate however
long it is. But the
> cell
> along the left will not repeat its background image,
leaving a huge gap!
> Unless
> I sit there and put a million <br> tags in it, it
does this. I have tried
> everything, including background-repeat CSS tags in the
img src line. I
> don't
> get it!
>
> Check it out:
>
http://www.misspijon.com/error/oct1.htm
>
> You can see the huge black space in the two cells on the
left, where the
> background images are not repeating. They only show up
near the bottom.
>
> I'm sure the best answer would be to put the entire
table together
> differently
> and completely re-design it, but I honestly can't
because within a couple
> of
> days I have to be able to hand this template over to
someone who knows
> nothing
> about HTML, and have them add/edit pages in Contribute
from here on out. I
> can't exactly tell them "Oh just press enter a million
times in that cell
> until
> it seems like it's the right length"...
>
> Thanks SO much in advance!!
> -
RAR5.3 - Alert Generation background job repeatedly errors out
Hello,
We have an Alert Generation job that we've set up to run daily on
PR2/150 strictly for the Transaction Usage Report. We do not
use Alerts so the only parameter we set for this job is "Generate
Action Log." The job will run anywhere from 2 to 4 hours before it
errors out. Every time this job, this process overflows its allotment
on the backend of 4GB and consequently creates a system dump. The job
is just too big.
We've reviewed the powerpoint "Risk Analysis and Remediation Alerts,
Jayne Gibbon, Director of GRC Support, August 15 2008"
This powerpoint basically says Alert Generation jobs should run every 1-
4 hours, otherwise they can get very large. We applied note 1015921 to
change the Last Run Date in order to decrease the size of the job. The
farthest we were able to set the Last Run Date back and have the alert
generation job run successfully was 2 minutes. This is unacceptable for
us as we need the jobs to at least run for 1 hour time periods.
What can we do to ensure our alert generation jobs complete
successfully in a manageable time period?
Any info or guidance would be greatly appreciated!
Jes Behrens
Edited by: Jes Behrens on Jan 20, 2009 10:47 AMthere seems to be a problem with the SID table of your master data. test it with RSRV and repair any errors.
if this doesn't help return to the forum -
Dynamic / re-sizing repeatable background
I need a dynamic / re-sizing repeatable background. It's a
200,200,200 to 255,255,255 gradient so I don't care about
distortion. I can't rationalize with the boss he wants it full
screen gradient no matter the resolution and he's driving me nuts.
Thanks,
Bill
Edit:
Here's my code:
<style type="text/css">
<!--
body {
background-image:
url(/images/NBG%20Shared/Silver_Gradient_Background.gif);
background-repeat: repeat;
-->
</style>
The background doesn't even show up when I preview it. I've
searched every help forum I can find on this and all are about
non-repeating backgrounds not showing up.1. Don't use spaces in your filenames
1b. Backgrounds normally repeat, so it's not necessary to
restate that -
> background-repeat: repeat;
2. Rush your boss to the mental institution
3. This is not a resolution issue, it's a browser viewport
size issue
4. Rush your boss to the loony bin
5. To do this, you'd have to -
a. load the page
b. sniff the available space with client-side javascript
c. send the results back to the server so that a script there
can
dynamically resize the image to be used
d. fetch the image and page again
e. finally display it with the resized image
It's completely nuts....
This is why they say that bosses are like seagulls - they fly
in, crap on
everything, and then fly away.
> The background doesn't even show up when I preview it.
No doubt it's because you have used a root relative link to
the background
image, but do not have preview with temp files enabled in
your preferences.
The only way you can see images linked with root relative
links in a preview
is with temp files enabled.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"William Rickert" <[email protected]> wrote
in message
news:[email protected]...
>I need a dynamic / re-sizing repeatable background. It's
a 200,200,200 to
> 255,255,255 gradient so I don't care about distortion. I
can't rationalize
> with
> the boss he wants it full screen gradient no matter the
resolution and
> he's
> driving me nuts.
>
> Thanks,
> Bill
>
> Edit:
>
> Here's my code:
>
> <style type="text/css">
> <!--
> body {
> background-image:
>
url(/images/NBG%20Shared/Silver_Gradient_Background.gif);
> background-repeat: repeat;
> }
> -->
> </style>
>
> The background doesn't even show up when I preview it.
I've searched every
> help forum I can find on this and all are about
non-repeating backgrounds
> not
> showing up.
> -
WEBSITE PAGE NOT SHOWING UP IN IE9..ONLY THE BACKGROUND SHOWS UP..
IN FIREFOX AND IE9, I'VE BEEN CREATING THIS SITE. HTML5. NOW, HERE I AM ALMOST DONE WITH THE SITE AND WHEN I DO THE MEDIA PAGE..... IT SEEMS TO ONLY SHOW THE BACKGROUND IN IE9..EVEN AFTER I DELETED IT.. THAT SPECIFIC PAGE (videos.html) IS ONLY DISPLAYING THE BACKGROUND. EACH PAGE I DO, I'VE TESTED THEM IN BOTH BROWSWERS..... KEEPING EVERYTHING THE SAME EXCEPT FOR THE CONTENT WITHIN THE ARTICLE....
Here's the Code initially, I'm sure there are erros obviously so guys just help me and don't be rude, if you will. I appreciate it greatly.
HERE'S WHAT IT LOOKS LIKE IN FIREFOX:
HERE'S WHAT IT LOOKS LIKE IN IE9:
HERE'S THE CODE:
(IT'S NEAT IN DREAMWEAVER) BUT... I JUST COPIED AND PASTED IT ONTO HERE.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta content="DahJ" name="author">
<meta content="DahJ, Derek, Alton Hill, Dahari, financial freedom, Designer DahJ, Mogul DahJ, Dahari Fashions, university, ministries, Salem, Dahj University, chancellor, business, success, successful, North Las Vegas, Derek, , Coach, mentor, Philanthropist, Best-Selling Author, Author, life-coach, life, " name="keywords">
<meta content="DAHJ videos, photos, and blog: Official Website" name="description">
<title>Media - DAHJ videos, photos, and blog: Official Website</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
color: #000;
background:url(Images/websitebackgroundhomee.jpg) repeat scroll 0 0;
font-family: David;
font-size: 15px;
height:100%;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h2, h4, h5, h6, p {
margin-top: 0;
padding-left: 15px; /* adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
font-family: David;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ This fixed width container surrounds all other blocks ~~ */
.container {
width: 960px;
margin: 0 auto;
border-radius: 5px;
-moz-border-radius: 5px;
-moz-box-shadow: 0 5px 3px 3px #7d7f7e;
-webkit-box-shadow: 0 5px 3px 5px #7d7f7e;
box-shadow: 0 5px 3px 3px #999;
background-image: url(Images/contentbckgrnds/videocontent.jpg);
/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */
header {
height: 520px;
width: 960px;
background-position: center;
background-color: #000;
h1 {
font-family:Century Gothic;
padding-left:11px;
font-weight:lighter;
h1 a:hover {
color:#09F;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the block elements. The elements within these blocks have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the block itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the block element and place a second block element within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a block set to float right). Many times, padding can be used instead. For blocks where this rule must be broken, you should add a "display:inline" declaration to the block element's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar blocks could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the blocks around in the HTML source.
.sidebar1 {
float: right;
width: 300px;
background: #fff;
padding-bottom: 10px;
.content {
padding: 0px 0;
width: 960px;
float: right;
background-color: #FFF;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The footer ~~ */
footer {
padding: 10px 0;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
background-color: #CCC;
background-image: url(Images/footer2.jpg);
/*HTML 5 support - Sets new HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, nav, article, figure {
display: block;
aside {
.homebutton{
background: no-repeat scroll 0 0 transparent;
height:65px;
left:-1.2em;
position:relative;
top:-3.4em;
width:172px;
z-index:20;
h3 {
font:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:small;
padding-left:15px;
/* THIS IS MY FOOTER'S FONT AND TEXT */
address {
font-style:Century Gothic;
color:#FFFFFF;
text-decoration:none;
text-align:center;
font-style:normal;
address a:link {
color:#0CF;
address a:link, a:hover {
color:#33CC33;
/* THIS IS MY SOCIAL MEDIA LINKS, TITLES, AND COUNTS..... FACEBOOK, TWITTER, YOUTUBE */
#socialmedia {
list-style:none outside none;
display:block;
margin:15px 145px 0px;
position:relative;
.twitter {
display:inline;
margin-left:135px;
.facebook {
display:inline;
.youtube {
display:inline;
margin-left:135px;
#socialmediatitles {
list-style:none outside none;
display:block;
margin:15px 190px 5px;
position:relative;
font-family:Century Gothic;
font-size:22px;
color:#ffffff;
width:800px;
.twitterfollowers {
display:inline;
margin-left:160px;
color:#ffffff;
.twitterfollowers a:link {
color:#ffffff;
.facebookfans a:link {
color:#ffffff;
.youtubesubs a:link {
color:#ffffff;
.facebookfans {
color:#ffffff;
display:inline;
.youtubesubs {
display:inline;
margin-left:135px;
color:#ffffff;
#socialmedianumbers {
list-style:none outside none;
display:block;
margin:15px 185px 5px;
position:relative;
font-family:Century Gothic;
font-size:30px;
color:#ffffff;
width:800px;
.twittercount {
display:inline;
margin-left:150px;
color:#ffffff;
.twittercount a:link {
color:#ffffff;
.facebookcount a:link {
color:#ffffff;
.youtubecount a:link {
color:#ffffff;
.facebookcount {
color:#ffffff;
display:inline;
.youtubecount {
display:inline;
margin-left:135px;
color:#ffffff;
div#voverlay {
background:#FFF;
display:none;
height:480px;
padding:35px;
width:640px;
div#voverlay .close {{
cursor:pointer;
height:35px;
position:absolute;
right:5px;
top:5px;
width:35px;
background:#999;
div#vcontainer {
background: url("loading.gif") no-repeat scroll 50% 50% transparent;
height:100%;
left:0;
top:0;
width:100%;
.videogallery {
width:871px;
.videogallery a {
color:#333333;
display:inline-block;
font:12px/18px "Centurty Gothic";
margin:3px;
opacity:0.87;
position:relative;
text-align:center;
text-decoration:none;
veritcal-align: top;
width:240px;
.videogallery a img {
border:medium none;
display:block;
margin:0;
.videogallery span {
display:block;
.videogallery a.videolb {
display:none;
</style>
<style media="screen,print,projection" type="text/css">
#mediaxmedia{ height:823px; border:none;}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<link href="CSS/dropDown3.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="CSS/videolightbox.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="media_videolb/overlay-minimal.css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<header></header>
<!----START OF NAVIGATION MENU---->
<div id="navMenu">
<ul>
<li></li>
</ul> <!-- end inner UL -->
<ul>
<li><a href="http://www.dahj.com/recent-activity">ACTIVITY</a></li>
</ul> <!-- end inner UL -->
<ul>
<li><a href="http://www.dahj.com/latest-news">NEWS</a></li>
</ul> <!-- end inner UL -->
<ul>
<li><a href="http://www.dahj.com/photogallery">MEDIA</a>
</ul> <!-- end inner UL -->
<ul>
<li><a href="http://www.dahj.com/coaching">COACHING</a></li>
</ul> <!-- end main UL -->
<ul>
<li><a href="http://www.dahj.com/shop">SHOP</a></li>
</ul> <!-- end inner UL -->
<ul>
<li><a href="http://www.dahj.com/about">ABOUT</a></li>
</ul> <!-- end inner UL -->
<p><br class="ClearFloat" />
</p>
</div>
<!-- end navMenu -->
<!--------START OF DAHJ HOME ICON------->
<div class="homebutton">
<a href="http://www.dahj.com"><img src="Images/websiteicons/bg_logo_new_0.png" width="172" height="61"></a>
</div>
<!-- END OF DAHJ HOME ICON BUTTON ------>
<article class="content">
<br>
<!--------VIDEO CONTENT BEGINS HERE--------->
<div id="voverlay">
<a class="close"></a>
<div id="vcontainer"></div>
</div>
<center>
<!-- Start VideoLightBox.com BODY section -->
<div class="videogallery">
<a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=39862994&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="Hearing His Voice"><img src="Images/video thumbs/0.png" alt="Hearing His Voice" /><span></span></a>
<a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=39862218&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="The Trust Fund from ManPower 2010"><img src="Images/video thumbs/1.png" alt="The Trust Fund from ManPower 2010" /><span></span></a>
<a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=39861243&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="What He Put In You Then Will Work For You Now"><img src="Images/video thumbs/2.png" alt="What He Put In You Then Will Work For You Now" /><span></span></a>
<a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=39031081&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="The Word 101 - Back to the Basics"><img src="Images/video thumbs/3.png" alt="The Word 101 - Back to the Basics" /><span></span></a>
<a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=36932142&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="Tough Love - Pastor Sheryl Brady"><img src="Images/video thumbs/4.png" alt="Tough Love - Pastor Sheryl Brady" /><span></span></a>
<a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=35261687&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="Just Calm Down - Pastor Sheryl Brady"><img src="Images/video thumbs/5.png" alt="Just Calm Down - Pastor Sheryl Brady" /><span></span></a>
<a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=28674599&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="How to Seduce Proof Your Life"><img src="Images/video thumbs/6.png" alt="How to Seduce Proof Your Life" /><span></span></a>
<a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=36249630&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="iHeart TPHND - Part 1"><img src="Images/video thumbs/7.png" alt="iHeart TPHND - Part 1" /><span></span></a>
<a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=36666455&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="iHeart The Potter's House North Dallas - Part 2"><img src="Images/video thumbs/8.png" alt="iHeart The Potter's House North Dallas - Part 2" /><span></span></a>
<a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=37080493&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="iHeart The Potter's House North Dallas - Part 3"><img src="Images/video thumbs/9.png" alt="iHeart The Potter's House North Dallas - Part 3" /><span></span></a>
<a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=37535503&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="iHeart TPHND - Part 4"><img src="Images/video thumbs/10.png" alt="iHeart TPHND - Part 4" /><span></span></a>
<a class="voverlay" href="http://vimeo.com/moogaloop.swf?clip_id=22007961&server=vimeo.com&show_title=1&show_byline= 1&autoplay=1" title="My grandson Jaden playing the drums"><img src="Images/video thumbs/11.png" alt="My grandson Jaden playing the drums" /><span></span></a>
</div>
<script src="js/jquery.tools.min.js" type="text/javascript"></script>
<script src="js/videolightbox.js" type="text/javascript"></script>
<!-- End VideoLightBox.com BODY section -->
</center>
<br>
</article>
<!----------------VIDEO CONTENT ENDS HERE------------------>
<!-----------------NUMBERS BOTTOM ------------>
<!-----------------END NUMBERS BOTTOM---------->
<!-- end .content -->
<footer>
<br>
<br>
<!-----------START SOCIAL MEDIA ICONS---------->
<div id="socialmedia">
<div class="facebook">
<a href="http://facebook.com/dahj"><img src="Images/websiteicons/icontexto-inside-facebook.png"></a>
</div>
<div class="twitter">
<a href="http://twitter.com/officialdahj"><img src="Images/websiteicons/icontexto-inside-twitter.png"></a>
</div>
<div class="youtube">
<a href="http://youtube.com/dahj"><img src="Images/websiteicons/icontexto-inside-youtube.png"></a>
</div>
</div>
<!-------------END SOCIAL MEDIA ICONS------>
<!-------------START OF SOCIAL MEDIA TITLES------------>
<div id="socialmediatitles">
<div class="facebookfans">
<a href="http://facebook.com/dahj">FANS</a>
</div>
<div class="twitterfollowers">
<a href="http://twitter.com/officialdahj">FOLLOWERS</a>
</div>
<div class="youtubesubs">
<a href="http://youtube.com/dahj">SUBSCRIBERS</a>
</div>
</div>
<!------------END OF SOCIAL MEDIA TITLES---------------->
<address>
<br>
<br>
©2012 Copyright | <a href="http://dahj.com/privacy-policy">Privacy Policy/Your Privacy Rights</a> | <a href="http://dahj.com/terms-of-use">Terms of Use</a> | <a href="http://dahj.com/contact-information">Contact US</a> | <a href="http://dahj.com/feedback">Feedback</a>
</address>
</footer>
<!-- end .container -->
</div>
</body>
</html>I am not sure what's happening with IE9 (no live site) but I had real problems viewing your code in Live View - until I removed the HTML comment marked below. Basically your site was viewable in Design View but as soon a I hit Live view, it disappeared - much like IE9. See if removing the comment solves your issue.
<style type="text/css">
<!-- /*Remove this */
body {
margin: 0;
padding: 0;
color: #000;
background:url(Images/websitebackgroundhomee.jpg) repeat scroll 0 0;
font-family: David;
font-size: 15px;
height:100%;
Maybe you are looking for
-
Why can't I create a response to an email from the Viewer window?
Why can't I create a response to an email from the Viewer window? When I select an email to respond to in the viewer window and click on the respond arrow that appears just under the header, a new response email opens for a split second then disappea
-
13in Late 2013 Retina Macbook Pro Battery Punctured
Hello! I have purchased a late 2013 Macbook Pro with Retina display (13 inch Haswell, 256 gb SSD, 8 gb ram) at the end of October 2013. Of course, I have had the system hang issue that affected so many late 2013 devices. But, just as I was about to r
-
Trying to return a Hashtable object
Hi, I'm trying to return a Hashtable object from a method defined as: public static Hashtable getValues(String str){ In the calling method, I'm using: Hashtable<Object,Object> table=new Hashtable<Object,Object>(); table=(Hashtable<Object,Object>)Test
-
Delete sound in video, keep sound from audio
I have a project with over 400 clips and wish to delete or minimize the audio from the video. I have created a soundtrack of songs that are in the audio. I am hoping to avoid lowering the audio in the video clips. I have highlited all of the clips an
-
ITunes 9: Can I have different views for different libraries?
In iTunes 8 I was able to have different views for viewing different libraries. For example, I had my music library in Grid view and my podcast library in list view. When I change between the two libraries in iTunes 9 the view does not automatically