|
CSS - Open Link In Another Div
Hi all,
I am trying to re-create my web site, replacing Frames with CSS. I have a tree menu on one of my pages. Does any know how can I bring the functionality of master frame i.e, opening the link in the content pane? Similar Tutorialshey i was wondering if i can add a scrollbar area to my page and have the links only open in that area instead of going to a different page Hi! How do I open a link in a new window in XHTML strict? (knowing that target="_blank" forbidden). Thank you PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } http://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. Hello Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link? PS. no Javascript code needed, is their an alternative in css? I have my links defined with a dashed border, but I don't want this on linked images and I'm trying to figure out if I can accomplish this with CSS only without additional markup in my HTML file. Here is a sample file: http://www. shawkey.com/test/imagebordertest.html Any suggestions on how I can get the dashed border to not appear below the image and only appear below the text with just CSS? Hello is there a way to make it so hyperlinks are not decorated as the default blue? I have the following css which I've attempted to make it so the text '.com' is always white, but it defaults to the standard link color. html: <td class="nodecoration"><a class="nodecoration" href="http://www.somesite.com">.com</a></td> css: Code:
td.nodecoration {
background-color: #003399; color: white; width: 120px; height: 30px; font-family: "Verdana", sans-serif; font-size: 25px; font-weight: bold; text-align:center;
}
A:link.nodecoration {text-decoration: none}
A:visited.nodecoration{text-decoration:none}
A:active.nodecoration{text-decoration:none}
a:hover.nodecoration{text-decoration:underline}
Hi, Is this the correct way to create Open and Close Link with image background? it does not seem to work for me. Image is not displayed properly. Code:
<style type="text/css">
span.open{background-image:url('img/open.gif');background-repeat:no-repeat; width:20px}
span.close{background-image:url('img/close.gif');background-repeat:no-repeat; width:20px}
</style>
<a id="toggleLnk" href="javascript: toggleOpenClose()">Open This<span class="open"></span></a>
function toggleOpenClose() changes the class name and text as follows:
<a id="toggleLnk" href="javascript: toggleOpenClose()">Close This<span class="close"></span></a>
Using percentages so I can leverage .css when the page is printed. so... I have div with a background image. the image has a round off top-right corner. when i increase the percentage size, id like the width to grow from left to right so that the top right of the background image is always in view...no matter how wide or narrow the width of the div. Is this possible? hello I am currently working on a website with a template from mambo open source. Unfortunately there are some icons built in the css that are rather ugly to look at. Would any one of you know how to hide them? thank you and regards, schnauzer Yet another question about CSS layout. All I want is a block that encloses three others on the left (title), centre(description) and right(image) of the encapsulating block. I can do this with my eyes shut using tables but after several frustrating hours scanning online CSS tutorials, tryng DIV, SPAN, float left/right/AnywayAtAllAndPleaseDearGodWorkThisTime, I'm still no nearer the truth. Code:
<HTML>
<HEAD>
<style type="text/css" media="screen">
.header {
background-color : #E7D69C;
font-family : verdana, "trebuchet MS", "MS sans serif", sans-serif;
font-size : 1.1em;
color : black;
border : 4px #CCDFCC groove;
margin-left : 5%;
padding-left : 0.2em;
padding-right : 0.2em;
width : 90%;
}
.headerTitle {
float : left;
width : 33%;
position : relative;
}
.headerDescription {
float : left;
text-align : center;
width : 33%;
position : relative;
}
.headerImage {
text-align : right;
width : 34%;
position : relative;
}
</style>
</HEAD>
<BODY>
<DIV CLASS="header">
<DIV CLASS="headerTitle">
Title
</DIV>
<DIV CLASS="headerDescription">
Description
</DIV>
<DIV CLASS="headerImage">
Image
</DIV>
</DIV>
</BODY>
</HEAD>
Can anyone stop my slide back into tables? Is there a way I can have a div on my page that does not expand the window area (creating scrollbars) when the browser window is too small? I ask because I have a three-column layout, but the left and right columns are merely aesthetic-- they hold no content. The center column is 1000px, which is my limit. So if a user has a screen resolution of 1024 pixels wide, I don't want the left and right columns to cause there to be scrollbars. If my far-left and far-right column divs weren't a set width, that would solve my problem-- but then I need multiple background-images, which is only compatible with Safari. I could also make the <body> have "overflow:hidden", getting rid of scrollbars altogether... but then the valuable content on the middle column would be hidden if the browser window is too small-- plus you wouldn't be able to scroll down! Any ideas? Hi I have this which IE needs to call "menu-ie.css" and all other browsers need to call the "menu.css". Code: <!--[if IE]> <LINK rel="stylesheet" href="inc/menu-ie.css" title="contemporary" type="text/css"> <![endif]--> <LINK rel="stylesheet" href="inc/menu.css" title="contemporary" type="text/css"> Just tested and it doesn't work... it only calls "menu.css" Tried it with "if IE7" and "if IE6" with no avail. -------------- IE Style: Code: #menu * {margin:0;}
#leftcolumn {width:150px; float:left; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
.dropdown dd {position:absolute; top:0; overflow:hidden; width:207px; display:none; background:#fff; opacity:0}
.dropdown ul {width:203px; border:2px solid #C7DDCE; list-style:none}
.dropdown li {display:inline}
#top a.loook, #top a.loook:active , #top a.loook:visited{display:inline;padding:2px; text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
.dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:199px}
All Others Style: Code: #menu * {padding: 0;margin:0}
#leftcolumn {float:left; width:150px; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
.dropdown dd {position:absolute; top:0; overflow:hidden; width:184px; display:none; background:#fff; opacity:0}
.dropdown ul {width:180px; border:2px solid #C7DDCE; list-style:none}
.dropdown li {display:inline}
#top a.loook, #top a.loook:active, #top a.loook:visited {display:inline;padding:2px; text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
.dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:180px}
Anyone know how this is done? I want to change a link within a set of links. It is a vertical menu and it appears as a sub-category which i want it to look different. How do i reference the sublinks? I did this which has no effect. <a href='".$mypath."' id='catsub2'>"; //these settings override it still. #blanksideboxContent.sideBoxContent a{ color: #000000; font-size:1em; font-family:verdana; font-weight:bold; text-decoration: none; border:2px outset #000000; background-color:#5ec82a; width:125px; display :block; margin-left:2%; } #catsub2 a{ width:80px; } hi everyone, im wondering why my a:link etc is not working on the following page www.think2go.ch/index_template.htm, namely on the top menu where it says "seite drucken" "weiter empfehlen" "home" and "kontakt". it works fine with IE, but does not in other browsers. what its suppossed to look like is: a:link.2{ color: white; text-decoration: none; font-weight: bold; } a:visited.2{ color:white; text-decoration: none; font-weight: bold; } a:hover.2{ color: #85ADC0; text-decoration: none font-weight: bold; } a:active.2{ color:white; text-decoration: none; font-weight: bold; } sample code: <a class="2" onClick="window.print()" href="#">Seite drucken</a> any help is greatly appreciated! thanks... I'm trying to get my link area to display so that the user can move over the area surrounding the link as opposed to the link text itself, but I can't seem to get it to work properly. I thought I could just set the padding and that would take care of it. Code:
<div id="navBar">
<h4>Interface Links</h4>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
</div>
Code:
#navBar
{
position:absolute;
top:3em;
right:0;
width:15%;
margin:0;
padding:0;
background-color:#CCCCFF;
font-size:1em;
border-left:2px solid #666699;
}
#navBar h4
{
padding:0;
margin:0;
background-color:#666699;
border-top:2px solid #666699;
font-size:.90em;
text-transform: lowercase;
color:#FFFFCC;
}
#navBar a
{
display:block;
text-decoration:none;
padding: 8px 0px 2px 10px;
}
#navBar a:hover
{
background-color:#9999CC;
}
Newbie question...I've always struggled with getting my links to show up right (hover styles, visited styles, etc.) In this case, I want my links to show up without an underline normally, but with an underline when hovered over. When they're visited, I don't want there to be any difference. I want them to show up normally. Right now I've got Code: .leftnavtext A:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
}
.leftnavtext A:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: underline;
}
.leftnavtext A:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
text-decoration: none;
}
.leftnavtext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
}
And when I hover over a visited link, it doesn't get underlined. Any idea why? Thanks. if you see on http://www.ipan.be/dev/index.php?page=about in FF it is nice but in IE it put borders around some links of my class inhoudstafel... Does anyone know a solution? CSS dummy reporting in here. This does what i need it to, but how could i make it better...and please point me to a good tutorial on not only using DIV tags with ID and classes, but referencing Code:
/* links for navAlpha menu */
#navAlpha a {
color:#09c;
font-size:13px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
#navAlpha A:link {
COLOR: white;
}
#navAlpha A:active {
COLOR: white; TEXT-DECORATION: none
}
#navAlpha A:visited {
COLOR: white; TEXT-DECORATION: none
}
#navAlpha A:hover {
COLOR: blue; TEXT-DECORATION: underline
}
/* links for navAlpha menu */
#navBeta a {
color:#09c;
font-size:13px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
#navBeta A:link {
COLOR: white;
}
#navBeta A:active {
COLOR: white; TEXT-DECORATION: none
}
#navBeta A:visited {
COLOR: white; TEXT-DECORATION: none
}
#navBeta A:hover {
COLOR: blue; TEXT-DECORATION: underline
}
FF won't link to my css file my html code: (just head content) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Plastitrade</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="plastitrade.css" type="text/css" /> </head> IE picks it up? the css works if i put it in the html file? anyone encountered a prob like this? its irritating as i can't really test my pages locally now btw this is the first time i've encountered this prob cheers Shem |
|||||||