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 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2014
    Posts
    27
    Thanks
    4
    Thanked 4 Times in 4 Posts

    New to HTML/CSS... be gentle with me

    Hi

    I am brand new to HTML/CSS and am trying to modify an existing jQuery webtemplate for a single page horizontally scrolling website - so please be gentle with me as I only have a sketchy grasps of some of the basics... The original template I am modifying is here [URL="http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery"]. I have started to modify some of the code to to make the home page a little more like I want it to but I have a loooong way to go. I have a really basic positioning problem that I can't figure out - I can't position my image to the right of the text on the home page. I have tried quite a few things but some of my attempts have ended up messing with the horizontal scroll and turning it into a vertical scroll site. At the moment the site is meant to be viewed at a screen width of around 1300 wide... I will go back later to try to make it responsive but I am just trying to get the intial layout sorted first. I have attached an image of where I am heading with my design... I would be eternally grateful for any help you are able to provide!!!!

    This is my html:


    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>the evolution of video games</title>
    <meta charset=UTF-8"/> 
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
    <link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    </head>
    <body>
    <div>
    <span class="footer">
    <!-- copyright disclaimer -->
    <p> This website has been created as part of an assignment in an approved course of study for Curtin University 
    and contains copyright material not created by the author. All copyright material used remains copyright of the 
    respective owners and has been used here pursuant to Section 40 of the Copyright Act 1968 (Commonwealth of Australia). 
    No part of this work may be reproduced without consent of the original copyright owners. See code comments for references.       
    </span>
    </div>
    <div id="header">
    <img id="logo" src="http://www.codingforums.com/images/logo.png" alt="armchair guide to aboriginal art logo image">
    </div>
    <div class="section black" id="section1">
    <ul class="nav">
                    <li><a href="#section1">intro</a></li>
                    <li><a href="#section2">pre 70s</a></li>
                    <li><a href="#section3">1980s</a></li>
            <li><a href="#section4">1990s</a></li>
            <li><a href="#section5">2000s</a></li>
            <li><a href="#section6">2010s</a></li>
                </ul>
    
    <p>
    
    There are  1.5 billion gamers world wide playing for a total of 3 billion hours a week.   
    
    Who is playing? 75% of gamers are over 18, the average gamers is 30 years old, 40% of gamers are women.
    
    Play the video to see how video games have evolved in just a few decades.
    </p>
    <p>
    <img id="angrybirds" src="http://www.codingforums.com/images/angrybirds.png" alt="angry birds image">
    </p>
                
            </div>
            <div class="section white" id="section2">
                <h2>pre 1970s</h2>
                <p>
                    ‘A fathomless and boundless deep,
                    There we wander, there we weep;
                    On the hungry craving wind
                    My Spectre follows thee behind.
    
                </p>
                <ul class="nav">
                    <li><a href="#section1">intro</a></li>
                    <li>pre 70s</li>
                    <li><a href="#section3">1980s</a></li>
                    <li><a href="#section4">1990s</a></li>
                    <li><a href="#section5">2000s</a></li>
                    <li><a href="#section6">2010s</a></li>
                </ul>
            </div>
            <div class="section black" id="section3">
                <h2>Section 3</h2>
                <p>
                    ‘He scents thy footsteps in the snow
                    Wheresoever thou dost go,
                    Thro’ the wintry hail and rain.
                    When wilt thou return again?
    
                </p>
                <ul class="nav">
                    <li><a href="#section1">1</a></li>
                    <li><a href="#section2">2</a></li>
                    <li>3</li>
                    <li><a href="#section4">4</a></li>
                    <li><a href="#section5">5</a></li>
                    <li><a href="#section6">2010s</a></li>
                    
                </ul>
            </div>
     <div class="section white" id="section4">
                <h2>Section 4</h2>
                <p>
                    ‘He scents thy footsteps in the snow
                    Wheresoever thou dost go,
                    Thro’ the wintry hail and rain.
                    When wilt thou return again?
    
                </p>
                <ul class="nav">
                    <li><a href="#section1">1</a></li>
                    <li><a href="#section2">2</a></li>
                    <li><a href="#section3">3</a></li>
                    <li>4</li>
                    <li><a href="#section5">5</a></li>
                    <li><a href="#section6">2010s</a></li>
                </ul>
            </div>
     <div class="section black" id="section5">
                <h2>Section 5</h2>
                <p>
                    ‘He scents thy footsteps in the snow
                    Wheresoever thou dost go,
                    Thro’ the wintry hail and rain.
                    When wilt thou return again?
    
                </p>
                <ul class="nav">
                    <li><a href="#section1">1</a></li>
                    <li><a href="#section2">2</a></li>
                    <li><a href="#section3">3</a></li>
                    <li><a href="#section4">4</a></li>
                    <li><a href="#section5">5</a></li>
                    <li><a href="#section6">2010s</a></li>
                            </ul>
            </div>
            <div class="section black" id="section6">
                <h2>Section 6</h2>
                <p>
                    ‘He scents thy footsteps in the snow
                    Wheresoever thou dost go,
                    Thro’ the wintry hail and rain.
                    When wilt thou return again?
    
                </p>
                <ul class="nav">
                    <li><a href="#section1">1</a></li>
                    <li><a href="#section2">2</a></li>
                    <li><a href="#section3">3</a></li>
                    <li><a href="#section4">4</a></li>
                    <li><a href="#section5">5</a></li>
                    <li><a href="#section6">2010s</a></li>
                            </ul>
            </div>
    
    
    
            <!-- The JavaScript -->
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>        
            <script type="text/javascript" src="jquery.easing.1.3.js"></script>
            <script type="text/javascript">
                $(function() {
                    $('ul.nav a').bind('click',function(event){
                        var $anchor = $(this);
                        /*
                        if you want to use one of the easing effects:
                        $('html, body').stop().animate({
                            scrollLeft: $($anchor.attr('href')).offset().left
                        }, 1500,'easeInOutExpo');
                         */
                        $('html, body').stop().animate({
                            scrollLeft: $($anchor.attr('href')).offset().left
                        }, 1000);
                        event.preventDefault();
                    });
                });
            </script>
        </body>
    </html>

    This is my css:

    Code:
    *{
        margin:0;
        padding:0;
    }
    body{
    background-color: #ffffff; /*specifies colour of body background*/
    font-family: 'Calibri', sans-serif; /*specfifies font style for body text*/
    font-size: 100%; /*specifies default font size all other sizes will be adjusted in relation to this*/
    color: #ffffff;
    width:24000px;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    }
    
    #logo {
    position: fixed;
    margin: 0 0 0 600px;
    }
    
    .section{
          width:2000px;
        float:left;
        height:100%;
        
    }
    
    
    .section h2{
        margin:200px 0px 30px 680px;
    }
    
        
        .section p{
        margin:200px 0px 0px 100px;
        width:450px;
        }
        
        .section img{
        display: inline;
        }
        
    .black{
        color:#fff;
       background:#282828 no-repeat top right;
    }
    .white{
        color:#000;
        background:#fff url(../images/white.jpg) no-repeat top right;
    }
    
    .section ul{
        list-style:none;
        margin: 30px 0 0 0;
        display: inline;
        position: fixed;    
        padding: 80px 0 0 900px;
    }
    .black ul li{
        float:left;
        padding:5px;
        margin:5px;
        color:#aaa;
    }
    .black ul li a{
        display:block;
        color:#f0f0f0;
    }
    .black ul li a:hover{
        text-decoration:none;
        color:#fff;
    }
    .white ul li{
        float:left;
        padding:5px;
        margin:5px;
        color:#aaa;
    }
    .white ul li a{
        display:block;
        color:#222;
    }
    .white ul li a:hover{
        text-decoration:none;
        color:#000;
    }
    
    a{
                color:#fff;
                text-decoration:none;
            }
            a:hover{
                text-decoration:underline;
            }
    span.footer{
    position:fixed;
    left:100px;
    bottom:10px;
    right: 100px;
    font-size:70%;
    }
    
    span.footer a{
    color:#fff;
    
    }
    
    span.footer a:hover{
    color:#ddd;
    }
    Last edited by VIPStephan; 08-01-2014 at 07:03 PM. Reason: added code BB tags

  • #2
    New Coder
    Join Date
    Jul 2014
    Posts
    27
    Thanks
    4
    Thanked 4 Times in 4 Posts
    New to HTML/CSS... be gentle with me-home-page-mockup-evolution-video-games.jpg this is the attachment that I meant to include in my previous post...

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It's a little hard to relate your html to your screenshot without the images, but it looks like you need to float the image. At the moment it's sitting with a separate .section p tag which is a block element and hence will not stack up alongside another element without using float (or display:inline - but float is what you want here).

    I'd be inclined to wrap the image and the text in a single div and float the image within that as that's likely to be a more usable layout going forward.
    Last edited by SB65; 07-31-2014 at 09:09 PM.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    clickmunki (08-01-2014)

  • #4
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It will be simple mistake you just google it even you will get answer.

  • #5
    New Coder
    Join Date
    Jul 2014
    Posts
    27
    Thanks
    4
    Thanked 4 Times in 4 Posts
    Thank you so much SB65, I really appreciate you taking the time to respond constructively to my beginners question. I tried so many different fixes before I posted including float left and display inline but nothing seemed to work but I must have had a typo or something lurking in my css because I went back and had another go after your feedback and it worked first time round... I feel like such a dill!! Thanks again.


  •  

    Posting Permissions

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