[css] ustawienie tekstu w div

0

Witam serdecznie,

mam mały problem, ustawiłam wypisywania danych w div

#Content

, ale tekst mi się wyświetla na środku. Ja bym chciała, aby znalazł się w tym div, ale nie wyśrodkowany jak teraz tylko trochę z lewej strony.
Próbowałam za pomocą marginesów, ale tekst mi przechodził na dół pod kategoriami. Do przycisków zdjęciowych dodałam
align="left", ale nie pomogło.
Kod CSS wygląda następująco:

body {
     margin-left: 220px;
}
a {
    text-decoration:none;
}
img {
    border:  none;
}

#All {
    font-size: 30px;
    width: 1200px;
    overflow: hidden;
    border-style: groove ridge inset outset;
}
ul, ul li {
    list-style-type: none;
}

#Top {
}

#LeftMenu {
    width: 49%;
    float: left;
	overflow: hidden;
}
#CenterMenu {
    clear: both;
}
@font-face {
	font-family: Bickham;
	src: url(fonts/BickhamScriptPro-Bold.otf);
}

#Content, td {
    width: 50%;
    float: left;
	font-family:Bickham;
	font-size:70px;
	line-height: 70px;
	 
}

Kod index.php z kolei tak:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" charset=UTF-8/>
    </head>

    <body>
        <div id="All">
            <div id="Top">
                <ul>
                    <li>   /* tu są 2 zdjęcia */ </li>
                </ul>
            </div>
            <div id="CenterMenu">
                <ul>

                    <li> <a href="index.php?menu=0"> <img src="zdjecia/Start.png" alt="Start" />  </a>
                     <a href="index.php?menu=1"> <img src="zdjecia/Doswiadczenie.png" alt="Doświadczenie" /> </a>
                     <a href="index.php?menu=2"> <img src="zdjecia/Kontakt.png" alt="Kontakt" /> </a>
                    </li>
                </ul>
            </div>
            <div id="LeftMenu">
                <ul>

                    <li>  <a href="index.php?menu=3"><img src="zdjecia/PC.jpg" alt="Prawo cywilne" /> </a> </li>
                    <li>  <a href="index.php?menu=4"><img src="zdjecia/PS.jpg" alt="Prawo spółdzielcze" /> </a> </li>
                    <li>  <a href="index.php?menu=5"><img src="zdjecia/PR.jpg" alt="Prawo rodzinne" /> </a> </li>
                    <li>  <a href="index.php?menu=6"><img src="zdjecia/PH.jpg" alt="Prawo handlowe" /> </a> </li>
                    <li>  <a href="index.php?menu=7"><img src="zdjecia/PP.jpg" alt="Prawo pracy" /> </a> </li>
                    <li>  <a href="index.php?menu=8"><img src="zdjecia/L.jpg" alt="Linki" /> </a> </li>
                </ul>
            </div>
            <div id="Content">
			   
 <?
                $_SESSION["menu"] = $_GET["menu"];
                switch ($_SESSION["menu"]) {
                    case '0': {
                            echo "  Start. <br/> Strona w budowie. ";
                        }
                        break;
                    case '1': {
                            echo "   Doświadczenie. <br/> Strona  w budowie. ";
                        } break;
                    case '2': {
                            echo "   Kontakt. <br/> Strona  w budowie. ";
                        } break;
                } ?>
            </div>
        </div>
    </body>

</html>

zdjęcie strony jest w załączniku

Prosiłabym uprzejmie o pomoc. Jak ustawić położenie tekstu w

aby nie było wyśrodkowane , tylko z lewej strony przesunięte?</p>
0

Nie wiem czy o to Ci chodzi, ale położenie tego diva content jest zależne od szerokości diva #LeftMenu - zmień i zobacz, tam masz 49%, przez co wszystko idzie ostro na prawo. Ten div jest odpowiedzialny za menu robione na obrazkach, więc może być ustawiony na sztywno. Np. 320px - sprawdź. Usuń z #Content width: 50%;, prawdopodobnie nic się nie stanie jak usuniesz float:left;, ale sprawdź.

BTW: Użyj firefoxa i rozszerzenia WebDeveloper, będziesz mogła podświetlać każdy div i zobaczyć ile naprawdę miejsca zajmuje każdy element. Firefox + WebDeveloper ma masę ciekawych rzeczy, jedną z nich jest np. edycja css-a w locie - od razu widzisz zmiany - to się bardzo przydaje - pozwala czasem na zabawę z css-em metodą prób i błędów - to czasem jest najlepsze wyjście.

Małe pytanie: po jaką ch...ę dajesz body{margin-left: 220px ? Podejrzewam, że u Ciebie w ten sposób będzie strona wyśrodkowana, na mniejszym ekranie, gdzie ta strona spokojnie by się zmieściłą jest przesunięta w prawo. Lepiej wyśrodkować to. Daj sobie w body zamiast tego marginesu text-align: center; a w divie #All daj margin: 0 auto 0 auto;

Możliwe, że będziesz musiała coś dopasować na stronce po tych zmianach.

Skoro już tu jestem, to:

nie rób tak menu, img jest świetne do wstawiania zdjęć na stronę, ale nie do menu czy też innych elementów stanowiących ozdobę strony. Użyj do tego css-a - ściągnij sobie np. programik http://www.highdots.com/products/css-tab-designer/ i podejrzyj kod jaki generuje.

Nie przesadź z wsadzaniem wszędzie "ładnej" czcionki. Stara strona jest prosta, ale czytelna, nowa może być ładna, ale niekoniecznie będzie czytelna.

0

DZIĘKUJE SERDECZNIE, działa :)

z wszystkich wskazówek skorzystam, zainstalowałam sobie ten program CSS Tab Designer 2. Ja również korzystam z Firebug. Kon Css przedstawia się następująco, może komuś się przyda:

body {
   /*  margin-left: 220px;*/
	 text-align: center;
}
a {
    text-decoration:none;
}
img {
    border:  none;
}

#All {margin: 0 auto 0 auto;
    font-size: 30px;
    width: 1200px;
    overflow: hidden;
    border-style: groove ridge inset outset;
}
ul, ul li {
    list-style-type: none;
}

#Top {
}

#LeftMenu {
    float: left;
	overflow: hidden;
}
#CenterMenu {
    clear: both;
}
@font-face {
	font-family: Bickham;
	src: url(fonts/BickhamScriptPro-Bold.otf);
}

#Content, td {

    float: left;
	font-family:Bickham;
	font-size:70px;
	line-height: 70px;
	 
}
0

selector td mam w kodzie, tylko go wykasowałam. Ze względu na to, że nadmiar kodu może odstraszyć innych, aby mi dali wskazówki :)

poprawiłam błąd ortograficzny, PRZEPRASZAM nie zauważyłam

1 użytkowników online, w tym zalogowanych: 0, gości: 1