|
CSS - Multiple Div On Same Line
Hi, i need to delvelop something like "SomeName X". Currently i am doing with DIV(1 DIV for 'SomeName' and 1 DIV for 'X' and finally float-left to another DIV). Since these names(like "Somename1 X",'Somename2 X"...) are populated in the div container, when it reaches the right end of the container, "X" alone getting wrapped to the next line. But it has to be along with 'SomeName' always. As other forums says, I tried with table but it didn't work since the final div container is fixed and i get multiple names with variant length. I tried clear:both, float left - it too didn't work. I have seen like the one in facebook - compose page. I would like to know how to implement this. Any help appreciated. Thanks in advance.
Similar Tutorialshey guys i have cell in a table with an image and some text, i want to keep some space between the image and the text. but when i use padding-left: 10px. only the first line gets offsetted by 10px i want all the lines to do so. can you help? my current code is something like this. i have a left-padding:10px in product_display class in a CSS sheet. Code: <td width="274" height="108" valign="top" bgcolor="#F2EDD7"> <img src="prodimages/CS 016.JPG" width="102" height="102" align="left"> <br> <strong><a href="getproduct.php?pid=67" class="product_display">Wall Mount Coil Candle Holder</a></strong><br> </td> Hello, I'm looking for some help with this problem and would really appreciate some guidance. I'm teaching myself layout with CSS (just picked up the dummies book, so you can guess my current level) but am currently stumped. I'm looking to have a header, with a central image and two link images positioned either side. The central image would be exactly centred, with the link images aligning to the sides of the central image: [PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]. As the link images are different widths, I'm unable to simply centre everything in one go, as then the central image is not viewed as exact centre. I need a way to centre the image and then float the link images to the relevant sides but have it so they align either left or right against the centred image. Also, the centre image height is greater than the link images, so as well as aligning either left or right I'm trying to get them to align to the middle, like this: Code: [ ]
----------------[PORTFOLIO] [ABOUT] [CENTRED IMAGE] [BLOG] [CONTACT]-----------------
[ ]
---- variable empty space depending on browser width
I currently have a div to centre using left-margin: auto; right-margin: auto; text-align: center; and have another div inside this with the centred image. I've also created a left div and right div to contain the link images on either side using the float tag: left/right and aligned left or right, but I don't know where to go from there. I know it's probably simple but I can't seem to find the answer. Any help would be great. Code: #header {
margin-left: auto;
margin-right: auto;
text-align: center;
}
#title {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 400px;
}
#imgleft {
float: left;
text-align: right;
width: 30%
}
#imgright {
float:right;
text-align: left;
width: 30%
}
<div id="header">
<div id="imgleft">
<a href="portfolio.html"><img src="l_portfolio.gif" alt="Portfolio"></a>
<img src="l_about.gif" alt="About">
</div>
<div id="imgright">
<img src="l_blog.gif" alt="Blog">
<img src="l_contact.gif" alt="Contact">
</div>
<div id="title">
<img src="title.gif" height="84" width="400" alt="Title">
</div>
</div>
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; } 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 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! 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 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... Hi all, How to go to next line if the width of the content is more than specified width? Thanx/Chandar 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? 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! 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 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! 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 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! 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. Hi, I have this simple sample: <div style="width: 50px; height: 100px; text-align: center; background-color: teal; line-height: .7em"> <span style="padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 10px; ">Here are some words that should wrap</span> </div> You can see in IE that the space between "should" and "wrap" is greater than the space between the other lines. Why is that? Also, the line height in this sample in IE and FF are different, FF has a bit more space than IE. I cannot measure em, so I don't know which is right. Is there any documentation on this difference? Thanks in advance, CJB 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>
Hi, I have started to get to grips with CSS but I am currently just playing - I have not designed any serious pages but am about to. I wondered if it is possible (I am sure it is but I cannot work out how) to use a h1 tag in the middle of a paragraph <p> without making it start a new line. Does anyone know of a method to force the text within the h1 tag to just flow within the sentance? For example if the above block was a paragraph the word CSS on the first line could be included within a h1 tag but it would remain on the line as it currently is (however in this case it would be forced to appear as capital letters, but I can take care of that part myself). Thanks for your time |
|||||||