CSS Question
- Started
- Last post
- 29 Responses
- jiaf0
http://code.google.com/p/malo/
you could maybe use this.
- pablito0
Dont give up !!!
- pablito0
if u want the smaller box to stay inside the bigger one u should add position:relative to the main div.
now, i suggest using floats and margins instead. much easier to control position this way.
- epikore0
What's the best way to layout pages? Using floats and margins or something else? I'm new to CSS, and i'm trying to find the best way to lay pages out instead of tables.
BTW, I made this as a reference for anyone else new to CSS. Feel free to add stuff on:
EMBEDDING INTERNAL STYLE SHEET
<head>
<style type="text/css">
place code here
</style>EXTERNAL STYLE SHEET
<link rel="stylesheet" type="text/css" href="base.css"/>APPLYING STYLES LOCALLY
<p style="border:4px solid red">
</p>TARGETING BY CLASS
#classname {}
<p class = "classname">
</p>TARGETTING BY IDENTITY
#idname{}
<p id = "idname">
</p>TARGETING BY ELEMENT
p {}
h1 {
}
BACKGROUND
background-color: #000000;
background-image: url (tile.gif);
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-position: bottom left;
background-position: right; (left, center)
background-position: 20% 50%; (0%=left, 50%=center, 100%=right)(0%=top, 50%=center, 100%=bottom)
background-image: url (tile.gif) top left repeat scroll;
background-image: url (tile.gif) repeat-x center fixed;0 MARGINS
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}LINKS
a:link {
color: #000000;
}a:visited {
color: #000000;
}a:hover {
color: #990000;
}a:active {
color: #000000;
}SETTING ABSOLUTE SIZE
width: 300px;
height: 300px;SETTING RELATIVE SIZE
width: 85%;
height: 85%;FONTS
font-family: "Arial" sans-serif;
font-family: "Times New Roman" serif;
font-family: "Courirer" monospace;
font-size: 11px;
font-weight: bold;
font-style: italic;
text-align: left; (center, right, justify)
vertical-align: baseline; (sub, super, 30px, -200%, top, middle, bottom, text-top, text-bottom)
p { text-indent: 2em;}
letter-spacing: 0.5em;
word-spacing: 1.5em;
text-decoration: none; (underline, line-through, overline underline blink)
text-transform: lowercase; (uppercase, capitalize)BLOCK CONTENT BOX
padding: 10px;
border: solid fuchsia 10px;
margin: 40px;
border-style: solid; (outset, double)
border-top-style: dotted;
border-top-width: 10px;
border-bottom-style: dashed;
border-bottom-color: green;
border-left-width: 20px;
border-right: 30px solid orange;
border-color: red green blue yellow;
border-width: 20px 10px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 30px;
margin: 0px 20px 10px 30px;POSITIONING BOXES ABSOLUTELY
position: absolute;
top: 0px; right: 0px;position: absolute:
bottom: 0px; left: 0px;Z-SORTING
z-index: 4;POSITIONING BOXES RELATIVELY
position: relative;
left: -4px; top: -5px;FIXING CONSTANT POSITIONS
position: fixed;
top: 0;
left: 20px;FLOATING CONTENT BOXES
float: right;
float: left;
clear: right;
clear: left;
clear: both;CLIPPING AND HANDLING OVERFLOW
overflow: visible;
overflow: hidden;
overflow: scroll;REACTING TO INTERFACE EVENTS
#idname {background-color: blue;}
#idname:hover {background-color: green;}
#idname:active {background-color: purple;}REVEALING AND HIDING COMPONENTS
#idname {visibility: hidden;}
#idname:hover {visibility: visible;}FORMS
input
{
color: #781351;
background: #C9F;
border: 1px solid #9C6;
}input:hover
{
background: #000;
}.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}<form action="#">
<p>
<label for="name">Name</label>
<input type="text" id="name" />
</p><p class="submit">
<input type="submit" value="Submit" />
</p>
</form>
- D_Dot0
Here's another layout that doesn't have as much "constipated" code:
- D_Dot0
Actually this one may work better for your needs. It doesn't use a faux background
- epikore0
Awesome, I got it now. The code I was looking for was:
float: right;or
float: left;
..and adjust the margins. Thanks!
- studderine0
awesome webhosting angelfire geocities lycos banners
- Indeed. That shit just gave me eye cancer, damn pricks...doctor
- doctor0
Sounds like it's not only your CSS you have issues with. A good place to start, is to make sure that you use well formed and valid mark-up.
Run your site through: http://validator.w3.org/ and fix *all* errors it outputs - this is key.