|
CSS - Fixing Links On A Page In Relation To Borders
Hello
I am trying to fix my links so they remain in the same place regardless of how large the users window is when they browse the site. I have tried using the following code in my style sheet. h3 { position:absolute; bottom:330px; top:670px; } but the link still moves around when you minimise the browser on the site. Bear in mind I have a think black border as well which runs all around the screen. Any help would be much appreciated. Similar TutorialsHi I don't know if this is a CSS issue, but how do you allow limit the movement of web pages when you drag IE window. So if its fixed it can be structured so that it can be seen by users who have a resolution of 800 X 600. And if its not fixed, then the page is stretched when you enlarge the window. Cheers Hi guys, I have a query, im trying to create the effect, that this site has. Quote: http://www.exigeinternational.com/index.htm i mean that the i want to create the effect that that site has when the page is minimised,i want each side to get smaller instead of everything moving to the left. sorry if it sounds confusing. appeciate all help thanks andy Hi all I am using a style sheet with the print media type to controll how my site looks when it is printed out. It works very well the only problem being that I have <div>s which make boxes for the content and I would like for the boxes to not get split upon diffrent pages. Idealy I would like to make it so that if the the <div> is going to split over two pages it just gets put at the start of the next page. This probaly isn't possiable but you never know. Any Ideas would be helpfull Nick Carlevaris I want to create 2 vertical page borders using an image. Is the best way creating a table? I need a pretty decent jumpstart. Thanks in advance. Hello All... I'm making lay-out page based on 2 section (left panel and main) using div layer and wrap it under 1 parent layer. My confusion arise as IE and FF doesn't treat equally (again!) FF seems to ignore the parent CSS definition while IE obey it, so the background and border value i define in it's parent tag apply on IE but not in FF. Here is the code related : CSS Code: Original - CSS Code .all2 { width:900px; border-bottom: groove #888888 2px; border-left: groove #888888 2px; border-right: groove #888888 2px; margin-left: auto; margin-right: auto; margin-bottom:auto; text-align: left; background-color: #FFECC7; padding:0; } .leftpanel { float: left; display: block; width:125px; font: 10px Arial, Helvetica, sans-serif; text-align: left; padding-top: 25px; padding-left:20px; padding-right:20px; } .mainpanel { float: left; display: block; width: 694px; border-left: groove #888888 1px; padding-top: 15px; padding-left:20px; padding-right:20px; text-align:justify; }
.all2 {
The HTML : Code: <div class="all2"> <div class="leftpanel"> ..... Left Panel Text </div> <div class="mainpanel"> .... Main Body Text </div> </div> The Doc Type is XHTML 1.0 Transitional Many thanks in advanced Hi everyone, I would like to position several <div> elements in relation to image <maparea>'s on top of an image. I have an image with several small icons on it that have information related to it. The information related to the icon can change pretty often, so I want to have that information text based so I can update it easier. Does anyone have an idea of how I could position those <div> elements in relation to the hotspot? I haven't really had much experience with 'relative' positioning, but with 'absolute' positioning I've always had issues with Netscape/Mozilla browsers displaying the elements about 10px off of where they look in IE. Is there any way around this? I'm all ears to any advice you may have. Brian I want to show in a page two different link styles, to achieve this I have created two css files, one for each link style, and I have attached it in the page thus: Code: <html> <head> <title>Link format test</title> <link href="StylesCSS/link1.css" rel="stylesheet" type="text/css"> <link href=" StylesCSS/link2.css" rel="stylesheet" type="text/css"> </head> <body> Then I have applied the styles thus: Code: <a href="index.aspx" class="letterLink1">Home</a> <a href="forgotten_password.aspx" class="letterLink2">I have forgotten my password</a> And both css files are as follow: link1.css Code:
a:link {
font-family: Arial;
font-size: 12px;
color: #669966;
text-decoration: none;
font-weight: bold;
}
a:hover {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}
a:active {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}
.letterLink1 {
font-family: Arial;
font-size: 12px;
color: #669966;
text-decoration: none;
font-weight: bold;
}
link2.css Code:
a:link {
font-family: Arial;
font-size: 10px;
color: #669966;
text-decoration: underline;
}
a:hover {
font-family: Arial;
font-size: 10px;
color: #FFCC66;
text-decoration: underline;
}
a:active {
font-family: Arial;
font-size: 10px;
color: #FFCC66;
text-decoration: underline;
}
.letterLink2 {
font-family: Arial;
font-size: 10px;
color: #669966;
text-decoration: underline;
}
But when I load the page, the link1 a:hover and a:active are showed as link2 a:hover and a:active. What is wrong? Thank you, Cesar I know I am going to sound very silly in this, I have only very basic knowledge of CSS, other than that I only know bits of HTML. I haven't tried making a site for a couple of years, and I've only ever made sites with frames before. Now everyone is telling me that you really shouldn't use frames because they cause all kinds of problems with links/search engines/ etc. So I've used CSS to make the layout, very basic- column of links on left, content on the right. The thing I can't get my head round is that all the content has to be on every single page, so that each one has all the links on the left coded into it... so if I want to alter this menu at all, say to add or remove a link, I have to edit every single page, which is 200+ pages! Surely there is a way to not have to do this? To somehow set a template for the content etc so that I dont have to press copy paste 200 times! Or am I just going to have to deal with it? It seems so mental after how easy it is to change things with frames! Thanks so much for any help you can offer. ok basically this is an accessibility thing, i dont want users (disabled) to read the links first page after page and i have read that i can place the links at the bottom but style them with css so they appear on top. i am trying to do something like this but my page just gets messed up if i move the links to below. page layout: Code: <div> //overall <div>//top> <div>side Links/menu <div>contents <div>footer I use this css: #clearfooter { /* VERTICALLY ALIGN THE FOOTER TO BOTTOM WHERE REQUIRED */ clear: both; height: 170px; overflow: hidden; } #footerbox { /* BOX FOR THE FOOTER */ height: 170px; width: 759px; margin:0 auto; padding:0; margin-top :-170px; text-align: center; } It puts the footer at the bottom of the page. In IE I can click on the links in that part of the page. In FF I cannot. If I remove the "clearfooter" id then it works in FF although obviously it knackers the page layout...any solution available? Hello, I have a cool jquery rollover script. But I have a problem with the CSS. The CSS for the script has an IMG tag to line the images up correctly. However, when I add the the script and it's CSS to my website, the IMG tag tells ALL images on website to go to the top left corner, and not stay where I originally placed them. Is there a way to modify the IMG tag in the script's CSS so that it only applies to the images in the script and not to affect the other images on my webpage? Here is my code: Code:
<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
$(function() {
$('.blocks').hover(function() {
$(this).children('.front').stop().animate({ "top" : '300px'}, 700);
}, function() {
$(this).children('.front').stop().animate({ "top" : '0'}, 400);
});
});
</script>
<style type="text/css">
#three {
width: 850px;
text-align: center;
margin: auto;
}
.blocks {
width: 250px;
height: 140px;
position: relative;
overflow: hidden;
float: left;
padding: 0 1em;
}
img {
position: absolute;
top: 0; left: 0;
}
</style>
</head>
<body>
<div id="three">
<a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/></a>
</div>
<p><a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/> </a>
<a href="http://www.google.com" class="blocks">
<img src="http://www.loriandersondesigns.com/jquery_8%202/back.jpg" alt="image" border="0"/>
<img src="http://www.loriandersondesigns.com/jquery_8%202/front.jpg" alt="image" class="front" border="0"/></a>
</div>
</div>
</body>
</html>
Thanks for listening! Hi There, I have deisgned a site using css layouts and have built it. It looks exactly how I want it to in Firefox and other browsers that have proper CSS support. I am unsure what I need to do to 'fix' the ie bugs. Can anyone give me any pointers? the test page is he http://www.storesprite.org/layouts/ Thanks Hey all I'm not very experienced with this. I'm having some troubles with floating divs. The page is here And the css is here The problem is that when I resize the window on IE6/win the divs on the main column fall down to the bottom of the page. Really apreciate your help. Marcello Ok, I have been working now for 2 days on a new testsite. Its far from done but I need someone with a fresh look to help me fix and optimize some things * The top menu is supposed to be white -->.vise in the css, but is not....I am missing something. * The bullets in the two right boxes dont appear in FF but do appear correctly in IE ?! Anything else ya see, let me know. I am very apreciate for help URL = http://www.serbia-today.com/test/testindex.php hello forum, I am having problem in fixing my <div> position.The div become visible by an event.plz help me . Regards. I am a web designer, taking on the challenges of some front-end coding. I'm fairly proficient with tables and HTML code, but I am trying a new web site using div layout and heavy CSS. http://neovistaproj.pangin.net Can someone take a look at this code, and provide some insight? I would really appreciate it. Some known issues: 1) the background has a gradient and a dropshadow combination. you can see that it isnt behaving properly, along the right edge. the gradients do not match up, but i know this isnt because the images were cut wrong. it is behaving weird, the way i have the bg and the images overlying it each other. 2) at the bottom, i have a repeating bg image so that the text can be as long as necessary, and still have the proper white bg, with border, and dropshadow. i had to jimmy-rig it a little, and chop my content well into two sections. its a pretty bad solution. any ideas? i will gladly provide any of the source files, for assistance, and will most likely compensate the individual who can provide me a workable template, for this design. THANK YOU! Hey guys. I'm having a few issues with CSS flaots and this one seems to be dominant no matter what I try. What I have tried is setting the min-width of a parent div so that when the users resizes the page smaller than 40em(font sizes i think) they start to get horizontal scrolling. Where it happens. There is about 10 colored blocks for changing the colors and also there is a gear with the word networking next to it(or underneath it) What I want to happen. Instead of the colored blocks going underneath each other when the site is resized I want them to stay where they are. I thought setting the parent div(also floated) with min-width:40em; would work. Also I'd like the word networking to not apear underneath the gear. Same issue as the colored blocks. I can't figure out what I'm looking for in google and anything I came up with used position absolute and I don't think that's gona work here. http://142.177.157.241:8080/portfolio4/ Site here css here IE looks good, but FF is a little messed up... The horizontal nav should be directly below the "header banner", and the vertical nav should be directly below that on the left... FF has quite a bit of overlapping... Also, with the horizontal nav... how would I change it so that it doesn't start until after the width of the vertical nav, but had a background (with a matching border) instead of just white space, and a spreading background on the right (with a matching border)... Thanks Bryan Here's the code in question I've attached the background image with the following CSS: Code: body {
background: #DDF19A url("/iris.new/images/bgIris-Blur-green-light.jpg") bottom left fixed no-repeat;
}
It works as expected in IE, but Firefox tends to lag a little bit when you're scrolling, and then snap into place. Same with NN, but Opera 8 is fine. Any thoughts on this? MPEDrummer |
|||||||