|
HTML - My Header Is Purple?
I have this theme that I'm using for a project and I can't find where I made the mistake in the HTML ... the Header/title is supposed to be the color of the text, but for some reason it's purple ...
This is the website: http://simplybeautifulinmtl.tumblr.com/ And this is the HTML (I deleted a bunch of it that had no relevance and this is what's left ... I know it's asking a lot but can someone help me?): HTML 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{Title}</title>
<META NAME="Title" CONTENT="{Title}">
<META NAME="Description" CONTENT="{MetaDescription}">
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<meta name="color:Title" content="#fffdf7"/>
<meta name="color:Background" content="#fff"/>
<meta name="color:Text" content="#fffdf7"/>
<meta name="color:Link" content="#000000"/>
<meta name="color:LinkHover" content="#fffdf7"/>
<meta name="color:LinkBackground" content="#FFECF3"/>
<meta name="color:LinkHoverBackground" content="#F1F0F0"/>
<meta name="color:DescriptionBackground" content="#F1F0F0"/>
<meta name="if:Large Photos" content="1"/>
<meta name="if:Show Archive Link" content="1"/>
<meta name="if:Show RSS Link" content="1"/>
<meta name="if:Show Random Link" content="0"/>
<meta name="if:Show Likes Link" content="0"/>
<meta name="if:Show Mobile Link" content="0"/>
<meta name="if:Show Description" content="0"/>
<meta name="if:Fixed Header" content="1"/>
<meta name="if:InfiniteScroll" content="0"/>
{block:IfInfiniteScroll}
<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/mFbkoqlkr/tumblrautopager.js"></script>
{/block:IfInfiniteScroll}
</script>
<style type="text/css">
hr { display:none; }
img { border:0px; }
body {
background: {color:Background};
color:{color:Text};
font-family:' georgia, sans-serif;
font-size: 0.75em; /* 12px */
margin:0px;
padding:0px;
letter-spacing: 0.1em;
}
}
}
a:focus { outline: none; }
/* ---------------------------------------------------- Funky **** ------------------ */
::selection,
a::selection,
img::selection {
background: {color:Text};;
color: {color:Text};;
}
::-moz-selection {
background: {color:Text};;
color: {color:Text};;
}
/* ---------------------------------------------------- Header ------------------ */
header {
display: block;
margin: 40px auto 20px auto;
width: 820px;
text-align: center;
}
header.fixed {
position: fixed;
width: 100% !important;
}
header h1 {
font-family: Georgia, sans-serif;
display: block;
font-size: 4em;
-webkit-margin-befo 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
margin-bottom: 5px;
font-weight: normal;
color: {color:Text};
}
header h1 a {
font-weight: normal;
text-decoration:none !important;
}
nav a {
color: {color:Text};
padding: 3px 5px 1px 5px;
margin: 0 2px;
background: {color:LinkBackground};
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none !important;
}
nav a:hover {
color: {color:Text};
background: {color:LinkHoverBackground};
}
div.wrapper {
display: block;
margin: 0px auto 100px auto;
{block:IfFixedHeader}
padding: 115px 0 0 0;
{/block:IfFixedHeader}
width: 500px;
text-align: center;
color: {color:Text};
}
div.description {
float:left;
margin-top:0px;
padding: 5px 10px;
}
/* ---------------------------------------------------- Text ------------------ */
.text {
width: 500px;
margin: 25px auto 125px auto;
line-height: 1.6em;
}
.text .caption {
font-size: 1.66em; /* 20px */
text-decoration:none !important;
}
/* ---------------------------------------------------- Stuff ------------------ */
div.tumblrAutoPager_page_info {
display:none;
}
#back-top {
position: fixed;
right: 15px;
bottom: 10px;
font-size: 0.83em;
}
#back-top a {
color: {color:Text};
padding: 3px 5px 1px 5px;
margin: 0 2px;
background: {color:LinkBackground};
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration:none !important;
}
#back-top a:hover {
color: {color:Text};
background: {color:LinkHoverBackground};
}
{CustomCSS}
</style>
</head>
<body>
<header {block:IfFixedHeader}class="fixed"{/block:IfFixedHeader}>
<h1><a href="/">{Title}</a></h1>
<nav>
</nav>
</header>
<div class="wrapper">
{block:IfShowDescription}
{block:Description}
<div class="description">
{Description}
</div>
{/block:Description}
{/block:IfShowDescription}
</div>
<!---------------------------------------------------------------------------- POSTS ----->
<Div class="autopagerize_page_element" id="posts">
{block:Posts}
{block:Text}
<div class="text">
{block:Title}<a {block:IndexPage}href="{Permalink}"{/block:IndexPage} class="caption">{Title}</a>{/block:Title}
{Body}
{block:Date}
<div class="permalink"><a href="{Permalink}" class="permalink">❖</a></div>
{/block:Date}
</div>
{/block:Text}
Similar Tutorialshow do I make it so that a regular html image link (<a href="bla.html"><img src="bla.png"></a>) does have the blue frame around when it hasn't been clicked and the purple when it has? Thanks For some reason, in IE8 (or all IE's, for all I know) there is a mysterious little purple line at the bottom left corner of all of my navigation button images, excluding the first one. In FF it works just fine..Chrome, Safari and Opera I don't have, so for all I know it could just be FF that's displaying it correctly. Here's my code: HTML HTML Code: <a href="index.html" style="margin:0"> <img src="images/nav_home.png" alt="HOME" onmouseover="this.src='images/nav_home_hover.png';" onmouseout="this.src='images/nav_home.png';" /> </a> <a href="the-author.html"> <img src="images/nav_author.png" alt="THE AUTHOR" onmouseover="this.src='images/nav_author_hover.png';" onmouseout="this.src='images/nav_author.png';" /> </a> <a href="contact.html"> <img src="images/nav_contact.png" alt="CONTACT US" onmouseover="this.src='images/nav_contact_hover.png';" onmouseout="this.src='images/nav_contact.png';" /> </a> CSS Code: img
{
border: 0px;
margin-left: 1.75em;
}
I also attached a screenshot. Thanks, C-Style http://profile.myspace.com/index.cfm...ndID=450190416 im trying to make all that white space to that same purple 990088 i think it is what code would i put into the layout code to do that? I have a webpage filled with url links and of course the text turns purple when clicked on. How do I change this so the text stays blue even after being clicked on? Do I have to add html code for each link, or is there a way to do it for the entire page? I'm making an HTML design on notepad, and I got some images for links, but when I view it on a webpage, the images have a purple border. How to I remove this? Hi, I am using Dreamweaver CS3 to create a site, by default i have learnt that when you use an image as a link to another page, dreamweaver creates a coloured border around your linked image. I have since been able to get rid of this border by adding border="0" into my img tag however this now has caused my rollover not to work before clicking on the image to take you to the linked page. this is my code; any ideas how i can fix this? <td colspan="4"> <a href="About Us.html"><img src="images/About_Off.jpg" border="0" alt="About Us" name="Aboutus" width="120" height="64" id="Aboutus" onMouseOver="MM_swapImage('Image2','','images/About_On.jpg',1)" onMouseOut="MM_swapImgRestore()"></a></td> <td colspan="6"> Any help would be greatly appreciated. Hey, im trying to find out why the header on my website isnt at the top of the page. it also moves sometimes even though the code appears to be all the same. the address is www.themonsterbox.com thanks in advance for any help. Hi people. hope everyones ok http://www.airportcarhireliverpool.co.uk/ is my website and it looks fine on firefox but when i go to IE the nav is too low. i really dont know why and its doing my head in. also when we use ie 7 it re-directs to youtube? whattttttt? lol please help me!!! Thanks!! Hey guys just need a little help in getting a google adsense ad in the top right hand side of my website next to the header image.. Help is much appreciated thanks. My site http://www.prized4you.com Thanks in advanced hi, when i open web in internet explorer i see web without header and footer. then open with firefox i see web without header but i see footer. How to fix this problem and then i open web with every explorer i can see good web. sorry for english language. web url is www.xxlpramogos.lt Hi guys, I've done design work before, but the website I just finished is my first stab at doing html & css by myself and I just have one problem that isn't working. There is a gap a few pixels high between the top images in my header and the bottom of the header where the navigation is. This gap doesn't appear in Firefox or Safari, only IE. Does anyone know how to fix this. The site can be seen on my company's test server at www.worthy-llc.com/pfpk. Thanks so much, it's a charity site and I want to make sure it gets done correctly. Brendan hi, guys new here and to html. i am writing my code as, <div class="header"> Drums</div>, for example, now my trainer wants it in a span class so i can change the font and color etc, what is the next step to take? I have to insert javascript between <Body> & </Body>, of a HTML page. The page, however, is a header and only contains a <Body>. There is no </Body>. So, the script does not work. Any thoughts on how I can resolve this? - b PS: Forgot to mention that the javascrip does work. I've already tried it on a test HTML page that does have <Body> & </Body> and the script does work. Hi, i use a far future expires header to speed up the loading of most of my pages. But i have one or two pages such as "latest updates" and such, which need to be reloaded each time the visitor visits. How do i define the expires meta tag thing so it will be reloaded every time? this is what i have so far, this is the far future version. Code: <meta http-equiv="expires" content="Wed, 26 Feb 2009 08:21:57 gmt"/> thanks. I am trying to make some code (see attachment) to look exactly like this page http://www.ultrapurecleanse.com/index.php. The attached code is the same as the source code of the URL, but it is not coming out the same in my html editor. There must be a way. For example, I am having difficulty getting the header to show up and the 5 bullet points on the top left to appear right on top of the big gray arrow as they should. Any help is really appreciated. Andrew On my website www.fresh-lobster.co.uk my footer displays 3 lists with various links, in a horizontal line (ul is floated left in the css). But the way i created the list headers was to put a the list header within an LI so it would format (margin etc) with the rest of the list. ul li --list header-- /li li --list item -- /li li --list item -- /li /ul But when viewing in non-css mode, it displays a disc like any other element in an LI. I tried using the LH (which is included in html3)... ul lh --list header-- /lh li --list item -- /li li --list item -- /li /ul But IE doesnt like it (even though Opera does). Is the LH element still functioning? or is there some other way of doing it. Thanks I'm having problems trying to create a header bar for my site. Basically I want something like the blue bar at the top at http://m.digg.com/ Essentially a bar that goes across the top of my site with a background color of my choice and my logo in the center of it. How would I go about doing this? Both work fine in Firefox. Code: Code: <style TYPE="text/css">
<!--
#rotate
{
background: url(/images/banner/players/rotate.php) no-repeat center top;
color: inherit;
width: 967px;
height: 202px;
}
-->
</STYLE>
<table width="967" height="202" id="rotate" style="cursor:pointer;" onclick="location.href='';">
<tr valign="top">
<td width="222"> </td>
<td width="733" style="padding-top: 9px">
<script type="text/javascript"><!--
google_ad_client = "pub-8692420629844560";
/* 728x90, created 10/7/10 */
google_ad_slot = "0662884499";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr>
</table>
In IE, works fine on site - ad is placed perfectly: In forums, using same code, the ad is misplaced slightly, and shows more of the white space from when the banner was designed, as a placeholder for ad: Banner design, w/ whitespace - creates a 1-px white border around ad: Any ideas what could be causing the inconsistency? As far as I know, it's IE only. Hi, I'm not an expert with html and css and I'm having a problem with the header pushing down from the top. How can I fix this..and are there any other problems with my code? Thank you in advance! Here's my html Code: <!DOCTYPE html> <html> <head> <title>SevoDesign</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="headerbg"></div> <div id="footerbg"></div> <div id ="wrapper"> <div id="header"> <h1><a href="#">sevodesign</a></h1> <ul id="nav"> <li><a href="#">home</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">social networks</a></li> </ul> </div><!-- end header--> <div id="content"> <div class="mainpost"> <div class="postheader"> <h2>Hello World</h2> <h3>July 31, 2011</h3> </div><!-- end postheader--> <div class="postcontent"></div><!-- end postcontent--> </div><!-- end mainpost--> <div class="mainpost"> <div class="postheader"> <h2>Hello World</h2> <h3>July 31, 2011</h3> </div><!-- end postheader--> <div class="postcontent"></div><!-- end postcontent--> </div><!-- end mainpost--> </div><!-- end content--> <div id="sidebar"> <div id="search"> <div id="searchinput"> <a href="#"><img src="images/searchicon.png"/></a> </div><!-- end searchinput--> </div><!-- end search--> <div id="sidebox"> <div id="inside"> <ul id="links"> <li>Register</li> <li>Login</li> <li>Entries RSS</li> <li>Comments RSS</li> <li>WordPress.com</li> </ul><!-- end links--> </div><!-- end inside--> </div><!-- end sidebox--> </div><!-- end sidebar--> </div><!-- end wrapper--> </body> </html> and Here's the CSS: Code: body {
margin: 0px;
background-color: #eeeeee;
}
#headerbg {
top: 0px;
position: relative;
height: 107px;
width: 100%;
background-repeat: repeat-x;
background-image: url(images/header.jpg);
}
#wrapper {
top: 0px;
height: 807px;
width: 960px;
background-color: #fffd89;
margin-left: -480px;
left: 50%;
position: absolute;
}
#footerbg {
top: 660px;
position: relative;
height: 40px;
width: 100%;
background-repeat: repeat-x;
background-image: url(images/footer.png);
}
#header {
background-color: #b2ffce;
top: 0px;
position: relative;
height: 107px;
width: 960px;
}
h1 a {
text-decoration: none;
color: white;
padding: 0px;
margin: 0px;
top: 0px;
position: relative;
float: left;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 36px;
font-family: rockoultraflf;
}
#nav {
position: relative;
top: 15px;
width: 400;
float: right;
padding: 0;
list-style: none;
}
#nav li {
float: left;
}
#nav li a {
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0px 1px 2px #252525;
font-size: 18px;
font-family: rockoultraflf;
display: block;
padding: 8px 13px;
text-decoration: none;
color: white;
}
#nav li a:hover {
text-decoration: underline;
}
hi..hopefully someone here will know a solution to my problem. i have made a page with a flash logo in the header section. now in ie7/firefox the page looks just about right. however in ie6 the flash logo appears above my page instead of where it should be. now i realize this may be because of how i have implemented the flash file. but i cant seem to figure it out..no matter what i do. i know i have some errors to correct in my code but none seem to be related to this specific problem. the problem is easy to see by comparing ie6 to ie7 if anyone can point me in the right direction it would be greatly appreciated. the site in question is www.nwotradingcards.com thanks for your help |
|||||||