Jump to content

Search the Community

Showing results for tags 'div'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

  1. Gerbrandd

    Aligning <div>

    Hello, I'm experiencing a little problem when trying to align different div sections. The page loads correctly in Safari/Chrome but when using other browsers, there is a little displacement (see image). I don't know what is causing the problem. Hope anyone of you can help me. Thanks in advance! <html><head>(...)<style>body{background-color:rgb(235,235,235);}.header{background-color:rgb(17,76,131);position:absolute;top:0px;left:0px;right:0px;height:120px;}.base{background-color:rgb(250,193,37);margin:auto;padding-bottom:15px;width:980px;padding-top:125px;height:auto;text-align:center;}.tabbed_box{margin:0px auto 0px auto;width:950px;}.tabbed_area{border:1px solid #494e52;background-color:#636d76;padding:8px;}ul.tabs{margin:0px;padding:0px;margin-top:5px;margin-bottom:5px;}ul.tabs li {list-style:none;display:inline;}ul.tabs li a{background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;text-transform:uppercase;border:1px solid #464c54;}ul.tabs li a:hover{background-color:#2f343a;border-color:#2f343a;}ul.tabs li a.active{background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom:1px solid red;}ul.list{list-style-type: square;font-family:"Segoe UI", sans-serif;font-size:14px;}.content{background-color:#ffffff;padding:10px;border:1px solid #464c54;text-align:left;font-size:12px;font-family:Verdana, Arial, Helvetica, sans-serif;}#content_2,#content_3,#content_4,#content_5,#content_6,#content_7,#content_8,#content_9 {display:none;}</style></head><body><div class="header">Test?</div><div class="base"> <div id="tabbed_box_1" class="tabbed_box"> <div class="tabbed_area"> <script src="js/functions.js" type="text/javascript"></script> <ul class="tabs"> <li><a href="javascript:tabSwitch_2(1,9,'tab_','content_');" id="tab_1" class="active">Ligging</a></li> <li><a href="javascript:tabSwitch_2(2,9,'tab_','content_');" id="tab_2">Faciliteiten</a></li> <li><a href="javascript:tabSwitch_2(3,9,'tab_','content_');" id="tab_3">Logies</a></li> <li><a href="javascript:tabSwitch_2(4,9,'tab_','content_');" id="tab_4">Eten & Drinken</a></li> <li><a href="javascript:tabSwitch_2(5,9,'tab_','content_');" id="tab_5">Sport</a></li> <li><a href="javascript:tabSwitch_2(6,9,'tab_','content_');" id="tab_6">Animatie</a></li> <li><a href="javascript:tabSwitch_2(7,9,'tab_','content_');" id="tab_7">Kinderen</a></li> <li><a href="javascript:tabSwitch_2(8,9,'tab_','content_');" id="tab_8">Extra</a></li> <li><a href="javascript:tabSwitch_2(9,9,'tab_','content_');" id="tab_9">Prijzen & Contact</a></li> </ul> <div id="content_1" class="content">Content for Tab 1</div> <div id="content_2" class="content">Content for Tab 2</div> <div id="content_3" class="content">Content for Tab 3</div> <div id="content_4" class="content">Content for Tab 4</div> <div id="content_5" class="content">Content for Tab 5</div> <div id="content_6" class="content">Content for Tab 6</div> <div id="content_7" class="content">Content for Tab 7</div> <div id="content_8" class="content">Content for Tab 8</div> <div id="content_9" class="content">Content for Tab 9</div> </div> </div></div></body></html>
  2. Hello, not sure if it's this board i should ask (html)...but tell me if im wrong. i have seemed on some few site's im comming on sometimes, that they have some sort of div-box that follows the screen all the time, evem if you scroll down on the page. is it possible to do this?.. i mean, how to do this in css/html.. is it possible?, or DO i need Jquery/Javascript or wtf i now need? Oo.. i just think it would be a smart thing to have on my own website ...
  3. Hello Internet. Back for another question. I am using CSS styling to make an image larger during a hover event. I have made the code work for IE but Safari does not like it. Actually what Safari is doing is once you click on the image it will show the original image AND the hover image together and separated. The desired effect is that once you hover over an image it will increase the image size. Please help... Here is my CSS code:.thumbnail{position: relative;}/*CSS for enlarged image*/.thumbnail span{position: relative;padding: 0px; left:0px; border: 0px solid #000000;visibility: hidden; color: black; text-decoration: none;}/*CSS for enlarged image*/.thumbnail span img{border-width: 1px solid #000000;padding: 0px;}/*CSS for enlarged image on hover*//*position where enlarged image should offset horizontally */.thumbnail:hover span{visibility: visible;top: -64px;left: -5px;} /*CSS to place DIV around the original image so it does not disturb the rest of my page*/.enlrg{ width:60px; height:70px; border: 1px solid #ffffff; float: left; margin-left: 0px;} Here is my HTML Code:<div id="enlarge" class="enlrg"><a class="thumbnail" href="http://espn.go.com/mens-college-basketball/team/_/id/97/louisville-cardinals" target="_blank"><img src="lvillelogo1.jpg" width="50" height="38" style="float: left; margin-left: 13px; margin-top: 20px;"><span><img src="lvillelogo1.jpg" width="60" height="44" style="float: left; margin-left: 13px; margin-top: 20px;"></span></a></div><div id="enlarge" class="enlrg"><a class="thumbnail" href="http://espn.go.com/mens-college-basketball/team/_/id/2483/oregon-ducks" target="_blank"><img src="oregonlogo1.jpg" width="50" height="38" style="float: left; margin-left: 9px; margin-top: 20px;"/><span><img src="oregonlogo1.jpg" width="60" height="44" style="float: left; margin-left: 9px; margin-top: 20px;"></span></a></div>
  4. Hello everyone, let's see if anyone can help me out. I'm creating a page with squares and rectangles div (windows 8 style) spaced from each other 4px. Each div has a title or a mini sentence. I would like: 1 - going with the mouse over the div, it shrinks slightly and changes color, all with a transition;2 - clicking on one div, this one must increase in the vertical and horizontal size because I need that, into the div will appear text boxes where you can enter data which will return a value;3 - when the div size increases, others div should always move in an orderly manner4 - clicking on another div, the first (or earlier) should return little if possible. I don't know if I have explained myself well enough. The site has responsive desgin for pc, tablets and smartphones. I would like this javascript runs on safari, Internet Explorer, crome and firefox. I hope someone can help me out ... Thanks in advance. Andrea
  5. hi there,I have 2 div's my 1st div is a menu with a bit of css3 in it and the 2nd div is animated art work from adobe edge. what i need:i need the animated div to work in the background of the 1st div and bring the 1st div to the front of the stage the problem:the 2nd div is overlapping the 1st div and stopping the menu from working properly my code: <style type="text/css">/* main menu styles */#nav { display:inline-block; width:100%; margin:0px auto; padding:0; background:#008000 url(../image/bg.png) repeat-x 0 -110px; border-radius:10px; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);}#nav li { margin:10px; float:left; position:relative; list-style:none;}#nav a { font-weight:bold; color:#e7e5e5; text-decoration:none; display:block; padding:8px 20px; border-radius:10px; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; text-shadow:0 2px 2px rgba(0,0,0, .7);}/* selected menu element */#nav .current a, #nav li:hover > a { background:#42FF42 url(../image/bg.png) repeat-x 0 -20px; color:#000; border-top:1px solid #f8f8f8; box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/ -moz-box-shadow:0 2px 2px rgba(0,0,0, .7); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7); text-shadow:0 2px 2px rgba(255,255,255, 0.7);}/* sublevels */#nav ul li:hover a, #nav li:hover li a { background:none; border:none; color:#000;}#nav ul li a:hover { background:#0F0 url(../image/bg.png) repeat-x 0 -100px; color:#fff; border-radius:10px; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; text-shadow:0 2px 2px rgba(0,0,0, 0.7);}#nav ul li:first-child > a { -moz-border-radius-topleft:10px; /*some css3*/ -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px;}#nav ul li:last-child > a { -moz-border-radius-bottomleft:10px; /*some css3*/ -moz-border-radius-bottomright:10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px;}/* drop down */#nav li:hover > ul { opacity:1; visibility:visible;}#nav ul { opacity:0; visibility:hidden; padding:0; width:175px; position:absolute; background:#95FF95 url(../image/bg.png) repeat-x 0 0; border:1px solid #7788aa; border-radius:10px; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-transition:opacity .25s linear, visibility .1s linear .1s; -webkit-transition:opacity .25s linear, visibility .1s linear .1s; -o-transition:opacity .25s linear, visibility .1s linear .1s; transition:opacity .25s linear, visibility .1s linear .1s;}#nav ul li { float:none; margin:0;}#nav ul a { font-weight:normal; text-shadow:0 2px 2px rgba(255,255,255, 0.7);}#nav ul ul { left:160px; top:0px;}</style> <script type="text/javascript" charset="utf-8" src="../anim_edgePreload.js"></script> <style> .edgeLoad-EDGE-16622662 { visibility:hidden; } </style> <div style="width:700px; height:200px;"> <ul id="nav"> <li class="current"><a href="#">Home</a></li> <li><a href="#">My Account</a> <ul> <li><a href="#">Manage My Account</a></li> <li><a href="#">Update Login Info</a></li> </ul> </li> <li><a href="#">Main menu</a> <ul> <li><a href="#">itme1</a> <ul> <li><a href="#">itme11</a></li> <li><a href="#">itme12</a></li> </ul> </li> <li><a href="#">itme2</a></li> <li><a href="#">itme3</a></li> <li><a href="#">itme4</a></li> <li><a href="#">itme5</a></li> <li><a href="#">itme6</a> <ul> <li><a href="#">itme61</a></li> <li><a href="#">itme62</a></li> </ul> </li> <li><a href="#">itme7</a></li> </ul> </li> <li><a href="#">menu 2</a> <ul> <li><a href="#">itme1</a> <ul> <li><a href="#">itme2</a></li> <li><a href="#">itme3</a></li> </ul> </li> <li><a href="#">itme99</a> <ul> <li><a href="#">itme25</a></li> <li><a href="#">itme26</a></li> </ul> </li> </ul> </li> <li><a href="#">Help</a></li> <li><a href="#">Log out</a></li> </ul> <div id="Stage" class="EDGE-16622662"></div></div> any help?
  6. Hi there,I really need help. Im willing to pay for that. Im trying to post an add on a website which accept HTML. The problem is I was using image maping an everything was working fine for around 3 months but suddenly stopped working. I see HTML editor from that website delete maping HTML code when I save the HTML. Well, I changed to used Fireworks and Photoshop HTML code created when sliced my image and added links. I discover I only can use table or div but each sliced image appear with a space around each one. In other words, every sliced image are separated by one space. I dont know what to do.HTML code is in attachment.Please help me ASAP.Thank you in advancead.txt
  7. Ok- hope someone can help, as this is driving me nuts! I have 2 divs, left-floated within a wrapper div. The rigth side div is set to overflow:auto. The content correctly shows up with a scrollbar at most sizes. However, when I make the page narrower, it falls to the next line, instead of making the div narrower- why? Now, I realise I can set a min page width to stop this from happening, but right now that would have to be set at something like 1300px, which seems too wide to me for a min width. But I don't understand why the right div would fall to a new line instead of just getting narrower? Here's a link to the page if you want to try it out: http://portraits.carissalyn.com/ Here's my css: #header {height:60px;} body,html{min-width:1000px; height:100%; margin:0; padding:0; min-height:600px;overflow-y:hidden;overflow-x:auto; width: 100%; } body { font-family: Arial; background-color: #B8B8B8;}#wrapper {max-width:1200px;background-color: #B8B8B8;min-height:600px;height: 100%; color: #B8B8B8;margin-left: auto;margin-right: auto;white-space: nowrap;} #logo{float:left;color:#fff;width:200px;padding: 75px 15px 15px 0px;}#content {float: left;max-width:80%;color: #000;overflow:auto;} .table {margin:auto; padding: 10px;}.table td { padding: 5px; font-family: arial, sans-serif; text-align:center;color: #cccccc; font-size: 120%;}.table th { padding: 5px; font-family: arial, sans-serif;} and here's the html: <!DOCTYPE html><html lang="en"><head><title>Carissa Lyn Photography</title><link href="site_style.css" rel="stylesheet" type="text/css" media="screen"> </head><body><div id="header"></div><div id="wrapper"> <div id="logo"><img src="images/logo_design.png" alt="logo"></div> <div id="content"> <table class="table"> <tr> <td><img src="images/photo1.jpg" alt="portrait"></td> <td><img src="images/photo2.jpg" alt="portrait"></td><td><img src="images/photo3.jpg" alt="portrait"></td> <td><img src="images/photo4.jpg" alt="portrait"></td><td><img src="images/photo5.jpg" alt="portrait"></td> <td><img src="images/photo6.jpg" alt="portrait"></td> </tr> </table> </div> </div> </body></html>
  8. yoyo w3...ive been starting up on a project... but now the design is crap inside explore, and just finded out... this is how it SHOULD look like (notice the boxes are in the middle...): and this is how it IS looking right now.. : and that is the WRONG design.. i need the boxes to center in the middle...this is my setup skin: function stdhead($title = ""){global $MT;/*Stylesheet Mod...*/if($CURUSER){ $HWT['stylesheet'] = isset($CURUSER['stylesheet']) ? "{$CURUSER['stylesheet']}.css" : $MT['stylesheet'];}/*Stylesheet Mod...*/$HTMLOUT = "";/*Starting the variable...*/$HTMLOUT .= "<head><meta http-equiv='Content-Type' content='text/html'; charset='iso-8859-2' /><title>{$title}</title><link rel='shortcut icon' href='favicon.ico' /><link rel='stylesheet' href='styles/{$MT['stylesheet']}.css' type='text/css' /></head><body>";$HTMLOUT .= "<div id='header'>";$HTMLOUT .= "Header/Banner...";$HTMLOUT .= "</div>";$HTMLOUT .= "<div id='status_bar'>";$HTMLOUT .= "Stats...";$HTMLOUT .= "</div>";$HTMLOUT .= "<div id='menu'>";$HTMLOUT .= "Menu/Links...";$HTMLOUT .= "</div>";$HTMLOUT .= "<div id='main_content'>";$HTMLOUT .= "Content Place...";return $HTMLOUT;}function stdfoot(){$HTMLOUT = "";/*Starting the variable...*/$HTMLOUT .= "</div>";//Ending main_content...$HTMLOUT .= "<div id='footer_bar'>";$HTMLOUT .= "MightyTracker © 2013-2014";$HTMLOUT .= "</div>";//Ending Footer...$HTMLOUT .= "</body></html>";/*Local HTML Ending...*/return $HTMLOUT;} and this is my CSS: @charset "iso-8859-2";/* CSS Document */* {margin:auto;padding:auto;font-size:8pt;}body {background-color:#151515;color:#FFF;}#header { background-color:#111111; color:#FFF; width:1000px; height:100px;/*Configure for banner place...*/ position:relative; margin:auto; padding:auto;}#status_bar { background-color:#222222; color:#CCC; width:1000px; height:auto; margin:auto; padding:auto;}#menu { background-color:#333333; color:#FFF; width:99%; margin:auto; padding:auto; height:auto;}#main_content { background-color:#444444; color:#FFF; width:99%; height:auto; margin:auto; padding:auto;}#footer_bar { background-color:#333333; color:#FFF; width:99%; height:auto; margin:auto; padding:auto;} and im not sure what i have done wrong... but i have tried almost everything i think i could come up with... so asking here now...note that i also have tried position:relative... nofthing... its like its just ignoring the damn css in the explore... ideas?...
  9. hey guys, I seem to have a few problems with my divs. I've added my .html and .css file so you can check my code. It might be a bit messy in those files so i hope it's still understandable. here are my problems. First one: there's a small white space in between the upper 2 black bars. I want this space to be as wide all the way down to the footer. Somehow it won't work and I can't figure out why. It looks like the containing div is messing it up. second problem: the small divs on the right side seem to be a few pixels too big on the right and go outside of the containing div. How can i prevent this from happening? It looks like this is also happening to the 4 bigger divs on the right but I'm not sure. Last problem: The footer is acting weird and i just can't figure out how to fix it. I'm actually thinking all these problems have a single solution to make it all work. But at the moment i am just clueless. I hope some one can help me out here.It would be very appreciated. Thanks in advance! Porkypie style3.csstest.html
  10. Hey, I've added a screenshot to make it easier to for you guys to help me. I'm not sure why this is happening because I haven't changed a thing and it was al perfectly fine before. My web developer program shows my <ul>'s -webkit-padding-start: 40px;. So I've tried to change it to 0 pixels in my CSS file but nothing won't change.Does someone have an idea how I can make the space around the <ul> go away. Thanks in advance! Greets,Porkypie
  11. Hey, I have to use HTML & CSS to make a project for school. I'm a beginner and i'm having a small problem. After a lot of searching on the internet and not finding a solution I decided it woud be best to ask for some help here. I've attached a .css and .html file to this post so you can see what i did . What I want to accomplish is 2 rows with 3 <div>'s next to eachother. Together they should have the same width as the menu and every <div> should have the same size. Also they should be underneath the grey bar and above the footer. As you can see right now there's 6 <div>'s next to each other and they're definitly not the right size. I would really appreciate it if someone could explain me how I can fix the <div>'s so i can make them look like how I want them to (preferably in baby-language). If my story isn't clear enough but you want to help me, don't hesitate to ask Thanks in advance! greets,Porkypie Style.cssTeams.html
  12. So I'm pretty new with all this and have just been learning xml, javascript, html5 and css3 over the last week or so to work on this idea. I've got a lot of the background stuff in a rough draft and set up in place, and for the most part I'm working on just displaying it all now. I have a side column (nav) which I'm using a transition to slide on and off the page, with an arrow "button" attached to do this. The arrow is an embeded SVG on a <div> tag with an absolute position to the nav column, so when the column.left property is slid off screen the arrow slides with it. The issue though is that the div tag is not firing the onclick event I have setup calling the javascript to change the .left property. Initially as I was first building it I just activated the script by clicking on the nav and it worked fine until I started implementing the arrow. I've tried a few options and I think I'm stuck. Note: the script runs fine, I can even just inject toggleNav(); and it goes back and forth perfectly. Here's the focus of the code: onclick Event <script> // Scripts for sidebarsfunction toggleNav(){var navLeft = document.getElementById("nav").style.left; if (navLeft == 0 || navLeft == "0px"){ document.getElementById("nav").style.left = "-251px"; document.getElementById("nodes").style.left = "0px";}else if (navLeft == "-251px"){ document.getElementById("nodes").style.left = "251px"; document.getElementById("nav").style.left = "0px";}}</script> Body <body><header> <h1>BibleGene</h1> <div id="bottomHeader"></div></header><section id="container"> <section id="nav"> <div id="navArr" onclick="toggleNav();"> <embed src="expandArrow.svg" type="image/svg+xml" /> </div> </section> <section id="nodes" onclick="toggleInfo()"> <p id="test"></p> </section> <section id="info" onclick="toggleInfo()"> </section></section> </body> Styles #nav {height: 100%;width: 230px;padding: 0 10px;position: absolute;z-index: 2;left: 0px; background-color: #f7f7f7;border-color: #a5a5a5;border-right-style: solid;border-width: 2px; /* Transition Effects */transition: left 0.5s;-moz-transition: left 0.5s; /* Firefox 4 */-webkit-transition: left 0.5s; /* Safari and Chrome */-o-transition: left 0.5s; /* Opera */}#navArr {height: 20px;width: 20px;margin: 8px 0px; opacity: 0.3; position: relative;z-index: 2;left: 248px;}#navArr:hover {opacity: 1;}#nodes {height: 100%;min-width: 450px;margin: 0 10px;position: absolute;z-index: 1;left: 250px;right: 250px; /* Transition Effects */transition: left 0.5s, right 0.5s;-moz-transition: left 0.5s, right 0.5s; /* Firefox 4 */-webkit-transition: left 0.5s, right 0.5s; /* Safari and Chrome */-o-transition: left 0.5s, right 0.5s; /* Opera */}
  13. The div "rightLines" is extending past the display window in the browser, which is creating an unwanted horizontal scrollbar. Based on the CSS, I can understand why this is happening, but the confusing part is that the same thing doesn't happen for "hNavigation." Why is this? What I'd like to accomplish: To have the "hNavigation" div, and the "rightLines" div to fill the remaining space (of the window) on either side of the "mainContent" div, without having to specify a specific size for both. Perhaps this would be better accomplished with tables? Any help would be appreciated. Here is the code: <body id="theBody"><div id="mainSection"> <div id="theHeader"> <div id="headerStripes"> </div> </div> <div id="hNavigation"> </div> <div id="rightLines"> </div> <div id="mainContent"> </div> </div></body> /** MAIN PAGE **//*==== universal ====*/a {text-decoration: none;}img { border-style: none; text-decoration: none;}#theBody {margin: 0px;padding: 0px;}/*==== header ====*/ #theHeader {height: 80px;width: auto;background-image: url(header-color.png);background-repeat: repeat;position: relative;} #headerStripes {height: 75px;width: auto;background-image: url(diagonal-lines-pattern.png);}/*==== mainContent ====*/#mainSection {background-image: url(diagonal-lines-pattern.png);margin-left: auto;margin-right: auto;background-repeat: repeat;height: 100%;width: 100%;position: absolute; } #mainContent {width: 800px;height: 538px;padding-top: 32px;margin-top: -5px;margin-left: -400px;background-color: #f9e6d7;z-index: -100;position: relative;left: 50%;}#hNavigation {background-color: #000000;width: 50%;height: 564px;margin-left: -400px;float: left; }#rightLines {background-color: #000000;width: 50%;height: 564px;float: right;margin-right: -400px;}
  14. Hi. I was asked to rebuild my company's website. The company gave me access to a temporary server for me to test the website and play around with. Not all menus work but here is the front page: http://www1.ocn.ne.jp/~kvic I got it to look right on Chrome, Firefox and IE8, but not IE6 and IE9. In IE6, the three divs are pushed to the right (the right-most box is moved below the left-most box as a result).In IE9, the feature div is duplicated above itself but it's just a blank box.How do I fix this? I'm really new at this, having taught myself CSS in just 2months+ so the CSS is really messy. Now I know what real web designers face everyday. Please advise. Thank you. Edit: Also, if you find other things that should be fixed or could make the code look tidier, please point them out.
  15. Hi! I have a problem with wrapping the zeroes within the 'content' div although i am using the 'white-space' property with a 'pre-line' value . I don't know where I went wrong. Help please. >_< .content{background-color:green;width:750px;height:510;padding-left:5px;padding-right:5px;border:5px solid gold;margin-left:10px;margin-top:10px;float:left;white-space:pre-line;color:black;} <div class="content">CONTENT0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</div> Here is the code for the whole page. <html><head><style type="text/css">a:link {text-decoration:none; color:white; } /* unvisited link */a:visited {text-decoration:none; color:white;} /* visited link */a:hover {text-decoration:underline;color:grey;} /* mouse over link */a:active {text-decoration:underline;color:black;} /* selected link */body{font-family:arial;color:white;}.container{background-color:#191919;font-family:arial;width:1000px;height:1000px;margin-left: auto ;margin-right: auto ;}.logo{background-color:grey;width:190px;padding-top:85;padding-bottom:85px;text-align:center;border:5px solid gold;margin-left:10px;margin-top:10px;float:left;}.banner{background-color:green;width:760px;height:190px;margin-left:10px;margin-top:10px;float:left;border:5px solid gold;}.sidebar{background-color:green;width:100px;height:500;padding:45px;text-align:center;border:5px solid gold;margin-left:10px;margin-top:10px;float:left;}.menu{background-color:red;width:760;padding-top:5;padding-bottom:5;margin-left:10px;margin-top:10px;float:left;border:5px solid gold;}.content{background-color:green;width:750px;height:510;padding-left:5px;padding-right:5px;border:5px solid gold;margin-left:10px;margin-top:10px;float:left;white-space:pre-line;color:black;}ul.online{ word-spacing:100px;list-style-type:none;}li.inline{display:inline; }</style></head><body><div class="container"><div class ="logo">LOGO</div><div class="banner">BANNER</div><div class="sidebar">SIDEBAR</div><div class="menu"> <center><ul class="online"> <li class="inline"><a href="">Home</a></li> <li class="inline"><a href="">Log-In</a></li> </ul></center></div><div class="content">CONTENT0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</div></div></body></html>
  16. What is the html code to make horizontal boxes i need to make some boxes go from left to right but all i can find is on top of each other, you can see example here <a href="http://www.carinsurancequotesinformation.com">car insurance quotes</a> where the boxes are next to each other, and will this affect the page width on my site.Someone told me use DIV tags but how do i put this in HTML code?.
  17. Hi there, After many hours searching for the answer to what I thought was a relatively simple query, I am still no wiser. I hope an expert here will be able to help me with the following - How do you maintain the proportions of child div as its parent gets larger, when the parent is set to width:auto (to fill the browser)? For example say the parent is 1000px X 400px and its child is 200px X 100px; when the browser is resized and changes the parent to 500 x 200, what is the CSS code to ensure the child div changes size with it, proportionally, making it 100 px X 50px? This is because I have come across a JS plugin to scale the text to fit the div. Many thanks in advance, I look forward to reading the response. Matt
  18. Hello. Can anybody explain me how can I set distance between two <div> in a container? Look at the example: <div id="container"> <div id="item1"></div> <div id="item2"></div></div> I need a distance between item1 and item2. I've already played with top, bottom, margin, but nothing help me. Then how?
  19. I've been having some problems with getting what I wanted out of divs, and I am forced to come to the conclusion that CSS is broken. I've attached an HTML file to demonstrate the problems - you will need to edit its source HTML and follow the instructions to see the problems. I fully accept that *I* may be the problem rather than CSS, and at least all major browsers are suffering the same problem, but I really feel that CSS is at fault here and I was wondering what others thought? One challenge is to get a box to fit within the browser window (no scrolling required) with a 10 pixel border *all* around (no matter what size the browser window becomes), and another challenge is to get a fixed-width box to anchor itself to the right side of the browser window so that it is unaffected by scrolling (i.e., fixed positioning). In neither case are you allowed to use tables, and for the right-anchored box you're not allowed to use a fixed left position / margin (in other words, changing the width of the browser should keep the box anchored to the right). (This is not homework, BTW, I left school / college / university years ago! It's just what caused me to write this post.) css_issues.html
  20. HEllo i am working on a site, but it is not uploaded so i will only post the code here for help. It is about a big large empty space, almost twice as large as the page were all the design is, maybe it goes out of the container too but i am not sure. So what do i need to do, or to remove in css for it to be ok. I notice that when i remove the "meny"boxes "wich are located to the left) the site becomes fine, but when they are there this empty space is coming up :/. What do i need to do? There are 2 css files. The one named pse5menyset.css is the one with the menys to the left you need to look into for helping me i guess! thank you pse.css index5.html pse5menyset.css
  21. I'm having some trouble getting a form to display properly when printing. The "School of Medicine" section works fine, but section 7 (which is actually apDiv9) for SSPPS disappears when printing. I looked and it seems like it's getting shoved to the second page. Any idea how to fix that? Additionally, if there's a better way to organize the tables so that everything except the three TextAreas are on the first page (with the TextAreas on the second), I'd be happy to know about it. EDIT: Sorry, niche. Code is kind of long, so I didn't want to take up too much space. <!DOCTYPE html><html><head><title>Teaching Quantification Form</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><meta name="author" content="David" /><meta name="keywords" content="teaching, quantification, ucsd" /><!--Version 0.7--><style type="text/css">body {font-size:100%;font-size:0.75em;font-family:"Arial",Helvetica,sans-serif;}sup {font-size:75%;}table {border:1px solid black;border-collapse:collapse;width:385px;}td {border:0.5px solid black;}textarea { resize:none; overflow:hidden; width:25em; height:15em;}.lTextArea{width:50.5em;}.hiddenClass {visibility:collapse;}.showClass {visibility:visible;}.pBreak {page-break-before:always;}#apDiv1 {position: relative;width: 200px;height: 115px;z-index: 1;left: 10px;top: 10px;}#apDiv2 {position: relative;width: 200px;height: 115px;z-index: 2;left: 10px;top: -105px;}#apDiv3 {position: relative;width: 200px;height: 115px;z-index: 3;left: 10px;top: 200px;}#apDiv4 {position: relative;width: 200px;height: 115px;z-index: 4;left: 10px;top: 165px;}#apDiv5 {position: relative;width: 200px;height: 115px;z-index: 5;left: 400px;top: -450px;}#apDiv6 {position: relative;width: 200px;height: 115px;z-index: 6;left: 400px;top: -160px;}#apDiv7 {position: relative;width: 200px;height: 115px;z-index: 7;left: 10px;top: -80px;}#apDiv8 {position: relative;width: 200px;height: 115px;z-index: 8;left: 400px;top: -175px;}#apDiv9 {position: relative;width: 200px;height: 115px;z-index: 9;left: 400px;top: -290px;}#apDiv10 {position: relative;width: 200px;height: 115px;z-index: 10;left: 10px;top: -240px;}#apDiv11 {position: relative;visibility:hidden;z-index: 11;left: 10px;top: 110px;}#apDiv12 {position: relative;z-index: 12;left: 10px;top: -45px;}/*@media screen {body { background-image:url('http://videoprocessing.ucsd.edu/~stanleychan/logoUCSD.gif'); background-repeat:no-repeat; background-position:right top; background-attachment:fixed; background-size:15%;}} */@media print {sup {font-size:100%;}.noPrint { visibility:hidden;}.medSup { visibility:hidden;}#apDiv10 {position: relative;width: 200px;height: 115px;z-index: 10;left: 10px;top: 0px;}}</style><script type="text/javascript">function calculateTotal(){var total = 0;var current = 0;var elem = document.getElementsByTagName("input");for(var i = 0; i < elem.length; i++){ current = parseInt(elem[i].value); if (!isNaN(current)) { total = total + current; } current = 0;}if (!isNaN(total)){ document.getElementById("calcResult").innerHTML = total;}}function forceOther(type){if (type == "CourseNumbers"){ alert("Please complete the \"Course Numbers or Names\" section below.");}else if (type == "StudentNames"){ alert("Please complete the \"Student/Trainee Names\" section below.");}else if (type == "Other"){ alert("Please complete the \"Other Activities\" section below.");}}function reqChecker(){var x=document.forms["fForm"]["other"].value;var missingReq = false;var courses = document.getElementsByClassName("course");var students = document.getElementsByClassName("student");var temp = 0; for (var j = 0; j < courses.length; j++){ temp = parseInt(courses[j].value); if (temp != 0) { if (document.getElementById("courseNum").value == "") { missingReq = true; forceOther("CourseNumbers"); } } temp = 0;} temp = 0; for (var k = 0; k < students.length; k++){ temp = parseInt(students[k].value); if (temp != 0) { if (document.getElementById("stuName").value == "") { missingReq = true; forceOther("StudentNames"); } } temp = 0;} temp = parseInt(x); if (temp != 0){ if (document.getElementById("otherField").value == "") { missingReq = true; forceOther("Other"); }} if (!missingReq){ calculateTotal();}}function setMED(){document.getElementById("SSPPSAdministration").style.visibility = "collapse";document.getElementById("SSPPSEducation").style.visibility = "collapse";document.getElementById("MEDAdministration").style.visibility = "visible";document.getElementById("MEDEducation").style.visibility = "visible";document.getElementById("apDiv1").style.visibility = "visible";document.getElementById("apDiv2").style.visibility = "collapse";document.getElementById("apDiv8").style.visibility = "visible";document.getElementById("apDiv9").style.visibility = "collapse";}function setSSPPS(){document.getElementById("MEDAdministration").style.visibility = "collapse";document.getElementById("MEDEducation").style.visibility = "collapse";document.getElementById("SSPPSAdministration").style.visibility = "visible";document.getElementById("SSPPSEducation").style.visibility = "visible";document.getElementById("apDiv1").style.visibility = "collapse";document.getElementById("apDiv2").style.visibility = "visible";document.getElementById("apDiv8").style.visibility = "collapse";document.getElementById("apDiv9").style.visibility = "visible";}</script></head><body onload="setMED();"><p><form><b>Name: </b><input type="text"></input> <input type="text"></input> <b>Year: </b><input type="text" size="2"></input></form></p><p><input type="radio" name="radioSelector" value="MED" checked="checked" onclick="setMED();" autocomplete="off">School of Medicine</input> <input type="radio" name="radioSelector" value="SSPPS" onclick="setSSPPS();" autocomplete="off">SSPPS</input></p> <p><button type="button" class="noPrint" onclick="reqChecker();">Calculate</button> Total Credits: <span id="calcResult">0</span></p><form id="fForm" name="fForm"> <div id="apDiv1"> <Table id="MEDAdministration" class="showClass"> <caption> <b title="Sharing credit with an assoc. director is at the discretion of the course/program director.">1. Administration<sup class="noPrint">*</sup></b> </caption> <tr> <td title="Sharing credit with an assoc. director is at the discretion of the course/program director.">PreClerkship Thread Director<sup class="noPrint">*</sup></td> <td>150 Credits/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>PreClerkship Thread Director- Path/Hist, Anatomy, Pharmacology</td> <td>480 Credits/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>PreClerkship Block Director and Lead Clinical Educator</td> <td>3 Credits/Contact Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="Sharing credit with an assoc. director is at the discretion of the course/program director.">Core Clerkship Director<sup class="noPrint">*</sup></td> <td>480 Credits/Clerkship</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Clinical Foundations Director</td> <td>480 Credits/Clerkship</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="Sharing credit with an assoc. director is at the discretion of the course/program director.">Graduate Program Director<sup class="noPrint">*</sup></td> <td>150 Credits/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="Sharing credit with an assoc. director is at the discretion of the course/program director.">4<sup>th</sup> Year Clerkship Director<sup class="noPrint">*</sup></td> <td>5 Credits/Month</td> <td><input type="text" value=0 size="3" autocomplete="off"/></td> </tr> <tr> <td title="Sharing credit with an assoc. director is at the discretion of the course/program director.">Residency Program Director<sup class="noPrint">*</sup></td> <td class="creditAmount">20 Credits/Resident/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="Credit will be pro-rated over the duration of the grant.">PI- Training Grant<sup class="noPrint">*</sup></td> <td>50 Credits/Grant</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Course Director (CE/CME)</td> <td>2 Credits/Hour CE/CME Credit</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Academic Community Director</td> <td>150 Credits/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="For students in graduate programs, only 1st year students are counted.">Student Advising (formal only)<sup class="noPrint">*</sup></td> <td>5 Credits/Student/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Graduate Course Initial Composition/Set-up (1 time only)</td> <td>10 Credits/Course</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Graduate Course Administrative Time</td> <td>10 Credits/Course</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> </Table></div> <div id="apDiv2"> <Table id="SSPPSAdministration" class="hiddenClass"> <caption> <b title="Sharing credit with an assoc. director is at the discretion of the course/program director.">1. Administration<sup class="noPrint">*</sup></b> </caption> <tr> <td>Preclinical Core Course Director</td> <td>1 Credit/Course Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Preclinical Core Course Section Leader</td> <td>1 Credit/Course Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="(SSPPS)Core Clerkships are Free Clinic (IPPE), Hospital Practice (IPPE), SPPS 400A/B, SPPS 401 A/B & APPE Community Pharmacy.">Core Clerkship Director<sup class="noPrint">*</sup></td> <td>150 Credits/Clerkship</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="(SSPPS)Site Director includes VA, Orange County, Hillcrest, Rady.">Clerkship Site Director<sup class="noPrint">*</sup></td> <td>100 Credits/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="(SSPPS)Graduate Program Director includes BMS porgrams and Experiential Education Programs.">Graduate Program Director<sup class="noPrint">*</sup></td> <td>150 Credits/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>4<sup>th</sup> Year Clerkship Director</td> <td>5 Credits/Month</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Residency or Fellowship Program Director</td> <td>20 Credits/Trainee/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>PI- Training Grant</td> <td>50 Credits/Grant</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>CE Course Director</td> <td>2 Credits/Hour CE Credit</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="For students in graduate programs, only 1st year students are counted. For pharmacy & medicine students, 1st - 4th year and resident advisees are counted.">Trainee Advising (formal advising only)<sup class="noPrint">*</sup></td> <td>5 Credits/Trainee/Year</td> <td><input class="student" type="text" value=0 size="3" autocomplete="off"/></td> </tr> <tr> <td title="Includes serving as a formal Advisor for or Liason to student groups such as Operation Immunization, APhA-ASP, etc.">Outreach/Professional Project Advising<sup class="noPrint">*</sup></td> <td>10 Credits/Project Group</td> <td><input class="student" type="text" value=0 size="3" autocomplete="off"/></td> </tr> <tr> <td>Graduate Course Initial Composition/Set-up (1 time only)</td> <td>10 Credits/Course</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Graduate Course Administrative Time</td> <td>10 Credits/Course Hour</td> <td><input class="course" type="text" value=0 size="3" autocomplete="off"/></td> </tr> </Table> </div> <div id="apDiv3"> <Table class="GraduateTable"> <caption> <b>2. Graduate Courses and Programs</b> </caption> <tr> <td>Graduate Student Training</td> <td title="(SoM)Combined Graduate Student and Post-Doctoral Fellow training will be capped at 5 Credits/Week. (SSPPS)This includes laboratory rotation students and full-time Summer Research Project students.">1 Credit/Trainee/Week<sup class="noPrint">*</sup></td> <td><input class="student" type="text" value=0 size="3" autocomplete="off"/></td> </tr> <tr> <td>Post-Doc Research Fellow/Resident Training</td> <td title="(SoM)Combined Graduate Student and Post-Doctoral Fellow training will be capped at 5 Credits/Week.">0.5 Credits/Trainee/Week<sup class="noPrint">*</sup></td> <td><input class="student" type="text" value=0 size="3" autocomplete="off"/></td> </tr> </Table> </div> <div id="apDiv4"> <Table class="PreClinicalTable"> <caption> <b>3. Preclinical Electives Course</b> </caption> <tr> <td>Initial Development/Set-up (one time only)</td> <td>10 Credits/Course</td> <td><input class="course" type="text" value=0 size="3"autocomplete="off"/></td> </tr> <tr> <td>Administrative Time</td> <td>10 Credits/Course</td> <td><input class="course" type="text" value=0 size="3" autocomplete="off"/></td> </tr> <tr> <td>Independent Study Electives</td> <td>10 Credits/Course</td> <td><input class="course" type="text" value=0 size="3" autocomplete="off"/></td> </tr> </Table> </div> <div id="apDiv5"> <Table class="ClassroomTable"> <caption> <b>5. Classroom Teaching</b> </caption> <tr> <td><i>Lectures</i></td> <td></td> <td></td> </tr> <tr> <td> Core Medical School and SSPPS Courses</td> <td>3 Credits/Lecture Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> GME and other Graduate Courses</td> <td>3 Credits/Lecture Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> Core Lecture series for GME</td> <td>3 Credits/Lecture Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> Grand Rounds</td> <td>3 Credits/Lecture Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> Electives</td> <td>3 Credits/Lecture Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> Seminars</td> <td>3 Credits/Lecture Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> Resident Report</td> <td>3 Credits/Lecture Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> PBL Facilitation</td> <td>3 Credits/Contact Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td> POM Facilitation</td> <td>3 Credits/Contact Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Small Group, Laboratories and/or Workshops</td> <td>2 Credits/Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Other</td> <td>2 Credits/Teaching Hour</td> <td><input name="other" type="text" value=0 size="3" autocomplete="off"/></td> </tr> </Table> </div> <div id="apDiv6"> <Table class="ClinicalTable"> <caption> <b title="(SoM)Trainee is a Medical Student, Resident, Fellow, Graduate Student, or Post-Doctoral Fellow. (SSPPS)Trainee is a Pharmacy or Medical Student, Resident, Fellow, Graduate STudent, or Post-Doctoral Fellow.">6. Clinical Teaching (when trainees are present)- max 260 per year<sup class="noPrint">*</sup></b> </caption> <tr> <td>Inpatient or General Ward Attending</td> <td>15 Credits/Week</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Consult Attending</td> <td>10 Credits/Week</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Path., Rad., ED, Anesthesia Attending</td> <td>1 Credit/Session</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Operating Room/Clinic Attending</td> <td>1 Credit/Session</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td></tr> <tr> <td>Medical Student Ambulatory, Clerkships, Outreach Events Precepting</td> <td>2 Credits/Session</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td></tr> <tr> <td>CPX Remediation Training</td> <td>1 Credit/Hour</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr><tr> <td>OSCE, Oral, or Practical Exam Participation</td> <td>3 Credit/Session</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> </Table> </div> <div id="apDiv7"> <Table class="AcademicTable"> <caption> <b>4. Academic Committees</b> </caption> <tr> <td>ISP Chair/Primary Mentor</td> <td>20 Credits/Student</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td title="(SSPPS)Includes Secondary Project Advisors/mentors for Student, Resident, & Fellow Research Projects.">ISP Committee Member/Secondary Advisor<sup class="noPrint">*</sup></td> <td>5 Credits/Student</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>PH. D. Committee Member</td> <td>12 Credits/Student/Year</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Minor Proposition Chair</td> <td>20 Credits/Student</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> <tr> <td>Minor Proposition Member</td> <td>5 Credits/Student</td> <td><input type="text" value=0 size="3" autocomplete="off" /></td> </tr> </Table> </div> <div id="apDiv8"> <Table id="MEDEducation" class="showClass"> <caption> <b>7. Education Committee Service (credit commensurate with attendance)</b> </caption> <tr> <td>Chair: CEP, CCC, EC, GMEC, GPEC</td> <td>1 Credit/Meeting Hour (Max: 96 Cr/Year)</td> <td><input type="text" value=0 size="3" autocomplete="off"/></td> </tr> <tr> <td>Member: CCC, EC, GMEC, GPEC</td> <td>1 Credit/Meeting Hour (Max: 45 Cr/Year)</td> <td><input type="text" value=0 size="3" autocomplete="off"/></td> </tr> <tr> <td>Member: CEP</td> <td>1 Credit/Meeting Hour (Max: 20 Cr/Year)</td> <td><input type="text" value=0 size="3" autocomplete="off"/></td> </tr> </Table> </div> <div id="apDiv9"> <Table id="SSPPSEducation" class="hiddenClass"> <caption> <b>7. Education Committee Service (credit commensurate with attendance)</b> </caption><tr> <td>Chair: CEP, CCC, EC, GMEC, GPEC, EPAOC/Faculty, Comp Exam, RAC, Research Coucil</td> <td>1 Credit/Meeting Hour (Max: 96 Cr/Year)</td> <td><input type="text" value=0 size="3" autocomplete="off"/></td></tr><tr> <td>Member: CEP, CCC, EC, GMEC, GPEC, EPAOC/Faculty, Comp Exam, RAC, Research Coucil</td> <td>1 Credit/Meeting Hour (Max: 45 Cr/Year)</td> <td><input type="text" value=0 size="3" autocomplete="off"/></td></tr> </Table> </div></form><form id="otherForm"><div id="apDiv10"><Table class="secTable" border="1" style="table-layout:auto"> <tr> <th>Course Numbers or Names</th> <th>Student/Trainee Names</th> </tr> <tr> <td><textarea name="textarea" value="" autocomplete="off" id="courseNum"></textarea></td> <td><textarea name="textarea" value="" autocomplete="off" id="stuName"></textarea></td> </tr></table><table class="thirdTable" border="1" style="table-layout:auto "> <tr> <th class="lTextArea">Other Activities</th> </tr> <tr> <td><textarea name="textarea" value="" class="lTextArea" autocomplete="off" id="otherField"></textarea></td></table></div></form></body> tempTeaching.html
  22. Hi,Am having a little trouble creating 2 divs so they are side by side inside a container with set width. The HTML looks like this:<div id="contenttop"></div><div id="contentmiddle"><div class="set-size"><div class="column-580 float-left">sfhsfhs</div><div class="column-400 float-right">sfhsfh</div></div></div><div id="contentbottom"></div> and the CSS is as follows/*<-- column system settings -->*/.set-size {width:980px;margin:0 auto;}.column-580 {width:580px;}.column-400 {width:400px;}/*<-- content -->*/#contenttop { background: url(../images/content_top.png) no-repeat; width: 980px; height: 30px; margin-top:9px;}#contentmiddle { background: url(../images/content_middle.png) repeat-y;}#contentbottom { background: url(../images/content_bottom.png) no-repeat; width:980px; height:30px;} however for some reason the divs dont seem to go side by side, but undernaeah each other. Basically, i want to have one div on the left hand side with some content (the 580px size div) and the other div with content on the right hand side (the 400px size div) Have inserted a picture of how it looks within dreamweaver and you can see the divs are not side-by-side, but go underneath each other. Any help would be greatly appreciated. Regards,James
  23. hy to aaaaavery one out there, help!!!! :Shock:I have been learning HTML on this site for over almost three-four weeks I am in HTML basics..at HTML layout,so aaplease can somebody tell me what is this: id=" " attribute it's value it's use in layout and beside that.and these <div> and <span> &<div id="container" (<<<<<<<<what's this) style="width:500px"> (a line from the example given in HTML layout)
  24. I have designed a template in dreamweaver.Problem is that my links do not link when placed within the div "container".I can only get the links to work when the ap div that they reside inside is placed outside the "container" but then they don't scale with the page.Any advice would be appreciated. Thanks.
  25. Hello there, I have developed this piece of php/html code, for my custom Wordpress theme. <?php get_header(); ?><div class="layout clearfix"> <div id="content"> <?php if (have_posts()) : ?> <div id="loops-wrapper" class="left"> <?php while (have_posts()) : the_post(); ?> <div id="article-<?php the_id(); ?>" class="article clearfix"> <div class="post-others-wrap"> <p class="categories"><?php the_category('<br />'); ?></p> <div class="khmedia-social"> <p class='st_facebook_vcount' displayText='Facebook'></p> <p class='st_twitter_vcount' displayText='Tweet'></p> <p class='st_email_vcount' displayText='Email'></p> </div> </div> <div class="post-date-wrap"> <p class="post-date"> <span class="day"><?php the_time('d'); ?></span> <span class="month"><?php the_time('M'); ?></span> <span class="year"><?php the_time('Y'); ?></span> </p> </div> <div id="article-title-<?php the_id(); ?>" class="post-title"> <h1> <?php echo the_title(); ?> </h1> <div id="article-excerpt-<?php the_id(); ?>" class="post-content"> <?php wp_link_pages( array( 'before' => '<div class="pages">'.'पृष्ठ:', 'after' => '</div>' ) ); ?> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="pages">'.'पृष्ठ:', 'after' => '</div>' ) ); ?> </div> </div> </div> <?php endwhile; ?> <div id="pagelinks" class="clearfix"> <?php previous_post_link('<div class="prevlink">%link</div>'); ?> <?php next_post_link('<div class="nextlink">%link</div>'); ?> </div> </div> <?php endif; ?> </div> <div class="sidebar"> <?php if ( is_active_sidebar( 'primary' ) ) : dynamic_sidebar( 'primary' ); endif; ?> </div></div><?php get_footer(); ?> And now here is the CSS for it: .layout { display: block; margin-top: 3em; width: 100%;} #content { line-height: 1.5em; width: 697px; float: left; padding-right: 30px; position: relative; min-height: 300px;} .clearfix { clear: both; content: " "; display: block; line-height: 0; visibility: inherit;} #loops-wrapper { display: block;} #loops-wrapper .article { padding-left: 122px; width: 600px; margin-bottom: 50px; min-height: 150px; display: block; position: relative;} #loops-wrapper .article .post-others-wrap { left: 0; display: block; position: absolute; width: 100px; margin: 55px 0 0; text-align: right; line-height: 1.5em;} #loops-wrapper .article .post-others-wrap .khmedia-social { display: block; border-top: 2px solid #8AE234; border-bottom: 2px solid #8ae234; padding: 0 0 5px; margin-top: 20px;} #loops-wrapper .article .post-others-wrap .categories { color: black; position: relative;} Actually, the main content area is expanding with large data. But, when I insert a simple post with only the title. The div is overlapping with the footer.Here is my site link: http://www.khmedia.in Please help guys...
×
×
  • Create New...