Μια μικρή βοήθεια με CSS

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
mat_
Δημοσιεύσεις: 121
Εγγραφή: 09 Απρ 2004 02:01

Μια μικρή βοήθεια με CSS

Δημοσίευση από mat_ » 30 Σεπ 2010 17:51

Από ότι κατάλαβα θες να δώσεις χώρο ώστε να βάλεις ένα τρίτο μενού. Επειδή στον υπάρχων κώδικα γίνεται ψιλοχαμός καλύτερα να πάρεις ένα νέο template το οποίο έχει ήδη 3 columns όπως εδώ: http://matthewjamestaylor.com/blog/ulti ... pixels.htm

Άβαταρ μέλους
sovokai
Δημοσιεύσεις: 293
Εγγραφή: 30 Οκτ 2008 01:33

Μια μικρή βοήθεια με CSS

Δημοσίευση από sovokai » 30 Σεπ 2010 19:06

και να αλλαζω τις σελιδες 1-1? ειναι 580+.... :hammer:

Άβαταρ μέλους
sovokai
Δημοσιεύσεις: 293
Εγγραφή: 30 Οκτ 2008 01:33

Μια μικρή βοήθεια με CSS

Δημοσίευση από sovokai » 07 Οκτ 2010 09:42

μηπως ξερει καποιος αλλος να βοηθησει???

gdimi
Δημοσιεύσεις: 129
Εγγραφή: 18 Μαρ 2009 00:54
Τοποθεσία: Πειραιάς
Επικοινωνία:

Μια μικρή βοήθεια με CSS

Δημοσίευση από gdimi » 07 Οκτ 2010 11:38

φίλε αν υπάρχει live url του site, δώσε το μπας και βγάλουμε άκρη ευκολότερα
"We will create a civilization of the Mind in Cyberspace. May it be more humane and fair than the world your governments have made before."

hybridwebs.gr

Άβαταρ μέλους
sovokai
Δημοσιεύσεις: 293
Εγγραφή: 30 Οκτ 2008 01:33

Μια μικρή βοήθεια με CSS

Δημοσίευση από sovokai » 07 Οκτ 2010 12:44

δηλαδη τι πρεπει να κανω? :oops:

Άβαταρ μέλους
sovokai
Δημοσιεύσεις: 293
Εγγραφή: 30 Οκτ 2008 01:33

Μια μικρή βοήθεια με CSS

Δημοσίευση από sovokai » 08 Οκτ 2010 00:28

