If you mean you wanted the logo floated right and the text on the left then you would basically just reverse the process. i.e. Float the image right and then use a margin right on the text instead of the margin-left as existing.
I have a concern about screen resolution. Upper image is 371 px width, and the new one is 399 px. It is the half of a 800x600 screen resolution. The container is set 75% of the total width, it is about 600px total width.
I guess the remaining 200 px would be not enough for the text, in header and in body.
Is it possible to resize images for small screen resolutions?
Thanks!!
You could set a max-width for the image that is its normal size but allow it to scale smaller by sizing it in percentages.
You can really only use an h1 in your page once because it is a main heading. A page can’t really have two main headings as that’s not logical. Other headings should be h2 and then h3 etc. You can of course have more than one h2 (or other heading tags) as it stands for subsections.
You can’t put block elements in an h1 as it can only contain inline elements. Your right column should be a div as the parent with an h2 as the heading and then p elements as required.
You are also using ids more than once which is not allowed as ids are unique and only one element per page can have the same id. Therefore if you need to add rules to more than one element then use a class.
I notice in your list that you have applied the same id to each list item and even if you;d used a class there would be no need because you could target all the list items via their parent id. It’s only the last list item that needs a class because that’s the one without a margin.
You have also wrapped a div around the ul menu and there was no need because the ul is thje wrapper for the list and there’s no need to wrap a div around it.
Here are all those changes wrapped into valid code and adjusted to fit. (Again the css is in the head for ease of use and it means you can just copy and paste the whole code and then run it in a browser while online and it will work. This will allow you to see it in action before you start copying it into the real file.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>
<!-- Libromanía -->
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<style type="text/css">
/* General tags styles
*/
html, body {
margin:0;
padding:0;
}
body {
text-align: center;
font-family: verdana, arial, helvetica;
background-color: #ffffff;
background-image: url(http://www.libromania.cl/images/red_mosaic.jpg);
padding: 10px 0;
}
a {
text-decoration:none;
color: #ffffff;
}
a img {
border: none;
}
p {
margin: 0;
padding: 0;
}
/* Container styles
*/
#container {
margin:0 auto;
background-color: #ffffff;
width: 75%;
overflow: hidden;
text-align: left;
border: solid;
border-color: #cccccc;
border-width: 1px;
}
/* Index page styles
*/
#index_title {
font-family: ar hermann, verdana, arial, helvetica;
color: #b10c34;
font-weight: bold;
font-size: 700%;
text-align: center;
margin-bottom: 2%;
}
#index_welcome {
margin-bottom: 5%;
}
#margin_right_links {
margin-right: 5%;
}
#index_welcome li {
color: #b10c34;
font-size: 200%;
list-style: none;
display: inline;
}
#index_welcome ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
text-align: center;
}
#index_flags {
margin-bottom: 5%;
}
#index_flags li {
list-style: none;
display: inline;
}
#index_flags ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
text-align: center;
}
#index_language {
margin-bottom: 7%;
}
#index_language li {
color: #b10c34;
font-size: 200%;
list-style: none;
display: inline;
}
#index_language ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
text-align: center;
}
/* Header section styles
*/
#header {
background-color: #ffffff;
width: 100%;
overflow: hidden;
position: relative;
}
#logo {
margin: 0 0 0 1%;
display: inline;
float: left;
font-size: 100%;
}
#logo span {
color: #b10c34;
font-size: 130%;
font-weight: normal;
display: block;
margin: 80px 0 0 401px;
}
#logo img {
margin: 0;
float: left;
}
#languages_flags {
position: absolute;
right: 0;
top: 0;
margin: 0 1% 0 0;
padding: 1% 0 0 0;
list-style: none;
clear: both;
}
#languages_flags li {
display: inline;
}
/* Menu section styles
*/
#menu {
background-image: url(http://www.libromania.cl/images/menu.jpg);
border: solid;
border-color: #cccccc;
border-width: 1px 0 1px 0;
margin:0;
width:100%;
list-style: none;
padding:8px 0;
text-align: center;
}
#menu a:hover {
color: green;
}
#menu li {
color: #ffffff;
font-size: 130%;
display: inline;
margin-right: 10%;
}
#menu li.last{margin-right:0;}
/* Home page styles*/
#home_main {
margin: 0 0 0 0;
display: inline;
float: left;
border: solid;
border-color: #cccccc;
border-width: 0 0 1px 0;
width: 100%
}
#home_main .sideimg {
float: left;
height: auto;
margin:0 15px 0 0;
max-width: 399px;
width: 45%;
margin:0;
}
* html #home_main .sideimg {width:399px}/* ie6 doesn't understand min-width so gets fixed width instead*/
#home_main p {
margin: 2.5% 0 0 0;
font-size: 65%;
color: #000000;
font-size: 100%;
font-style: italic;
display: block;
text-align: center;
font-weight:bold;
}
* html #home_main p {width:97%}/* ie6 italic bug */
#home_main h2 {
font-size: 180%;
margin:0 0 10px;
text-align:center;
}
.content {
overflow:hidden;
min-height:0;
padding:20px;
}
* html .content {
zoom:1.0
}/* ie6 hack to make block new formatting context which overflow:hidden is doing for others above*/
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1 id="logo"><img src="http://www.libromania.cl/images/logo.jpg" width="371" height="140" alt="Libromania"> <span> Todos sus textos escolares, en un solo lugar ... </span></h1>
<ul id="languages_flags">
<li><a href="../home_spanish.shtml"> <img src="http://www.libromania.cl/images/chile.png" width="35px" alt="Chile Flag"></a></li>
<li><a href="../home_german.shtml"> <img src="http://www.libromania.cl/images/germany.png" width="35px" alt="Germany Flag"></a></li>
<li><a href="../home_english.shtml"> <img src="http://www.libromania.cl/images/united_kingdom.png" width="35px" alt="UK Flag"></a></li>
</ul>
</div>
<ul id="menu">
<li><a href="home_spanish.shtml">Home</a></li>
<li><a href="howtobuy_spanish.shtml">Cómo comprar</a></li>
<li><a href="ourservice_spanish.shtml">Nuestro servicio</a></li>
<li class="last"><a href="contactus_spanish.shtml">Contacto</a></li>
</ul>
<div id="home_main">
<p class="sideimg"><img src="http://www.libromania.cl/images/message.jpg" width="100%" alt="Message"></p>
<div class="content">
<h2> ¿Por qué Libromanía? </h2>
<p> ... porque le entregamos todos sus libros de una vez ... </p>
<p> ... porque comprar con nosotros es fácil, cómodo y rápido ... </p>
<p> ... porque ya no perderá tiempo en distintos lugares ... </p>
<p> ... porque queremos ser su aliado en cada año escolar ... </p>
</div>
</div>
</div>
</body>
</html>
I also shortened the main content id as you called it something like #home_main_message which was starting to get a bit long especially when you added other long selectors to it. Keep ids and classnames relatively short but recognisable.
e.g.
#header{}
#outer{}
#home_main{}
.main{}
.content{}
#sidebar{}
.intro{}
#footer{}
or similar…
