Levá lišta pro web

Rosty94 · October 11, 2010

Dobrý den,

dělám, nebo lépe hraju si s webem pro wow server, mám vcelku jasno v rozvržení stránky, vrchní část s logem a názvem mám tak nějak hotovou, ale teď bych potřeboval poradit ohledně levé lišty a hlavní části (obsahu) webu.

Pro představivost, přikládám kód.

<!DOCTYPE HTML>
<html lang="cs">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
 <meta name="description" content=""/>
 <title>WoW Server</title>
 <link rel="shortcut icon" href="favicon.ico"/>
 <style type="text/css">
  @font-face {font-family:Morpheus; src:url(fonts/morpheus.ttf);}
  @font-face {font-family:Folkard; src:url(fonts/folkard.ttf);}
  #container{width:800px; height:1000px; text-align:center; margin:auto;}
  #header{position:relative; width:100%; height:507px; font-family:Folkard; font-size:60px; color:#FFD700; background-image:url('images/logo.png');}
  #left{position:relative; float:left; top:5%; width:150px; height:75%; background-color:Red;}
  #main{position:relative; float:left; top:1%; left:3px; width:630px; height:100%; text-align:left; background-color:Lime; padding:10px;}
 </style>
</head>
<body bgcolor="black">
<div id="container">
 <div id="header">
  <span style="position:absolute; top:79%; left:0%">
   <marquee behavior="scroll" scrolldelay=20>
    World of Warcraft server.
   </marquee>
  </span>
 </div>
 <div id="left">
   Test levého panelu
 </div>
 <div id="main">
  Test hlavního okna
 </div>
</div>
</body>
</html>

Potřeboval bych nějakej obrázek lišty (klidně z nějakého webu), někde jsem viděl rámeček a na vršku byl drak jako u elitních npc a název rámečku (použitý font).

Dále bych potřeboval poradit ohledně hlavní části webu (tou s obsahem.) Vůbec nemám představu jak to napsat, udělat to jako každou stránkou jednotlivě (ten kód výše a obsah, takhle několikrát), nebo jestli to jde udělat tak, aby se načetl soubor s obsahem té hlavní části, to by se mi zamlouvalo nejvíce - méně práce pro mě.

Děkuji za odpovědi

PS: Jsem začátečník, takže polopaté vysvětlení ještě více zpolopatět

ondik55 · October 11, 2010

Já to řeším tabulkama

<!-------header------>
<center><img src="nejakej_obrazek.png"></center>
<!-------menu------>
<table align="left">
<td>
Menu
</td>
<!-------hlavní strana------>
<table align="center">
<td>
hlavní strana
</td>
<!-------footer------>
Footer

sice ne tak jednoduse pak pridavam velikosti, pozadi tabulek, atp. a pak to může vypadat takhle (nebrat jako reklamu)

http://theoldlegends.wz.cz/

a jeste to delam tak ze veci ktere se opakují na kazdé stránce jako menu vkladam pomocí PHP pres include

Edited October 11, 2010 by ondik55

Hkarta · October 11, 2010

Ondik: tak to jsi pěkné prase (tabulky) - jinak, pokud tak nutně potřebuješ používat tabulky, už jsi slyšel o tom, že kromě <td> existuje i <tr>?

Pro autora tématu:

Tady jsem splácal jednoduchý layout stránky, obrázky jaksi nesedí, nechtělo se mi je dělat, tak jsem na netu našel pár co se mi hodilo pro ukázku. Kód je tady:

<!DOCTYPE HTML>
<html lang="cs">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
 <meta name="description" content=""/>
 <title>WoW Server</title>
 <link rel="shortcut icon" href="favicon.ico"/>
 <style type="text/css">
body      	{
             	margin: 0px;
             	background-image: url(http://www.worldofwarcraft.com/wrath/images/layout/page_background.jpg);
             	background-color: #03080e;
             	background-position: center;
             	}
#page 		{
             	width: 980px;
             	}
#page #header {
             	height: 200px;
             	background-color: red;
             	}
#page #right  {
             	width: 600px;
             	float: left;
             	overflow: hidden;
             	}
#page #right .entry_wrap {
             	background-image: url(http://wow.herniweb.cz/pic/design/stred_okraj_obsah.gif);
             	color: black;
             	font-family: Arial;
             	font-size: 12px;
             	margin-bottom: 10px;
             	}
