|
HTML - Question About Positioning.
I'm new to HTML but I think I'm slowly catching on. I have this block of code (I didn't write it) that I want to position on my webpage. The code creates a box with a menu on top containing five tabs (see attached pic). The tabs allow the user to switch between 5 embedded video streams inside the box. I want to take the whole thing and position it. Is there a way to position everything in the entire block of code? Or will I have to go into each piece and position it?
How should I go about getting this box/menu/videos where I want them? I'm using a site builder that basically does the positioning for you, you just paste the code into a HTML box. But I can't get everything where I want it using that method so I'm now attempting to use absolute positioning. I'm thinking there must be a way to position everything at once because I assume that's how the site builder does it. HTML Code: <table>
<tbody>
<tr>
<td><br />
<style type="text/css">
div.TabTampil div.TTs {height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active { background-color: #15317E; }
div.TabTampil div.Halamans { clear: both; border: 2px solid #FFFFFF; overflow: hidden; background-color: #222;}
div.TabTampil div.Halamans div.Halaman { height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas { padding: 3px 5px; }
div.TabTampil div.TTs a { border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:0px solid #FFFFFF; float: left; display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif; font-size: 12px; font-weight: 900; color: #FFFFFF}
</style>
<br />
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 650px;" class="TTs">
<a> Main Stream </a> <a> Stream 2 </a> <a> Stream 3 </a> <a> Stream 4 </a> <a> Radio </a></div>
<div style="width: 650px; height: 450px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<script type="text/javascript"> channel="CHANNELHERE"; vwidth="600"; vheight="450";</script>
<script type="text/javascript" src="http://www.castamp.com/embed.jsBACKSPACETHIS"></script>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/_woqNuDRPuA?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="YouTube video player" width="640" height="390" src="https://www.youtube.com/embed/rQ9vqVpNqWU" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="YouTube video player" width="640" height="390" src="https://www.youtube.com/embed/j3a1NwhsLVg" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="AM 640 Radio Leafs Game" width="640" height="442" src="http://mapleleafs.nhl.com/club/RadioPlayer.htm?id=2010021217" frameborder="0" allowfullscreen></iframe>
</div></div>
</div></div>
</form>
<script style="text/javascript" src="http://www.mdn.fm/files/291528_3hhea/newscriptab.js"></script><br />
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
<br /> </td> <td><br />
Similar TutorialsHello All- I'm trying to create a website and I am using Dreamweaver. While I'm fairly versed with Dreamweaver's nuances, there's one thing that I've never been able to do. I've created a white rectangle box in photoshop that I want to use as the main part of my site where all the text and pictures go. I want the rectangle positioned vertically and to go "off-screen." I have a blue background behind it. My problem is, the rectangle doesn't go to the furthest point of the top and bottom of the browser. Here is an example of what I want done: http://www.logoworks.com/ If you check out that website, you'll notice the rectangle shape in the middle behind the text and graphics. It goes to the furthest part of the top "off-screen." The picture I've attached is what happens to me what I try to play around with the padding and positioning (i've tried both html and css). Any help would be great. Thanks! Hi all. I'm designing a website and for the first time using div tags. The style is controlled by CSS. I'm trying to get 2 div tags to be positioned next to each other, side by side. How do I do this, I just can't get it to work. Thanks Hi guys, just a quick question about positioning objects in HTML. Sorry if the is a noobish question, im new to html and dreamweaver. Basically, for a school assignments we nhave to create a webpage. There is one aspect though that i cant figure out. What is the best way to position pictures, divs etc in HTML? If I use absolute positioning with pixels, it changes where it is on different screen sizes (obviously). The best way i have found so far is by using percentages (eg top 40%) but this is slow and hard. Any better way? Too long didnt read- how to position things so it looks the same on any resolution Thanks in advance I want to use my images as links, but I also want them absolutely positioned relative to their parent div. However I have come across a problem, to make them links I need to wrap <a>s around them which then means their positioning becomes relative to the anchor tag. Can anyone suggest anything to counteract this problem? I do need them absolutely positioned. The only alternative is an image map, but I'm reluctant to do that because of the slow load time for the whole image, plus all the extra co-ordinate coding I'd have to do. Hi, Would some be able to help me with the layout of my page? I want it to look like this and this is what it looks like now. I don't want to do it using borders but I can't seem to figure it out using positioning. Anyone able to help? CSS Page Regards, Darren I believe this is a HTML problem: Old site: http://www.ardmoreweatherlive.com/ . Old site CSS: http://www.ardmoreweatherlive.com/weather-screen.css New site: http://www.ardmoreweatherlive.com/test3.php New CSS: http://www.ardmoreweatherlive.com/weather-screen2.css I am trying to get rid of the old left side menu and maybe get the page to float in the center with, I think padding(?) around the edges. I really thank everyone for the help, Doug Thanks for all your help I am making great progress thanks to you all. Here I've posted a picture of my current dilemma. Hopefully it makes sense. http://www.trillionaireme.com You can view my site at www.palermostaging.com. It appears fine in IE but in firefox, the alignment is thrown off a little, I think the orange column is too tall. How can I fix this without changing the text size or placement? Any suggestions are appreciated, source is viewable on the page. Thanks, Anders Hi, I can't seem to get these images to center after using position:fixed on them. Here's the code I have: Code: <html> <head> </head> <body> <div style="position: fixed; top: 0px;"> <img src="top.jpg"> </div> <div align="center"> <table width="1025" bgcolor="gray"> <tr> <td> <middle text> </td> </tr> </table> </div> <div style="position: fixed; bottom: 0px;"> <center><img src="bottom.jpg"></center> </div> </body> </html> sorry for the nooby question but - i wanna position a table in the center of page but right at the top with no gap. ive tried: <table style="position:absolute;top:0px;left:auto;right:auto;"> but that doesn't work. can someone pls help me. thanks. Hey, I was just wondering how I could have the navigation bar centred despite what resolution you view it in rather than fine in one and messed up in others. This is where it's for.. www.aweentertainment.com/tempindex.html Thanks. Hi What i would like is for a frame to show a website and then the user scowl around the frame and resizing it, the user then clicks on a button which displays the frame in the same position and it is the same size, but without the resize and scowling position options. How can i do this? Thanks Look at: http://test6.waltonstreetwebdesign.com/ If you look at it in firefox, it works fine. In IE 7, the positioning for div "logo" is not working properly and you can't see the logo. What is my problem? Thank you. I've run into a few problems that don't appear in firefox but do in Internet explorer..The first problem I have is that in IE the content box on the right is bumped down, it looks exactly the way I want in FF, but not in internet explorer. The next problem I'm having is the banner in IE..It seems as if theres a pixel or two underneath of the banner I can't get rid of... Also, any ideas on how I can center the navbar? I can't seem to get it to go in any browsers... page: http://www.ssvfd.com/newsite/history.html css file: http://www.ssvfd.com/newsite/style.css Ok, this is the start of a website I'm doing for a class I have... http://alphabravo.dajoob.com/thunderbirds/Index.html I'm having trouble getting that flag table alongside of the main white one. I know it's a dumb question, but I just can't figure it out... Any suggestions? Edit: Also, in Firefox, the banner on top is skrewed up.... Know how to fix that? Thanks Hi guys. Sorry if I'm inconveniencing you, but I have a really big problem that I can't work out. http://automata.firephoenixnet.com/design/ Could you take a look at that in Firefox and then in IE? Did I miss a margin or something? And, is there a way I can get my footer div always at the bottom of the page without setting a margin-bottom for the sidebar div? Many thanks guys. On this page: http://obama-net.org/bluelayout/index.html my absolute positioning is just not working. I've tried virtually everything to see what the problem could be, but I don't seem to find it? On my computer, the website looks fine when the window is maximized, but when it's minimized, the divs go all over the place. However, in other computers the divs are just never in place. Is there something wrong with my coding? I used dreamweaver. Thank you so much for your time! Hello Everyone, I 'm trying to place a total of sixteen rectangles along the edges of my webpage. I was able to do it in firefox but not IE. In IE the last rectangle does not line up with the other rectangles to its left and right. Please take a look at my code below to see where the problem lies. Thank you in advance for your help. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Welcome</title> <style> body{text-align:center; } #container{ width:800px; margin: 0 auto; height:900px; background-image:url(""); background-repeat:no-repeat; } table{border-style:dashed;border-color:black} </style> </head> <body> <div id="container"> <!Left> <div style="float:left;"> <table width="200" height="150" style="border-width:3px 3px 0px 3px" > <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px"> <tr> <td> </td> </tr> </table> </div> <!Top1> <div style="float:left;width:200px;height: 150px;"> <table width="200" height=" 150" style="border-width:3px 3px 3px 0px"> <tr> <td> </td> </tr> </table> </div> <!Top2> <div style="float:left;width:200px;height: 150px;"> <table width="200" height="150" style="border-width:3px 0px 3px 0px"> <tr> <td> </td> </tr> </table> </div> <!Right> <div style="position:relative;float:right;top:0px;width:200px"> <table width="200" height="150" style="border-width:3px 3px 0px 3px" > <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px 3px 0px 3px"> <tr> <td> </td> </tr> </table> <table width="200" height="150" style="border-width:3px"> <tr> <td> </td> </tr> </table> </div> <!Bottom1> <div style="position:relative;float:left;width:200px;height:150px;top:600px;"> <table width="200" height=" 150" style="border-width:3px 3px 3px 0px"> <tr> <td> </td> </tr> </table> </div> <!Bottom2> <div style="position:relative;float:right;width:200px;height:150px;top:600px;"> <table width="200" height="150" style="border-width:3px 0px 3px 0px"> <tr> <td> </td> </tr> </table> </div> </div> </body> </html> Which is the better way to position the div tags? Should I use float or some fixed position? I could get two columns positioned with float left and right, but what about a third column? Thanks |
|||||||