CODEWITHSUNDEEP
htmlcss
Throoze
Throoze

Reputation: 4038

Problem aligning divs using html and css

im starting to use css, and im having a problem aligning images and block within the page.

this is my html source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
    <title>Title</title>
    <link href="resources/css/style.css" rel="stylesheet" type="text/css" media="screen" />
  </head>
  <body>
    <div id="wrapper">
      <div id="header-menu">
        <img id="barleft" src="resources/images/barleft.png" alt=""/>
        <div id="header-content">
          <div id="menu">
            <div id="logo">
              <img id="imgLogo" src="resources/images/logoPINFTyny.png" alt="PINF"/>
            </div>
            <div id="search"></div>
            <ul>
              <li class="current_page_item"><a href="index.html">/home</a></li>
              <li><a href="index.html">/usr</a></li>
              <li><a href="index.html">/etc</a></li>
            </ul>
          </div>
        </div>
        <img id="barright" src="resources/images/barright.png" alt=""/>
        <div style="clear:both;"></div>
      </div>
      <!-- end #header -->
      <div id="page">
        <div id="left-sidebar">
          <div id="actions">
            <h3>
              Acciones
            </h3>
            <ul>
              <li>accion1</li>
              <li>accion2</li>
              <li>accion3</li>
              <li>accion4</li>
            </ul>
          </div>
          <div id="news">
            <h3>
              Noticias
            </h3>
            <ul>
              <li>Noticia1</li>
              <li>Noticia2</li>
              <li>Noticia3</li>
              <li>Noticia4</li>
            </ul>
          </div>
        </div>
        <div id="content">
          <h1>
            Este es el titulo el content
          </h1>
          <h3>
            Este es el subtítulo del content
          </h3>
          <p>
            Esto es lo que debe ir escrito en el content<br/>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.
          </p>
        </div>
        <div id="right-sidebar">
          <div id="actions">
            <h3>
              Acciones
            </h3>
            <ul>
              <li>accion1</li>
              <li>accion2</li>
              <li>accion3</li>
              <li>accion4</li>
            </ul>
          </div>
          <div id="news">
            <h3>
              Noticias
            </h3>
            <ul>
              <li>Noticia1</li>
              <li>Noticia2</li>
              <li>Noticia3</li>
              <li>Noticia4</li>
          </ul>
          </div>
        </div>
      </div>
      <!-- end #page -->
    </div>
    <div style="clear:both;"></div>
    <div id="footer">
      <p>© 2011 Todos los derechos reservados. Sistema diseñado y desarrollado por <a href="http://www.css.com"><img id="logoFooter" src="resources/images/logo-SIR-trans.png" alt="SIR" width="30px" height="30px"/>Sistemas Integrales Roraima</a></p>
    </div>
    <!-- end #footer -->
  </body>
</html>

and this is my css:

body {
    margin: 0;
    padding: 0;
    /*
    background: #F7F7F7 url(../images/img01.jpg) repeat left top;
    font-family: Georgia, "Times New Roman", Times, serif;
    */
    font-family: Verdana, Arial, Helvetica, sans-serif;c
    font-size: 14px;
    /*color: #5A554E;*/
}

div {
    display: block;
}

h1, h2, h3 {
    margin: 0;
    padding: 0;
    font-weight: normal;
    /*color: #32639A;*/
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1 {
    font-size:  2.4em;
    font-weight: 600;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.6em;
}

p, ul, ol {
    margin-top: 0;
    /*line-height: 200%;*/
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

ul, ol {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

a {
    text-decoration: underline;
    color: #516C00;
}

a:hover {
    text-decoration: none;
}

#wrapper {
    margin: 0px;
    padding: 0px;
    /*background: url(../images/img02.jpg) repeat-x left top;*/
}

/* Header */

#header-menu {
    width: auto;
    height: 50px;
    padding: 0px;
    display: block;
    /*background: url(../images/usb.jpg);*/
}

#barleft {
    float:left;
    top: 0px;
    left: 0px;
}

#header-content {
    margin: 0px 30px 0px 0px;
    /*padding: 0px 30px 0px 30px;*/
    position: relative;
    left: 30px;
    right: 30px;
    height:50px;
    background-color: black;
}

#header-content #search {
    width:auto;
    height:auto;
}

#header-content #menu {
   position: relative;
   right:30px;
   top: 0px;
}

#header-content ul {
    height: 50px;
    width: auto;
/*    line-height: 100%;*/
    float: right;
    clear:none;
}

#barright {
    float:right;
    top: 0px;
    right: 0px;
}

/* Logo */

#logo {
    width: 250px;
    height: 50px;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    color: #000000;
    float:left;
}


/* Menu */

#menu {
    width: auto;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    display: block;    
    /*background: url(../images/inter-top-body.png) repeat left top;*/
}

#menu li {
    display: inline;
}

#menu a:hover, #menu .current_page_item a {
    text-decoration: none;
}

