|
CSS - Last Line Of Block Extends To Right Margin
Working on a project that has listing of physical features of frogs. In one listing, the text in the descriptions are in a block for which the last line extends to the right margin. Here is a sample of what the text looks like:
Code: 1. A weak tarsal fold; outer fingers one-third webbed; males having spiny nuptial tuberosities; color in life tan or brown with blotches or reticulations, never green; iris bronze color . . . P. euthysanota group--2 No tarsal fold; outer fingers having only vestige of web; males lacking nuptial tuberosities; color in life green or brown; iris red or golden color . . . . . . . . . . . . . . . . . . . . . . P. schmidtorum group--5 My question is how to write the CSS to get only the LAST line of a block of 'justified' text to extend to the right edge. Also, if the user resizes the page, I don't want the right-aligned text to write on top of the left-aligned text. One of the biggest constraints is that it HAS to be done with CSS and not through javascript. Thanks. Similar TutorialsFor the first time, rather than coding my own layout CSS, I'm adapting a layout and CSS created by someone else... and I've run into some problems figuring out a couple of things. The layout in question is one written for Movable Type, and is freely able to be edited and changed. I'm working with the layout in a test setting now, before moving it to its permanent home. You can see it in action at: Code: http://www.outincenterfield.com/mt/ Two things I need to figure out: 1. How to align the whole layout in the center of the page. (the header image, the 3-columns, and the footer) 2. How to increase space(margin) between the boxes in the sidebars, so that the underlying white background color shows through. Any help would be GREATLY appreciated - as the way this layout is coded has got me turned all around. I've tried everything I could think of, and can't sort out how to do these two things. Here's the main CSS: Code: /*
THEME NAME: Diurnal
THEME URI: http://ntuat.wordpress.com/
DESCRIPTION: This flexible 5-in-1 theme changes according to the time of day
VERSION: 1.0
AUTHOR: Carolyn Smith
AUTHOR URI: http://not-that-ugly.co.uk/
TEMPLATE: sandbox
*/
/* use any structure in /sandbox-layouts; more details in the readme*/
/* included here for Movable Type */
/* links to time-specific stylesheets */
@import url('sunrise/style.css');
@import url('morning/style.css');
@import url('afternoon/style.css');
@import url('sunset/style.css');
@import url('night/style.css');
div#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
div#content {
margin: 0 400px 0 0;
}
div.sidebar {
float: left;
overflow: hidden;
width: 180px;
}
div#primary {
margin: 0 0 0 -400px;
}
div#secondary {
margin: 0 0 0 -200px;
}
div#footer {
clear: left;
width: 1000px
}
body {font: 0.75em arial, helvetica, verdana, sans-serif;
margin:0;
padding:0;
color:#444}
#container {background:#fff;}
#content {
padding:0 10px 0 10px}
/* header */
#header {height:200px;}
#header h1 {font:3em 'century gothic', futura, serif;
margin:0;
padding: 0 10px 0 10px;}
#blog-description {padding:7px 10px 0px 10px;
color:#fff}
.skip-link {display:none}
/* prev/next links */
.navigation {margin:1em;
text-align:center;
width:95%;
height:1em}
.nav-previous {float:left;
text-align:left;
width:45%}
.nav-next {float:right;
text-align:right;
width:45%}
.nav-previous a {padding-left:20px;
background:url(leftarrow.gif) center left no-repeat;}
.nav-next a {padding-right:20px;
background:url(rightarrow.gif) center right no-repeat;}
span.meta-nav {display:none}
/* page navigation */
#menu ul li {
margin:0;
padding:0;
display:inline;
font:1.2em 'century gothic', futura, sans-serif;
}
#menu ul li ul {margin:0;
display:inline;
font-size:0.8em;
}
#menu ul li a {
padding: 3px 20px 3px 10px;
letter-spacing:0.05em;
}
/* sidebar stuff */
.sidebar {margin:0;
padding: 10px;
background:#fff}
.sidebar h3, .comments h3, #respond h3 {letter-spacing:0.05em;
margin:0;
padding:7px 10px 3px 20px;
font: 1.4em 'century gothic', futura, sans-serif}
#menu ul, .sidebar ul {list-style:none;
margin:0;
padding:0;}
.widget, .sidebar li.linkcat {border:1px #ccc solid;
margin-bottom:2em;}
.sidebar ul li, #wp-calendar caption {background:#f0f0f0 url(greybk.png) top left repeat-x;
border:1px #ccc solid;}
.sidebar h3 {border:1px #ccc solid;}
.sidebar ul li ul li, .sidebar ul li div {background:#fbfbfb;
border:0;
padding:3px 10px 3px 10px;}
.sidebar ul li ul li ul li {
padding-left:20px;
background:url(rightarrow.gif) center left no-repeat;}
/* posts & comments */
.post, body.page div.hentry, .comment, .trackback, .pingback {border:1px #ccc solid;
margin:10px 0 10px 0}
.entry-title, .comment-author {letter-spacing:0.05em;
margin: 0;
background:#f0f0f0 url(greybk.png) top left repeat-x;
padding:5px 10px 0px 10px;
font: 2em 'century gothic', futura, sans-serif}
abbr.published {border:0;}
.entry-date, .comment-meta, #trackbacks-list div.comment-author {
text-transform:uppercase;
font-size:0.9em;
margin:0;
background:#f0f0f0;
padding:0px 10px 5px 10px;}
.entry-date {background:#f0f0f0 url(clock.gif) top left no-repeat;
padding-left:20px}
#trackbacks-list div.comment-author {font-family: arial, helvetica, verdana, sans-serif;
border-bottom:1px #ccc solid;
letter-spacing:0em;
padding-top:5px}
.comment-meta {border-bottom:1px #ccc solid;}
.comment p, #trackbacks-list p {padding:0px 10px 0px 10px;
background:#fbfbfb;}
.entry-content {line-height:1.4em;
padding:10px;
background:#fbfbfb;
border-top:1px #ccc solid;
}
.entry-meta{
clear:both;
background:#f0f0f0;
border-top:1px #ccc solid;
padding:5px 10px 5px 10px}
.meta-sep {padding-left:18px;
color:#f0f0f0;}
li.bypostauthor div.comment-author {background:#f0f0f0 url(starbk.png) top left repeat-x}
/* forms */
input, textarea {background:#f0f0f0 url(greybk.png) top left repeat-x;
border:1px #ccc solid;
color:#444;
font:1em arial, helvetica, verdana, sans-serif;
overflow:auto}
#commentform #submit {margin:10px 0 10px 0;
color:#333}
#searchform div{background:#f0f0f0;
margin:10px}
#searchform submit {color:#333}
/* calendar */
#calendar h3 {display:none}
div#calendar_wrap {padding:0;
background:#f0f0f0 url(greybk.png) top left repeat-x;}
#wp-calendar {width:100%;
background:#fbfbfb;}
#wp-calendar caption {font:1.4em 'century gothic', futura, sans-serif;
margin:0;
padding: 5px 0px 5px 20px;
text-align:left
}
#wp-calendar td {text-align:center;
border:#ccc 1px solid;
background:#f0f0f0 url(greybk.png) repeat-x;}
#wp-calendar tfoot td {
background:#fbfbfb;
border:0;
}
#wp-calendar td.pad {border:0;
background:#fbfbfb}
td#today {
background:#ccc;
border:#999 1px solid}
/* image handling */
#content img {max-width:98%;}
#content, .sidebar {overflow:hidden}
a img {border:0}
.alignright {
float:right;
margin:5px}
.alignleft {
float:left;
margin:5px}
.center {
margin:auto;
display:block;
}
/* getting asides to LOOK like asides */
body.home div.category-asides {
margin:20px 0px 20px 0px;
padding:5px 10px 5px 10px}
body.home div.category-asides *{
display:inline;
}
body.home div.category-asides .entry-content {border:0;
font-size:1em;
line-height:1.5em;
padding:0}
body.home div.category-asides div.entry-meta {background:#fbfbfb;
margin:0;
border:0
}
body.home div.category-asides .entry-title,
body.home div.category-asides .entry-date,
body.home div.category-asides .author,
body.home div.category-asides .meta-sep,
body.home div.category-asides .cat-links
{display:none}
/* html elements */
a {text-decoration:none}
blockquote {border:1px #ccc solid;
padding:5px}
h2 {font: 2em 'century gothic', futura, sans-serif;
margin:10px 0 -10px 0;
}
.hentry ul {list-style-image:url(rightarrow.gif)}
#footer {
background:#f0f0f0 url(greybk.png) repeat-x;
text-align:center;
border-top:#ccc 1px solid;
padding:10px 0 10px 0;
}
Hi, Hope someone here can help me, having trouble with IE - there's a surprise! - and block elements, more specifically <p> and <ul>. As you can see from he http://dvxl.servehttp.com/Sites/Development/InfoCAP/Sites/dynamic/ .. the first line of the top paragraph has a larger line height than the rest, same with the top <li> of the <ul>. The xhtml is empty of styles, and the only styles applied to these elements a Code:
#main_content p {
margin-top: 0px;
margin-bottom: 15px;
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
text-align: justify;
text-justify: newspaper;
}
#main_content ul li {
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
list-style-type: square;
}
#main_content li {
line-height: 15px;
}
In Firefox the line heights are consistant, am I missing something? Thanks source: bluewebpages.com/photography/album3/1 i need help setting the thumbnails which have a block display to line up on the same line. i'm using a program called photostack, which is a light-weight photoblog system. when it spits out the code, how would i center the main div containg all thumbnails? i've tried text-align, negative margins(which worked except that the main photo would display ontop of them because the negative margins involved abs positioning) mainly if someone could point me in the right direction on getting block elements on the same line then i'd be set. i can resolve the later issue. thanks, amory EDIT FIXED - need a float: left; try to make a UL into a horizontal nav. i want the a's inside the li's to be display:block, so i need a block element around the outside, but that means they wrap to new lines. What is block without new lines? thanks. Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks <html> Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>All Fore U Golf Clinic</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "nav.css";
</style>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div id="header">header thing</div>
<div id="wrapper">
<div id="container">
<div id="content">
<h1>content</h1>
<p>Sum Stuff goes here...</p>
<p class="last">...and here</p>
</div>
</div>
<div id="sidebar">
<h1>navigation</h1>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Golf Stuff</a>
<ul>
<li><a href="#">Clubs stuff</a></li>
<li><a href="http://www.google.com">accessories stufff</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
<br>
</div>
<div class="clearing"> </div>
</div>
<div id="footer">footer thing</div>
</body>
</html>
CSS: Code:
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
/*<![CDATA[*/
#wrapper {
background: #f1f2ea;
}
#header {
background: #d7dabd;
}
#container {
width: 100%;
background: #f1f2ea;
float: right;
margin-right: -200px;
}
#content {
background: #f1f2ea;
margin-right: 200px;
}
#sidebar {
width: 200px;
float: left;
}
#footer {
background: #d7dabd;
}
h1 {
margin-top: 0;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
/*]]>*/
Works fine in IE, but when displayed in firefox the id=content extends off the screen. The right end of the DIV extends out of the viewable area. Why? Code:
<html>
<head>
<title>Untitled</title>
<style>
.book_box {
width: 100%;
padding: 5px 5px 5px 5px;
margin-top: 10px;
margin-bottom: 10px;
border: 2px solid #003366;
background-color: #eef7ff;
text-align : center;
}
body {
margin: 10px;
}
</style>
</head>
<body>
<div class="book_box">
This is a test.
</div>
</body>
</html>
I can't figure out what's going on here. View this page in Firefox and the problem is obvious: http://www.westportsquares.com/page...e-internet5.php The background on the word Comments which is between H2 tags extends upward. Here is my code for h2 and the parent element: Code:
div.comment {
padding: 4px;
text-align: left;
}
div.comment h2 {text-align: center;
background: #484452;
color: #A098B3; }
Hopefully I'm just missing something simple here. Any suggestions? I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Background info: - I have validated the page and CSS, no problems there - Site is working properly in Firefox and IE, seems to be a margin issue in Safari -This margin issue is not the common Safari bug with a negative margin being applied to a floated element -I am using Safari in a windows environment, I do not have a Mac The problem: -in Safari the top margin on the content either is either not being applied at all or is being interpreted differently -it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari? The website: http://www.lisa-noble.com/test/redo.html The HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Site Test</title>
<link rel="stylesheet" type="text/css" href="redo.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>
<body>
<div id="top_filler">
</div>
<div id="left_filler">
</div>
<div id="right_filler">
</div>
<div id="top_left">
</div>
<div id="header">
</div>
<div id="top_right">
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Etc, etc, etc....</p>
</div>
<div id="bottom_filler">
</div>
<div id="bottom_left">
</div>
<div id="bottom_right">
</div>
</body>
</html>
The CSS Code: * {
margin: 0;
padding: 0;
}
body {
background: #fdd9e9;
}
div#top_filler {
background: url(images/bg_slice_sm.png) repeat-x;
width: 100%;
height: 164px;
position: fixed;
top: 0px;
z-index: 5;
}
div#left_filler {
background: url(images/left_slice_sm.png) repeat-y;
width: 174px;
height: 100%;
position:fixed;
left:0px;
z-index: 5;
}
div#right_filler {
background: url(images/right_slice_sm.png) repeat-y;
width: 161px;
height: 100%;
position:fixed;
right: 0px;
z-index:5;
}
div#bottom_filler {
background: url(images/bottom_slice_sm.png) repeat-x;
width: 100%;
height: 76px;
position: fixed;
bottom: 0px;
z-index: 5;
}
div#header {
position: fixed;
top: 0px;
left: 37%;
height: 125px;
width: 316px;
margin: 0 auto;
background: url(pink_logo2.png) no-repeat;
z-index: 25;
}
ul.NoBulletNoIndent {
list-style-type: none;
margin-left: 0px;
padding-left: 0px
}
div#top_left {
height: 314px;
width: 221px;
background: url(images/left_top_corner_sm.png) no-repeat;
position: fixed;
top: 0px;
left: 0px;
z-index: 5;
}
div#bottom_left {
height: 175px;
width: 176px;
background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 5;
}
div#top_right{
height:174px;
width:174px;
background: url(images/right_top_corner_sm.png) top no-repeat;
position: fixed;
top:0px;
right: 0px;
z-index:5
}
div#bottom_right{
height: 602px;
width:198px;
background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
position: fixed;
bottom: 0px;
right: 0px;
z-index: 5
}
div#content {
margin: 40px 164px 0px 180px;
position: relative;
z-index: 1;
}
Hi! Should I do this? p { margin-top: 2em; margin-bottom: 2em; } or this: p { margin-bottom: 2em; } Same question for headers (h1, h2, etc) Thanks! Heya guys, Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done. I've got this in style.css file: Code: /* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}
.topform {
position: absolute;
right: 5px;
top: 65px;
width: 300px;
font-size: 10px;
font-family: myriad, verdana, sans-serif;
text-align: right; }
input, form {
font-size: 11px;
font-family: myriad, verdana, sans-serif;
margin-bottom: 0px;
margin: 0px; }
/* End of SEARCH Bar */
Which refers to this part of my index.php page: Code: <!-- Top right SEARCH -->
<div class="topform">
<div class="lb_bl">
<div class="lb_br">
<div class="lb_tl">
<div class="lb_tr">
<form name="form" id="form" method="post" action=""><input name="search" type="text" />
<input name="search" type="button" value="SEARCH" /></form>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- End of top right SEARCH -->
But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com Thanks in advance to anyone who can help - Gaz Hi all Take a look at this in Firefox and then in IE7: http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't. Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem. I did a search and found this link: http://www.positioniseverything.net/explorer/floatIndent.html Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way? Thanks a lot for help :-) Josh Hi there, I have recently stumbled about a problem I had with another website I made as well, but since it was at the very bottom back then I kinda ignored it. My new website has this right in the header though, and so I decided to ask for help. Works perfectly in Gecko based browsers, though. I have the problem that I have to Div's right after each other which both have a top and bottom margin of zero, but there is a visible gap between them, only in IE though (header and content as well as content and footer) and in Opera 7.54 at the very bottom. The colors of the background PNG are also broken in IE, never mind that, will exchange that with a JPG. Website in question is http://cyxxon.com, WordPress with my own template. Had the same problem with a website completely handcoded by me. Any ideas? Thomas I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! http://warcraftpress.com/theme/theme.html I'm trying to have #footer be pushed down instead of the menu lapping over it. Basically, I want the menu to push it down, but it just overlays it. Thanks Hi guys, can you give me some tips to centering a block (<div>) of code? I would like it centered vertically and horizontally and I would also like the background of the element centered (so the whole thing). text-align doesn't work, it only centers the text, not the element. Thanks, Josh Hi, im trying to create a block of colour of various width. Im trying to do it with <span> like so <span style="background-color:#336699; width:100px"></span> Now why wouldnt that work and is there a better way to do what im trying to achieve? |
|||||||