ClioSport.net

Register a free account today to become a member!
Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

  • When you purchase through links on our site, we may earn an affiliate commission. Read more here.

Trying to get my head around CSS!! AAARRRRGH!!



  172, Tiguan
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

Once you get used to them there fine. :D

Quite like them actually.
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

what makes it worse is that i dont really know much HTML, script etc..
 
  172, Tiguan
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

What exactly are you trying to do?
 
  Turbos.
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

The problem with CSS is that there are cross browser issues that are frustrating.

To be honest it i don't utilise it personally for anything other than text still, which is bad, but i can't quite get my head around it.

I am a designer, not a coder, i can't type a load of code and 'imagine' what it is going to look like. Kudos to those who do it, but i need to go on a course or something!

I hate the whole CSS bandwagen though, with CSS Zen Garden and all that b****cks where everyone does the same thing.
 
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

There really aren't that many cross browser issues. It's mainly issues with IE. I'm a coder and not designer, so it is pretty easy to get my head around it. I use CSS for styling, which for me includes layout, images, colours, etc and the (x)html is a really basic layout which I try to make readable if someone goes on the site with a screenreader or whatever
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

cliobuyer said:
I am a designer, not a coder, i can't type a load of code and 'imagine' what it is going to look like. Kudos to those who do it, but i need to go on a course or something!

same here, im know im not exactly an experienced deisgner yet, only graduating last year and only had a few months proffessional work. trying to make a website for the company i work for, and its just complicating things for me where i dont really know code. all i wanted was rounded edges on a table!

confusing too where i highlight a paragraph of text to make bold. but it makes the um highighted text bold too. just things like that and really slowing me down.

Thanks for the link Pootle.

may put a post up on monday when i get stuck, hopefully someone could help me..
 
  Abarth 500
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

cliobuyer said:
I am a designer, not a coder, i can't type a load of code and 'imagine' what it is going to look like. Kudos to those who do it, but i need to go on a course or something!

imagine? why u imagining, CSS work straight away, you dont need a development server like for asp, i dont understand?, css is the way forwards, u wont get a decent job without knowing it now, flash and other crap is dead, everyone needs to be DDA complient now......the basics are easy one u know how :)
 
  Abarth 500
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

furry_cup said:
confusing too where i highlight a paragraph of text to make bold. but it makes the um highighted text bold too. just things like that and really slowing me down.

dont highlight the text to make bold...go into the code put <strong>bold text here</strong> around the text, or if its in <p> tags define the <p> tags in the css p {font weight:bold} or summat.

if u change text styles in the visual then dreamweaver puts its own styles and classes in and its b**ch then coz the code coz messy
 
  "Nissan" Sunny 1.6 16v
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

Dreamweaver - designer + coder without the hardness of coding!
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

cheers welsh, i'll give it ago.

how new is CSS? when did it come out?
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

CSS is great. Its main reason for existance is to simply split all of the code from the design. That way your webpages are a lot cleaner, with less code, as well as being optimised for search engines and also to increase page loading times.

You can pretty much do anything with CSS, XHTML and photoshop in terms of design.

I've not been doing it that long really but I picked it up quite quickly, and im confident enough to do pretty much anything nowdays.

If you need any specific help, im sure you will get help on here, just post the code and the problem.
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

btw, I use dreamweaver to write the html and css, that way you can see what your pages look like whilst building them. You can also preview in various browsers too. I basically make a few small changes, see what they look like in 3 browsers, then continue.

Cross browser support is the worst problem, especially IE and Opera. FireFox rules!!
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

cheers guys, really helped alot. ive started reading up on html a bit mre now, i used to only make pages in the design window not code.

To use CSS u really need to know HTML
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

Yeh I wouldnt bother using WYSIWYG for designing payes. All you need are the div id's and classes, and the divs in teh right place, and the CSS does the rest. Obviously you have to know CSS though :)
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

i want to wrap some text around an image.. how? lol it will only go under it.


image top left of the paragraph and text on the right of it and underneath it,
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

Cheers matey, i'll see if i can get my head around it.


this is really doing my nut, all i wanna do is apply a 2px padding to the left hand side of one cell on my table, not the whole document!!
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

are you using the table for the layout of the page?

I would seriously advise against it, as they cause more problems than they are worth. You want to be using tables for tabular data only, stick with DIVS and CSS for layout structure. Also means cleaner code.

Whats the actual prob mate? ill see if I can help you out

if your wanting to add padding to a single cell, then you need to assign that particular cell only a unique ID or a class if you might want to add the same padding to other cells at a later date.

For the sepcific id for that cell you then add the properties.

Code:
#mycell1 {
padding: 0 0 0 2px;
}
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

Yeah i was going to use tables.

I managed to solve my above question about padding the cells. I created a new CSS rule and changed the settings to pad the cells and set b/g colours etc..

to be honest i havent really made detailed websites before, only my personal site which is www.marksimons.co.uk which was made using tables only.

I use tables so i can split the page up etc.. i have no idea how to use CSS lol.

I found a nice template in Dreamweaver, but dont understand how to divide the page up, what do you do to actually make a structure, text box/cell to put text in.. lol its hard to explain.

Right, In a table its easy to set the width of the cells and put the content where required, but with CSS how do you construct a layout?

I hope i havent confused you more instead of clarifying it.
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

for example, id like my site to be center aligned about 800px wide, flash banner at at the top, links down the left hand side and text/image content down the center.
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

right bud. in your html you want the following code for the basic layout structure (tableless design) note that the wrapper starts and ends before and after any other bits which are sat inside of it:

Code:
<div id="wrapper">
<div id="header"></div><!--header-->
<div id="content"></div><!--content-->
<div id="footer"></div><!--footer-->
</div><!--wrapper-->
The wrapper is the outline of your whole page. then your header up top, content in the middle, then footer at the bottom. If you want further structure within the 'content' area then you add further DIV's inside of the <div id="content"></div><!--content-->

Then in your CSS you have the following. The body property 'text-align:center;' tell the 'wrapper' to be central in the page as long as the left and right margins are set to 'auto':

Code:
body {
    margin: 0 auto 0 auto;
    padding: 0px;
    background-color:#999999;
    background-position: top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7em;
    text-align: center;
    }

Then for your 'wrapper' DIV you set the width, padding etc:

Code:
#wrapper {
    width: 680px;
    text-align: center;
    margin: 0px auto 0px auto;
    padding: 0 0 15px 0;
    position: relative;
    }
Then set your CSS for other sections such as header, content and footer. The html will alwyas display in the order is is typed, so obviously your header goes first, then content, then footer. make sure your DIVs are set to relative then they will always relate to one another. If you want a column down the left hand side of your 'content' area then the actual content in the right hand side then you need to add the following within the 'content' DIV:

Code:
<div id="content">
<div id="leftcolumn"</div><!--leftcolumn-->
<div id="rightcolumn"</div><!--rightcolumn-->
</div><!--content-->
then you specify the properties of each column. note the 'float' property.

Code:
#leftcolumn {
    width: 200px;
    text-align: left;
    margin: 20px;
    padding: 10px
        position: relative;
        float: left;
    }

#rightcolumn {
    width: 300px;
    text-align: left;
    margin: 20px;
    padding: 10px
        position: relative;
        float: right;
    }
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

Really appreciate this matey :)

after i pasted the following code in
<div id="wrapper">
<div id="header"></div><!--header-->
<div id="content"></div><!--content-->
<div id="footer"></div><!--footer-->
</div><!--wrapper-->,

it gave me 3 sections, header content and footer, i put some text in each one just to split it all up. which is correct im guessing. Is it possible to create 2Divs along side each other, like a coloumn so to speak?


secondly, where do i enter the below information?

Adams_16v said:
Then in your CSS you have the following. The body property 'text-align:center;' tell the 'wrapper' to be central in the page as long as the left and right margins are set to 'auto':

