hola, tengo un pequeño problema y no me doy cuenta que puedo estar haciendo mal.
cuando hago vista previa para ver cómo va quedando en menu insertado en el espacio de contenido principal de la pagina, me doy cuenta de que el texto del espacio contenido esta centrado con respecto al ancho que queda restando el ancho que ocupa el menu.
esto se ve feo porqeu queda desplazado de los demás textos centrados con respecto a los 800px de ancho.
se entiende?
dejo pegado lo que he ido haciendo y muchas gracias!!
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all"
</head>
<body>
<div id="global">
<div id="cabecera">Bienvenidos a mi web</div>
<div id="navegacion">Barra de navegación</div>
<div id="contenido">
<div id="menu"><ul>
enlace1
enlace2
enlace3
enlace4
</div>Esta será la zona principal de la web</div>
<div id="pie">Este será el Pié de la página</div>
</div>
</body>
</html>
body{text-align: center}
#cabecera{background-color: pink}
#navegacion{background-color: gray}
#contenido{background-color:orange; width: 800px; float: left}
#pie{background-color:brown}
#global{width:800px ; margin:4px auto}
#menu {background-color: yellow; width: 90px; float: left}
#menu li{list-style: none}
cuando hago vista previa para ver cómo va quedando en menu insertado en el espacio de contenido principal de la pagina, me doy cuenta de que el texto del espacio contenido esta centrado con respecto al ancho que queda restando el ancho que ocupa el menu.
esto se ve feo porqeu queda desplazado de los demás textos centrados con respecto a los 800px de ancho.
se entiende?
dejo pegado lo que he ido haciendo y muchas gracias!!
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all"
</head>
<body>
<div id="global">
<div id="cabecera">Bienvenidos a mi web</div>
<div id="navegacion">Barra de navegación</div>
<div id="contenido">
<div id="menu"><ul>
</div>Esta será la zona principal de la web</div>
<div id="pie">Este será el Pié de la página</div>
</div>
</body>
</html>
body{text-align: center}
#cabecera{background-color: pink}
#navegacion{background-color: gray}
#contenido{background-color:orange; width: 800px; float: left}
#pie{background-color:brown}
#global{width:800px ; margin:4px auto}
#menu {background-color: yellow; width: 90px; float: left}
#menu li{list-style: none}