59 lines
1.0 KiB
Markdown
59 lines
1.0 KiB
Markdown
+++
|
|
title = "web"
|
|
draft = false
|
|
tags = [
|
|
"code",
|
|
"web"
|
|
]
|
|
date = "2013-03-12"
|
|
+++
|
|
# Website Styles
|
|
|
|
## Quick Links
|
|
|
|
* http://htmldog.com/
|
|
* http://www.alistapart.com/
|
|
|
|
|
|
### CSS Stuff
|
|
|
|
* :exclamation: http://lesscss.org/ - Less.js Will Obsolete CSS! `LESS` implementatie in Javascript
|
|
* http://www.andybudd.com/ CSS centered blog
|
|
|
|
#### Centering a div met margin auto
|
|
|
|
Zie http://www.andybudd.com/archives/2004/02/css_crib_sheet_3_centering_a_div/
|
|
|
|
```css
|
|
body {
|
|
text-align: center;
|
|
min-width: 600px;
|
|
}
|
|
|
|
#wrapper {
|
|
margin:0 auto;
|
|
width:600px;
|
|
text-align: left;
|
|
}
|
|
```
|
|
|
|
#### Spaties tussen een link en bovenstaande blocks
|
|
|
|
Gegeven structuur:
|
|
|
|
```html
|
|
<div clas="div">
|
|
<a href######"#" clas"link">bla</a>
|
|
</div>
|
|
```
|
|
|
|
Hoe kan ik de div vergroten zodat die de link bevat maar de link zelf `margin-top` bevat? zo:
|
|
|
|
```css
|
|
.div a .link {
|
|
display: block;
|
|
margin-top: 10px;
|
|
}
|
|
```
|
|
|
|
Zonder `display: block` wordt een link als `inline` gerenderd. Inline betekent alles naast elkaar. Zie http://www.quirksmode.org/css/display.html |