|
HTML - Position Object By Bottom-right Corner
Hello guru's of the WWW realm...
Is it possible to position an object, e.g. <div> by its bottom-right corner as apposed to its top-left? I've got a web page where i need to align alot of differently sized <div> tags so the right side is 300px in from the page. I'm aware that i could manually specify the width of each, then deduct the width from the margin and use that for the left position, but i'd have to do that for each div. but if i can position all the divs by the bottom-right, i can just attach a simple css statement to all divs. Incase my babble didn't make any sense, which this wouldn't be the first, I've drawn an equally nonsensical picture. Thanks in advanced for any help Matthew Millar Similar TutorialsHey, i am currently working on a site and trying to position a image of a leaf on the corner of a div. The site is: http://luminaskincare.ca/new/ I want it to look like this: http://luminaskincare.ca/new/whatiwant.png Any help would be appreciated thanks. Look at: http://realcrazyestate.com/ So in FF there always seems to be this little bit of white space below the flash video... and only in FF, I can't figure out why it is there... Any ideas, specifically on how to get rid of it? Thanks! First, forgive me i'm a noob! Am attempting to rebuild our sorry website. Am kinda picking the whole html thing up, however, am building in frontpage and expressions because those are the programs i have. page i'm working on is: ygcc.org/testing i embedded a video, but would like to position it to line up w/ everything else. i like how it looks centered, but its not aligned correctly w/ the other objects on the page. also, everything else is "positioned" on the page, whereas the media is "aligned" so, it doesn't stay put if i resize my browser next problem i'm having is jump menu or tree menu. i want a drop boxes, such as are on the page, however, would like it if it was a horizontal menu, not individual boxes like they are. right now, the drop boxes are only drop boxes (for "forms") and do not hyperlink. if i "insert jumpmenu" then, i cannot put them beside each other in a row. if i attempt to put them in a row, they are like steps, not straight across. i d/led a program to help w/ menus, but i don't even understand it. when i attempted what it told me to do, i do not get a menu. i know i need to put javascript in, but apparently do not understand this enough to actually do it. in short i would truly appreciate some help. thanks in advance I'm attempting to insert a image map menu at the bottom of each page, however for some reason there is a 2-4 pixel gap between the menu and the bottom of the table and I can't figure out why. Here is the URL: http://www.knockoutwebsites4u.com/LSC/index.html Thanks for your help in this matter. I would like an image that has the name of site displayed on the top left corner of each page diagonally. (This direction -> /) How can I do this exactly? Am I overcomplicating this? Hi, how can I design a red cross object to remove the image from the box (see image) http://dl.getdropbox.com/u/72686/closeIcon.png My idea is to position it with css on the top-right corner of a box, and it should be done easily. Am I correct ? thanks Hi all, I want to have a banner image in the top-left corner basically reading "50% OFF ALL PRICES". I want it to overlap the other images/table/text as not to move it about. Just wondering if anybody can point me in the right direction to do this in HTML? Thanks Hi All, Iv been browsing and browsing the internet to try and figure this one out and sadly i cant find a solution, Im trying to do a rounded corners effect in CSS for a button and im using IE7(due to where i work) and the rounded corners effect doesnt seem to wanna happen, can anyone tell me or link me to a document on the net that will give me the effect below is the main button you can see i have put a mox border radius and webkit border radius but doesnt seem to work in IE7 HTML Code: .BtnRaiseTask
{
-moz-box-shadow:inset 0px 1px 16px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 16px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8f002b), color-stop(1, #b20939) );
background:-moz-linear-gradient( center top, #8f002b 5%, #b20939 100% );
background-color:#8f002b;
-moz-border-radius:19px;
-webkit-border-radius:19px;
border:2px solid #c2c2c2;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:21px;
font-weight:bold;
padding:10px 28px;
text-decoration:none;
}
Can some one please help me its driving me insane. Hi All, if there a way of adding two images with a title in the middle. For example "Image" This is a example "Image2" With both images flush against the borders. Because at the moment mine looks daft lol!! The RightTopImage needs to be obviously Top right of the webpage, and then there will be an image to the left of the webpage with the title in the middle... I cant figure out the structure of CSS Html HTML Code: <div class="page">
This will be where the Left Image will be.
<div class="header">
<div class="title">
"Text as an example......"
</div>
</div>
<div class="RightTopImage">
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div class="clear">
</div>
</div>
Css HTML Code: .RightTopImage
{
background-image:url(../Images/RightTopSmoke.gif);
background-repeat: no-repeat;
background-position: top right;
width: 292px;
height: 222px;
}
.page
{
width: 100%;
background-color: #fff;
margin: 0px;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
I havent added the left image yet, but if any one can help me or maybe have a code snippet i could use it would be highly appreciated. P.s this will be in the site master. Thank you. Quick update. Am i right in saying this is how you define a title with two images and a text area. .Query { background-image:url(../Images/RightTopSmoke.gif); background-repeat: no-repeat; background-position: top right; Text Details go here background-image:url(../Images/RightTopSmoke.gif); background-repeat: no-repeat; background-position: top left; } hmmmmm Hi I just creating a website skin I have upload he http://autismnetwork.jatos.co.uk/skin/skin.html I need to get rid of that irritating little gap between the bottom of the logo image and the bottom of the logo DIV. if anyone could show me some code thats does that, it'd be much appreciated. Thanks, Jamie Howdy all, I have three scrolling divs that i want to be the height of the page, so i'm guessing position:absolute and height:100% will do that just fine. But i want these three scolling divs to be inside a position:fixed element so that they stay put when scrolling down the page. Is this possible? I dont think a pos:absolute will work nested inside a pos:fixed. How could i work around it? thanks! Hello, I am wondering if something is possible.. and if it is, how I would go about accomplishing the desired result.. This is a sample page to illustrate the problem http://comp.uark.edu/~bcagnin/test/index.html Is there a way to resize the object from a link that is within the website being displayed in that very same object?? Also, I am willing to use iframe if there is a solution that can be found with that... Thanks!! Tyrick I am using another persons code for our band's MySpace.( With some of my own) I am trying to display the shows section and the music player. When i insert the shows section the music player always displays behind the shows section. It is displaying the music player within the limits of the shows section. How do i make the music player seperate? Here is the code for the entire site with the music and show sections bolded. Code: <i class=i>!--START CODE IN BAND MEMBERS --!</i>
<i class=i>
!-Start Div Overlay Content Block-!
<a href="http://www.msplinks.com/MDFodHRwOi8vdmlld3MtdW5kZXItY29uc3RydWN0aW9uLmJsb2dzcG90LmNvbS8=">
myspace code tutorials by Eileen</a>
!-Close 3 layers of cell/row/table. This puts our Div ONE table deep.
</i>
</td></tr></table>
</td></tr></table>
</td></tr></table>
<i class=i>!-Create and size our div. We will never close this div. It will close when the containing table closes-! </i>
<i class=i>!!! MODIFY width to the SAME width as your core image !!!</i>
<div class="myCoreDiv" style="position:relative; top:0px; width:799px; height:auto; border:2px green solid;">
<i class=i> when DONE editing CHANGE the border:2px to border:0px or change the magenta to the color you want your border.----!</i>
<i class=i> !----START CUSTOM CONTENT BLOCK 1----!</i>
<img src=http://i42.tinypic.com/16iz2j5.jpg>
<img class="grid" src="http://i11.tinypic.com/4pczehk.gif" style="position:absolute; top:0px; left:0px;">
<span class="off">!-START COMMENT FORM-!</span>
<div class="myCommentFormD">
<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment">
<input name="friendID" value="445328869" type="hidden"/>
<textarea name="f_comments" class="myFormBox"></textarea>
<center>
<input type="submit" value="Post Comment" class="myPostCommentButton"/>
<input type="reset" value="Clear" class="myClearButton"/>
</center>
</form>
</div>
<span class="off">!-END COMMENT FORM-!</span>
<i class=i> !----END CUSTOM CONTENT BLOCK 1----!</i>
<i class=i>!-Open 3 layers of table/row/cell-!</i>
<i class=i>!-IF do NOT want any content from my Right side, I can use i instead of L1-!</i>
<table class="L1" ><tr><td>
<i class=i>!-The below class i hides the remainder of the general table-!</i>
<table class="i"><tr><td>
<table class="i"><tr><td>
<style>.i {display:none}</style>
<i class=i>END CODE IN BAND MEMBERS</i>
<i class=i>!START code in Influences !</i>
<i class=i>!START Style Block For Hiding Elements on Band Page!
<a href="http://www.msplinks.com/MDFodHRwOi8veGlpaS51cy9tcy9iYW5kLWhpZGUtYWxs">MySpace Band Hide Everything</a>
</i>
<style>
.i, div.clearfix i i i {display:none}
{! fix a centering problem, and clear white space caused by clear gifs !}
td {width:auto;}
table td img {display:none;}
{! restore any images displayed inside our div. You may want to use block instead of inline for some images. !}
table td div.myCoreDiv img, table td div.myCoreDiv table td img,
table td div.myCoreDiv div img {display:inline;}
{!OPTIONAL restore image on maroon nav bar, we could use a.navbar img!}
div table td a.navbar img {display:block;}
{! removes most content and the space it occupied !}
table table table {display:none}
{! minimize the remaining main page content that can not be removed without effecting the ad and menus !}
table table td { height:0px; margin:0px; padding:0px;}
{! restore my div. !}
table div.myCoreDiv {display:block;}
{! restore div with Comments !}
table div.myCoreDiv div.myDclassFC {display:block;}
table div.myCoreDiv div {display:block;}
table table br {display:none;}
table table table br {display:block;}
{! OPTIONAL decrease space between bottom and bottom menu, and between bottom menu and cc thing !}
{! does not work in Safari !}
table div br {line-height:4px;}
{! reverse effect on custom div !}
table div.myCoreDiv br {line-height:11px;}
{! remove default background coloring !}
table table, tr, td {background-color:transparent !important}
{! ONLY if you want to remove the blue behind the ad banner AND the maroon !}
div.profileWidth table, div.profileWidth td {background-color:transparent !important}
div table {border-bottom:none !important;}
{! ADDITIONAL STYLE BLOCKS CAN GO HERE !}
<style>
{!- shows -!}
table table td.text div {position:absolute; width:440px; height:130px; overflow:scroll; overflow-x:hidden; top:30px; left:415px;}
{!- UnDo effect on Div in Friend and Comment spaces -!}
table table td.text table div {position:static; height:auto; overflow:hidden}
table table td.text div.commentlinks {display:none;}
table table td.text div table {display:block}
{!-fix column width of shows-!}
{!-set below px width to the width of your shows space-!}
table table td.text div table td, table table td.text div table {width:425px;}
table table td.text div table table {width:100% !important}
{!-adjust below value as needed-!}
table table td.text div table table table {width:40% !important}
</style>
<style>
{!-music player-!}
table table td.text div object {position:absolute !important; top:196px !important; left:100px}
table table td.text div object object {position:static !important;}
</style>
Hi, i have a bar at bottom of the page. It uses ul, li for menus., but i want to have 2 menu items at the left side of it and 2 items at the right side of it. My html code: HTML Code: <div id="nav_menu_wrapper">
<div class="nav_menu"><ul>
<li><a href="#">Varsler</a><a href="#">Chat</a></li>
</ul><ul>
<li><a href="#">Varsler</a><a href="#">Chat</a></li>
</ul></div>
</div>
My css code: Code: #nav_menu_wrapper { /* this will ba used as a wrapper for the nav_menu so we can center it (nav_menu). especially for IE */
height:25px; /* fix bar's height */
width:98%; /* use 100% of width */
/* the code below will PUT the bar at the bottom */
bottom:0px;
position:fixed;
/* hide scrollbar for this wrapper */
overflow:hidden;
}
#nav_menu_wrapper .nav_menu { /* the menu itself */
height:25px; /* fix bar's height */
width:98%; /* fixed width */
margin-left: auto;
margin-right: auto;
/* add effect */
background-color:#EEEEEE;
border:#666666 solid 1px;
}
/*
* menu links and link effects
*/
#nav_menu_wrapper .nav_menu ul {
margin-top: 5px;
list-style:none;
}
#nav_menu_wrapper .nav_menu li {
display:inline;
}
#nav_menu_wrapper .nav_menu li a {
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
border-right: 1px solid #666;
}
#nav_menu_wrapper .nav_menu a:link, #nav_menu_wrapper .nav_menu a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
text-decoration:none;
background-color:#EEEEEE;
}
#nav_menu_wrapper .nav_menu a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
text-decoration:none;
background-color:#666;
}
Both of the menus appears at the left side of the menu. http://www.posnickplus.com/testsite The navigation should display below the content on the page as it does correctly in Firefox on both a mac and pc and Safari on a mac. In IE, however, the nav links appear at the top. Functionality still works, just the positioning is off. Should be a simple fix, I just can't figure it out. THANKS! Hello. I would like to have: <table>... (at top) <table>... (in the middle) <table>... (at absolute bottom) All <table>s have <td>s in theme. I can acchive that in one browser at a time, but simply can't acchive it so it would work in most browsers (Firefox, Opera, IE...). I would be very grateful for your help. Thank you! -gavio http://wantedfraternity.webs.com/officerschat.html At the very bottom of my page I've got a gap...and I cant seem to see whats causing it. I had this problem before on another page, but I was able to fix it. This one I just cant seem to. Now the grey background is suppost to go all the way down, but its got a black spot stopping it now. Any help on what is causing it I'd be greatful. Thanks FF view perfect but IE8 I have a huge blank at the bottom.. See attachment or view http://www.koperasiloan.com.my and scroll bottom with IE8 |
|||||||