#page #right .entry_wrap .top {
             	background-image: url(http://wow.herniweb.cz/pic/design/horni_okraj_obsah.gif);
             	height: 35px;
             	}
#page #right .entry_wrap .content {
             	width: 550px;
             	text-align: justify;
             	}
#page #right .entry_wrap .bottom {
             	background-image: url(http://wow.herniweb.cz/pic/design/spodek_okraj_obsah.gif);
             	height: 35px;
             	}
#page #left  {
             	width: 380px;
             	float: left;
             	overflow: hidden;
             	}
#page #left .menu_wrap {
             	background-image: url(http://www.worldofwarcraft.com/wrath/images/layout/frontpage_news_bgm.jpg);
             	margin-bottom: 10px;
             	}
#page #left .menu_wrap .top {
             	background-image: url(http://www.worldofwarcraft.com/wrath/images/layout/frontpage_news_bgt.jpg);
             	height: 80px;
             	background-position: bottom;
             	}
#page #left .menu_wrap .content {
             	width: 300px;
             	color: white;
             	text-align: left;
             	}       		
#page #left .menu_wrap .bottom {
             	background-image: url(http://www.worldofwarcraft.com/wrath/images/layout/frontpage_news_bgb.jpg);
             	height: 450px;
             	}
.clear    	{
             	clear: left;
             	}
#page #footer {
             	height: 30px;
             	overflow: hidden;
             	line-height: 30px;
             	text-align: center;
             	background-color: red;
             	}   
 </style>
</head>
<body>
 <center>
<div id="page">
 	<div id="header">
 	</div>
 	<div id="content_wrap">
   	<div id="left">

     	<div class="menu_wrap">
       	<div class="top"></div>
       	<div class="content">
         	Lorem ipsum dolor sit amet <br>
         	Consectetuer eu Curabitur malesuada quis <br>
         	Eu orci adipiscing urna Integer <br>
         	Amet orci convallis sagittis ante <br>
         	In ornare Quisque purus pede <br>
         	Fringilla convallis laoreet mattis sed <br>
         	In dolor Phasellus In et <br>
         	Phasellus ipsum tellus facilisi enim <br>
         	Lorem Curabitur porttitor et convallis <br>
         	Ante amet pede pellentesque Vivamus <br>
       	</div>
       	<div class="bottom">
       	</div>
     	</div>

     	<div class="menu_wrap">
       	<div class="top"></div>
       	<div class="content">
         	Lorem ipsum dolor sit amet <br>
         	Consectetuer eu Curabitur malesuada quis <br>
         	Eu orci adipiscing urna Integer <br>
         	Amet orci convallis sagittis ante <br>
         	In ornare Quisque purus pede <br>
         	Fringilla convallis laoreet mattis sed <br>
         	In dolor Phasellus In et <br>
         	Phasellus ipsum tellus facilisi enim <br>
         	Lorem Curabitur porttitor et convallis <br>
         	Ante amet pede pellentesque Vivamus <br>
       	</div>
       	<div class="bottom">
       	</div>
     	</div>

   	</div>

   	<div id="right">

     	<div class="entry_wrap">
       	<div class="top"></div>
       	<div class="content">
         	<p>Lorem ipsum dolor sit amet consectetuer laoreet Cras id fames In. Nisl tincidunt Aenean Lorem Nullam Nam sollicitudin semper porttitor Vivamus mattis. Semper pellentesque sagittis amet et tortor consequat Phasellus mauris enim mauris. Ridiculus platea Vivamus interdum.</p>
         	<p>Sed Nunc fames vitae pretium tellus fames ac arcu Nam Nam. Sagittis et elit sed tempor justo magna id congue mus hendrerit. Sed dui In pharetra iaculis sem dui convallis dolor nunc Cras. Nibh massa id et at dui pretium convallis justo.</p>
         	<p>Elit Phasellus et tempor eros Suspendisse ac massa Quisque id wisi. Fusce sagittis auctor condimentum lorem Aenean a ac massa fames convallis. Nulla Lorem amet parturient ante egestas augue interdum sapien at sit. Sed non hendrerit libero nisl velit ligula Nam lacinia sed nisl. Nascetur.</p>
         	<p>Vel mauris ipsum mattis dui tellus augue ut montes non condimentum. Augue non Praesent Curabitur magna in tempor mi turpis euismod eget. Justo ante montes risus amet vitae aliquet facilisi eleifend Lorem nec. Sed et Aliquam vitae leo Aenean id tellus ut Suspendisse tortor. </p>        	
       	</div>
       	<div class="bottom">
       	</div>
     	</div>

     	<div class="entry_wrap">
       	<div class="top"></div>
       	<div class="content">
         	<p>Lorem ipsum dolor sit amet consectetuer laoreet Cras id fames In. Nisl tincidunt Aenean Lorem Nullam Nam sollicitudin semper porttitor Vivamus mattis. Semper pellentesque sagittis amet et tortor consequat Phasellus mauris enim mauris. Ridiculus platea Vivamus interdum.</p>
         	<p>Sed Nunc fames vitae pretium tellus fames ac arcu Nam Nam. Sagittis et elit sed tempor justo magna id congue mus hendrerit. Sed dui In pharetra iaculis sem dui convallis dolor nunc Cras. Nibh massa id et at dui pretium convallis justo.</p>
         	<p>Elit Phasellus et tempor eros Suspendisse ac massa Quisque id wisi. Fusce sagittis auctor condimentum lorem Aenean a ac massa fames convallis. Nulla Lorem amet parturient ante egestas augue interdum sapien at sit. Sed non hendrerit libero nisl velit ligula Nam lacinia sed nisl. Nascetur.</p>
         	<p>Vel mauris ipsum mattis dui tellus augue ut montes non condimentum. Augue non Praesent Curabitur magna in tempor mi turpis euismod eget. Justo ante montes risus amet vitae aliquet facilisi eleifend Lorem nec. Sed et Aliquam vitae leo Aenean id tellus ut Suspendisse tortor. </p>        	
       	</div>
       	<div class="bottom">
       	</div>
     	</div>

   	</div>
   	<br class="clear">  
 	</div>
 	<div id="footer">
   	patička
 	</div>
