Forum PHP.pl > [HTML][CSS]obróbka gotowego szablonu a rozjezdzajace sie elementy strony

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]obróbka gotowego szablonu a rozjezdzajace sie elementy strony

hyhyhy

16.02.2011, 17:55:31

Witam,

Mam nastepujacy problem: Pobralem gotowy szablon strony, poniewaz o designie graficznym strony nie mam bladego pojecia.
Otwarlem plik style.css i costam pogrzebalem, pozmeinialem wielkosc liter itd, ale mam jeden problem.

Njapierw zapisana w indexie jest glowna zawartosc, ktora nie ma w stylach podanej lokacji na stronie,
Potem zapisane są po lewej stronie sa trzy boxy (jeden pod drugim) mają float:left
No i chciałem sobie takie same boxy wrzucić po prawej stronie, juz na wlasna rękę, ale co bym nie robil, to elementy mi latają jak chcą. Czy jest jakaś metoda (kolejnosc) wypisywania kolejnych boxow w indexie, czy cos, zeby stworzyc taki standardowy model lewo 3 boxy - heading -glowna tresc - prawo 3 boxy

bercow

16.02.2011, 18:22:58

daj kod, podziel na trzy elementy, lewo srodek prawo, a potem w lewo i prawo wstaw w srodek dodatkowo, te boxy, zakladam, ze beda one pionowo

hyhyhy

16.02.2011, 18:34:34

probowalem cos z tym ustawiac, ale konczylo sie tak, ze wszysko bylo po lewej stronie jedno pod drugim, zarzucam kod:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
 
Name       : Reckoning
Description: A two-column, fixed-width design for 1024x768 screen resolutions.
Version    : 1.0
Released   : 20090629
 
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Reckoning by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
 
	<div id="header">
		<div id="menu">
			<ul>
				<li class="current_page_item"><a href="#">Home</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Photos</a></li>
				<li><a href="#">Links</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
		<!-- end #menu -->
		<div id="search">
			<form method="get" action="">
				<fieldset>
				<input type="text" name="s" id="search-text" size="15" />
				<input type="submit" id="search-submit" value="Search" />
				</fieldset>
			</form>
		</div>
		<!-- end #search -->
	</div>
	<!-- end #header -->
	<div id="logo">
		<h1><a href="#">tytul</a></h1>
	</div>
	<hr />
	<!-- end #logo -->
<!-- end #header-wrapper -->
 
<div id="page">    <!-- no i tu jest tlo tego wszystkiego -->
	<div id="content">  <!-- a tu tekst glowny -->
 
		</div>
	</div>
	<!-- end #content tu sie konczy tekst glowny -->    <!-- boxy z lewej strony, maja float:left -->
	<div id="sidebar">
		<ul>
			<li>
				<h2>Aliquam tempus</h2>
 
			</li>
			<li>
				<h2>Turpis nulla</h2>
				<ul>
				<!-- zawartosc boxa -->
					</ul>
				</li>
			<li>
				<h2>Turpis nulla</h2>
				<ul>
					<!-- zawartosc boxa -->
					</ul>
				</li>
		</ul>
	</div>
	<!-- end #sidebar -->
	<div style="clear: both;"> </div>
</div>
<!-- end #page -->
 
<!-- end #footer -->
</div>
</body>
</html>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
 
/*
Design by Free CSS Templates
<a href="http://www.freecsstemplates.org" target="_blank">http://www.freecsstemplates.org</a>
Released for free under a Creative Commons Attribution 2.5 License
*/
 
body {
	margin: 0px;
	padding: 0;
	background: #000000 url(images/img01.jpg) repeat-x left top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #63676A;
}
 
h1, h2, h3 {
	margin: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #649632;
}
 
h1 { font-size: 22px; }
 
h2 { font-size: 15px; }
 
h3 { }
 
p, ul, ol {
	margin-top: 0;
	line-height: 240%;
	text-align: justify;
}
 
ul, ol { }
 
blockquote { }
 
a { color: #C2C8CC; }
 
a:hover { text-decoration: none; }
 
a img {
	border: none;
}
 
img.left {
	float: left;
	margin: 7px 30px 0 0;
}
 
img.right {
	float: right;
	margin: 7px 0 0 30px;
}
 
hr { display: none; }
 
.list1 {
}
 
.list1 li {
	float: left;
	line-height: normal;
}
 
.list1 li img {
	margin: 0 30px 30px 0;
}
 
.list1 li.alt img {
	margin-right: 0;
}
 
#wrapper {
	width: 950px;
	margin: 0 auto;
	background: #000000;
}
 
/* Header */
 
#header-wrapper {
}
 
#header {
	width: 900px;
	height: 44px;
	margin: 0 auto;
	background: url(images/img03.jpg) repeat-x left top;
}
 
/* Menu */
 
#menu {
	float: left;
	height: 44px;
}
 
#menu ul {
	margin: 0;
	padding: 0px;
	list-style: none;
	line-height: normal;
}
 
#menu li {
	height: 44px;
	display: block;
	float: left;
	padding: 12px 25px 0px 25px;
	background: url(images/img04.jpg) no-repeat right 8px;
}
 
#menu a {
	display: block;
	float: left;
	text-decoration: none;
	font: 12px Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
 
#menu a:hover { text-decoration: underline; }
 
#menu .current_page_item {
	margin: 0px;
	color: #FFFFFF;
}
 
/* Search */
 
#search {
	float: right;
	height: 44px;
}
 
#search form {
	float: right;
	margin: 0;
	padding: 10px 20px 0 0;
}
 
#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}
 
#search input {
	float: left;
	padding: 0;
	height: 20px;
	font: 12px Arial, Helvetica, sans-serif;
	border: none;
}
 
#search-text {
	width: 135px;
	height: 14px;
	margin: 0px 6px 0px 0px;
	padding: 3px 0 0 5px;
	color: #658453;
}
 
#search-submit {
	padding: 0px;
	margin: 0px;
	height: 21px;
	margin-left: 4px;
	color: #39561D;
}
 
/* Page */
 
#page {
	width: 900px;
	margin: 0 auto;
	padding: 0px;
 
}
 
/** LOGO */
 
#logo {
	width: 900px;
	height: 300px;
	margin: 0 auto;
	background: url(images/img05.jpg) no-repeat left top;
}
 
#logo h1, #logo p {
	margin: 0;
	padding: 0px;
	line-height: normal;
}
 
#logo h1 {
	padding-left: 40px;
	padding-top: 90px; 
}
 
#logo h1 a {
	text-decoration: none;
	text-transform: lowercase;
	color: #FFFFFF;
}
 
#logo h1 a:hover { text-decoration: underline; }
 
#logo p {
	padding: 0px 0 0 42px;
	font: italic 13px Georgia, "Times New Roman", Times, serif;
	color: #FFFFFF;
}
 
#logo p a {
	text-decoration: none;
	color: #FFFFFF;
}
 
#logo p a:hover { text-decoration: underline; }
 
/* Content */
 
#content {
	float: right;
	width: 700px;
}
 
/* Post */
 
.post {
	margin-bottom: 25px;
}
 
.post .title {
	height: 30px;
	margin-bottom: 3px;
	border-bottom: 1px dashed #1E1E1E;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
 
.post .date {
	float: right;
	margin-top: -45px;
	padding-right: 20px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 18px;
	color: #C2C8CC;
}
 
.post .meta {
	margin: -30px  0 3px 25px;
	padding: 2px 30px 2px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 10px;
	color: #B6ACA2;
}
 
.post .meta a { color: #B6ACA2; }
 
.post .entry {
	padding: 20px 0px;
}
 
.post .links {
	margin: 0 250px 0 0;
	padding: 0 0 0 0px;
}
 
.post .links .comments {
}
 
.post .links .permalink {
	padding-left: 17px;
}
 
/* Sidebar */
 
#sidebar {
	float: left;
	width: 150px;
}
 
 
 
#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
 
}
 
 
#sidebar_1 ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
 
}
 
#sidebar li {
	margin-bottom: 10px;
	padding: 0 0 10px 0px;
	background: url(images/img07.jpg) repeat-x left top;
}
 
#sidebar_1 li {
	margin-bottom: 10px;
	padding: 0 0 10px 0px;
	background: url(images/img07.jpg) repeat-x left top;
}
 
#sidebar li ul {
	line-height: 200%;
	background: none;
}
#sidebar_1 li ul {
	line-height: 200%;
	background: none;
}
 
#sidebar li li {
	margin: 0;
	padding: 3px 20px;
	background: none;
}
#sidebar_1 li li {
	margin: 0;
	padding: 3px 20px;
	background: none;
}
 
#sidebar p {
	margin: 0;
	padding: 0 20px;
}
#sidebar_1 p {
	margin: 0;
	padding: 0 20px;
}
 
