|
HTML - Problem With Div Positioning - Anyone Have Ninja Div Knowledge?
Hi guys
In an effort to have a div with a semi transparent background, I have made two divs - one with the transparency, and another to place over the top for my content. I can't get my overlay div to position correctly - it seems that ie and FF start off placing the div from different positions. The page is at www.popbeatblues.com.au/rw/artist_1.php Also, making the overlay have an absolute position has chnaged the appearance of it's content divs too. Any ideas what I'm doing wrong? Cheers Shaun Similar TutorialsTake a look at my site. Just in the making. www.ringgoldhs.com I want my navigation bar to be horizantal. It is made of individual "image links" Quick help please? All, Sorry if this seems too stupid. This is my first question to the forum. If I use Paypal to create a BuyNow button, I paste the html code into my webpage. When I preview the webpage the link is just dead. Is this normal? How do I know the link works? Any suggestions? Hello all, I noticed there are more than a handful of different scripting languages, markup languages, and many different methods to building a modern day website. If im starting from scratch and I would like to build a professional website such as yahoo (homepage), craigslist, e-commerce, etc... A website that allows users to create their own accounts and such, what should I need to know? Is learning HTML + CSS really a good starting point? Is HTML, CSS, CGI + Perl sufficient to having the tools needed to create a good website? Realisticly, do professional web-designers really sit down and write code to create a website or do they use some fancy third-party application that basically does all the work for them? I have always wondered about these questions any help will be greatly appreciated. Hi, basically i want to open an online clothing store via bigcartel. If i buy a site they said i can add my own html to change the layout etc. I don't know if it would be best to hire someone, or if i would be able to do it myself. I don't know anything about html etc, are there any websites that i can design a website on and get the code? I want something simple, similar to this http://olivemanna.com/ Thank you! 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. hi, i want to have a search box, and i would like it to be in the same line as my horizontal menu. how can i display a form inline with the rest of my menu? if i use div align right for my form it can be pushed right , but doesnt display properly in ie. I assume its not a right way to do it. could someone please help me out? thanks. <li><a href="" title="Miscellaneous">Misc.</a> <ul> <li><a href="">Miscellaneous</a></li> <li><a href="#">News Feed</a></li> </ul><span></span> </li> <form method="get" id="searchform" action=""> <input type="text" class="search1" style="color: #696565" value="Search " onfocus="if(this.value==this.defaultValue)this.value=''; this.style.backgroundColor='#FFCC99'" onblur="if(this.value=='')this.value=this.defaultValue; this.style.backgroundColor='#FFFFCC'"/> <button class="image" title="Submit Search">Go</button> </form> </ul> When i tried to overlap two images, one of them at foreground(with opacity of zero value) and other one at background using absolute positioning. The image with absolute position works well with Google Chrome while when i try to open with any other browser or resoltion, the image displaces from its position i.e. it changes its required position. Code: <img src="myimage.jpg" width="150" height="113" style="opacity:0.0;filter:alpha(opacity=0);position:relative"><img src="myimg2.jpg" style="position:absolute;top:150px;left:150px" /> Please provide possible solutions... Comparing IE7 to Firefox... the TEXT sitting on the image looks fine in IE 7 but is slightly "bumped up" in Firefox and most other browsers. Does anyone know the explanation for this?... Thank you. I'm trying to have 1 line of copyright at the bottom of each page on a site, but i am having to use loads of breaks to get it to the bottom each time, because when i do
Code: style="position: absolute; bottom: 5px;" in the div for it, it just goes straight to the bottom of the page before scrolling down. By that i mean when you open the page it is at the bottom, but there is more below it which you need to scroll down to, so really it is somewhere in the middle of the page. Hope i explained that well enough :-S If not here's a screenshot :-p http://i56.photobucket.com/albums/g1...wco99/cpss.png Any ideas? Hey all. I am having some trouble positioning some images to the right of a paragraph using css. Can anyone help? HTML: Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="../public_html/pages/nature.css"> <!-- TemplateBeginEditable name="doctitle" --> <title>Nature</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <script type="text/javascript" src="../public_html/pages/nature.js"></script> </head> <body onload="MM_preloadImages('../public_html/content/homerollover.jpg','../public_html/content/aboutrollover.jpg','../public_html/content/clientsrollover.jpg','../public_html/content/contactrollover.jpg')"> <div class="pagecontainer"> <div class="header"><img src="../public_html/content/header.jpg" alt="Header" /></div> <div class="menunav"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../public_html/content/homerollover.jpg',1)"><img src="../public_html/content/homebutton.jpg" alt="Home" name="Home" width="151" height="40" border="0" id="Home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','../public_html/content/aboutrollover.jpg',1)"><img src="../public_html/content/aboutbutton.jpg" alt="About" name="About" width="150" height="40" border="0" id="About"/></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Clients','','../public_html/content/clientsrollover.jpg',1)"><img src="../public_html/content/clientsbutton.jpg" alt="Clients" name="Clients" width="150" height="40" border="0" id="Clients" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../public_html/content/contactrollover.jpg',1)"><img src="../public_html/content/contactbutton.jpg" alt="Contact" name="Contact" width="149" height="40" border="0" id="Contact" /></a> </div> <div class="content"><div class="contentheader">Lorem ipsum</div><div class="contentcontainer"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lectus. Donec eget tortor id pede vehicula lacinia. Nam vitae risus non neque facilisis consectetuer. Suspendisse bibendum, sem nec rhoncus laoreet, diam tortor malesuada enim, volutpat volutpat sem nisi eget nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris scelerisque. Sed ligula. Mauris neque mi, rutrum nec, luctus a, dictum nec, libero. Duis feugiat erat eget metus. Fusce non orci. Vivamus vestibulum dapibus ipsum. Nunc dictum bibendum nunc. Nam odio augue, tincidunt eget, tristique quis, varius sit amet, justo. Suspendisse sed eros.</p></div></div> <div class="footer">Footer</div> </div> </body> </html> CSS: Quote: @charset "utf-8"; /* CSS Document */ * { margin: 0px; padding: 0px; } body { padding-top: 3%; padding-bottom: 3%; background-color:#bfa494; } .pagecontainer { width: 600px; margin: auto; background:#FF0000; } .menunav { background:#8c8e73; height: 40px; } .header { background:#0000FF; height: 279px; } .content { border-left:#000000 1px solid; border-right:#000000 1px solid; border-bottom:#000000 1px solid; background:#ffffff; height: 300px; z-index:1; } .contentheader { padding:20px; color:#6c482d; font-size:20px; font-weight: bold; font-family:Arial, Helvetica, sans-serif; z-index:2; } .contentcontainer { margin-left:20px; margin-right:300px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333333; text-align:justify; z-index:3; } .images { padding-bottom:200px; padding-left:400px; z-index:4;} .footer { background-color:#0066CC; height:40px; } Image: http://pseudo.samcamfilms.com/temp.JPG Any help would be appreciated. I have a problem... I want the text to stay where it is in the window when the browser is re-sized. Every time I resize the window, the text wraps and covers everything down the page, leaving a vertical sentence with 3 letters each line...ugh I hope you are following me. The absolute positioning works with tables and graphics, but I can't seem to get it to work with text (<p>). I have used CSS to position everything on the page, but when I resize the window, it seems the text goes along with it. Maybe my problem is using CSS for EVERYTHING. Is that ok>? it seems that I have the most luck using an external CSS document for positioning than frames, and such. Maybe if I used a table to outline the entire page? Which is better? How do I get the text to "stick" to where I put it, like the tables and such? Here is the code: <div> <p class="homehead">HEADING</p> <p class="offic"><i>Official website of</i> <b>My Company</b></p> <p class="former"><i>(Formerly My old company)</i><br><br> <hr width="250%" style="margin-left: -150px;"></p> </div> and the embedded CSS: <style> p.homehead { font-family: verdana; font-size: 19pt; font-weight: bold; position: absolute; top: 130px; left: 300px; } p.offic { font-family: verdana; font-size: 14pt; position: absolute; top: 170px; left: 285px; } p.former { font-family: verdana; font-size: 11pt; font-weight: ; position: absolute; top: 200px; left: 380px; } </style> What can I do to remedy this? Thanks matthew HTML Code: <a href="http://live.xbox.com/en-US/MyXbox/Profile?GamerTag=P2W360"> <img stely="position:absolute; TOP:30px; LEFT:30px; WIDTH:75px; HEIGHT:75px" src="http://i43.tinypic.com/35jibzd.pnge" /> </a> Why won't it position properly? I'm using this template on my Tumblr blog: http://blog.tmimgcdn.com/wp-content/...ute.jpg?9d7bd4 I'm wondering how I can get those boxes to the top so that they are not centered? I've been messing about with the HTML for ages. You'll have to excuse me because I'm a noob at HTML. I appreciate any help! Thanks. Hello Folks, I'm currently redesigning my site and am having a problem with the last bit! I know that CSS is the method of choice now for web design but I need to integrate my site with a commercial shopping cart called Actinic. This uses tables and is virtually impossible to rewrite using CSS. It makes for a seamless integration if I stick with tables for my part of the site, and less headaches trying to make the two sites look the same. I want to move some of the links away from the left hand column on the page and put them into a horizontal bar at the bottom. I've created a tile which repeats, but I want it separated a bit from the left hand column. Here's a url so you can see what I'm on about. http://www.magicalwonders.com/NewLook/Index.html You will see that the blue bar created by my tile is stuck to the side of the left hand column. My problem arises in trying to move this bar to the right of the left hand column, so that there is a gap between the two. I was hoping to avoid using a full size graphic as I want to keep the file size to a minimum. I've tried Cell Spacing & Padding which doesn't have any effect, so I've tried putting the background tile in between Div tags and specifying a width using the following code:- <td align="center" ><Div width=300px id="footerbackground">Some links go Here</Div></td> This hasn't worked though and the tile fills up the entire width of the cell that the Div is in. I would be grateful if anybody can offer any advice. Many thanks, Myles Hi all, [LINK REMOVED] Just in the process of changing this website from a black layout with a background to an all white layout... I'm wishing I had started from scratch now but I stupidly tried to work with the existing site. So anyyways you can ignore the crappy looking bits because my question is just about the menu bar at the top... It's made from an inline list. Is there any way that I could spread it out across the screen, so that the menu item on the right is hard up against the right? The other thing is that the site will be in 3 or 4 languages so the menu items will have more characters in Spanish (for example). It needs to be able to adapt, or I need to implement a different solution for each language. The html looks like this: Code: <!-- main navigation --> <ul id="nav"> <li class="home"> <a href="index.htm"><span>Home</span></a> </li> <li> <div> <ul> <li><a href="message-from-director.htm">Message From Director</a></li> <li><a href="what-is-15-15.htm">What is 15/15?</a></li> <li><a href="festival-history.htm">Festival History</a></li> <li><a href="judges-special-guests.htm">Judges & Special Guests</a></li> </ul> </div><a href="#"><span>About 15/15</span></a> </li> <li> <div> <ul> <li><a href="register-now.php">Register Now</a></li> <li><a href="get-ready.htm">Get Ready</a></li> <li><a href="conditions-of-entry.htm">Conditions of Entry</a></li> <li><a href="faq.htm">FAQ</a></li> </ul> </div><a href="#"><span>How To Enter</span></a> </li> <li> <div> <ul> <li><a href="screening-information.htm">Screening Information</a></li> <li><a href="nominations.htm">2009 Nominations</a></li> </ul> </div><a href="#"><span>Programme</span></a> </li> <li> <div> <ul> <li><a href="films.htm">Films</a></li> <li><a href="festival-trailers.htm">Festival Trailers</a></li> </ul> </div><a href="#"><span>Archives</span></a> </li> <li> <div> <ul> <li><a href="festival-sponsors.htm">2009 Festival Sponsors</a></li> </ul> </div><a href="#"><span>Sponsors</span></a> </li> <li> <div> <ul> <li><a href="press-releases.htm">Press Releases</a></li> <li><a href="images.htm">Images</a></li> </ul> </div><a href="#"><span>Newsroom</span></a> </li> <li class="contact"> <div> <ul> <li><a href="contact-us.php">Contact Us</a></li> <li><a href="15-15-committee.htm">15/15 Committee</a></li> </ul> </div><a href="#"><span>Contact</span></a> </li> </ul> ...and the CSS looks like this: Code: #nav {
font-size: 15px;
line-height: 20px;
list-style: none;
padding: 0;
position: absolute;
top: 250px;
left:-5px;
width: 750px;
}
#nav li {
display: inline;
float: left;
margin: 0 0 0 0px;
position: relative;
}
#nav a {
color: #000;
float: left;
text-decoration: none;
}
#nav a span {
cursor: pointer;
float: left;
display: inline;
font-weight: bold;
line-height: 30px;
padding: 0 5px;
}
#nav li.hover a,
#nav li:hover a {
background: url(../img/active-l.gif) no-repeat 0 0;
}
#nav li.hover a span,
#nav li:hover a span {
background: url(../img/active-r.gif) no-repeat 100% 0;
}
#nav .contact div {
background: #D3D2D2 url(../img/bg-bg-t2.gif) no-repeat 0 -1px;
left: auto;
right: 0;
}
* html #nav .contact div {
right: -1px;
}
#nav div {
background: #D3D2D2 url(../img/bg-bg-t.gif) no-repeat 0 -1px;
display: none;
left: 0;
padding: 5px 0 0;
position: absolute;
top: 30px;
width: 168px;
z-index: 100;
}
#nav li.hover div,
#nav li:hover div {
display: block;
}
#nav div ul {
background: url(../img/bg-b.gif) no-repeat 0 100%;
list-style: none;
margin: 0;
overflow: hidden;
padding: 0 0 5px;
text-transform: none;
width: 168px;
}
#nav div ul li {
margin: 0;
padding: 0;
width: 168px;
}
#nav li.hover div ul li a,
#nav li:hover div ul li a {
background: none;
color: #000;
display: block;
line-height: 30px;
padding: 0 0 0 9px;
width: 159px;
}
#nav li.hover div ul li a:hover,
#nav li:hover div ul li a:hover {
background: #D9581F;
}
Any ideas? Thanks so much in advance... Neil The problematic page has this url: http://geosci.uchicago.edu/~moyer/Mo...GroupPage.html It shows up in firefox the way I want it to. The pictures enlarge right on top of their thumbnail accompaniments. The enlarged images are absolutely positioned. However, in chrome, internet explorer and safari, they enlarge several hundred pixels left of where I want them to. Is there a way I can have the enlarged images positioned relative to the thumbnails? Or can I add a margin to the code that only firefox will recognize? I can send you the code if you need it to figure out the problem. It is just long and confusing, because I was modifying somebody else's code and I am a newbie. 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 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 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 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 |
|||||||