|
CSS - How To Prevent Div From Becoming Bigger Width-wise When Url Or Long Line Is In
I have a few div on my page and the ones that have long lines or URL's are expanding width-wise.
Code: <div style="width: 300px;">MyVeryLongLineThatCanAndMostLikelyContainsURLs</div> I would like that the div keeps the same width, as the height is not a problem as the div contains other text, causing it to grow downwards anyway, and allow the line to break up with out causing any possible hyperlinks that are in the text to fail if clicked. what happens is that the div grow wider to allow the long line to show inside. Similar TutorialsI've got a side navigation that displays correctly in every browser EXCEPT IE 6. Big shock... I want the navigation DIV to only be as wide as the content inside it. It does this in IE7, FF, Safari, etc. Any help would be greatly appreciated. The CSS: Code: #nav { background-color: #fff; width: 218px; height: 400px; float: left }
#menuContainer { margin-top: 120px; margin-left: 12px; position: fixed }
#menuContainer h3 { font-size: 11px; font-weight: 900; text-transform: uppercase; margin: 0 0 4px }
.menu { list-style: none; margin: 0; padding: 6px 0; border-top: 1px dashed; border-bottom: 1px dashed }
.menu li { font-size: 20px; font-weight: 900; text-align: right; text-transform: uppercase; margin: 3px 0; padding: 0 }
.menu a { color: #000; text-decoration: none }
.menu a:hover {}
.menu ul { list-style: none; margin: 0; padding: 0 }
.menu ul li { font-size: 12px; font-weight: bold; line-height: 14px; text-transform: lowercase; margin: 0; padding: 0 }
.menu ul a { color: #c00 }
.menu ul a:hover { color: #000 }
And the HTML: Code: <div id="nav"> <div id="menuContainer"> <h3>Site Name</h3> <ul class="menu"> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> <li><a href="#">Page</a> <ul> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> </ul> </li> <li><a href="...">Page</a></li> <li><a href="#">Page</a> <ul> <li><a href="...">Page</a></li> <li><a href="...">Page</a></li> </ul> </li> <li><a href="...">Page</a></li> </ul> </div> </div> Hi How can I wrap a long line of text inside a fixed width div? I have this structure setup in XHTML Code:
<div class="contentShellHeader">
Header
</div>
<div class="contentShellContent">
Content
</div>
I'd like to have contentShellHeader's width to only be as wide as the text within it, but have contentShellContent be the width of the parent shell. Any idea how I can do this across all browsers? Hello all, I am dynamicly creating a table with the following structu Code:
<table id="plate_header">
<tr>
<th><a class="header_link" href="link">Header 1<img src="arrow"></a></th>
<th><a class="header_link" href="link">Header 2</a></th>
<th><a class="header_link" href="link">Header 3</a></th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
with the following CSS: Code:
table {
padding: 1em;
border: 1px solid #dddddd;
} /* end table */
.cell { border: 1px solid #dddddd; }
td { padding: 1em; }
th {
background: #206296;
padding: 0 1em;
font-weight: bold;
color: #ffffff;
}
a:link.header_link,
a:hover.header_link,
a:active.header_link,
a:visited.header_link { color: #ffffff; }
#plate_table td { vertical-align: top; }
The problem is in some cases, the <th> is the largest item in that column. So whenever the arrow image appears with it, it will be placed on a new line. How can I force it to be on the same line as the text? Hi. Lets say I've a div with width:300px and then there're some user generated content (Example: aaaaaaaaaa.....) that was so long without any whitespace that exceed the lenght of the div. Right now that word gone pass the right border of my div. Is there a way to style it so the word will not pass the right border and actually moved to the next line? I was thinking about changing the div as display table but maybe I don't want to do that and not sure if that will do it as well. The reason I don't want to use display as table because it's not compatiable to older browser. Is there any way to prevent this type of behaviour? Thanks. Alright guys. I'm working on a horizontally scrolling news ticker type deal. I have two divs on screen, and the rest are off screen using the overflow:hidden on the parent. The divs are set to 466px wide, float:left, and the parent is 932px wide. Since div 3 and up are all 466px, they drop down below the other two. Not a problem, since the overflow is set. However the jquery animation does not reset the reference point when it scrolls, so the divs stay in this arrangement. Is there any way to keep them all lined up next to eachother horizontally? I'm wondering if there is a CSS solution first, before I get creative with the jQuery. I could easily set it for the next two divs to display right, but there is no telling how many divs there will be and it would quickly become a nightmare trying to account for all possibilities. Here is the current CSS I'm using: Code: #test {background-color:#F1F2F2; width:932px; padding:10px; margin-top:20px;overflow:hidden; display:inline-block; height:400px;} #newswrapper {height:100px; position:relative; left:0px;} #newswrapper div {float:left; position:relative; background:#CCC; width:466px; height:400px;}
Okay, so I want to get an image (left) and a div container (right) positioned on the same line. The image is 225x225, and I want 15px of space between the image and div container; the div container should also fill in the rest of the width on that page. HTML = <img id="logo" src="logo.gif" width="225" height="225"><!- insert 15px spacing --><div id="navbox"><!-- 100% width? --></div> and, CSS = ? Thanks! Hi I really need help I've added new template to my site and it's custom template(means it was on my web site provider) BUT logo area is too small And I also can't get rid of the picture that's in header and that came with template The biggest problem is that I can't move logo area UP it's in same line always,it just increases down,when I try to make it bigger I have NO idea about CSS coding so I really don't know how to fix it HELP!!! I have been having a problem with my CSS. I want to make my visited links just a big bigger than my unvisited links so that the users can know where they been Code:
#mainCategories a:link{
font-size:.55em;
}
#mainCategories a:visited{
font-size:.65em;
}
#mainCategories a:hover{
font-size:.65em;
}
#mainCategories a:active{
font-size:.65em;
}
it changes size on a:hover but not on a:visited Hi, Theres something wrong with the #sidenotes bar, as you can see, it sticks out to the far end of the browser on bigger resolutions, how do I fix that? [IMG]img.photobucket.com/albums/v336/Toniee/screeny-1.jpg[/IMG] The CSS for the #sidenotes a Code: #sidenotes {
float:right;
width:180px;
}
This is how it's suppose to look: [IMG]browsershots.org/png/full/cd/cddbe6b9915e63ef4bdfc40848d77706.png[/IMG] What do I have to change to get it back next to the other bar? Thanks Supposing I have an image that is 200x200 pixels, and I have a div that is 100x100 pixels. I want to place the image inside the div AND have all 4 corners of the image visible. How do I do this? The idea is to fit the image inside the div without the image looking like it got "cut off" on any of its edges. I tried simply changing the CSS width and height but that did not achieve the desired effect. I'm hoping I won't need 4 divs, one for each corner? 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> Greetings. I have an annoying strange behaviour with MSIE 6.0 (unfortunately, this is the official browser in our company..). When a div object appears (with a list of valid values), select tags will stay in front. With Firefox 2.0 and Safari this doesn't arrives.. all is perfect. I am working on Windows XP sp2. I prepared a simple page to show you, but here I cannot insert urls nor images.... :-( I will be very happy to receive your feedback. Safe paths, Stefano 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? |
|||||||