|
CSS - Trouble With 3 Horizontal Boxes
I am having trouble getting my 3rd blue box to clear - I floated the first one left, gave the 2nd one a left margin enough to clear and leave space between it and the 1st box, and I am trying to do the same with the 3rd except it won't clear the 2nd box. I've been playing with the widths and left margins but nothing seems to work. I'm trying to get them equally spaced out in their containing DIV. Thanks for any help.
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">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
text-align: center; /* IE5/Win fix */
}
#wrapper {
width:750px;
height:100%;
margin:0 auto 0 auto;
border:1px solid green;
text-align: left;
}
#bottomcontent {
width:auto;
height:auto;
/* border:1px solid #990; */
}
#leftboxes {
width:185px;
padding:5px;
float:left;
border:1px solid black;
}
.leftbox {
height:80px;
width:98%;
margin-bottom:10px;
border:1px solid orange;
}
#rightboxes {
width:535px;
padding:5px 0 0 0;
margin-left:200px;
border:1px solid pink;
}
.rightbox1, .rightbox2, .rightbox3 {
height:172px;
width:165px;
border:1px solid blue;
}
.rightbox1 {
float:left;
}
.rightbox2 {
margin-left:170px;
}
.rightbox3 {
margin-left:342px;
}
/* hide from IE/Mac \*/
* html #bottomcontent,* html #midbanner {
width:750.5px;
wid\th:750px;
}
/* end hide */
</style>
</head>
<body>
<div id="wrapper">
<div id="bottomcontent">
<div id="leftboxes">
<div class="leftbox">Ad #1</div>
<div class="leftbox">Ad #2</div>
<div class="leftbox">Ad #3</div>
</div>
<div id="rightboxes">
<div class="rightbox1">Package 1</div>
<div class="rightbox2">Package 2</div>
<div class="rightbox3">Package 3</div>
</div>
</div>
</div>
</body>
</html>
Similar TutorialsHey guys, This seems like a really simple thing to accomplish, but I'm just having trouble locking on to what exactly to put in the code. Basically, I want to have two rows of four horizontal boxes, with the two rows of boxes and the contents of each box centered. How do I go about doing this? Should I use <span> for each box and then just use absolute positioning? Or should I put them in a container <div> or something? If anybody has any code samples, that would be a big help. I just want it to end up looking like this: [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] ...with all the boxes centered on the page. Thanks for the help! - Luke I found this code online and I'm trying to alter it slightly for what I need. Code: <html>
<head>
<style type="text/css">
body,html {
padding: 0;
margin: 10;
}
#navcontainer ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #acf;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><a href="#">Content</a></li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Estate</a></li>
</ul>
</div>
</body>
It gives a nice center-aligned horizontal CSS menu. What I'm wondering is: How do I make it so that the width of each of the blue boxes the links are in are the same width? Say I want them all width: 180px; Where do I put that style so that it applies to all the links? [On a related issue, the style sheet has 4 things related to #navcontainer. How does one know which one of these to put additional styles in?] Thanks Much. j 9 I am trying to get a page that has 3 boxes in a row (horizontally) with the first two having a fixed width, and my problem is getting the third one to take up the rest of width - so I don't have to specifiy a width for the third one. I have tried the auto width which works great and shows up perfectly in Firefox but just leaves a not very wide box in IE. There is probably an easier or cleaner way to do this but this is what I have so far: CSS: #box1 { width:70px; height:120px; text-align:right; padding:10px; border: 1px solid gray; font-size:10px; position:absolute; top:250px; left:0px; } #box2 { width:70px; height:120px; text-align:right; padding:10px; border: 1px solid gray; font-size:10px; position:absolute; top:250px; left:97px; } #box3 { width:auto; /*WIDTH IN QUESTION*/ height:120px; text-align:right; padding:10px; border: 1px solid gray; font-size:10px; position:absolute; top:250px; left:194px; right:0px; } HTML: <body> <div id="box1">TEST</div> <div id="box2">TEST</div> <div id="box3">TEST</div> </body> I hope someone can help me with this, I've been messing with it for hours, and it /seems/ like it should be simple. Take a look at this page. I am trying to extend the green background of the nav bar over to the black line on the right hand side, and to center the css buttons so that the whole nav is centered within the containing div (the black lines on the web page.) Here is the relevant page code: PHP Code: <div id="navbar" class="nav"> <ul> <li class="first"><a href="/admin/events/">SUBSCRIBE</a></li> <li><a href="/admin/photos/">ISSUES</a></li> <li><a href="/admin/content/">PURCHASE CATALOG</a></li> <li><a href="/admin/press/">SELLERS GUIDE</a></li> <li><a href="/admin/resources/">PRODUCTS</a></li> <li><a href="/admin/resources/">NEWSLETTERS</a></li> <li><a href="/admin/resources/">EVENTS</a></li> <li><a href="/admin/resources/">BLOGS</a></li> <li><a href="/admin/resources/">ABOUT US</a></li> </ul> </div> and here is the CSS for the nav bar: PHP Code: #navbar { width: 768px; text-align: center; background-color: #098E00; margin-top: 35px; } .nav ul { width: 100%; margin: 0; padding: 0; text-align: center; font-size: 11px; } /* any li element within .nav container */ .nav li { float: left; margin: 0; padding: 0; list-style: none; border-left: 1px solid #fff; } /* any anchor in a .nav list item element */ .nav li a { display: block; /* expand to fill parent li */ margin: 0; /* no space between anchors */ padding: 3px 6px 3px 6px; text-decoration: none; /* no underline */ color: #fff; /* override default link color */ background-color: #098E00; } /* 1st list item has no left border */ .nav li.first { border-left: 0 none; } /* rollover effect */ .nav li a:hover { background-color: #ccc; } How do I center the nav bar, and make it so that the CSS buttons are centered on a green background that goes from the left hand black line to the right hand black line? THANKS FOR YOUR HELP. I would like to align left images so that they touch against each other. Here is a capture of my problem. dollhedz.com/test [CODE] <style type="text/css"> body{ background-color:#000033; color:#00cc33; } #wrapper{ background-color:#000000; margin:15px auto 0px; width:700px; height:800px; } #sitenav{ background-image:url(sitegrax/sitenavback.jpg); background-repeat: no-repeat; height:55px; padding-left:213px; border: 0px; margin:0px; text-align:left; } #one{ float:left; text-align:left; align:left; margin:0px; padding:0px; } </style> </head> <body> <div id="wrapper"> <div id="banner"><img src="sitegrax/banner.jpg" alt=" yellow Jacket dodging a 355 smoothbore slug" border="0" /> </div> <div id="sitenav" > <div id="one"><a href=""><img src="sitegrax/bt_game_nav.jpg" alt="site navigation games" border="1" /></a> <a href="" align="left"><img src="sitegrax/bt_history_nav.jpg" alt="site navigation history" border="1" /></a> <a href=""><img src="sitegrax/bt_pilot_nav.jpg" alt="site navigation pilot"border="1" /></a></div> </div> </div> </body> </code> Problem: There is a 5 to 6 pixel space between each image that I would like gone. The 1px border around each image is there to show the edge of each image. thank you for your time hi, Im making a site, and i decided to use CSS instead of tables. I have used basic CSS before, but it gets abit harder when i start making boxes etc. Here is my code so far - layout.css - (one that gets included on each page) Code: @import "style.css";
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
#shoutbox {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}
#banner, #footer {
background:#fff;
height:40px;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
#footer {
background:#fff;
height:40px;
border-bottom:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
#banner h1 {
font-size:16px;
padding:10px 10px 0px 10px;
margin:0px;
}
#shoutbox, #rightcontent p {
font-size:10px
}
style.css - text formatting etc. Code: body {
font: 12px/1.2 Tahoma;
background:#ddd;
padding:0px;
margin:0px;
}
a {
text-decoration:none;
font-weight:bold;
color:#c00;
}
pre {
font-size:11px;
color:blue;
}
ol {
margin-right:40px;
}
li {
margin-bottom:10px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
it produces a good layout, with a header, 3 coloums and a footer. whoever, the boxes expand at different rates and the footer doesnt move down. the header also doesnt expand. i know how i can fix this, but i dont know how to fix it without making it so that its locked at a resolution. i would like the site to exapand as the window is made larger. here is an image of what i get - and this is what i am aiming to acheive - as you can see, i want all the boxes to be the same length, which is defined by the size of the largest box. also, i want to create 2 or more boxes on the left, only the bottom of which gets made longer. on the first image you cannot see the extra box because it is covered by the other one :-/ i would be greatful for any help you guys can provide me thanks, dynamyt 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 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 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? Hello, I created a site with floating frames and it looks good in IE6 and FF/Mozilla. But I have one problem: I use in my dynamic layout an ID more then once (thats not OK according w3 validation) I tried to do something with pseudo classes but this works not really goed. My "uni" thumb box is used on two diff. pages The skyscraper: http://www.all4yourwebsite.com/ and the result/search page: http://www.all4yourwebsite.com/search.php I know there is a solution, but because the tumbbox have to be much flexible the solution must be simple as the current (wrong) solution. Anyone an idea? 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? 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 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. 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 Hi this is my first post. I'm having trouble making a horizontal navbar with a picture background. here is the vertical menu. http://school(dot)timswildwackyemporium(dot)com/NewMouseOver/navtest.html replace (dot)s with period I want to make the buttons next to each other, but with about 10px space in between them. Thanks. Hi. im used to using tables for things like this, trying to get it all into css, im having a little trouble creating like module boxes, with tables i would slice the corners up, etc and put arrange them in a table, Row 1: 3 columns //header Row 2: 1 column spanning 3 //content Row 2: 3 columns //footer corners heres a diagram of what im trying to do will make it easier to understand, appreciate anyones help. Cheers Rob I am trying to color in radio boxes itself, ( example where I want to use it he http://scygro.ath.cx/index.php?option=customize ) but somehow I cannot figure out how to do this. I would like a proper result on both Internet Explorer and Mozilla? Anyone know? I tried to search for this, maybe I'm just blind, but couldn't find anything, only how to color a little block on which the radio button is on top of, which needless to say didn't help much! I am new to using CSS for more than just text, and I have run into a problem. What I want to do is to have an image with a margin of 3px around it. The problem occus with the background color and border in Mozilla (Fire Fox). The box dosn't fit around the image properly. Does anyone have an idea why this is? --xenite I came across this site with a google search. I have been trying to make a website for my new business and I've been trying to learn CSS. Everything went fine until I tested resolutions out yesterday, I noticed they changed. I've been trying to place a text box in middle of an image but I can't get it to work correctly... a perfect example of what I'm trying to achieve is found he http://www.myspace.com/nourotika I have tried and tried and this is the website that came closest to my problem... My code would be: Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #000;
}
-->
</style></head>
<body><center>
<p style="position: absolute; top: 735px; right: 314px; width: 537px; padding: 4px; background-color: #000; font-weight: bold; font-size: 11px; font-xolor: #F00; height: 548px; color: #909; overflow: visible; z-index: 1;">content goes here</p>
</div>
http://i158.photobucket.com/albums/t108/Katouuffxi/regular.jpg This would be the regular resolution I'm looking for http://i158.photobucket.com/albums/t108/Katouuffxi/resproblem.jpg And this would be my screen resolution problem Sad I really don't know how in the world to do it and I'm just so close from finishing everything... help would be much much appreciated. I'm new to css. I learned how to center a layout so it stays in the center of the browser when the browser is resized, but now I am having trouble trying to place elements inside the boxes I create. When I create a box and put it inside my main layout box i give it a position as to where I want it to go, but when I go into the browser and resize the browser the box stays where it is, and doesn't move with the rest of the page. the same happens for the text i put inside boxes. I guess I'm not supposed to assign an absolute value to the boxes, but how else to I get it where I want it? It's driving me crazy! this is my html:<body> <div id="container"> <div class="box"> <h1>Silver City Food Co-op</h1> <p1>520 North Bullard Street - Silver City - New Mexico - 88061 - Phone: 575-388-2343 - Monday-Saturday: 9am-7pm</p1></div> <div class="box1"><p>The Silver City Food Co-op is a member owned full-line grocery store featuring natural, organic, and local foods, everyone can shop the Co-op, anyone can become part owner of the Co-op!</p></div> <div class="box2"><div class="box3"><p2>Food News</p2></div></div> </div> </body> </html> this is my CSS body{background-color: #69916D} h1{color: #FFF; Font-family: Georgia, "Times New Roman", Times, serif; font-size: 46px; letter-spacing: 7px; font-weight: normal; margin: 0 0 0 130px} p1{font: Arial, Helvetica, sans-serif; letter-spacing: 2px; font-size: 10px; color:#FFF; margins: 0 0 0 30px} p{font: Arial, Helvetica, sans-serif; margin: 0 0 0 10px} div.box {height: 150px; width:750px; border: 0px solid; border-color: #000; background-color: #166501} div.box1 {height: auto; width: 750px; border: 1px solid black;background-color: #FFF; position: absolute; Top: 200px; z-index:2} div.box2 {height: 500px; width:750px; border: 0px solid; border-color:#000; background-color: #FFF9F6; z-index: 1} div.box3{height:auto; width: 200px; border:1px solid; border-color:#000; background-color: #FFF; position:absolute; top: 300px; left:152px} body { text-align: center; } #container {margin: 0 auto; width: 750px; text-align: left } Thanks for the help!! |
|||||||