CSS - Problem Getting Two Css Boxes Close Together...

I am sure that you've seen these types of divs/boxes that people use on their webpage. almost everyone uses it

pretty much it's a div or a table cell where the cell has background colour and a thin border around it (usually lighter) for a nice effect. Then obviously within the box, there is text to be displayed.

I can't seem to get this!! I've tried using tables but what happens is that the border starts overlapping with the other cells and I don't have the effect I won't

what's the easiest way of implementing this type of design?

thanks!

Please look at www.mts-diesel.com / index.php

For some reason there is a large gap above the footer. I want it to close right in on the carousel you see there. I can't find anything that is causing that gap as it is. I am using a grid 960 template I found on line.

#footer{
height:176px;
width:960px;
margin:0 0 0 0 !important;
color: #FFFFFF;
background:transparent url(../images/footer_bg.jpg) no-repeat;
}

I have a problem with my floating DIVs... I want to make an "L" layout.. .but it doesn't anchor properly when I resize my screen. My L-shape joins at the top-left hand side of the screen... but, when I maximise my browser window (on Opera and IE) the L "separates" because the "top" of the L is anchored to the right hand side of the screen (width = 100%) (see screenshot 1).

Any ideas on how to anchor the top bar so that it doesn't separate?

the hole - when browser window is maximised

where I want to anchor it


I'll release code (css and HTML) on request if it's needed

Hi all,

I'm trying to get a pop up css based box (onClick is from an image) to display="none" when a user selects a value from a select box. I have a close link in the pop up, but I've been told that's not good enough.....

I have been trying to get the onChange handler to work, but I can't seem to find the right way to access it properly..

If anyone has done something similar, can you please send me your code snippet or direct me to a tutorial that explains how to do this? I'm new to javascript so please be gentle. Oh I guess I should mention that there are around 100 of these boxes and the div id is being created dynamically with ColdFusion....

Thanks!

Dave

Hi,
Is this the correct way to create Open and Close Link with image background?
it does not seem to work for me. Image is not displayed properly.
Code:

<style type="text/css">
span.open{background-image:url('img/open.gif');background-repeat:no-repeat; width:20px}
span.close{background-image:url('img/close.gif');background-repeat:no-repeat; width:20px}
</style>

<a id="toggleLnk" href="javascript: toggleOpenClose()">Open This<span class="open"></span></a>	


function toggleOpenClose() changes the class name and text as follows:
<a id="toggleLnk" href="javascript: toggleOpenClose()">Close This<span class="close"></span></a>

I need a popup auto close in 3 second to show result is true.
I try it in javascript,but no border is impossible in my ie8. I need it in css. Send me some solutions. THank all

Hello everyone,

At the moment I am trying to achieve a re-design of my website (http://www.madewithpixels.co.uk) in pure XHTML/CSS.

After many hours of tweaking and a little bit of help here and there, I now have a version that almost exactly matches my original html design save for a couple of issues.

I'm aiming to have a fixed sized header, 2 content boxes that fill the available height of the browser window and and a footer that sticks to the bottom of the browser,

I'm so very nearly there, except somethings not quite right.... I can get the container expanding in height with the browser window no problem, by setting the height attributes in the CSS and the height of the DIV in the html to 100% height ... except it's TOO big, the footer is waaay down the bottom and requires me to scroll down to it (not what i want)....AND... it doesnt work in mozilla...

so, after a bit more tweaking, I changed the %'s for em's and now mozilla works correctly... so far so good, now to get the content boxes and the footer to
remain in view all the time.... easy i think, just play about with the height attributes in the CSS and the DIV and everthing should be fairly straightforward.

But no! it doesnt work, whatever i do, i cannot get the main content coloumns and the footer to remain in view and fit to 100% height of the browser at the same time, I've tried every combination of % and EM's that I can think of, and can acheive both effects, but not at the same time.

also, in IE I have about 10px of white above the footer that i cant eliminate... If anyone can give me an explanation as to what is happening (im sure the two problems are related) I'd be very grateful.
I've been tweaking this code for two days now and am getting nowhere.

i'm getting closer all the time, i just need to understand whats happening here and I reckon i'll be ready to start putting the rest of the elements in like the navigation etc

Thanks very much to anyone who has the time to make a suggestion, its very much appreciated.

For reference, you can see the latest version he
http://www.madewithpixels.co.uk/sandbox/latest.htm

cheers

Mike

I am using the code shown he http://webdesign.about.com/od/css/a/aa072406.htm

Code:

.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}

Code:

<div class="container">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
CONTENTS GOES HERE
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</div>

the code works ok, but i would like it tweaked so the text is not so close the the egdes, the top and bottom seems ok but it is the left and right margins that are too close to the edges, can these inner margins be increased so the text is not so close?

thanks in advance for your help

Hi guys,

I am trying to achieve the following:

Box 1 |
------
Box 2 |

** With a 3rd box to the right of box 1&2


I have got this far but cant work out how to do 'box2'


Code:

<div id="box2">
box 2
</div>
<div id="box3">
box 3
</div>

Code:

#box2 {
	float: left;
	padding: 10px;
	margin: 20px;
	background: #ffffff;
	width: 100px; 
	/* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 100px;
	}
html>body #box2 {
	width: 100px; 
	/* ie5win fudge ends */
	}


#box3 {
	float: right;
	padding: 10px;
	margin: 20px;
	background: #ffffff;
	width: 100px; 
	/* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 100px;
	}
html>body #box3 {
	width: 100px; 
	/* ie5win fudge ends */
	}

Can anyone possibly help?

My boxes line up horizontally perfectly in Firefox but not in IE7 (not suprisingly).

Because of the rules I can't show you the link but the html places two boxes side by side lined up so that they are the same distance from the top. It looks right in Firefox but IE7 drops the right box about 10 pixels or so.

