|
CSS - Issue With Css Wrapping.
Good afternoon, hoping you guys can help me with something that's been tasking me the last couple of days.
Basically I have an image floated right inside a container div, and I wan't some divs to wrap around this on the left. I've done this bit. Inside each of the divs is a left floated number and a paragraph of text. I'm having trouble getting this not to wrap around the number without floating certain elements and breaking the rest of the layout. Here's a stripped down version of the page (sorry if the code is messy). Code: http://tomarcher.co.uk/upload/linkdump/test/single%20-%20Copy.php I look forward to your replies. Similar TutorialsI searched the forum and could not find a post with a similar issue, so I am creating this one. I have left and right containers, and the heights only wrap to the contents in the right container. So if there happens to be more content in the left container, the text exceeds the div background and continues onto the page background. URL REMOVED I appreciate any help I can get with this - Cadet Palmer Okay, I've been going MENTAL with this. Please help!!!! Here is the page: go to bartlettinteractive dot com / retail /index.html (sorry, I am a new user so they won't let me put in the actual link). Anyways, when you minimize your screen, the nav WRAPS when I want it to just be hidden. I have tried every combination of overflow:hidden and whitespace:nowrap I could imagine and nothing is getting it done. Please be my CSS hero. I'm having trouble with creating CSS rollovers. Well, not so much trouble as frustration. The rollover itself works fine in FF, and that's cool by me, but I have to make it work in IE, and whilst it *does* work in IE, whenever I roll over one of the CSS buttons, a 2 pixel gutter appears in my border div See what I mean... Open this link in FF and then in IE Ahh, great, now it's putting the gutter there in IE regardless. Great. Here's the CSS I'm using: Code:
body { font-family: tahoma; font-size: 12px; background: #fff; }
img { border: 0px; }
#Container { width: 520px; height: 400px; border: 1px solid #808080; margin-left: auto; margin-right: auto; background: url("backdrop.gif"); background-repeat: repeat; }
#HeaderContainer { border: 0px solid none; width: 500px; padding-bottom: 0px; float: left; }
#NavContainer { position: relative; margin-left: auto; margin-right: auto; border: 1px solid #000; width: 500px; float: left; padding: 2px; background: #fff; margin: 0px; }
#FooterContainer { border: 0px solid none; width: 500px; float: right; padding-top: 4px; padding-right: 0px; background: #fff; text-align: right; margin: 0px; }
.nav { width: 100px; border: 0px solid none; background: #c0c0c0; height: 20px; text-align: center; padding-top: 5px; float: left; margin: 0px; }
.navSelected { width: 100px; border: 0px solid none; background: #fff; height: 20px; text-align: center; padding-top: 5px; float: left; margin: 0px; }
a.navText, a.navText:visited { font-weight: bold; color: #000; text-decoration: none; }
a.navTextSelected, a.navTextSelected:visited { font-weight: bold; color: #808080; text-decoration: none; }
and here's the HTML (minus the CSS): 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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Page :: </title>
<style type="text/css" media="screen">
<!--Already included in snippet above /-->
</style>
<script type="text/javascript">
function roll(item, onOff) {
var targetDiv;
var targetText;
var showHide = onOff;
targetDiv = document.getElementById(item.id);
targetText = document.getElementById(item.id + "Text");
if (showHide == 1) {
targetDiv.className = "navSelected";
targetText.className = "navTextSelected";
} else if (showHide == 0) {
targetDiv.className = "nav";
targetText.className = "navText";
}
}
</script>
</head>
<body>
<div id="Container">
<div id="NavContainer">
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Toast" class="nav"><a id="ToastText" class="navText" href="/test.php?p=Toast">Toast</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Lemons" class="nav"><a id="LemonsText" class="navText" href="/test.php?p=Lemons">Lemons</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Cakes" class="nav"><a id="CakesText" class="navText" href="/test.php?p=Cakes">Cakes</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Nachos" class="nav"><a id="NachosText" class="navText" href="/test.php?p=Nachos">Nachos</a></div>
<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Frogs" class="nav"><a id="FrogsText" class="navText" href="/test.php?p=Frogs">Frogs</a></div>
</div>
<div id="FooterContainer"><a href="http://telestatic.net"><img src="http://telestatic.net/images/tsnLogo.jpg" width="136" height="15" alt="The Telestatic Network" title="The Telestatic Network" /></a> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fresume.telestatic.net%2Ftest.php%3F"><img src="http://telestatic.net/images/btnXHTML.png" alt="Valid Strict XHTML 1.0!" title="Valid Strict XHTML 1.0!" height="15" width="80" /></a> <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fresume.telestatic.net%2Fresume.css"><img src="http://telestatic.net/images/btnCSS.png" alt="Valid CSS!" title="Valid CSS!" width="80" height="15" /></a></div>
</div>
</body>
</html>
Hope to god someone can explain what's going on before I go totally insane. Hi, I have a problem that I'm trying to figure out. If I have a div such as the following: PHP Code: #Div1 { background: url(title.gif) no-repeat; position: absolute; top: 30px; left: 30px; width: 387px; height: 55px; .. which I want to be able to use absolute positioning to place within my page. My question is, is there a way to make it so that text will wrap around it (such as a regular aligned image) instead of the text appearing underneath it? I'm having trouble getting text to wrap within a DIV. In my purposely garish sample code below, what I want is for the image and the paragraph to appear side by side within the red DIV, with the paragraph wrapping onto multiple lines as necessary. What happens instead is that if the paragraph is too long to fit on one line beside the image, the blue DIV moves underneath the red one and the text remains on one line. Not what I want at all! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
p {
margin: 0 0;
color: white;
}
#title {
background-color: red;
height: 105px;
}
#left {
float: left;
margin: 20px 20px;
background-color: yellow;
}
#right {
float: right;
margin: 20px 20px;
background-color: blue;
overflow: hidden;
}
</style>
</head><body>
<div id="title">
<div id="left">
<a href="index.htm"><img src="http://i52.tinypic.com/2u9l5z9.png" alt="" width="429px" height="65px" border="0" /></a>
</div>
<div id="right">
<p>The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.</p>
</div>
</div>
</body></html>
If you shorten the paragraph you can see where I want the text to be displayed. It's only when it exceeds the available width within the red DIV that the whole blue DIV moves further down the page, where the text is suddenly quite happy to start wrapping. This can probably be solved with a single line of CSS but I've been trying all sorts with no joy. Can anyone please pinpoint what I need to do? I just discovered this recently while trying to help out a friend. It happens in all browsers, so it must be part of the spec, but it's not the way I expected it to work. In the zip file below, there are basically three sections, the content, a colored box in the content, and a colored sidebar that the content wraps around. The thing is that the colored box text wraps to the sidebar, but the background extends the width of the page/parent element. The nutshell version of my question is -- is there a way to make the background wrap too? I want the colored content box to always be as wide as the plain text above it, and the page needs to be liquid, and it's causing me headaches. Thoughts? I set up my photo pages so that each photo is in its own "bin" div with a caption. Each bin has the same width but different heights due to different caption lengths. All of the bin divs are coded to float left, so they stack vertically when there is only enough screen width for one. When the screen is wide enough to accomodate more than one, the divs that are wrapped to the next line (so to speak) start below the tallest previous div which can leave a lot of empty space. I'm sorry if this is confusing, a perfect example of what I am talking about can be found here with a browser window over 1024px wide: http://www.bsuto.com/photoblog/2006/05/27/ And the css is he http://www.bsuto.com/internal/sheet.css Does anybody have an idea of how to eliminate the empty space? Thank you all so much. I have a box that I use for a container and then another box inside of that set to a width. When I put text into the inner box the text seems to go beyond what it should. Can anybody tell me what might be wrong with it. Code is as follows----\ Code:
.content_contain {/* This is the main container for the content, its width run 100% of the wrapper */
height: 575px;/* Gives it a height so that when the main_content block is empty it still holds a size. */
width:100%;
z-index:0;
}
.main_content {/* This is the main content, this will hold the left menu and right content */
height:100%;/* Height is set to 100% so that it will grow when the text goes beyound 550px of the main container */
width:750px;
margin:0px auto;
text-align:left;/* Have to use text-align:left becuase of the body text-align:center hack for IE */
position:relative;
background:white;
border:1px solid white;
z-index:5;
}
Thanks for any help that you guys can come up with... Stephen Please can you take a look at my page http://www.doylecompanylaw.com/doyle.html The bottom div #basediv is all borked. I can't for the life of me figure out why. The main #outerdiv has a background image applied to it and it should all line up with the base div but its not displaying properly on Firefox or Opera. Any ideas? Hello, i know this quest has been asked a few tims before as i did a search on it, but could not find an answer to help.. (though i may have missed it as i havet slepted in days) i have this setup on a page where i have a table of 4 imgs in the top right of the main table.. the text starts at the top left but dose not wrap under the images once its long enough and past the images.. (ill try and draw it for you here) .......== .......== ....... ....... ....... ....... ....... the . is my text the == is a image (/ is just a space), above is what its doing, what i need is for it to do this .......==/== .......==/== ............... ............... ............... thats what i need. i hope this shows what i mean :P any help would be great thanx. My menu keeps wrapping when the browser window is resized... How do I prevent this? Here is my code: index.php 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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sphinx Gaming Inc. -::- Home</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript">
var blanking_flag = true;
function search_remvalue(method)
{
if (blanking_flag === true && method == 'focus')
{
document.search_frm.query.value = "";
blanking_flag = false;
}
else if (method == 'focus' && document.search_frm.query.value == "Search...")
{
document.search_frm.query.value = "";
blanking_flag = false;
}
if (blanking_flag === false && document.search_frm.query.value == "" && method == 'blur')
{
document.search_frm.query.value = "Search...";
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<a href="index.html"><h1><p>Sphinx Gaming Inc.</p></h1></a>
</div>
<div id="navigation">
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Partners</a></li>
</ul>
<form name="search_frm" action="" method="get">
<input type="text" size="30" name="query" value="Search..." onBlur="search_remvalue('blur')" onFocus="search_remvalue('focus')"/>
</form>
</div>
<div id="content">
<p>This is the main content</p>
</div>
<div id="footer">
<p> It is currently <?php echo date('l \t\h\e jS \of F Y h:i:s A'); ?><br/> </p> <br/>
<p class="bottom">Copyright Richard Carson, 2010. If you have any questions, comments or concerns, feel free to email me at rcarson@sphinxgaming.com</p>
</div> </div>
</body>
</html>
main.css Code: * { padding: 0; margin: 0; }
html,
body {
margin:0;
padding:0;
height:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
white-space:nowrap;
}
p {
padding: 10px;
}
#wrapper {
margin: 0 auto;
width: 100%;
min-height:100%;
position: relative;
}
#content {
float: left;
color: #333;
background: #FFFFFF;
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#header {
color: #555;
width: 100%;
float: left;
height: 75px;
background: #000000;
}
#header h1 {
font-size: 50px;
}
#header p {
text-align: center;
}
#header a {
width: 99.9%;
height: 100%;
float: center;
text-align: center;
display: block;
text-decoration: none;
font-weight: normal;
}
#header a:link {
color: #999;
border: none;
}
#header a:visited {
color: #999;
border: none;
}
#header a:hover {
color: #999;
border: none;
}
#header a:active {
color: #999;
border: none;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
clear: both;
color: #999;
background: #333;
}
#footer p {
text-align: right;
margin: 3px;
padding: 1px;
vertical-align: top;
}
#footer p.bottom {
text-align: center;
font-size: 10px;
vertical-align: bottom;
}
#navigation {
float: left;
width: 100%;
padding: 0;
margin: 0;
height: 25px;
color: #999;
background: #333;
text-align: center;
}
#navigation ul
{
padding: 0;
margin: 0;
display:inline;
width: 100%;
}
#navigation li
{
float: left;
padding: 0;
margin: 0;
display:inline;
}
#navigation li a
{
height: 25px;
line-height: 25px;
float: left;
width: 120px;
padding: 0;
margin: 0;
display: block;
border-left: 0.1em solid #444;
border-right: 0.1em solid #444;
color: #999;
text-decoration: none;
text-align: center;
}
#navigation a:link {
color: #999;
}
#navigation a:visited {
color: #999;
}
#navigation a:hover {
color: #BBB;
}
#navigation a:active {
color: #FFFFFF;
}
Thanks in advance, Richard Carson Hi, Does anyone know how to get text in a textarea to automatically wrap when the text input hits the right hand border of the textarea. It works fine in I.E. without any style rules or using the html tag 'wrap'. But in firefox the text just continues horizontally and a horizontal scroll bar appears at the bottom of the box when the text reaches the right-hand border. Read a solution somewhere, sometime ago but can't remember where. Tried so far: [1] css overflow rule [2] HTML 'wrap' attribute [3] css white-space rule solution must validate CSS. thanx in advanz how i do that again? I have a span that displays a message generated from ASP. The message is not wrapping like I expected it to. My CSS for the span looks like this, #message { padding:5px; font:bold 100% Arial, Verdana, Helvetica, sans-serif; border: 1px dashed #000000; } And my HTML looks like this, <span id="message">This is a sample message. This is a long message that will not wrap as one would expect.</span> When the message is long, the span wraps, but it overlaps the first line. I have tried adding float:left to it, but then it becomes so wide that scrollbars are displayed. I could add a width with the float, but if I do that then the short messages look funny when displayed (the border goes the whole width, and therefore there is whitespace to contend with). How can I make this wrap like would be expected (no overlap)? Thanks, Drew hi all, i'm trying to make a vertical menu using CSS2 and XHTML. the problem i'm facing is that i need a DIV inside a table cell, which should take 100% width and height, and inside this DIV i will place arbitrary contents that scrolls if they overflows. This is the code i have written so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
TestMenu
</title>
<style type="text/css">
BODY, HTML {
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.menuContainer {
background-color: red;
width: 300px;
height: 100%;
border-spacing: 0px;
}
.menuItem {
background-color: green;
}
.menuItemOpen {
background-color: yellow;
}
.menuItemContents {
margin: 0px;
padding: 0px;
vertical-align: top;
}
.menuItemContainer {
height: 100%;
width: 100%;
border-spacing: 0px;
}
.menuTitle {
background-color: blue;
color: white;
height: 20px;
margin: 0;
padding: 0;
}
.menuContents {
padding: 0px;
}
.menuInnerContents {
background-color: orange;
overflow: auto;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table class="menuContainer">
<tr class="menuItemOpen">
<td class="menuItemContents"><table class="menuItemContainer">
<tr>
<td class="menuTitle">Item 1</td>
</tr>
<tr>
<td class="menuContents"><div class="menuInnerContents"><div>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/></div></div></td>
</tr>
</table></td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 2</td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 3</td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 4</td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 5</td>
</tr>
</table>
</body>
</html>
as you can see the "menuInnerContents" DIV isn't taking all the space available and the text inside it doesn't overflow. Help me please! hey guys, need some help with css on mys site take a look at this using firefox http://home.no.net/kumar/test/earthtemplate_div.php3 http://home.no.net/kumar/test/skins/flyaway_yellow.css ie diplays the the container expanding to include the text, but ff (and maybe even mozillla) doesnt. anyone know how to get around this. i found a hack that i used to make sure that the container for the whole site wrapped around all shild elements but it is not working for the text. i have a left column, rightcoloum and the content div i the middle, all places using flaots, not absolute pos. also, the content div contains another div (content2), inside which the text is (this is oinly to get around widht issues in ie.) im suire that there is a way to get the contetnt or the content2 to wrap around the text...so any help is appreciated... thansk kumar Hello, I know basic css and html, but not much more than that. However, the site I am attempting to build is very simple, so hopefully someone here can help me stumble my way through the process. Here is an example of what I want: URL ...and when I add new content: URL I want a css grid of identical square containers, with a thumbnail in each one. The tricky part is getting the differently-sized thumbnails to be vertically centered in the containers without having to set each one by hand. This is where I have gotten so far- http://jimtierneyart.com/test/test.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {
margin : auto;
}
.wrapper {
width: 900px;
border: 1px solid #bbbbbb;
margin: 50 auto;
}
.item {
line-height: 223;
text-align: center;
float: left;
width: 223px;
height: 223px;
border: 1px solid #dddddd;
background: #EBEBEB;
}
img.a {
margin: auto;
max-width:120px;
border:0;
max-height:175px;
}
</style>
</head>
<body>
<div class="wrapper">
header
<BR>
<BR>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
<div class="item">
<img class="a" src="image.gif">
</div>
</div>
</body>
</html>
I need 2 things to happen: 1. The parent container must be centered on the page (this worked fine until I added the Doctype tags. 2. the thumbnails must be vertically centered within the child containers. Can anyone point me in the right direction? I would really appreciate some help. So here's the deal. I need the nav buttons to stretch across so that it's flush with the gray background but when I add another pixel to padding-right:7px it wraps to the next line. I'm somewhat new to CSS so I don't know what to do to fix it. -Johnny Here is the code: /* ---------- Primary Nav ---------- */ div#primaryNav {clear:both;background-color:#EEEEEE;width:754px;} div#primaryNav ul {border:0;margin:0;padding:0;list-style-type:none;text-align:center;} div#primaryNav ul li {display:inline;float:left;text-align:center;padding:0;margin:0;padding-bottom:5px;padding-right:7px;} div#primaryNav ul li a {width:116px;height:17px;border:1px solid #D9D9D9;background:#FFFFFF;margin:0px;padding:0;padding-top:2px;color:#707070;display:block;text-align:center;text-decoration:none;} div#primaryNav ul li a:hover {} div#primaryNav ul li a.selected {font-weight:bold;color: #FFFFFF;background-color: #FFAB00;border: inherit #FFAB00;} Here is the navi: <div id="primaryNav"> <ul> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a href="Item">Item</a></li> <li><a class="selected" href="Item">Item</a></li> </ul> </div> PROB FIXED hi, I have a site im working on: www.tomaustin.dsl.pipex.com/webdev I have #mainbox on the left and #subnav on the right I want the subnav to have height 100% ( i know it is, but thats to show the other problem) I also have subnav going under mainbox when there is less content in main box basically im trying to get it to look like www.alistapart.com can anyone help, just ask if the probem sisnt make sense thanks PROB FIXED I am trying to get some URLs to wrap within table cell which I am able to do with the CSS "word-wrap:break-word". However, when it comes to Mozilla, this CSS property does not work. I understand that the word-wrap property is specific to IE. But does anyone know of a way to make this work with Mozilla? If I have to parse the string incvolved with Javascript, so be it! (But please don't make me!!) |
|||||||