εδω μηπως ειναι πιο ευκολο? η να σου δωσω εναν εντελως κενο να το βρεις στα μπαμ?
<!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 : Pedestrian
Description: A two-column, fixed-width design.
Version : 1.0
Released : 20080322

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:: Rottie.GR - Η Πρώτη Ελληνική κοινότητα Rottweiler ::</title>
<link href="new_templates/style.css" rel="stylesheet" type="text/css" media="screen" />
<style>
<!--
.postbody { font-size : 12px; line-height: 18px}
body.hmmessage
{
font-size: 10pt;
font-family:Verdana
}
.bodyline { background-color: #FFFFFF; border: 1px #98AAB1 solid; }

.forumline { background-color: #FFFFFF; border: 2px #006699 solid; }

td.row1 { background-color: #EFEFEF; }
div.Section1
{page:Section1;}
.nav {
COLOR: #000000; FONT-SIZE: 11px; FONT-WEIGHT: bold
}
A:link {
COLOR: #006699
}
A.nav {
COLOR: #006699; TEXT-DECORATION: none
}
.med{font-size:medium;font-weight:normal;padding:0;margin:0}#res{padding-right:1em;margin:0 16px}ol li{list-style:none}.g{margin:1em 0}li.g{font-size:small;font-family:arial,sans-serif}.s{max-width:42em}td.row2 { background-color: #DEE3E7; }
.topictitle { font-weight: bold; font-size: 11px; color : #000000; }
a:link.topictitle { text-decoration: none; color : #006699; }
span.postbody1
{}
-->
</style>
<bgsound src="http://www.doberman.gr/gav.wma" loop="1">
</head>
<body>
<div id="wrapper">
<!-- start header -->
<div id="header" style="width: 899px; height: 122px">
<img border="0" src="banner/dbgr_3.jpg" width="797" height="121"></div>
<!-- end header -->
<!-- start page -->
<div id="page" style="width: 901px; height: 499px">
<div id="content" style="width: 718px; height: 1405px">
<div class="post">
<div align="center">
<div align="center">

<table border="0" cellpadding="0" cellspacing="0" width="97%" id="table261">
<tr>
<td align="center">
<span style="font-size: 9pt; font-style:italic">
<a style="text-decoration: none; font-weight:700" href="index.html">
<font color="#000000">Home</font></a></span></td>
<td align="center">
<span style="font-size: 9pt; font-style:italic">
<a href="arsenika.html" style="text-decoration: none; font-weight:700">
<font color="#000000">Male</font></a></span></td>
<td align="center">
<a href="thulika.html" style="text-decoration: none">
<span style="font-size: 9pt; font-style:italic; font-weight:700">
<font color="#000000">Female</font></span></a></td>
<td align="center">
<span style="font-size: 9pt; font-style:italic">
<a href="neara.html" style="text-decoration: none; font-weight:700">
<font color="#000000">Youth</font></a></span></td>
<td align="center">
<span style="font-size: 9pt; font-style:italic">
<a href="koutavia_10.html" style="text-decoration: none; font-weight:700">
<font color="#000000">Puppies</font></a></span></td>
<td align="center">
<span style="font-size: 9pt; font-style:italic">
<a href="for_sale.html" style="text-decoration: none; font-weight:700">
<font color="#000000">For Sale</font></a></span></td>
<td align="center">
<span style="font-size: 9pt; font-style:italic; ">
<a href="news.html" style="text-decoration: none; font-weight:700">
<font color="#000000">News</font></a></span></td>
<td align="center">
<a href="ektrofeia.html" style="text-decoration: none">
<span style="font-size: 9pt; font-style:italic; font-weight:700">
<font color="#000000">Kennels</font></span></a></td>
<td align="center">
<span style="font-size: 9pt; font-style:italic; font-weight:700">
<font color="#000000"><span lang="en-us">
<a style="text-decoration: none" href="gallery.html">
<font color="#000000">Gallery</font></a></span></font></span></td>
<td align="center">
<span style="font-size: 9pt; font-style: italic">
<font color="#000000">
<a style="text-decoration: none; font-weight:700" href="mailto:info@rottie.gr">
<font color="#000000">Contact</font></a></font></span></td>
</tr>
</table>

<table border="4" cellpadding="0" cellspacing="0" width="100%" id="table185" bordercolor="#A26001" background="paw1.gif">
<tr>
<td>
<div align="center">

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table227">
<tr>
<td align="center" width="97%" bgcolor="#A26001" colspan="3">

<table border="0" cellpadding="0" cellspacing="0" width="97%" id="table258">
<tr>
<td align="right">
<i>
<b><font face="Verdana"><a target="_blank" style="text-decoration: none" title="Οι πληροφορίες του θα σας καταπλήξουν!! " href="http://rottweiler.forumup.gr/"><font color="#FFFF00" size="1">forum</font></a><font color="#FFFF00" size="1"><span lang="el"><a title="Διαφημιστείτε στο Rottie.GR" href="diafimiseis.html" style="text-decoration: none"><font color="#FFFF00">&nbsp;
διαφημίσεις</font></a></span>&nbsp; </font>
<font color="#ffffff">
<a title="Δωρεάν e-mail (username@rottie.gr)" target="_blank" style="text-decoration: none" href="http://www.rottie.gr/webmail">
<font color="#ffff00" size="1">webmail</font></a></font></font></b></i></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" width="29%">

<p align="center">&nbsp;<SCRIPT LANGUAGE="JavaScript">
Banner_imganz=5;
var Banner_sctr=0;
var Banner_halt=0;
var Banner_rand=1;
var Banner_timeout=15000;

var Banner_isn=new Array();
if (document.images) {
for (i=0;i<Banner_imganz;i++) Banner_isn=new Image();
Banner_isn[0].src="http://www.freestuff.gr/images/header/fs_logo_b.jpg";
Banner_isn[1].src="http://www.doberman.gr/diaf/grada2.png";
Banner_isn[2].src="http://www.scarvasstrand.com/templates/ ... s/logo.gif";
Banner_isn[3].src="http://www.arbitrage.gr/templates/a4joo ... s/logo.png";
Banner_isn[4].src="http://www.doberman.gr/banner/facebook.jpg";
} else {
Banner_isn[0]="http://www.site.gr/banner.gif";
Banner_isn[1]="http://www.site.gr/banner1.gif";
Banner_isn[2]="http://www.site.gr/banner1.gif";
Banner_isn[3]="http://www.site.gr/banner1.gif";
Banner_isn[4]="http://www.site.gr/banner1.gif";
}
var Banner_durl=new Array();
Banner_durl[0]="http://www.freestuff.gr/";
Banner_durl[1]="http://www.grada.gr/";
Banner_durl[2]="http://www.scarvasstrand.com";
Banner_durl[3]="http://www.arbitrage.gr";
Banner_durl[4]="http://www.facebook.com/tulay.sahil?ref ... 159&ref=ts";
function Banner_rotate(){
if (Banner_halt!=1){
if (Banner_rand==0) {Banner_sctr++;}
else {Banner_sctr=Math.floor(Math.random()*Banner_imganz);}
if (Banner_sctr>Banner_imganz-1) Banner_sctr=0;
if (document.images) {
document.Banner.src=Banner_isn[Banner_sctr].src;
} else {
document.Banner.src=Banner_isn[Banner_sctr];
}
setTimeout("Banner_rotate()",Banner_timeout);
}
}
function Banner_link(){
Banner_halt=1;
if (Banner_durl[Banner_sctr].length!=0) location.href=Banner_durl[Banner_sctr];
}
function Banner_status(){ parent.window.status=Banner_durl[Banner_sctr];}
</SCRIPT>

<A href="#" onclick="Banner_link();return false" onmouseover="Banner_status();return true;" onmouseout="parent.window.status='';return true;" style="border:3 outset #FF8000; color:#006699; text-decoration:none"><SCRIPT LANGUAGE="JavaScript">
Banner_sctr=-1; if (Banner_rand==0) {Banner_sctr++;}
else {Banner_sctr=Math.floor(Math.random()*Banner_imganz);}
if (document.images) {
document.write('<img src="'+Banner_isn[Banner_sctr].src+'" alt="Banner" width=200 height=80 border=0 name=Banner></A>');
} else {
document.write('<img src="'+Banner_isn[Banner_sctr]+'" alt="Banner" width=468 height=80 border=0 name=Banner></A>');
}
setTimeout("Banner_rotate()",Banner_timeout);
</SCRIPT></A>&nbsp;</td>
<td align="center" width="37%">

<a title="Διαφήμιση" target="_blank" href="http://www.purina.gr/">
<img border="0" src="banner/petline.jpg" width="251" height="80"></a></td>
<td align="center" width="32%">

<a target="_blank" href="http://www.freestuff.gr/">
<img border="0" src="banner/freestuff_logo.jpg" width="221" height="80"></a></td>
</tr>
<tr>
<td align="center" colspan="3">

&nbsp;</td>
</tr>
</table>
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table186">
<tr>
<td colspan="3" height="26">
<div align="center">

<p align="center">
<a title="Zamp vom Wolfert Turm x Zyra vom Weissen Schwan" href="presen/female/emely_vom/weissen_schwan1.html">
<img border="0" src="presen/female/emely_vom/Emi2.jpg" width="640" height="480"></a></div>
</td>
</tr>
<tr>
<td colspan="3" height="26">
<p align="center">

<b><span lang="EN-US" style="font-family: Constantia">
<font size="5">Emely vom Weissen Schwan</font></span></b></td>
</tr>
<tr>
<td colspan="3" height="26">
&nbsp;</td>
</tr>
<tr>
<td colspan="3" height="26">
<p align="center">

<font face="Arial" size="4">

<span style="font-weight:700">

<img border="0" src="banner/prosfates.jpg" width="40" height="38" align="absbottom">Π
ρ<span lang="el"> ό</span> σ φ α τ ε<span lang="el"> ς</span>&nbsp;&nbsp;
<span lang="el">Π</span> α ρ ο υ σ ι<span lang="el"> ά</span> σ ε ι<span lang="el">
ς</span></span></font><img border="0" src="banner/prosfates1.jpg" width="40" height="38" align="absbottom"></td>
</tr>
<tr>
<td height="273" align="center" width="44%">
<b>
<font color="#000000" size="2" face="Arial">Παρουσίαση αρσενικών</font></b><p>
<a title="Merlin Flash Rouse X Bianca Of Silver Fild KG" href="presen/neara/Joni_Earl/Antonius1.html">
<img border="0" src="presen/neara/Joni_Earl/2200.jpg" width="256" height="200"></a></p>
<p>

<b>
<span lang="EN-US" style="font-family: Constantia; font-style:italic">
<font size="2">Joni Earl Antonius</font></span></b></td>
<td height="273" align="center" width="11%">
&nbsp;</td>
<td height="273" align="center" width="45%">
<b>
<font color="#000000" face="Arial" size="2">Παρουσίαση θηλυκών</font></b><p>
<a title="Zamp vom Wolfert Turm x Zyra vom Weissen Schwan" href="presen/female/emely_vom/weissen_schwan1.html">
<img border="0" src="presen/female/emely_vom/Emi1S.jpg" width="258" height="200"></a></p>
<p>

<b>
<span lang="EN-US" style="font-family: Constantia; font-style:italic">
<font size="2">Emely vom Weissen Schwan</font></span></b></td>
</tr>
<tr>
<td height="22" align="center" width="100%" colspan="3">
<font face="Arial" size="4">
<b>
<img border="0" src="banner/puppies%20d.jpg" width="30" height="40" align="absbottom"> Διαθέσιμα κουτάβια
<span lang="el">Rottweiler</span>
<img border="0" src="banner/puppies%20d.jpg" width="29" height="40" align="absbottom"></b></font></td>
</tr>
<tr>
<td height="10" align="center" colspan="3">
<a href="koutavia_10.html" style="text-decoration: none">
<font size="2" color="#000000">Περισσότερα
θα βρείτε στην ενότητα </font></a>
<font size="2" color="#000000">
<a href="koutavia_10.html">
<b><font color="#000000">Γέννες</font></b></a></font> </td>
</tr>
<tr>
<td height="10" align="center" colspan="3">
</td>
</tr>
<tr>
<td height="10" align="center" colspan="3">
<table border="0" cellpadding="0" cellspacing="0" width="96%" id="table262">
<tr>
<td>

<p align="center">&nbsp;<script type="text/javascript"><!--
google_ad_client = "pub-0776689883461149";
/* tetragono_xorigoi */
google_ad_slot = "2454608305";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></td>
<td width="310">
<p align="center">
<a title="Διαφήμιση" href="enim/pro_plan.html">
<img border="0" src="banner/proplan_collection.gif" width="290" height="280"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

<table border="0" cellpadding="0" cellspacing="0" width="89%" id="table209">
<tr>
<td>
&nbsp;</td>
</tr>
<tr>
<td>
<p align="center"><span class="nav"><a class="nav" href="#top">
<font color="#000000" size="1"><u>Επιστροφή στην κορυφή</u></font></a></span></td>
</tr>
<tr>
<td>
&nbsp;</td>
</tr>
</table>
</div></div>
</div>
</div>
<!-- end content -->
<!-- start sidebar -->
<div id="sidebar" style="width: 165px; height: 507px">
<ul>
<li>
<h2></h2>
<ul>
<li><span style="font-size: 9pt; font-style:italic">
<a style="text-decoration: none" href="index.html">Κεντρική</a></span></li>
<li>
<span style="font-size: 9pt; font-style:italic">
<a href="arsenika.html">Αρσενικά</a></span></li>
<li><a href="thulika.html">
<span style="font-size: 9pt; font-style:italic">Θηλυκά</span></a></li>
<li><span style="font-size: 9pt; font-style:italic">
<a href="neara.html">Νεαρά</a></span></li>
<li><span style="font-size: 9pt; font-style:italic">
<a href="koutavia_10.html">Γέννες</a></span></li>
<li>
<span style="font-size: 9pt; font-style:italic">
<a href="for_sale.html">Προς Πώληση</a></span></li>
<li>
<span style="font-size: 9pt; font-style:italic; ">
<a href="news.html">Νέα</a></span></li>
<li><a href="ektrofeia.html">
<span style="font-size: 9pt; font-style:italic">
Εκτροφεία</span></a></li>
<li>
<span style="font-size: 9pt; font-style:italic">
<a href="gallery.html">Gallery</a></span></li>
</ul>
</li>
<li>
<h2></h2>
<ul>
<li><span style="font-size: 9pt; font-style:italic">
<a href="arthra/arthra.html">Άρθρα</a></span></li>
<li><span style="font-size: 9pt; font-style:italic">
<a href="enim/protupo.html">Πρότυπο</a></span></li>
<li><span style="font-size: 9pt; font-style:italic">
<a href="enim/apotelesmata/apotelesmata.html">
Αποτελέσματα</a></span></li>
<li><span lang="en-us">
<span style="font-size: 9pt; font-style:italic">
<a target="_blank" href="http://rottweiler.forumup.gr/">Forum</a ... /span></li>
<li>
<span style="font-size: 9pt; font-style:italic" lang="en-us">
<a href="enim/banner.html">Links</a></span></li>
<li><span style="font-size: 9pt; font-style:italic">
<a href="mailto:info@rottie.gr?subject=Rottie.GR">Επικοινωνία</a></span></li>
<li></li>
<li>
<span lang="en-us" style="font-size: 9pt; font-style: italic">
<a target="_blank" href="http://www.teezy.eu/greece/shop/rottie">
Shop</a></span></li>
<li><span style="font-style: italic; ">
<a href="enim/web_design.html"><font style="font-size: 9pt">Design</font></a></span></li>
<li><span style="font-style: italic; ">
<a href="enim/ananeoseis.html"><font style="font-size: 9pt">Update</font></a></span></li>
<li></li>
<li><span style="font-style: italic; ">
<a href="enim/efimeria.html"><font style="font-size: 9pt">Εφημερίες</font></a></span></li>
<li><span style="font-style: italic; ">
<a href="enim/xorigoi.html">
<font color="#FFFFFF" style="font-size: 9pt">Χορηγοί</font></a></span></li>
<li><span style="font-style: italic; ">
<a href="enim/adsense.html">
<font color="#FFFFFF" style="font-size: 9pt">Adsense</font></a></span></li>
<li><span style="font-style: italic; ">
<a href="diafimiseis.html"><font style="font-size: 9pt">Διαφημίσεις</font></a></span></li>
</ul></li>
</ul>
</div>
<p>
<!-- end sidebar -->
</div>
</div>
<div id="footer" style="width: 900px; height: 51px">
<p>
<font color="#C0C0C0">&copy;<font size="1" face="Verdana"> </font></font><i>
<font size="1" face="Verdana" color="#C0C0C0"> 20</font><font size="2" face="Verdana" color="#C0C0C0">1</font><font size="1" face="Verdana" color="#C0C0C0">0</font></i><font size="1" face="Verdana" color="#C0C0C0"> </font>
<font size="1" face="Arial"><span lang="el"><font color="#FFFFFF">
<a style="text-decoration: none; text-transform:capitalize" href="times_parousiaseis.html">
<font color="#C0C0C0">Διαφημίσεις</font></a></font></span></font></p>
</div>
</body>
</html>

gdimi
Δημοσιεύσεις: 129
Εγγραφή: 18 Μαρ 2009 00:54
Τοποθεσία: Πειραιάς
Επικοινωνία:

Μια μικρή βοήθεια με CSS

Δημοσίευση από gdimi » 08 Οκτ 2010 02:28

αν έχεις το template κενό, καλύτερα ναι
κ επίσης αν το site σου είναι κάπου online, κ έτσι μπορώ να το κοιτάξω
"We will create a civilization of the Mind in Cyberspace. May it be more humane and fair than the world your governments have made before."

hybridwebs.gr


Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Μια μικρή βοήθεια με CSS

Δημοσίευση από dimsis » 08 Οκτ 2010 10:19

στο header
<div style="width: 899px; height: 122px;" id="header">
στο main:
<div style="width: 901px; height: 499px;" id="page">
στο footer
<div style="width: 900px; height: 51px;" id="footer">
Αυξάνεις τις τιμές των bold ^

Στον κώδικα:
θα βάλεις το div sidebar πρώτι να φορτώνει πριν το content και το content θα το αλλάξεις σε float:left αντί για float:right, μετά από το content div θα βάλεις άλλο ένα div sidebar2 π.χ. που εκείνο αν θέλεις μπορείς να το βάλεις και float:right (ή και τίποτε) ...
Στο css σου δηλαδή θα είναι κάπως έτσι:

Κώδικας: Επιλογή όλων

#sidebar &#123;
color&#58;#EEEEEE;
float&#58;left;
margin-bottom&#58;10px;
width&#58;165px;
&#125;

#content &#123;
float&#58;left;
margin&#58;0;
width&#58;720px;
&#125;

#sidebar2 &#123;
color&#58;#EEEEEE;
float&#58;right;
margin-bottom&#58;10px;
width&#58;220px;
&#125;
και τα divs στην html σου θα φορτώνονται με αυτή τη σειρά:

Κώδικας: Επιλογή όλων

<div id="sidebar">μπλα μπλα</div>
<div style="width&#58; 720px;" id="content">μπλα μπλα</div>
<div id="sidebar2 ">μπλα μπλα</div>

Άβαταρ μέλους
sovokai
Δημοσιεύσεις: 293
Εγγραφή: 30 Οκτ 2008 01:33

Μια μικρή βοήθεια με CSS

Δημοσίευση από sovokai » 08 Οκτ 2010 10:23

δεν ξερω αν θα το καταφερω αλλα θα προσπαθησω!!!
ευχαριστω πολυ!!

Άβαταρ μέλους
sovokai
Δημοσιεύσεις: 293
Εγγραφή: 30 Οκτ 2008 01:33

Μια μικρή βοήθεια με CSS

Δημοσίευση από sovokai » 10 Οκτ 2010 12:30

ευχαριστω ολους για τη βοηθεια αλλα τελικα το εκανα με τον παραδοσιακο τροπο :lol: :lol

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης