0

Hi Guys,

Sorry for silly question. I have just started my adventure with html and css. I am trying to create website but I have some problems with text margin. Im not sure where to fix it. Have a look on the picture attached. I want move text 10px to the right . I was trying with margin left and right in body but haven't worked out. I was thinking to add extra div and place in text in there or something.

Here you have index.html file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="studiokreatywne.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="check_menu.css" rel="stylesheet" type="text/css" />
</head>



<body>
<div id="container">
  <div id="banner"><img src="images/banner.jpg" width="968" height="100" />
    <ul id="Menu_studio" class="MenuBarHorizontal">
      <li><a href="firma.html">O Firmie</a>      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Oferta</a>
        <ul>
          <li><a href="muzyka.html">Muzyka</a></li>
          <li><a href="fotografia.html">Fotografia</a></li>
          <li><a href="nauczanie.html">Nauczanie</a></li>
          <li><a href="inne.html">Inne</a></li>
        </ul>
      </li>
      <li><a href="wydarzenia.html">Wydarzenia</a>      </li>
      <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </div>
  <div id="main_image"></div>
  <div id="left_column"><img src="images/main_muzyka.jpg" width="316" height="130" /></div>
  <div id="center_column"><img src="images/main2_fotografia.jpg" width="316" height="130" /></div>
  <div id="right_column"><img src="images/main3_nauczanie.jpg" width="316" height="130" /></div>
</div>
<label for="opis"></label>
<p>Studio Kreatywne - młody, prężny team ludzi z masą pomysłów na zrealizowanie Waszych zamówień! Dla nas nie ma rzeczy niemożliwych!</p>
<p>Specjalizujemy się między innymi w szeroko pojętej fotografii kreatywnej, reklamowej, imprezowej, koncertowej, dokumentalnej.</p>
<p>Masz stronę www i nie wiesz, co dalej? Skomponujemy muzyczną oprawę, by strona zaczęła żyć nowym życiem :) Musisz oddać pilny projekt reklamowy, a jesteś w polu z pomysłem?  My się tym zajmiemy za Ciebie.</p>
<p>Potrzebujesz dotrzeć ze swoim produktem do masy odbiorców? Pozwól, że zrobimy to z przyjemnością wykorzystując znane nam metody.</p>
<p>Od pomysłu do gotowej realizacji - wszystko będzie jak w zegarku szwajcarskim, bo zależy nam na Twoim zadowoleniu.</p>
<p>Jesteśmy w stanie utworzyć dla Ciebie masę ciekawych rozwiązań i jeszcze się tym zaopiekować, byś nie musiał spęd zać sobie snu z powiek.</p>
<p>Wykonujemy również tłumaczenia z języka angielskiego, nauczymy Twoje dziecko grać na instrumencie klawiszowym, komponować, projektujemy biżuterię hand-made.</p>
<p>Nasze motto: Rzeczy niemożliwe wykonujemy od razu - na cuda będzie trzeba poczekać :)</p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("Menu_studio", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

Here is css file for index.html

@charset "UTF-8";
/* CSS Document */

#container {
	width: 968px;
	background: #FFF;
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
	overflow:visible;
}

#banner {
	position: relative;
}
#Menu_studio {
	position: absolute;
	/* [disabled]top: 50px; */
	right: 0px;
	bottom: -1px;
	height: 23px;
}

#main_image {
	background-image: url(images/main_gotowe.jpg);
	background-repeat: no-repeat;
	position: relative;
	height: 376px;
	width: 968px;
	
}

#left_column, #center_column, #right_column {
	width: 316px;
	float: left;
	margin-top: 10px;
}
#center_column, #right_column { margin-left: 10px; }


body {
	font-family: Avalon, sans-serif, serif;
	background-color: #000;
	color: #FFF;
	text-align: left;
	width: 968px;
	font-size: 16px;
	line-height: normal;
	word-spacing: normal;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
}
#studio_menu {
	position: absolute;
	/* [disabled]top: 50px; */
	right: 0px;
	bottom: 0px;
}

There is also extra css for menu bar attached. There is no point to show you this one.

Can you give me advice where I should look for, please ?

Edited by bombay1982: picture not attached

Attachments daniweb.jpg 52.79 KB
2
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by bombay1982
0

The least you can do is add padding to your p tags

p{padding:0 10px;}

But I would recommend adding a div that can hold all the elements in the content section and add padding to it. By this way you don't have to give padding to all the elements.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.