|
CSS - Percentage Widths And Pixel Width Borders...
I'm wondering if it's possible to combine fixed pixel width borders and percentage width?
I know I can do this... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.div1
{
float: left;
width: 50%;
background: green;
}
.div2
{
float: left;
width: 48%;
background: red;
padding: 1%;
}
</style>
</HEAD>
<BODY>
<div class='div1'>
test
</div>
<div class='div2'>
test
</div>
</BODY>
</HTML>
But what I'd like to be able to do is specify a padding of 10px on div2 without breaking the layout. Is this possible with the w3c box model? Similar TutorialsHi, I'm trying to do a two column layout which spans across the whole screen. This would be easy if I was just using percentages because I could just go: Left: width:20%; Right: width:80%; But I need the left bar to be a fixed width and the right bar to span the rest of the screen. There might be something really simple here that I'm overlooking but at the minute I can't think of how I would do it... Joe I have a left div which is fixed let is say 400px and the right div should extend to the edge of the screen. How can i get it to extend. If i don't give any width to the right div: The right div has other dives which has got dotted bottom border, these dotted border will not extend to the end any ideas? cheers I'm trying to create a header bar with some navigational links. The basic idea is that I have a little banner image about 400 pixels wide on the left. To the right of it, I have 5 navigational links listed horizontally. I want them to be evenly spaced across the rest of the page, regardless of its width. I could do this with percentages if I had them in a parent element equal to the width of the page minus the width of the image to the left. So basically, I know this isn't actual CSS syntax, but I'm looking for the functional equivalent of saying: #linkContainer{width:100%-400px;} Anybody know a good way to do something like this? This would be easy with a table, but I'm trying to stick to CSS for layout and tables only for tabular data. I hope I can explain this in a way that makes sense. I have a table layout where the number of columns is variable (sometimes it can have 1 column, sometimes it can have up to 9 columns), depending on what data is filled out on a previous form. The code in question: Code: <tr> <td> <div style="float: left; width: 13px"><img src="arrow.gif"></div> <div style="float: left; width: 93%;">My explanatory text goes here!</div> </td> <td> Column 2 Text </td> <td> Column 3 Text (and so on) </td> </tr> The two divs there need to float next to each other -- the first div is a little 13x13 arrow, the second div is some explanatory text. I can not just float the image left (and not put the text in a div), because the client wants the text to be left aligned in the div, not wrapping around the image. The issue: If there are less than 5 or 6 columns, it works beautifully. If you put more columns in there, then the second div appears below the first div. I've been fiddling with the widths on the second div, but it has to be a percentage (not a set number of pixels), because the number of columns is variable (as is the width of those columns). How can I make the columns float next to each other regardless of the width of the table cell that they are within? Any help is appreciated. i want to tell an iframe to fill 100% width, but have a border of 1px this will cause horizontal scrolling since the width property does not include the border in its calculation. how can i do this? Check out the below test page... In FF, i get a left margin of 5px, and a right margin of 10px as expected, but in IE6 i get a left margin of 10px, and a right margin of 20px. Anyone know why? If I absolute position with left:10px, and right:10px on the relevant boxes they are positioned correctly in IE6, so why don't the margins work? (Can't use absolute positioning as i require flow layout in my real-life page) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TEST</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#leftnav{
width: 20%;
float: left;
clear: left;
margin-left: 5px;
border: solid 1px #000000;
}
#main{
width:76%;
float: right;
clear: right;
margin-right: 10px;
border: solid 1px #000000;
}
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF">
<div id="leftnav">
some text some text<br>
some text some text
</div>
<div id="main">
<p>some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text </p>
</div>
</body>
</html>
I've made this layout: http://superq.dk/skjoldborg It works fine in Firefox, but IE somehow has moved the content one pixel to the left. This shows to the right at the menu, where there is one pixel whitespace, and at the end of the text, to the right, the white content box moves one pixel out in the shadows. Can someone give me an explanation on this? I've checked it all over, sizes on divs and so one, and I've come to the conclusion that IE has moved the content one pixel to the left, but why? Hello, I am trying to create a 1 pixel width <tr width="1" style="width: 1px;"><td rowspan="8" width="1" style="width: 1px;"> </td></tr> and a 1 pixel height <tr height="1" style="height: 1px;"><td colspan="8" height="1" style="height: 1px;"> </td></tr> But the following methods are not working, instead it is making them bigger than expected. How can I accomplish this?? Is there some sort of clear method in CSS that will clear the height and width and make sure to set it to 1 pixel?? Thanks OK, so I know what the problem is, but I can't figure out how to fix it. This is what I'm doing. I've got a floated div (left) and another div sitting to it's right. I'm using Nifty Corners to get that nice rounded finish (without using four images). But, here's the problem, the JavaScript is designed (I guess) to only cap the size of the div defined in the css file, so when IE 6.0 generously adds an extra 3px, what am I supposed to do? Ask Google. So, I found the Holly Hack at Position Is Everything but haven't been able to implement it correctly. I've been tinkering with this new layout for about a fortnight, but with no luck. I seek enlightenment, if there is anyone with the wisdom . . . ? Files included a another 1 = html nifty = JScript all = css This page design works in: Mac - Safari 2.0.1, Opera 8.5, Firefox 1.0.7 Win - Firefox 1.5, Opera 8.51 The JavaScript doesn't work at all in Internet Explorer 5.2 for Mac, but degrades the way I think it should. And back to Windows, IE 6.0, the "3px jog" is the only problem. All help appreciated. Hello, I am developing a site for a client and originally I had the template stretching 100% height in the browser which worked for both IE and FF. The problem now is that I have integrated a shopping cart into the template and because of the system of the cart, it breaks the 100% rule of height. So now I have began to use the idea of creating a -y tiling centered bg image. The problem is that when I align the image to meet the edges of the template, the alignment is different between IE and FF by 1 pixel!!! Its so frustrating! Has anyone run across this issue before? I ran a quick search for this in google but didnt find anything helpful, only things with regular images. If anyone has a solution for this, it would be great! Thanks! Rproctor The site http://glish.com/css/7.asp is showing me how to make tabls in css. I get it but their example which has a workour I don't get doesn;t work either.... look at the top right corner. I'm trying to learn but how can you with erroneous code? The code is all exposed on their page in the scroll down bit down the page a bit. Hey-- Working on a new site, I've got 99.9% of it finished and working, but a menu is displaying one pixel higher in Safari (Mac and PC) than any other browser. www.inkyfever.com/customer/animotion/ The menu is in the orange bar at the top. It's created with an unordered list. You can view source to check the code. HELP! EDIT: Okay, I've got it to mostly work by changing some padding, but hovering over any other orange links, the hover color doesn't quite fill the space vertially. ONE pixel short at the bottom. Ideas? :grimey I know this should probably be turend into pure css but for now I'm stuck with tables i have the following table structure Code: <table class="subitemtable"> <tr> <td class="subItem"> <a href="blah"> blah </a> </td> </tr> <tr> <td class="subItemOn"> <a href="blah"> blah </a> </td> </tr> <tr> <td class="subItem"> <a href="blah"> blah </a> </td> </tr> </table> using the following css styles Code:
.subItemTable{
width:100%;
border-collapse: collapse;
margin:0px;
padding:0px;
}
.subItem{
margin:0px;
border-bottom: 1px solid #0E59AE;
border-right: 1px solid #0E59AE;
background-color:#e8e8e8;
padding: 3px 0px 3px 20px;
width:100%;
}
.subItem a{
font-size: 9.5pt;
color: #666666;
}
.subItem a:link,.subItem a:visited{
text-decoration:none;
}
.subItem a:hover{
text-decoration:underline;
}
.subItemOn{
margin:0px;
border-right: 1px solid #fff;
border-bottom: 1px solid #0E59AE;
background-color:#ffffff;
padding: 3px 0px 3px 20px;
width:100%;
}
.subItemOn a{
font-size: 9.5pt;
color: #666666;
}
.subItemOn a:link,.subItemOn a:visited{
text-decoration:none;
}
.subItemOn a:hover{
text-decoration:underline;
}
my problem is after the first cell the bottom right most pixel of the border is just missing. This happens in firefox and IE ..The attached picture should show what I'm talking about. Thanks for your help For some reason beyond me, my site displays perfectly in firefox, and opera. the width of the wrap which is supposed to be 1068 (I think off memory..) and in browsers such as chrome, ie8, and safari the wrap takes up the entire length of the screenn instead of that 1068. I tried zooming out to see if it was that issue and its not. My code is valid html/css and its not just some IE bug. Any help would be appreciated. www.devwebsites.com Thanks. I am having trouble trying to get the divs following my first left hand menu to all stay the same width but it is not working. When I set the first div width which contains the Javascript menu on the left, I cannot set the following div (which is going to contain CSS highlighted links) to go to 20% width so it is the same as the first div with the menu in it. here is the link to my page so you can see what I mean. http://kevinobrien.ca this is what I have in the style sheet so far for that side. If I add the width to div#sidebar2 it does not stretch that part but rather narrows it and messes it up div#sidebar {display: block; position: absolute; top: 5.4em; left: .4em; width: 20%; padding: 0; margin-left: .5em; border: 1px solid #335; margin-top: 2em;} div#sidebar2 {position: absolute; border: 1px solid #335; margin-top: 1em;} any help with this is greatly appreciated K.O. q)When creating webpages with css , are you supposed to use pixels or % for page widths? If I use pixels then i create for a 800X600 screen only, but it won't look messy when screen resized which I prefer. Hi there, I am back with another browser issue with css. When I set the position from the top on the center logo it shows correctly at top: 15px in IE but not in Navigator. To make it ok in Navigator I have to put it at 17px and then its off in IE. I would love some help as i have a similar problem occuring in another site which I have also been trying to solve. Here is the link: http://www.paintyourplace.com/emerald/ Here is the CSS: body{ font-family: verdana, helvetica, arial, sans-serif; margin: 0px 0px 0px 0px; padding: 0px; font-size:12px; color: black; background-color: #FFFFFF; scrollbar-arrow-color:#003366; scrollbar-face-color:#0C5331; scrollbar-shadow-color: #9FB304; scrollbar-highlight-color: #FFFFFF; scrollbar-track-color: #CCCCCC; } #menuList { margin: 0px; padding: 0px; } #menuList ul { margin: 0px; padding: 0px; } #menuList li { display: inline; list-style: none; } a.actuator { background-color: transparent; color: #000; font-size: 12px; margin: 0px; padding: 3px 6px; text-decoration: none; } a.actuator:hover { color: #990000; } .menu { color: #000; background-color: #EEE; border: 1px solid #CCC; position: absolute; visibility: hidden; } .menu li a { background-color: #EEE; color: #000; display: block; font-size: 12px; line-height: 1.75em; margin: 0px; padding: 0px 10px; text-decoration: none; } .menu li a:hover { background-color: #0C5331; color: #EEE; } span.key { text-decoration: underline; } #homeMenu { width: 120px; } #aboutMenu { width: 120px; } #productsMenu { width: 120px; } #careersMenu { width: 120px; } #customerMenu { width: 120px; } #healthcareMenu { width: 120px; } #contactMenu { width: 120px; } a{ color:#990000; font-weight:normal; text-decoration:none; } a:visited{ color:#005940 } a:hover{ color:#990000; text-decoration:underline; } #mainMenu { text-align: center; color: #000; margin: 0px; padding: 0px 0px 2px 20px; } DIV.jill_toplogo{ align: left; } DIV.jill_leftgreen{ top: 75px; background-color: #0C5331; height: 95px; position:absolute; width: 50%; } DIV.jill_rightblue{ left: 50%; top: 75px; background-color: #254E7C; height: 95px; position:absolute; width: 50%; } DIV.jill_centered_logo{ position:relative; text-align: center; top: 15px; } DIV.jill_greyback{ padding-top: 112px; background-color: #E1E5E0; position: absolute; top: 60px; width: 100%; text-align: center; font-size: 12px; } DIV.mainBox { position: absolute; top: 230px; font-family: verdana, helvetica, arial, sans-serif; font-size:12px; left: 57px; width: 80%; } #bottomText{ padding: 0px; margin-top: 20px; margin-bottom: 10px; margin-right: 20%; margin-left: 20%; background: none; border: none; border-top: none; text-align:center; font-family: verdana, arial, helvetica, sans-serif; font-size: 10px; color: #ccc; } THANKS!!!! I searched the forum before posting but didn't find anything. This is a fairly straight-forward problem, but it's one that I can't find a solution to. The site I'm working on is centered in the window. The body has a 3600x1 pixel background image repeating vertically that is also centered in the window. The layout of the site depends on this background being in the right place. In every browser I've tested so far, the site layout lines up perfectly with the background image, and all is good. But in Firefox 1.5 and Firefox 2.0 (both on Mac), the centered container div sits one pixel to the right of where it should be. Is this a known bug with Firefox? I'm including the code for the body tag and the container div, even though a quick glance will show that it's pretty standard stuff: Code: body {
font: 12px/1.5 "Lucida Grande", Helvetica, Arial, sans-serif;
color: #363636;
background: url(body_bg.gif) top center repeat-y white;
text-align: center;
}
#container {
margin: 0 auto;
width: 720px;
text-align: left;
}
Any help at all would be terrific. Thanks. Note: I changed the title of this post in the hopes someone will help me. Hey all. I'm just starting out in web design. To make things even more complicated, I'm using CSS for my first ever website. So I'm building this website from scratch, using online tutorials and such. But I'm running into a problem. On a PC, everything displays perfectly in IE and Firefox. But on a Mac, the nav bar is stretched with dead space after the last list item. This is the same in Safari, Firefox, and IE for Mac. Would you guys give it a look and maybe help me around the issue? What I'd like is no dead space after the last list item on any computer, (if you're looking on a PC, it appears correct) and I want a fixed width. Site CSS Thanks. Edit: Link removed... All the pages are the same... Whenever the column on the left ends, the text moves left a few pixels. Anyone know how to prevent this from happening? Thanks in advance! |
|||||||