|
CSS - Css Layer Positioning
Hi,
I'm trying to set up a side menu, which appears on the right-hand side of the page. Code:
<style type="text/css">
#SideMenu {
color: #639;
background-color: #FBFBFB;
position: absolute;
top: 275px;
left: 630px;
width: 190px;
height: 250px;
}
</style>
However, when the browser window is resized, the layer then obstructs the main content (by floating over it), and does not remain in its place as it should. This is how it should look like:: However, as the browser is resized, the layer does this: I'm tring to remedy this using CSS only, so please send any suggestions to me. The code for the sidebar is: Code: <div id="SideMenu"> <p>Side Content. I like to eat food.</p> </div> Any ideas guys?! Similar TutorialsI need to position a 200px high by 300px wide layer in the center of the page. does anyone know a simple way to do this, i have thought about using JS to calculate the width of the page, take off the 200px, and halve it, but that seems like overkill, isnt there a simple CSS command? Thanks Xaphan Well, I can't post links so this is going to be hard as hell to type out. I have a layer within that page that I want in a certain position, yet when I move the width of my browser the layer does not stay where I want it. Obviousely, this does not make any sense because its something you have to see. I checked the rules for the forums and I can't find where it states anything about URLs, if someone would be so kind to show me, I'd appericiate it. Not that it matters witout seeing it on the page but my code for this layer is: Code: <div id="Layer1" style="position:absolute; left:848px; top:85px; width:118px; height:167px; z-index:1">
<div class="mltop">schedule +4hrs </div>
<p>00:00 - Music <br>
01:00 - Music <br>
02:00 - Music <br>
03:00 - <a href="">BRR</a></p>
<p><b>Current time: 00:00</b><br>
Times in CST/CDT
<br>
</p>
</div>
I have a webpage located at http://www.niu-sae.com I have a drop down menu image, in a div layer that will pop up when you roll over the first link "Active Chapter". First of all the positioning is all weird... when I am at full screen I have to set the div left at 285... even though it is really only about 116. any idea what I am doing wrong? Second even when I get it lined up... the way it is now... it changes if you resize the window. HELP. please. I am trying to get the footer DIV to appear directly below the content div on the page. Cant get it to work. CSS and DIV code is below if anyone can offer some advice? Thanks. Code:
#page_footer {
background-color: #ff0000;
width: 729px;
height: 30px;
position:relative;
bottom: 0px;
left: 35px;
font-family: arial, tahoma, times new roman;
font-size: 11px;
font-weight: normal;
color: #5A5A5A;
}
<!-- // MANDATORY PAGE CONTENT HOLDER // -->
<div id="page_content_holder_sizing">
<div id="page_content_section_name"><?=str_replace("::", "-", $page_title)?></div>
<div id="page_content_top_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>
<div id="page_content_bottom_stroke"><img src="/site_images/pre_load/spacer.gif" width="729" height="4"></div>
<!-- // CONTENT TEMPLATE // -->
<!-- // END CONTENT TEMPLATE // -->
</div>
<!-- // MANDATORY PAGE FOOTER // -->
<div id="page_footer">
footer goes here
</div>
<!-- // END MANDATORY PAGE FOOTER // -->
<!-- // END MANDATORY PAGE CONTENT HOLDER // -->
EDIT: OK, I've worked out all of the issues except the fourth one, which doesn't really have to do with CSS specifically. Why do line breaks insert gaps? The problem is especially prevalent in IE. First issue: I'm trying to position one image over another image and its inserting this big gap! As seen on http://www.zacwittedesign.com/olive/pool.html we have the "about the pool" image position on top of the big image to the left side, but you can see there is a big gap above the big image. If I simply comment out the 'about the pool' image, the gap goes away and all is fine. I thought relatively placed elements were not supposed to affect the flow of elements beneath them? Can you see anything wrong in my code? Second Issue: There are two issues with the layer on the top of the page where the dots should be coming out of 'new projects' (id=projects_layer). It should be positioned over top.jpg as seen in hotstuff.html. In that page I manually moved it down by adding an additional 60px to the relative offset, but the space where it would have occupied remains and pushes the whole page down. Everything should look like it does in portfolio.html which doesn't currently use layers. You can see a version without my manually shifting it down and demonstrating the third issue at pool-valign.html. Third Issue: The vertical-align of all the images inside the projects layer. For the layout to be correct, the images need to be top-aligned or they won't line up with the dots and they'll slightly cover the button images beneath them. I have a style property set vertical-align:top; but it doesn't seem to do anything. Do I misunderstand the vertical-align property? There's also a small gap beneath the images when viewed with IE. I've changed the background color of the layer so you can more easily see the problem. Fourth issue: You've probably noticed in my code that I insert and HTML comment for every line break. That is because if I don't, IE reads the line beaks as non-whitespace and inserts both vertical or horizontal gaps between the images. Whats the deal there? Fifth Issue: In IE there is a one or two pixel gap above right.jpg where the tim olive logo is. This doesn't happen on firefox and it doesn't happen on pages that don't use layers like portfolio.html. ...And I haven't even tried it on a mac browser yet... Hello, I am very new to CSS, having only used stylesheets for basic formatting of text, etc. I have created a site where the layout is based on tables (I know ... when I have spare time, I will start learning CSS for this). I have a main table with 1 row and 1 column, height 95%, width 100%. Within this I have a table with a fixed layout (set height, width) for the table elements. This table is centre and middle aligned. Unfortunately the text provided for one of the cells in the table is exceeding the amount expected and the cell height has increased to accommodate for this. I thought of creating a layer and placing it over the cell and inserting the text here and setting the overflow to scroll. However, depending on screen resolution, browser the layer is not always positioned where I want it. Can I somehow position the layer relative to the table cell ? If not, do you have any suggestions as to what I can do to fix this. I do not have the option to rewrite the site using CSS, due to deadlines. Thanks in advance for your help. Bea Ok here's my problem - I have three columns/layers (left, center, right) which are inside the content layer. I need to use relative positioning so when the page is re-sized all the page elements are still centered on the page. The problem I am having is that I cannot figure out a way for the colums to be aligned and seem to go under one another. I also need to keep the center colum with an overflow. If anyone has any ideas I would be very grateful! Thanks <div id="content"> <div id="leftcolumn"></div> <div id="centercolumn"></div> <div id="rightcolumn"></div> <!-- End content --> </div> #leftcolumn { background-image: url(images/leftcolumn.gif); height: 412px; width: 148px; position: relative; margin-top: 0px; margin-left: 4px; } #centercolumn { background-color:#FFFFFF; height: 412px; width: 382px; position: relative; margin-top: 0px; margin-left: 3px; overflow: auto; text-indent: 2px; } #rightcolumn { background-image:url(images/rightcolumn.gif); height: 412px; width: 148px; position: relative; margin-top: 0px; margin-left: 7px; } Hello I thought I could make it, but what I got so far is jumping over the screen, so please a need some help. I got a image with two transparant shapes. Behind those shapes I would like to show 2 other images. |-------1-------| | |-----| |----| | | |...2..| |..3..| | | |____| |____| | |_____________| Image 1 should be on top z-Index Image 2 should under image 1, a part of the image should be visible. Image 3 should under image 1, a part of the image should be visible. Now the issue, image 2 and 3 should be dynamically replaceable. Please help Thanks Hi. Any help would be appreciated. I am trying to cut down on my image sizes on my website: http://toptiertemplates.com, but i am having a few difficulties. I have this table which was created in photoshop which is off to the side. I would like to take just a slice of the table and repeat the image the full length of the table's original length. The page is written by placing everything with divs. I know how to set the image as a background and all and repeat it, however, when i do so, it replaces my website's background and just shows up as a white space. So i am wondering if I have to use layers of some sort or anything else. I'd appreciate some help. Thanks. http://balmarketing.com/new/ I think actually the trouble lies in my content layer not centering itself correctly and its being pushed to the right by the nav layer. It looks semi what I want it to look like in FF but not in IE. Any suggestions on how I can fix this? Hi, Does anyone know how I can do drop down layer with in a table. I have table whihc has the class name I want to show the description in a drop down fashion when user click on the class name. Does anyone knows How I can do this. Please help me. I am new to Css thanks I've been re-designing my site in valid XHTML 1.1 and CSS, and I've hit a bit of a problem.... Everything works perfectly in Firefox, but IE isn't liking things at all. The navbar at the left should stretch all the way to the bottom image, but it isnt having it. I've tried messing with it for about an hour now, and can't fix it.... The page can be found at URL and the stylesheet at URL Oh, and I know the colours are all messed up, I'll fix that later :P Edit: Fixed bbCode Hi all, I'm trying to center a CSS layer, and have tried everything google and I can find on the web about CSS centering, but none work. I simply cannot get the following "menu" to center horizontally in a browser window [note: I *can* get it to center if I set the left and right margins of the "menu" layer to the same value, but that stretches the "BDB76B" colored background out, which I don't want to do]. Any help appreciated - thanks in advance to any takers! Here is the relevant code in the html document: <div id="menu"> <a href="index.html" class=menu_link>home</a> <a href="services.html" class=menu_link>services</a> <a href="hosting.html" class=menu_link>hosting</a> <a href="testimonials.html" class=menu_link>testimonials</a> <a href="tips_tools.html" class=menu_link>tips & tools</a> <a href="contact.html" class=menu_link>contact</a> </div> and here is the relevant code from my style sheet: #menu { background: #BDB76B; position: absolute; top: 85px; height: 15px; width: 800px; padding-bottom: 5px; z-index: 100; } a.menu_link, a.menu_link:visited{ font-size: medium; color: #808000; font-family : "Gill Sans MT", "Gill Sans", GillSans, Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-variant: small-caps; margin: 0px; padding: 2px 5px 4px 5px; text-decoration: none; } a.menu_link:hover{ font-size: medium; color: black; font-family : "Gill Sans MT", "Gill Sans", GillSans, Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-variant: small-caps; margin: 0px; padding: 2px 5px 4px 5px; text-decoration: underline; } I want to take a layer and center on a page. In other words if I have the margins top = 0 and left=0 then inside the main layer which takes into account the entire page I want it to be centered on the page. At present I can center a table on a page but not a layer???? how to do this? thanks Hello All, Im currently stuck trying to get a layer on top of a layer. The image below shows the problem. img68.imageshack.us/img68/5579/picture3cl2.png And here is a link to a code version: thenpcs.com/beta/ Any help greatfully appreciated! Hi! Does anybody have some great link or book advice about all the properties of the DIV and/or LAYER - tags? Inspiring examples with javascript to this are also welcome. I will use it to build advanced layer functionality. Regards Bjorn Hi Guys, Basically I'm having trouble with getting the 'Content' div layer to wrap around the switching div layers. The grey background colour represents the 'Content' div layer which wraps around the button menu OK but doesn't wrap around the layers which switch. The bodged way of doing it is to have a fixed height but then it leaves a blank area underneath the divs that are short of text...If you get what I mean? Code:
<div id="content_test">
<div id="rollovercontentwrapper">
<div id="tabwrapper">
<ul id="tabmenu">
<li><p><a href="#" onClick="javascript:showTabContentOne('TabContentOne')">Summary</p></a></li>
<li><p><a href="#" onClick="javascript:showTabContentTwo('TabContentTwo')">Benefits</p></a></li>
</ul><!--TABMENU-->
</div><!--TABWRAPPER-->
<div id="TabContentOne" class="TabContentOne" style="visibility: hidden">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus risus,
porttitor non aliquam non, scelerisque vitae turpis. Duis venenatis nisl lectus,
et aliquam eros. Nam commodo, ligula sed ultrices vehicula, justo augue ultricies
urna, sed rhoncus nisi dui sed risus. Nullam commodo risus nec justo sagittis eu
cursus nisi interdum.</p>
<br>
<p>In hac habitasse platea dictumst. Sed vulputate auctor cursus. Morbi ac
ullamcorper dui. In sem velit, pulvinar sit amet cursus id, vulputate fringilla
erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Sed lorem urna, imperdiet eget fringilla eget, molestie nec justo.
Fusce diam nulla, fringilla a sodales at, rhoncus vitae massa. Donec tincidunt,
leo quis fermentum venenatis, purus elit tincidunt ipsum, vitae sollicitudin nulla
orci nec arcu. Sed non neque neque, ac pharetra lectus. Donec a massa mauris. Sed
vel magna eget tellus commodo placerat in quis risus. Aenean velit lectus, aliquam
quis dictum ac, pellentesque sed diam.</p>
</div><!--TabContentOne-->
<div id="TabContentTwo" class="TabContentTwo" style="visibility: hidden">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus risus,
porttitor non aliquam non, scelerisque vitae turpis. Duis venenatis nisl lectus,
et aliquam eros. Nam commodo, ligula sed ultrices vehicula, justo augue ultricies
urna, sed rhoncus nisi dui sed risus. Nullam commodo risus nec justo sagittis eu
cursus nisi interdum.</p>
</div><!--TabContentTwo-->
</div><!--ROLLOVERCONTENTWRAPPER-->
</div> <!----CONTENT_TEST---->
<div id="onebyone" style="visibility:hidden;">
<img src="onebyonepixel.gif" onLoad="javascript:showTabContentOne('TabContentOne')" width="1" height="1">
</div>
Code:
div#rollovercontentwrapper {
float: left;
width: 630px;
background-color: #E9E9E8
}
div#tabwrapper {
width: 630px;
}
ul#tabmenu {
display: block;
float: left;
width: 630px;
list-style-type: none;
border-bottom: 1px solid #0048A7;
}
ul#tabmenu li {
display: block;
float: left;
background-color: #E9E9E8;
}
ul#tabmenu li a {
display: block;
float: left;
padding: 10px;
background-color: #E9E9E8;
border-top: 1px dashed #0048A7;
border-right: 1px dashed #0048A7;
}
ul#tabmenu li a:focus {
display: block;
float: left;
padding: 10px;
background-color: #3383CD;
border-top: 1px dashed #0048A7;
border-right: 1px dashed #0048A7;
}
#TabContentOne {
float: left;
position: absolute;
top: 350px;
width: 628px;
z-index: 1;
padding-top: 10px;
padding-bottom: 10px;
}
#TabContentTwo {
float: left;
position: absolute;
top: 350px;
width: 628px;
z-index: 1;
padding-top: 10px;
padding-bottom: 10px;
}
div#onebyone {
float: left;
}
div#content_test {
float: left;
width: 900px;
padding: 20px;
background-color: #CCCCCC;
}
Can anybody help me out on this? Many thanks, Mark |
|||||||