PDA

View Full Version : divs



vjelmy
Jan 22nd, 2011, 01:51 AM
this is kindof a tough question....

about eight years ago -- maybe it's not the same anymore? -- when designing a site in one section you could name, change the properties of (size, position, color etc) of a set of divs, and in another section actually edit the content of each div

I have completely forgotten how to do this. if anyone can help me out, it would be much appreciated




something like


.div1(
background color: 000000;
left: 100px
top: 80px
width: 20 px.
height: 80 px.)

.div2(
background color: 00000;
left: 100px
top: 180px
width: 20 px.
height: 80 px.)

<div1>
text text text text
</div1>

<div2>
text text text
</div2>

I realize it is not completely written like this, but yeah, i'm basically looking for this code, or trying to remember how to do it. I've checked out a couple sites and none of them seem to explain this....

prease hulp

djh101
Jan 22nd, 2011, 02:11 AM
Yeah, it's called CSS. In your stylesheet (myStyleSheet.css) you can change the properties of all your classes, ids, and standard attributes. You can then link your HTML documents to that sheet and give your elements class names which will contain those properties.

CSS:

.div1{
background-color: #000000;
width: 20px;
height: 80px;
}

HTML:


<html>
<head><link rel="stylesheet" type="text/css" href="styles.css" /></head>
<body>
<div class="div1">
Div Content.
</div>
</html>

So, your div will have all the properties of the div1 class- a width of 2p, a height of 80, and a black background.

vjelmy
Jan 22nd, 2011, 03:53 AM
**** yeah
love you

vjelmy
Jan 22nd, 2011, 03:54 AM
o yeah dont i need some kind of thing first

<style type="text/css">



or something?
(before the .div1)


also, its not just the size of the div i want to control, it's the placement too
I remember some kind of code you could implement in the .div1 part to where you could make the div start x number of pixels from the top, and x number of pixels from the left





.div1{
background-color: #000000;
width: 20px;
height: 80px;
top: 80 px;
left: 80px;
}







margin-left: 80px; margin-top: 80px; ????





and do i put the css and html all into the style sheet?




http://www.sitepoint.com/forums/showthread.php?t=594283

djh101
Jan 22nd, 2011, 05:00 AM
Maybe you should read up on a CSS tutorial again. The <style> tag is only needed if you want your CSS to be contained in your HTML page. A .css page can be made and linked to all your HTML pages to make things a lot easier. And yes, you can do top, left, bottom, and right to determine your element's position if it is in a non-fixed position (relative, absolute, or fixed). Otherwise, margin will work (margin-left, margin-top, etc. or the shorthand margin). Positioning is more appropriate for positioning (kind of obviously)- margins should be used only for determining margins.

.div1{
position: relative;
top: 50px;
left: 100px;
}
.div2{
/*shorthand top, right, bottom, left*/
margin: 50px 0px 0px 50px;
}

I have a nice little HTML/CSS editor on my site (here (http://stupidgamestuff.com/stuff/HTML_Executor/)). If you want to try it out, it might prove to be useful (and I like getting page views:)).

vjelmy
Jan 27th, 2011, 09:34 AM
so i have some code done, but i dont understand how to display it. It shows correctly on your site when i enter in the html into one part and the css in another, but when i upload it to my site using filezilla, it just displays straight code and not what i did.

how do i properly implement this code onto my website?