|
CSS - Linebreak - I Want These To Sit On One Line
Hi.
Here is my code: Code: <?php echo $this->getPriceHtml($_product, true) ?>
<?php if($_product->isSaleable()): ?>
<button class="form-button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('Add to Cart') ?></span></button>
<a href="#" class="buttony"><span class="stock">In stock</span></a>
<?php else: ?>
<a href="#" class="buttony"><span class="nostock">Out of stock</span></a>
<?php endif; ?>
<a href="#" class="buttonx"><span class="<?php echo $_product->gettesting() ?>">This item is Brand <?php echo $_product->gettesting() ?></span></a>
This works perfectly, however, even though there is room for both the In Stock / Out of Stock button and the Mandatory / Optional Button, they sit one under the other, even though there is no <br />. I want them to sit on the same line. How can this be achieved? Similar TutorialsI'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! Thanks for taking the time to read my question I have a row of pictures as nav links, and under them I want to put a row of text stating what each link is Picture Picture Picture Picture Text Text Text Text Each pic is 52px wide, so I made the containers for the text 52px wide. both have left and right margins of 10px (I made the .NavText margin 11 to compensate for the 1px border) yet they don't line up!! What am I missing? Thanks, Brad 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"> <head> <meta name="description" content="Canada Carriage - A supplier of great carriages from XXXXXXX." /> <meta name="keywords" content="Horse drawn vehicle, Carriages, Carts, Horse carriages, Horse carts, Coyaltix, Manitoba, Canada, Dealer, Equine, FEI, CDE, Combined Driving Event, Pleasure driving, Competition driving, Custom made, Fine quality, Affordable prices, European manufactured, Drive Canada" /> <meta name="Revisit-After" content="7 Days" /> <meta name="Robots" content="index, follow" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Canada Carriage</title> <link rel="stylesheet" type="text/css" href="LC.css" media="screen" /> </head> <body> <div class="MainCont"> <img class="HomeLogo" src="images/logo.jpg" /> <div class="NavHolder"> <a href="LisaClarkDesigns_About.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the About Lisa Clark Designs page." /></a> <a href="LisaClarkDesigns_Portfolio.htm"><img class="ImgNav" src="images/PortfolioNav.gif" alt="Click here to navigate to the Lisa Clark Designs Portfolio page." /></a> <a href="LisaClarkDesigns_Fees.htm"><img class="ImgNav" src="images/FeesNav.gif" alt="Click here to navigate to the Lisa Clark Designs Fees page." /></a> <a href="LisaClarkDesigns_Contact.htm"><img class="ImgNav" src="images/AboutNav.gif" alt="Click here to navigate to the Lisa Clark Designs Contact page." /></a> <div class="NavText">About</div> <div class="NavText">Portfolio</div> <div class="NavText">Fees</div> <div class="NavText">Contact</div> </div> </div> </body> </html> css Code: body {
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
.MainCont {
width: 800px;
margin: 0px auto;
padding: 0px;
}
img.HomeLogo {
margin-left: auto;
margin-right: auto;
margin-top: 200px;
margin-bottom: 0px;
display: block;
}
img.ImgNav {
border: 1px solid #999999;
padding: 0px;
margin: 0px 10px 0px 10px;
width: 52px;
}
.NavHolder {
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: 0px;
padding: 0px;
display: block;
width: 314px;
background-color: orange;
}
.NavText {
padding: 0px;
margin: 0px 11px 0px 11px;
width: 52px;
color: #ffffff;
font-size: 12px;
float: left;
display: inline;
background-color: red;
}
Hello, I use always use the <br /> tag and I just found out in using the clearing of divs like; Code: <div style="clear:both; margin-top:5px"></div> for next line or breaking of line. Is this a good thing to use? i have a series of divs that look like this Code: <div> <div></div> <div></div> </div> <div> <div></div> <div></div> </div> Each of the inner divs use the float attribute but when it comes to the second outer div it doesnt automatically go onto the next line it sort of continues from where the last div left off. Why is this... Hello, At my blog test site You'll notice the Quote: << Hello World! | Gettin' Closer >> text in the middle. Just as you see it above, I'd like that all on one line, but can't seem to figure out how to do it. Driving me nuts. Anyone? The CSS code controlling that is Code:
.alignright {
text-align: center;
display: inline;
}
.alignleft {
text-align: center;
display: inline;
}
Thanks! Chris Hi all, How to go to next line if the width of the content is more than specified width? Thanx/Chandar I need to make a line diagram like my attached image. Anybody got tips on how to do this in CSS? image host i need to justify a single line of text. As there is text-align-last in IE it works perfectly.. but i need it to be cross browser - ie. FF and Safari.. so this is not the sollution.. as i got just a certain number of links i've tried this way: Code: <div class="table"> <div class="tr"> <div class="firsttd"><a href="">link</a></div> <div class="td"><a href="">link</a></div> <div class="td"><a href="">veri long text</a></div> <div class="td"><a href="">link</a></div> <div class="td"><a href="">link</a></div> <div class="td"><a href="">long text</a></div> <div class="td"><a href="">link</a></div> <div class="td"><a href="">link</a></div> <div class="lasttd"><a href="">link</a></div> </div> </div> simulation the table through CSS : Code: .table {
display:table;
width: 100%;
}
.tr {
display:table-row;
}
.td {
display:table-cell;
text-align: center;
background-image: url(images/redbg.gif);
background-position: right;
background-repeat: no-repeat;
}
.firsttd {
display:table-cell;
text-align: left;
background-image: url(images/redbg.gif);
background-position: right;
background-repeat: no-repeat;
}
.lasttd {
display:table-cell;
text-align: right;
}
but another problem shows up.. when the link text is long.. the cell width is not set equally - i.e. it goes too long and IE6/7 doen't displays it correctly - it goes vertically instead of horizontally.. here a live link: http://89.215.52.231/templates/26/ i'm talking about the black footer navigation.. I need to implement ASP .NET form with few radiobuttons. The RadioButton1.Text is set in .cs file. I would like to configure it so that if text is too long it won't extend to 2 lines, but is clipped and have ellipses. I can't make it work. I read about it should has some nowrap defined and overflow: hidden; text-overflow:ellipsis defined somewhere. The problem is i don't know where! Plz help me! I'm having problems getting my text to show up on the same line. I'm not sure what I'm doing wrong. Here is my code: Code: <div id="subtitle"><b>What Personal Information Is Collected?</b> <div style="font-size:7px"><a href="#whatinfo">SEE MORE DETAILS</a></div></div> The "subtitle" CSS is external: Code:
#subtitle {
font-family:sans-serif, arial, verdana;
font-size:9pt;
background-color:#cccccc;
padding-left:6px;
}
I don't understand why the "SEE MORE DETAILS" link showing up on a second line? I want it at the end of my subtitle. Thanks for your help in advance. There must be a better way to accomplish this... I need a line break between the two headers in the page below. As it stands it works in Firefox and IE with <br> tags but this seems sloppy.....Is this what the clear element is for? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-color:#cccccc;
}
#wrapper {
width: 700px;
height: 565px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
border: 1px solid #808080;
background-color:#ffffff;
}
#sidebar {
width: 123px;
height: 565px;
float: left;
background-image:url(images/sidebar.jpg);
}
#content {
margin-left: 125px;
height: auto;
width:auto;
padding: 30px;
font:Arial, Helvetica, sans-serif;
font-size: 24px;
font-style:oblique;
color: #444444;
}
#01 {
position:relative;
}
#02 {
position:relative;
margin-top:100px;
}
#b1w, #b2w, #b3w {
position:relative;
float:left;
height:35px;
width:35px;
border:1px solid;
border-color: #808080;
margin-top: 5px;
margin-right: 5px;
background-color:#ffffff;
}
</style>
<body>
<div id="wrapper">
<div id="sidebar"></div>
<div id="content">
<div id="01">Header 1</div>
<div id="b1w"></div>
<div id="b2w"></div>
<div id="b3w"></div>
<br><br><br>
<div id="02">Header 2</div>
</div>
</div>
</body>
</html>
I have three rows in my webpage, and the gap between each rows seem too big, is there any ways to make it same height as the td ?thanks. below is my code Code: <head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<table width="100%" align="center">
<tr>
<td>
<table width="80%" align="center">
<tr>
<td width="65%" height="10%" class="borderTable">
menu
</td>
<td width="15%" height="10%" class="borderTable">
search
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="80%" align="center">
<tr>
<td width="65%" height="100" class="borderTable">
menu
</td>
<td width="15%" height="100" class="borderTable">
search
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="80%" align="center">
<tr>
<td width="10%" height="100" class="borderTable">
menu
</td>
<td width="70%" height="100" class="borderTable">
yy
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
My boxes line up horizontally perfectly in Firefox but not in IE7 (not suprisingly). Because of the rules I can't show you the link but the html places two boxes side by side lined up so that they are the same distance from the top. It looks right in Firefox but IE7 drops the right box about 10 pixels or so. My Html is this: <div id="newsboxleft"> <div id="newsboxright"></div></div> My CSS is this: #newsboxleft { margin: 10px auto; position: relative; top: 0px; left: -187px; width: 350px; height: 142px; background: url(../images/newsboxleft.jpg) repeat-x top; border-top: 0px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; padding: 0px; clear: both; } #newsboxright { margin: 10px auto; position: relative; top: 0px; left: 373px; width: 350px; height: 142px; background: url(../images/newsboxright.jpg) repeat-x top; border-top: 0px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; padding: 0px; clear: both; } I hope someone can help. Thanks. my problem could best be summed up by looking at this test html : http://hatchetman82.4000webs.com/test.html it contains 2 DIVs, and in IMG inside every DIV. the image is (probably) allined as text, which means there's a small margin between the DIV content area lower border and the IMG border. this space (colored yellow) does not originale from any padding, spacing or margin attribute (or at least tinkering with those didnt help). setting the line-height on the DIVs to 100% helps a bit (shrinks the gap a little), but causes problems with, for instance, a SPAN inside one of those divs. i've also tried all sorts of values for vertical-align on the DIVs to no avail. any help in eliminating the gap would be greatly appreciated. Hope this is a simple prob for you css gurus. This time I can just direct you to a public site http://tixrus.us Attention to the "On Sale Now" list at the left, I chose a small font to list the dates. I would like that teaser of the next 5 events in chron to be a little more compact. I have tried setting the line-height directly but nothing seems to change. I used style= in the source so it will be easy to find it. How can I make those more compact. Also the client list and the text in the search box. Thanks! Hey, i made a header in with some space to get a navigation line over. So i put it in its place with css but when i zoom in or out it won't stay in the middle like evrything else, i tried evrything, display:block, margin:0px, position:absolute I heve three images - all in their own div - across the page. I want these images centered. I then want text UNDER these images. As you can see in my page, the text is actually starting to the right of my images. Why is this happening? http://69.89.31.86/~gentryfo/ Thanks. i am trying to do something like: <h6>blah</h6><span class="note">*blah</span> but *blah is appearing underneath the h6 which is fair enough but how do i make it appear on the same line? i cant for the life of me think of a css property that lets me do that? |
|||||||