Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    First Post! Some n00b Questions..

    Just starting on the web coding scene and I've already hit two problems, some help would be appreciated !

    http://supertribe.c0n.us/Index.html
    Yea, it's a horrible hosting but I'm not gonna pay for a domain + hosting at least until I know what I'm doing.

    So, firstly when I add the moon image (which is added atm), my header and text get pushed down. How do I stop this?

    Secondly, I've got an index.html in my directory, but when I got to http://supertribe.c0n.us/ I get the directory.. not the index. Why?

    http://supertribe.c0n.us/styles.css

    That's my CSS if it will help with the first problem.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Where did you want the text to go? Do you want it to wrap the image or be at the top, im not sure i understand.

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I want it at the top.

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    <h1>Tutorials 'n' Stuff</h1>
    <p class="content">This is my first site, so bare with me as I try to include as much content as I can to learn HTML + CSS and take critism.</p>
    <ul class="nav">
    <img src="Images/Blue_Moon_Avatar.jpg" class="img" height="160" width="171">
    <li><a href="Tutorials.html">Tutorials</a></li>
    </ul>
    Try that

  • #5
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts
    hey, take a look and try the following css along with the html :

    what i did, included the image and the list in a sidebar and floating the sidebar to the left.

    if you'd set the content div width to say 100% or X pixels (X being larger than the available space), it would drop down below.

    Code:
    #sidebar {
    float:left;
    width:200px
    }
    .nav {
    width:171px;
    text-align:center;
    padding:0;
    margin:0
    list-style:none
    }
    Code:
    <div id="sidebar">
    	<img src="Images/Blue_Moon_Avatar.jpg" class="img" height="160" width="171">
    	<ul class="nav">
    	<li><a href="http://supertribe.c0n.us/Tutorials.html">Tutorials</a></li>
    	</ul>
    </div>
    <div id="content">
    	<h1>Tutorials 'n' Stuff</h1>
    	<p>This is my first site, so bare with me as I try to include as much content as I can to learn HTML + CSS and take critism.</p>
    </div>
    i would not use capitals in filenames, especially not for the web, and Index.html / index.html are different files. same thing with your directory being Images.

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Supertribe: Welcome to CF. In the future, please read the Posting Guidelines before starting a new thread. Specifically:

    Quote Originally Posted by Posting Guidelines
    2) Type in a subject that summarizes your question- A great way to turn off other members wanting to help you is to type an incomplete or silly subject for your post. Examples of poor subject titles include:

    - "Help!"
    - "I'm a newbie...be gentle"
    - "How can I..."
    - "Urgent...deadline tomorrow!"

    The above subjects either have absolutely nothing to do with the question itself, or are grossly incomplete (ie: "How can I..."). When asking for help, enter a subject that summarizes your question, period! Don't use silly, incomplete, or "bait" subjects. Some examples of good titles are:

    - "How do I round a number to 2 decimal places using JavaScript?"
    - "What's the difference between require() and include() in PHP?"
    - "Can someone suggest a good, free HTML editor?"

  • #7
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    don't judge a book by it's cover as the saying goes..

    thanks for the help guys, but it doesn't seem to work. the image remains at the top left, where i want it but I would like the heading + text beside it.

  • #8
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    try this

    Code:
    <img src="wherever.jpg" style="float:left; clear:left;">

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Supertribe,
    I realize the validator is going to return some errors for the code your free host is adding but it can still be a useful tool both for learning and for developing your site. See the suggestion and links in my sig about validating.

    It also freaks out when it sees your DocType is not the first line so, to best use it you will need to copy/paste your code into the "Validate by Direct Entry" box.

    The validator will find things like .img {poistion: position:absolute; top:0%; border-style: solid; padding: 2px}


    Maybe you should have a look at a good tutorial.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks JC, worked like a charm.

    i'll try that validater + read tutorial too excavator.

  • #11
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts
    Hello supertribe, considering i worked on the page on my hard drive and the result was there, i think you did not use the stylesheet i gave you. You could use it as external, or internal.

    External Stylesheet, going inside <head> and </head>*tags :
    Code:
    <link rel="stylesheet" type="text/css" media="all" href="stylesheet.css" />
    Internal Stylesheet, mostly used while developping, then can be moved to an external sheet (external sheets can be cached, thus saving bandwidth) :
    Code:
    <style type="text/css">
    selector { property: attribute }
    anotherSelector { property: attribute; anotherproperty: attribute }
    </style>
    you can consider reading this if this still does not make sense to you : http://www.w3schools.com/css/css_howto.asp


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •