CSS - Any Ideas How This Could Be Done / Share Links On Every Post..

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 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

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

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

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!

Fixed.

Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them.


HTML
Code:

div id="bar-links">
<center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td>
</tr>
<tr>
<td background="images/barlist_02.gif" width="20"></td>
<td background="images/barlist_03.gif" width="456">&nbsp;</p>
<div id="bar-links">
<h4><a href="#" title="Riley's Pub">Riley's Pub</a>&nbsp;
<a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> &nbsp;
<a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> &nbsp;
<a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> &nbsp;
 </h4>
 </div>
</td>
<td background="images/barlist_04.gif" width="24"></td>
</tr>
<tr>
<td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td>
</tr>
</table>
</div>

CSS

Code:

#bar-links { 	text-indent:inherit; 	text-align:left; 	 }

The following page is my first foray into the world of css:

webpages.charter.net/slyraymond/SFL/sflindex.html

If anyone here is capable, please test with both FF/Mozilla and IE. You'll notice two problems immediately - namely, a problem with mouse-over colors and a partially buried div.

Can someone tell me in idiotspeak what exactly causes the discrepancy and how to fix? Css file follows:


body { font: 8pt/16pt arial;
color: #000000;
background: #ffffef;
margin: 10px; }

p {
font: 12pt arial;
margin-top: 0px;
text-align: justify; }

h2 { font: italic normal 14pt arial;
letter-spacing: 1px;
margin-bottom: 0px;
margin-top: 0px;
color: #93006b; }

h3 { font: normal 12pt arial;
letter-spacing: 1px;
margin-bottom: 5px;
margin-top: 0px;
color: #93006b; }
/* f9c08b */
tr { font: normal 10pt arial;
height: 12px; }

a:link {
font-weight: bold;
text-decoration: none;
color: #93006b; }
a:visited {
font-weight: bold;
text-decoration: none;
color: #db7311; }
a:hover, a:active {
color: #4f4e4d; }

#container {
background: #efefd2;
padding: 0px;
height: 900px;
margin-top: 78px; }

#main_menu {
position: relative;
top: -18;
left: 5;
z-index: 2;
background: #e3e45c;
padding: 3px;
width: 200px; }

#main_menu ul {
margin: 0;
padding: 0;
list-style-type: none; }

#main_menu li {
background: #ffffdd;
font: 10pt arial;
padding: 5px; }

#main_menu li a:hover {
background: #e3e45c;
display: block; }

#section {
position: relative;
border: 2px solid #e3e45c;
padding: 3px;
left: 250;
top: -168;
z-index: 5;
width: 600;
background: #ffffdd;
font: italic 14pt arial; }

#section_content {
position: relative;
padding: 25px;
left: 295px;
top: -179;
width: 60%;
background: #ffffef;
font: normal 10pt arial;
}

#ebay {
position: absolute;
padding: 10px;
left: 25px;
top: 300px;
width: 150px;
background: #ffffef;
font: normal 12pt arial;
text-align: center;
}

I would like to post on another forum with CSS.

Is there any way to do this?

I already have the content laid out with css in my html editor and just wanna transfer it to a forum as a forum post.

I suspect forums don't allow css so just wondering if there's a way around this.

Appreciate the help,

JH

Hey All:

This is my first post to this forum. Any and all assistance is greatly appreciated!

I am having an issue with some floating div's. I'm sure it's as easy as moving the div to a different parent but, I'm having trouble figuring this one out.

My site is pretty simple. Most of the div's are floating left. I have one div that is floating right. I want the right div to stretch or contract to the full height of the content. Most of my content fits into a 740px height. There are a few that are more (up to 1500px). So, I want to put 1500px worth of images in the right column but only show as much as needed to fit the content area (most of the time only 740px). Right now, the full height of the right div is showing.

I would post a link but, I'm new to the forum and it isn't allowed. If there is a way around this, I am happy to provide a link.

Thanks in advance for any responses!

Jeff

Hi

I am currently trying to self teach myself CSS, harder than I thought, lol. Anyway I have a page that uses CSS but there are certain areas that don't display correctly/I can't get to work. I'm hoping someone can help

Page:

jinx-inc.co.uk/development

Problem Areas are highlighted in this picture (to make things easier)

jinx-inc.co.uk/development/problems.jpg

1: This area should have the blue colour all the way down.

2: Pretty much same problem as 1 but this is a repeating background instead of a background colour.

3: There is a Footer but it's gone walk about. The only way I can get it to show is through absolute position as this css file will be used as the master for all pages, so absolute won't work.

4: Table border problem but not too fused about that at the moment.

Code available:

jinx-inc.co.uk/development/css.txt

jinx-inc.co.uk/development/html.txt





Many thanks

I know you pro CSS users probably know this already, but I was accidentally discovered something REALLY cool with css.

CSS Code:
Original - CSS Code alexText { background-color: rgb(116,130,208); }

  

  


  


 alexText {


 background-color: rgb(116,130,208);


 }


  


  

Code:

<alexText>
Some Alex Text
</alexText>

That code essentially creates your own HTML tags.
Wow.

That's going to save me SO much time.

Ok I just reached desesperation. Ive tried EVERYTHING, believe me. Ive even had some developer help me from england, which solved the problem and then didnt know how he fixed it cause he forgot...

I have JSCook menu and yes its the one perfect for my site, but the menu just wont come on top of the post area! It gets behind and ive tried with z-index and nothing

www dot servicanonline dot com -> Click Top called "Perros" to see my problem.

Please help me as Ive done everything I can and still cant solve this.

I am trying to set up my post using a wordpress template I found on alexking.org called Blue Radiant. All was going well until I decided to make a few test news posts and it started doing something funky.

http://www.unlimitedzelda.net

If you view the site in Internet Explorer, it's fine. However if you view it in FireFox, you can see that all but the most current news post gets pushed under the left nav bar. I can't figure why and I hope someone else will be able to help me out. Any input is greatly appreciated.