Forums

Give help. Get help.

otc


Forum Replies Created

Viewing 11 posts - 1 through 11 (of 11 total)
  • otc
    # December 2, 2013 at 6:01 pm

    Thanks, I’m actually working on adding codemirror to it so people can enjoy coding on the site easily.

    I’ve already added a hidden section that generate the code. If you look at the code as you write you will see a section called generate. In there I’m rendering the html you are typing in the box.

    The idea is by using Edge Inspect CC or similar programs that enable you to view your website in all browsers/devices, you would be developing live to all browsers/devices. I thought that would be kinda cool =D

    otc
    # November 29, 2012 at 7:25 pm

    Hello,

    You have many solutions however if you want something to be at a very specific position you should make its position to relative and play with the top/right/bottom/left properties.

    Example:


    .excerpt {
    position: relative;
    top: 5px;
    width: 100%;
    padding: 25px 0;
    border-bottom: 1px solid #DDD;
    overflow: hidden;
    clear: both
    }

    Good luck

    otc
    # November 29, 2012 at 7:20 pm

    not loading as well

    in reply to: CSS Alignment help
    otc
    # November 29, 2012 at 7:19 pm

    Hello again,

    My code is correct however I just noticed all your divs inside your wrapper are absolute -_-.

    Set the wrapper to what I’ve mentioned before but change

    top:200px;
    to
    top:245px;

    And delete all absolute positions for #navigationbar, #base and #footer and TADA :D

    otc
    # November 29, 2012 at 2:00 pm

    Hello ChrisP,

    This is a simple fix with overflows :D

    #headerNav{
    position: absolute;
    overflow-y: scroll;
    overflow-x: hidden;
    }

    Hope that helps ^^

    otc
    # November 28, 2012 at 10:57 pm

    Hello jonedwards,

    Interesting topic, first of all never use @import it is terrible performance wise. Next I agree with HugoGiraudel here Size does matter however the number of request is your priority therefore you should combine all your CSS into one stylesheet for production and make sure you minify it, this will save you 30%+ easy.

    The best minifier that I’ve work with is:
    http://refresh-sf.com/yui/

    You have a dropdown so you can choose js or css.

    Hope this helps :D

    otc
    # November 28, 2012 at 10:50 pm

    Hello Mikes02,

    You havn’t included screen size for every line and that is probably the issue, like so:

    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px)

    For medium screens

    only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px)

    another issue I see here is your paddingbottom should be padding-bottom

    Another thing is you have min–moz, I know this a bug however you should include the proper CSS -moz-min.

    Hope this helps :D

    otc
    # November 28, 2012 at 10:26 pm

    Hello fujihime,

    This is very simple :D. Your website is not loading for me however here is an example for you.

    First thing you need to do if you havn’t done so already is include the jquery script to your page.
    add this script at the bottom of the html before the body tag closes

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    </body>

    ok now imagine the div we click on has an id=”click-me”.
    All we have to do is tell jquery to change the css when the user clicks on the div, simple, let’s get to it :).

    HTML:

    <div id="click-me"><div>

    CSS:

    #click-me{
    background-image:url(first-image.jpg);
    }

    jQuery:

    $(document).ready(function() {
    $('#click-me').live('click', function(e) {
    $(this).css('background-image','url(second-image.jpg)');
    });)
    });

    Let me translate this into english:

    When the document is ready (HTML is loaded) if the user clicks on id click-me then change my CSS ( $(this) ) to the following.

    Voila easy, hope this makes coding fun.

    otc
    # November 28, 2012 at 10:09 pm

    Hello Pressuredat19,

    May I first suggest you use div tags instead of tables and then CSS instead of inline CSS and old HTML that are deprecated.

    If you choose to stick with the table you can still style it using CSS like so

    table {
    position: relative;
    width: 685px;
    height: 46;
    margin:0 auto; /* centers it*/
    margin-left: 0;
    border: 1px solid black;
    }
    td {
    padding: 1px;
    margin:1px;
    }

    This should solve your issues with multiple browsers. If it does not link us what you have :D.

    Good luck

    otc
    # November 28, 2012 at 10:00 pm

    Hello Thomen,

    Not only can you use :before/:after but instead of having an image as your arrow you can make your own arrow using CSS.

    .box:after {
    display:block;
    position:absolute;
    content:'';
    margin-top: 0px;
    margin-left: 60px;
    border-left: 10px solid red;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    }

    And Voila you got yourself an arrow, you can play around with the pixels for each top left right bottom to create different kinds of arrows.

    Hope you like this

    in reply to: CSS Alignment help
    otc
    # November 28, 2012 at 9:25 pm

    Hello :),

    Simple stuff, first thing you need is to fix your wrapper so that the content is always centered so let’s get to it:

    HTML:

    <div align="center">
    <div id="wrapper" align="center">

    DELETE align=”center” to both divs and delete the first div, make sure to delete it’s closing tag at the very bottom. We will resolve centering with CSS, YAY :)

    Your HTML should look like this

    <div id="wrapper">

    So how to do it? You can remove all declarations for #wrapper

    #wrapper {
    position:relative;
    top:200px;
    width: 730px;/*the width of your content*/
    margin: 0 auto;
    }

    I set the position to relative so you can specify a top pixel adjustment relative to the body tag. This says 0 margin top and bottom and 50% both left and right which means you’ve got a centered div if you specify it’s width.

    Now for the background image:

    html {
    background: #26598e url(images/background01.jpg) no-repeat top center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    What I changed, I set a default color so the bottom has no white.
    changed center center fixed to top center because you want the logo to stay up. Although I would recommend you separate the logo and the background.

    Hope this helps, Have fun :D

Viewing 11 posts - 1 through 11 (of 11 total)
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag