stred webu

sanyo151 · 2013-03-15 13:21:03

ahoj prosim o pomoc dělam si testovací sablonu všechno tam mam header,menu,bocni panel,foter

akorad mi nejde do CSS zapsat spravně stred uz si stím hraju druhej den a nevim jak ho tam dat prosim o pomoc odkaz na web http://mujpokus.8u.cz/ web bez systemu hosting endora budu rad za kazdou pomoc diky moc

Trade · 2013-03-15 15:16:57

Pokud myslíte ten text, který je zarovnaný vlevo nebo nějaký jiný, tak by mělo postačit

<p style="text-align: center">text</p>

sanyo151 · 2013-03-15 16:07:56

ne to nebylo ono uz jsem na to konecne po dvou dnech prisel sam .. jinak diky ze se s aspon ozval

kksmirice · 2013-03-15 16:28:28

Máte nevhodně nastylovanou stránku.
Zkuste si rozložit web například do struktury:

<div id="container">
	<div id="menu">
		...
	<div>

	<div id="main">
		...
	</div> 		
	
	<div id="footer">
		...
	</div>
</div>

Nejpodstatnější je container - obal celé stránky, který si usadíte na střed (margin: 0 auto;)

sanyo151 · 2013-03-15 16:36:31

tet malinko nechapu jak nevhodne? jakej kontajner?

kksmirice · 2013-03-15 16:46:40

Strukturu stránky nyní máte:

  <div id="pozadi"> 
  
  <div id="header"> 
 
  
    </div></div>

<div id="menu">
		<ul class="menu">

		</ul>
	</div>
	
	
 <div id="panelpr"> 

  </div>
  </div>

	
<div id="levy"> 
  </div>
  </div>


  <div id="novinky">

  </div>
  </div>

  <div id="foter"> 

  </div>

Jednak tam jsou zbytečné </div> které nejsou otevřeny a jednak musíte stylovat každý div vzhledem ke stránce, nikoliv k jednomu rámu (<div id="container"> nebo class)

sanyo151 napsal:

... uz jsem na to konecne po dvou dnech prisel sam ...

Díval jste se na výsledek jak se stránka zobrazuje? V Chrome a FireFox se na to nedá dívat, v IE nejsou zobrazeny barevné panely ...

sanyo151 · 2013-03-15 16:52:40

toto je moje prvni vlastni sablona a jeste to nemam uplne doladeny jak jsem sem psal tak jsem nevedel jak tam da ten bilej stred ale prisel jsem na to sam

kksmirice · 2013-03-15 17:05:25

No právě ty barevné pole nejsou v IE vidět.

Nejprve si rozvrhněte stránku a pak stylujte, jinak budete vše zase dělat od začátku.
Pokud vše obalíte do kontaineru, budete mít výhody v umisťování na stránce a dosáhnete stejného zobrazení při různých rozlišeních monitoru - bude vždy na stejném místě.
Pak pozicujete pouze vzhledem ke kontaineru a nikoliv ke stránce.

Zkuste si stáhnout jakoukoliv free šablonu webu třeba z těchto stránek. Podívejte se na tuto šablonu a udělejte si podle toho vlastní návrh.

Nemusíte nic zbytečně složitě vymýšlet, když je spousta zdrojů ke stažení.

Chyby na stránce podle validátoru.
Překřížené tagy, tomu se vyvarujte.
Neukončené tagy (<h1>text<h1> není správně!!! - <h1>text</h1> je správně)

sanyo151 · 2013-03-15 20:20:44

nevim jak to s kontajnerem sladit jsu stoho trochu vedle

kksmirice · 2013-03-15 20:41:22

Máte tam trochu zmatek. Prostudujte si základní HTML tagy a jejich použití.

Zkuste vložit do index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<meta name="sanyo151" content="PSPad editor, www.pspad.com">
		<link rel="stylesheet" href="style.css" type="text/css" />
		<title>testik</title>
	</head>
	<body>
		<div class="container">
			<div id="pozadi">
			</div>
  
			<div id="header"> 
 
  			</div>
			<div id="menu">
				<ul class="menu">
					<li><a href="#" class="parent"><span>Home</span></a>
					<li><a href="#" title="">test1</a></li>
					<li><a href="#" title="">test2</a></li>
					<li><a href="#" title="">test3</a></li>
					<li><a href="#" title="">test4</a></li>
				</ul>
			</div>
	
			<div id="novinky">
<!--				<center>  zastaraly tag, lze nadefinovat v css -->
				<h1> Vítejte na webu</h1>
<!--				</center> -->
				<br />
				<br />
				textik
			</div>

			<div id="panelpr"> 
				<h2>Video tydne </h2>
				<iframe width="200" height="113" src="http://www.youtube.com/embed/WSve_Q6FgkU?rel=0" frameborder="0" allowfullscreen></iframe>
			</div>

			<div id="levy"> 
				Boční panel
			</div>

			<div id="foter"> 
				<br />
<!--				<center>  zastaraly tag, lze nadefinovat v css -->
				2013 © <strong>code/desing:</strong> Ozzy </a>
<!--				</center> -->
				<endora>
			</div>
		</div>
  </body>
</html>

Pak se ještě podívám na styl.

sanyo151 · 2013-03-15 20:47:12

no prekopiroval jsem to tam..... pro tebe to bylo mozna to bylo neprehledny ale ja se v tom vyznal

kksmirice · 2013-03-15 20:53:05

Možná se v tom vyznáte, ale tagy nejsou regulérními a také nejsou ukončeny, ....

Tady je css:

body {
	background: url(images/pozadi.jpg);
	color: red;
}

.page-container {						/* třída není definována v html */
	width: auto;						/* - není parametr */
	margin: 0 auto;
	margin-top: auto;					/* ??? již nastaveno 0 */
	margin-bottom: auto;				/* ??? již nastaveno 0 */
	border: solid 1px rgb(150,150,150);
	font-size: 1.0em;
}

#header {
	background: url(images/header.jpg) no-repeat;
	width: 1000px;
	margin: 0 auto;
	height: 290px;
}

#menu {
	background: url(images/m.jpg);
	width: 1000px;
	height: 36px;
	margin: 0 auto;
	text-align: center;
	padding: 20px 0 0 0;
}

#menu li {
	list-style-type: none;
	display: inline;
	padding: 0 0 0 15px;
}

#menu li a {
	font-family: "Microdot";			/* nebyly ukončeny uvozovky */
	font-weight: bold;
	text-decoration: none;
	color: #ffffff;
}
#panelpr {
	position: absolute;
	width:  250px;
	height: 500px;
	top: 360px;
	left:  1064px;
	background: orange;
	color:  yellow;
	border-style:  none;
	border-width: medium;
	text-align: center;
	padding: 5px 10px 10px 10px;
	decoration: none;
}

#panelpr a: link {							/* netuším, kde je použit - nesprávný zápis hypertextu */
	color: yellow
	text-decoration: none;
}

 #levy {
	position: absolute;
	width:  250px;
	height: 500px;
	top: 360px;
	left:  332px;
	background: pink;
	color:  yellow;
	border-style:  none;
	border-width: medium;
	text-align: center;
	padding: 5px 10px 10px 10px;
	decoration: none;					/* nedefinovaný název */
}

#levy a: link {							/* netuším, kde je použit - nesprávný zápis hypertextu */
	color: yellow;						/* chybějící středník */
	text-decoration: none;
}

 #novinky {
	position: absolute;
	width:  435px;
	height: 500px;
	top: 360px;
	left:  605px;
	background: white;
	color:  black;
	border-style:  none;
	border-width: medium;
	padding: 5px 10px 10px 10px;
}

#foter {
	position: absolute;
	width:  1002px;
	height: 83px;
	top: 865px;
	left:  332px;
	background: url(images/foter.jpg);
	color:  pink;
	border-style:  none;
	border-width: medium;
	text-align: center;
	decoration: none;					/* nedefinovaný název */
}

sanyo151 · 2013-03-15 21:03:54

kdyz dam mensi rozliseni tak to stale rozhodi spodek webu spravne je jen header a nemu

Trade · 2013-03-15 21:48:49

Doporučil bych Vám abyste v headeru a ve footeru měl nastavenou stejnou výšku a šířku.
Ten "spodek" si můžete upravit dle Vašich představ ve třídě #foter.

sanyo151 · 2013-03-15 22:51:38

ale kdyz web otevru pres mobil tak to mam posunuty ty bocni panely stred a foter do prava

kksmirice · 2013-03-15 22:53:08

Měl jste na mysli vytvořit něco podobné?

sanyo151 · 2013-03-15 22:55:45

ano tak nejak tohle mela byt ma prvni zkusebni theme

sanyo151 · 2013-03-15 23:00:06

ten tvuj se mi ukazuje spravne co mam spatne ze me se to na mobilu rozhodi?

kksmirice · 2013-03-15 23:02:05

Stáhněte si zdrojový kód z index.html a také soubor style.css
Porovnejte rozdíly. Je to vše o rozvržení stránky - jak jsem uváděl.

sanyo151 · 2013-03-16 10:33:45

diky

sanyo151 · 2013-03-16 23:00:29

zdravím potreboval bych mensi pomoc pamatujete vcera jak ste mi pomahal s tou sablonou? no tak bych potreboval pomoct ještě jednou s tou jednoduchou sablonou potreboval bych ju sprovoznit na webu ze systemem SunLight budu rad za kazdou pomoc diky moc

kksmirice · 2013-03-16 23:22:01

Prostudujte si tuto dokumentaci, kde naleznete vše potřebné pro tvorbu šablony v systému SunLight.

sanyo151 · 2013-03-16 23:29:36

prosim o pomoc podle toho se to uz pak naucim nepospicham na to stacilo by mi to az zitra behem dne pak uz bych si stim vyhral a zkousel bych ale potrebuju jen zaklad .. priste dalsi sablonu uz si budu zkouset uplne sam prosim prosim smutne koukam chtel bych neco co sme delaly vcera akorad jen s 1 bocnim panelem prosim pomoz mi

kksmirice · 2013-03-16 23:32:21

Odpovězeno přes email.

sanyo151 · 2013-03-17 10:47:10

zkusim to a mozu si aspon pak kdyztak napsat o pomoc kdyby mi nec neslo?

#1 2013-03-15 13:21:03

Re: stred webu

#2 2013-03-15 15:16:57

Re: stred webu

#3 2013-03-15 16:07:56

Re: stred webu

#4 2013-03-15 16:28:28

Re: stred webu

#5 2013-03-15 16:36:31

Re: stred webu

#6 2013-03-15 16:46:40

Re: stred webu

#7 2013-03-15 16:52:40

Re: stred webu

#8 2013-03-15 17:05:25

Re: stred webu

#9 2013-03-15 20:20:44

Re: stred webu

#10 2013-03-15 20:41:22

Re: stred webu

#11 2013-03-15 20:47:12

Re: stred webu

#12 2013-03-15 20:53:05

Re: stred webu

#13 2013-03-15 21:03:54

Re: stred webu

#14 2013-03-15 21:48:49

Re: stred webu

#15 2013-03-15 22:51:38

Re: stred webu

#16 2013-03-15 22:53:08

Re: stred webu

#17 2013-03-15 22:55:45

Re: stred webu

#18 2013-03-15 23:00:06

Re: stred webu

#19 2013-03-15 23:02:05

Re: stred webu

#20 2013-03-16 10:33:45

Re: stred webu

#21 2013-03-16 23:00:29

Re: stred webu

#22 2013-03-16 23:22:01

Re: stred webu

#23 2013-03-16 23:29:36

Re: stred webu

#24 2013-03-16 23:32:21

Re: stred webu

#25 2013-03-17 10:47:10

Re: stred webu

Zápatí