Skip to main content

Forums

Forum Replies Created

Viewing 12 posts - 16 through 27 (of 27 total)
  • Author
    Posts
  • in reply to: Changing properties of slider in a wordpress template. #105991

    simoncmason
    Member

    So you want the slider to go under the logo and menu area? Do you also want the vertical scrolling where each section resizes to the viewport? To do the second bit you will have to use some javascript.

    But if you only want to make the slider fit under the rest of the content you can do this entirely with css as the pitch theme helpfully doesn’t wrap the #slider inside anything else.

    To do it you first of all need to make the slider big enough to fill the screen so set your body to width:100% then set your slider to 100%. Make sure you have this rule in your style sheet – img {max-width:100%} and then use a really nice big image so it will fill the screen on even large monitors – you may want to host this on a cdn and spend some time carefully optimising it so your page load time isn’t too horrible.

    Once that is done you can use position absolute to move your #topbar, #logo and #mainmenu down the page from where they would sit in the normal flow and give them a positive z-index so they sit over the top of the slider.

    i.e. #topbar {position:absolute; top:100px; z-index:10;} – you can play with the amount of pixels in the top rule to get everything sitting where you want (you can also use left:??px or right??px if need be).

    Then bring the other bits up also using position absolute so they also sit on top of the slider i.e. #call-to-action {postition:absolute;bottom:100px;z-index:10;}

    Then just play with the position values to get everything looking how you want, you could try using percentage values instead of px if you want a more fluid layout which will work better across more screen sizes but be prepared for some frustration if you go down this route – it’s a learning curve!

    If you want the nice horizontal scrolling effect where you scroll each section of the website up to fit the view port that requires some nifty js and css work and is a whole other ball of wax.

    in reply to: [resolved] Help with Fluid Layout Positioning #105990

    simoncmason
    Member

    When you say the text won’t move with the browser, do you mean if you resize the browser window the text stays in place and you get a horizontal scroll bar?

    If so then you probably have a fixed width – i.e. set in pixels somewhere or perhaps a form with a too many columns to scale down?

    Anyway without seeing the code as @i3iorn says above it is pretty much impossible to help you out.

    in reply to: Right align a table cell #105989

    simoncmason
    Member

    Out of interest – what is your use case for this?

    It seems you are using a table layout and then trying to force it to something a table layout was never designed to do – I’d be intrigued to see why.

    Position relative kind of works – see this CodePen – but only if you know the spacing and work it out manually so probably no good for what you want.

    in reply to: WordPress submenu #105895

    simoncmason
    Member

    Hi, I can’t see from the screen shot what you are trying to achieve. Can you give us a link to the page? And a bit more description.

    in reply to: Width problem in IE #105878

    simoncmason
    Member

    Is your set to width:100% and have you got a reset. css or normalize.css in your stylesheet?

    It looks like it should be OK but (assuming you are also writing the HTML) you could add in a div id=”main-wrap” to contain everything else and change the css to:

    body {width:100%}
    #main-wrap {width:980px; margin 0 auto; color:#333;}

    in reply to: jQuery, Simple Lightbox, & WordPress #105804

    simoncmason
    Member

    The plugin should reference the copy of jQuery inculded with WordPress so is your WordPress install up to date? (3.4.1)

    If updating wordpress doesn’t fix it then the plugin isn’t really authored very well – you shouldn’t need to change anything to make it work. If you still want to use this plugin you can deregiser the included version of jQuery and register the most recent version (or you could link to Google’s CDN) but this could cause other plugins or theme functions to fail.

    Maybe try a different lightbox plugin! Colorbox is quite good if you only want to have images in the lightbox.

    If you want other content such as iframes or inline to display in the lightbox you are probably best adding it yourself via your theme functions file.

    in reply to: I really need your help in HTML/CSS plz #105715

    simoncmason
    Member

    OK – So you want the footer full width?

    Bit hacky (It would be far better to rewrite the HTML structure but I take it this isn’t an option and this really isn’t going to look great on small screens (see note below)) but this will work, also only tested in Chrome, you’ll need to test in Firefox, IE etc (It won’t work in ie6):

    #left {
    min-height: 2000px;
    /* Makes the vertical menu bar extend to the bottom of the screen */
    }

    #footer {
    position: absolute;
    left: 0;
    right: 0;
    /* Position absolute allows us to put it where we want, giving it left and right 0 busts it out of the container and sticks it to either side of the screen */
    bottom: 10px;
    /* Puts it 10 pixels from the bottom of the screen (please note this will break the design in mobiles when the user zooms in as the bar will move under the welcome box – the screen not being tall enough to accommodate it – I did say you need to re-write the html ;) */
    width:100%;
    /* Allows us to position the sub-menu using margin 0 auto */
    z-index: -1;
    /* Puts it under the vertical menu bar */
    min-height:60px
    /* Gives it back the height it loses by being position absolute */
    }

    .sub_footer {
    width: 960px;
    margin: 0 auto;
    /* Centres the sub-menu back inline with the main content box */
    }

    .menu_foo {
    float:right;
    /* Puts the menu in place */
    }

    .by {
    float:right
    /* Puts the byline in place */
    }

    Interesting exercise, but, please note the caveats above and I really wouldn’t recommend this for a production site unless the client is happy the design is not going to be seen on mobiles, if they are having a separate mobile site constructed or of course you can use media queries to change the layout for mobile.

    If there is any way of getting the html changed it would be a lot better to simply put the footer outside of the #layout div, underneath it in the document tree, and give it width 100%.

    Good luck and hope this helps.

    Simon


    simoncmason
    Member

    Impossible to help without a link to the file or an example of the html structure and CSS (you could alwasy copy the problem bit on to CodePen if the site isn’t on a live server).

    in reply to: I really need your help in HTML/CSS plz #105371

    simoncmason
    Member

    As @kgscott284 says without seeing the output HTML it is impossible to say for sure why they are having a hard time recreating your image as a web page.

    Is the problem that the footer is going the full width of the page and not leaving the empty space on the left that you want?

    In which case is seems that something like footer {width:70%; float:right} or depending on the containers the footer sits within maybe using position:relative or even position:absolute rules would get you rolling. Or there are lots of other ways to implement your layout.

    In any case to say it can’t be done seems a bit far fetched. The design seems very simple (and all the better for that) to my eyes and as such it should be a snap to create the layout in CSS.

    in reply to: Where to put CSS3 Media Queries? #105370

    simoncmason
    Member

    Option 2 sounds like a world of pain having to trawl through your stylesheets when you want to add a new media query to suit a different device your client has just decided is essential to support.

    I always put all media queries in a block at the very end so they will override the relevant style further up the sheet.

    Am now using SASS so I put them either all into one partial which called at the bottom of the main file or into separate partials if the complexity warrants it.

    in reply to: need a background trick #104923

    simoncmason
    Member

    Well, without digging through your css some more, by setting the height to 100% you are setting it to the height of the viewport, so when you scroll down this element retains its height – i.e. the height of the viewport. Since you have positioned it absolutely it moves up with the page – it is stuck to the top of the page.

    That’s why it is happening, you’re better off finding a way to get the styling right without presentational only divs or other elements.

    in reply to: need a background trick #104921

    simoncmason
    Member

    Hi Cybershot,

    First off your div #right-background is an empty div you are using for presentational purposes only, this is bad practice and you don’t need to do this.

    I think you’re going about it the wrong way.

    Instead of trying to style each div create a background for the whole body.

    Create a very wide background image say 2000px wide with the left half your brown texture and the right your white texture, it only needs to be a few pixels deep, just play with it until the repeating texture looks correct. (It needs to be this wide to fill the screen of all monitors).

    Then apply this background to your body element and add the following css to body:

    background-repeat:repeat-x;
    background-position:center;

    Since you are centering your background you can work out how many pixels you need to offset your image by to the left i.e. making the white section wider (when you are making it in photoshop / gimp or whatever) so it fits your columns.

    Then you are centering your wrapper over the top of your background – set the background to transparent and everything will be lovely.

    This should work as you are using a fixed width on your wrapper . If you were going with a fluid width and a percentage based wrapper I think we’d be looking at add one background to the html element and another to the body element and then giving the body a % margin to the left. Then you’d overlay this with a background on your wrapper. Bit more to it but is should work out with some tweaking.

    Hope this gets you rolling.

Viewing 12 posts - 16 through 27 (of 27 total)
icon-link icon-logo-star icon-search icon-star