Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Member dustedpetalsx's Avatar
    Join Date
    Sep 2011
    Location
    Hertfordshire UK
    Posts
    49
    Member #
    29238
    Liked
    12 times
    Hello, me again, the one who knows nothing about anything :-p

    Well - I'm now having another probably very simple to fix issue, with my CSS this time (siiiiggghhh).

    As you can see on http://cleaniqueuk.com my telephone numbers are near the middle of the page. I'm trying to create a left aligned and right aligned float that shows the phone numbers to the far left, the home page and team links etc to the right of the page.

    What on earth have I done!? I followed a simple tutorial to left and right align using P class tags but as usual, whenever I do anything there is something wrong. :-) x First person to make me a happy girly gets a cookie!

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    For some reason, line 1 in contact-light.css is causing your issue.

    I like oatmeal raisin, but most others are acceptable.
    dustedpetalsx likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    It's actually an uncleared float.

    What you want is this:

    <p class="alignleft">
    ...
    </p>
    <p class="alignright">
    ...
    </p>
    <div style="clear: both;"></div>

    The clear has to occur immediately after the last floated element or it almost always causes problems.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    It is cleared. You have to look after the... *gasp* image map
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Yeah, but the clear occurs outside of the div both of the paragraphs are contained in. If she puts it inside, this is probably solved.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Member dustedpetalsx's Avatar
    Join Date
    Sep 2011
    Location
    Hertfordshire UK
    Posts
    49
    Member #
    29238
    Liked
    12 times
    Okaaay... so I shouldn't be using image maps I am going to assume from that post? What in the world am I meant to use for that then?! Didn't think there was anything wrong with image mapping.

    So the float thing didn't work, I already had cleared it and moved it inside the DIV but still nothing. This is working properly on the subpages, http://cleaniqueuk.com/contactus - for example.

    Just not the main page! I've looked at everything but really I can't work it out?

  8. #7
    Member dustedpetalsx's Avatar
    Join Date
    Sep 2011
    Location
    Hertfordshire UK
    Posts
    49
    Member #
    29238
    Liked
    12 times
    Quote Originally Posted by Ronald Roe, post: 223936
    For some reason, line 1 in contact-light.css is causing your issue.

    I like oatmeal raisin, but most others are acceptable.
    Your raisin statement confused me, I completely disregarded the top line and didn't see it! LOL.

    That has actually worked. For starters, I don't even use that piece of code - it was when I tried to install some contact form styles but failed miserably. So that was removed (need to clean up the code) and now it works hurrah! Thank you very much for helping me with that

    Just one more point I must ask; if I were to put all styles into one style sheet and clean up the amount of code in header.php - would the site load faster? I seem to have quite slow loading times right now. x

  9. #8
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Quote Originally Posted by dustedpetalsx, post: 223964
    Your raisin statement confused me, I completely disregarded the top line and didn't see it! LOL.

    That has actually worked. For starters, I don't even use that piece of code - it was when I tried to install some contact form styles but failed miserably. So that was removed (need to clean up the code) and now it works hurrah! Thank you very much for helping me with that

    Just one more point I must ask; if I were to put all styles into one style sheet and clean up the amount of code in header.php - would the site load faster? I seem to have quite slow loading times right now. x
    Helloo,

    The reason for your slowness on the site is that are far too many images being used that you could replicate easily in the css.

    For instance. The heading color and the background color could be put in the correct divs with the tag background-color. For instance

    Code:
    .headerwrapper{
    background-color:#51999E;<!--this is the actual background color of that header section-->
    }
    .bodywrapper{
    background-color:#ECEACD;<!--Again the same color for the body color-->
    }
    I use a program called ColorPic which helps you grab relevant colors etc by hovering over the color and holding CTRL + G.

    Hope this helps ya
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  10. #9
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You may see a slightly higher download rate by combining stylesheets, because you'll have fewer server requests. However, that isn't what's slowing you down. It's the images that are slowing you down. Most of the time, you should not have text in images. Search engines can't read that. Even when you must use images, use an image replacement technique. If you want fancy fonts, use @font-face.
    Quote Originally Posted by dustedpetalsx, post: 223963
    Okaaay... so I shouldn't be using image maps I am going to assume from that post? What in the world am I meant to use for that then?! Didn't think there was anything wrong with image mapping.
    Well, there is, and by God you should have known... j/k

    Use an unordered list. Example:
    HTML Code:
    <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    Of course, you'll want to input the actual links.
    Then, style it like so:
    Code:
    .nav li{
    float:left;
    }
    or
    Code:
    .nav li{
    display:inline-block;
    }
    Either works, really, but I find the floated one easier to work with.
    From there, you can further style the text, size and position of the elements in the menu. You can even add a class to each li and add your icons as background images.
    dustedpetalsx likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  11. #10
    Member dustedpetalsx's Avatar
    Join Date
    Sep 2011
    Location
    Hertfordshire UK
    Posts
    49
    Member #
    29238
    Liked
    12 times
    Ah thanks guys! So reduce the images, gotcha :-) I'll have a real go at that over the weekend and see if I can do the image replacement techniques, etc.

    Good idea about the background colour - that's pretty damn obvious actually haha. I'm a plank :-D


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:39 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com