CSS - Giving A Width To A Pre Tag
Hi there,
First of all, i posted this in the HTML section as well, but after some consideration i think it is a CSS needy question. However i can not remove my own post from the HTML section? Problem explained: I would like to give a maximum width to a text in a <pre> </pre> tag. Now by giving it a standard width or a width via a cascading style sheet class does not work. I also tried wrapping it in a table and / or a div with the width attribute. Anyone got an idea how to solve this? Regards, Sander Meilink By the way, pre does what it is supposed to do, it remembers the linebreaks a.o. very well. Example of all things tried combined: Code: <table cellspacing="2" cellpadding="2" border="0" width="20"> <tr> <td width="20"><div style="width: 20px;"><pre style="width: 20px;">asd fasod khgfas kjdgfkjasg dfkjhsagd fjgas sadkjfg dsafkjhg sdfkhg jhg jkhgdsfjkhg jkhgsdfa</pre></div></td> </tr> </table> Similar Tutorialsi have a horizontal navigation pane in which i want 5 links to be placed across the top. any ideas? ive tried setting the width a percentage and a fixed width but no luck. width:50px; Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? I need help with my navigation menu... The problem is that I want the div container to be gray, but the white navigation links have gray bleeding below and to the right of each link. It also screws up any border I try to put between the navigation menu and anything else below it. Here is the markup: <div id="container"> <div id="header"> <h2>Test Header</h2> </div> <div id="left_column"> <ul> <li class="main_nav"><a href="#">Link 1</a></li> <li class="main_nav"><a href="#">Link 2</a></li> <li class="submain_nav"><a href="#">Sublink 1</a></li> <li class="submain_nav"><a href="#">Sublink 2</a></li> </ul> <p class="p_left_column">This stuff goes below the main navigation menu.</p> </div> <div id="main_column"> <h2>A test heading.</h2> <p>A test paragraph.</p> </div> <div id="footer"> Test footer </div> </div> And here is the style sheet for div left column: #left_column { float: left; width: 160px; margin: 0; padding: 0; line-height: 130%; } #left_column ul { padding: 0; margin: 0; list-style: none; } li.main_nav, li.submain_nav { text-align: left; width: 100%; display: block; /*border-bottom: 1px solid #aaa;*/ } li.submain_nav { line-height: 110%; } li.main_nav a { padding: 5px 0 5px 8px; display: block; color: #0380B7; font-size: 16px; background: #fff; text-decoration: none; } li.main_nav a:hover, li.submain_nav a:hover, li.main_nav a.active:hover, li.submain_nav a.active:hover { background: url(./images/right_arrow.gif) left no-repeat #eee; color: #00F; } li.submain_nav a { padding: 0 0 1px 20px; display: block; color: #0380B7; font-size: 13px; background: #fff; text-decoration: none; } li.main_nav a.active, li.submain_nav a.active { background: url(./images/right_arrow.gif) left no-repeat #fff; color: #00F; } p.p_left_column { font-size: 13px; line-height: 130%; font-family: arial, helvetica, sans-serif; border-top: 1px solid #aaa; padding: 5px; color: #000; } p.p_left_column a { border-bottom: 1px dashed #99CF16; text-decoration: none; color: #0380B7; } p.p_left_column a:hover { border-bottom: 1px solid #00f; color: #00f; } Any help would be greatly appreciated. Thanks for reading. Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code: /* left bar: */ #navBar{ width: 185px; float: left; } /* right bar: */ #rightModulesContainer { width: 130px; margin: 0; padding: 0px 0px 0px 10px; float: right; } /* center content: */ #content{ padding: 0px 5px 0px 0px; margin-top:0; margin-bottom:0; margin-left:4px; margin-right:0px; float: left; text-align:left; /*display: inline;*/ } /* contained in #container: */ #dataGridContainer{ margin: 0; padding-bottom: 10px; min-width:360px; } .categoryGridStyle { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; color: #000000; width:100%; } and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy I need someone to look at my site and see why it doesnt work right in internet explorer, and looks fine in mozilla and google chrome. I am sure it has something to do with a .css file somewhere. glockpartsrus.com/products.php?cat=46 for an example. please click here to read my message. My code: Code: #whitebox { width:600px; background-color:#fff; padding:10px; margin-left:auto; margin-right:auto; } #salmonbox { width:500px; height:50px; padding:10px; background-color:salmon; margin-left:auto; text-align:left; } Hi I have a master page in my .net project that has a template. In this template it has a line for all links a:link { color......} So all my pages get this style sheet. Now I have a jquery tab plugin that has a theme and it also uses a:link{} but it uses white but the a:link in my master page is overriding this. When I look with firebug at the css the color from the jquery theme is crossed out. How can I stop this from being crossed out? EDIT Never mind, fixed it myself eventually. Hey all.. I'm still new to CSS in general, but know how it works. Anyway, I'm trying to get an element in a DIV to display properly, but for some reason, it isn't Code: .contenthead { background-image: url(player/images/player_03.gif); background-repeat: repeat; height: 50px; color: #000000; font-weight: bold; font-size: 40px; } The result is at http://www.fairfieldmediacoop.com/fpactest/play.php?recordID=hO2GmjtlvSJKBgcqp4LZ The only thing I can think of is that the text I am trying to enlarge, which is the "Chamber Talk" in black above the video (center of the strip under the header) is encased in a Table. Would that cause it not to listen? Hi All, I am trying to make my table do the attached, where it has a border around the entire table but has a 2px space edge... Like the attched image, any ideas? I'm so excited! I recently decided to try again (the third time) to see if I could convert my horrid table layout to divs. I was finally able to make something reletivly good in most browsers, but I am still having alot of browser-related problems! Normally I would have given up by now...but i found that my table layout was at 28 seconds over 56.6 ( :O ) and once i converted it it was only 3 seconds over (double :O ) Anyway, pretty much everything validates (including the css) when I put in the doctype, but when the doctype is in it looks like a mess in all browsers. I've been using transitional xhtml. When I take it out it looks better in all browsers, but is still really bad in all but IE. I have put together on my site two pages with the same code except one has the doctype and the other doesn't. The css for both is: Code: body { background: #EFF7FF url(bg.gif); text-align:center; padding:0; } #outer { border:5px double #234B77; width:650px; padding:0px; margin:0px; } #hdr { width:650px; height:151px; background: #21558C; } #bar { width: 650px; height:90px; background: #ADD7EF url(rainbowsitedesign_2x1.gif); border:solid #000000; border-width:0px; padding-top: 37px; text-align:left; } #bodyblock { position:relative; background: #ADD7EF url(backgroundforsite.gif); width:650px; padding:0; } #l-col { float:left; background: #ffffff url(white.gif); color: #333333; width:140px; border-left: 1px solid #234B77; border-right: 1px solid #234B77; border-top: 1px solid #234B77; border-bottom: 1px solid #234B77; margin-top:10px; margin-bottom:10px; margin-left:5px; margin-right:5px; } #coltop { height: 42px; background: #3971B5 url(tabletop.gif); color: #000; text-align: center; padding:10px; font-size: 105%; font-weight: bold; color:#1A3958; } #cont { width:485px; background: #ffffff url(white.gif); border-left:1px solid #234B77; border-right:1px solid #234B77; border-top:1px solid #234B77; border-bottom:1px solid #234B77; text-align:left; margin-top:10px; margin-bottom:10px; margin-right:5px; font-size: 100%; font-weight: normal; color:#1A3958; } #contentop { width:485px; height:42px; background: #3971B5 url(tabletop.gif); color: #333333; border-left:0px solid #234B77; border-right:0px solid #234B77; border-top:0px solid #234B77; border-bottom:1px solid #234B77; margin:0px; text-align: center; padding:10px; font-size: 105%; font-weight: bold; color:#1A3958; } #ftr { width:650px; height:25px; background:#346EB4; color: #333333; border: 0px solid #000000; margin:0; } #ftr2 { width:650px; height:25px; background:#346EB4; border: 0px solid #000000; margin:0; } #ftr3 { width:650px; height:99px; background: #346EB4 url(websitedesign.gif); border: 0px solid #000000; margin:0; padding-top: 20px; } #home { width:50px; height:10px; border: 1px solid #000000; margin:0; } p:first-letter { font-size: 120%; font-weight: bold; } a.red:link { text-decoration: none; color: #234B77; } a.red:visited { text-decoration: none; color:#ff0000; } a.red:hover { text-decoration: underline; color:#ff0000; } a.orange:link { text-decoration: none; color: #234B77; } a.orange:visited { text-decoration: none; color: #ff6600; } a.orange:hover { text-decoration: underline; color:#ff6600; } a.yellow:link { text-decoration: none; color: #234B77; } a.yellow:visited { text-decoration: none; color: #ffff00; } a.yellow:hover { text-decoration: underline; color:#ffff00; } a.green:link { text-decoration: none; color: #234B77; } a.green:visited { text-decoration: none; color: #009900; } a.green:hover { text-decoration: underline; color:#009900; } a.blue:link { text-decoration: none; color: #234B77; } a.blue:visited { text-decoration: none; color: #0000ff; } a.blue:hover { text-decoration: underline; color:#0000ff; } a.violet:link { text-decoration: none; color: #234B77; } a.violet:visited { text-decoration: none; color: #660066; } a.violet:hover { text-decoration: underline; color:#660066; } #ftr2 a:link { text-decoration: underline; color: #152F4D; } #ftr2 a:visited { text-decoration: line-through; color: #ccc; } #ftr2 a:hover { text-decoration: none; color: #88B2DC; } Here are the two pages: With doctype: http://rainbowsitedesign.com/withdoctype.html Without it: http://rainbowsitedesign.com/nodoctype.html How can I fix both my browser problems and my doctype problems? Any help is app! Hi all, I noticed that when I give the text-align style as "justify", the words are unevenly spaced to justify the alignment. But it looks really weird if there are only two long words in a sentence and many small letter words in the next line. Can any1 suggest a way to align the text inside a <p> to be evenly spaced as well as justified. How to make the text to hyphenate (i.e split words with a '-' and display it in the next line). Is there a CSS property to accomplish this. I wud be grateful to recieve comments. Thanks in Advance. - John I have a page with an ASP.NET Gridview on it...this Gridview is located in a child DIV inside a parent DIV. That Gridview can often go wider than the parent DIV width set. In IE6 the MAINDIV (Parent DIV) would expand to fit the expanded Gridview contained within the child DIV. In IE7 the DIV will not expand so it overlaps the DIV and looks bad. I want that MainDiv to dynamically grow with the child DIV width, like it did in IE6. Please see my code below. I want the MainDiv to remain ~800px unless it is pushed out further. Thanks for any ideas on a fix for this. Whenever I try min-width it just blows the parent DIV out to 100% screen size. Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> </head> <body style="width:100%;text-align:center;background-color:#68838B" onload="loadpage();"> <form id="frmMain" runat="server"> <div id="mainDiv" style="position:relative;top:10px;width:800px;height:auto; background-color:white;border:solid 1px #666666"> <div id="contentDiv" style="text-align:left;width:797px; padding:3px 3px 3px 3px;"> <asp:ContentPlaceHolder ID="contentBody" runat="server"></asp:ContentPlaceHolder> </div> </div> </form> </body> </html> I have a header div with a background image - it's basically a pair of hands holding a banner - the arms extending to the sides of the window. I'm trying to work it so that, no matter how wide or thin the window, the arms will always extend to the sides. So when you make it smaller, the image will disappear beyond the viewing window. This happens automatically on the right-hand side, but the image is stopping it on the left. Is there a way to set a min-width, which is smaller then the image itself, so that when the window is shrunk the image starts to disappear on either side until it reaches the min-width? I'm trying to get it so the arms will disappear and stop at the hands. Or can anyone suggest an alternative solution? I tried to do it with background and header image, with the arms on the background, so when the top image moves it looks like the arms move with it. That worked great until I started using a patterned background. Full width: |---------------------------------------| |AAAAAAAAHHH BBBBBBBBBBBBBB HHHAAAAAAAAA| |---------------------------------------| Shrunk width: ------- |------------------------| -------- AAAAAAA |AHHH BBBBBBBBBBBBBB HHHA| AAAAAAAA ------- |------------------------| -------- Grey bit outside window edge. | Window side A Arms H Hands B Banner I hope that makes sense. I expect there's an easy solution but I've been trying to figure it out for several hours and could do with someone else's perspective. Thanks. I'm writing a modification for a bulletin board. One of the beta testers had a problem with their template... My modification uses a left & right float, with a clearing div at the bottom with a copy right. I know the problem, but my question is, why is it a problem: width="75%" will sometimes, in certain templates, make the right floating table drop down beneath the left floating menu, and it's width is 100%. When I change it to inline styling, style="width: 75%;", it works as it should. I'd really like to know why it's doing this, because I've never ran into this before. Here's a slimmed version of the HTML/CSS: Code: <div id="st0re_wrapper" style="float: left; width: 24%; clear: both;"> <table class="borderwrap iptable" cellpadding="3" cellspacing="2" width="100%"> <tr> <td colspan="" class="maintitle"><p>Your Menu</p></td> </tr> <tr> <td style="padding-left: 5px;" valign="middle"> <div style="margin-left: 5px;"> Sample menu item. </div> </td> </tr> </table> </div> <table class="borderwrap iptable" style="float: right;" cellpadding="3" cellspacing="2" width="75%"> <tr> <td colspan="" class="maintitle"><p>Sample</p></td> </tr> <tr class="row2"> <td valign="top" width="100%"> Sample content. </td> </tr> </table> The used CSS classes a Code: .ipbtable { width: 100%; } table.ipbtable, tr.ipbtable, td.ipbtable { background: transparent; color: #222; font-size: 10px; line-height: 135%; } .ipbtable td, .divpad { padding: 5px; } .borderwrap, .borderwrapm { background: #edede7; border: 1px solid #91908B; color: #55554F; padding: 0px; margin: 0px; } .borderwrapm { margin: 5px; } .borderwrap h3, .maintitle, .maintitlecollapse { background: url(style_images/convention/maintitle.gif); color: #f6f4ef; font-size: 12px; font-weight: bold; margin: -1px; padding: 7px 7px 7px 12px; } .maintitle td { color: #EEEDE8; font-size: 11px; font-weight: bold; vertical-align: bottom; } .maintitlecollapse { border: 1px solid #FFF; } .maintitle p, .maintitlecollapse p, .formsubtitle p { background: transparent !important; border: 0 !important; margin: 0 !important; padding: 0 !important; } st0re_wrapper is just an unused id, besides the inline styling. |