|
CSS - To Much Space With Verticle Buttons
I have buttons aligned vertically, but there is to much space.
Here's the site so far: http://www.caillouette.com/EoLtest/ How do I fix this? thanks -Sean Similar TutorialsHi all, I have a test page he test page and here is the code: Code: <body><p> style="background-image: url(redSqr.jpg); background-repeat: no-repeat; background-position: 12px; </p> <!-- BEGIN BUSCTR MENU --> <div id="divMenuMain" style="position: absolute; top: 0px; left: 0px; background-color: #a07e33; z-index: 1; width: 658px; height: 147px;"> <div id="divMenuBoarder" style="position: relative; left: 5px; top: 22px; background-color: white; z-index: 2; width: 648px; height: 120px;"> <div id="firstCell" style="background-image: url(bc.jpg); background-repeat: no-repeat; background-position: 0px 0px; width: 70px; height: 120px; overflow: hidden;"> <span id="bcSpan" style="vertical-align: middle; width: 60px;">TwoWord Texts</span> </div> </div> </div> </body> The problem is he Code: <div id="firstCell" style="background-image: url(bc.jpg); background-repeat: no-repeat; background-position: 0px 0px; width: 70px; height: 120px; overflow: hidden;"> <span id="bcSpan" style="vertical-align: middle; width: 60px;">TwoWord Texts</span> </div> What I am trying to do is get a span to be aligned in the center of my div, so I called vertical-align: middle. I don't think this will work because the parent has to by anonymous for this to work, as I found out he "The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists." The question is, how can I have a span(or anything, whatever) align vertically center to a div? Thanks for your help, I hope this wasn't too long, CJB Helllo all: I am having difficulty getting a navigation list to display as separate boxes. I get one large box with all the clickable links therein. I want one box with each link place on it. Here is my HTML code for the list: <ul id="nav"> <li><a href="hey therel">flight1</a></li> <li><a href=" Eaglesoft">Eaglesoft</a></li> <li><a href="state police"">State Police</a></li> </ul> Here is the associated style rule:#nav{font-family:arial;border-styleutset; padding:10px;list-style-type:none; color:#000066;position:absolute;top:2.5in;left:9in; background-color:#ffff00;width:2.7in;text-align:center;display:block;} Can anyone tell me why this list is being parked in one box rather that three separate boxes. The name of my text editor is CoffeeCup. Please understand that I realize that the above html coding does not creat a link..this forum blocked my links..thanks ok, ive had a look on the internet (google) and in this forum, and have been upable to come up with a decent example of a mutli tier drop down menu where the sub menu also has a menu Currently I am using this code, http://www.alistapart.com/articles/dropdowns/ PHP Code: echo " <ul id=\"nav\"> <li><a href=\"#\" class=\"bodytext\">Clients</a> <ul> <li><a href=\"http://www.commusoft.co.uk/eheating/forms/addclientcard.php\" class=\"bodytext\">New Customer</a></li> <li><a href=\"http://www.commusoft.co.uk/eheating/forms/addagents.php\" class=\"bodytext\">New Agent</a></li> <li><a href=\"http://www.commusoft.co.uk/eheating/postcodecheck.php\" class=\"bodytext\">Postcode Check</a></li> </ul> </li> </ul>"; this is the javascrip to make it work with IE Code:
<script language="JavaScript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace (" over", "");
}
}
}
}
}
window.onload=startList;
</script>
Code:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
height: 18px;
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
line-height: 16px;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
float: left;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border-right: 1px solid #ccc;
border-bottom: 0;
height: 1%;
}
li hover ul, li.over ul {
display: block;
}
This is a single tier drop down menu were there are titles and a sub - menu. I was hopeing someone would point me in the direction, or show me where to begin if I want to turn this code into a multi tier drop down menu. Also, if anyone else has used this why does a gap appear between each menu option when hovering over? Any help would not only help me but will supply a decent example for others.. Thanks My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons. If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons. Here is the site: http:// bradleyrose . net / WaterStreetRestaurant I've been trying to get all the space out of IE, tried line-height and all of that, and nothing. Any hack to take out all of the space gaps so I can later on put some small margin? Thanks in advance In the following code...why is there a space between the two div's?? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style>
#header { background-color: cadetblue; }
#footer { background: blue; }
</style>
</head>
<body>
<div id="header">
<p>This is my header.</p>
</div>
<div id="footer">
<p>This is my footer.</p>
</div>
</body>
</html>
If I remove the <p></p>'s from each sentence the spacing disappears. If I add a "border: 1px solid black;" to each style the spacing disappears. I don't want to know how to make it go away. I want to know why it's there? I mean shouldn't the paragraphs be fully enclosed inside the div's? Such that no spacing should appear between the div's? Any insight anyone might care to share with me would be most appreciated. Thanks. Carlos I want to get buttons like these with my CSS: http://members.cox.net/npalmi188/test.jpg how do I do this? (don't worry about the color codes) everytime I try to get something near it I get this gay gray extra bevel to my button, anybody know how to fix that? here's the code I was using that had the gray bevel: Code: input.button
{
font-family: MS Sans Serif;
font-weight: none;
font-size: 10px;
color: #ffffff;
background: #4C5844;
}
http://cirqueamongus.bdigia.com/main/ http://cirqueamongus.bdigia.com/x.css Page is valid XHTML1.1 and CSS. However, IE 6 causes a space to appear between my header div and my menu divs. Firefox and opera display the page just fine thanks for the help. Also, if you're using IE Mac, it might display funny there, as well. If you can give me information on what's happening there, I would also appreciate it. Ok guys, I'm hoping someone can help me. I am a complete newbie to CSS and web site construction in general. I have a left vertical navigation bar made up of graphics in a div tag that is set to float on the left. I'm having difficulty with the graphics, they have white spaces in between them when viewed in IE. They are supposed to butt up against one another. I have tried setting the margin and padding in that div to 0. I have also seen in other forums where the <li> tag can be placed on the previous line to fix this problem in IE. I haven't even viewed the page on any other browsers yet, can someone help me please? Thanks so much! vonatah Hi all, Great forum page with problem, good in firefox, bad in ie, http://www.central12.com/photosmain1.htm The images as displayed in ie appear with a small gap at the bottom of the picture. I have condensed the code, can't figure it, but using lists to layout images is new to me. Would have used individual divs previously, but have seen this technique used and it seems better, less code. I think i'm just missing a simple fix, as images and boxes are set to the same dimensions. The code in the example differs from the code on the uploaded page, been on it for a week still trying to suss it. HTML: Code: <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="mainpic1" class="big4"></div> <div id="sidepic1"> <ul> <li class="piccys1"><a href=""><img alt="British Monuments" title="British Monuments" src="picsthums/castlehill.jpg" width="95" height="80" /></a></li> <li class="piccys1"><a href="photos.htm"><img alt="Canada" title="Canada" src="picsthums/canlake.jpg" width="95" height="80" /></a></li> <li class="piccys1"><a href=""><img alt="Plants/Flowers" title="Plants/Flowers" src="picsthums/portplant.jpg" width="95" height="80" /></a></li> <li class="piccys1"><a href=""><img alt="France" title="France" src="picsthums/francechurch.jpg" width="95" height="80" /></a></li> <li class="piccys1"><a href=""><img alt="Ievissa" title="Ievissa" src="picsthums/rockyibiza.jpg" width="95" height="80" /></a></li> </ul></div> <div id="sidepic2"> <ul> <li class="piccys"><a href=""><img alt="Sunsets" title="Sunsets" src="picsthums/safricasun.jpg" width="95" height="80" /></a></li> <li class="piccys"><a href=""><img alt="Architecture" title="Architecture" src="picsthums/majorchurch.jpg" width="95" height="80" /></a></li> <li class="piccys"><a href=""><img alt="Mountains" title="Mountains" src="picsthums/olympos.jpg" width="95" height="80" /></a></li> <li class="piccys"><a href=""><img alt="British Countryside" title="British Countryside" src="picsthums/harbscot.jpg" width="95" height="80" /></a></li> <li class="piccys"><a href=""><img alt="Ancient" title="Ancient" src="picsthums/sphinxthum.jpg" width="95" height="80" /></a></li> </ul></div> </body> </html> CSS: Code:
/*Main styles----*/
body {
margin: 0px;
padding: 5px 0px 5px 0px;
background-attachment: fixed;
background-color:#000; }
img{
border: 0 none;
}
#mainpic1 {
width: 479px;
height: 323px;
margin:24px 0 15px 10px;
float:left; }
li.piccys, ul.piccys {
float:right;
width:95px;
height:80px;
margin:9px 0 0 5px;
padding:0px;
list-style:none;
border:2px solid #fff; }
li.piccys1, li.piccys1 {
float:right;
width:95px;
height:80px;
margin-top:9px;
margin-right:5px;
padding:0px;
list-style:none;
border:2px solid #fff; }
#sidepic1 {
width: 100px;
height: 480px;
margin-top:15px;
margin-right:5px;
float:right; }
#sidepic2 {
width: 100px;
height: 480px;
margin-top:15px;
margin-right:35px;
margin-left:0;
float:right; }
Thanks for your time, I expect there are loads of ways I could do it better, your advise is appreciated. Paul Hi everyone. I have a header image and directly below it the div that holds my navigation. In FF it works great, but in IE I get about a 5px space inbetween the header image and the navigation div. The navigation div is colored so it's really easy to tell where it stops and starts in IE. Here's my CSS code: Code:
body {
background-image: url(images/bgshadow.gif);
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}
#content {
width: 738px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
vertical-align: top;
}
#header {
width: 738px;
margin: 0 0;
padding: 0 0;
}
#nav {
width: 738px;
height: 25px;
margin: 0 0;
padding: 0 0;
background-color: #86462F;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
}
#nav ul {
width: auto;
float: right;
margin: 5px 0 0 0;
padding: 0 0;
}
#nav ul li {
margin: 0 25px 0 0;
padding: 0 0;
list-style-type: none;
display: inline;
}
and my markup: Code: <div id="content"> <div id="header"> <img src="images/header.jpg" width="738" height="100" /></div> <div id="nav"> <ul> <li>Home</li> <li>Register</li> <li>Go Play!</li> </ul> </div> I've tested the white-space bug in windows IE (taking out all of the white-space in the markup) but that only had a marginal effect on the list. Does anyone have any ideas? Thanks, -Brian Hi all, after my last query it was suggested that my use of absolute positioning for every element was not necessary. I should go with the flow. So I copied a basic page structure and twiddled a little. Here is the result so far html link css link A couple of questions. 1. Would you say I'm on the right track, or should I be looking at a different style structure? 2. The page appears in ie to have gaps around the elements. In Mozilla it looks like I hoped it would look. How to close up gaps in ie. I'm trying padding, margin, negative values etc, Checking in the morning in hope of miraculous fix. No luck so far. Any help, advice appreciated. Thanks Solar.. Hi; I am trying to get rid off white space from the bottom of the navigate bar, and tried with height=23px for th or td, but they don't not work, could anyone help me, please. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Yourheadstone.com</title>
<style type="text/css">
html head title{
border:0;
padding:0;
margin:0;
}
body{
padding:0;
border:0;
background-color:#3399FF;
margin:0;
}
table tr td{
border: 1px solid #000000;
}
table{
width:1024px;
height:25px;
padding:0;
border:2px solid #000000;
margin-top:5%;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
background-color: #E5FFFF;
}
tr td{
padding:0;
margin:0;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: right;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff; }
</style>
</head>
<body>
<table>
<tr>
<td>
<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="uploadform.php">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Headstones</a></li>
<li><a href="#">Home</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
So I am trying to move from designing in <tables> and move on to the beauty of the CSS box-model design. I have been inspired by one of the ZenGarden designs and wanted to see if I could try and duplicate it's flow. I am running into a problem. I have created the outer box "#mainBox" and nested within this I have a child "#pageHeader." Problem is that there is this big amount of space (that is present in both IE6 AND FireFox 1.0) at the bottom of "#pageHeader." See the attached pic for the exact detail. Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><title>The Shalom Foundation</title>
<style type="text/css">
<!--
body {
text-align:center;
background-color:#666666;
margin:0 0 50px 0; /* top right bottom left */
}
p{
padding:0;
margin:0;
text-align:justify;
}
#mainBox {
float:right;
margin:9px 12px 0 0;
padding:0px;
width:733px;
text-align:left;
background-color:#999999;
}
#pageHeader{
background: url(images/layout/header.jpg) no-repeat top left;
padding:0;
margin:0;
text-indent: -15000px;
height: 290px;
overflow: hidden;
}
#nav{
position:absolute;
right:100px;
margin:0;
background: url(images/layout/menu.jpg) no-repeat top left;
padding:0;
margin:0;
width:136px;
height: 302px;
overflow: hidden;
}
-->
</style>
</head>
<body>
<div id="mainBox">
<div id="pageHeader">The Shalom Foundation</div>
<div id="nav">Nav</div>
<div id="contentHdr"><table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle"><img src="images/layout/hdr_about_us.gif"></td></tr></table></div>
<div id="content"><p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua
portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen
laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum, donec
requiescat in te. da mihi, domine, scire et intellegere, utrum sit prius invocare te an laudare te, et scire te prius sit an invocare te. sed quis te
invocat nesciens te? aliud enim pro alio potest invocare nesciens. an potius invocaris, ut sciaris? quomodo autem invocabunt, in quem non crediderunt?
aut quomodo credent sine praedicante? et laudabunt dominum qui requirunt eum. quaerentes enim inveniunt eum et invenientes laudabunt eum. quaeram te,
domine, invocans te, et invocem te credens in te: praedicatus enim es nobis. invocat te, domine, fides mea, quam dedisti mihi, quam inspirasti mihi
per humanitatem filii tui, per ministerium praedicatoris tui.</p></div>
<div id="rightNav">rightNav</div>
<div id="pageFooter">pageFooter</div>
</div>
</body>
</html>
Thanks in advanced for any help! Hey everyone, I am creating Tabs in CSS. However these tabs are in 2 rows. I was wondering if anyone can give me an idea how do i make these tabs so that they feel all the available space. Is it even possible to do that? My tabs run in 2 rows and also its a combination of image and text. so calculating the width of the screen and dividing by number of tabs doesnt seem to work. http://www.zombiepolitics.com Just when I thought I had this down .. I dont. I have a CSS layout .. there are two main divs side by side, the navigation rests at the top of the right div. problem is in IE 6 there is so much extra space at the top that my navigation doesnt line up with my header .. in FF its no problem. What is the workaround for this? At some point, something I did caused my website to have around 400 pixels of white space above it. My site is very simple but I can't seem to figure out the cause. I'm hoping someone can take a look and figure it out. Thanks for any help, Chris HTML CODE: http://www.bottomtimedesign.com CSS CODE: Code:
@charset "utf-8";
/* CSS Document */
body {
background-color: #FFFFFF;
text-align: center;
}
/*defines web page dimensions and centers page */
#pagedimensions {
background-color: #DCDBC9;
border: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
width: 1024px;
height: 768px;
text-align: left;
}
#mask {
position: absolute;
left: 575px;
top: -45px;
}
#sign {
margin-left: 50px;
float: left;
margin-right: 50px;
}
#snorkel {
position: absolute;
top: 390px;
left: -39px;
}
#header {
float: right;
margin-right: 20px;
margin-bottom: 0px;
margin-top: 10px;
}
#content {
margin-left: 50px;
margin-right: 155px;
position: static;
margin-top: 300px;
}
Hello, im working on styling an unordered list into a file tree. So far, so good. However, do you see that space that is showing in between each <li>, between the T (elbow2.gif) image, its very unwanted. Code:
/* -- FILE BROWSER -- */
#browseFiles {
padding: 0 0 0 20px;/* 000pix handles indent */
}
#browseFiles ul {
font: 10px sans-serif;
color: #000;
list-style:none;
margin: 0;
padding: 0;
}
#browseFiles li {
/*display:compact;
height: 18px;*/
padding: 0;
margin: 0;
}
#browseFiles .fileDiv {
height: 18px;
background: url(images/elbow2.gif) no-repeat scroll 0 0;
}
#browseFiles .fileLink {
padding: 0 0 0 13px;
margin: 3px 0 0 0;
}
#browseFiles .dir {
list-style:none;
font: bold 10px sans-serif;
margin:0;
padding:0;
}
#browseFiles .file {
padding: 0 0 0 3px;
margin:0;
}
Heres the html Code:
<div id='browseFiles'>
<ul>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
<li class='file'>
<div class='fileDiv'>
<a class='fileLink'>
<img class'fileIcon' src='images/file.gif' />
</a>
</div>
</li>
</ul>
</div>
Thank you for the help in advanced. I have layed out the page but cannot seem to get the hang of the floats and positioning....!! If anyone can give me a hint how I can position my text in the main white space I would be so grateful as I am confusing myself as to what i am doing wrong!! the site is hosted at www dot getatrader dot com PLEASE HELP!! here is the CSS: Code:
body {
background: white;
font-size: smaller;
font-weight: bold;
font-family: Verdana,Arial,Helvetica,sans-serif;
}
#topnav {
float:left;
position: absolute;
}
#topnav img{
display: block;
border: none;
}
#header{
position: relative;
text-align: right;
border: solid thin #999999;
margin: 0px 0px 0px 0px;
background: #336699;
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #ffffff;
height: 155px;
}
#headerright{
position: relative;
top: 20px;
right: 10px;
}
#headerright li {
display: inline;
list-style: none;
padding: 40px;
}
#headerright img {
border: none;
}
#headerright a:link {
color: #ffffff;
text-decoration: none;
}
#headerright a:visited {
color: #ffffff;
text-decoration: none;
}
#headerright a:hover {
color: #ffffff;
text-decoration: none;
}
#headerright a:active {
color: #ffffff;
text-decoration: none;
}
h1 {
}
h2 {
width: 200px;
text-align: center;
color: white;
background-color: black;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: large;
font-weight: bold;
}
#container {
width: 956px;
padding: 10px;
margin: 0px auto 0px auto;
height: auto;
text-align: left;
border: 1px solid #ddd;
}
#button {
position: relative;
display: block;
width: 152px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color: #336699;
color: #333;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
height: 500px;
}
#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
#maintext {
position: absolute;
float: left;
}
#footer
{
color: white;
background-color:#336699;
font-size: small;
font-family: Verdana,Arial,Helvetica,sans-serif;
margin: 0px 0px 0px 0px;
}
I have a couple of divs at the very top of my page spanning the width of the page. In IE-8 the page is displayed as I would like, with no spacing at the top margin above the first div. In FF, there is a giant space about 50 px high. I need to get rid of this space. Below is my css for the top-most div, body, and the html... any ideas? Code:
body {
margin-top: 0px;
font-family: Arial,Verdana,Helvetica;
font-size: 12px;
}
div#top {
margin-top: 0px;
float: left;
background-image: url(../img/logo.png);
background-repeat: no-repeat;
width: 100%;
height: 42px;
}
<div id="top"></div>
<div style="margin-bottom:40px">
<script type="text/javascript">javascript menu code</script>
</div>
|
|||||||