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 ?