</div>
 </center> 
</body>
</html>

Jinak pro tvé účely bude nejjednoduší vkládat stránky (resp jejich obsah) jako php. K tomu aby se ti to s php správně zobrazilo musíš udělat několik věcí:

změnit koncovku všech stránek z .html na .php
nahrát to na webserver (buď apache na lokálu, nebo prostě na nějakej hosting, např ic.cz)

Tak, teď co je potřeba udělat. Vytvoř si ve složce s webem složku pages

Výše postnutý kód stránky uprav takto:

...
	</div>
       	<div class="bottom">
       	</div>
     	</div>

   	</div>

   	<div id="right">
       	<?php if (isset($_REQUEST['page'])) include "pages/".$_REQUEST['page'].".php"; else include "pages/main.php"; ?> 	
   	</div>
   	<br class="clear">  
 	</div>
 	<div id="footer">
   	patička
 	</div>
...

a ve složce pages vytvoř soubor main.php, do kterého napiš

<div class="entry_wrap">
       	<div class="top"></div>
       	<div class="content">
         	<p>Lorem ipsum dolor sit amet consectetuer laoreet Cras id fames In. Nisl tincidunt Aenean Lorem Nullam Nam sollicitudin semper porttitor Vivamus mattis. Semper pellentesque sagittis amet et tortor consequat Phasellus mauris enim mauris. Ridiculus platea Vivamus interdum.</p>
         	<p>Sed Nunc fames vitae pretium tellus fames ac arcu Nam Nam. Sagittis et elit sed tempor justo magna id congue mus hendrerit. Sed dui In pharetra iaculis sem dui convallis dolor nunc Cras. Nibh massa id et at dui pretium convallis justo.</p>
         	<p>Elit Phasellus et tempor eros Suspendisse ac massa Quisque id wisi. Fusce sagittis auctor condimentum lorem Aenean a ac massa fames convallis. Nulla Lorem amet parturient ante egestas augue interdum sapien at sit. Sed non hendrerit libero nisl velit ligula Nam lacinia sed nisl. Nascetur.</p>
         	<p>Vel mauris ipsum mattis dui tellus augue ut montes non condimentum. Augue non Praesent Curabitur magna in tempor mi turpis euismod eget. Justo ante montes risus amet vitae aliquet facilisi eleifend Lorem nec. Sed et Aliquam vitae leo Aenean id tellus ut Suspendisse tortor. </p>        	
       	</div>
       	<div class="bottom">
       	</div>
     	</div>

     	<div class="entry_wrap">
       	<div class="top"></div>
       	<div class="content">
         	<p>Lorem ipsum dolor sit amet consectetuer laoreet Cras id fames In. Nisl tincidunt Aenean Lorem Nullam Nam sollicitudin semper porttitor Vivamus mattis. Semper pellentesque sagittis amet et tortor consequat Phasellus mauris enim mauris. Ridiculus platea Vivamus interdum.</p>
         	<p>Sed Nunc fames vitae pretium tellus fames ac arcu Nam Nam. Sagittis et elit sed tempor justo magna id congue mus hendrerit. Sed dui In pharetra iaculis sem dui convallis dolor nunc Cras. Nibh massa id et at dui pretium convallis justo.</p>
         	<p>Elit Phasellus et tempor eros Suspendisse ac massa Quisque id wisi. Fusce sagittis auctor condimentum lorem Aenean a ac massa fames convallis. Nulla Lorem amet parturient ante egestas augue interdum sapien at sit. Sed non hendrerit libero nisl velit ligula Nam lacinia sed nisl. Nascetur.</p>
         	<p>Vel mauris ipsum mattis dui tellus augue ut montes non condimentum. Augue non Praesent Curabitur magna in tempor mi turpis euismod eget. Justo ante montes risus amet vitae aliquet facilisi eleifend Lorem nec. Sed et Aliquam vitae leo Aenean id tellus ut Suspendisse tortor. </p>        	
       	</div>
       	<div class="bottom">
       	</div>
     	</div>

