|
CSS - Make Text Bigger Without Cranking The Surrounding Text?
I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced.
any idea ? tutorial? let me know if i need to explain more. Similar TutorialsHi, I'm trying to include some text within a div, but the last line always seems to fall outside the bottom border. An image of what it looks like is attached. Here's the html I'm using: Code:
<div class="tbl-row <?php echo ($intRow % 2 == 0) ? ("tbl-row-odd") : ("tbl-row-even"); ?>">
<div class="title-lbl">Site: </div>
<div class="title-text"><?php echo $aCols["site_name"]; ?></div>
<img src="{ImgSpacer}" alt="" width="1" height="20" /><br />
<div class="contents-text"><?php echo nl2br($aCols["contents"]); ?></div>
<div>
<span class="subon-text"><?php echo $aCols["local_time"]; ?></span>
<span class="subon-lbl"> at: </span>
<span class="subon-text"><?php echo $aCols["local_date"]; ?></span>
<span class="subon-lbl"> on: </span>
<span class="subby-text"><?php echo $aCols["full_name"]; ?></span>
<span class="subby-lbl">Submitted by: </span>
</div>
</div>
and here's the css: Code:
.contents-text {
color : #F98537;
font-size : 15px;
text-align : left;
}
.tbl-row {
border-radius : 15px;
-moz-border-radius : 15px;
-webkit-border-radius : 15px;
margin-left : auto;
margin-right : auto;
padding : 8px;
vertical-align : top;
width : 96%;
}
.tbl-row-even {
background-color : #FFEBCB;
}
.tbl-row-odd {
background-color : transparent;
}
.subby-lbl {
color : #F98537;
display : inline;
float : right;
font-size : 15px;
vertical-align : top;
}
.subby-text {
color : #F0F;
display : inline;
float : right;
font-size : 15px;
vertical-align : top;
}
.subon-lbl {
color : #F98537;
display : inline;
float : right;
font-size : 15px;
vertical-align : top;
}
.subon-text {
color : #F0F;
display : inline;
float : right;
font-size : 14px;
vertical-align : top;
}
After much testing, I've found that it's the floats that seem to be causing the problem. When I take them out, the row is included within the outside div, but when I put them back in, the row falls outside. I need to keep the floats, because I would like to have the "Submitted" row aligned to the right, unless there's another way to achieve the same effect. So, does anyone know how I can have the last row right-aligned and included within the surrounding div? Debbie Hi; Could anyone tell me How to make the words(Australia, lawer, other..and so on) bigger from the select boxs ? Thanks Code: <form name="search_form" id="sf" action="search_p1.php" method="get"> <div> <span class="search_form">Country:</span> <select name="country" id="country" onchange="setStates();"> <option value="Australia">Australia</option> </select> <span class="search_form">state:</span> <select name="province_state_territories" id="state" onchange="setCities();"> <option value="">Please select a area</option> </select> </div> <div> <span class="search_form">city:</span> <select name="city" id="city"> <option value="">please choose a city</option> </select> <span class="search_form">area:</span><input type="text" name="area" size="10"> <span class="search_form">business type:</span> <select name="business_type"> <option value="solicitor">lawer</option> <option value="other">other</option> </select> </div> <div> <input type="submit" id="search_submit" name="search_submit" value="submit"></div> </form> Issue is I've got text that I want in a certain place on the page. I've run into this situation time and time again, thankfully I've always worked out a creative solution, however I've just been avoiding the problem. It's not something I can use center, or bottom or anything like that on. I've got an image that's in sort of an odd position on the page. I want to have a link directly centered under that image but I can't seem to get the text where I want it. Any suggestions? Currently I have this: <div style="padding:5px; overflow:auto; border:1px solid #c0c0c0; font-size:13px; background: #EEE;"> mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd </div> I want to make it so that it will always stay on 1 line, and a horizontal scroll bar will appear if the window gets too narrow. How can I do this? edit: I can't use <pre> tags because the destroy the formatting in a more annoying way. I know it's really easy but i forgot how to do it! Please post the code here thanks! Like when I make a field.. <fieldset> <fieldset> How can I then make something like, when typing in <text> it'll stay in a locked field. And when clicking "Save" it will send the text to my email? Please help. Would be really cool with a code below. In the html below I want to make the text more narrow (to gert the letters cloer to each other). I read about Css-property font-strech but I cannot get it more narrow. Could someone help? Or is there another way to achieve this? This is the HTML: 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">
<style type="text/css"><!--
h1 { color: #D16700; font-weight: 700; font-size: 56px; font face: Arial; text-align: left; text-decoration: none; line-height: 66px;}
h2 { color: #D16700; font-weight: 700; font-size: 56px; font face: Arial-black; text-align: left; text-decoration: none; line-height: 66px; }
h3 { color: #D16700; font-weight: 700; font-size: 56px; font face: Arial-black; text-align: left; font-stretch: ultra-condensed; text-decoration: none; line-height: 66px; }
-->
</style>
</head>
<body>
<H1>Communication Training</H1>
<H2>Communication Training</H2>
<H3>Communication Training</H3>
</body>
</html>
Hey folks, i'm trying to get the effect of the following image: http://www.dgemu.com/Images/first_steps.jpg Basically I got it all set up 'cept for Metroid's image, which is just driving me insane.. I used absolute positioning on the metroid image so I could use relative positioning on that table thingy and use z-index to put it there, but I'm having problems with the text - it goes behind the image ahhhh - what can I do? I was thinking perhaps adding relative positioning for the text too and make it above the image but what I want is to not touch the image - u know like u do float:right on the image - but I can't use float 'cuz then the z-indexing thing messes up.. hmm.. can anyone help me? I am very, very new at web design, and would like to make a colored background behind text, although I am sure that is not the right name for it! For example, in this this website I would like to emulate how to make that curved rectangular background behind the Online Poll, but I have no clue what the name or the source code behind it that makes it so! If anyone could even just give me the proper name for it so I can google it, I would be very thankful! In the HTML below I use divs contentleft, contentcenter and contentright. Because the text under the Header Contentright is so long I would like to make a scrollbar for the text of contentrigth but withoud the Header contentrigth, so that you alwaus see the header when scrolling the text. Is this possible with these content-codes? This is the HTML I have so far: Code: <head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>glish.com : CSS layout techniques : static width and centered</title>
<style type="text/css"><!--
#contentcenter { background-color: #eee; float: left; padding: 0px; width: 300px }
#contentheader { background-color: #fff }
#contentheader h1 { font-size: 14px; margin: 0px; padding: 16px }
#contentleft { background-color: #fff; float: left; padding: 0px; width: 175px }
#contentright { background-color: #fff; float: left; padding: 0px; width: 175px }
#contentright p { font-size: 14px }
#toptext { text-align: left; margin-top: 10px; margin-right: auto; margin-left: auto; padding: 0px; width: 650px }
body { text-align: center }
h1 { font-size: 14px; margin: 0px 10px 10px; padding-top: 10px }
p { margin: 0px 10px 10px }-->
</style>
</head>
<body>
<div id="toptext">
<div id="contentheader">
<h1><a href="home.asp">Top Text</a>, page with three columns: left, centered, right.</h1>
</div>
<div id="contentleft">
<h1>Header Contentleft</h1>
<p class="greek">This is the left column</p>
</div>
<div id="contentcenter">
<h1>Header Contentcenter</h1>
<p>This is the center column</p>
</div>
<div id="contentright">
<h1>Header Contentright</h1>
<p>This is the right column. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla blaBla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla. Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla</p>
</div>
<p><br clear="all">
<!-- without this little <br /> NS6 and IE5PC do not stretch the toptext div down to encopass the content DIVs -->
</div>
</body>
</html>
I'm trying to make a small box that is entirely clickable with text inside that is not underlined. Could someone explain to me why this code does not work, and what I need to do to fix it? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: helvetica;
padding: 30px;
}
.box {
width: 250px;
height: 75px;
padding: 40px 10px 10px 25px;
background: #FFCE4E url('images/gradient_bg.jpg') repeat-x;
border-radius: 5px;
border: 1px solid #E8A935;
}
.box h3 {
font-size: 19px;
color: #333;
padding-bottom: 5px;
}
.box p {
font-size: 14px;
color: #CC0000;
font-style: italic;
}
a .box {
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">
<div class="box">
<h3>Main text goes right here.</h3>
<p>Smaller italicized text goes here.</p>
</div>
</a>
</body>
</html>
I'm currently working on a page that has a 3-column layout. The layout is fine as along as the content of the columns doesn't extend passed its given width. Is there a way to have the text either wrap or extend without extending the div it's in. I have attached a pic of what's happening (this is only when I get errors, the rest of the content doesn't extend the div). Is there a way to hide the text that goes beyond the div width? CSS Code:
/* columns */
#lcol {
float: left;
width: 190px;
vertical-align: top;
}
#mcol {
float: right;
width: 350px;
padding-right: 10px;
vertical-align: top;
}
#rcol {
float: right;
width: 200px;
vertical-align: top;
}
/* gray box */
.gray_box_frame
{
background-color: #fff;
border: solid 1px #404040;
width: 100%;
padding: 0px;
margin: 3px 0px 3px 0px;
}
.gray_box_head
{
height: 18px;
background-color: #404040;
}
.gray_smm,
.green_smm
{
display: inline;
float: right;
height: 18px;
cursor: pointer;
}
.gray_box_content,
.green_box_content
{
margin: 0px;
padding: 5px;
}
ok. Ive been trying to use CSS to style my page instead of tables. but I cant get stuff to line up right. basically I have a div spanning the whole width of a css box. inside that div I have 3 sections, one for left-aligned text, one for center aligned text and one for right aligned text. what I want is to display on the far left a left arrow image (for use as a button) and the word 'Previous'. then in the middle of the div, center aligned, I want to display the words 'select a different draw' and on the right hand side, right aligned I want the word 'Next' followed by my right arrow. EASY PEASY I thought. Well it has taken me an hour to realise that I have to set my parent element to position: relative for the left middle and right elements to use absolute without going to the very top of the page. so at least I now have them along in a line. What I have found is that the the text on the left and right is vertically aligned to the BOTTOM edge of the image and the text in the middle has been vertically aligned to the TOP of the image despite all 4 css classes being defined as vertical-align: middle; please tell me where I am going wrong, I'm loosing my marbles here! --html: Code: <div id="width-100"> <div id="third-left"> <img src="images/arrowleft.png" alt="foo"/> Previous </div> <div id="third-middle"> Select a different draw </div> <div id="third-right"> Next <img src="images/arrowright.png" alt="foo"/> </div> </div> --css: Code:
#third-left {
width: 30%;
text-align: left;
vertical-align: middle;
}
#third-middle {
position: absolute;
top: 0px;
margin: 0 35% 0 35%;
width: 30%;
vertical-align: middle;
text-align: center;
}
#third-right {
position: absolute;
top: 0px;
right: 0px;
width: 30%;
text-align: right;
vertical-align: middle;
}
#width-100 {
width: 100%;
position: relative;
vertical-align: middle;
background: white;
}
any thoughts? Thanks, Ben Never had a reason to use this property...not sure I'm understanding it correctly. My intent was to have the the nav links sit on the baseline of the 50px height container. Any help would be greatly appreciated. Thanks! .css #toplinks { float:left; width:580px; background-color:#fffff; height: 50px; text-align:right; vertical-align:bottom;} html <div id="toplinks"> Home | Preferences | Help | Site Map | Contact Us | Log Out</div> I am using the CSS popup window to check the forms. But I cant find a way on how to make diffrent texts On the CSS Popup Window. I was doing it in the following way: but it was looking kinda dumb to me.. is there a smarter way to do that without needing to write the popupdiv evrytime i got a new text to write? Code: <style type="text/css">
<!--
#blanket {
background-color:#111;
opacity: 0.65;
position:absolute;
z-index: 9001; /*ooveeerrrr nine thoussaaaannnd*/
top:0px;
left:0px;
width:100%;
}
#popUpDivAlert1{
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002; /*ooveeerrrr nine thoussaaaannnd*/
}
#popUpDivAlert2 {
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002; /*ooveeerrrr nine thoussaaaannnd*/
}
-->
</style>
Code: <div id="blanket" style="display:none;"></div>
<div id="popUpDivAlert1" style="display:none;">
Alert 1
<a href="#" onclick="popup('popUpDivAlert1')">Click Me To Close</a>
</div>
<div id="popUpDivAlert2" style="display:none;">
Alert 2
<a href="#" onclick="popup('popUpDivAlert2')">Click Me To Close</a>
</div>
Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. can someone help me with this? here is the page&css I have been working on... the page file the css file I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site? this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!! I'm having problems with a div, a simplified example is at http://alphaworks.co.uk/test/child.htm (code below), basically I want the grey area to completely surround the image and the text. At the moment the grey area (a div) only goes to the bottom of the text and the image sticks out the bottom of it. Can someone explain why this is and what I can do to get it doing what I want it to? Many thanks, Geoff Code: <html>
<head>
<style type="text/css">
.child
{
border : solid thin blue;
background : gray;
}
.child .thumb
{
float : left;
}
.thumb img
{
border : 1px solid black;
}
.child .text
{
margin-left : 220px;
}
.child .name
{
font-weight : bold;
}
.child .description
{
font-style : italic;
}
</style>
</head>
<body>
<div class="child">
<div class="thumb">
<img src="" alt="Image" width="200" height="134" />
</div>
<div class="text">
<span class="name">
Album name
</span>
<br/>
<span class="description">
Album description
</span>
</div>
</div>
</body>
</html>
Hi all I'm building a photo gallery and have a problem. The main images have what looks like a dotted container box surrounding them when you click them. This box has padding either side which I want to either reduce to the size of the image or eliminate all together but don't know how to do this. The link is below. Click a thumbnail then click the larger image to see the dotted line. Thanks for any help. bajor.servers.rbl-mer.misp.co.uk/~sunridge/photob.htm I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) |
|||||||