|
CSS - Need Some Creative Ideas For Linkhandling
I'm not entirely sure where to put this, but as it concerns css, and quite possibly jquery, I'll roll it on into this forum.
I'm working on a new site, and I'm not entirely sure as how to handle the links of it, ideally i'd like it to be a 1-page affair as much as possible, so what I thought is that each link would open inside a div. As you can see by the sketch below, I've a middle column which i dubbed 'SERVICES' that displays various categories of service that I have, hence the 3 centered columns below. Here's the sketch: Now at first thought, the 3 Categories would be a dropdown menu in essence, which I thought to make in jQuery, specifically a modified version of this: http://buildinternet.com/live/smoot...mated-menu.html Code for it is he http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/ On top of that, on hovering each link in this dropdown I thought to use a jQuery tooltip, that describes the service in brief, and once clicked more details would emerge of the service .. So if you fall back to my sketch, when a link in M1 is clicked, I'd want the details + a form to open in M2, as sketched. Th problem I'm having is two-fold: 1. I dont have enough JQuery experience to mesh the tool-tip with the propsed drop-down 2. I'm not onventive enough to figure out how to make M1 result in M2 (the sketch yet again! lol) Please please help me figure out a better way, or a good way to do this! Similar TutorialsI have implemented a CSS dropdown menu and in FF3.05 on my PC if there are links in the top part of the content area Im unable to click on them. This is not a problem in IE for once it is just strange behaviour in FF. Check out the site and issue he http://dewinter.com.au/plans/index.php There are 3 links in the top of the content that Im unable to access, Contact and Single and Double plans.. Any ideas would be great. Hello, I've been teaching myself css code for the past four days, and I almost have my website exactly the way I want it to look except for one thing. I have a three column layout and my right column always jumps under everything when the browser is re-sized. It only seems to work how I want it to in Safari. I've tried a ton of different things, and nothing seems to work, but I am a real novice. If you could help, I'd really appreciate it. Here is my css code: body { background-image: ( address blocked: See forum rules); margin: 0px; padding-left: 8%; padding-right: 8%; padding-top: 10px; background-attachment: scroll; min-width: 1000px; } #header { background: #00ff00; background-image: (address blocked: See forum rules); width: 100%; height: 125px; background-repeat: no-repeat; margin-bottom: 5px; border-style: ridge; border-color: black; min-width: 1050px; } #leftcol { background-image: ( address blocked: See forum rules); float: left; width: 14%; height: 722px; border-style: ridge; border-color: black; min-width: 145px; } #rightcol { background-image: ( address blocked: See forum rules); width: 12.5%; height: 722px; border-style: ridge; border-color: black; min-width: 142px; overflow: hidden; position: inherit; } #content { background: #fff; float: left; width: 70%; height: 722px; border-style: ridge; border-color: black; margin-left: 5px; margin-right: 5px; margin-bottom: 5px; min-width: 735px; } #footer { background: #660066; clear: none; width: 1050px; height: auto; border-style: ridge; border-color: black; margin-top: 5px; position: absolute; } I am working on this website and it shows correctly in FF mac and win, Safari mac and win, opera, netscape...etc, but in IE 7 and IE 6 ...the main content column is displaced below. #left is floating left and #text is floating right widths are correct. I even extended the width of the containers that wrap those two divs. Nothing. Since it's a site with Joomla framework, I waded through the code trying to look for a table within the #text div that could've been causing this. I set all tables to 80%width for IE. Already figured it out. So thank you. Hey, Ive used Macromedia Dreamweaver to design the following site. But for some reason the CSS seems to only work in IE. When I view the page in firefox, the CSS doesnt seem to work properly. Ive never encounterd this before, and have run out of ideas. What do you think? Website Here Cheers, Smitch I'm looking to add some angled corners to my tabs and maybe a bevel. Currently, my tabs are pure css with no js. Any way to angle the corners with css? Or am I going to have to whip out my Photoshop and use some images? I've checked out alistapart.com and found his code to be too buggy. Any links to some other tutorials would be much appreciated. NOTE: This is a learning project and NOT a REAL COMPANY My Site Hi i have a content div inside a container div, the content in the content div stretches automatically but the container div doesnt stretch to accomodate the bigger content div....is it possible to get it to stretch the same as the content? the only solution ifound was to fix the height and set the overflow to auto so that i get a scroll bar but that looks rubbish ;o( cheers Andy Hi, I am new here, altough I have been comming here to search for solutions very often. I am a very great fan of CSS and have developed my own website (for my small bussiness) in pure CSS and XHTML. Now, when I started developing my website I created a layout. I have stuck with the same layout ever since. This was my idea, altough the layout is used in different ways by other websites. However something I did a lot was to browse other pure CSS websites. When there was something I liked I tried to recreate it (I never copied what other people did, always re-created myself). The problem is that I started my website with the following colour scheme; Black, White and Red. After browsing some website I must admit that I did copy coloures from other websites. Again it is only the coloures I copied! All the implementation (CSS, Xhtml, JavaScript is my own) and when there was an image I liked (for example for the borders) I recreated it on my PC. Now I am asking this question here because you people do CSS websites all the time. I know that some of you have been in this bussiness for some quite time and thus have the best advice on what should I do. Whether to leave my website as it is or else change it (note that I still did not launch my website). My question is related with Ethics as much as with legaility of what I did. I am giving some extra detail of what I mean by copy the colour scheme and recreating images. Copy Colour Scheme: Here I used a colour picker tool. I did not copy my colour scheme from just one website, but from various and used them within my layout (My layout is totaly different from the websites of which I copied the colours from). Recreating images: This has been done for the borders and shading. Again I have taken ideas from different websites. What I did is see how they did it and then recreate it. Sometimes I altered the images to better fit my requirments. However I have some images which I recreated nearly pixle by pixle the same altough I am not using the same image that the websites are using (I have recreated a small part of it). Now I checked the websites and there does not seem to be any copyright to protect images or colour scheme. Also I am not planning to insert my website for any competition. I must admit i like the design I have but not really intrested in any awards. I am new to web development and the only reason I am creating the website is because I wanted a web presence. Again, I have created all the CSS and HTML by myself using also some on-line tutorials. The only thing I see as a problem is the colour scheme and some images. dd Hi guys, I am building a feature block that has a semi-transparent blue strip at the top with white text inside. I'm using all the various opacity filters (filter:alpha(opacity=70);-moz-opacity:0.7;opacity: 0.7;-khtml-opacity: 0.7 to set the blue strip to opacity of 70% (0.7) and positioning the text over the top of the blue strip so that it doesn't inherit the opacity. This works fab for everything....except the most recent version of Safari (1.2) which excepts the css3 opacity declaration. For some reason, the moment I set the text div (.vertical) to have a position value of absolute..or relative, it inherits the opacity value for the div above it, even though it is not a child. Here's the code: Code: <!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" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
a {
color: #fff;
}
.transparentHead {
width: 210px;
height: 102px;
background: black;
}
.transparent {
background: #4E85C5;
height: 34px;
opacity: .7;
}
.vertical {
color: #fff;
font: 12px verdana, helvetica, sans-serif;
position: relative;
top: -34px;
}
</style>
</head>
<body>
<div class="transparentHead">
<div class="transparent"></div>
<div class="vertical">
<a href=""><b>Transparent</b> Header</a>
</div>
</div>
</body>
</html>
Anybody know of a way around this? Cheers I need some people to bounce ideas off of. I am having a real hard time coming up with a layout that is accessible and fits my layout. The form is very simple with two radio buttons and a text field. What I want is for the two radio buttons to display as a block but fit in a tight spot and the text field to float to the right and center if the two radio buttons. Here is a quick photochop of what I am going for. gary.webb.waptug.org/projects/epls/ Here is a link to the code I am building. gary.webb.waptug.org/projects/epls/images/search.gif Notice in the image that I have modified the banner a bit to fit the search form into the bottom dark blue bar. Thanks in advance. I'm working on a video blog right now and I REALLY like the way this is set up. See Gary Vaynerchuk WineLibrary(dot)TV videos On Gary's videos there are always the Share Links above the video. These aren't part of the player but somehow built into the post template I imagine. I also imagine aside from the css/html aspect this task of creating the links is being automated but I could be wrong. Anyone have any ideas on how I could accomplish something similar? Thanks Fixed. |
|||||||