Autor Zpráva
žofi
Profil *
#1 · Zasláno: 1. 4. 2009, 08:52:32
Odpovědět Citovat
Ahoj, snažím se vytvořit jednoduchý web, bohužel hned na začátku jse mi vyskytli problémy. Nevím jak správně napozicovat obrázky na pozadí, logo, menu, tak aby byli zarovnány do jednoho bloku. Viz Odkaz

Jinak html kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<link rel="stylesheet" type="text/css" href="style.css">
<title>bla bla bla</title>
</head>



<body>
<div id="nastred">

<img src="ban/1.jpg" alt="1.jpg, 18 kB" title="1" border="0" height="100" width="775">


<div id="s">
<a href="index.php">
<span class=logo title="bla bla bla">
</span>
</a>

<!-- menu -->

<span class="menu">
<table>
<tr>
<td class="m1"></span></td>
</tr>
<tr>
<td class="m2"><a href="#"></a></span></td>
</tr>
<tr>
<td class="m3"><a href="#"></a></span></td>
</tr>
<tr>
<td class="m4"><a href="#" target="blank"></a></span></td>
</tr>
<tr>
<td class="m5"><a href="#"></a></span></td>
</tr>
<tr>
<td class="m6"><a href="#"></a></span></td>
</tr>
<tr>
<td class="m7"></span></td>
</tr>
</table>
</span>
</div>


<!-- tělo-->


<div id=stred>

wwww

</div>
</div>
</body>
</html>
žofi
Profil *
#2 · Zasláno: 1. 4. 2009, 08:53:16
Odpovědět Citovat
a css kod:


HTML { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px }

BODY { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 5px; MARGIN: 0px; PADDING-TOP: 5px; BORDER-RIGHT-WIDTH: 0px }

HTML { HEIGHT: 100% }

BODY { HEIGHT: 100% }

BODY { FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #000000; background-color: #ffffff; FONT-STYLE: normal; FONT-FAMILY: Trebuchet MS, Verdana, Tahoma, Arial CE, Helvetica, sans-serif; TEXT-ALIGN: center }

#nastred { width: 775px; /*šírka layoutu*/ text-align: left; /*zrušenie vycentrovania textu*/ margin: 0 auto; /*vycentrovanie v ostatných prehliadačoch*/ border: 1px solid #B75351; }

#s { float: left; width: 775px;height: 200px; }


.logo { background-image: url(ban/logo.jpg); width: 491px;height: 200px; cursor: hand; cursor: pointer; FLOAT: left; MARGIN: 0px 0px 0em; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none }


.menu {background-image: url(ban/menu1.jpg);height: 200px;width: 284px;text-decoration: none;FLOAT: right; }

.m1 { background-image: url(ban/menu1.jpg); HEIGHT: 12px; width: 284px; FLOAT: right;}

.m2 a {background-image: url(ban/uvod.jpg);width: 284px; height: 31px;FLOAT: right;}

.m2 a:hover { background-image: url(ban/diskografie.jpg); width: 284px; height: 31px;}

.m3 a {background-image: url(ban/uvod.jpg);width: 284px; height: 31px;}

.m3 a:hover { background-image: url(ban/diskografie.jpg); width: 284px; height: 31px;}

.m4 a {background-image: url(ban/uvod.jpg);width: 284px; height: 31px;}

.m4 a:hover { background-image: url(ban/diskografie.jpg); width: 284px; height: 31px;}

.m5 a {background-image: url(ban/uvod.jpg);width: 284px; height: 31px;}

.m5 a:hover { background-image: url(ban/diskografie.jpg); width: 284px; height: 31px;}

.m6 a {background-image: url(ban/uvod.jpg);width: 284px; height: 31px;}

.m6 a:hover { background-image: url(ban/diskografie.jpg); width: 284px; height: 31px;}

.m7 {background-image: url(ban/menu2.jpg);width: 284px; height: 33px;}



#stred { float: left; background-image: url(ban/stred.jpg); width: 775px;padding-bottom: 20px; background-color:#EFEFEF; }
baki
Profil
#3 · Zasláno: 1. 4. 2009, 13:05:10
Odpovědět Citovat
uz to,ze to menu mas v tabulce je odrazujici cist to vsechno dal :/, ale ja jsem se prekonal a cetl:
1) menu podle tabulek ... ee (ul, li)
2) class logo se ti nikdy neprovede, protoze nemas class="logo", ale mas class=logo
3) menu mas ulozeve jako span a mel by to byt div (span je radkovy a div blokovy)
4) nevim jestli ma smysl pokracovat ... zkus to proste predelat, precti si nejake stranky a tak. proste menu zalozeny na tabulkach

podle me zacnu uplne od znova ... vyhledej si na googlu 3sloupcovy layout a zkousej
žofi
Profil *
#4 · Zasláno: 2. 4. 2009, 14:15:47
Odpovědět Citovat
Tak sem si stím zkoušel hrát, ale vůbec mi to nejde.. Přitom vím, že řešení je jednuché. Můžete mi prosím někdo opravit kód, tak jak se to má správně udělat. Díky
Odkaz na původní zprávu Odkaz

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>bla bla bla</title>
</head>

<body>

<div id="nastred">

