|
CSS - Need Evenly Spaced Image Menu On One Line
I have a menu within my content thus:
Code: div class="contentMenu"> <ul> <li> <a href="#" title="Find out more"><img src="images/stories/memories/FamilyLife/thumb/familyFWHarveysBuildingsDorchester.jpg" alt="" /> <span>Family life</span></a> </li> . . . <li> <a href="#" title="Find out more"><img src="images/stories/memories/SightsAndSounds/thumb/sightsMOOsmington1963.jpg" alt="" /> <span>Sights/Sounds</span></a> </li> </ul> </div> I want the menu items not to spill onto the next line when I shrink the browser. I have tried overflow:hidden; but does not stop the last one taking up a new "line". There are 7 menu items across the page. The CSS so far is: Code: .contentMenu {
background-color:#FFFFCC;
border:1px solid #B9C0F7;
margin-bottom:6px;
padding:8px 0 5px;
}
#main .contentMenu ul, #main2 .contentMenu ul {
margin:0 auto;
overflow:hidden;
width:95%;
}
#main ul, #main2 ul {
list-style-position:outside;
list-style-type:square;
margin:0 0 0 20px;
padding:10px 0;
}
#main ul li, #main2 ul li {
margin:0;
padding:0 0 0 10px;
}
.contentMenu li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
text-align:center;
width:15%;
}
.contentMenu a {
padding-top:4px;
text-decoration:none;
}
.contentMenu img {
border:medium none;
height:62px;
width:55px;
}
Of course the meni images need to be evenly spaced across the page. Would appreciate if someone could point me in the right direction. Similar TutorialsI'm wracking my brain, and I can't figure out why my content (which was fine when I just had it sitting in my empty graphical box) is now spaced half-way down the page. My work in progress is at "www *dot* deepwaterchurch *dot* com *slash* next" I'd really appreciate any help. Thanks so much in advance. P.S. The code is below (inline CSS for ease of fiddling): Code: <!--
*,html{margin:0;padding:0;}
body{
background:black url("images/water.jpg") repeat-x top left;
color:white;
font:12pt verdana,arial,helvetica,geneva,sans-serif;
width:100%;
height:auto;
}
#container {
width: 960px;
position:relative;
margin:0 auto;
/*overflow:hidden;*/
}
#logo {
position: absolute;
background-image: url(images/logo.jpg);
right: 52px;
top: 15px;
width: 250px;
height: 131px;
}
#top {
background:url(images/top.png) no-repeat;
width: 956px;
height: 646px;
}
#content-container {
background:url(images/boxmiddlerepeatable.png);
position:relative;
width:852px;
overflow:hidden;
margin:0 auto;
margin-top:-631px;
top:0px;
left:-2px;
}
#content{
position:relative;
margin:10px auto 0;
width:805px;
left:10px;
top:0;
min-height:646px;
}
#bottom {
background-image:url(images/boxbottom.png);
position:relative;
height:12px;
width:851px;
top:5px;
}
a:link {
color: #3f7ba3;
text-decoration: none;
}
a:visited {
text-decoration: none;
color:#3f7ba3;
}
a:hover {
text-decoration: none;
color: #FFCC33;
}
a:active {
text-decoration: none;
}
h1 {
font-size: 9px;
text-transform: uppercase;
color:#666666;
}
h2 {
font-size: 13px;
font-weight:900;
color:#FFFFFF;
}
h3 {
color:#999999;
font-weight:400;
font-size:12px;
}
#logo {
position: absolute;
background-image: url(images/logo.jpg);
right: 52px;
top: 15px;
width: 250px;
height: 131px;
}
.clear{clear:both;height:15px;
}
#navtabs {
width:462px;
height:60px;
position:absolute;
top:-10px;
left:5px;
}
#navtabs ul {
display: inline;
margin: 0;
padding: 0;
}
#navtabs li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
float: left;
position: relative;
width: auto;
}
#navtabs li ul {
position: absolute;
width: 10em;
left: -999em;
}
#navtabs li:hover ul {
left: auto;
}
#navtabs li:hover ul, #navtabs li.sfhover ul {
left: auto;
}
li.whoweare a {
background-color:#000000;
background: url(images/navigation/whoweare.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.whoweare a:hover {
background-color:#000001;
background: url(images/navigation/whoweare.jpg);
background-position:
-77px 0;
}
li.whatwedo a {
background-color:#000000;
background: url(images/navigation/whatwedo.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.whatwedo a:hover {
background-color:#000001;
background: url(images/navigation/whatwedo.jpg);
background-position:
-77px 0;
}
li.whatwedodown a {
background-color:#000002;
background: url(images/navigation/whatwedo.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
background-position:-77px 0;
}
li.beforeyoucome a {
background-color:#000000;
background: url(images/navigation/beforeyoucome.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.beforeyoucome a:hover {
background-color:#000001;
background: url(images/navigation/beforeyoucome.jpg);
background-position:
-77px 0;
}
li.beforeyoucomedown a {
background-color:#000002;
background: url(images/navigation/beforeyoucome.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
background-position:-77px 0;
}
li.onceyourehere a {
background-color:#000000;
background: url(images/navigation/onceyourehere.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.onceyourehere a:hover {
background-color:#000001;
background: url(images/navigation/onceyourehere.jpg);
background-position:
-77px 0;
}
li.onceyoureheredown a {
background-color:#000002;
background: url(images/navigation/onceyourehere.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
background-position:-77px 0;
}
li.faq a {
background-color:#000000;
background: url(images/navigation/faq.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.faq a:hover {
background-color:#000001;
background: url(images/navigation/faq.jpg);
background-position:
-77px 0;
}
li.faqdown a {
background-color:#000002;
background: url(images/navigation/faq.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
background-position:-77px 0;
}
li.contactus a {
background-color:#000000;
background: url(images/navigation/contactus.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
}
li.contactus a:hover {
background-color:#000001;
background: url(images/navigation/contactus.jpg);
background-position:
-77px 0;
}
li.contactusdown a {
background-color:#000002;
background: url(images/navigation/contactus.jpg);
display: block;
width: 77px;
height: 67px;
text-indent: -999999px;
overflow: hidden;
background-position:-77px 0;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="top"></div><!--end top-->
<div id="content-container">
<div id="content"><!--START ENTERING CONTENT HERE-->
<div id="logo"></div>
<div id="navtabs">
<ul id ="nav">
<li class="whoweare"><a href="whoweare">WHO WE ARE</a></li>
<li class="whatwedo"><a href="whatwedo">WHAT WE DO</a></li>
<li class="beforeyoucome"><a href="beforeyoucome">BEFORE YOU COME</a></li>
<li class="onceyourehere"><a href="onceyourehere">ONCE YOU'RE HERE</a></li>
<li class="faq"><a href="faq">FAQ</a></li>
<li class="contactus"><a href="contactus">CONTACT US</a></li> </ul></div><!--end navigation-->
<div id="wrap">
<div id="controller" class="hidden">
<span class="jFlowControl">Current Series</span>
<span class="jFlowControl">We're Social</span>
<span class="jFlowControl">Compassion</span>
</div>
<div id="prevNext" class="hidden">
<img src="images/prev.png" alt="Previous Tab" class="jFlowPrev" align="left"/>
<img src="images/next.png" alt="Next Tab" class="jFlowNext" align="right"/>
</div>
<div id="slides">
<div><img class="cushycms" src="images/currentseries.jpg" height="289" alt="Current Series Graphic" width="462" /><p class="slideshow">Current Series</p></div>
<div><a href="social"><img src="images/weresocial.jpg" alt="We're Social" usemap="#social" border="0"></a>
<map name="social"><area shape="rect" coords="21,86,232,258" href="http://www.facebook.com/group.php?gid=8981012794&ref=ts" />
<area shape="rect" coords="252,97,426,271" href="http://twitter.com/deepwaterchurch" /></map>
</div>
<div><img src="images/luv.jpg" alt="show a little luv" class="cushycms"/></div>
</div>
</div>
<div id="overlay" style="z-index:3; position:relative; top:-209px; left:10px; width:462px; height:289px;"><img src="images/slideoverlay.png" /></div>
<!-- end slideshow -->
<div id="tagline" style="position:relative; top:-390px; left:492px;"><img src="images/tagline.jpg" /></div>
CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />
</div><!--end content-->
<div id="bottom"></div><!--end bottom-->
</div><!--end content-container-->
<div class="clear"></div><!--end clearing div-->
</div><!--end container-->
Using tables, I can evenly space the cells apart. For instance: Code: <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="center"> qwerty1 </td>
<th align="center"> qwerty2 </td>
<th align="center"> qwerty3 </td>
</tr>
</table>
There's nothing terribly wrong with this - it works! But I'm trying to switch to using CSS whereever possible. How would you achieve the same effect using stylesheets? What is the best way to evenly space these links inside the div? PHP Code: <div id="contain_header"> <div id="header"> <a href="index.php" class="nav">Homepage</a> <a href="manufacturers.php" class="nav">Manufacturers</a> <a href="contact.php" class="nav">Contact Us</a> <a href="carfinder.php" class="nav">Advanced Car Search</a> <a href="specialoffers.php" class="nav">Special Offers</a> <a href="faq.php" class="nav">FAQ's</a></div> </div> Hi, I am using nested tables in order to create a recursive tree-like effect. I got it to look how I want on IE 8, and it looks almost identical in Firefox. However, Chrome is not distributing table rows evenly. It seems to make the first row in a table a minimum size, and then the second row a maximum size. I'm looking for some css property that will help this to work across all three browsers, and I'm also open to another way of doing this - (instead of nested tables) - but I did spend weeks getting it to look this way before I decided I wanted to try tackling Chrome, and have been unable to figure it out. Here is a simple example that clearly demonstrates what I'm trying to get working on Chrome. (as a new user I can't post a url to the working page I have up on the internet) 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>
<title>Firefox Vs Chrome - table rows - found @ http://jacob.jrobertsons.com/FirefoxVsChromeRows.html</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
table {
border-collapse: collapse;
margin: 0px;
padding: 0px;
border: solid 0px blue;
}
td {
border-collapse: collapse;
margin: 0px;
padding: 0px;
border: solid 0px black;
}
.l {
border-left: 1px solid #c82;
}
.b {
border-bottom: 1px solid #c82;
width: 15px;
}
.t {
border-top: 1px solid #c82;
}
.n {
padding-bottom: 4px;
border: 1px solid #c82;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="4">
<table>
<tr>
<td class="n" rowspan="2">AAA<br />
AAA<br />
AAA<br />
AAA<br />
AAA<br />
</td>
<td class="b"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td class="b"> </td>
<td rowspan="2">
<table>
<tr>
<td rowspan="4">
<table>
<tr>
<td class="n" rowspan="2">BBB<br />
BBB<br />
BBB<br />
BBB<br />
BBB<br />
BBB<br />
BBB<br />
BBB<br />
BBB<br />
</td>
<td class="b"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td class="b"> </td>
<td rowspan="2">
<table>
<tr>
<td rowspan="0">
<table>
<tr>
<td class="n" rowspan="2">CCC</td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="l"> </td>
</tr>
<tr>
<td class="b l"> </td>
<td rowspan="2">
<table>
<tr>
<td rowspan="0">
<table>
<tr>
<td class="n" rowspan="2">DDD<br />
DDD<br />
DDD<br />
</td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="l"> </td>
</tr>
<tr>
<td class="b l"> </td>
<td rowspan="2">
<table>
<tr>
<td rowspan="2">
<table>
<tr>
<td class="n" rowspan="2">EEE</td>
<td class="b"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td class="b"> </td>
<td rowspan="2">
<table>
<tr>
<td rowspan="0">
<table>
<tr>
<td class="n" rowspan="2">FFF<br />
FFF<br />
FFF<br />
FFF<br />
FFF<br />
FFF<br />
FFF<br />
FFF<br />
FFF<br />
</td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Thanks for any help you can provide! Alright, here's the situtation: Imagine a bunch of random DIVs... let's say a hundred. These DIVs come in three different widths, but their heights are entirely variable. Now, let's give these DIVs margins of 5px each. I want all of the DIVs to show up, in their respective dimensions, in order as much as possible... but I want them all 10px apart from all sides... including top and bottom. How would I achieve this effect? I tried floats, but that doesn't quite work for EDIT* - vertical spacing in all cases. Basically, if a smaller DIV can fit in an empty space, I want it to go there, so everything--despite the randomness--is uniformly spaced. Is this possible using CSS? Maybe with Javascript? HellO~! I'm current trying to code a website for someone, but I'm having some problems getting the menu to work properly in Firefox. It works great in Chrome and Safari but I have no idea how to make it work properly for firefox. So basically, I have a drop line menu, but instead the sub links all showing up in the same spot when I hover, I want the sub links to show up under the link I'm hovering over. Now, I managed to get this working great by just changing the position of the sub ul and il hover to relative. URL But in Firefox, when you hover over a link, that link expands to the width of the sub navigation and pushes the other links to the right. It just looks terrible and I don't know how to fix this. URL I've tried searching for a solution, but no luck! I'd really appreciate if someone could enlighten me on how this could be fixed? Or if it's even possible? I'm still new to working with drop downs and would love the help! Advance thanks for those who read this! Hopefully someone can help me out with this! EDIT: Looks like my images wont show up after all . Hopefully you will all know what I mean. CSS CODE: Code: * {
margin:0;
padding:0;
}
#nav {
list-style:none;
position:relative;
}
#nav li {
float:left;
text-align:center;
}
#nav a {
display:block;
text-decoration:none;
}
#nav a:active, #nav a:focus, #nav a:hover {
background:#254563;
}
/* --------- Sub Nav --------- */
#nav li.current ul {
left:0px;
}
#nav ul {
position:absolute;
left:-999em;
list-style:none;
padding:0 0 0;
width: 500px;
}
#nav ul li {
width: auto;
margin: 3px 3px 0 0px;
}
#nav ul a {
font-size: 12px;
height: auto;
padding: 5px 10px;
background: #dfeec9;
border-radius: 8px;
-moz-border-radius: 8px;
width: auto;
}
#nav li:active ul, #nav li:hover ul {
height: 30px;
left: 10px;
position: relative;
padding: 0px 3px 5px 3px;
background: none;
width: 500px;
}
.navi01 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 33px;
height: 44px;
text-decoration: none;
background: url(images/navi_01.png);
}
.navi02 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 133px;
height: 44px;
text-decoration: none;
background: url(images/navi_02.png);
}
.navi03 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 86px;
height: 44px;
text-decoration: none;
background: url(images/navi_03.png);
}
.navi04 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 83px;
height: 44px;
text-decoration: none;
background: url(images/navi_04.png);
}
.navi05 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 92px;
height: 44px;
text-decoration: none;
background: url(images/navi_05.png);
}
.navi06 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 82px;
height: 44px;
text-decoration: none;
background: url(images/navi_06.png);
}
.navi07 {
display: block;
padding-top: 0px;
padding-left: 0px;
width: 30px;
height: 44px;
text-decoration: none;
background: url(images/navi_07.png);
}
HTML NAV CODE: Code: <ul id="nav"> <li><span class="navi01"> </span></li> <li><a href="originalart/gallery.php"><span class="navi02"> </span></a> <ul> <li><a href="originalart/gallery.php">Original Art</a></li> <li><a href="fanart/gallery_fanart.php">Fan Art </a></li> <li><a href="commissions/gallery_commissions.php">Commissions</a></li> <li><a href="roughwork/gallery_roughwork.php">Rough Work</a></li> </ul> </li> <li><a href=""><span class="navi03"> </span></a> <ul> <li><a href="info.php">Info</a></li> <li><a href="http://luisarafidi.deviantart.com/journal/11831940/">FAQ </a></li> </ul> </li> <li><a href="oldartwork/gallery_oldartwork.php"><span class="navi04"> </span></a></li> <li><a href="http://blog.luisarafidi.com/"><span class="navi05"> </span></a> <ul> <li><a href="#">Old Artwork</a></li> <li><a href="#">More</a></li> </ul> </li> <li><a href=""><span class="navi06"> </span></a></li> <li><span class="navi07"> </span></li> </ul> Hi folks, I hope this is achieveable ... I have tried numerous ways of floating and whatnot, here is what i want: I want to have one container, having 3 divs inside. of these 3 divs the left and the right one are fluid, the center one is an image with a fixed width. looking like this: Code: ________________________ l l l fluid fix fluid l ________________________ restrictions: i do not want to use positioning at all. best would be, if it is all achieved with float and margins, looking good in IE and FF .... i have a page up, that will show you my design .... note, that only the box containing the image is the problem part on that page (some of you will recognize this i believe) the names of the classes are textboxleft, textboxright and id big_logo thanx! i want to redesign the page i have to only be displayed with floats and margins and no more positioning .... The physical appearance and layout has already been determinted. I must now make it into a webpage that looks like the design. I know how to do it with tables but I am trying todo it tableless and I am having some problems - because this is my first attempt at it - yes I know I am old school - but I am trying to become new school. Here is the link to the design I have the box for the web page and trying to get the logo image to show up properly in the top right corner and the tag line to show up next to it. I don't know how to do the code box thing - but here is my html: <body> <div id="page"> <div id="header"></div> <div id="tagline">world leaders in spirometry</div> </div> </body> Here is my css: body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; text-align: left; background-color: #ffffff; color: #000000; margin-top: 11px; padding: 0; } /*page settings*/ #page { width: 750px; height: 600px; border: 1px solid #5094F9; background-color: #FFFFFF; color: inherit; text-align: left; overflow: hidden; margin: 0 auto; padding: 10px 10px 10px 10px; align: center; } #header { background-image: url(../images/vitalograph_spirometers_logo.gif); background-color: inherit; background-position: "top left"; background-attachment: fixed; background-repeat: no-repeat; padding: 10px 10px 10px 10px; overflow: inherit; } #tagline { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; color: #5094F9; display: inline; } Any help is greatly appreciated - and if you could tell me how to do the code ting properly that woud be great - I tried the wrap code # icon, but it only pasted one tag not the whole string. Thanks! I have tried embedding the div tags with no luck and even having the text be defined in the heading id and trying to define it there - but it still doesn't look right. Here is my code: I am new to xhtml and am working on my web page i want to use a graphic to split my different areas and the book i was using only showed how to put in a plain line, In .css PHP Code: h2 {border-top:1px solid #4D65A0} I have found a graphic i want to use from the animation factory cd's i have and now im lost as to how to put it in. new line: slash_blue_mw.gif sorry posted in the wrong spot b4 hi, this is my first post so go easy with me! I am trying to use css to make a top navigation bar, with an image to the left and an ul to the right, i want to ul to be in line with the bottom of the image so that it forms a nav bar but i am doing something wrong...! below is what i think is the relevant code and css.... any help appreciated!! If i need to upload the rest of the pages then let me know. i'm coding in php but this bit is all html so i guess that doesnt really matter for now, i'm new to web development, its part of a uni assignment! Code: HTML <div id="header"> <p align="left"> <a href="index.php"> <img src="/images/GATlogo.jpg" width="150" height="150" alt="Home" border="0" /></a> <ul> <li><strong><?php echo "$heading"; ?></strong></li> <li><img src="/images/login.gif" border="0"/><a href=" Login.php">Login</a></li> <li><img src="/images/register.gif" border="0"/><a href=" Register.php">Register</a></li> </ul> </div> Code: CSS #header{
vertical-align: top;
text-align: right;
border: solid thin #999999;
margin: 0px 0px 0px 0px;
background: #336699;
font-family: MS Trebuchet, MS Verdana, Univers, Helvetica, Arial, sans-serif;
color: #ffffff;
height: 155px;
}
#header li {
display: inline;
list-style: none;
padding: 40px;
}
#header a:link {
color: #ffffff;
text-decoration: none;
}
#header a:visited {
color: #ffffff;
text-decoration: none;
}
#header a:hover {
color: #ffffff;
text-decoration: none;
}
#header a:active {
color: #ffffff;
text-decoration: none;
}
Hello all, I am dynamicly creating a table with the following structu Code:
<table id="plate_header">
<tr>
<th><a class="header_link" href="link">Header 1<img src="arrow"></a></th>
<th><a class="header_link" href="link">Header 2</a></th>
<th><a class="header_link" href="link">Header 3</a></th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
with the following CSS: Code:
table {
padding: 1em;
border: 1px solid #dddddd;
} /* end table */
.cell { border: 1px solid #dddddd; }
td { padding: 1em; }
th {
background: #206296;
padding: 0 1em;
font-weight: bold;
color: #ffffff;
}
a:link.header_link,
a:hover.header_link,
a:active.header_link,
a:visited.header_link { color: #ffffff; }
#plate_table td { vertical-align: top; }
The problem is in some cases, the <th> is the largest item in that column. So whenever the arrow image appears with it, it will be placed on a new line. How can I force it to be on the same line as the text? Hi. I'm reasonably new to tableless-design, and i've run into the common problem of aligning one bit of text to the left of a line and another to the right. I have searched the web and have found several means of achieving this, but in my case there is an image combined with a inline list (horizontal menu) that needs to be aligned left, and another combination of text and images to the right. | [image] text .... right-side text | This might seem rather simple, but it becomes more complicated: the entire block needs to be padded on the top in order for the text not to appear cramped up at the top, and the left-margin and right-margin of the image is then set to the corresponding negative values in order for it to still be displayed precisely in the top left corner. I have found this to be the only cross-browser compatible method. All the methods I have experimented with to align the two sides on left and right have either resulted in the image and text to be incorrectly (vertically) aligned or be displayed in different lines, even when the image is not used as part of the alignment-method. Any help or suggestions will be greatly appreciated. Thanx Hello! Im Using Joomla to build my website. Im using a module and im changing the css styling. There only one problem im having. The tabs on the module align to the left and because i dnt have enough tabs to fill out the space it leave a blank space on the right. I just want to know how to edit the CSS to make the taps justify / spread out evenly. The makers of the module say any question on customization will be ignored that why i post this question here to see if i could get some help. Its "Tabs Manager GK3" from Gavick Heres the CSS. Can any1 just make the changes for me please and post it below Thanks in advance! Code: .clearfix-tabs{
clear: both;
}
.gk_tab_item_space{
padding: 10px;
}
div.gk_tab-style3 {
position: relative;
}
div.gk_tab_wrap-style3 {
margin: 0 auto;background: #171717;
border: 4px solid #822864;
}
div.gk_tabmenu-style3 {
overflow:hidden;
}
ul.gk_tab_ul-style3 {
list-style-type: none;
margin: -1px 0 0;
padding: 0;
}
ul.gk_tab_ul-style3 li {
background: none;
padding: 0;
float: left;
cursor: pointer;
margin: 0;
position: relative;
}
ul.gk_tab_ul-style3 li span {
background: url('../../images/horizontal/style3/bg_tab.png') repeat-x 0 0;
display: block;
height: 28px;
line-height: 27px;
padding: 0 10px;
font-size: 10px;
color: #000;
text-transform:uppercase;
border: 1px solid #e1e1e1;
border-left: none;
}
ul.gk_tab_ul-style3 li.active span {
background: url('../../images/horizontal/style3/bg_tab-active.png') repeat-x 0 0;
color: #171717;
border: 1px solid #b32784;
}
div.gk_tab_container0-style3 {
clear: both;
}
div.gk_tab_container1-style3 {
overflow: hidden;
}
div.gk_tab_item-style3 {
float: left;
overflow: hidden;
padding: 10px;
}
div.gk_tab_button_next-style3,
div.gk_tab_button_prev-style3 {
width: 24px;
height: 24px;
background: url('../../images/horizontal/style3/b_next.png') no-repeat 0 0;
cursor: pointer;
position: absolute;
top: 43%;
right: 0;
}
div.gk_tab_button_prev-style3 {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 0 0;
left: 0;
right:inherit;
}
div.gk_tab_button_next-style3:hover {
background: url('../../images/horizontal/style3/b_next.png') no-repeat 100% 0;
}
div.gk_tab_button_prev-style3:hover {
background: url('../../images/horizontal/style3/b_prev.png') no-repeat 100% 0;
}
.gk_tab_container0-style3,
.gk_tab_container1-style3,
.gk_tab_container2-style3{
position:relative;
}
Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! Hi, I have a few problems... some regarding compatibility and some regarding css basics. lesconstructionsjeanbrunetDOTcom/2011/flicker.html This page is a little messy 1. Slider works perfect in Firefox and NOT in IE 2. CSS menu sub items works in Firefox but NOT in IE 3. CSS menu sub items don't show over the image slider (probably normal but asking anyway...) Any Ideas Thanks |
|||||||