|
CSS - Aligning Against The Edge
How would I prefectly fit a table or div against the edge of a browser without any white space?
I've tried setting the margin border to 0px without any success. Similar TutorialsIm think to accomplish a rounded edge I could create an image and then create a small td for it with all borders set to 0 so it would fit the rest of the black thin border on the table. However is there a better way to accomplish this effect? I was thinking maybe float? I can't believe I need to ask this simple task but I am stuck. I have a container on top of screen for a horizontal menu on far right and text on far left. I use float right for text links on right and just display text on left no problems I thought. The links on the right go flush in top-right hand corner and I use margin-top to bring them down a bit. I can't move the links in from the far-right edge as it is flush againt it. I use margin-right/left to no effect. q) when using float right I want a space between the edge of right screen ? Hello, I have a page that has one big table covering all areas. The problem is that there is a tiny white gap between edges of the table and the edge of the page. How do I eliminate this? Thanks, Jeff I would like the content table on the website to stretch as to the edges of whatever space it is taking up. But when I view the page, the table doesn't stretch vertically down until it hits the bottom edge. Any ideas? PHP Code: .content { height: 100%; width: 100%; } Hi all, For some reason, my site (http://www.emineer.com) cuts off a bit when viewed on an iPhone. Here's a screen-capture to show what I mean: You can see that the right edge of the top blue background is getting cut off (it should stretch to the edge of the screen). It even happens on inner pages: As you can see, the right side of my site is cut off a bit. I have width set to 100%, so I'm not sure why this happens. It's not my phone because other sites work just fine. Any reason for this? Greetings, I have the following in a style sheet: Code:
.nameColumn {
width: 200px;
}
.groupColumn {
width: 100px;
}
.statusColumn {
width: 682px;
}
In the body of the page, I have table rows like this: Code: <tr> <td class=nameColumn>foo</td> <td class=groupColumn>bar</td> <td class=statusColumn>foobar</td> </tr> Even though I have declared widths, they show up differently on Windows IE7 than on Mac Safari. In IE, the "statusColumn" column falls short of the right edge of the window. Is there a way, with the width property, to make the rightmost column automatically stretch to the right edge of the browser window? If I use width:auto, it makes the cell only as wide as the text it contains. Thanks!! DM I have been trying to figure out how to achieve this layout with css for about an hour. I'm sure it is something very simple that I am missing. Can anyone help? It looks like the image at the address below. tophermorrison.com/css_layout.jpg I have 3 divs 1.banner (100px tall 100% wide) 2.content (100% tall 650px wide) 3.image (100px x100px) I want the image to stay relative with the content and the content to be centered. The image should be 0 from the top and centered over the right edge of the content. Is this possible? hello genius people... please help this designer move more toward css after years of tables and images... I have a prob with ie 5 and 6 [not sure on 7] showing the content of a scrolling div outside of a containing frame. http://jodihelmer.com/portfolio.html and http://jodihelmer.com/journal.html the content in the scrolling frame shows up outside of the centered content. one possible fix I came up with is to increase the size of the divs at the edge and give them a background color. this seems to work. but, I also need to hide the content to thetop and left of the frame as well. is there a way to keep these divs within the centered wrapper while allowing them to expand to go to the edge of the browser window's relative size? or is there a better way to do this altogether? thanks so much. s 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 Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}
After browsing through w3schools and learning most of what css has to offer I for some reason can't figure out a way to align items using css. I was just wondering if someone could help me with the correct tag. Hi I have an issue aligning some links. i have it perfect in FF but it is not the same in IE. http://www.sun-awnings-direct.co.uk/the-carino-p-29.html It is the white breadcruumb trail in question. Can anyone advise what IE is doing differently and how I can solve it? Thanks a lot www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please. CSS LINK http://www.devwebsites.com/estilos.css Hi everyone, I am having trouble aligning my content to the edge of the table somehow it shows 20pixels down and I cann't figuere out how to bring it up. Any help will be greatly appreciate. thanks Code:
<style>
ul { list-style-type: none; margin: 1.0em 0 0 0px; padding: 0; position:relative; overflow: visible; height: auto; text-decoration: none; color: #33FF00;}
ul li { text-decoration: none; width: 230px; color: #000; }
ul li a, ul li a:visited {height: 1.2em; width: 200px; display: block; text-decoration: none; background: blue; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px; color: #000;}
ul li a:hover { height: 1.2em; display: block; background-color:#FF0000; color: #fff000;}
ul li a.currentpage, ul li { height: 1.2em; text-decoration: none; background: #00ffff; padding: 3px; color: #fff;}
</style>
<table width="234" border="1">
<tr>
<td width="230" height="85">
<ul><li><a href="">HOME</a></li>
<li><a href="">LINK TWO</a></li>
</ul>
</td>
</tr>
<tr><td></td></tr>
</table>
hey im having a problem with my div aligning in my css. I want the whole site to be centered but start on the top of the page. I can either set all my margins and padding to 0 and get it top left or I can center it in the middle of the screen but theres a giant gap from the top of the screen and where the site actually starts.. any suggestions on how to align it with the top but still keep it centered? Thanks http://206.169.23.2/index3.htm http://206.169.23.2/style3.css The two columns are as far apart from each other as they can be. I want them to centered, and next to each other. How can this be done? I used float:right; and float:left for starters but I can not get the columns any closer to each other. Any help is greatly appreciated, - mike Hi guys, I'm having some serious problems in IE with my site I'm working on here http://www.q-net.net.au/~benvangrootel/fvd/index.html the main problem is the amount of space in between the head banner and the content underneath and also the links under the images on the right - they aren't aligned properly compared to how they look in mozilla. I have no idea how to fix this, is there any quick fix? css is here Code: /* Layout Crap */
body {
text-align:center;
background-image: url(bg.jpg);
background-repeat: repeat-x;
}
#frame {
width:697px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
background-image: url(left_bg.gif);
background-repeat: repeat-y;
}
#contentleft {
width:175px;
padding:0px;
float:left;
background:#fff;
}
#contentcenter {
width:550px;
padding:0px;
float:left;
background-image: url(left_bg.gif);
background-repeat: repeat-y;
}
#contentright {
width:147px;
padding:0px;
float:left;
background-image: url(right_bg.gif);
background-repeat: repeat-y;
}
#contentright_container {
margin-left: 19px;
margin-top: 70px;
}
#contentright_container_nodule {
font-family: arial;
margin-bottom: 10px;
margin-left: 3px;
}
#contentright_container_nodule li{
list-style-type: square;
color: #EDAE00;
line-height: 12px;
margin-left: 14px;
}
#contentright_container_nodule a{
color: #2A2A2A;
font-size: 8pt;
padding-right: 30px;
}
#contentright_container_nodule a:hover{
color: #EDAE00;
font-size: 8pt;
}
#contentheader {
width: 697px;
height: 74px;
background-image: url(head_bg.gif);
background-repeat: no-repeat;
}
#contentheader img {
top: 10px;
left: 74px;
position: relative;
}
#contentcontainercontainerlol {
top: 100px;
left: 12px;
position: relative;
}
#contentcontainer {
background-image: url(content_container_bg.jpg);
background-repeat: no-repeat;
}
#contentcontainer h1 {
color: #EDAE00;
font-family: arial;
font-size: 17px;
padding-top: 17px;
margin-left: 15px;
margin-bottom: -8px;
}
#contentcontainer p {
color: #afafaf;
font-family: arial;
font-size: 13px;
padding-left: 20px;
padding-right: 26px;
line-height: 20px;
}
#footer {
position: relative;
margin: 0;
padding: 0;
clear: both;
background: url(footer.gif) no-repeat top left;
background-repeat: no-repeat;
width: 697px;
height: 35px;
text-align:center;
font-size: 7pt;
font-family: arial;
color: #CFCFCF;
}
#footer a {
color: #CFCFCF;
}
/* Menu Crap */
#navContainer {
top: 37px;
right: 60px;
position: relative;
}
#nav {
width: 409px;
height: 20px;
background: url(image.jpg);
margin: 10px auto; padding: 0;
position: relative;
}
#nav li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
#nav li, #nav a {height: 20px; display: block;}
#home {left: 0; width: 44px;}
#profile {left: 45px; width: 61px;}
#operations {left: 105px; width: 87px;}
#services {left: 192px; width: 68px;}
#customers {left: 260px; width: 85px;}
#contact {left: 345px; width: 72px;}
#home a:hover {background: transparent url(image.jpg) 0 -20px no-repeat;}
#profile a:hover {background: transparent url(image.jpg) -44px -20px no-repeat;}
#operations a:hover {background: transparent url(image.jpg) -105px -20px no-repeat;}
#services a:hover {background: transparent url(image.jpg) -192px -20px no-repeat;}
#customers a:hover {background: transparent url(image.jpg) -260px -20px no-repeat;}
#contact a:hover {background: transparent url(image.jpg) -345px -20px no-repeat;}
thanks in advance HI there I am wondering if anyone can help with a css issue I am strugging to resolve. The url is simplyroomsandsuites co uk (forward slash) blog You can see where the footer image is floating left.. I have tried to float it centrally but it disappears. Thanks for any help. .footerArea {float: left; display: inline; width: 950px; background: url(/images/main_area_bottom_curve.png) top left no-repeat; padding: 30px 0 20px 0;} The site is located at: http://68.41.210.39:8081/empcoBeta/index.html Why is it that the site displays fine in safari, netscape, mozilla/firefox etc, but is totally screwed in windowze IE? The css is as follows: #under { width:84%; height:1%; background-color:#1E77D3; position:absolute; top:5%; left:16%; } #mainleft { width:35%; background-color:white; vertical-align:top; position:absolute; top:10%; left:22% } #mainright { width:40%; background-color:white; vertical-align:top; position:absolute; top:10%; right:2% } body { font-family: sans-serif; font-size: 12px; } .indented1 { padding-left: 5pt; padding-right: 5pt; font-size: 12px; font-family: sans-serif; } .indented2 { padding-left: 10pt; padding-right: 5pt; font-size: 12px; font-family: sans-serif; } a:link {color: #17507e; font-size: 2; text-decoration: none; } a:active {color: blue; font-size: 2; text-decoration: none;} a:visited {color: #17507e; font-size: 2; text-decoration: none;} a:hover {color: blue; font-size: 4; font-weight: bold; text-decoration: none;} #column { width:1%; height:81%; background-color:#B4CCEB; position:absolute; top:0%; left:15%; } #leftsidebar1 { width:100%; height:5%; background-color:#B4CCEB; position:absolute; top:0%; left:0%; } #leftbar1 { width:15%; height:40%; background-color:#CEDFFF; position:absolute; top:5%; left:0%; } #leftsidebar2 { width:16%; height:2%; background-color:#B4CCEB; position:absolute; top:40%; left:0%; } #leftbar2 { width:15%; height:40%; background-color:#CEDFFF; position:absolute; top:41%; left:0%; } #leftsidebar3 { width:16%; height:1%; background-color:#B4CCEB; position:absolute; top:81%; left:0%; } #credits { position: absolute; left:1%; bottom:20%; } .tcredits { text-align: left; font-size: 9px; font-family: sans-serif; } http://s125392025.websitehome.co.uk/layout.html I'm making a layout, in this layout(as you can see), I have a SubNav and a main body part. Both of those sections, have a header image and a footer image. Well, my body footer image isn't aligning directly with the main body. It's off by about 1 or 2px. I tried using: position:absolute; With a few different types of top, and bottom, but the picture only dissappears. I used the exact same line code for the footer image for the subnav, and it has aligned just fine. Here's the script if it matters. Could anyone help please? PHP Code: <!DOCTYPE html PUBLIC> <html> <head> <title>2 Box Layout Test</title> <style type="text/css" media="screen"> /* Here is the main CSS */ body { background: #FFFFFF; } div { background: #FFFFFF; } h5 { text-align:center; } #mid, #left { top:120px; } #midcontainer { width:400px; margin:0 auto; position:relative; left:35px; top:44px; } #midheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head400.jpg) top left no-repeat;height:30px;z-index:-1; } #midfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot400.jpg) top left no-repeat; height:30px; } #leftheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head200.jpg) top left no-repeat;height:30px; } #leftfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot200.jpg) top left no-repeat;height:30px; } #midbody, #topbody, #leftbody { border:1px solid black;background: #a3a3a3; } p.top1 { text-align:center; } p.midheadtxt { font-weight:bold; text-align:center; position: absolute; top:-5px; left:180px; } p.leftheadtxt { font-weight:bold; text-align:center; position: absolute; top:-5px; left:50px; } #leftcontainer { width:200px; position:absolute; left:5px; top:150px; } </style> </head> <body> <!--This is the main site header properties--> <div id="top"> <div id="topbody"> <h5>Main Site Header</h5> <p class="top1">This is where the main image, and TopNav will go.</p> </div> </div> <!--This is where the main body text goes for the page--> <div id="mid"> <div id="midcontainer"> <div id="midheader"> <p class="midheadtxt">News</p> </div> <div id="midbody"> <h5>Middle</h5> <p>This is where the main section of the site is located.</p> </div> <div id="midfoot"> </div> </div> </div> <!--This is the subnav area--> <div id="left"> <div id="leftcontainer"> <div id="leftheader"> <p class="leftheadtxt">Sub-Navigation</p> </div> <div id="leftbody"> <p>This is where the subnav is located.</p> </div> <div id="leftfoot"> </div> </div> </div> </body> </html> |
|||||||