Code:
body {
    margin: 0 auto 0 auto;
    padding: 0px;
    background-color:#999999;
    background-position: top;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7em;
    text-align: center;
    }
 
  172, Tiguan
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

You can put 2 divs next to each other, just "float" the first div to the right: float:right;

Just make sure your two divs that are side by side don't total in width more than the content/wrapper div does otherwise you are screwed.

Dreamweaver is still a usefull program despite what the hardcore coding geeks say, just don't rely on it to write you code! I use it more as a reference to see what things look like now. I used to rely on it 100%
 
  172, Tiguan
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

furry_cup said:
secondly, where do i enter the below information?

That needs to go at the top of your css file mate.
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

right so do i have to create a CSS rule for each div? then i can format / apply settings for each one?
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

right think im getting the hang of this a bit more now.

And read through what Adam has written for me and try it again.

cheers guys!
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

yep thats right mate,

You add ID's to div's within the html if they are unique, such as the wrapper, header, footer etc. and in the css you start them with # e.g #header

if you want various things with the same properties in the css you give them class, such as the name: .box for example (replace the hash with a fulkl stop), then you can add loads of things that all relate to those class properties in the css. You can also have classes AND ID's per item if required. it just reduced the code more than anything.

as for 2 DIVS side by side, see in my code above about puting 2 DIV's next to each other. i named one left and one right. As jon says just ensure the floats are set correctly and they should behave.

also at the top of your css file you need to specify various things such as body, html, p, h1, etc, etc which are all the general properties of the web page. then you can start adding ID's and classes. undernath.

its really worth learning how to do it the proper way tho mate, especially if your just learning now. its too easy to get stuck with table designs, but they really are more trouble than they are worth. :) you'll pick it up in no time, i leant it all myself just by practicing like.

the site that got me going in the right direction was www.csszengarden.com

i basically looked at other peples designs and CSS and sussed out how they did their layout. then had a go at it myself and just got better from then on.
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

Thanks mate, just off on my lunch break, gonna give it ago again after, i learnt everything i know by teaching myself, (nothing about CSS, mainly frames, Tables etc..) if tables are meant to be harder/more work then i should pick up CSS better, just gotta understand them fully i think.

so with the header, content and footer div's i just select the div from the tag in the bottom left of the screen (using dreamweaver) then create a new CSS rule and apply it to that div?

when you say open the CSS file.. where is that? lol
 
  20VT Clio & 9-5 HOT
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

ahhh course your using dreamweaver.

Well what I do is type the CSS out myself. I dont use dreamweaver to do it.

Create a new HTML document, enter your structure DIV's.

Then click file>new and create a new CSS file. once you have the CSS in there for the DIV's (as well as the body etc) you can save it. Usually in a folder called 'css within your website file structure.

You then go back to your html page, and on the right hand side at the top, expand the 'css' properties menu. right click anywhere in there and choose 'attatch style sheet' then browse to your saved CSS document and see the page transform using the CSS you typed earlier.

Alternatively you can add the following code to the top of your html in the hearder section then refresh:

Code:
<link href="css/portfolio.css" rel="stylesheet" type="text/css" />
css/portfolio.css being the name and location of ya css file

if u want to see one of my css docs and html to match ill happily send you the links mate!
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

thanks mate,i'll give it a ago, i have been right clicking i the CSS menu and creating a new style then assigning it to the div, but that doesnt always seem to work.

if you could send me the links mate that would be great, on here, pm, or email mark.simons@yahoo.co.uk

cheers
 
  306 TD Slut
Re: trying to get my head around CSS!! AAARRRRGH!!!!!

thanks adam, your site is pretty impressive, i think i may have seen it on here before if u've posted it.

zen garden looks like its going to be a real help too. im gonna give it a go now.

one more thing tho, in DW there is no file>new and create a new CSS file option. there is file> new> CSS style sheets then there are a list of pre made ones.
 


Top