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 6 of 6
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help for something simple (CSS)

    Hi,

    I've got something pretty simple I'd like to fix but I don't know how to. I'm completely new to CSS so I'd be really grateful for help:

    Code:
    <!Doctype HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="description" content="TOFILL">
    <meta name="keywords" content="RuneVision, 317, private server, Runescape, old, cache, source, client">
    </head> 
    
        <body>
    	<div align="center">
    	<link rel="stylesheet" type="text/css" href="C:\Users\elizabeth\Project\temp\CSS\Body.css">
    
    <img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" width="810px">
    <br>
    <img src="" width="800px" height="90px">
    <br>
    <img src="http://www.rs-317.net/assets/img/layout/scroll/scroll466Bg.gif" width="800px" height="900px">
    <br>
    <img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Bottom.gif" width="810px">
    Basically, I'd like to know how to join up the images as as you can see, there are white spaces in between (Not caused by the brs), so I'd like to fix them with the center section of scroll being the main background which in between the two scroll heads which when an image is placed on it is not moved to the side and it is simply placed on top of the background.

    So basically the same as this but ofc with my own design:

    http://th03.deviantart.net/fs49/PRE/...by_RodsGFX.png

    Thanks

  • #2
    New Coder
    Join Date
    May 2012
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Ashtechsmith View Post
    Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

    CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.
    That's got nothing to do with what I was asking; I didn't ask you to go and copy and paste the definition of CSS from wikipedia, I already know what it is.

  • #3
    New Coder
    Join Date
    Jun 2012
    Location
    MI
    Posts
    11
    Thanks
    0
    Thanked 2 Times in 2 Posts
    It be nice if I could get a link to your site.

    However. To place images on my experiences with spacing/ CSS. You will want to use multiple <divs> within <divs>.

    Here is an example from my site.
    Code:
    			  <div>
    			  </div>
    			    <img src="IMAGE.png" width="26" height="26" /></div>
    			</form>	
    			<h3 class="mypets">Social </h3>
                <div class="thepet">
    PET IMAGE
    CODING
    </div>
    Ironically, over time I found the CSS is simply. It's the coding of the actual page that makes everything come together.

    I would recommend finding coding from a free CSS template site that uses image background - and learn off that.

  • #4
    New Coder
    Join Date
    May 2012
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bundled View Post
    It be nice if I could get a link to your site.

    However. To place images on my experiences with spacing/ CSS. You will want to use multiple <divs> within <divs>.

    Here is an example from my site.
    Code:
    			  <div>
    			  </div>
    			    <img src="IMAGE.png" width="26" height="26" /></div>
    			</form>	
    			<h3 class="mypets">Social </h3>
                <div class="thepet">
    PET IMAGE
    CODING
    </div>
    Ironically, over time I found the CSS is simply. It's the coding of the actual page that makes everything come together.

    I would recommend finding coding from a free CSS template site that uses image background - and learn off that.
    I haven't uploaded my site yet, but everything is here:

    HTML:


    <!Doctype HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="description" content="TOFILL">
    <meta name="keywords" content="RuneVision, 317, private server, Runescape, old, cache, source, client">
    </head>

    <body>
    <div align="center">
    <link rel="stylesheet" type="text/css" href="C:\Users\elizabeth\Project\temp\CSS\Body.css">

    <img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" width="810px" class="scrolltop">
    <br>
    <img src="" width="800px" height="90px" class="banner">
    <br>
    <img src="http://www.rs-317.net/assets/img/layout/scroll/scroll466Bg.gif" width="800px" height="900px" class="scroll-enter">
    <br>
    <img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Bottom.gif" width="810px">
    CSS:

    Code:
    body
    {
    background-color:#F1EDC2;
    text-align:center;
    font-family:Arial;
    font-size:14px;
    }
    img.scrolltop
    {
    position: absoloute;
    }
    img.banner
    {
    position: absoloute;
    }
    img.scrollcenter
    {
    position: absoloute;
    }
    img.scrollbottom
    {
    position: absoloute;
    }
    I still can't get this to work, if you could give me something to work off that would be great
    Last edited by Jemdt; 06-12-2012 at 10:28 PM.

  • #5
    New Coder
    Join Date
    Jun 2012
    Location
    MI
    Posts
    11
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I tried editing it a bit on my site. But here is a start to making the images positioned on the page. It takes a lot of time to get good positioning.

    below link is the example i was trying
    http://bundlesearch.com/usertest1.html

    Body CSS
    Code:
    body
    {
    background-color:#F1EDC2;
    text-align:center;
    font-family:Arial;
    font-size:14px;
    }
    img.scrolltop
    {
    position:absolute;
    left:300px;
    top:20px;
    }
    img.banner
    {
    position:absolute;
    left:300px;
    top:50px;
    }
    img.scrollcenter
    {
    position:absolute;
    left:300px;
    top:90px;
    }
    img.scrollbottom
    {
    position:absolute;
    left:300px;
    top:100px;
    }
    You can use absolute positioning. Meaning that (100px) under top would be the px away from top of page. Therefore, one image would be 10px than the other would be 80px. And they would begin to align as set.

    You could also you overlapping coding:
    Code:
    img
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    }
    So edit the left/top positions of the page.

    HTML Coding
    Code:
    <!Doctype HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="description" content="TOFILL">
    <meta name="keywords" content="RuneVision, 317, private server, Runescape, old, cache, source, client">
    <title>Untitled Document</title></head> 
    
    <body>
    <div align="center">
    <link rel="stylesheet" type="text/css" href="body.css">
    
    <img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" width="810px" height="64" class="scrolltop">
    <br>
    <img src="" width="800px" height="90px" class="banner">
    <br>
    <img src="http://www.rs-317.net/assets/img/layout/scroll/scroll466Bg.gif" width="810" height="911" class="scroll-enter">
    <br>
    <img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Bottom.gif" width="810px">

  • Users who have thanked bundled for this post:

    Jemdt (06-14-2012)

  • #6
    New Coder
    Join Date
    May 2012
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bundled View Post
    I tried editing it a bit on my site. But here is a start to making the images positioned on the page. It takes a lot of time to get good positioning.

    below link is the example i was trying
    http://bundlesearch.com/usertest1.html

    Body CSS
    Code:
    body
    {
    background-color:#F1EDC2;
    text-align:center;
    font-family:Arial;
    font-size:14px;
    }
    img.scrolltop
    {
    position:absolute;
    left:300px;
    top:20px;
    }
    img.banner
    {
    position:absolute;
    left:300px;
    top:50px;
    }
    img.scrollcenter
    {
    position:absolute;
    left:300px;
    top:90px;
    }
    img.scrollbottom
    {
    position:absolute;
    left:300px;
    top:100px;
    }
    You can use absolute positioning. Meaning that (100px) under top would be the px away from top of page. Therefore, one image would be 10px than the other would be 80px. And they would begin to align as set.

    You could also you overlapping coding:
    Code:
    img
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    }
    So edit the left/top positions of the page.

    HTML Coding
    Code:
    <!Doctype HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="description" content="TOFILL">
    <meta name="keywords" content="RuneVision, 317, private server, Runescape, old, cache, source, client">
    <title>Untitled Document</title></head> 
    
    <body>
    <div align="center">
    <link rel="stylesheet" type="text/css" href="body.css">
    
    <img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" width="810px" height="64" class="scrolltop">
    <br>
    <img src="" width="800px" height="90px" class="banner">
    <br>
    <img src="http://www.rs-317.net/assets/img/layout/scroll/scroll466Bg.gif" width="810" height="911" class="scroll-enter">
    <br>
    <img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Bottom.gif" width="810px">
    Thanks, that sorted everything

    +1


  •  

    Tags for this Thread

    Posting Permissions

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