Editing tumblr theme html to remove some elements - javascript

This is my tumblr url(custom domain):
http://intchauhan.com/
I want to remove "Follow intchauhan" and "tumblr." buttons that are on the right side.
This is the html of the theme
:
<!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"/>
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Title" content="#000000"/>
<meta name="color:Text" content="#202020"/>
<meta name="color:Minor text" content="#999999"/>
<meta name="color:Line" content="#EEEEEE"/>
<meta name="color:Link" content="#49D28D"/>
<meta name="color:Link hover" content="#3FB67A"/>
<meta name="color:Top line" content="#eeeeee"/>
<meta name="color:Bottom line" content="#eeeeee"/>
<meta name="color:Notes background" content="#f7f7f7"/>
<meta name="if:Center all" content="0"/>
<meta name="if:Center links" content="1"/>
<meta name="if:Large Photoset" content="0"/>
<meta name="font:Heading" content="Futura"/>
<meta name="image:Header" content="0">
<meta name="if:Show notes on permalink pages" content="1">
<meta name="if:Ask Link" content="0" />
<meta name="if:Submit Link" content="0" />
<meta name="if:Stretch small images" content="0" />
<meta name="text:Caption size" content="14px"/>
<meta name="text:Title size" content="20px"/>
<meta name="text:Header size" content="85px"/>
<meta name="font:Description" content="Georgia"/>
<meta name="font:Body" content="Georgia"/>
<meta name="text:Disqus Shortname" content=""/>
<title>{Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
<link rel="shortcut icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<style type="text/css">
body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,dl,dt,dd,ul,ol,li,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0;}
html{font-size:{text:Caption size};}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal; padding:5px 0;}
abbr,acronym{border:0;}
body {background:{color:Background}; color:{color:Text}; font:1em/1.5 {font:Body}; margin:0 0 0 0;}
h1, h3 {font-family:{font:Heading};}
pre,code {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif}
a:link, a:visited {color:{color:Link}; text-decoration:none;}
a:hover, a:active {color:{color:Link hover};}
#header {color:{color:Minor text}; position:relative; margin:-49 auto; padding-top:40px; width:875px;}
#header h1 {color:{color:Title}; font-weight:bold; text-align:center; font-size:{text:Header size}; line-height:90%; margin-bottom:30px; margin-top:-30px;
letter-spacing:-1px;}
#header h1 a:link, #header h1 a:visited {color:{color:Title}; display:block;}
#header h1 a:hover, #header h1 a:active {color:{color:Link hover};}
#description {font-family:{font:Description}; font-size:{text:Caption size}; text-align:center; line-height:autopx; margin-bottom:20px; margin-top:-5px;}
#header form {margin-bottom:20px;}
#header form input {width:630px;}
#header ul {margin:0 -0.25em 1.5em;}
#header li {list-style:none; text-transform:lowercase;}
#header li a {background:{color:Background}; display:block; padding:0 0.25em;
text-decoration:none;}
#header li a:hover {background:none;}
#container {background-color:{color:Container}; margin:30px auto; padding-top:5px; width:875px}
#container .box img {
max-width: 100%;
}
.logo {
border:0;
margin-bottom:5px;
max-width:875px;
}
.single { width:875px; margin-bottom:10px;}
#posts {background-color:{color:Background}; border-top:1px solid {color:Top line};
border-bottom:1px solid {color:Bottom line}; margin:0px; padding:0px; {block:IfCenterall}text-align:center;{/block:IfCenterall}font-size:{text:Caption size};}
#posts .post {list-style:none; padding-bottom:10px; max-width:875px;
clear:both;}
#posts .content {color:{color:Text}; padding:0; margin-left:0px;}
#footer {margin:0 auto; max-width:875px; padding-bottom:30px;}
#pagination p {font-size:{text:Caption size}; min-width:150px; line-height:autopx; margin:0 0 10px;
white-space:nowrap;}
#pagination p.back {display:inline; text-align:right; float:right; margin-left:20px;}
#pagination p.forward {display:inline; float:left; margin-right:1.5em;}
#pagination a {font-style:italic;}
#pagination .page {text-align:center; font:12px {font:Body};
margin-bottom:20px; text-transform:lowercase;}
#credits {clear:both; display:inline; text-align:center; font-size:12px; color:{color:Minor text}; margin:0; padding:1.5em 0;}
#footer a:hover, #footer a:active {text-decoration:none;}
p {margin-bottom:25px;}
form .submit {height:0; overflow:hidden; display:block;}
.meta {float:left; clear:left; {block:IfCenterall}width:875px{/block:IfCenterall}; font-size:14px; text-align:left; line-height:10px;}
.meta h2 {font-size:14px; margin-bottom:5px; border-bottom:1px solid {color:Line};}
.meta h2 a {text-decoration:none; display:block; padding:0px 0px;}
.meta h2 a:hover {background:none;}
.meta p {color:{color:Minor text}; font-style:italic; margin:0 0 0 1em;
text-indent:-0.75em; text-transform:lowercase;}
p.meta {color:{color:Minor text}; font-style:italic; margin:0;
width:150px; text-indent:-0.75em; text-transform:lowercase;}
.meta a {font-style:normal; white-space:nowrap;}
.meta .plays {font-weight:bold; font-style:normal;}
h3 {font-size:{text:Title size}; line-height:autopx; padding-bottom:20px; font-weight:bold;}
.content a {border-bottom:1px solid {color:Line};}
.content a:hover {border-bottom-width:2px;}
.content .photo a {border:none !important;}
.content ul, .content ol {margin:20px;}
.content ul li {list-style:square;}
blockquote {margin:0 20px 20px; font-style:italic;}
blockquote i, blockquote em, blockquote [lang="ja"] {font-style:normal;}
pre, code {font-size:10px; line-height:12px;}
pre {background:#e1e1e1; margin:15px; padding:10px;
overflow-x:auto;}
pre code {display:block;}
pre i, code i {font-style:normal; color:{color:Minor text};}
ins {text-decoration:none; font-style:italic;}
blockquote ins, em ins, ins em {font-style:normal;}
abbr, acronym, .caps {font-size:12px; letter-spacing:0.1em; word-spacing:0.1em;}
abbr, acronym {text-transform:uppercase;}
.caps {text-transform:uppercase;}
.text {margin-bottom:20px;}
.caption {margin-bottom:20px;}
.nocaption {margin-bottom:-20px;}
.vidcaption {margin-top:120px;}
.post img, .post object, .post embed {max-width:100%; {block:IfStretchsmallimages}
width: 875px;
{/block:IfStretchsmallimages}}
.link-post h3 {padding:0; margin-bottom:18px;}
.photo-post .photo {margin-bottom:19px; margin-top:20px; }
.video-post .video {margin-bottom:0px; margin-top:20px; }
.quote-post .quote {font-family:{font:Body};}
.quote-post .source, .cite
{float:right; margin:0 0 35px 0; text-indent:-1.5em;}
.quote-post .source a:first-child, .cite
{letter-spacing:0;}
.short-quote .quote, .medium-quote .quote, .long-quote .quote
{font-size:{text:Title size}; line-height:autopx; margin:10px 40px 20px 0;}
.audio-post .audio {
display: block;
width:875px;
margin-bottom: 20px;
padding: 0px;
-moz-border-radius: 5px;
border-radius: 5px;}
.chat-post ol {list-style:none; margin:15px 0;}
.chat-post li {margin-left:1.5em; text-indent:-1.5em;}
.chat-post .label {font-weight:bold; padding-right:0.125em;}
.chat-post .speaker {font-style:italic;}
.chat-post .speaker2 .label, .chat-post .speaker4 .label,
.chat-post .speaker6 .label, .chat-post .speaker8 .label
{color:{color:Minor text};}
.chat-post .speaker3 .label, .chat-post .speaker4 .label,
.chat-post .speaker7 .label, .chat-post .speaker8 .label
{text-transform:uppercase; letter-spacing:0.1em;}
.chat-post .speaker5 .label, .chat-post .speaker6 .label,
.chat-post .speaker7 .label, .chat-post .speaker8 .label
{font-family:{font:Heading};}
.day .month {text-transform:uppercase;}
{block:DayPage}.day {font-weight:bold;}{/block:DayPage}
.content.text-post img {
max-width: 100%;
}
.multi {margin-bottom:30px; margin-right:15px; {block:IfCenterall}margin-right:10px; margin-left:10px;{/block:IfCenterall};}
.video embed, .video object, .video iframe {width:875px; height:500px; margin-bottom:-100px;}
.wide_audio iframe {width:875px; }
#comment {
font-size: 10px;
text-align: left;
line-height: 18px;
margin: 0px 0px 0px 0px;
}
#comment a {
text-decoration: none;
color: {color:Caption};
}
#comment a:hover {
text-decoration: none;
color: {color:Link Hover};
}
#dsq-content {
background: rgba(0, 0, 0, .30);
background: url(' ');
padding: 5px 20px 20px 20px;
margin-top: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
a.single_links:last-child { margin-right:0px; }
a.single_links
{display: inline-block; list-style-type: none; margin-right:20px;}
{block:PermalinkPage}
p.answer_form_container { width: 512px; }
ol.notes { width: 875px; list-style-type: none; margin:20px auto; padding: 0; }
ol.notes li.note { background: {color:Notes background}; margin: 0 0 0px 0; padding: 0 4px; }
ol.notes a { color: {color:Links In Notes}; }
ol.notes img.avatar { display: none; }
ol.notes blockquote { margin: 0; }
ol.notes blockquote a { text-decoration: none; }
{/block:PermalinkPage}
a.install {
width: 96px;
height: 20px;
background: url(http://static.tumblr.com/thpaaos/dHHkt0jor/install_theme.png);
display: block;
position: absolute;
top: 26px;
right: 3px;
}
a {
outline: none;
}
{CustomCSS}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
{block:IfLargePhotoset}
<script>
$(document).ready(function(){
$(".photoset").each(function() {
$(this).width('875px');
var newSrc = $(this).attr("src").replace('700','875');
$(this).attr("src", newSrc);
});
$(function(){
var iFrames = $('.photoset');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
});
});
</script>
{/block:IfLargePhotoset}
</head>
<body>
<div id="container">
<div id="header">
<a href="/">
{block:IfHeaderImage}<h1><img src="{image:Header}" class="logo" /></h1>{/block:IfHeaderImage}
{block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}</a>
{block:Description}<p id="description">
{Description}
</p>{/block:Description}
<p>
{block:IfCenterlinks}<center>{/block:IfCenterlinks}
{block:HasPages}{block:Pages}
<a class="single_links" href="{URL}">{Label}</a>
{/block:Pages}{/block:HasPages}
{block:SubmissionsEnabled}{block:IfSubmitlink}
<a class="single_links" href="/submit">{SubmitLabel}</a><br>
{/block:IfSubmitlink}{/block:SubmissionsEnabled}
{block:AskEnabled}{block:IfAskLink}
<a class="single_links" href="/ask">{AskLabel}</a>
{/block:IfAskLink}{/block:AskEnabled}
{block:IfCenterlinks}</center>{/block:IfCenterlinks}</p>
</div>
<ol id="posts"><br>
{block:Posts}
<li class="post" id="post{PostID}">
{block:Text}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br><br>
<div class="content text-post">
{block:Title}<h3><span>{Title}</span></h3>{/block:Title}
<div class="text">{Body}</div>
</div>
{/block:Text}
{block:Photo}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br>
<div class="content photo-post">
<div class="photo">
{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}">
{block:IndexPage}</a>{/block:IndexPage}
{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photo}
{block:Photoset}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br>
<div class="content photo-post">
<div class="photo">
{block:IfLargePhotoset}{Photoset-700}{/block:IfLargePhotoset}
{block:IfNotLargePhotoset}{block:Photos} <div class="single"><img src="{PhotoURL-HighRes}"/></div>{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Photos}{/block:IfNotLargePhotoset}
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photoset}
{block:Quote}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br><br>
<div class="content quote-post {Length}-quote">
<blockquote class="quote">"{Quote}"</blockquote>
{block:Source}<div class="source">— {Source}</div>{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br><br>
<div class="content link-post">
<h3 class="link">{Name}&nbsp&nbsp»</h3>
{block:Description}<div class="caption">{Description}</div>{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br><br>
<div class="content chat-post">
{block:Title}<h3>{Title}</h3>{/block:Title}
<ol class="chat">
{block:Lines}<li class="{Alt} speaker{UserNumber}">
{block:Label}<span class="label">{Label}</span>{/block:Label}
<span class="line">{Line}</span>
</li>{/block:Lines}
</ol>
</div>
{/block:Chat}
{block:Video}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br>
<div class="content video-post">
<div class="video">{VideoEmbed-700}</div>
<div class="vidcaption">{block:Caption}{Caption}{/block:Caption}<div class="nocaption"> </div></div>
</div>
{/block:Video}
{block:Audio}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br><br>
<div class="content audio-post">
{block:IfCenterall}<center>{/block:IfCenterall}
<div class="audiobox">
<div class="audio">
{block:AudioEmbed}<div class="wide_audio">{AudioEmbed-640}</div>{/block:AudioEmbed}
</div></div> {block:IfCenterall}</center>{/block:IfCenterall}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Audio}
<div class="clear"> </div>
</li>
{/block:Posts}
{block:IfDisqusShortname}
{block:Permalink}
<div id="disqus">
<div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script><noscript>View the discussion thread.</noscript>
</div>
{/block:Permalink}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
</div> <!-- .box -->
{/block:Posts}
</div> <!-- .posts -->
<div style="clear: both"></div>
{block:PermalinkPage}
{block:IfShownotesonpermalinkpages}
{PostNotes}
{/block:IfShownotesonpermalinkpages}
{block:PermalinkPage}
<div style="clear: both;"></div>
</ol>
<div id="footer">
<div id="pagination">
{block:Pagination}
<p class="back"> {block:NextPage}
{lang:Next} >>>
{/block:NextPage}</p>
<p class="forward">{block:PreviousPage}
<<< {lang:Prev}
{/block:PreviousPage} </p>
{/block:Pagination}
{block:PermalinkPagination}
{block:PreviousPost}<p class="back">
{lang:Next} >>>
</p>{/block:PreviousPost}
{block:NextPost}<p class="forward">
<<< {lang:Prev}
{/block:NextPost}</p>
{/block:PermalinkPagination}
{block:DayPagination}
{block:PreviousDayPage}<p class="back">
{lang:Next} >>>
{/block:PreviousDayPage}</p>
{block:NextDayPage}<p class="forward">
<<< {lang:Prev}
</p>{/block:NextDayPage}
{/block:DayPagination}
</div>
<br><br />
<center>
<!--{lang:Archive} //
{lang:Random post} //
{lang:RSS}
<br />
<font size="2"><i>{lang:Powered by Tumblr 2} -
Quite Big theme by George Dunkley</i></font></center>-->
</div>
</div>
</body>
<div style=" opacity:0.0;">
</html>
Suggest changes to be done to remove the 2 buttons.
I'm not into web designing.

Disable Tumblr Controls
To disable the top right controls ( follow abc / user ) you can disable the promotion option on the customise screen.
Log in to Tumblr
Click Settings
Click Customise
On the left hand pane, click Advanced
Uncheck Promote Tumblr
This will disable the Tumblr Controls for none Tumblr users, however, Tumblr users will still get the controls.
The reason, these controls are really a short cut for a logged in user, and I would advise against hiding them, however this is possible. If you add the following to your Custom CSS box:
#tumblr_controls, .controls {
display: none !important;
}
Normally I wouldn't condone using !important but the Tumblr embed really does some funky things, so in this case brute force is needed.
Hope that helps.

