SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    What to do when floating?

    When your floating an element what should you do with the other element if you want them to stay in the flow as normal but they are bunching next to the floated item?

    I mean with the header I'm creating here:

    http://muslimahwebdesign.co.uk

    I'm floating the left quote image and floating the quote also to go next to it ( although not sure if it's best to float the quote right or left? ) So then the last quote I want below the image quote and first quote but it's sticking to the side of them

  2. #2
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I did a search on google and placed clear: left on the bottom quote which worked however I'm not sure what display:block is for and if I should use it

    Also whilst doing that I can't seem to use margin-top to push it down

  3. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    how to use floating properly

    I'm trying to set a simple piece of text in the middle of 2 images ( of quotes )

    I'm finding that after floating them I can't seem to understand which ones to float and which one not to float and when I float the first 2 I can't seem to get margins to go right.
    How should I properly use floating when trying to put these 3 elements side to side?

    Here is the code so far:

    html

    Code:
    <img id="quote_left" src="http://www.muslimahwebdesign.co.uk/wp-content/uploads/2013/05/left_quote_turn.jpg" />
    <h1 id="title_top">As a Muslimah I do halal design for women in business.</h1>
    <img id="quote_right" src="http://www.muslimahwebdesign.co.uk/wp-content/uploads/2013/05/right_quote_turn.png" />
    css

    Code:
    #quote_left { float: left; margin-left: 250px; }
    #title_top { margin-top:20px; margin-right: 20px; display: inline; }
    My title so far:

    http://muslimahwebdesign.co.uk

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,578
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    hantaah, updating yesterday's thread and showing your new attempt is more appropriate than starting a new thread about the same topic. Yesterday's thread isn't dead. Starting multiple threads about the same topic is not cool.

    EDIT: threads merged.


    Please refer to this page for two examples of centering widthless objects on a web page. If these do not work for you, there are more.

    http://pmob.co.uk/pob/centred-float.htm
    Last edited by ralph.m; May 8, 2013 at 17:08.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,468
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I would do it like this with inline-block instead of floating:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .quote {
    	text-align:center;
    	margin:0 0 1em
    }
    .quote span {
    	display:inline-block;
    	vertical-align:bottom;
    	padding:0 5px;
    }
    span.lq, span.rq {
    	text-indent:-999em;
    	width:57px;
    	height:57px;
    	background:url(http://www.muslimahwebdesign.co.uk/wp-content/uploads/2013/05/left_quote_turn.jpg) no-repeat 0 0;
    	padding:0;
    }
    span.rq { background:url(http://www.muslimahwebdesign.co.uk/wp-content/uploads/2013/05/right_quote_turn.png) no-repeat 0 0 }
    </style>
    </head>
    
    <body>
    <h1 class="quote"><span class="lq">"</span><span>This is a centred heading</span><span class="rq">"</span></h1>
    </body>
    </html>

  6. #6
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @ronpat ; sorry about the new thread

    wrt the link do you mean I should put these 3 items in an ul like with the buttons?

    @pau O'B ; I tried that code but it's not working properly for me with the background images not showing and the " are showing

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,468
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by hantaah View Post
    @ronpat
    @pau O'B ; I tried that code but it's not working properly for me with the background images not showing and the " are showing
    I don't see the styles for the span in your code. Have you forgotten to upload them?

    Code:
    .quote span {
    	display:inline-block;
    	vertical-align:bottom;
    	padding:0 5px;
    }
    span.lq, span.rq {
    	text-indent:-999em;
    	width:57px;
    	height:57px;
    	background:url(http://www.muslimahwebdesign.co.uk/w...quote_turn.jpg) no-repeat 0 0;
    	padding:0;
    }
    span.rq { background:url(http://www.muslimahwebdesign.co.uk/w...quote_turn.png) no-repeat 0 0 }
    If you copy the code I gave you and run it in your browser while online and you will see that it is working.

    I see that you have changed the classes to ids so you need ot change the styles accordingly.

    Code:
    .quote_top {
    	text-align:center;
    	margin:0 0 1em;
    	white-space:nowrap;/* if you don;t want quotes or text to wrap*/
    }
    
    .quote_top span {
    	display:inline-block;
    	vertical-align:bottom;
    	padding:0 5px;
    }
    #left_quote, #right_quote {
    	text-indent:-999em;
    	width:57px;
    	height:57px;
    	background:url(http://www.muslimahwebdesign.co.uk/wp-content/uploads/2013/05/left_quote_turn.jpg) no-repeat 0 0;
    	padding:0;
    }
    #right_quote { background:url(http://www.muslimahwebdesign.co.uk/wp-content/uploads/2013/05/right_quote_turn.png) no-repeat 0 0 }

  8. #8
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I don't see the styles for the span in your code. Have you forgotten to upload them?

    Code:
    .quote span {
    	display:inline-block;
    	vertical-align:bottom;
    	padding:0 5px;
    }
    span.lq, span.rq {
    	text-indent:-999em;
    	width:57px;
    	height:57px;
    	background:url(http://www.muslimahwebdesign.co.uk/w...quote_turn.jpg) no-repeat 0 0;
    	padding:0;
    }
    span.rq { background:url(http://www.muslimahwebdesign.co.uk/w...quote_turn.png) no-repeat 0 0 }
    If you copy the code I gave you and run it in your browser while online and you will see that it is working.

    I see that you have changed the classes to ids so you need ot change the styles accordingly.

    Code:
    .quote_top {
    	text-align:center;
    	margin:0 0 1em;
    	white-space:nowrap;/* if you don;t want quotes or text to wrap*/
    }
    
    .quote_top span {
    	display:inline-block;
    	vertical-align:bottom;
    	padding:0 5px;
    }
    #left_quote, #right_quote {
    	text-indent:-999em;
    	width:57px;
    	height:57px;
    	background:url(http://www.muslimahwebdesign.co.uk/wp-content/uploads/2013/05/left_quote_turn.jpg) no-repeat 0 0;
    	padding:0;
    }
    #right_quote { background:url(http://www.muslimahwebdesign.co.uk/wp-content/uploads/2013/05/right_quote_turn.png) no-repeat 0 0 }

    yes, i'm not sure what's happening here as I have the code in my custom css field so its seeing the .quote_top span but not the #right_quote

    here is my html code

    Code:
    <h1 class="quote_top"><span id="left_quote">"</span><span>As a Muslimah I do halal design for women in business</span><span id="right_quote">"</span></h1>
    here is my css

    Code:
    .quote_top span { display:inline-block; vertical-align:bottom; padding:0 5px; }
    span #left_quote,  span #right_quote { text-indent: -999em; width: 57px; height: 57px; background: url('http://www.muslimahwebdesign.co.uk/wp-content/uploads/2013/05/left_quote_turn.jpg') no-repeat 0 0; padding:0;   }
    span #right_quote { background:url(http://www.muslimahwebdesign.co.uk/wp-content/uploads/2013/05/right_quote_turn.png) no-repeat 0 0 }
    </style>

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,468
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    That's not what I gave you

    Remove the space between the span and the id.

    It should be this:
    Code:
    span#right_quote{}
    span#left_quote{}
    However now that you changed it to ids instead of classes as in my example you can just use the id.

    Code:
    #right_quote{}
    #left_quote{}
    Of course that means you can't use that anywhere else on the same page which is why I used classes.

  10. #10
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ah right, what is this kind of bunching rule? I'm trying to do a similar thing with the ul underneath it. Change the list-style-image for that list only it's seems i'm misunderstanding how it works

    also the image for the quote is showing but only a small portion of it. Strange because the width and height is showing now

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,468
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You must take more care as this is quite simple code that we are working with but you are missing some simple basic things.

    First of all you have changed your code back to classes but you have only changed one of the classes in the css. You still have an id here and a space after the span

    Code:
    span.left_quote, span #right_quote {
    	text-indent: -999em;
    	width: 57px;
    	height: 57px;
    	background: url('http://www.muslimahwebdesign.co.uk/wp-content/uploads/2013/05/left_quote_turn.jpg') no-repeat 0 0;
    	padding:0;
    }
    It should be:

    Code:
    span.left_quote, span.right_quote {etc...}
    A comma separated list as above (span.left_quote, span.right_quote ) is useful for shortening the stylesheet as you can apply common rules to a group of selectors in one go.

    If you say:

    Code:
    .test1,.test2{color:red;background:white}
    It's the same as saying:
    Code:
    .test1{color:red;background:white}
    .test2{color:red;background:white}
    Except that it uses far less code.

    You also have another error here where you have an extra closing bracket:

    Code:
    .quote_top {
    	text-align: center;
    	margin: 0 0 1em;
    }
    }
    .quote_top span {
    	display:inline-block;
    	vertical-align:bottom;
    	padding:0 5px;
    }
    That extra bracket will make the next rule fail as it becomes part of the selector for the next rule.

    Here is your code once again in working order (as it has been every time I have given it to you)

    Code:
    .quote_top {
    	text-align: center;
    	margin: 0 0 1em;
    }
    .quote_top span {
    	display:inline-block;
    	vertical-align:bottom;
    	padding:0 5px;
    }
    span.left_quote, span.right_quote {
    	text-indent: -999em;
    	width: 57px;
    	height: 57px;
    	background: url('http://www.muslimahwebdesign.co.uk/wp-content/uploads/2013/05/left_quote_turn.jpg') no-repeat 0 0;
    	padding:0;
    }
    span.right_quote { background:url(http://www.muslimahwebdesign.co.uk/wp-content/uploads/2013/05/right_quote_turn.png) no-repeat 0 0 }

    I also note that you have included style tags in your external css file which is not allowed and will break the rules.

    Code:
    </style>
    .styled-list #top_list li { list-style-image: url(http://www.muslimahwebdesign.co.uk/wp-content/uploads/2013/05/arrows_2sm.png); }
    Remove any style tags from your external css.

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,578
    Mentioned
    63 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by hantaah View Post
    wrt the link do you mean I should put these 3 items in an ul like with the buttons?
    On second thought, that was probably not a very useful reference. I was concerned about the use of left floats and large left margins. The page that I referenced demonstrated a technique for centering floated objects in a fluid environment (different window widths). It wasn't a plug-n-play substitute for your code.

    The example that @Paul O'B included in post #5 is much more practical. Significantly, it does not float stuff needlessly. Works great on my PC. It looks like successful implementation of this (or any code) depends on accurately transcribing the details of the code and understanding how your development system operates (what is actually on the server).

    I'd like to offer a suggestion:

    When someone posts a workable demo page with code (such as Paul's), copy and paste that code into a new file on your PC and give it an "html" suffix so it will open in your browser on your PC as a web page. By doing that, you can see how the code works before you attempt to put it into your web site. It's a quick, easy, and very simple preview.

    Another tip:

    Stick to using classes (.), NOT ids (#), unless required for JavaScript calls, fragment identifiers or by WordPress.

    Finally:

    The ul beneath the one currently being addressed is also within an <h1> tag. While technically OK, it is semantically poor practice to have more than one <h1> tag on a page. It would be better if these were written as <h2>'s or <h3>'s (as appropriate).

    Paul's code will also work beautifully in that line (tested great on my PC, too!)


    Cheers
    Off Topic:

    Oops. Paul is "on the job".


Bookmarks

Posting Permissions

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