On the website that I'm building, some pages the text extends all the way to the edges. I've compared the HTML for ages, and don't see what I'm doing wrong. Maybe it's in the CSS? Does anyone see what's going on? I tried refreshing my browser and clearing my cache.
Why does p extend to to the edge on only some of my pages? When the HTML looks the same?
<div id="wrapper3">
<div id="portfolio" class="container">
<div class="title">
<h2></h2>
<span class="byline"><!--Integer sit amet pede vel arcu aliquet pretium--></span>
<br>
<p></p>
<p></p>
</div>
</div>
Since you only have a little text, it would look much better with a narrow paragraph, like this :
p {
line-height: 180%;
margin-left: auto;
margin-right: auto;
text-align: justify;
width: 600px;
}
You will always have the same width, centered, and the text will be displayed "as in a book"
Try adding some left and right padding like this:
What I used is:
padding: 8em 2em;
Which means, 8em top and bottom padding as well as 2em left and right padding
Since you're using center-aligned text, the visual width is going to vary because some lines are a bit longer or shorter than others depending on the words used in them. If you set p { background: red; } you'll see that the paragraphs do extend to the edges, but the text isn't filling all the available space.
A good workaround is to use padding on the <p> to force space on the edges, but even that won't be foolproof. You can force lines to take up all available space by using text-align: justify;, but shorter lines will align left instead of center.
This is just because the text is centered. Some lines of text break in different places than others, and so the length of a line will differ. Apart from this centered text, I don't see any difference.
Try to resize your browser slowly, and you'll see the margin increasing (or decreasing) until one word jumps to the other line, and the margins are gone.
You could try:
text-align: justify;
text-align-last: center;
This will add slightly smaller or large spaces between words to make the text fill the entire line. The last (shorter) line will be centered, (but not on Safari).
There are other questions about this subject. You may have a look for yourself:
How to Center-Justify text in CSS?
Related
I am fairly new to html therefore this may be something very basic for you. This is the css file for my code:
.sidepanel-list{
margin-left: 10px;
background-color:lightgray;
When i run the file, the background color I have mentioned takes up all the space on the lines as I have put in the image. How do I limit it so it only takes some of the space on the lines?
Image will make it way clearer to understand what i am saying: https://i.stack.imgur.com/04dYi.png
In CSS, an element has a certain size (obviously). Inside that element, you can add padding to keep text or whatever away from the edge. Outside it, you can add margin to keep other elements away from that element.
What this hopefully shows is that your code is doing exactly what you asked: making the background color of the element itself gray, and then adding a margin outside that area of 10px. (This is why the gray doesn't extend beyond the text, even though you've specified that 10px of left margin, which is pushing the text out from the edge of the window.)
If you want 10px of space between the text and the edge of the gray area, use padding instead of margin.
If what you want is to make the whole thing narrower, you need to apply a width to the stylesheet (e.g. width: 50% or width: 400px).
To get a feel for this stuff, it can help to use your browser's Inspector tool. Among other things, this will show you the size, padding and margin on each element, so you can see exactly what's happening with your layout.
<!DOCTYPE html>
<html>
<head>
<style>
p.set {
background-color:lightgray;
}
</style>
</head>
<body>
<p class="set"><b>Categories</p></b>
<p class="set">Cable & docks</p>
<p class="set">cases & films</p>
<p class="set">charging devices</p>
<p class="set">connected home</p>
<p class="set">headphones</p>
</body>
</html>
I am trying to make a simple home page and I am getting slightly different line heights between tags. Here is the HTML ` Justin is the lead engineer for
<p>and also this         and Justin also </p>
<img id="brabble" src="img/brabble.png">
<p>to make products work </p>`
and here is a picture
Your image is getting in the way of text formatting because it's not the same size as your text. You have several options, the most effective will be to put the image in its own span, and give that span an explicit height of 1em, with an overflow:visible:
<P>lalalala <span class='imagewrapper'><img ....></span> more text</p>
with style:
.imagewrapper {
display: inline-block;
height: 1em;
overflow: visible;
}
See http://jsfiddle.net/UG5us/
The image causes a line box to become taller than specified by the line height of the surrounding element. To avoid this, scale the image down and/or set its vertical position.
I think I searched thoroughly this site, but could not find answer to my issue; I also think it's pretty simple, but after several hours of puzzling with this, I have given up and decided to look for help...
Here is my issue; I have a DIV, and two DIVs within it; first DIV, "snapshot" contains script that returns website snapshpt, using websnapr.com; snapshot size is 202 x 150, so I defined width of that DIV to 230 px. Second DIV, "description", is supposed to be displayed on the right side of that snapshot, and it contains some text. My issue is that text at the end flows around "snapshot", i.e., beneath it, and I want it to stay in line, always on the right side of DIV "snapshot", not below him.
So, you see lines 1 through 10 are fine; I want lines 11 and 12, and rest of the text, to be aligned below lines 1-10, not below snapshot!
Here is the code:
<div class="entry">
<h2 align="center">Some title here...</h2>
<div id="snapshot"><script type="text/javascript">wsr_snapshot('some link here', 'some pass here', 's');</script></div>
<div id="description"><p>Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7<br>Line 8<br>Line 9<br>Line 10<br>Line 11<br>Line 12<br></p>
<p align="left">Link:<br>
some link here</p></div>
</div>
and here is CSS for these IDs and classes:
.entry {margin:0 0 20px 0; border:2px solid #fff; background:#e6e6e6 url(images/bg.png) repeat-x; color:#333; padding:10px 10px 0 10px; min-height:200px; height:auto !important; height:200px; }
#snapshot {float:left; width:230px;}
#description {display: block; margin-left:240 px;}
I've tried with various properties for these two DIVs - display, clear, overflow, etc., to no avail; hope someone can shed light on what I'm missing here...
Aha: you’ve got an extra space between 240 and px in your margin-left rule for #description.
The following works:
#description {display: block; margin-left:240px;}
I've set float for one of my table's cells. But now I can't change vertical alignment of it's contents. By default, it moves the contents to the top of the div. I tried valign: middle, vertical-align: middle with no success. Here are the results:
With float: left
Without float: left
How can I align vertically cell's contents with float?
And markup looks like that
<td id="top_logo">
<a href="index.php">
<img src="core/design/img/logo.png" style="height:40px; padding:3px;"/>
</a>
</td>
<td id="name" valign="middle"><?php include "core/code/includes/pr.name.php";?></td>
I don't know if this will help (I've left Table based layouts behind now) , but to solve a similar issue using straight divs you can do the same using the line-height rule.
<div id="tableRow">
<div id="leftCell"><img src="mylogo" /></div>
<div id="middleCell"> </div>
<div id="rightCell">User Name Here</div>
</div>
Your CSS would be created to set widths/heights etc, which I guess you won't need for a table, and for your "rightCell", you'd set the line height to be the same as the row height:
#rightCell
{
height: 30px;
line-height: 30px;
}
What then happens is the text is centred vertically in the line space, which because it's the same as the height, gives the impression it's in the centre of the element too.
Now like I say, I've NEVER tried this on a table-cell, however any modern browser should let you change the display property to say block or inline-block using:
display: block;
Changing block for any of the other types where needed. This will set the display type of the cell to be like a div (or a span, or some other element) but I DON'T KNOW what effect it will have on the table.
Note also, that I'm not addressing older browsers Like IE6 here, to make this work across the board you may have to make some hacks for older browsers if support is required.
I am getting unexpected results when using vertical-align on an image with accompanying text. If the text is wider than the container, it wraps UNDER the image like this, instead of simply wrapping to the next line:
alt text http://preview.moveable.com/jm/verticalalign.png
My HTML is simple:
<ul>
<li><img .../> some text </li>
...
</ul>
I have a height and overflow-y:scroll on the UL (likely not relevant)
I have a height set on the LI that is large enough for the placeholder image plus spacing.
I have vertical-align:middle on the image to get the text in the right place, almost
The rest is just margins and borders
Am am NOT using floats
How can I get the text to wrap properly, perferably without more markup?
If the image is static i would use a background image on the li and then simply add left padding to allow for the correct spacing
li {
background: url(/images/foo.jpg) center left no-repeat;
padding-left: barpx;
}
you could also use a margin on the li to allow for spacing to the left of the image inside the ul
if the images are different i would simply apply a class to each li to distinguish the difference
edit for seo friendlyness:
add the images into the markup and then hide them with your stylesheet so the user only sees the image set with background image, Google bots ignore stylesheets so will be served the image in the markup.
li img {
display:none
}
As #graphicdivine pointed out, there are two ways to interpret "properly." If you want things to fill up all the space around the image, I would do what he suggested: use float: left; on the image.
If, instead, you wanted to have a vertical block of text next to the image, you could apply the following:
<li style="display: table-row;">
<img src="..." style="vertical-align: middle; display: table-cell;" />
<span style="display: table-cell;">...</span>
</li>
Same disclaimer as before, though: this is no good in IE. Also, it breaks your "no more markup" rule, though I'm not sure how you wanted to achieve a different result without making changes. Perhaps I didn't understand you correctly.
Seems to me you could float the image left.