#menu .current_page_item a {
    background: url(../images/img06.jpg) no-repeat left top;
    padding-left: 0;
    color: #493E2B;
}

/* Page */

#page {
    width: 1024px;
    padding: 0px 0px 0px 0px;
    background: #FFFFFF;
    display: inline-block;
}

/* Content */

#content {
    width: 736px;
    padding: 0px 0px 0px 0px;
    display: block;
}


/* Sidebar */

#left-sidebar {
    float: left;
    width: 256px;
    padding: 0px;
    color: #787878;
    display: block;
}

#right-sidebar {
    float: right;
    width: 256px;
    padding: 0px;
    color: #787878;
    display: block;
}

/* Footer */

#footer {
    clear: both;
    width: 1024px;
    height: 50px;
    margin: 0 auto;
    padding: 0px 0px 0px 0px;
    background: url(../images/img15.jpg) no-repeat left top;
    font-size: 12px;
    color: #887450;
    height: 50px;
    margin: 0 auto;
    padding: 0px 0 15px 0;
    font-family: Arial, Helvetica, sans-serif;
}

#footer p {
    text-align:center;
}

the thing is, my header-menu bar doesnt align with images i put at both extremes to eliminate corners... the same seems to happen with the "page" section. Left-sidebar, content and right-sidebar are not at the same level as i thought i was doing. heres the screenshot:

screenshot

Notice the little black piece at the right that sould be inline with the black bar, and the black bar should end 30px before the left top, so that little piece can fit in there. Something simmilar seems to be happening with the page section...

Im pretty lost because im just learning css... hope you can help me

thanks!

Upvotes: 0

Views: 327

Answers (2)

Johan Olsson
Johan Olsson

Reputation: 618

You can fix your main layout by doing this, its not best practise but it works;

#page {
    width: 1024px;
    padding: 0px 0px 0px 0px;
    background: #FFFFFF;
    display: inline-block;
}
#page #content, #page #right-sidebar{
    vertical-align: top
}
/* Content */

#content {

    padding: 0px 0px 0px 0px;
    display: table-cell; //this will give the element some propetys that that make them wanna share horizontal space ( must have a parent with "display: table;" to work )
}


/* Sidebar */

#left-sidebar {
    float: left;
    width: 256px;
    padding: 0px;
    color: #787878;
    display: block;
}

#right-sidebar {
    width: 256px;
    padding: 0px;
    color: #787878;
    display: table-cell;
}

I also moved your left-sidebar inside of your content ( while keeping all css attrebutes )

<div id="content">
<div id="left-sidebar">
  <div id="actions">
    <h3>
      Acciones
    </h3>
    <ul>
      <li>accion1</li>
      <li>accion2</li>
      <li>accion3</li>
      <li>accion4</li>
    </ul>
  </div>
  <div id="news">
    <h3>
      Noticias
    </h3>
    <ul>
      <li>Noticia1</li>
      <li>Noticia2</li>
      <li>Noticia3</li>
      <li>Noticia4</li>
    </ul>
  </div>
</div>
  <h1>
    Este es el titulo el content
  </h1>
  <h3>
    Este es el subtítulo del content
  </h3>
  <p>
    Esto es lo que debe ir escrito en el content<br/>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.
  </p>
</div>

Now, about the header.. you can ether use css3 by adding: (this method is supported by all major browsers) except ie

#header-menu {
-webkit-border-bottom-left-radius: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-left-radius: 25px;

-webkit-border-bottom-right-radius: 25px;
-moz-border-radius-bottomright: 25px;
border-bottom-right-radius: 25px;
}

or you can use som background pos. not really sure what brwser that dont support this, but dont think any ie do (not sure thoe)

background: no-repeat url(../images/barleft.png) left bottom;
background: no-repeat url(../images/barright.png) right bottom;

or you can have layout like this:

<div id="header"><span id="left"></span> your menu <span id="right"></span></div>

width style:

#header{
height: (wished height)
}
#right{
background: no-repeat url(../images/barleft.png) left bottom;
width: (your image width)
}
#left{
background: no-repeat url(../images/barright.png) right bottom;
width: (your image width)
}

Upvotes: 1

a-second-mix
a-second-mix

Reputation: 372

I would have bar-left and bar-right images set as background images in your css rather than in your html.

So replace your images like below:

<div id="header-menu">

<div id="left-corner"></div>

/* YOUR CONTENT HERE */

<div id="left-corner"></div>

</div><!-- end #header-menu -->

Then your css:

#header-menu {
position:relative;
}
#left-corner {
background: url(example-image.jpg) bottom left no-repeat;
position:absolute;
bottom:0;
left:0;
width:30px;
}
#right-corner {
background: url(example-image.jpg) bottom right no-repeat;
position:absolute;
bottom:0;
right:0;
width:30px;
}

Upvotes: 1

Related Questions