|
CSS - Aligning Tabs And Sections
Hello,
I'm still playing around with CSS and I put together this test, to see if I could create tabs on a page.... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Site</title>
<style type="text/css">
/* ----- ALL ----- */
* {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
/* ----- TABS ----- */
#tabs {
float:left;
}
#tabs, #tabs ul, #tabs li {
margin:0;
padding:0;
list-style:none;
}
#tabs a {
background-color:#AE5700;
color:#FFFFFF;
margin-left:1px;
margin-right:1px;
margin-bottom:1px;
padding:5px 5px 5px 5px;
text-decoration:none;
cursor:pointer;
float: left;
}
#tabs a:hover {
color:#000000;
background-color:#FFCC99;
}
#tabs .active a {
color:#000000;
background-color:#FF9900;
padding-bottom: 1px;
margin-bottom:0;
}
/* ----- SECTIONS ----- */
#section1 {
background-color:#FF9933;
padding: 20px 20px 20px 20px;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li class="active"><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
<br /> <!-- If I remove this, the section overlaps the tabs! -->
<div id="section1">
Hello
</div>
</body>
</html>
I know I know, it's very basic! The problems im trying to figure out are as follows.... 1. This code displayed in Firefox, works as i'd expect. But under the dreaded IE, it displays the tabs diagonally down the page. I know that IE doesn't work as it should, but how do I get the tabs to look the same in IE as they do in Firefox (ie... display them correctly!) 2. The tabs are meant to sit right on top of the section of orange. Using the BR tag (commented in script), I can get it to move down a little bit - but how do I achieve positioning the section box right underneath the tabs using CSS? All help is appreciated! JT p.s. Attached a screenie of the browser output for reference! Similar TutorialsMorning guys, Im coding my blog and well im having big issues with the tabbed navigaion. Attached to this post you will see a image of what my headers suppose to look like. NOTE: ignore the homepage button NOTE: the green button is what i want to happen as a roll over effect Here is what it looks like in code; URL Check it in firefox and in IE, both have issues. Here is the XHTML: Code: <div id="container" align="center"> <div id="header"> <div id="navbox"> <ul> <li><a href="#">Home</a></li> <li><a href="#">What I Do</a></li> <li><a href="#">Recent Work</a></li> <li><a href="#">Contact Me</a></li> </ul> <img src="images/temp.gif" alt="dg" width="130" height="35" /> </div></div> <div id="content"> </div> <div id="footer"> </div> </div> CSS : Code: body {
margin: 0px;
padding: 0px;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
}
#container {
color: #444444;
line-height: 140%;
font-size: small;
font-family: Tahoma;
padding: 0px;
margin: 0px;
}
#header {
width: 750px;
margin: 0 auto;
height: 195px;
background-image: url(images/headerbg.gif);
background-repeat: no-repeat;
}
#tabnav {
padding-top: 100px;
}
#tabnav ul {
display: table-cell;
list-style-type: none
}
#tabnav li {
list-style: none;
float: left;
margin-left: 5px;
width: 129px;
height: 35px;
background-image: url(images/buttonnormal.gif);
background-repeat: no-repeat;
}
#tabnav li a {
display: block;
padding-top: 8px;
width: 129px;
height: 27px;
font-size: 12px;
font-family: tahoma;
font-weight: bold;
color: #4d4d4d;
text-decoration: none;
}
#tabnav li a:hover {
background-image: url(images/buttonroll.gif);
background-repeat: no-repeat;
width: 129px;
height: 35px;
font-size: 12px;
font-family: tahoma;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
#tabnav li a:active {
background-image: url(images/buttonactive.gif);
background-repeat: no-repeat;
width: 129px;
height: 35px;
}
#tabnav li a:visited {
}
#tabnav li a:visited:hover {
}
#content {
}
#footer {
}
Could someone help me with this please? and it it to look like the picture Its been troubling me for days. Mak Hi... I am not a coder, Im new at this. Im not even really sure how to explain my problem either, so bear with me, please. I am working on a theme for a site that allows you to edit the css style applied to the page, like myspace.com. Unfortunately there are limitations to this, like how many section IDs there are and such. In order to make a custom page, I am using ordered lists in BBcode. In forefox, I was able to move the ordered lists outside of their section by using positioning, but unfortunately in IE, it would not allow this. Basically the lists would be hidden/invisible outside of the section element parameters. So, again in order to work around this, I made the section the ordered lists were in cover the entire page. Firefox handled this fine, and the elements on the page worked together so long as text was not right on top of links etc. IE, no such luck. The links in another section do not activate even though they are not visually overlapping. This creates a problem for me, as I will now need to make another ordered list to create links which will activate. Is there a way I can get around this? Because I have a section which covers the entire page in IE, and overlaps onto other sections, I'm looking for code which will allow the sections in IE to overlap without causing one section or the other to behave incorectly. Anyway, here is the link to my page so you can see what I mean. The links in question are the little glowy circles. They work in firefox, but they only appear in IE and will not act as links. Any help would be appreciated. I dont mind re-doing the code and the lists in order to avoid adding more code to create links which work. http://www.gaiaonline.com/profile/index.php?view=profile.ShowProfile&item=305091 Thanks Kim Hi, my css drop down menu seems to be working fine in firefox, but there are a few problems in IE. It didn't even work in IE7 until I added Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 1. In IE7, if you first hover over the link to get the drop down menu to show, move away, then hover over the menu again, it will show the blank sub menus of the one you last have opened. This is hard to explain. Please see my webpage for what I mean. http://ling.twinner.com.tw/uselink/index.php Move your mouse to the Products link at the top. 2. My menu seems to load slow. Is it because I have many sub menus or is my css not efficient? 3. How do I set the sub menu height to auto? Here is my css: http://ling.twinner.com.tw/uselink/menu_style.css Any suggestion is greatly appreciated. Hi all, I have a 2-column layout for my web pages plus a header and footer section. The left column contains a navigation menu (which grows and shrinks depending on the current menu selection), and the right column contains the main text and other information. I float the nav menu left. No problem. But when the footer is displayed (and I have set "clear: both" on the footer element to try and keep it at the bottom), it will appear somewhere in the middle of the menu in cases where the menu is long (vertically) and the main content area contains only a few lines of text. My current method to drop the footer below the menu is very klunky, and probably what most people do (unless they know of a better way). Yes, the series of <br /> tags before printing the footer. Is there a better way of ensuring that the footer is placed where it should (below all other content) so I don't have to insert all those <br /> tags? My CSS for the page layout is: Code: #doc { /* Main document area */
margin-left: 5%;
margin-right: 5%;
margin-top: 5px;
border: solid 1px #900;
}
#logo {
text-align: center;
background: #c30000;
}
#main {
margin-left: 150px;
margin-right: 0%;
padding: 10px;
border-left: solid 1px #c00;
background: #fff;
color: #000;
}
#nav {
position: absolute;
margin-left: 0%;
float: left;
padding: 0px;
border: 0px;
top: 110px;
width: 150px; /* Same as margin-left setting in #main */
color: #000;
}
#footer {
clear: both;
margin-left: 0%;
margin-right: 0%;
border-bottom: 2px solid #906;
background-color: #c00;
color: #ddd;
font-weight: bold;
text-align: center;
line-height: 1.5;
}
And a typical html page would be structured thusly: Code: <!-- USUAL HTML BEGINNING STUFF HERE -->
<body>
<div id="doc">
<!-- Logo image -->
<div id="logo">
<!-- LOGO GOES HERE -->
</div>
<!-- Main content window -->
<div id="main">
<!-- MAIN CONTENT GOES HERE -->
</div>
<!-- Navigation menu -->
<div id="nav">
<!-- NAV MENU CODE HERE -->
</div>
<!-- footer -->
<div id="footer">
<!-- FOOTER CODE HERE -->
</div>
</div>
</body></html>
Is my CSS coding incorrect, or is this a universal problem? Any help/suggestions will be much appreciated. Hi Guys! Most of the links in my document are set to #ffffff, because they have a dark background. I have 'content' section that I want to show blue links. I tried adding the following code into my style sheet: PHP Code: a.content:link { color: #0000FF; text-decoration: underline; } a.content:visited { color: #0000FF; text-decoration: underline; } a.content:hover { background-color: #6666FF; text-decoration: underline; } And nothing!? (apart from the layout crapped up!!!!) Could someone point me in a better direction? Full CSS below! Thanks Charlie PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(images/newback.jpg); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: sans-serif; font-size: .7em; } #wrap { background-image:url(images/newback150px.jpg); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} div#navbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#formbox { color: #000000; padding: 2%; border: #000044 solid 1px; } div#userbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} #header { background-color: #000044; background-image:url(images/wel.jpg); width 100%; background-repeat: repeat; border-bottom: 2px #000000 solid; color: #ffffff; margin:0; padding:0; height:100px; } } #left { float:left; width:149px; background-image:url(images/newback.jpg); background-repeat: repeat; color: #ffffff; text-align:center; background-color: #000044; border-right: 1px #000000 solid; } #main { position:relative; margin-left:200px; } #content { text-align:center; padding:4px; margin-right:200px; margin-bottom:150px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000044; border-top: 2px #000000 solid; margin:0; padding:0; background-image:url(images/newback.jpg); background-repeat: repeat; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 0%; text-align: center; height:140px; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -180px; border: 2px #000000 solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } h1 {font-size: 1.4em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h2 {font-size: 1.3em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h3 {font-size: 1.2em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h4 {font-size: 1.1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h5 {font-size: 1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} a:link {color: #ffffff; text-decoration: underline;} a:visited { color: #ffffff; text-decoration: underline;} a:hover {color: #dedbcb; background-color: #0000FF; text-decoration: underline;} i have just finished making a site for a collective of illustrators I belong to, and now I'm hearing back that some people are having trouble with it. It's at www.illustratorselbow.com (I'm not allowed to post a url without spaces!) & i'm hoping people might be able to have a look at it & view the source and help me out. If you click on somebody's name, you see the thumbnails on the right and the image on the left. When you compress the window, the thumbnails jump about and shrink. I want to make it so this can't happen- I'd rather that the section with the main image in it compressed a bit, or would side-scroll. Any idea how to do this? I'm pretty new to CSS too so I don't really know how to fix this. It's just a drag because on computers with smaller screens/resolutions, the thumbnails look really messy. (Bear in mind that I have extremely basic knowledge of html/css/php, i hand code rather than use dreamweaver etc, and I've never used php or css before this site. I started using it because I keep hearing that frames are bad news nowadays, but it's been sooo much trouble with my limited abilities... alas) Hello, I can't seem to figure out how to make my CSS drop down menu work the way I want it to. I am using an id in the body tag and a class in the navigatin links so the style sheet will mark what section of the site you are in by making the background change color. This works. The problem is, now that I have the sections being marked, the highlight no longer works. How can I get the highlight to work in the section you are in? I have been experimenting for hours but I can't make it work. http://www.tpxdesign.com/test/Valliant/alpha/index7.php My nav menu code and nav style sheet: Code: <!--[if !IE]><!-- start nav --><![endif]-->
<div id="side_nav_bar" class="floater">
<div id="nav_menu">
<ul id="nav">
<li><a href="demoreel.php" class="port">Portfolio</a>
<ul>
<li><a href="demoreel.php" class="port">Demo Reel/s</a></li>
<li><a href="shorts.php" class="port">Shorts</a></li>
<li><a href="musicvid.php" class="port">Music Video</a></li>
<li><a href="comvid.php" class="port">Commercial</a></li>
<li><a href="miscvid.php" class="port">Misc. Video/Film</a></li>
<li><a href="gallery.php" class="port">Photo. Gallery</a></li>
</ul>
</li>
<li><a href="services.php" class="serv">Services</a>
</li>
<li><a href="newupdate.php" class="newe">News & Events</a>
<ul>
<li><a href="newupdate.php" class="newe">News/Updates</a></li>
<li><a href="eventblog.php" class="newe">Event Calendar</a></li>
</ul>
</li>
<li><a href="bio.php" class="about">About Valliant</a>
<ul>
<li><a href="resume.php" class="about">Resume</a></li>
<li><a href="bio.php" class="about">Biography</a></li>
<li><a href="contact.php" class="about">Contact</a></li>
</ul>
</li>
<li><a href="links.php" class="link">Links</a></li>
<li><a href="index7.php" class="home">Home</a></li>
</ul>
</div>
</div>
<!--[if !IE]><!-- end nav --><![endif]-->
Code: ul {
margin: 0;
padding: 0;
list-style: none;
width: 199px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 198px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
#home .home, #about .about, #link .link, #newe .newe, #serv .serv, #port .port
{
color: #000;
background-color: #eee;
}
i'm trying this CSS Tab deelio, but I can't seem to get it right. I'm kind of new to this, but check out this page and tell me what I'm doing wrong. Thanks! (URL address blocked: See forum rules) Hi, New to CSS and all. Trying to work on a web site. I used a Wordpress theme and modified it to my liking. I am having a small issue that I would really appreciate help on. marinhome.inwire .net/lessons The page uses tabs. When you click from one tab to another, the tab content is shifting down. Can somebody please let me know what the problem is? Thanks, Gaurav I've found a number of great examples of how to do tabs with CSS (http://unraveled.com/projects/css_tabs/ being the one I'm working off of), but they all link to various other HTML pages. Does anyone know of a reasonably simple way to do them inline? (think www.johnkerry.com) I'm sure there's javascript involved, but does anyone know of a good resource on how to accomlish something like this? I am using tabs to switch between screens. So the tabs could be information, telephone, notes etc. So its the same customer just different aspects of their information. This has worked well however I now want to add a sideways tab system. This means I want to use similar tabs but rotate it 90 degrees. So its on its side. I was wondering if anyone had come across tabs that where on thier side before and a link to a tutorial would be great! thanks. Heya, Any ideas how I can center the tabs on this page? http://explosiveracing.net/testing/menu.html The HTML and CSS is self explanatory. Thanks Was working on a new design for one of my sites today and when I inadvertently discovered using buttons as tabs, however... I am more of a programmer than I am a designer. The tabs look differently in Firefox than they do in IE. In IE, I give the currently tab more padding than the other buttons and those other buttons stay attached to the <div> below them. In Firefox/Mozilla, the other buttons are raised up. See here* *You will notice that the Home page has rounded corners, while the About page does not; can't decide which one I like better The other issue I have in IE is that when I button is being clicked/activated, it detaches itself from the <div> below. -- Maybe a good time to also ask how I can accomplish something using div's or span's that I used to do with table's: How would I have a 700px wide box, with a div at the top, split 50/50 so that I could have a small logo at the top left and a search box (on the same row) at the top right? I have always: Code: <table width="700"> <tr> <td width="50%">logo</td> <td width="50%" align="right">search box</td> </tr> </table> -- One mo If I am using HTML 4.01 strict, can I still use: Code: <td align="center" valign="middle"> or do I have to: Code: <td style="text-align:center;vertical-align:middle"> Cheers! Code: <div id="s_site"> <a href="#site">This site</a> <h2 id="site_h">About This Memorial Site</h2> <p id="site_p" class="tab_cont">This site is brought to you by the Royal Canadian Branch 3 Legion John Bernard Croak Victorian Cross. In honor of those fallen and served in WW2.</p> </div> the h2 and p element are hidden using display:none; when I click on the anchor link i'd like them to apper using display:block; It seems like I may need to use javascript but I'd rther not use javascript at all, except for thos eunfortunate enough to still be using IE. I can't figure it out I've tried amny thing that didnt work. I've been searching for a selector that will let me access these hidden elements but I can't come up with anything. I half accomplished what I was trying but I can't get the changes to stick. Thanks for reading I have an issue with my first website. I'm trying to center the tabs at the top of my page, but I cannot seem to figure out how to do it. I've tried using floats, auto margins, clears, etc., but nothing seems to be working. Could I get some help on this? http://bud12345.fusedtree.com Here's the CSS: Code: body {
font-family: Verdana, sans-serif;
background-color: #50AD34;
color: #000000;
text-decoration: none;
word-spacing: normal;
text-align: left;
letter-spacing: 0;
line-height: 1.3em;
font-size: 1.2em;
}
.update {
font-style: italic;
font-weight: bold;
font-size: 0.9em;
}
span.updatehead {
text-decoration: underline;
}
div.update {
border-style: solid;
border-width: thin;
border-color: #F77900;
padding-left: 1.0em;
}
#tabsC {
float:left;
width:100%;
background:#50AD34;
font-size:93%;
line-height:normal;
}
#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsC li {
display:inline;
margin:0;
padding:0;
}
#tabsC a {
float:left;
background:url("tableftC.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsC a span {
float:none;
display:block;
background:url("tabrightC.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}
#tabsC a:hover span {
color:#FFF;
}
#tabsC a:hover {
background-position:0% -42px;
}
#tabsC a:hover span {
background-position:100% -42px;
}
I have been monkying around all day with this code and can't seem to get it reversed correctly, so that all the tabs start on the right side instead of the left. I end up messing it up pretty badly and I can't seem to figure out where I am going wrong with it.... any help is appreciated. The example can be seen he http://homelesspixel.de/tabs/ For ease of use I'll paste the HTML and CSS in one: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<style type="text/css">
body {
color: #333;
background-color: #fff;
padding: 20px 20px;
margin:0;
font: normal 11px helvetica, arial, geneva, lucida, sans-serif;
}
h1 {
font-size:2em;
font-weight:normal;
margin:1em 0;
}
ul#topnav {
margin:0 0 100px;
padding: 0 0 0 12px;
list-style: none;
border: none;
}
#topnav li {
display: block;
margin: 0;
padding: 0;
float:left;
}
#topnav a {
display:block;
color:#444;
text-decoration:none;
background: url(images/lia.gif) no-repeat;
margin:0;
padding: 0.2em 2.4em 0.2em 36px;
border-right: 1px solid #aaa;
position: relative;
font: bold 11px helvetica, arial, geneva, lucida, sans-serif;
}
#topnav a#a0 { left: 0px;}
#topnav a#a1 { left: -30px;}
#topnav a#a2 { left: -60px;}
#topnav a#a3 { left: -90px;}
#topnav a#a4 { left: -120px;}
#topnav a#a5 { left: -150px;}
#topnav a#a6 { left: -180px;}
#topnav a:hover {
background: url(images/liahover.gif) no-repeat;
}
#topnav a.here {
position:relative;
z-index:102;
background: url(images/liahover.gif) no-repeat;
border-right: 1px solid #777;
padding: 0.2em 1em 0.2em 35px;
margin: 0 4px 0 0;
}
ul#subnav {
position:absolute;
z-index:101;
margin: -1px 0 0;
left: 10px;
padding: 1px 0px 3px 30px;
background: #bbb;
border-top:1px solid #fff;
border-bottom:1px solid #999;
width: 720px;
}
#subnav li {
position:relative;
z-index:102;
display: block;
margin: 0;
padding: 0;
float:left;
}
#subnav a {
color:#fff;
display:block;
text-decoration:none;
margin:0;
padding: 2px 12px 2px 10px;
background: transparent;
background-image: none;
border: 0 none;
}
#subnav a:hover {
color:#444;
background: transparent;
background-image: none;
border: 0 none;
}
#subnav a.here {
color:#444;
background: transparent;
background-image: none;
border: 0 none;
margin:0;
padding: 2px 12px 2px 10px;
}
</style>
<body>
<h1>Example of CSS-driven tabs</h1>
<ul id="topnav">
<li><a id="a0" href="#">Home</a></li>
<li><a id="a1" href="#">About</a></li>
<li><a id="a2" href="#">News</a></li>
<li><a id="a3" href="#">Proof</a></li>
<li><a id="a4" href="#" class="here">Process</a>
<ul id="subnav">
<li><a href="#">Vision</a></li>
<li><a href="#">Team</a></li>
<li><a href="#" class="here">Culture</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Sponsorship</a></li>
</ul>
</li>
<li><a id="a5" href="#">Expertise</a></li>
<li><a id="a6" href="#">Help</a></li>
</ul>
</body>
</html>
I have too many items for one row of tabs, how do I get a second row? Save this as tab.png URL Here's my working fine one row code: design.css Code: ol#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ol#toc li {
float: left;
margin: 0 1px 0 0;
}
ol#toc a {
background: #bdf url(tab.png);
color: #008;
display: block;
float: left;
height: 2em;
padding-left: 10px;
text-decoration: none;
}
ol#toc a:hover {
background-color: #3af;
background-position: 0 -120px;
}
ol#toc a:hover span {
background-position: 100% -120px;
}
ol#toc li.current a {
background-color: #48f;
background-position: 0 -60px;
color: #fff;
font-weight: bold;
}
ol#toc li.current span {
background-position: 100% -60px;
}
ol#toc span {
background: url(tab.png) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
div.content {
border: #48f solid 3px;
clear: left;
padding: 1em;
}
h1.html Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1 row</title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>1 row</h1>
<ol id="toc">
<li class="current"><a href="h1.html"><span>H1</span></a></li>
<li><a href="h2.html"><span>H2</span></a></li>
<li><a href="h3.html"><span>H3</span></a></li>
</ol>
<div class="content">
<h2>H1</h2>
<p>Pic and text...</p>
</div>
</body>
</html>
And here's my bad attempt at 2 rows! design2rows.css Code: ol#toc {
height: 2em;list-style: none;
margin: 0;
padding: 0;
}
ol#toc li.first {
float: left;
margin: 0 1px 0 0;
}
ol#toc li.drop {
clear: left;
margin: 0 1px 0 0;
padding:0 0 0 6px;
}
ol#toc a {
background: #bdf url(tab.png);
color: #008;
display: block;
float: left;
height: 2em;
padding-left: 10px;
text-decoration: none;
}
ol#toc a:hover {
background-color: #3af;
background-position: 0 -120px;
}
ol#toc a:hover span {
background-position: 100% -120px;
}
ol#toc li.current a {
background-color: #48f;
background-position: 0 -60px;
color: #fff;
font-weight: bold;
}
ol#toc li.current span {
background-position: 100% -60px;
}
ol#toc span {
background: url(tab.png) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
div.content {
border: #48f solid 3px;
clear: left;
padding: 1em;
}
q1.html Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab 2 row</title>
<link href="design2row.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Tab 2 row</h1>
<ol id="toc">
<li class="first">
<li class="current"><a href="q1.html"><span>1</span></a></li>
<li><a href="q2.html"><span>2</span></a></li>
<li><a href="q3.html"><span>3</span></a></li>
<li><a href="q4.html"><span>4</span></a></li>
<li><a href="q5.html"><span>5</span></a></li>
<li><a href="q6.html"><span>6</span></a></li>
<li><a href="q7.html"><span>7</span></a></li>
<li><a href="q8.html"><span>8</span></a></li>
<li><a href="q9.html"><span>9</span></a></li>
<li><a href="q10.html"><span>10</span></a></li>
<li><a href="q11.html"><span>11</span></a></li>
<li><a href="q12.html"><span>12</span></a></li>
<li><a href="q13.html"><span>13</span></a></li>
<li><a href="q14.html"><span>14</span></a></li>
<li><a href="q15.html"><span>15</span></a></li>
<li><a href="q16.html"><span>16</span></a></li>
<li><a href="q17.html"><span>17</span></a></li>
<li><a href="q18.html"><span>18</span></a></li>
</li>
<li class="drop">
<li><a href="q19.html"><span>19</span></a></li>
<li><a href="q20.html"><span>20</span></a></li>
<li><a href="q21.html"><span>21</span></a></li>
</li>
</ol>
<div class="content">
<h2>1</h2>
<p>Pic and text...</p>
</div>
</body>
</html>
Hello all - I am trying to implement tabs to my forum, I currently have some on there but I like the looks better of the new ones that I am trying to get going. I find that when I get them working (using additional CSS as well as navbar/header edit) it will not work in all browsers. If I post the CSS as well as the navbar/header code would you be able to help me track down my issue? EDIT - I was going to post screenshots but was not permitted Hello, I am having some problems with my code. I'm not able to insert these forms properly into these divs. I would like the forms to be placed within the tab (more or less centered), however, how it is now the form is half way in and half out of the tab. When I try and move the form over it distorts the tab image. Please help me fix this problem. I'm uncertain about what is wrong and how to fix it. Thank you in advance. Code:
<head>
<style type="text/css">
body
{
color: black;
}
/*Form Formatting*/
fieldset
{
margin: 1em 0;
padding: 1em;
border: 1px solid #ccc;
background: #000000;
}
legend
{
font-weight: bold;
color: #FFFFFF;
}
label
{
display: block;
}
input [type="text"]
{
width: 200px;
}
input.radio, input.checkbox, input.submit
{
width: auto;
}
input.radio
{
float: left;
margin-right: 1em;
}
input.author:focus, input.email:focus
{
background: #E9C2A6;
}
input[type="text"]
{
border-top: 2px solid #999;
border-left: 2px solid #999;
border-bottom: 1px solid #ccc;
}
.required
{
font-size: 0.75em;
color: green;
}
.author, .email, .subscribe-yes, .subscribe-no, .checkbox/*.HTML_Box, .Plain_Text*/
{
color: #FFFFFF;
}
/*--------------------------------------------------------------------------------------------------------------------------------------*/
/*Form Placement*/
#Display_Name
{
margin: auto 33% auto 33%;
width: 150px;
left: 100px;
}
#Details
{
margin: auto 33% auto 33%;
}
#Subscription
{
margin: auto 33% auto 33%;
width: 150px;
}
#Mailing
{
margin: auto 33% auto 33%;
width: 180px;
}
#Submit_Subscription
{
margin: auto 33% auto 33%;
}
#HTML_Box
{
float: none;
}
#PText_Box
{
float: right;
}
/*------------------------------------------------------------------------------------------------------------------------------------*/
/*Background Tab*/
/* set the image to use and establish the lower-right position */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2
{
background: transparent url(../../Working/red_tab.php.png) no-repeat bottom right
}
.cssbox
{
/* intended total box width - padding-right(next) */
width: 250px !important; /* IE Win = width - padding */
width: 320px; /* the gap on the right edge of the image (not content padding) */
padding-right: 15px; /* use to position the box */
margin: 20px auto;
}
/* set the top-right image */
.cssbox_head
{
background-position:top right;
/* pull the right image over on top of border */
margin-right:-15px;
/* right-image-gap + right-inside padding */
padding-right:40px
}
/* set the top-left image */
.cssbox_head h2
{
background-position:top left;
margin:0; /* reset main site styles*/
border:0; /* ditto */
/* padding-left = image gap + interior padding ... no padding-right */
padding:8px 0 0px 40px;
height:auto !important;
height:1%; /* IE Holly Hack */
font-family: Comic Sans MS, Arial, sans-serif;
}
/* set the lower-left corner image */
.cssbox_body
{
background-position:bottom left;
margin-right:25px; /* interior-padding right */
padding:15px 0 15px 40px; /* mirror .cssbox_head right/left */
}
</style>
</head>
<body>
<!--Tab-->
<div class="cssbox">
<div class="cssbox_head">
<h2>Mailing List</h2>
</div>
<div class="cssbox_body">
<!-- Contact Info -->
<div id="Display_Name">
<fieldset id="Details">
<legend>Contact Details</legend>
<!--Name-->
<label for="author" class="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" size="25"/>
<!-- E-mail Address-->
<label for="email" class="email">Email: <em class="required">(Required)</em></label>
<input name="email" id="email" type="text" size="25" maxlength="200"/>
<!-- E-mail Format-->
<div id="HTML_Box">
<p>
<input class="checkbox" id="HTML" name="HTML" type="checkbox"
value="HTML" />
<label>HTML</label>
</p>
</div>
<div id="PText_Box">
<p>
<input class="checkbox" id="Plain_Text" name="Plain_Text" type="checkbox"
value="Plain_Text" />
<label>Plain Text</label>
</p>
</div>
</fieldset>
</div>
<!-- Subscription Question -->
<div id="Subscription">
<fieldset id="Mailing">
<legend>Join Mailing List?</legend>
<p>
<input id="add-subscribe" class="radio" name="add" type="radio"
value="subscribe" checked="checked" />
<label for="add-subscribe" class="subscribe-yes">Subscribe</label>
</p>
<p>
<input id="add-unsubscribe" class="radio" name="add" type="radio"
value="unsubscribe" />
<label for="add-unsubscribe" class="subscribe-no">Unsubscribe</label>
</p>
<!-- Mailing List Submit Button -->
<div id="Submit_Subscription">
<input id="enter" type="submit" value="Submit" />
</div>
</fieldset>
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------
I've search these forums and found several threads about this topic but none have any real answers to this issue. I've got some navigation tabs, similar to Sitepoint's tabs. How does one go about centering them in the page? My site: http://www.webhelpzone.com/ CSS: Page Layout and Navbar Styles I've tried doing this: Code: ul#nav {
position: absolute;
left: 50%;
width: 505px;
margin-left: -252px;
}
Which actually centers the navigation bar, but when the browser is shrunk down, the bar ends up being pushed off the screen. Sitepoint's nav bar just shrinks down, remaining centered in the browser window. How do you accomplish the centering of navigational tabs? |
|||||||