Related

Underlining links

I am writing a site to order. But I ran into the problem for the first time - I can not remove the underscores from the bottom of the link. Already tried through
a: hover {text-decoration: none}
as well as on another.
From below I will provide HTML code as well as CSS code
I ask to help to correct such unexpected error
body{background: #efefef
url("images/geometry2.png");
margin: 0; padding: 0;
font: 16px/24px Arial, Tahoma, Sans-serif;
}
div.mid{
width: 1000px; margin: 0 auto;
}
a:hover {
text-decoration: none;
}
div.header{
background: #101417;
}
/*Шапка сайта*/
div.topmenu{float: right;height: 70px; line-height: 70px;}
div.topmenu a{margin: 0 0 0 10px; color: #0000FF;}
div.topmenu a:hover{color: #fff}
div.afisha {padding: 20px 50px 0 50px; background: #f2f2f2 url("images/headline.png") top repeat-x;}
div.afisha img {float: left; }
div.afisha h3 {font-size: 24px; font-weight: normal; text-align: center; color: #830000;}
div.afisha p{text-align: center;}
div.afisha a{font-size: 20px; color: #fff; font-weight: bold; background: #b23600; border: 1px solid #862900;}
div.clear{clear: both;}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мой сайт</title>
<link rel="shortcut icon" type="image/x-icon" href="images/logomin.png">
<link rel="stylesheet" href="style.css" media="all">
</head>
<body>
<div class="header">
<div class="mid" >
<header>
<div class="topmenu" style='float:right;height: 70px; line-height: 70px'
</div>
<aside>
Главная
Тренинг
Шаблоны
Контакты
</aside>
</div>
<img src="images/logo.png" alt="Логотип сайта" title="Логотип сайта">
<div class="afisha"</div>
<img src="images/v5.jpg" alt="Обложка тренинга" title="Обложка тренинга">
<h3>Стань профессиональным верстальщиком<br>всего за 2 месяца<br> и зарабатывай по 30 000 рублей!</h3>
<p>Смотрите здесь<p>
<div class="clear"></div>
</header>
</div>
</div>
<div class="menu">
<div class="mid" >Привет мир</div>
</div>
<div class="conten">
<div class="mid" ></div>
</div>
<div class="footer">
<div class="mid" ></div>
</div>
</body>
</html>
try with
div.mid{
width: 1000px; margin: 0 auto;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
also clear caches before checking results..
With :hover you can set CSS properties when the link in hovered(i.e. mouse is over the link).
It seems you want to remove the default underline property of the link. To do so you need to apply CSS directly to the a tag:
a{text-decoration: none}

With My Navigation Bar Is Messed Up [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Need help with the text on my navigation bar. The items in it are all messed up, and jumbled I know my code is really sloppy I am new to coding. This is the link with JS bin here http://jsbin.com/cibuvozido/edit?html,output
Here you can see the new code with the navbar corrected already, but I recommend that you use a framework starting can be bootstrap or foundation 6 which is also very good.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<title> Contact Us Legacy's Web-Design</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
.home, .security, .contact, .about, .portfolio {
display: inline-block;
text-align: center;
padding: 10px;
}
a {
text-decoration: none !important;
}
.all {
margin-top:0px;
position:absolute;
margin:none;
border-style:solid;
border-color:#008000;
border-width:4px;
}
#aside {
color:#0ddde7;
text-align:center;
padding-top:20px;
margin:none;
}
nav {
border-bottom:solid;
border-right:solid;
border-left:solid;
border-radius:10px;
border-color:#0ddde7;
border-width:4px;
/* padding-top:20px; */
font-size:1.5em;
background-color:#0f171b;
z-index:0;
}
h2 {
text-align:center;
color:#0ddde7;
padding: 0 0 0 50px;
}
h3 {
text-align:center;
color:#0ddde7;
padding: 0 0 0 330px;
}
.imgg {
margin-top:24px;
margin-left:40px;
border-style:solid;
border-color:#0ddde7;
border-width:2px;
border-radius:18px 18px 18px 18px;
}
.img {
padding: 14px 0 0 1220px;
pointer-events: none;
position:absolute;
}
#search {
padding: 0 0 0 1105px;
height:0;
}
.jwery {
margin-left: auto;
margin-right: auto;
display: table;
}
.jwery a {
-webkit-transition:width 2s;
transition: 2s;
}
.jwery a:hover {
font-size: 1.1em;
}
body {
margin:0;
padding:0;
background-color:#a4a4a4;
}
a:link {color:#0ddde7; text-decoration: underline; }
a:active {color: #0000ff; text-decoration: underline; }
a:visited {color: #008000; text-decoration: underline; }
a:hover {color: #ff0000; text-decoration: none; }
</style>
</head>
<div id="Header">
<div id="search">
<form>
<form id="img" method="get" action="http://www.google.com">
<input type="text" class="tftextinput" name="q" size="18" maxlength="120">
<input type="submit" value="" style="border-style:
none; background: url('searchbutton3.gif') no-repeat; width: 13px; height: 15px;">
</form>
</div>
<img class="img" src="images/search.png" height="19.4">
<nav>
<div class="jwery">
<a class="home" href="Home.html">Home</a>
<a class="security" href="Security.html">Security</a>
<a class="FAQ" href="Portfolio.html">Portfolio</a>
<a class="about" href="About.html">About Us</a>
<a class="contact" href="Contact Us.html">Contact Us</a>
</div>
</nav>
<body>
<img class="imgg" src="images/legacy.png" align=left width=300>
<div id="aside">
<p>You Can Also Email Me At LegacyWebCreations#gmail.com Or Call/Text 252-207-
6688</p>
<p>Feel Free To Leave Me A Message, Question, Comment, Or Recommendation.</p>
<h2>Follow Me! Please Share My Site! </h2>
<h3>Instagram Account: LegacyWebDesign</h3>
<h3>Personl Account: Surfskateskim57</h3>
<h3>Facebook Account: Ryan Miller</h3>
<h3>Group Name: LegacyWebDesign</h3>
<h3>Twitter Account:LegacyWebDesign</h3>
<h3>LinkedIn Account: LegacyWebCreations</h3>
</div>
<div class="all">
<a id="foxyform_embed_link_747752" href="http://www.foxyform.com/">Questions?
Comments?</a>
</div>
<script>
(function(d, t){
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = "http://www.foxyform.com/js.php?id=747752&sec_hash=fd11cc5da35&width=380px";
s.parentNode.insertBefore(g, s);
}(document, "script"));
</script>
</body>
</html>
tell me if this good and only touch the css that I recommend that you
place it in the tab that says css which is best practice that placed
it directly in the html See Ya!! and keep on hacking

How can I force IE to keep some margin at left in it's browser window?

My website is properly centered and fitted in all browser windows except the Internet Explorer.
What happens in IE is that it removes the margin from left and forces to align the body left, what I don't want. How can I solve this issue so that the IE can display my site exactly as other browsers do?
If you prefer you can look at the live view here though I am going to paste my code.
:HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>7Seas Redovisning</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<h1><img src="img_akin/7seas.jpeg" id="logo" alt=""/>7Seas Redovisning</h1>
<p><b>
<span class="mob_tele">Mob: 076-9516926 <br />
Tel: 040-133403</span><br />
info#7seasredovisning.se</b>
</p>
</header>
<nav id="top_menu">
<ul>
<li>Intresseanmälan</li>
<li>Öppettider</li>
</ul>
</nav>
<div id="new_div"> <!--only the main content-->
<section id="main_section">
<marquee behavior="alternate">We are coming soon, please check back later.</marquee>
<img src="img_akin/image_1st_body.jpg" id="img1" width="650" height="340" alt=""/>
<ol>
<li>LÖPANDE BÖKFÖRING</li><br />
<li>BOKSLUT & ÅRSREDOVISNING</li><br />
<li>SKATTEDEKLARATION</li><br />
<li>LÖNEADMINISTRATION</li><br />
<li>FAKTURERING</li><br />
<li>INKOMSTDEKLARATION</li><br />
<li>MOMSDEKLARATION</li><br />
<li>BOLAGSBILDNING</li><br />
<li>EKONOMI KONSLUT</li><br />
</ol>
</section>
</div>
<footer id="the_footer">
<ul>
<li>
© 7 seas Redovisning <br />
En del av 7seas Money Transfer KB<br />
F-skatt registrerat <br />
Org, Nr: 969756-4079 <br />
SEB Företagskonto: 5502-1030132<br />
BG: 102-5006
</li>
<li>
Besökadress: Skomakarebyn 8E<br />
218 41 Bunkeflostrand<br />
Malmö, Sweden <br />
Follow us on FB <!-- SMARTADDON BEGIN -->
<br />
<script type="text/javascript">
(function() {
var s=document.createElement('script');s.type='text/javascript';s.async = true;
s.src='http://s1.smartaddon.com/share_addon.js';
var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
})();
</script>
<img alt="Share" src="http://s1.smartaddon.com/s8.png" border="0" />
<br /><i>Design & Development: DH BANGLADESH in SWEDEN</i>
</li>
<li>
Tel: 040-133403<br />
Mob: 076-9516926<br />
e-Mail: info#7seasredovisning.se<br/>
www.7seasredovisning.se<br/>
<span id="webstat">
<script src="http://stats.webstat.se/assets/stat_isp2.php"></script>
<script type="text/javascript">
<!--
document.write("<" + "script src=\"http://stats.webstat.se/statCounter.asp?id=38356&size=" + screen.width + "x" + screen.height + "&depth=" + screen.colorDepth + "&referer=" + escape(document.referrer) + "&isp=" + info2+ "\"></" + "script>");
-->
</script>
</span>
<!-- Slut WEBSTAT.SE kod -->
</li>
</ul>
</footer>
</div>
</body>
</html>
.CSS:
*{
margin:0px;
padding:0px;
}
#top_header h1 {
font:bold 40px Prisoner SF;
margin-top:-20px;
color:#006400;
}
#top_header p {
margin-top:-100px;
color:#A0522D;
float:right;
font-family:Euphemia;
}
.mob_tele{
font-size:12.5px;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
body{
width:100%;
display:-webkit-box;
display:-o-box;
display:-moz-box;
display:-ms-box;
box-pack:center;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-pack:center;
-ms-box-pack:center;
-o-box-pack:center;
background-color:#E6E6FA;
}
#big_wrapper{
max-width:1200px;
margin-top:20px;
display:-webkit-box;
display:-o-box;
display:-moz-box;
display:-ms-box;
box-orient:vertical;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-box-orient:vertical;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
background-color:white;
}
#top_header{
border:3px soild gray;
padding:20px;
}
#logo{
padding-top:20px;
}
#top_menu{
border: 2px solid #20B2AA;
border-radius:4px;
background:linear-gradient(to bottom, #87CEEB, #C0C0C0, #87CEEB);
background:-webkit-linear-gradient(to bottom, #87CEEB, #C0C0C0, #87CEEB);
background:-moz-linear-gradient(to bottom, #87CEEB, #C0C0C0, #87CEEB);
background:-ms-linear-gradient(to bottom, #87CEEB, #C0C0C0, #87CEEB);
background:-o-linear-gradient(to bottom, #87CEEB, #C0C0C0, #87CEEB);
/*background:#8FBC8F;*/
color:black;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:7px;
font:bold 18px Euphemia;
float:right;
margin-right:50px;
}
#new_div{
display:block;
display:-moz-box;
display:-o-box;
display:-ms-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
}
#main_section{
/*
border: 1px solid blue;
*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
/*
float: left;
width: calc(75% - 82px);
*/
}
#main_section li{
margin-left:255px;
font-family:Euphemia;
background-image:url(img/backgrounds.jpg) no-repeat;
font-weight:bold;
}
#main_section marquee{
font-family:Segoe Print;
font-size:40px;
font-weight:bold;
margin-bottom:40px;
color:#B22222;
}
#img1{
float:right;
}
#the_footer{
/*
text-align:center;
*/
background:#F0F8FF;
/*
padding:20px;
*/
border-top:2px solid green;
}
#the_footer li{
list-style:none;
display:inline-block;
padding:40px;
margin-left:35px;
font-family:Euphemia;
font-size:13px;
}
Instead of -ms-box, try this:
body {
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
}
This works for IE10+.

jquery colorbox isn't working with mootools v1.1

I wanna use colorbox for 'join us menu' but it isn't working.
and I also tried fancybox, and got a same result..
actually colorbox performed well until I add mootools v1.1 to my jsp code.
I dont know what is mootools v1.1. I just copy some source that from
some awesome website for
using scroll view effect(I dont know exactly what this effect's name) on my page
scroll view effect is working well. you can see that when you clicked 'append1,2,3'
sorry for my poor english skill.
here is my code
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spring Builder : append your heart </title>
<link rel="stylesheet" href="colorbox.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="colorbox.js"></script>
<script type="text/javascript" src="mootools.v1.1.js"></script>
<script type="text/javascript">
$(function(){
$('.joinus').colorbox({
});
});
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Times New Roman', serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
}
#main_header{
width:1280px;
padding-left: 10px;
line-height:60px;
background: #59DA50;
color:#FFFFFF;
}
#main_bar{
overflow: hidden;
background: #EAEAEA;
}
#main_bar>ul.main_bar_left{
overflow: hidden;
float: left;
}
#main_bar>ul.main_bar_right{
overflow: hidden;
float: right;
}
#main_bar>ul.main_bar_left>li{
float:left;
}
#main_bar>ul.main_bar_right>li{
float:left;
}
#main_bar a{
display: block;
padding: 5px 20px;
border-right: 1px solid #BDBDBD;
}
#main_bar a:HOVER{
background: #CEF279;
}
#main_bar input{
margin:5px;
width: 80px;
}
#main_footer{
width:1280px;
margin:0 auto;
margin-bottom: 10px;
background: #353535;
color: #FFFFFF;
text-align: center;
padding: 10px;
}
#main_content {
margin:0px;
overflow:hidden;
/*height:387px;
width:99,9%;*/
border:none;
position:relative;
}
#main_content_bg {
width:5000px;
height:600px;
background-image:url(http://placehold.it/5000x600);
background-position:top left;
background-repeat:no-repeat;
background-color:#E6E6E4;
position:relative;
}
.section_content {
width:990px;
height:380px;
position:absolute;
}
#section1 {
left:0px;
top:0px;
}
#section2 {
left:1570px;
top:0px;
}
#section3 {
left:2880px;
top:0px;
}
</style>
</head>
<body>
<header id="main_header">
<h1>Spring Builder</h1>
</header>
<nav id="main_bar">
<ul class="main_bar_left">
<li><a id="append1" href="#">append1</a></li>
<li><a id="append2" href="#">append2</a></li>
<li><a id="append3" href="#">append3</a></li>
</ul>
<ul class="main_bar_right">
<li><input type="text" value="id" id="id" name="id"/></li>
<li><input type="password" id="pw" name="pw"/></li>
<li>Login</li>
<li>Join us</li>
</ul>
</nav>
<div id="main_content">
<div id="main_content_bg">
<div id="section1" class="section_content">
<h1>section1</h1></div>
<div id="section2" class="section_content">
<h1>section2</h1></div>
<div id="section3" class="section_content">
<h1>section3</h1></div>
</div>
</div>
<footer id="main_footer">
</footer>
<script src="scrollstyle.js" type="text/javascript"></script>
</body>
</html>
It's probably happen a conflict between Mootools and jQuery because both libraries are using $ sign, try to convert $ to jQuery for your jQuery code:
jQuery(function(){
jQuery('.joinus').colorbox({
});
});
or wrap your code inside:
jQuery(function($) {
$('.joinus').colorbox({
});
});