(to co bylo původně v <div id="right"> před provedenou úpravou) - tak, tohle je teď defaultní stránka, která se zobrazí pokud zadáš http://tvojeadresa.cz/index.php (nebo jen http://tvojeadresa.cz/). Pokud chceš vytvořit další stránku, třeba pravidla, vytvoříš zase ve složce pages soubor, tentokrát pravidla.php, do něj vložíš to samé jako do main.php, jen přepíšeš texty (tzn obsah divu s třídou content - <div class="content">). Do index.php pak už jen do levého sloupce vložíš odkaz; který bude vypadat takhle:

<a href="?page=pravidla">Pravidla</a>

A to je celé - po kliknutí na odkaz se místo stránky pages/main.php do pravého sloupce načte stránka pages/pravidla.php. V zásadě jde o to u odkazu použít právě to ?page=jmeno_stranky_bez_tecka_php. Snad jsem to napsal dost polopaticky.

Edited October 11, 2010 by Hkarta

Wladass · October 12, 2010

Hkarta Práce dostačující, ale seš taky dobrý prasátko Vnořený css styly Hned je šoupni do externího csska ať to nevidím

Hkarta · October 12, 2010

Vnořený css styly jsou z jedinýho důvodu - nechtělo se mi postovat dva codeboxy. :-)

Edited October 12, 2010 by Hkarta

Rosty94 · October 12, 2010

Díky za snahu, ale chtěl jsem to mít udělané podle sebe, abych se potom v tom potom vyznal.

Ten php skript s tím tvým layoutem funguje, ale když se ho snažím nacpat na ty mé stránky, tak to vůbec nic nedělá.

Edit:

Už si fakt nevím rady, tady postuju css, index a main.php, vůbec nechápu proč to nefunguje, když to mám zřejmě dobře

CSS

body {
background-image:url('../img/bg.png');
background-position:center;
background-attachment:fixed;
background-color:black;}

#page {
width:800px;
height:1000px;
margin:auto;}

@font-face {font-family:Morpheus; src:url(../fonts/morpheus.ttf);}
@font-face {font-family:Folkard; src:url(../fonts/folkard.ttf);}

#page #header {
position:relative;
width:100%;
height:507px;
background-image:url('../img/logo.png');}

#page #header .text {
position:relative;
top: 79%;
font-family:Folkard;
font-size:60px;
color:#FFD700;}

#page #left {
position:relative;
width:195px;
height:auto;}