#sidebar h2 {
	height: 29px;
	margin: 0 0 20px 0px;
	padding: 5px 0px 0px 10px;
	background: url(images/img06.jpg) repeat-x left top;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}
 
 
#sidebar p {
	line-height: 200%;
	padding-bottom: 5px;
}
#sidebar_1 h2 {
	height: 29px;
	margin: 0 0 20px 0px;
	padding: 5px 0px 0px 10px;
	background: url(images/img06.jpg) repeat-x left top;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}
 
#sidebar a {
}
 
/* Calendar */
 
#calendar {
}
 
#calendar caption {
	padding-bottom: 5px;
	font-weight: bold;
}
 
#calendar table {
	width: 100%;
	border-collapse: collapse;
	border-right: 1px solid #F5F2EF;
}
 
#calendar thead th {
	padding: 5px 0;
	text-align: center;
	border-top: 1px solid #F5F2EF;
	border-left: 1px solid #F5F2EF;
	background: #F5F2EF;
}
 
#calendar tbody td {
	padding: 5px 0;
	text-align: center;
	border-top: 1px solid #F5F2EF;
	border-left: 1px solid #F5F2EF;
}
 
#calendar tfoot td {
	padding: 5px;
}
 
#calendar tfoot #next {
	text-align: right;
}
 
#calendar #today {
	background: #E7F1E1;
}
 
/* Footer */
 
#footer {
	width: 900px;
	margin: 0 auto;
	padding: 0;
	background: url(images/img02.jpg) repeat-x left top;
	height: 61px;
}
 
#footer p {
	margin: 0;
	padding: 20px 0;
	text-align: center;
	line-height: normal;
	color: #FFFFFF;
}
 
#footer a {
}
 
[HTML] pobierz, plaintext

racja, zapomnialem stylu wrzucic. juz jest

potreb

16.02.2011, 19:04:10

Tak przy okazji CSS należy dać, a po drugie jak już masz problemy z box-ami, zastosuje bordery żeby zobaczyć w jakim położeniu, floaty, width i tak dojdziesz co jest nie tak.

bercow

16.02.2011, 19:08:41

Prosze, lewo prawo srodek, i lewo i prawo podzielone na 3 bloki

[HTML] pobierz, plaintext 
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
	<head>
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
<body>
<div id="box">
	<div id="left">
		<div class="block">
		111111 111111 111111 11111111 11111111 1111111111 1111111 1111
		</div>
		<div class="block">
		222222 222222 222222222 2222 222222222 222222222222  22222222222
		</div>
		<div class="block">
		333333 333333 333333 33333 33333333333 33333333 3333333 33333333
		</div>
	</div>
		<div id="center">
		444444 444444 4444444444 444444  444444444444 444444 444444444
		</div>
	<div id="right">
		<div class="block">
		555555 555555 5555555  5555555 5555555 55555  55555 55555 5555 55555
		</div>
		<div class="block">
		666666 666666 66666666 66666666 66666666666 6666666 66666 666666
		</div>
		<div class="block">
		777777 777777 77777 7777 777777 77777777 77777 777777 777777777
		</div>
	</div>
</div>
</body>
</html>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
#box {
	width: 800px;
	margin:0 auto;
	}
#right {
	width: 200px;
	float: left;
	height: 600px;
	background-color:#ccff00;
	}
#center {
	width: 400px;
	float: left;
	height: 600px;
	background-color:#bb6633;
	}
#left {
	width: 200px;
	float: left;
	height: 600px;
	background-color:#3344ff;
	}
.block {
	width: 200px;
	height: 200px;
	}
 
[HTML] pobierz, plaintext

hyhyhy

16.02.2011, 19:28:16

oo dzięki wielkie.

EDIT:

A jeszcze jakbym mial takie pytanie: szukamlem po wszystkich parametrach o nazwie zawierajacej height, ale nie ma:
jak wydluzyc takiego sidebara, bo juz to sobie zorganizowalem, tylko mam dluuuga liste linkow, ktora mi wychodzi poza niego. Gdzie sie "reguluje" jego dlugosc?

//EDIT dobra juz mam to jest obrazek, myslalem ze to jest generowane przez style - jak juz mowilem - jestem noga w temacie

Prezi2907

16.02.2011, 21:23:09

Cytat(hyhyhy @ 16.02.2011, 17:55:31 )

Pobierz jeszcze raz wszystko i trzymaj surowy plik css i indexu osobno

Pozdrawiam....

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.