CSS - Want My Layer To Adjust To Windowsize, How?
hi there,
I have a problem, and though I feel it's pretty simple and basic I can't seem to work me way around it. this is what I want, but can't get: I have a layer, with a certain content. I have not specified the height, so the content determines the layers height. width is fixed value and that's ok. now the issue, I want the layers height to shrink if I start making the browser window smaller. So if I make the browser-window let's say 300 px high, the layer should be 300 to. setting height to 100% wont work... what the basic solution here? hope for some help, kind regards Game Similar TutorialsHello 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 Thanks for taking the time to read my question. I have a small page that I am starting. I like how it looks in FF better than how it looks in IE. What can I do to my css so that IE will look like FF, with out wrecking how FF looks? Thanks for your help. Brad p.s. The images go in a folder called 'images' hello everyone, i am using css based menu . requirement is that, menu should adjust its width automatically based on the text length. Here is my css : = css Code: Original - css Code li ul li { background: #000; color: #fff; padding-top: 4px; border-bottom: 1px solid #fff; letter-spacing:1px; text-transform: capitalize; text-shadow: 2px 2px 2px #22222; width: 250px; margin:0px auto; height: 18px; font-size: 11px; font-weight: normal; text-align:left; filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; }
you just see the attachment, you would realise that , the text is cropping & not displayed. Also , can any one suggest , what can I do to make this CSS to cause make it attractive.? Is there a way to decrease a default spacing between bullet and text in <ul>? Trying to follow "the best practices" I wanted to convert my menu from bunch of <a></a><br> to unordered list. I already display arrows icon next to menu items so I though it would save me some typing on <img>. But there is one problem: I can't decrease the space between bullet and text. There is bullet, around one em of empty space and then text. It breaks my layout, making menu items wrap to another line, and also wastes some space. I tried to play with margins and padding, but bullets still stay at the same place. Also negative margin and padding doesn't seem to work. If I use a background image instead of bullet, I can adjust the spacing but then the bullet position doesn't seem consistent and get cramped on text in longer lines. I may be trying to square the circle here. I have a container that is not the full length of the page [padding top and bottom]. Within the container, I have 2 main content elements: 1. a nested div forms a strip down the left edge, holding a decorative pattern. [note: it doesn't currently extend down the entire left edge ~ other items are above it ~ but I can include those in the strip and make it 100% if the idea is workable]. 2. the main content div is beside it. The container automatically adjusts to the height of the entire content in both divs. I'd like for the 'decorative' div to automatically adjust to 100% height of the container instead [ie. match the height of the content to the right of it - automatically]. Is this possible? Kravvitz....I know If I have a couple of paragraphs of text and would like to adjust the space when you press return to start a new paragraph, how would I add it to my styles code below. Right now, a hard and soft return is too big and I would like the spacing to be about half the font size of the text. How would I add it to my stylesheet code in this example: Code: .bodytext { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none; text-align:right; font-weight: none; background-color: #ffffff; line-height:1.5; letter-spacing:-0.02em; } I 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 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?! 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'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 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 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 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 have a web page containing 3 layers. There are placed side by side with absolute positions. The middle layer contains a image with a fixed size. Now I have to change the image based on user's selection, so it is no longer fixed sized. I want to let the third (right) layer to re-adjust its position when image is smaller. How to make it work? This is my first time working with layers, please help. Thanks. Matt 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. 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 |