Can't make text center in all the sections

2 replies [Last post]

Wed, 2012-01-18 22:25

Luan

Offline

newbie

Timezone: GMT-3

Joined: 2012-01-18

Posts: 2

Points: 3

Hi!
I'm designing this horizontal scroll website which has 7 sections.
I need each text (and the logo) to be centered horizontally in each section no matter what resolution the user is using.
I know I must be doing some unethical stuff, that is because I ignore a lot of how some things really work in CSS. Sorry for that.
Any help you guys can give me will be appreciated.
Thanks!

The URL:
www.big-band.com.ar

The html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
 
<head>
 
	<meta content="text/html; charset=windows-1252" http-equiv="Content-Type">
	<meta content="es-ar" http-equiv="Content-Language">
	<meta name="description" content="Sitio de Baires Eclectic Big Band. Orquesta de 20 músicos que interpreta repertorio propio.">
	<meta name="keywords" content="baires, eclectic, big band">
	<title>Baires Eclectic Big Band</title>
	<link rel="stylesheet" href="css/reset.css" type="text/css">
	<link rel="stylesheet" href="css/style.css" type="text/css">
	<script src="lib/cufon.js" type="text/javascript"></script>
	<script src="lib/seraphic_400.font.js" type="text/javascript"></script>
	<script src="lib/aller_400.font.js" type="text/javascript"></script>
	<script type="text/javascript">
	Cufon.DOM.ready(function(){        
			Cufon.replace('.seraphic', {
			fontFamily: 'seraphic',
					hover: {}
					});
			Cufon.replace('.aller', {
			fontFamily: 'aller',
					hover: {}
					});
				});
	</script>
 
</head>
<body oncontextmenu="return false;" onmousedown="return false" onselectstart="return false;" ondragstart="return false">
 
<!--- menu --->
<div class="menu"><br>
<ul class="nav">
<li><a href="#section1" class="seraphic">Portada </a>&nbsp;|&nbsp;</li>
<li><a href="#section2" class="seraphic">Acerca de Baires Eclectic Big Band </a>&nbsp;|&nbsp;</li>
<li><a href="#section3" class="seraphic">Integrantes </a>&nbsp;|&nbsp;</li>
<li><a href="#section4" class="seraphic">Videos </a>&nbsp;|&nbsp;</li>
<li><a href="#section5" class="seraphic">Fotos </a>&nbsp;|&nbsp;</li>
<li><a href="#section6" class="seraphic">Pr</a><a href="#section6" class="aller">&oacute;</a><a href="#section6" class="seraphic">ximos shows </a>&nbsp;|&nbsp;</li>
<li><a href="#section7" class="seraphic">Contacto</a></li>
</ul>
</div>
 
        <div class="section" id="section1">
        <div class="contenedor1">
        <div class="contenedor2">
            <span class="seraphic h2"></span>
            <p>
            <img alt="" src="images/logo.png"></p>
            </div>
            </div>
        </div>
        <div class="section fondo2" id="section2">
        <div class="contenedor1">
        <div class="contenedor2">
            <span class="seraphic h2">Acerca de Baires Eclectic Big Band</span>
            <p class="aller negro">
			Baires Eclectic se presenta como una Big Band de m&uacute;sica original de 
			sus integrantes, algo poco frecuente en nuestro medio. Su director 
			es el compositor / arreglador / director / guitarrista / docente 
			Daniel Camelo.<br>
			Sus integrantes compositores, Daniel Camelo, Santiago Fernandez, 
			Mikey Sarian, Juan Badenas y Luan Rodr&iacute;guez, integran dentro de su 
			repertorio distintos g&eacute;neros como Jazz, M&uacute;sica Latinoamericana, 
			Funk, Minimalista, Free Jazz, Gospel, Rock, y otras m&uacute;sicas.<br>
			Se han presentado en 2011, en Caf&eacute; Vinilo, y en el ciclo de jazz en 
			AAPM.
            </p></div>
        </div></div>
        <div class="section fondo3" id="section3">
                <div class="contenedor1">
        <div class="contenedor2">
 
            <span class="seraphic h2">Integrantes</span>
            <table><tr><td><p class="aller negro">Sobre su director, Daniel Camelo<br><br>
 
			M&uacute;sico de amplia trayectoria y una importante formaci&oacute;n, graduado 
			con honores en Berklee College of Music (USA), como compositor y 
			arreglador.<br>
			Suma ya 15 años de experiencia en 
			la direcci&oacute;n de orquestas en Buenos Aires.<br>
			Es director y arreglador de la orquesta “Boris Big Band”, agrupaci&oacute;n 
			propia de Boris Club de Jazz, e integrada 
			por Juan Cruz de Urquiza, Richard Nant, Gustavo Musso, Mart&iacute;n 
			Pantyrer, Daniel Kovacich, Alejandro Demogli, Cirilo Fernández, 
			Mariano Sívvori y V&iacute;ctor Skorupski entre otros.<br> 
			A su vez, dirige, compone y arregla en “Inmigrantes Big Band”, 
			integrada por Daniel “Pipi” Piazzolla, Richard Nant, Gustavo Musso, 
			Mart&iacute;n Pantyrer y Esteban Sehinkman entre otros.<br>
			Ha dirigido, en dichos &aacute;mbitos ensambles, de tipo Big 
			Band, Bandas Sinf&oacute;nicas y otros.<br></p></td><td><p class="aller negro">
			Integrantes<br><br>
 
			Saxos:<br>
 Laura Pinna, Laura Loi&aacute;cono, Miguel Crozzoli, Claudio 
			Scolamiero, Santiago Fernandez<br>
			Trompetas:<br>
 Mikey Sarian, Alan Rodr&iacute;guez, Juan Badenas, Jeanette 
			Nenezien<br>
			Trombones:<br>
 Jorge Fleitas, Nathan Lane<br>
			Vibr&aacute;fono:<br>
 Mart&iacute;n S&aacute;nchez<br>
			Guitarra:<br>
 Luan Rodriguez<br>
			Piano:<br>
 Mart&iacute;n Santill&aacute;n<br>
			Bajo:<br>
 Daniel S&aacute;nchez<br>
			Bater&iacute;a:<br>
 Pablo Guarnieri<br>
			Voz:<br>
 Mavi Toledo<br>
			Direcci&oacute;n: Daniel Camelo<br>
            </p></td></tr></table>
	     </div></div>
        </div>
        <div class="section fondo4" id="section4">
                <div class="contenedor1">
        <div class="contenedor2">
 
            <span class="seraphic h2">Videos</span>
            <p class="aller">
            </p></div></div>
        </div>
        <div class="section fondo5" id="section5">
                <div class="contenedor1">
        <div class="contenedor2">
 
            <span class="seraphic h2">Fotos</span>
            <p class="aller">
                ‘He scents thy footsteps in the snow Wheresoever thou dost go, 
				Thro’ the wintry hail and rain. When wilt thou return again?
 
            </p></div></div>
        </div>
        <div class="section fondo6" id="section6">        <div class="contenedor1">
        <div class="contenedor2">
 
            <span class="seraphic h2">pr</span><span class="aller h2">&oacute;</span><span class="seraphic h2">ximos 
			shows</span>
            <p class="aller">
                ‘He scents thy footsteps in the snow Wheresoever thou dost go, 
				Thro’ the wintry hail and rain. When wilt thou return again?
 
            </p></div></div>
        </div>
        <div class="section2 fondo7" id="section7">
                <div class="contenedor1">
        <div class="contenedor2">
 
            <span class="seraphic h2">Contacto</span>
            <p class="aller">
                ‘He scents thy footsteps in the snow Wheresoever thou dost go, 
				Thro’ the wintry hail and rain. When wilt thou return again?
 
            </p></div></div>
        </div>
 
 
        <!-- javascript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>		
        <script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('ul.nav a').bind('click',function(event){
                    var $anchor = $(this);
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1000);
                    event.preventDefault();
                });
            });
        </script>
		<script type="text/javascript">Cufon.now();</script>
 