#page #left .top {
background-image:url('../img/railtop.png');
width:195px;
height:64px;}

#page #left .top .text {
position:relative;
top:60%;
font-family:Folkard;
font-size:18px;
color:#FFD700;
text-align:center;}

#page #left .content {
background-image:url('../img/railbg.png');
width:195px;}

#page #left .content .text {
font-family:Morpheus;
text-align:center;}

#page #left .bottom {
background-image:url('../img/railfoot.png');
width:195px;
height:33px;}

#page #right {
position:relative;
width:605px;
height:20%;
top:-120px;
left:195px;
background-color:black;}

#page #right .entry_wrap {
font-family:Arial;
font-size:18px;
color:white;
text-align:center;}

#page #footer {
position:relative;
width:800px;
height:auto;
top:10%;
left:0px;
background-color:black;}

#page #footer .text {
font-family:Morpheus;
text-align:center;
color:#FFD700;}

index.html

<!DOCTYPE HTML>
<html lang="cs">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
 <meta name="description" content="Free World of Warcraft pre-TBC server.">
 <title>pre-TBC WoW Server</title>
 <link rel="shortcut icon" href="img/favicon.ico"/>
 <link rel='stylesheet' href='css/main.css' type='text/css'>
</head>

<body>
<div id="page">
<div id="header">
 <div class="text">
  <marquee behavior="scroll" scrolldelay=20>
   Vitejte na World of Warcraft pre-TBC serveru. 
  </marquee>
 </div>
</div>

<div id="left">
 <div class="top">
  <div class="text">
   Menu
  </div
 </div>
 <div class="content">
  <div class="text">
   Domu
  </div>
 </div>
 <div class="bottom">
 </div>
</div>

<div id="right">
 <?php if (isset($_REQUEST['page'])) include "pages/".$_REQUEST['page'].".php"; else include "pages/main.php"; ?> 
</div>
<div id="footer">
 <div class="text">
  by Rosty
 </div>
</div>
</div>
</body>
</html>

Main.php

<div class="entry_wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean quis justo a elit faucibus gravida.
Donec sagittis, nisi et euismod molestie, erat erat sodales nibh, eu faucibus purus urna at odio.
Mauris lobortis tortor a nisi lacinia quis accumsan diam interdum.
Fusce quis arcu id nibh tristique gravida.
Mauris varius, sem et ultricies fringilla, mi nibh hendrerit arcu, nec tempor mauris nulla in diam.
Vestibulum ac urna eros, id elementum risus.
Duis condimentum tempor dictum. Suspendisse viverra, purus lacinia interdum convallis, lacus orci imperdiet lectus, eleifend sagittis quam urna vitae metus.
Proin sagittis enim nec massa faucibus sagittis.
Mauris consectetur risus vel nibh blandit at suscipit lectus tristique.
Integer id leo erat.
</div>

Edited October 14, 2010 by Rosty94

Hkarta · October 14, 2010

index.html = chyba. Pokud chceš aby ti na stránce fungovalo php, musíš (jak už jsem psal) udělat následující:

změnit koncovku všech stránek z .html na .php
nahrát to na webserver (buď apache na lokálu, nebo prostě na nějakej hosting, např ic.cz)

Jinak pozor na velikost písmen v názvu, viz ve scriptu máš main.php, ale soubor se jmenuje Main.php. Windowsáckej server ti to možná schroustá, ale linuxí host tě s tím pošle někam (vyhodí chybu že stránka neexistuje).

Edited October 14, 2010 by Hkarta

Rosty94 · October 15, 2010

Bylo to tím, dík.

Sign In

Announcements

Pravidlo pro postování v TTT

Seznam návodů a důležitých témat v této sekci

Příspěvky tam, kde nemají co dělat

Používání spoilerů

Levá lišta pro web

Recommended Posts

Rosty94 0

Share this post

Link to post

Share on other sites

ondik55 22

Share this post

Link to post

Share on other sites

Hkarta 584

Share this post

Link to post

Share on other sites

Wladass 1216

Share this post

Link to post

Share on other sites

Hkarta 584

Share this post

Link to post

Share on other sites

Rosty94 0

Share this post

Link to post

Share on other sites

Hkarta 584

Share this post

Link to post

Share on other sites

Rosty94 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

More