My Html is this:

<div id="newsboxleft">
<div id="newsboxright"></div></div>

My CSS is this:

#newsboxleft { margin: 10px auto;
position: relative;
top: 0px;
left: -187px;
width: 350px;
height: 142px;
background: url(../images/newsboxleft.jpg) repeat-x top;
border-top: 0px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 0px;
clear: both;
}

#newsboxright { margin: 10px auto;
position: relative;
top: 0px;
left: 373px;
width: 350px;
height: 142px;
background: url(../images/newsboxright.jpg) repeat-x top;
border-top: 0px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 0px;
clear: both;
}


I hope someone can help. Thanks.

Hallo,

I have in several cases serious problems with floating boxes. Not with the standard layout's like here described http://css.maxdesign.com.au/floatutorial/
but with more complicated layouts. I know to place the float attribute but have problems with setting the clear attribute.

Does some know a good source where I find more information or documented examples ?

Finally I can fix my problems, but it take so much time of testing...

Thnaks

Hello:

I'm trying to place two drop down boxes at the right of my page.

When I view the pages in Firefox and Internet Explorer, they are so far off.

You can view the page yourself by visiting:
http://www.informedmortgage/100-financing.html

I've tried changing widths, margins, etc and am having no luck.

I can use some help. I hope someone can help me out.

Thank you.
Back to top

I have 4 or 5 form controls that I want in a horizontal line. Each form control has a label above it, and I'm using <br>s to position the form control below the label.

I thought that wrapping each "label<br>form control" with a <span> would turn the whole thing into an inline block, where the next <span> would line up next to it, like the next <td> in a <tr>.
Code:

<div id=secondline>
  <span id=ed>
    <b>Event Definition</b>:<br>
    <textarea name=inject cols=45 rows=6></textarea>
  </span>
  <span id=after>
    <b>After</b><br>
    <select name=next size=8 multiple>
      <option value=0>0
      ...
      <option value=100>100
    </select>
  </span>
</div>

but, alas, it doesn't work like that.

How can I get Code:

<tr>
  <td>label<br>form_control</td>
  <td>label<br>form_control</td>
</tr>

behavior without using tables?

Im trying to replicate the vertical navigation style that is used on the Mozilla Firefox Website (as seen to the left). I have sucessfully done this useing images, with the exclusion of a space problem between the items and the end images in FireFox. I am using the strict.dtd and am frustrated with this problem. Iff anyone can help me create a nav with this style that would be wonderful. Here is the css im using:

Code:

.cssnavend	{
	position:relative;
	font-family: arial, verdana, helvetica, sans-serif;
	display: block;
	width: 209px;
	height: 9px;
	margin: 0; 
	margin-bottom:0px;
	padding: 0;
}
.cssnav	{
	position:relative;
	font-family: arial, verdana, helvetica, sans-serif;
	background-image: url(images/but-over.jpg);
	background-repeat: no-repeat;
	display: block;
	width: 209px;
	height: 31px;
	margin: 0; 
	margin-bottom:0px;
	padding: 0;
}
.cssnav a {
	display:block;
	font-size: 11px;
	width: 209px;
	height: 31px;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	color: #096CCE; 
	text-decoration: none; 
}
.cssnav img {
	width: 100%; 
	height: 100%;
	border: 0;
}
.cssnav a:hover{
	color: #000;
	}
* html a:hover {
	visibility:visible
}
.cssnav a:hover img{
	visibility:hidden
}
.cssnav span {	
	position:absolute;
	left:7px;	
	top:7px;	
	margin:0;	
	cursor: pointer;
	}
#box {
	margin-top: 10px;
	padding: 0;
	width: 209px;
	display: block;
	}
#boxtop {
	width: 209px;
	height: 11px;
}
#boxcontent {
	width: 209px;
	background: #DFE5EB;
}
#boxbottom {
	width: 209px;
	height: 11px;
}
#boxtext {
	width: 209px;
	background: #DFE5EB;
	padding: 2px;
}

The following code is me testing my css. The first group is useing the cssnav styles. The 2nd group is using the box styles. The 3rd group is a try at making a content box with rounded corners that is a spacific width. Unfortunatly, the content of the box will not wrap to the width of the box, instead it continues on 1 line and outside the box.

Code:

<div class="cssnavend"><img src="images/but-top.jpg"></div>
<div class="cssnav"><a href="index.php"><img src="images/but-up.jpg" /><span>Home</span></a></div>
<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div>
<div class="cssnav"><a href="phpbb/index.php" target=_blank><img src="images/but-up.jpg" /><span>Forum</span></a></div>
<div class="cssnavend"><img src="images/but-bot.jpg"></div>

<br><br>

<div class="box">
	<div class="boxtop"><img src=images/but-top.jpg></div>
	<div content="boxcontent">
		<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Home</span></a></div>
		<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div>
		<div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Forum</span></a></div>
	</div>
	<div class="boxbottom"><img src=images/but-bot.jpg></div>
</div>

<br><br>

<div class="box">
	<div class="boxtop"><img src=images/box-top.jpg></div>
	<div class="boxcontent">
		<div class="boxtext">This is some text inside of the box. This text should wrap and be padded.</div>
	</div>
	<div class="boxbottom"><img src=images/box-bot.jpg></div>
</div>

Thank you all who help.

Hi

I am creating a new site for a friend in Wordpress

ilovelifebecause.com

I can usually muddle through in css to make changes, but i'm stumped at the moment.

What I am trying to do is swap around the two cream coloured boxes so the larger one is on the right, the thinner one on the left and the blue box in the middle still. I've tried a number of things in the css file but can't seem to find the right method - can anyone help?

many thanks in advance
Paul