</body>
</html>

The CSS:

body{
	background-image:url('../images/fondo.jpg');
	background-repeat:no-repeat;
	background-position: 0% 5%;
	background-color:black;
	color:#fff;
	font-size: 16px;
	width: 13500px;
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	height:100%;
}
.section{
	margin: 0px;
    width:2000px;
    float:left;
    height:100%;
}
.section2{
	margin: 0px;
    width:1500px;
    float:left;
    height:100%;
}
.contenedor1 {
	height:700px;
	width:2000px;
	margin-left:-25%;
	}
.contenedor2 {
    position:relative;
	left:40%;
	top:20%;
	height:700px;
	width:600px;
	margin-left:0px;
	}
.negro {
	background-image:url('../images/negro.png');
    background-repeat:repeat;
}
.h2 {
	font-size:30px;
}
.section h2{
    margin:50px 0px 30px 50px;
}
.p1{
    width:400px;
}
.p2{
    width:400px;
}
table{
    width:700px;
    margin-left:-5%;
}
 
td {
	width: 50%;
}
.fondo2{
    background:url(../images/fondo2.jpg) no-repeat -50px center;
}
.fondo3{
    background: url(../images/fondo3.jpg) no-repeat top left;
}
.fondo4{
    background:url(../images/fondo4.jpg) no-repeat -50px top;
}
.fondo5{
    background: url(../images/fondo5.jpg) no-repeat -50px top;
}
.fondo6{
    background:url(../images/fondo6.jpg) no-repeat -50px center;
}
.fondo7{
    background: url(../images/fondo7.jpg) no-repeat top left;
}
.section ul{
	list-style-type: none;
	margin: 20px 0px 0px 550px;
}
li {
	display: inline;
	color:#fff;
}
.ul li{
	float: left;
	padding: 5px;
	margin: 5px;
	color: #000;
	list-style-type: none;
}
a:link {
	color: #fff;
}
a:link {
	color: #ccc;
}
a:visited {
	color: #000;
}
.center {
	text-align:center
}
.menu {
	position:fixed;
	left:0;
	width:100%;
	height:70px;
	bottom: 0;
	font-size:17px;
	z-index:3;
	text-align:center;
	background-image:url('../images/negro.png');
	background-repeat:repeat;
}
.menu a:link{
	color:#fff;
}

Tags:

Sat, 2012-01-21 21:25

Luan

Offline

newbie

Timezone: GMT-3

Joined: 2012-01-18

Posts: 2

Points: 3

I've been thinking: maybe I

I've been thinking: maybe I need to use javascript instead to center?

Wed, 2012-02-01 09:56

tjroberts086

Offline

Enthusiast

Timezone: GMT-5

Joined: 2010-01-08

Posts: 132

Points: 168

you definitely shouldnt have

you definitely shouldnt have to use javascript to center text. Why not use your .center class on each of your sections? Its pretty late and maybe im missing something..

Can't make text center in all the sections

I've been thinking: maybe I

you definitely shouldnt have

New forum topics

User login

Navigation