|
CSS - How Can I Make A Diffrent Text In Css Popup Windows
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>
Similar TutorialsHi, I'm still relatively new to CSS and liquid layouts, so please bear with me. I've made a new layout using only CSS over he http://www.abhiram.astahost.com/trialcss/index.html and the CSS file is: http://www.abhiram.astahost.com/trialcss/mystyle.css Now, when I move the mouse over one of the menu buttons, there should be a popup text that appears below the the button. The problem is, I don't want the button size to increase when you move the mouse over it. This is happening because I've had to use 'position:relative'. Also, I don't want the 'content' and 'rightbar' regions moving down when you mouse over it. I've designed this in 1024x768 res. Any ideas? One way of doing it would be to use absolute positioning, but I want the text to appear below each button. Thanks a lot. 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. I know it's really easy but i forgot how to do it! Please post the code here thanks! 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? 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>
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. 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. 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! 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>
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? 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>
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> 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 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;
}
See here the live version: jsfiddle.net/nrWug i want that the menu in the popup is binded ondrag or onresize to the outer popup. How can i bind these two to make the dialog draggable and resizable? thanks for your time. In CSS is there a way of changing the colours of a window, such as the title bar or something. Also I've seen the scrollbars with different colours. I was wondering how you do that? I think it's CSS but if I'm wrong can someone tell me. Thanks Sephers Hey guys, sorry if I'm asking something that's been addressed before, but just couldn't find an answer anywhere, and thought one of you genii might be able to help.... Anyway, I'm tackling my first CSS layout, and it's going pretty well so far. Cross-browser testing hasn't gone nearly as bad as I expected. asiabackpacker.com/ai-resource/ But there's one problem I just can't figure out. Here's a screenshot: asiabackpacker.com/ai-resource/images/14015507.jpg In Internet Explorer 6 on Windows XP, my header Div appears one pixel to the left. It looks fine on IE6 on any other OS, and even in IE 7 on Windows XP, but for some reason the IE6 + Windows XP combo is producing this weird result. Is this a known bug that anyone's aware of, and is there any solution? (btw, the forum rules made me strip the http's out of my urls....sorry bout that) hi, i'm a CSS newbie still sorting out all of the browser issues, hacks, box problems and general confusion (hmmm, and you wonder why i've waited so long to learn CSS?). I don't have IE 5.x to check my first effort with & was hoping someone on this forum could take a quick look & see if it matches the screen shot i've linked to below. btw - does anyone here know if it's possible to have two versions of IE installed on the sample PC? I currently have IE6 installed & couldn't find any useful info on Microsoft's web site (i apologize for the ? but i'm a mac user and delving into windows makes me, well, shudder a bit). Test Page Screen Shot of Correctly Displayed Page my brain on CSS I have created my first css site. I got it to work on the mac and pc, firefox and ie. So, naturally I moved on and created the inside pages to the site. I made the first inside page, and it worked as well....I really only copy and pasted the code I knew worked. I am using dreamweaver, so I set up templates and made the other pages. All I've done is copy and paste. But the inside pages get messed up and not in a consistent way. If I never changed a thing to the code, why is this happeneing? Is there any known bug/fix to this? Thanks www.rookscommunications.com/inrs/ |
|||||||