<img src="ban/1.jpg" alt="1.jpg, 18 kB" title="1" border="0" height="100" width="775">

<a href="index.php">
<span class="logo" title="bla bla bla"></span>
</a>

<!-- menu -->

<span class="menu">
<ul>
<li id="m1"></li>
<li id="m2"><a href="index.php"></a></li>
<li id="m3"><a href="index.php"></a></li>
<li id="m4"><a href="index.php"></a></li>
<li id="m5"><a href="index.php"></a></li>
<li id="m6">ggb</li>
<li id="m7"></li>
</ul>
</span>

<!-- tělo-->
<div id=stred>
wwww
</div>


</div>

</body>
</html>

//////////////////////////////////////////////////////////////////////////////////////////////////////

css,


HTML { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px }

BODY { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 5px; MARGIN: 0px; PADDING-TOP: 5px; BORDER-RIGHT-WIDTH: 0px }

HTML { HEIGHT: 100% ;}

BODY { HEIGHT: 100%; }

BODY { FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #000000; background-color: #ffffff; FONT-STYLE: normal; FONT-FAMILY: Trebuchet MS, Verdana, Tahoma, Arial CE, Helvetica, sans-serif; TEXT-ALIGN: center }

#nastred { background-color:#FFEFEF;width: 775px; /*šírka layoutu*/ text-align: left; /*zrušenie vycentrovania textu*/ margin: 0 auto; /*vycentrovanie v ostatných prehliadačoch*/ border: 1px solid #B75351; }

.logo { background-image: url(ban/logo.jpg); width: 491px;height: 200px; cursor: hand; cursor: pointer; FLOAT: left; MARGIN: 0px 0px 0em; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none }


.menu {background-image: url(ban/menu1.jpg);height: 200px;width: 284px;text-decoration: none;FLOAT: right; }

.m1 { background-image: url(ban/menu1.jpg); HEIGHT: 12px; width: 284px; FLOAT: right;}

.m2 a {background-image: url(ban/uvod.jpg);width: 284px; height: 31px;FLOAT: right;}

.m2 a:hover { background-image: url(ban/diskografie.jpg); width: 284px; height: 31px;}

.m3 a {background-image: url(ban/uvod.jpg);width: 284px; height: 31px;}

.m3 a:hover { background-image: url(ban/diskografie.jpg); width: 284px; height: 31px;}

.m4 a {background-image: url(ban/uvod.jpg);width: 284px; height: 31px;}

.m4 a:hover { background-image: url(ban/diskografie.jpg); width: 284px; height: 31px;}

.m5 a {background-image: url(ban/uvod.jpg);width: 284px; height: 31px;}

.m5 a:hover { background-image: url(ban/diskografie.jpg); width: 284px; height: 31px;}

.m6 a {background-image: url(ban/uvod.jpg);width: 284px; height: 31px;}

.m6 a:hover { background-image: url(ban/diskografie.jpg); width: 284px; height: 31px;}

.m7 {background-image: url(ban/menu2.jpg);width: 284px; height: 33px;}



#stred { float: left; background-image: url(ban/stred.jpg); width: 775px;padding-bottom: 20px; background-color:#EFEFEF; }
žofi
Profil *
#5 · Zasláno: 3. 4. 2009, 07:44:04
Odpovědět Citovat
nikdo mi nepomůže?
tiso
Profil
#6 · Zasláno: 3. 4. 2009, 10:04:36
Odpovědět Citovat
žofi - a odkiaľ máme vedieť ako chceš aby to vyzeralo?
Časová prodleva: 3 dny
žofi
Profil *
#7 · Zasláno: 6. 4. 2009, 08:54:01
Odpovědět Citovat
logo s menu by mělo být zarovnané do bloku a výsledek by měl vypadat jako zde: [img]www.blbost.borec.cz/bb.jpg[/img]

Budu rád, když mi tady někdo z Vás napíše kód, tak jak to má správně být. Děkuji
panther
Profil
#8 · Zasláno: 6. 4. 2009, 14:25:22 · Upravil/a: panther
Odpovědět Citovat
žofi
„Budu rád, když mi tady někdo z Vás napíše kód, tak jak to má správně být.“
psát se mi to nechce, ale zadat frázi „vertikální menu“ do googlu snad zvládáš, ne?

Třetí odkaz, který na tebe vykoukne, je vcelku použitelný.
žofi
Profil *
#9 · Zasláno: 7. 4. 2009, 08:20:54
Odpovědět Citovat
Menu jsem změnil, ale můj problém (alespoň si myslím) není v menu. Na stránce zde je vidět mezera mezi jednotlivými obrázky. Mezera ja mezi logem a menu. Nemohu přijít na to, proč se tak děje? Všechny bordery mám na hodnotu 0. Navíc v různých prohlížečích se stránka zobrazuje pokaždé jinak, podle daného prohlížeče.. Můžete mi poradit, jak odstraním mezery mezy obrázky?
žofi
Profil *
#10 · Zasláno: 8. 4. 2009, 07:50:45
Odpovědět Citovat
Prosím, poraďte mi, nevím si s tím rady..
žofi
Profil *
#11 · Zasláno: 9. 4. 2009, 07:44:25
Odpovědět Citovat
Opravdu mi nikdo neporadí
Časová prodleva: 15 let

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0