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
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
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
<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
#quote_left { float: left; margin-left: 250px; }
#title_top { margin-top:20px; margin-right: 20px; display: inline; }
My title so far:
[ot]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. [/ot]
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.
Hi,
I would do it like this with inline-block instead of floating:
<!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>
@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
I don’t see the styles for the span in your code. Have you forgotten to upload them?
.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 }
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.
.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
<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
.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>
That’s not what I gave you 
Remove the space between the span and the id.
It should be this:
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.
#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.
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
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
span.left_quote, [B]span #right_quote [/B]{
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:
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:
.test1,.test2{color:red;background:white}
It’s the same as saying:
.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:
.quote_top {
text-align: center;
margin: 0 0 1em;
}
[B]}[/B]
.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)
.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.
[B]</style>
[/B].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.
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
Oops. Paul is “on the job”.