|
CSS - Need Help Making A Simple Floating Box, Fixed Width, Centered
I don't know why I'm having such a hard time with this. I'm trying to build a "message box" for an application that I'm working on.
Box requirements: Fixed width Variable height (fit to content) Centered on page Floating over other elements (I don't want the rest of the elements on the page to move when the box is displayed) Must work in IE/FF/Safari Here's what I tried: css Code: Original - css Code #message_box{ border: 1px solid #AAA; background-color: #DDD; width: 400px; display: none; /* This gets changed to block by javascript */ position: absolute; top: 0px; text-align: center; margin: 20px 0px 0px 0px; padding: 20px; font-size: 12px; z-index: 20; }
That creates a box that I'm happy with, but I'm having problems figuring out how to center it on the page. Do I have to put another div element around my #message_box element? Is there a way to center it with margins? Examples would be appreciated... Also, in IE, form drop downs "bleed through" the box. The box covers up everything except <select>s. Is there any fix for that? Similar TutorialsHi, Im trying to make the orange column fixed width but it doesnt work, when I change the width of the browser window it still changes width. Here is the link: http://www.i3design.com/test/ Here is the CSS: Code:
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.center { margin-left: auto; margin-right: auto; text-align: center; }
.hidden { display: none; }
body { color: white; margin: 0; padding: 0; } /* Edited by Goldworker */
div.padded { display: block; }
div.content { width: 75%; margin: 0% 12.5%; } /* Added by Goldworker */
div.login { background-color: black; padding: 0% 12.5%; } /* Edited by Goldworker */
div.logo { background-color: grey; height: 50px; padding: 0% 12.5%; } /* Edited by Goldworker */
div.subnavigation { background-color: brown; }
div.main { color: black; background-color: orange; padding-left: 0px; padding-right: 0px; }
div.main div.body { background-color: white; min-width: 75%; }
div.main div.advertisements { width: 250px; display: inline; margin-right: 0px; }
div.footer { background-color: grey; }
Can anyone help. Also, is this well coded, or is it inefficient? James Hello, I created a 3 column layout with header and footer: http://www.27lamps.com/public/layout.htm The problems I have a 1. I am not able to extend my 3 columns so they have the same height. How can I do this? Do I need to use images somehow? I would prefer to use CSS only if possible. 2. I am not able to use padding in my columns without breaking the design. Could someone, please, help me fixing this problem and also improve my code? Thanks, Miguel Hi, Okay my boss wants me to do this: Have a rectangualr div that has another div in it that is smaller and is in the (vertically and horizontally) center. No probs, but the one in the middle has to have text floating around it, thats above left right and bottom. Me thinks this is impossible! Does anyone have any idea??? Cheers, 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 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'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 Hi all, I have a mysql database with a list of milkshake flavors. I want to pull those out and display them into 4 columns. No problem there. The hangup is that the width of these columns isn't going to be the same (because the list of milkshake flavors is going to be updated regularly and the display of them is dynamic as well). So, I can have it kick out 4 columns no problem and the width of these columns is based on the longest name in that column (which is what I want, so everything is OK there). The problem is that I want these 4 columns to be grouped together and centered on the page. I got it working in Firefox by making a container div and giving it a {display: table} value... works perfectly. However, that's not the case in IE. In IE, the container div is the width of the entire page and the columns are all left-aligned. Here's the page in question and my code is below. Any help is greatly appreciated. Thanks! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<style type="text/css">
.mcontainer {
border: 2px solid black;
display: table;
margin: 0 auto;
}
.mcol {
border: 1px solid blue;
float: left;
padding: 0 5px;
font-size: .75em;
text-align: center;
font-family: "trebuchet ms", verdana, helvetica, arial, sans-serif;
}
.emptyspacer {
clear: both;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="mcontainer">
<div class="emptyspacer"></div>
<div class="mcol">
Almond<br>
Almond Joy<br>
Amaretto<br>
Apple<br>
Apple Pie<br>
Banana<br>
Banana Pineapple<br>
Banana Split<br>
Black & White<br>
Blackberry<br>
Blueberry<br>
Butterfinger<br>
Butterscotch<br>
California Blend<br>
Caramel<br>
<strike>Caramel Apple</strike><br>
Caribbean Rum<br>
Cheesecake<br>
Cherry<br>
Chocolate<br>
Chocolate Banana Peanut Butter<br>
</div>
<div class="mcol">
Chocolate Cherry<br>
Chocolate Covered Banana<br>
Chocolate Mint<br>
Chocolate Raspberry<br>
Cinnamon<br>
Coconut<br>
Coffee<br>
Cookie Dough<br>
Creamsicle<br>
Creme De Menthe<br>
Double Chocolate<br>
Egg Nog<br>
Grape<br>
Grapefruit<br>
Hazelnut<br>
Heath Bar<br>
Irish Cream<br>
Island Breeze<br>
Key Lime<br>
Kiwi<br>
Kiwi Strawberry<br>
</div>
<div class="mcol">
M&M<br>
Macadamia Nut<br>
Mango<br>
Mango Kiwi<br>
Mango Peach<br>
Maple Walnut<br>
Mocha<br>
Mounds<br>
<strike>Mud Pie</strike><br>
Neapolitan<br>
Nerds<br>
Orange Pineapple<br>
Oreo<br>
<strike>Oreo Green Mint</strike><br>
Peach<br>
Peanut Butter<br>
Peanut Butter & Jelly<br>
Peanut Butter Cup<br>
Pear<br>
Peppermint<br>
<strike>Peppermint Oreo</strike><br>
</div>
<div class="mcol">
Pina Colada<br>
Pineapple<br>
Pistachio<br>
Raspberry<br>
<strike>Raspberry Cheesecake</strike><br>
Reese's Pieces<br>
Root Beer<br>
Rum<br>
<strike>S'mores</strike><br>
Snickers<br>
Strawberry<br>
Strawberry Banana<br>
Strawberry Orange<br>
Swiss Chocolate<br>
Three Musketeers<br>
Toffee<br>
Vanilla<br>
Watermelon<br>
</div>
<div class="emptyspacer"></div>
</div>
</body>
</html>
I have seen this done but can't find any examples at the moment, but what I am looking to emmulate is have a page that required vertical scrolling. On either the left or right hand side is (for example) a square image and directly below it is a menu. When the user scrolls down the page the image goes off the top but the menu sticks to the top so is always visable. When the user scrolls back up as soon as the image starts to appear it pushes the menu back down so it is sat below the image. If i used position:fixed I can keep the menu in the same place when scrolling but I would like it to rise to the top of the browser when space is availble when scrolling. Make sense? Hi everyone! i have this mockup in fireworks for my personal site.. problem is... i cant put it together the way i like it using CSS here is my mockup and the slices ive made... http://www[dot]phpugph[dot]com/talk/index.php?action=dlattach;topic=8005.0;attach=1720;image im sorry for the link... i cant seem to post a proper one do u guys know how i should go about it? the middle column should be fixed width but the right and left column should be fluid thanx I really need a code. It is for a Multiple Fixed Floating Images at specific margins Fixed is very important. AKA. Scrolls with page. margins are img1 - left: 40px top: 40px img2 - left 56px top: 300px; Thank You Very Much. -Please Help! --nick11682 Hi, this is my first post. I have a problem with the navigation bar on a site that I'm developing (musicboxtheatre.com). It renders properly in firefox and safari, but, of course, IE is causing problems. It renders as steps. The tabs are dropping vertically so that their tops are aligning with the bottom of the previous tabs line-height. Does anyone know of a solution? Update: I rewrote everything, and it somehow works now. Nevermind. I cant get the side menu (colored in red at the moment...will eventually be white like the rest) to overflow: auto with 100% height....i know that you need a fixed with for overflow and the only solution i could find (havent tried it tho) was to use javascript to get the window dimensions but i am trying to avoid using javascript. heres the code: <b>The Page:</b> Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>
TEST PAGE
</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<link rel="stylesheet" type="text/css" href="stylesheets/default.css">
</head>
<body>
<div id="content">
<div id="logo">
<img src="/Images/owlstreelogo.jpg" height="100px" width="300px" alt="Welcome to Owl's Tree">
</div>
<div id="quicknav" style="height: 25px; background-image: url('/Images/quicknavbackdrop.jpg');">
<div id="quicknavtext" style="position: relative; top: 4px; margin-left: 25px; font-weight: bold; text-align: center;">
<a href="index.html">Home</a>
<a href="">Profiles</a>
<a href="">Chat</a>
<a href="">Forums</a>
<a href="">Messages</a>
<a href="">Extras</a>
<a href="">Tickets</a>
<a href="">Suggestions</a>
</div>
</div>
<div id="sidemenu" style="height: 405px; width: 200px; background-color: #FF0000; overflow: auto;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
</body>
</html>
<b>The CSS</b> Code:
body {
background-image: url('/Images/grassbackdrop.jpg');
}
a:link {
color: #7E5C14;
text-decoration: none;
}
a:visited {
color: #7E5C14;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #00FF00;
text-decoration: underline overline;
}
div#content {
height: 100%;
width: 100%;
background-color: #FFFFFF;
}
I know that most of the css is in the page and not the external css but thats because i was modifying it heavily to see what would work and what wouldnt. The problem is the fixed width on the side menu as it wont be consistent across different screen resolutions. any help would be much appreciated as i dont want to continue work on this page until i can figure this problem out. I having a bit of a problem with my div tags. I have set a table inside the divs to a fixed width of 300px and the same with the div tag. But if I was to insert text into the table such as: 11111111111111111111111111111111111111111111111111111111111111111111 this makes the table and div tag expand to fit the text on one line. Making is disappear off the page so people have to scroll to view the text. I have tried the CSS command of "table-layout:fixed;" but this just makes the table end and cut of the end of the text. Is there anyway round this?? Pretty much what the title says, is it possible to center a div in the middle of the screen without giving it a fixed width? I have two div tags that I want to float next to each other. The page looks like this <table>These Tables stretch 100% of the width</table> <table>''</table> <div class="ParentDiv"> <div class="menuholder"></div> <div class="ChildDiv"></div></div> in FF everything works the way I want to. In IE if I shrink down the browser then the second div tag drops below the first. I want to change this so that it does not drop below but remains in the same place. Is there anything I can set to do that? If I remove the float and change the position on the menuholder the childdiv tag does not drop but the menuHolder content does not stretch the size of the parentDiv and gets chopped off at the height of the childDiv Code:
.ParentDiv {
position: relative;
width: 100%;
width:expression(document.body.clientWidth < 997 ? '997px' : '100%');
min-width:997px;
max-width:100%;
overflow:hidden;
min-height: 400px;
}
.ChildDiv {
position: relative;
width: 100%;
min-height: 400px;
}
.menuholder {
background-color: #EFF3F5;
color: #eef;
position: relative;
float: left;
left: 0px;
top: 0px;
overflow: hidden;
width: 160px;
z-index: 100;
}
this should be simple, but im just not finding my answer. im trying to figure out how to evenly spread several links across a fixed width. i could manually set the padding or margins for each link, but i figure there has to be a way to do it in css automagically. I'm looking for a nice cross browser (well, actually I mainly interested in IE8 and ff3) 3 column layout with header and footer where the middle column has a fixed width and the left and right are variable width. I like these: http://matthewjamestaylor.com/blog/perfect-3-column.htm But none have a fixed width center column (could they be modified for a fixed width center col?) Any suggestions? |
|||||||