I'm trying to write it so that the text on my blog won't overlap. I tried putting the "white-space: nowrap" code into everywhere that had text, but it just made the words go out into the middle of the page. Here's a link to my page illustrating what I'm talking about http://schlurb.tumblr.com/post/68525778003/life-goals-marry-paris-hilton-birth-a
Here's a part of the code I'm using:
.quote {
float: right;
text-align: center;
font-size: {
text: Body font size
}
px;
line-height:20px;
text-transform:none;
margin-top:20px;
margin-bottom:20px;
width:620px;
font-family: {
font: body title
}
;
}
I think you encountered the collapse problem. This happens because of
float:right;
If really is the case you can solve it by adding
overflow:auto;
to the parent of your quote.
First of all, I'm just going to say that the bit of CSS code you've posted above does not currently apply to anything on your web page. Why? Well, the code above applies to all elements with the class name "quote". You have no HTML elements on your page with the class "quote" assigned to it.
Go through and add the quote class to the applicable elements.
Your CSS .quote{} has no corresponding e.g. <div> tag, this after looking into the pagelink you provided
Related
So I signed up here because I have something that drives me crazy. I am sure the answer is pretty straight and simple, but I just can see it...
I want to make a small gallery for an article, showing screenshots from different video games. The problem: The list wont align correctly with the text within the content div. No matter what I do. text-align: left just gets it to exactly this position, center and right work. It is like it is aligning on the edge of a div, but there is none. Putting it within the needed <p> tags destroys the text like seen in the picture. Keeping it out of the <p> tags keeps the text like it should be, but the list is exactly at the same place. I tried inline-block, inline, position: absolute etc, but nothing seems to work. I already tried searching the other divs for problems, but I just can't find anything. Here is a picture.
This is the css:
.gallerie {
text-align: left;
width: 100%;
}
.gallerie ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.gallerie li {
display: inline;
margin: 0px;
padding: 0px;
}
Can't somehow show the HTML part here, but it's just a simple ul li list with images. The whole thing is simple, but something just doesn't.
Thanks in advance!
Edit:
So as I can't get the thing with the code right, here is the direct linkt to the page with that problem: Link to the Problem
I hope this is allowed here. Thank you to the admin for editing, I am new here, and really not used to it. Thank you very much.
So guys, in short:
wanted to add the pictures here, can't post more than two links
Edit:
Funny thing, it works when I put the ul li outside of the article tag. So I would have a workaround.
Edit: The problem seems to be within the article tag. I have both, right and left margin in there. But when I make it to margin 0px, the whole text moves left (thats why I have a margin of 20px there). I guess the problem will be a second unneeded margin.
Edit: I fixed this by taking away the margin-left: 20px; out of the article tag, and added the value to the p tag for that class instead. Works. I don't really know what the error was, but it seems fine now. Thank you all for your help.
Last Edit: You can see the working example when you refresh the link to the site. Thanks for your help.
Your problem is css padding
<ul> tags have default padding. If you set padding: 0; then the spacing should disappear.
I would say set text-align: center; and padding: 0; for the .gallerie class
Is this what you want?
Corresponding css for .gallerie
Padding Example:
.padded {
padding: 10px;
background: red;
}
p {
background: yellow;
}
<div class="padded">
<p>This is some text</p>
</div>
Try adding padding-left: 20px to the <ul> and wrap the text underneath in a <p>
Looking at the link to the page where the issue lies. Just give the .gallerie class padding:0; and a margin-left:15px; (to achieve uniform indentation).
It appears from the page that you may be attempting to wrap the <ul> in a <p>, which is not valid HTML.
I am trying to create a pull quote class that can be applied to any text. Usually this will be a short quote I want to float to the right. I would like the text in the body to come up to the set margin for each line in the floated pull quote.
Goal: http://i.stack.imgur.com/XC5NA.jpg
The problem I am running into is that the div or span is creating a rectangle around the floated text so the shorter lines in the pull quote have a lot of whitespace to the left.
What I'm getting example: i.stack.imgur.com/bvJv2.jpg
I want this text flow effect to work automatically which means I don't want to have to set each line's "width" automatically. I just want to apply a class to a div or span and have it achieve this look. I would also like to keep this HTML/CSS/CSS3. I can't easily apply JS to this since it's a closed CMS I'm dealing with.
Any tricks? Is this even possible?
What you're trying to is not possible, as far as I know, with text wrapping around other text.
It is, however, possible to wrap text around floated shapes. Take a look at the spec for CSS shapes.
Maybe you can do something with a polygon to create the effect you're trying to accomplish; though, I suspect it will be a challenge since it is likely that the content of your quotes are dynamic.
What about doing something like this: https://jsfiddle.net/ToreanJoel/wfoezo0t/1/
Making a h1 tag and put some spans inside them for each word/few words.
<h1>
<span>"This is a</span>
<span class="spacer"></span>
<span>blockquote</span>
<span class="spacer"></span>
<span>to test"</span>
</h1>
Then for the css the following:
h1 {
font-size:44px;
margin: 0;
font-family: sans-serif;
}
h1 span{
float:right;
text-align: right;
clear:both;
margin: 0;
margin-left: 14px;
}
.spacer {
height: 10px;
}
.paragraph {
text-align: justify;
}
Note im making the text around heading (.paragraph class) justified and that will give you something like this: https://jsfiddle.net/ToreanJoel/wfoezo0t/1/
remember its editible for your likeing good luck
I would like to know how to change the size of an image when it is nested in a paragraph tag. The problem is that when nested in a paragraph, it won't take the values I set in the CSS for #3D1. My current HTML:
<p id="work3">
<img id="3D1" src="img/photos/3D1.jpg">
</p>
My current CSS for the image:
#3D1{
width:500px;
}
My current CSS for paragraph "work3":
#work3{
font-size:17px;
font-family: HelveticaNeue-Thin;
line-height:24px;
letter-spacing: 1px;
color:#404040;
text-align:justify;
padding-left:10px;
width:510px;
height:332px;
}
All help greatly appreciated!
EDIT: While fiddling with the code in hopes of fixing it, I managed to find the problem. My problem was that I started the name of my ID with a number. Apparently, HTML and CSS don't sit well with that, and they just didn't "see" the properties of the images. In a way, I managed to fix the problem myself, but the ones who helped me were of great help! Thanks!
#3D1 {
width:500px;
}
#work3 #3D1 {
width: 510px;
}
Since you've defined the width through an id selector, you need to override the rule by a selector with higher specificity (e.g. p img { ... } won't work)
try this
#work3 img{
width:500px;
height:200px;
}
this will make all images warped under the <p> tag with id #work3
Okay I just remember this.
just remove the number on your id/class name. I remember that its better not to start with a number if your naming a id/class. Just change "3D1" to "D1" maybe?
I'm trying to create a breezebrowser template (used for generating image galleries locally, outputs HTML). I've taken the HTML from my wordpress template and managed to generate the following gallery http://uploads.peasyphotos.com/20100607t-candids/gallery/ but each image goes on a new line and i don't know why, i presume it's in the CSS. What should I be looking for in the CSS to try and stop this, or what can I put around my template code to disable the CSS for that part?
Thanks
So i've got a posible answer for you.
First you have to add this css-styles to the a tag of the pictures:
display: inline-block;
height: 150px;
widht: 150px;
text-align: center;
vertical-align: top;
It works with Firefox 3.6. I'm not sure if it will work with oure lovley IE :P
I hope i could help!
In you css files, you have one file called reset.css. At line number 57, you have a one line called display block. comment it out a see. may not be a nice view. but images wont go next line.
For the anchor element having the photos use the float like this. This would take care.
float:left;
your images parent anchor tag do not have correct css. Put a class images over the anchor tags and use following css for them.
a.images {
border-bottom:1px solid #D8048D;
color:#D8048D;
display:block;
float:left;
height:159px;
margin:0 10px;
text-decoration:none;
width:100px;
}
Firstly I would recommend validating your html.
Secondly, I would suggest putting the images in a container element of some sort: possibly an unordered list. There are serious accessibility issues around having a series of links running into each other like this, with no separating non white-space characters.
Thirdly, I would use a css class on the list, and style it like this:
ul.gallery { list-style: none}
ul.gallery li { float: left; clear: none; list-style: none}
I have the following that I would like wrapped as units.
<div class='tag-box'>
<a href=#>Axe Committee</a>
<div class='circle'><a href=#>x</a></div>
</div>
The CSS for these classes are:
.tag-box {
display:inline;
}
.circle {
display:inline;
padding-left:4px;
padding-right:4px;
background:rgb(196,15,24); /*dark red*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.circle a {
font-size:10px;
text-decoration:none;
color:#fff;
position:relative; top:-2px;
}
I can have upwards of 20 or 30 of these tag-boxes displayed inline. The problem is that the wrapping will break the words from each other or even break the red circle from the link. This makes it hard to differentiate which circle belongs to which link. (In the future, each circle corresponds to a different action with respect to the link.) See below.
alt text http://www.freeimagehosting.net/uploads/f0c5a72ac9.png
How do I prevent this kind of wrapping from occurring?
You want each of your .tag-box to be inline (not taking all the width available) but still being considered as a block (its content shouldn't be cut in half). Here enters ... inline-block!
Here is a complete HTML code: http://pastebin.com/24tG7tCz
I used a list of links to better represent the lists of couple of links tag+action (bad news: you've a divitis syndrome ;))
I also added titles: your 'x' links aren't accessible at all and can be confusing for everybody, with or without any handicap, because one is never sure if the x will suppress the tag on the left or on the right: there are dozens of links, each with the text 'x'! A title attribute on the a element tells blind users and everybody else via a tooltip what'll really do that x.
With a span inside a.x, you can change the background-color on hover and focus, it wouldn't be possible with a inside a span or div.
0: Use white-space: nowrap;.
1: You could have the circle as background of your .tag-box (or your .circle a). eg:
.tag-box {
display: inline;
background-image: url('circe.png');
background-position: 100%; /* Display to the right */
background-repeat: no-repeat;
padding-right: 10px /* To leave space for the image */
}
2: You could use fixed-size floating .tag-box-es ( :/ )
3: You could have a (ready made) script put a circle on the right of every ".circle a"
You could try:
.tag-box {
display: inline-block;
}
Although you may experience some issues with firefox 2 and older versions of IE