I am new to using transform-origin and I have been having difficulties getting it to work.
I am currently making a simple image carousel and for one image the aspect ratio is different than the other images making the origin/center point of the image not where I want it to display, as it only shows the top left of the image. I looked up a solution for this and I was told transform-origin would solve it. However I have been entering different values inside the 2nd image and the transform-origin property still isn't changing the center point of the image.
I was hoping someone could point me in the right direction.
The CSS code in question starts at the slider section.
/***********************/
/* CSS Reset */
/***********************/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
/***********************/
/* Color Palette */
/***********************/
/* Black */ /* #010101 */
/* #800020 */
/* #66001A */
/* #520015 */
/* #420011 */
/* #4f2f2f */
/* #2f4f4f */
/* #426F6F */
/* #568E8E */
/* #94bebe */
/* #d1e4e4 */
/* #8e7256 */
/* #8e5656 */
/***********************/
/* Spacing System */
/***********************/
/* 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128*/
/***********************/
/* Header */
/***********************/
header {
background-color: #010101;
height: 6.4rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.6rem;
}
.logo-title {
font-family: "Charmonman Bold";
color: #8e5656;
font-size: 3rem;
cursor: pointer;
margin-left: 1.2rem;
}
/***********************/
/* Navigation */
/***********************/
nav {
color: #8e5656;
font-size: 1.6rem;
font-family: "Crimson Text Regular";
}
.main-nav-list {
list-style: none;
display: flex;
gap: 3.6rem;
margin-right: 4.8rem;
}
.main-nav-list a:link,
.main-nav-list a:visited {
display: inline-block;
text-decoration: none;
color: #8e5656;
transition: all 0.3s;
}
.main-nav-list a:hover,
.main-nav-list a:active {
color: #af8e8e;
}
/***********************/
/* Slider */
/***********************/
.slide {
height: 80rem;
}
.slide img {
float: left;
width: 100%;
height: 90rem;
object-fit: cover;
}
.img-2 {
transform-origin: bottom right;
}
#font-face {
font-family: "Charmonman Regular";
src: url("/fonts/Charmonman-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Charmonman Bold";
src: url("/fonts/Charmonman-Bold.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Amarelle Regular";
src: url("/fonts/AmarelleDemoRegular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Crimson Text Regular";
src: url("/fonts/CrimsonText-regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Saphrel</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header class="header">
<h1 class="logo-title">Saphrel</h1>
<nav class="main-nav">
<ul class="main-nav-list">
<li>Contact Us</li>
<li>Menu</li>
<li>Our Story</li>
<li>Locations</li>
<li>Reservations</li>
</ul>
</nav>
</header>
<section aria-label="Newest Photos">
<div class="slider">
<ul>
<li class="slide">
<img
src="https://cdn.pixabay.com/photo/2016/11/18/14/05/brick-wall-1834784_960_720.jpg"
alt="Picture of Restaurant"
/>
</li>
<li class="slide">
<img
class="img-2"
src="https://images.pexels.com/photos/370984/pexels-photo-370984.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Picture of Wine Glass and Dish"
/>
</li>
<li class="slide">
<img
src="https://images.pexels.com/photos/6267/menu-restaurant-vintage-table.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="Picture of Wine Glass"
/>
</li>
</ul>
</div>
</section>
<h1>test</h1>
</body>
</html>
Turns out I was looking at the wrong css property. object-position seems to be the one I was looking for.
Related
I have styled my vertical navigation to be a width of 10% and my content to be a width of 90%, but I just can't seem to get them to sit next to each other correctly. I've tried float: left and display:inline-block, but nothing seems to work. Any help would be greatfully appreciated.
#import url(http://fonts.googleapis.com/css?family=Play);
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* --------- */
.mainHeader {
background: rgb(255,50,50);
padding: 20px;
}
.mainHeader h1 {
font-family: "Play";
color: rgb(255,255,255);
font-size: 24px;
}
.mainNavigation {
padding: 12px;
width: 10%;
height: 900px;
font-family: "Play";
font-size: 18px;
background: rgb(255,50,50);
float: left;
}
.mainNavigation ul {
padding: 0;
margin: 0;
list-style-type: none;
list-style: none;
}
.mainNavigation ul li {
width: 100%;
padding: 2px;
}
.mainNavigation ul li a {
text-decoration: none;
color: rgb(255,255,255);
padding: 12px;
width: 100%;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
box-sizing : border-box;
display: inline-block;
border: 1px solid rgb(255,100,100);
}
.mainNavigation ul li a:hover {
background: rgb(255,255,255);
color: rgb(0,0,0);
}
.mainContent {
padding: 8px;
display: inline-block;
width: 90%;
margin: 0 auto;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
box-sizing : border-box;
}
.article {
background: rgb(222,222,222);
padding: 8px;
margin: 0 auto;
border: 1px solid rgba(222,222,222,0.5);
width: 90%;
font-family: "Play";
}
<!doctype HTML>
<html>
<head>
<link href="css/reset.css" type="text/css" rel="stylesheet"/>
<link href="css/base.css" type="text/css" rel="stylesheet"/>
<title>temp</title>
</head>
<body>
<div class="mainHeader">
<h1>Jackatron</h1>
</div>
<div class="mainNavigation">
<ul class="clearfix">
<li>Home</li>
<li>Profile</li>
</ul>
</div>
<div class="mainContent">
<div class="article">
<h1>Hello</h1>
</div>
</div>
</body>
</html>
The #mainNavigation div has 12px padding. Unless you change box-sizing to border-box it means that #mainNavigation has 10% plus 24px (2*12px) width, so it doesn't fit next to 90% width #mainContent div.
'box-sizing: border-box' means that element width will be 90% including the given padding or border(note: it doesn't work with margin).
It is quite common this days to set box-sizing:border-box globally while it is more intuitive approach. Snippet for this (You can place it on top of the main css file):
*,
*:before,
*:after {
box-sizing: border-box;
}
Setting the max-width property of your navigation and content blocks, not just width, seems to solve the issue:
.mainNavigation {
max-width:10%;
}
.mainContent {
max-width: 90%;
}
You may have other options to solve the issue, depending on the intended layout. For instance, consider not setting the width of .mainContent.
I'm trying to create multiple images stack from top to bottom of the page using empty divs with background-image property applied to them, the problem is that because they don't have a size the browser acts as if they don't exist, is there a hack to fix this? when I add 'width' and 'height' of 'auto' it responses as though I'm not adding any elements to the div. If the "background-size" is set to 'cover' they stack one on top of the other.
Here's a photo of a mockup of what I want my final result to look like:
http://i58.tinypic.com/9uptlw.jpg
Here's the code:
/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* end of browser styles */
#import url(http://fonts.googleapis.com/earlyaccess/notosanshebrew.css);
#logo {
padding-right: 10px;
padding-top: 10px;
}
nav {
background: rgba(0,0,0,.7);
padding: 5px 0;
position: relative;
z-index: 10px;
}
nav li {
display: inline;
padding: 0 20px;
}
nav ul {
list-style-type: none;
}
nav ul a{
text-decoration: none;
color: white;
}
nav a:hover {
color: rgb(207, 207, 207);
}
body {
height: auto;
width: auto;
}
#bg1 {
background: url(../images/wedding.png) no-repeat center center;
/*width: 1280px;
height: 720px;*/
background-size: cover;
}
#bg2 {
background: url(../images/earrings.png) no-repeat;
/*width: 1280px;
height: 720px;*/
background-size: cover;
}
#bg3 {
background: url(../images/watch.png) no-repeat;
/*width: 1280px;
height: 720px;*/
background-size: cover;
}
#bg4 {
background: url(../images/lightning.png) no-repeat;
/*width: 1280px;
height: 720px;*/
background-size: cover;
}
<!doctype html>
<html dir="rtl" lang="he-IL" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<title>SD עיצובים</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header div="mainHeader">
<nav div="mainNav">
<ul>
<img id="logo" src="images/title.png"/>
<li>דף הבית</li>
<li>אודות</li>
<li>תכשיטים</li>
<li>צור קשר</li>
</ul>
</nav>
</header>
<div id="bg1"></div>
<div id="bg2"></div>
<div id="bg3"></div>
<div id="bg4"></div>
</div>
</body>
</html>
/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* end of browser styles */
#import url(http://fonts.googleapis.com/earlyaccess/notosanshebrew.css);
#logo {
padding-right: 10px;
padding-top: 10px;
}
nav {
background: rgba(0,0,0,.7);
padding: 5px 0;
position: relative;
z-index: 10px;
}
nav li {
display: inline;
padding: 0 20px;
}
nav ul {
list-style-type: none;
}
nav ul a{
text-decoration: none;
color: white;
}
nav a:hover {
color: rgb(207, 207, 207);
}
html, body { width: 100%; height: 100%}
#bg1 {
background: url(../images/wedding.png) no-repeat;
display: block;
height: 1920px;
width: 1080px;
background-size: cover;
}
<!doctype html>
<html dir="rtl" lang="he-IL" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<title>SD עיצובים</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header div="mainHeader">
<nav div="mainNav">
<ul>
<img id="logo" src="images/title.png"/>
<li>דף הבית</li>
<li>אודות</li>
<li>תכשיטים</li>
<li>צור קשר</li>
</ul>
</nav>
</header>
<div id="bg1"></div>
<div id="bg2"></div>
<div id="bg3"></div>
<div id="bg4"></div>
</div>
</body>
</html>
You propably just need to add
html, body { width: 100%; height: 100%; }
.element { display: block; }
and add element class to the divs/lis/whatever or just directly style it
elements that are inline have no height and width they are treated not like a box, and also body and html need to have at least 100% height in this case
EDIT
Dude you didnt understand set .nav li to display: block (!!!) and not inline and give it height in px it MUST work I just tried
my first suggestion was to add element class to the li but now use my edited answer and it WILL work
EDIT 2
then add class="element" to each of those bg divs and css like I wrote above, then the divs need some height, because how does the browser know what height should this empty div have?
html <div id="bg1" class="element"></div> and css .element { display: block; height: 600px; }
EDIT 3
This is my last attempt:
http://zapraszam.net/public/articles/dummy/
Dude WHAT DOESNT WORK?!
You added the CSS WRAPPED IN COMMENTS?!
You are a hard one.
I'm trying to position h1's within divs. Specifically, I'm trying to center them horizontally and vertically, but I'm encountering issues doing this. My code is pasted below. Any help would be greatly appreciated.
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<meta name="description" content="Hi. I'm Zack. I like to code and build things.">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href="favicon.ico" rel="icon" type="image/ico" />
<link href="favicon.ico" rel="shortcut icon" />
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="meyer-reset.css">
<title>Zack</title>
</head>
<body>
<header>
<nav>
<ol>
<li id="A">About</li>
<li id="B">Blog</li>
</ol>
</nav>
</header>
<div id="teal1">
<h1 class="text">Zack </h1>
</div>
<div id="teal2">
</div>
<div id="teal3">
</div>
<div id="blue1">
</div>
<div id="blue2">
</div>
<div id="blue3">
</div>
<div id="purple1">
</div>
<div id="purple2">
</div>
<div id="red1">
</div>
</body>
</html>
CSS 1
body {
font-family: 'Inconsolata', sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 5px;
}
header{
top: 0px;
width: 100%;
height: 40px;
background-color: black;
position: fixed;
}
header li {
margin-right: 20px;
margin-top: 10px;
}
li {
color: white;
list-style-type: none;
display: inline-block;
}
ol {
text-align: center;
}
#A {
text-decoration: underline;
}
h1 {
text-align: center;
position: relative;
margin-top: 200px;
}
div {
height: 350px;
width: 100%;
}
#teal1 {
background: #1CF9D4;
}
#teal2 {
background: #1DE4DB;
}
#teal3 {
background: #1FD0E2;
}
#blue1 {
background: #20BBE9;
}
#blue2 {
background: #22A7F0;
}
#blue3 {
background: #2392F7;
}
#purple1 {
background: #4F87DC;
}
#purple2 {
background: #727EC7;
}
#red1 {
background: #DC6387;
}
CSS 2 (meyer reset)
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
header li {
margin-right: 20px;
margin-top: 10px;
}
li {
color: white;
list-style-type: none;
display: inline-block;
}
ol {
text-align: center;
}
#A {
text-decoration: underline;
}
h1 {
text-align: center;
position: relative;
margin-top: 200px;
}
div {
height: 350px;
width: 100%;
}
#teal1 {
background: #1CF9D4;
}
#teal2 {
background: #1DE4DB;
}
#teal3 {
background: #1FD0E2;
}
#blue1 {
background: #20BBE9;
}
#blue2 {
background: #22A7F0;
}
#blue3 {
background: #2392F7;
}
#purple1 {
background: #4F87DC;
}
#purple2 {
background: #727EC7;
}
#red1 {
background: #DC6387;
}
Here's a fix:
h1 {
text-align: center;
position: relative;
top: 200px; <- made change
}
I'm bringing in text from a caption file and trying to style it in a footer.
Picture example: Venus image
<!DOCTYPE html>
<html laneg="en">
<head>
<title>Sample page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=100%, height=100%, maximum-scale=1.0, target-densitydpi=device-dpi"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#image01_caption_title").load('./captions.html #image01_caption_title');
jQuery("#image01_artist").load('./captions.html #image01_artist');
jQuery("#image01_caption").load('./captions.html #image01_caption');
});
</script>
</head>
<body>
<img src="./image01_large.jpg" width="3485" height="4656" />
<div id="footer"><span id="caption_title"><div id="image01_caption_title"></span></div><span id="caption_artist"><div id="image01_artist"></div></span><span id="caption"><div id="image01_caption"></div></span></div>
</body>
</html>
style.css
/* BASE SITE STYLE - NOT NEEDED
---------------------------------------------------- */
#import url(http://fonts.googleapis.com/css?family=Cookie);
/* HTML5 Reset :: style.css
-------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
-webkit-user-select: none;
}
#media all and (orientation:landscape) {
#portrait { display: none; }
img {
width:2048px;
height:100%;
}
}
#media all and (orientation:portrait) {
#landscape { display: none; }
img {
width:1536px;
height:100%;
}
}
#header {
position: fixed;
height: 96px;
width: 100%;
background: black;
opacity: 0.5;
left: 0;
top: 0;
}
#caption {
position: fixed;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: normal;
text-align: left;
background: transparent;
color: white;
opacity: 1.0;
margin-left: 0px;
margin-top: 0px;
margin-right: 700px;
}
#caption_title {
position: fixed;
font-family: Helvetica, Arial, sans-serif;
background: transparent;
font-size: 36px;
font-weight: bold;
text-align: left;
color: white;
opacity: 1.0;
margin-left: 50px;
margin-top: 15px;
}
#caption_client {
position: fixed;
background: transparent;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: normal;
color: white;
opacity: 1.0;
text-indent: 260px;
margin-top: -34px;
}
#footer {
position: fixed;
height: 164px;
width: 2048px;
background: black;
opacity: 0.5;
left: 0;
bottom: 0;
}
I'm not really understanding why the positioning is behaving the way it is (one caption element seems to be inherited from another), and I can't figure out the opacity. I want the text to be solid white, but it's inheriting 0.5 Opacity from the footer class.
Any help on that or suggestions on optimising the classes would be hugely appreciated.
Your code isn't usable (there's no text in the footer), and the question isn't all that clear. Anyhow, opacity is inherited by all child elements, so is generally not good to use. RGBA colors are much more friendly. E.g.
#footer {background: rgba(0,0,0,0.5);}
That will give the footer background 50% opacity without affecting anything else.
I try to align an image (a logo) with a text in two lines (the title of the website and a short description).
I try to do this HTML 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" xml:lang="fr-FR" lang="fr-FR">
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="site">
<div id="header">
<a title="Retour à l'accueil" href="#"><img width="40" height="40" title="mon logo" alt="mon logo" src="images/logo.png"/></a>
<div class="title">
<h1>Mon site</h1>
<div>mon sous-titre avec des g et des p</div>
</div>
<div class="switchlanguage right">
<strong>english</strong>
</div>
<div class="clear"></div>
</div>
<div id="content">
<p>homepage</p>
</div>
</div>
</body>
</html>
with this style.css :
/**********
* RESET *
**********/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
/*table, caption, tbody, tfoot, thead, tr, th, td,*/
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
html {
overflow:auto;
font-size: 62.5%;
}
body {
line-height: 1;
color: #000;/*#656565;*/
}
ol, ul {
list-style-type: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/**********
* COMMON *
**********/
body {
font-family:Arial;
color:#333333;
}
.left {
float:left;
}
.right {
float:right;
}
.clear {
clear:both;
height:0;
}
#site strong {
font-weight:700;
}
#header, #content, #footer {
width: 990px;
margin-left: auto;
margin-right: auto;
padding-left:20px;
padding-right:20px;
}
/**********
* HEADER *
**********/
#header {
padding-top:20px;
padding-bottom:20px;
background-color: #FFF;
}
#header img {
float: left;
margin:0;
padding:0;
border: none;
}
#header div.title {
float: left;
padding-left:20px;
}
#header div.title h1 {
font-size:2.6em;
line-height:0.904em;
height:0.904em;
}
#header div.title div {
font-size:1.8em;
line-height:0.917em;
height:1em;
}
#header .switchlanguage {
font-size:1.1em;
}
#header .switchlanguage a {
background-image:url('images/icn_langage.png');
background-repeat:no-repeat;
background-position:left center;
padding-left:20px;
color:#333333;
text-decoration:none;
}
/**********
* CONTENT *
**********/
#content {
background-image:url('images/bg_body_repeat.jpg');
background-repeat:repeat;
min-height:400px;
padding-top:10px;
padding-bottom:20px;
border-top:1px solid #ccc;
border-bottom:1px dotted #909090;
}
But in IE7, the letters p and g is cropped.
You can see the result here
What is the best practice to align image and a text in two lines ?
In your css here:
#header div.title div {
font-size: 1.8em;
line-height: 0.917em;
height: 1em;
}
Increase your line-height - this should fix it. The exact value will require some testing and depend on your design.
You might also, want to wrap your text in <p> tags instead of <div> tags, as you did somewhere else in the code - just for semantics!
Change HTML to
<div class="title">
<h1>Mon site</h1>
<div class="tagline">mon sous-titre avec des g et des p</div>
</div>
and CSS to
.title .tagline{
padding:0 0 2px 0;
}
if you know that you are ever going to have 1 div inside the title div, you can change the style to
.title div{ padding:0 0 2px 0;}
and not do a separate class(.tagline) like above