I am trying to make a website that has a contents page.
I use the go to chapter 1 as the contents part,
and when it clicks it does to the <a name="chapter1"><u>Chapter 1</u></a>
This works well, but there's 1 catch (there's always a catch)...
I want to make it look like the ones on Wikipedia:
[View Image][1]
[1]: http://crystalanalysis.anydns.com/images/wikipedia_contents.png
But I didn't want to copy the one from Wikipedia, I wanted to make my own,
I looked around, found the parts I needed and had 2 problems! The first problem I am
having has something to do with the Indent. I tried using the p.indent {text-indent:150px}
but it only did the indent for the line I put it before. So:
Indented text
But it was annoying having to put the Indented text before every single line in the
contents box, but it works:
<header>
p.contenttitle {text-indent:50px;}
p.contentsub {text-indent:100px;}
</header>
<body>
<div style="background-color:#FFFFFF;width:1024;border:solid 1px #000000;"><br>
<font class=Blackverdana><b>Contents:</b><br></font>
<div align="left">
<!-- CONTENTS a href --><font class=Blackverdana>
<p class=contenttitle>Chapter 00: First things first...
<p class=contentsub>Chapter 0.2 Finding the SDK for your game
<p class=contentsub>Chapter 0.3 Running the Hammer Editor
<p class=contentsub>Chapter 0.4 First Load<br><br>
</body>
The other problem I am having is that if you look at the contents page:
http://crystalanalysis.anydns.com/7-12-2013.html
you will see that there seems to be some sort of <br> after every line.
I did not plan to have those there, they just appeared. Maybe a connotation with the "p" tag?
Any help would be greatly appreciated
And also the website is a blog and I am making a Hammer Editor Tutorial if anyone was wondering.
So it seems that you aren't ending the tags when you first start them.. An example of this:
<p class=contenttitle>Chapter 00: First things first...
When in all reality it should be:
<p class=contenttitle>Chapter 00: First things first...</p>
That could be a possible issue, as well as you should really look into using a CSS page to reference your HTML. Creating a class/id will actually make that indentation process ten times easier. For more information on that I can provide a handy link from w3.org that can explain the entire process of using CSS and how it can make your life a lot easier!
http://www.w3.org/Style/Examples/011/firstcss.en.html
Related
so what I want is on a given H1 main title to have an icon on the left-hand side. Unfortunately, so far I did not find any way to achieve this. One potential variant is to write bare bone HTML for both, however, I don't get the benefit of the markdown inside the title.
Does anyway know any better way to do this?
First to show what I actually want is this (this was done with picture editor for demonstration):
I have tried this:
# Quite a long title, potentially going over several lines
Quite a long title, potentially going over several lines
This does not work at all
{:style="float: right;margin-right: 7px;margin-top: 7px;"}
# Quite a long title, potentially going over several lines
{:style="float: right;margin-right: 7px;margin-top: 7px;"}
Quite a long title, potentially going over several lines
Using html like so, does not recognize the markdown:
<p align="center">
</p>
Using direct html also:
<div style="float: left;"><img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" width="128" height="128"/></div>
# Quite a long title, potentially going over several lines
Here if the title is not on a new line it is not recognized as markdown.
EDIT The suggested answer looks correct on stackoverflow, but on my github it looks like this:
The question is can we make the title to be aligned with the top of the image?
I used image html tag and a space before the header for my GitHub project repository README.md file. to set my image on the left and title on the right. Here is the code for it.
<img align="left" width="80" height="80" src="https://raw.githubusercontent.com/akarsh/akarsh-seggemu-resume/master/akarsh%20seggemu%20resume/Assets/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60%403x.png" alt="Resume application project app icon">
# Resume application project
This is how it looks,
You can see the project readme by clicking on this link to the GitHub repository
Bad news, GitHub does not support the full set of HTML elements in a README.md file. Here is a write-up about what is supported. I also found out a bit more in this StackOverflow question from 4 years ago.
One of the resources mentioned in that question is this whitelist.
If it worked, what you would need is similar to what is below, which I have kept for your reference. The description is aimed at your problem description. Unfortunately, it looks like GitHub overrides the style attribute, replacing it with width: 100% and forcing the text to wrap below the image.
What should work (but doesn't): The style is attached to the image itself. Attaching it to the div affects the entire div. Note: the <h1> consists of both the image and the text.
<h1> <img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png"
width="128"
height="128"
style="float:left;">
# Quite a long title, potentially going over several lines and on and on and on and on and on and on and on and on and on
I'd like to have a link on text but the text is in 2 paragraphs (using the html editor) resulting in having 2 href's with the link i've given. Here's the regular code:
<p>google</p>
<p>dotcom</p>
and this is the result of this code how I don't want it to be:
google
dotcom
I just want a single highlight when mousing over/clicking, I tried to manually changing the code with erasing the < /a > or so but since im a newbie when it comes to html nothing good came out...
Sorry for bad english, and thanks in advance for replies.[also why are html editors online so buggy? Like the one in wordpress.. trying to do a table exactly how you want it is so annoying.]
Have you tried putting the tag around the p tags?
<a href="#">
<p>
google
</p>
<p>
dotcom
</p>
</a>
In terms of usage, HTML 5 states that the element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".
Try this...
<a href="google.com">
<p>Google</p>
<p>Dotcom</p>
</a>
I would like to know how to float all my badges next to each other in the footer menu. I have four badges so far but could be up to six. The badges are my SSL, AVG, BBB, Etc... I am very very new to all this website building stuff. I use Joomla 3.1 and use a paid up to date template. I can see all the codes and add the badges but they always pop up on top of each other. I had one person help me but they did it in tables and told me that it would work but that it was not the right way to do it. Please remember when helping me that I am a child learning to color for the first time when it comes to this :) Thanks for any help that any one my be able to give.
If you look at the bottom of this page( http://www.jcluforever.com/J-ADORE-GOD-CHRISTIAN-T-SHIRT-p/ts-jdrgod-prp.htm )that the badges they have for payment, SSl, and up front; this is how I want my to line up only I would like mine in the footer and I have like 5 that I would be adding
some idea of what I would have is
https://www.paypal.com/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;">
next one would be
<div id="avgthreatlabs_safetybadge_small"><noscript>AVG Threatlabs</noscript></div><script language="javascript" src="https://api.avgthreatlabs.com/static/js/security_s.js"></script>
next would be
<!--- DO NOT EDIT - GlobalSign SSL Site Seal Code - DO NOT EDIT ---><table width=130 border=0 cellspacing=0 cellpadding=0 title="CLICK TO VERIFY: This site uses a GlobalSign SSL Certificate to secure your personal information." ><tr><td><span id="ss_img_wrapper_110-55_flash_en"><img alt="SSL" border=0 id="ss_img" src="//seal.globalsign.com/SiteSeal/images/gs_noscript_110-55_en.gif"></span><script type="text/javascript" src="//seal.globalsign.com/SiteSeal/gs_flash_110-55_en.js" ></script><br />GlobalSign SSL Certificates</td></tr></table><!--- DO NOT EDIT - GlobalSign SSL Site Seal Code - DO NOT EDIT --->
and so on and so on until I place all the badge I want or can or need to. I am not sure what part of the template you need it is all short or what is called LESS I am told
Best practice is to have these badges nested in an unordered list. Each badge would be inside of a list item. For this example, let's say each badge is just an image. Try this:
<ul class="my-list">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
</ul>
Then, in your stylesheet, write:
.mylist {
list-style:none;
}
.mylist li {
float:left;
}
This will float all your items to the left of the page and "stack" the list items beside each-other, instead of on top of each-other.
Learning web design is a process that will require patients, dedication, and more trial and error than you can imagine. It isn't completely dissimilar from learning a new spoken language, except that instead of learning one, you learn several, and then learn how to make them work together to create what you want. If this doesn't interest you, and you just want to run your website or online business, then I would consider hiring a web designer or firm to maintain the code that powers your business; however, if learning is truly what you want to do, then read!
HTML
HTML, or Hypertext Markup Language, is the code you write to deliver data to the browser. It is not extremely complicated to gain a basic understanding of how HTML works. I'm not going to try and explain the entire thing here, but here is a great beginner tutorial.
CSS
CSS, or Cascading Style Sheets, is a different language that you use, in order to tell the browser how your data should appear. It is very light weight, and pretty much just plain English. Here is an easy to follow guide to CSS.
If you read through these two guides, and do a little experimenting on your own, I believe that you will be able to solve the problem on your own. Once you have the basics of HTML and CSS down, there is still a ton to learn, but once you master the basics, you will be in a much better position to pick up more.
Happy coding, and have fun!
Ok, first of all I'm sorry if my question appears unclear as I'm going to find it hard to explain. I don't know if you guys help with the coding at all but if you could set me off in the right direction that would be great.
Overview-
Basically similar to that of YouTube where on the side panel under "recommended >>" There is a single column with different rows. On each row there is a <div> element which contains a picture, title, who uploaded it and views. So these different parts so the title picture etc. are specific and link to that one video. I know the different videos that are recommended are based on numourous factors etc. But, anyway driving to the point here now-
Q- Is there a way of making the page load a random element or shall we say set for a video within a <div> tag?
I'll put up some code to demonstrate the basic layout:
<table>
<tr>
<td>
<div id="thumbnail">
<img src="thumbnail.png"
</div>
</td>
<td>
<div id="author">
<a> somebody </a>
</div>
</td>
... and so forth.
I have read up on how to make a random image come up upon load but is there a way of making a whole section or say a random style sheet come up on load? and each contain the different videos ( Just taking a stab in the dark here) or some sort of script?. Again I'm sorry if I'm sounded very vague or if I'm using the wrong terminology...
I had a very hard time trying to word what I wish to know how to do, nor could I locate any post or website from Google that had my answer probably due to not being able to word this correctly, but I will explain in fullest detail.
<br />
<hr />
<br />
Break, horizontal, break is my way of separating parts of the post from another. How can I group the three into one simple tag that can replace the three, thus saving me time and hassle .
It would be also helpful to know if there are ways to define tag groupings with more than just empty tags like a tag identified by the string title1 would be a tag containing all the format, text, and all sub-elements of the template that was coded somewhere else.
If this question has already been posted then I am sorry. Thanks!
You don't need the <br> tags because <hr> is a block level element and automatically creates a line break. If you're doing that to get some vertical space above and below thw <hr> why not just use CSS to give the <hr> some margin?
hr
{
margin-bottom: 20px;
margin-top: 20px;
}
Neither <br> nor the proposed alternative <hr> are particularly well-suited here.
You need to learn about CSS. All you need to do is apply appropriate styles (i.e. a margin) to the elements that wrap your posts.
<div class="post">
<h1>Post #1</h1>
<p>something</p>
</div>
<div class="post">
<h1>Post #2</h1>
<p>something else</p>
</div>
div.post {
margin-bottom: 3em;
}
If you are using HTML5 then use <article> instead of <div class="post"> to denote individual posts.
As for grouping tags, this is currently not possible in plain HTML, you need to apply some preprocessing for that. The usual solution is to use a content management system which creates the final HTML based on your content and an HTML template.
Whilst this specific problem can be solved with a little bit of CSS, it sounds like you need a layout or templating engine of some sort in the long run. I'm a rubyist by trade so my go-to solution for doing this is Jekyll.
What Jekyll does is generate static html files from layouts and content that you write. You can abstract a lot of the repetitive layout markup into separate files and then just reference them when you need them.
The following guide is a good place to get started: http://net.tutsplus.com/tutorials/other/building-static-sites-with-jekyll/
If you're already working with another framework then do some reading around it first to see if there's something there you can use. If you're just writing straight-up HTML/CSS though, then definitely give Jekyll a try.