30-12-2012, 03:32
Mam problem z menu. Menu jest utworzone przy pomocy <ul><li>...
Chodzi mi o to, jak wyśrodkować tekst w pojedynczym prostokącie(linku) pionowo. vertical-align: middle, nie działa mi. Możecie mi coś poradzić? Mam zamiar jeszcze do pojedynczego linku wstawić plik graficzny o wielkości 74px, ale wysokość to sobie sam ustawię, i sam wstawię grafikę. Tylko właśnie problem z tym jak to wyśrodkować pionowo? Może próbuje umieścić vertical-align nie w tym miejscu co potrzeba, ale wątpię w to(pod text-align). Może wstawię kod źródłowy, index.php, arkusz.css, i menu.php.
index.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL" xml:lang="pl-PL">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="arkusz.css" />
<!--[if IE]>
<link rel="stylesheet" href="arkusz.css" />
<![endif]-->
</head>
<body>
<div id="naglowek"><?php include "naglowek.php"; ?></div>
<div>
<?php include "menu.php"; ?>
</div>
<div id="tresc" float="right" align="center">
<?php
// zmienna $go przekazana metoda GET
$go = $_GET['go'];
// sprawdzamy czy zmienna $go nie jest pusta
if(!empty($go))
{
// sprawdzamy czy plik o danej nazwie istnieje
if(is_file("$go.php")) include "$go.php";
// jezeli plik nie istnieje wyswietla się komunikat
else echo "Nie ma takiej strony.";
}
// jezeli zmienna $go jest pusta wyswietla się strona glowna
else include "start.php";
?>
</div>
</body>
</html>
arkusz.css
a.link{
color: #FF2400;
}
div#tresc{
margin: 50px 50px 50px 250px;
}
a.reklamy{
font-size: larger;
text-decoration: none;
}
a#mniejsze{
font-size: smaller;
text-decoration:none;
color: #FF2400;
}
div#naglowek{
text-align: center;
vertical-align: middle;
background-image: url('carbon005.jpg');
}
div#menu{
float: left;
width: 200px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
display: block;
margin: 0 0 2px 0;
}
#menu ul li a {
display: block;
margin: 0px;
padding: 0 20px 0 0;
font: bold 12px/25px Arial, sans-serif;
text-decoration: none;
height: 40px;
color: White;
text-align: right;
background: #6A5ACD;
}
#menu ul li a:hover {
text-decoration: none;
color: #D07300;
background: #F1D67A;
}
i plik menu.php
<link rel="stylesheet" href="arkusz.css" />
<!--[if IE]>
<link rel="stylesheet" href="arkusz.css" />
<![endif]-->
<div id="menu">
<ul>
<li><a href="index.php?go=link1">O firmie</a></li>
<li><a href="index.php?go=link2">Reklama na pojazdach</a></li>
<li><a href="index.php?go=link3">Banery reklamowe</a></li>
<li><a href="index.php?go=link4">Druk wielkoformatowy</a></li>
<li><a href="index.php?go=link5">Grafika podłogowa</a></li>
<li><a href="index.php?go=link6">Naklejki</a></li>
<li><a href="index.php?go=link7">Podkładki pod piwo</a></li>
<li><a href="index.php?go=link8">Druk offsetowy</a></li>
<li><a href="index.php?go=link9">Artykuły poligraficzne</a></li>
<li><a href="index.php?go=link10">Systemy wystawiennicze</a></li>
<li><a href="index.php?go=link11">Kontakt</a></li>
<li><a href="index.php?go=link12">Promocje & Cenniki</a></li>
</ul>
</div>
Chodzi mi o to, jak wyśrodkować tekst w pojedynczym prostokącie(linku) pionowo. vertical-align: middle, nie działa mi. Możecie mi coś poradzić? Mam zamiar jeszcze do pojedynczego linku wstawić plik graficzny o wielkości 74px, ale wysokość to sobie sam ustawię, i sam wstawię grafikę. Tylko właśnie problem z tym jak to wyśrodkować pionowo? Może próbuje umieścić vertical-align nie w tym miejscu co potrzeba, ale wątpię w to(pod text-align). Może wstawię kod źródłowy, index.php, arkusz.css, i menu.php.
index.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL" xml:lang="pl-PL">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="arkusz.css" />
<!--[if IE]>
<link rel="stylesheet" href="arkusz.css" />
<![endif]-->
</head>
<body>
<div id="naglowek"><?php include "naglowek.php"; ?></div>
<div>
<?php include "menu.php"; ?>
</div>
<div id="tresc" float="right" align="center">
<?php
// zmienna $go przekazana metoda GET
$go = $_GET['go'];
// sprawdzamy czy zmienna $go nie jest pusta
if(!empty($go))
{
// sprawdzamy czy plik o danej nazwie istnieje
if(is_file("$go.php")) include "$go.php";
// jezeli plik nie istnieje wyswietla się komunikat
else echo "Nie ma takiej strony.";
}
// jezeli zmienna $go jest pusta wyswietla się strona glowna
else include "start.php";
?>
</div>
</body>
</html>
arkusz.css
a.link{
color: #FF2400;
}
div#tresc{
margin: 50px 50px 50px 250px;
}
a.reklamy{
font-size: larger;
text-decoration: none;
}
a#mniejsze{
font-size: smaller;
text-decoration:none;
color: #FF2400;
}
div#naglowek{
text-align: center;
vertical-align: middle;
background-image: url('carbon005.jpg');
}
div#menu{
float: left;
width: 200px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
display: block;
margin: 0 0 2px 0;
}
#menu ul li a {
display: block;
margin: 0px;
padding: 0 20px 0 0;
font: bold 12px/25px Arial, sans-serif;
text-decoration: none;
height: 40px;
color: White;
text-align: right;
background: #6A5ACD;
}
#menu ul li a:hover {
text-decoration: none;
color: #D07300;
background: #F1D67A;
}
i plik menu.php
<link rel="stylesheet" href="arkusz.css" />
<!--[if IE]>
<link rel="stylesheet" href="arkusz.css" />
<![endif]-->
<div id="menu">
<ul>
<li><a href="index.php?go=link1">O firmie</a></li>
<li><a href="index.php?go=link2">Reklama na pojazdach</a></li>
<li><a href="index.php?go=link3">Banery reklamowe</a></li>
<li><a href="index.php?go=link4">Druk wielkoformatowy</a></li>
<li><a href="index.php?go=link5">Grafika podłogowa</a></li>
<li><a href="index.php?go=link6">Naklejki</a></li>
<li><a href="index.php?go=link7">Podkładki pod piwo</a></li>
<li><a href="index.php?go=link8">Druk offsetowy</a></li>
<li><a href="index.php?go=link9">Artykuły poligraficzne</a></li>
<li><a href="index.php?go=link10">Systemy wystawiennicze</a></li>
<li><a href="index.php?go=link11">Kontakt</a></li>
<li><a href="index.php?go=link12">Promocje & Cenniki</a></li>
</ul>
</div>
Mówisz że chcesz wstawić w ten link jeszcze obrazek. To właśnie centruj względem niego, bo jest wyższy.
