|
CSS - Taking Ideas From Other Websites...
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 Similar TutorialsCan anyone please tell me what websites out there use CSS, basically i need to know because this will give me some general idea and so it will help me with my website, i am new to CSS and looking at others will give me some sort of a rough guide on how to imply CSS and to know the understandings of what CSS can do thanks for your help. I apologize in advance if this question has already been covered in the past. I couldn't find any good threads on the subject. I'm just wondering what Content Management Systems you use or recommend to your clients. I design my sites using css external files and I don't use tables for layout. Apparently, this causes problems with some CMS software (like Adobe Contribute). Basically, I'm looking for a CMS that is easy to use, able to render CSS, and is not terribly expensive. Thanks to anyone who can help. Hi, This is such a simple thing and it's causing so much grief. For an assignment in our class we are creating a calendar with tables with CSS, and one element in the table (the heading) and certain table data cells themselves must have the same class tag, but they have to do different things to their respective cells. In the heading cells i want a white background and in the other regular cells it must use a jpeg. The regular cells with the jpeg are working fine, but i can't get the buggers up top to go white. Here is my code: Code:
td.prev {background-image: url(back.jpg)}
td.next {background-image: url(back.jpg)}
th.prev {background-color: white}
th.prev{background-color: white}
Any ideas? thanks in advance. I have read the other topics on the height and I have worked out a compromise in IE where I can set the height of my Divs in pixels, as I want the columns to align up at the bottom. However I would prefer it if the height was relative to the browser resolution which is what I have in Firefox by using % instead of pixels. Is there a way I could make IE use % at all? Here's the CSS concerned. Code:
#centercontent {
position: absolute;
background:#fff;
width: 78.3%;
height:auto;
min-height: 80%; /* works in FF, not IE */
margin-left: 19%;
font-family: Verdana, helvetica, Arial, Tahoma, sans-serif;
padding: 6px;
}
/* for Internet Explorer */
* html, #centercontent {
height: 600px;
}
Do ids take up space on a page if there is no content within them and no size specified for them, what about classes, paragraphs? Something like so: Code: <div id="one"></div> or <div class="two></div> <p></p> <p class ="three"></p> etc... In other words, would there be a obvious space where one of these styling markers was placed on the page? The third row as it is behaves as it should, spanning 3 columns. When I change the display style to none, the final row dissapears, which again is fine. However, when I click on the Show Description button, the textarea appears, but the first cell in the first row expands to the same width as the textarea two rows below, overwriting the colspan of the bottom row. Can anyone explain why its behaving this way? How can I fix this? Code: <table border="1" style="width:100%;"> <tr> <td width="400" align="left"></td> <td width="200" align="left"><span class="red"></span></td> <td width="312" align="left"><span class="red"></span> </td> </tr> <tr> <td align="center" valign="middle" colspan="3"> <input type="button" id="ShowDescription" value="Show Description" onclick="Desc(this);"> </td> </tr> <tr> <td id="desc1" align="center" colspan="3" style="display: block;"> <textarea cols="100" rows="15"></textarea> </td> </tr> </table> Code: <script type="text/javascript">
var state = true;
function Desc(obj)
{
if(state)
{
obj.value = 'Close Description'; document.getElementById("desc1").style.display = "block"; } else{ obj.value = 'Open Description'; document.getElementById("desc1").style.display = "none"; } state = !state; } </script>
Hi please visit this page As you can see the sample text is pushed towards the bottom of the page despite there is a lot of space available on the right side of the page. here is the css I am using for the div Code: .right_sidez { float: right; width: 430px; margin: 0 5px 0 0; text-align: justify; }
according to the page dimensions it should go up to 550 px width but it works fine till 420px and after that the text is pushed towards the bottom of the page. what can I do to push the text to use all the space available on the right side ? thanks I have a style sheet, now I am modifying some buttons on some of my pages. So I added the following to my style sheet: INPUT.NEW { background-color: EDEDED; border-color: EDEDED; color: 024467; font-family: arial, verdana, ms sans serif; font-size: 7pt; } And used the following line to call it in the button: <input class="INPUT.NEW" type="button" value="Back" onclick="document.location.href='whatever.jsp?theFlag=1'"> Which doesn't work, but if I rename "INPUT.NEW" to just "INPUT" on both pages it works. But I can't have it called INPUT because one already exists on the page. This is a style sheet that I did not write, someone else did, so I'm trying to make this change. Any help would be appreciated. I 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. the design for a web page i am coding calls for a floater with rounded corners and drop shadows. this is easily done by making the entire background a PNG with the corners, borders, and shadow applied (thankfully the window is a fixed size) now, ive been having no problems in the past using the following code in my javascript pop ups. however, this time i'm replacing the entire background with this and it's making everything inside of the container that has this unclickable. i realize there are workarounds to this including making everything 'inside' this window absolute above it, to only making the drop shadows transparent PNGs, but i'm hoping for a much simpler answer. does anyone know about this issue? Code: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='blah.png', sizingMethod='crop'); hi.. i need to change the height of drop down box, if i change that using style means getting in firefox but not in IE.. IE taking some default height... need to avoid tht.. help me out guys.. its very urgent... pls... This is basically what my html looks like: Code: <tr class=bullish><td>BLAH</td><td>blah</td><td>Blah</td></tr> Here's the relevant section of my external style sheet: Code:
tr.bullish { background-color: #CCFFCC; font-weight: bold;}
tr.bearish { background-color: #FFCCCC; }
tr.neutral { background-color: #FFFFFF; }
here is a screenshot showing the rendered webpage plus the source plus the CSS source. The background colors are for the table rows with up to 5 checkboxes. The screenshot shows them to be white, rather than the light red / light green that I'm going for. Screenshot Please refer to the following web site: h*t*t*p://alturl.com/iio4 As you can see in the above mentioned web site, there is a "|" menu link divider which displays between the links (About, Events, Teams, Shop). I don't want it to however appear at the end of the last link (shop). I have tried several things but can't seem to get the CSS to remove it just after the last link. Any help with this would be greatly appreciated. Following is both HTML and CSS code: Code: <div id="navigation"> <a href="/about" class="navigation-about">About</a> <a href="/events" class="navigation-events">Events</a> <a href="/teams" class="navigation-teams">Dance Teams</a> <a href="/shop" class="navigation-shop">Shop</a> </div> Code:
/***** Navigation *****/
#navigation {
background:url(../_images/menu_bg.png) repeat-x;
height:68px;
width:100%;
padding:10px 0 10px 0;
margin:0 0 20px 0;
}
/*#navigation a { color:#666; padding: 0 10px 0 10px; text-decoration:none; }*/
.navigation-about, .navigation-events, .navigation-teams, .navigation-shop {
float: left;
display: block;
padding: 0 0 0 12px;
font-size: 105%;
}
#navigation-logo {
display:block;
float:left;
margin:3px 0 0 10px;
padding-right:25px;
}
#navigation a, #navigation a:visited {
display:block;
text-decoration:none;
color:#666;
padding:0 10px 0 10px;
background-image:url(../_images/nav_divider.png);
background-repeat:no-repeat;
background-position:right;
font-weight:bold;
}
Thank you once again! If possible.. pleaseeeee provide a working CSS so I do not misunderstand you. 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 had my css working fine and then I decided to change the layout and I almost have the new style sheet finished. However, I am trying to divide my header field into 2 columns (each 50% of the width), the left most column will have my banner and the right most column will be split in half (each half being 50% of total height), with 2 rows, one for a search field and the other for my main site navigation. However, the 2 rows are not taking up the 50% of the height that I would like for them to take up. Any ideas as to why? I tried defining min and max height, but that didn't work... Here's my css: Code:
/* CSS Document */
h1 {
font-family: Geneva, Arial, sans-serif;
font-size: 20px;
color:#000000;
}
h2{
font-family: Geneva, Arial, sans-serif;
font-size: 16px;
color:#000000;
}
h4{
font-family: Geneva, Arial, sans-serif;
font-size: 12px;
color:#000000;
}
/*============================ Begin Layout Structure ============================*/
#wrapper { /* main container for everything */
width: 1024px;
min-height: 748px;
margin: 0 auto;
background: #ffffff;
overflow: hidden; /* contain inner floats */
position: relative; /* establish the containing block */
}
#accounttypeselector { /* select personal or business to affect page display */
height: 25px;
background: #0000FF;
}
#servicesbar { /* container for user services */
height: 30px; /* 30px should be adequate height */
width: 100%;
}
#servicesbar-services { /* container for user services once logged in */
float: left; /* push this to left side */
width: 75%; /* want it to be 75% of the servicesbar width */
height: 100%; /* since servicesbar container height is 30px should be 100% of this */
background: #ff00ff;
}
#servicesbar-login { /* for user login and logout - contained inside servicesbar */
float: left; /* should push this just beside services */
width: 25%;
height: 100%; /* since servicesbar container height is 30px should be 100% of this */
background: #8B2323;
}
#header { /*header for the site - will contain logo, search, and main navigation */
float: left;
width: 1024px;
height: 100px;
}
#header-logo { /* will include site banner/logo - will be located on left side */
background: #ff0000;
width: 50%;
float: left;
}
#header-rightcol { /* column for search and main nav */
width: 50%;
float: left;
}
#header-rightcol-search {
min-height: 50%;
max-height: 50%;
background: #7FFFD4;
}
#header-rightcol-navmain { /* navbar that will be located below header */
min-height: 50%;
max-height:-50%;
background: #21ee00;
}
#bodywrapper { /* wrapper for main content - will have 3 columns here */
width: 1024px;
height: 100%;
padding-top: 10;
}
#bodywrapper-navleft { /* sub nav to be lcoated in left column of bodywrapper */
width: 15%;
background: #8B8378;
float: left;
}
#bodywrapper-main { /* main content to be located in middle column of bodywrapper */
width: 60%;
background: #66CDAA;
float: left;
}
#bodywrapper-news { /* news column to be located in right column of bodywrapper */
width: 25%;
background: #8A2BE2;
float: left;
}
#footer { /* footer to be located at bottom of wrapper */
margin: 0 auto;
position: relative;
width: 1014px; /* will be 1024 with padding */
height: 20px;
padding-right: 10px;
}
and here's my basic html Code: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test2.css" /> </head> <body> <div id= "wrapper" > <div id= "accounttypeselector" > Lorem ipsum dolor sit amet </div> <div id= "servicesbar" > <div id= "servicesbar-services" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> <div id= "servicesbar-login" > Lorem ipsum dolor sit amet</div> </div> <div id= "header" > <div id= "header-logo" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem.</div> <div id= "header-rightcol" > <div id= "header-rightcol-search" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> <div id= "header-rightcol-navmain" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> </div> </div> <div id= "bodywrapper" > <div id= "bodywrapper-navleft" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> <div id= "bodywrapper-main" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> <div id= "bodywrapper-news" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque in dui. In eget elit. Praesent eu lorem. </div> </div> </div> <div id= "footer" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> </body> </html> Thanks in advance and any suggestions would be greatly appreciated. Hi everyone. I sure hope someone is nice enough to help me figure this out... these two problems has plagued me for a long time and I simply need to ask for help. I'm new to CSS, so you'll probably see all kinds of problems other than the one I'm writing about (and if you do, please do tell me... I'm open to any suggestions on how to tweak this). My site is http://www.kettlebell.com. But specifically, let me direct you to http://www.kettlebell.com/fitness91...the-rescue.html as it is a good example of the problems. I have several DIV tags separating the content, displaying google adsense, etc. I have a liquid 3 column layout. Some of my frustration may become more apparent as you resize the browser window. Chunks of my page get covered over with white space, which appears to be related to these div tags. So what ends up happening is that, depending on the size of the window, more or less of the content (including pictures) get chopped off... so I may have whole paragraphs missing or I may see only a strip of a photograph. For example, when the browser is fully expanded, since the text spreads over more area, it looks like the white areas get even larger. This problem reduces the smaller the window is, because the text wraps sooner, resulting in less competition for space. To make things even weirder, this problem isn't consistent in FireFox. On my PC here at home, the page looks fine. But at work, in FireFox, I have this problem. (I don't know what version I have at work because I can't check right now, but mine at home is 1.5.0.7) As may be of no surprise to anyone, I have this version in IE regardless of where I am! Also, is there a way to make it so that, when a page gets a certain width (on the smaller side), that it'll stop the columns from moving, so I can have a fixed minimum width for each column and the overall page? Because if I don't, then the layers end up covering each other when I make the page too small. I'd rather that, when I make it too small, the page stops getting smaller and just forces me to scroll to see the whole thing. Any assistance would sure be appreciated. I'm so frustrated with this. Also, if anyone has any suggestions on how I can improve the page or my use of CSS or any other tips, I'd be eager to hear them. Just please keep in mind that I am a newb. Here is my CSS... http://www.kettlebell.com/css.css (by the way, has anyone ever had their monitor start "pinging"? right now, it is intermittingly making a pinging noise and flashes a line across the monitor in different areas. Weird.) Layout Page I know. It's not too great yet. But I've just started and it's still in the baby stages. whenever I add a width or height paramater to "navBar" the background image NEVER shows up, even with content! Why is that? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Coast Guard</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
body {
background: url(Images/bgClouds2.jpg);
height: 100%;
}
html {
height: 100%;
}
.navigationBar {
width: 150px;
height: 1000px;
background-image: url(Images/navBarImage.png);
background-repeat: repeat-y;
border-style: dotted;
overflow: none;
}
#section {
padding-left: 57px;
overflow: none;
font-size: 15px;
text-align: left;
}
#top {
width: 901px;
height: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 0px;
background-color: white;
border-style: groove;
border-color: darkblue;
}
#navBar {
background-image: url(Images/navBG.jpg)
height: 73px;
border-style: dotted;
}
</style>
<script type="text/javascript">
<!--
// -->
</script>
</head>
<body>
<div id="top">
<center>
<img src="Images/CircleBanner.png" style= "border-style: none;" align="center">
</center>
<div id="navBar">
alex wait
</div>
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 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 |
|||||||