dynamically changing text in div

Can someone please take a moment to look over this and let me know where I am going wrong in my code?
For some reason, the content div won't change when the buttons are clicked.
It's very simple, and right now I feel very confused for not being able to find my error.
CSS:
#wrapper {
margin: 0 auto;
width:100%;
max-height: 133px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:1.5em;
}
#buttons {
width:340px;
float: left;
height: 133px;
margin: 10px 10px 0 0px;
border-right: 1px solid #666;
}
#button1 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-position: -292px 0px;
background-repeat:no-repeat;
float:left;
margin-right:20px;
}
#button1 a:hover {
background-position: -292 -105px;
}
#button1 a:active {
background-position: -292 -210px;
}
#button2 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-repeat:no-repeat;
background-position: -438px 0;
float:left;
}
#button2 a:hover {
background-position: -438px -105px;
}
#button2 a:active {
background-position: -438px -210px;
}
#content {
font-family: Arial, Helvetica, sans-serif;
float: left;
display:block;
}
a {
text-decoration:none;
}
ul {
overflow:hidden;
margin: 10px 0 0 8px;
padding:0;
}
li{
line-height:1.5em;
display:inline;
}
#content1 {
color:#953735;
}
#content2 {
color:#604a7b;
}
JavaScript:
$('button').bind('click', function() {
$('div#content').html($('div#content' + ($(this).index()+1)).html());
});
HTML:
<div id="wrapper">
<div id="button">
<div id="button1">
</div>
<div id="button2">
Reporting Administrator
</div>
</div>
<div id="content">
<div id="content1">
<ul>
<li>Stuff1</li><br />
<li>Stuff1</li><br />
<li>Stuff1</li>
</ul>
</div>
<div id="content2" style="display:none;">
<ul>
<li>Stuff2</li><br />
<li>Stuff2</li><br />
<li>Stuff2</li>
</ul>
</div>
</div>
</body>
</html>
The selector $('button') is the problem. You don't want to select a button - element but an element within the div #button, am I right?
So you should take $("#button a") as selector, if you want to append the event handler to all links within the #button element.
David Müller had it correct regarding the button selector being an issue.
The switching wasn't occurring with the event on the link because the index of the links will be 0 since both are only children. If the event is instead on the parent div, the switching works. Below is a jsfiddle and the code.
http://jsfiddle.net/VrKsh/2/
<div id="wrapper">
<div id="button">
<div id="button1">
Content1
</div>
<div id="button2">
Content2
</div>
</div>
<div id="content">
<div id="content1">
<ul>
<li>Stuff1</li><br />
<li>Stuff1</li><br />
<li>Stuff1</li>
</ul>
</div>
<div id="content2" style="display:none;">
<ul>
<li>Stuff2</li><br />
<li>Stuff2</li><br />
<li>Stuff2</li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#button div').bind('click', function() {
$('div#content div:visible').hide();
$('div#content' + ($(this).index() + 1)).show();
});
</script>

Categories