Foros del Web » Creando para Internet » CSS »

Alinear border-right

Estas en el tema de Alinear border-right en el foro de CSS en Foros del Web. Hola a todos, tengo un pequeño problema, espero me puedan ayudar: observen en el código HTML y CSS a continuación que el border-right del section ...
  #1 (permalink)  
Antiguo 17/01/2013, 13:35
 
Fecha de Ingreso: enero-2013
Mensajes: 4
Antigüedad: 11 años, 4 meses
Puntos: 0
Pregunta Alinear border-right

Hola a todos, tengo un pequeño problema, espero me puedan ayudar:

observen en el código HTML y CSS a continuación que el border-right del
section (color rojo; realmente será blanco pero así mientras para que
se vea el problema) no coincide con el body por 1px.
Quiero pues que este alineado así como el border-left del aside con el body.

Código HTML:
<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Casa de Oración Cancún</title>
		<meta charset='utf-8'>		
		<!--Elementos auxiliares-->
		<link rel="stylesheet" href="stylesheet.css">
		<link rel="shortcut icon" href="logo.ico"/>
		<link rel="icon" href="logo.ico" type="image/x-icon"/>
		<link href='http://fonts.googleapis.com/css?family=Nunito:700' rel='stylesheet'>
		<!--Elementos auxiliares-->
	</head>
	<body>
		<header>
			<img src='header.jpg'/>
		</header>
		<nav>
			<ul>
				<li><a href='index.html'>Inicio</a></li>
				<li><a href='predicaciones/predicaciones.html'>Predicaciones</a></li>
				<li><a href='alabanza/alabanza.html'>Alabanza</a></li>
				<li><a href='matrimonios/matrimonios.html'>Matrimonios</a></li>
				<li><a href='infantil/infantil.html'>Iglesia Infantil</a></li>
				<li><a href='contacto/contacto.html'>Contacto</a></li>
			</ul>
		</nav>
		<aside>
			<p>
				Bienvenido a la página de Casa de Oración Cancún
			</p><br>
			<p><figure>
				<img src='pastorvictor.jpg'/>
				<figcaption>Pastor Víctor Sánchez</figcaption>
			</figure></p><br>
			<p>
			Encuéntrenos en <a href='https://www.facebook.com/CasaDeOracionCancun'>Facebook</a>
			</p><br>
			<p>
				Enlaces recomendados:<br>
				<a href='http://www.casadeoracionmexico.info'>Casa de Oración México</a></li><br>
				<a href='http://www.ibco.com.mx/'>Instituto Bíblico</a></li><br>
			</p>
		</aside>
		<section>
			<article>
				<center><img src='serieencurso.jpg' width=638.25 height=236.25/></center>
			</article>
		</section>
		<footer>
			<p>Casa de Oración Cancún - Copyright 2012 © Todos los derechos reservados.</p>
		</footer>
	</body>
</html> 
Código HTML:
* {
	margin:0;
	padding:0;
	border:0;
}
html, body {
	margin:0 auto;
	width:960px;
	height:100%;
	font-family:"Nunito",Arial;
	font-weight:bold;
	color:#FFF;
	text-align:center;
	text-shadow:0px 0px 10px rgba(0,0,0,0.5);
	background-color:blue;
	background-image:url('background.png');
	background-attachment:fixed;
}
header {
	position:relative;
	width:960px;
	height:200px;
	margin:0px auto;
	border-left:solid 1px white;
	border-right:solid 1px white;
}
nav {
	position:relative;
	background-color:#336699;
	margin:0px auto;
	width:960px;
	padding-top:15px;
	padding-bottom:15px;
	border-left:solid 1px white;
	border-right:solid 1px white;
	border-bottom:solid 1px white;
}
nav ul li {
	display:inline-block;
	margin-right:25px;
}
nav ul li a, nav ul li a:link, nav ul li a:visited {
	color:#FFF;
	transition:color 0.1s linear;
	-webkit-transition:color 0.1s linear;
	-moz-transition:color 0.1s linear;
	-o-transition:color 0.1s linear;
}
nav ul li a:hover {
	color:#FF9900;
}
section {
	position:static;
	float:right;
	background-color:#FFF;
	width:719px;
	height:100%;
	padding-top:10px;
	color:#336699;
	border-right:solid 1px red;
}
article{
	background-color:#FFF;
	margin:2%;
	color:#336699;
	text-align:left;
}
aside {
	position:static;
	float:left;
	background-color:#336699;
	width:239px;
	height:100%;
	padding-top:10px;
	border-left:solid 1px white;
}
footer {
	position:relative;
	clear:both;
	width:960px;
	height:30px;
	margin:0px auto;
	font-size:10px;
	border-top:solid 1px white;
	overflow:hidden;
}
a, a:link, a:visited {
	text-decoration:none;
	color:#FFFFFF;
	transition:color 0.1s linear;
	-webkit-transition:color 0.1s linear;
	-moz-transition:color 0.1s linear;
	-o-transition:color 0.1s linear;
	cursor:pointer;
}
a:hover {
	text-decoration:none;
	color:#0099CC;
}
Espero puedan visualizar el detalle en un navegador y darme una solución.

¡Gracias de antemano, buen día!
  #2 (permalink)  
Antiguo 17/01/2013, 16:44
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 10 meses
Puntos: 2114
Respuesta: Alinear border-right

Tardé un rato en encontrar el supuesto fallo, porque realmente el fallo no está ahí.

Con el encabezado y con la navegación, haces un ancho de 960 pixeles más 2 pixeles de borde lateral, pero con aside y section, haces un ancho de 958px más 2 pixeles de borde lateral.

Si quieres hacer un ancho de 960, el error está en el encabezado y en el menú de navegación.
  #3 (permalink)  
Antiguo 18/01/2013, 01:02
 
Fecha de Ingreso: enero-2013
Mensajes: 4
Antigüedad: 11 años, 4 meses
Puntos: 0
Pregunta Respuesta: Alinear border-right

¡Oh, muchas gracias! Problema solucionado. Lo deje en 962px.

Ahora, otro detalle, si te es posible igual checarlo: observa como el article que está dentro del section está sobresaliente en la siguiente página.

Código HTML:
<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Casa de Oración Cancún</title>
		<meta charset='utf-8'>	
		<!--Elementos auxiliares-->
		<link rel="stylesheet" href="stylesheet.css">
		<link href='http://fonts.googleapis.com/css?family=Nunito:700' rel='stylesheet'>
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="scriptPrincipal.js"></script>
		<!--Elementos auxiliares-->
	</head>
	<body>
		<header>
			<img src='../header.jpg'/>
		</header>
		<nav>
			<ul>
				<li><a href='../index.html'>Inicio</a></li>
				<li><a href='predicaciones.html'>Predicaciones</a></li>
				<li><a href='../alabanza/alabanza.html'>Alabanza</a></li>
				<li><a href='../matrimonios/matrimonios.html'>Matrimonios</a></li>
				<li><a href='../infantil/infantil.html'>Iglesia Infantil</a></li>
				<li><a href='../contacto/contacto.html'>Contacto</a></li>
			</ul>
		</nav>
		<aside>
			<p>
				Enlaces recomendados:<br>
				<a href='http://www.casadeoracionmexico.info'>Casa de Oración México</a></li><br>
				<a href='http://www.ibco.com.mx/'>Instituto Bíblico</a></li><br>
			</p>
		</aside>
		<section>
			<article>
				<hgroup>
					<h2>Predicaciones</h2><br>
					<h2>Serie: Edificando la iglesia</h2><br>
						<h1>Diez verdades de la iglesia</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>Una iglesia que funciona</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>¿Maldiciones generacionales?</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>Una iglesia que sabe adorar</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>¿Qué onda con los decretos?</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>Tiempo de callar y tiempo de hablar</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>Preciosa Sangre</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>Cuando Dios no responde</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>Verdadera conversión I</h1>	
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>Verdadera conversión II</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>Verdadera conversión III</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>¿Por qué me fui de la iglesia?</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>Balance espiritual</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>La Biblia no se contradice</h1>
							<audio controls='controls'>
								<source src='12-11-03-eli-14-LaBibliaNoSeContradice.mp3' type='audio/mp3'/>
							</audio>
						<h1>¿Es Dios cruel o misericordioso? | Mario Pirez</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>La disciplina en la iglesia II</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>Libertad en Cristo</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>Una iglesia que sabe juzgar</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio><br><br>
					<h2>Serie del congreso: Fundamentando la iglesia</h2>
					<p>con el pastor Chuy Olivares</p><br>
						<h1>¿Principios o métodos?</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>¿Iglesias o centros de espectáculo?</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>La disciplina en la iglesia</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>El compromiso con la palabra de Dios</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio>
						<h1>El temor por la palabra de Dios</h1>
							<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
							</audio><br><br>
					<h2>Congreso de alabanza: Fieles adoradores</h2>
					<p>con el pastor Chuy García</p><br>
						<h1>Sirviendo a Dios antes que a los hombres</h1>
							<audio controls='controls'>
									<source src='.mp3' type='audio/mp3'/>
							</audio><br><br>
					<h2>Serie: Conociendo a Dios</h2><br>
					<h1>Dios es grande y perfecto</h1>
						<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
						</audio>
					<h1>Dios es eterno</h1>
						<audio controls='controls'>
								<source src='.mp3' type='audio/mp3'/>
						</audio>
				</hgroup>
			</article>
		</section>
		<footer>
			<p>Casa de Oración Cancún - Copyright 2012 © Todos los derechos reservados.</p>
			<canvas id=''>
			</canvas>
		</footer>
	</body>
</html> 
Código HTML:
* {
	margin:0;
	padding:0;
	border:0;
}
html, body {
	margin:0 auto;
	width:962px;
	height:100%;
	font-family:"Nunito",Arial;
	font-weight:bold;
	color:#FFF;
	text-align:center;
	text-shadow:0px 0px 10px rgba(0,0,0,0.5);
	background-image:url('background.png');
	background-attachment:fixed;
	background-color:black;
}
header {
	position:relative;
	width:960px;
	height:200px;
	margin:0px auto;
	border-left:solid 1px white;
	border-right:solid 1px white;
}
nav {
	position:relative;
        background-color:#336699;
        margin:0px auto;
	width:960px;
	padding-top:15px;
	padding-bottom:15px;
	border-left:solid 1px white;
	border-right:solid 1px white;
	border-bottom:solid 1px white;
}
nav ul li {
	display:inline-block;
	margin-right:25px;
}
nav ul li a, nav ul li a:link, nav ul li a:visited {
	color:#FFF;
	transition:color 0.1s linear;
	-webkit-transition:color 0.1s linear;
	-moz-transition:color 0.1s linear;
	-o-transition:color 0.1s linear;
}
nav ul li a:hover {
	color:#FF9900;
}
section {
	position:static;
        float:right;
        background-color:#FFF;
        width:720px;
	height:100%;
	padding-top:10px;
        color:#336699;
	border-right:solid 1px white;
}
article{
	background-color:#FFF;
	margin:2%;
        color:#336699;
	text-align:left
}
aside {
	position:static;
        float:left;
	background-color:#336699;
        width:240px;
	height:100%;
	padding-top:10px;
	border-left:solid 1px white;
}
footer {
	position:relative;
    	clear:both;
	width:960px;
	height:30px;
	margin:0px auto;
	font-size:10px;
	border-top:solid 1px white;
	overflow:hidden;
}
a, a:link, a:visited {
	text-decoration:none;
	color:#FFFFFF;
	transition:color 0.1s linear;
	-webkit-transition:color 0.1s linear;
	-moz-transition:color 0.1s linear;
	-o-transition:color 0.1s linear;
	cursor:pointer;
}
a:hover {
	text-decoration:none;
	color:#0099CC;
}
label {
	display:block;
}
input#nombre, input#correo, input#btnSubmit, textarea {
	border:solid 1px #888;
	box-shadow:2px 2px 5px rgba(0,0,0,0.5);
}
#btnSubmit {
	padding:4px;
	margin:20px;
	cursor:pointer;
	font-family: 'Nunito', sans-serif;
}
Quizás sea algo absurdo pero no logro que todo quede bien. Ojalá puedas ayudarme.

Pero de cualquier manera, ¡muchas gracias! ¡saludos!
  #4 (permalink)  
Antiguo 18/01/2013, 04:09
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 10 meses
Puntos: 2114
Respuesta: Alinear border-right

Eso lo solucionas poniéndole overflow: hidden; al artículo.
  #5 (permalink)  
Antiguo 26/01/2013, 23:59
 
Fecha de Ingreso: enero-2013
Mensajes: 4
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: Alinear border-right

Lo modifique con un overflow:auto;. Y ya después modifique toda la estructura logrando eliminar el overflow. Pero muchas gracias porque a partir de tu idea surgieron otras.

Te agradezco tu tiempo.

¡Saludos!

Etiquetas: alinear, border, html5, section
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:08.