Hjelp meg å utvikle et nettsted (for morro skyld) (PHP, CSS)

Bruno Mars · 22. mai 2010

Driver å lager et nettsted for å lære meg PHP. Har litt erfaring fra web- programmering før av med HTML og CSS. Men nå er det PHP som skal læres. Tenkte jeg skulle lage en side med artikler/nyheter. Presiserer dette er kun for egen læring, ikke noe annet. Så langt har jeg bare en forside med rotete Dreamweaver- kode og et stilark. Så jeg trenger en side til å lage artikkler. Også trenger jeg vel en database.

Noe av det første jeg vil ordne er framsida. Jeg bør vel forøvrig lage en template.

- Når du ser på lenkene i menyen og holder musa over så ser du at noe av bakgrunnen blir oransje. Hvordan får jeg en større del oransje? menyen er en tabell som er 100% bred med 10 koloner à 10% hver. Høyde er 50px.

- Under logoen skal det være tomt eller eventuell reklame.

- Under menyen tenkte jeg å ha et velkomstbilde eller muligens reklame.

Så jeg ønsker tips og råd til hvordan jeg kan fortsette. Spesielt med database og publiseringsside.

CSS- fil:

.rss
{
text-align:right;
color:#F90;
font-family: calibri;
}

.menu
{
background-color:#333;
height:50;
font-family: calibri;
color: #FFF;
}

.menu:hover
{
background-color:#333;
height:50;
font-family: calibri;
color: #FFF;
}

a
{
font-family: calibri;
color:#FFF;
text-decoration:none;
}
a:hover
{
background-color:#F90;
background-repeat:repeat;
font-family: calibri;
color:#FFF;
}

Foreløpig index:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PHPtesting.phpnet.us - Side under utvikling</title>
<style type="text/css"> 
<!-- 
body  {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.twoColHybLt #container { 
width: 80%;  /* this will create a container 80% of the browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
} 

/* Tips for sidebar1:
1. Since we are working in relative units, it's best not to use padding on the sidebar. It will be added to the overall width for standards compliant browsers creating an unknown actual width. 
2. Since em units are used for the sidebar value, be aware that its width will vary with different default text sizes.
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColHybLt #sidebar1 p" rule.
*/
.twoColHybLt #sidebar1 {
float: left; 
width: 12em; /* since this element is floated, a width must be given */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div  */
}
.twoColHybLt #sidebar1 h3, .twoColHybLt #sidebar1 p {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
text-align: center;
}

/* Tips for mainContent:
1. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. Be aware it is possible to cause float drop (the dropping of the non-floated mainContent area below the sidebar) if an element wider than it can contain is placed within the mainContent div. WIth a hybrid layout (percentage-based overall width with em-based sidebar), it may not be possible to calculate the exact width available. If the user's text size is larger than average, you will have a wider sidebar div and thus, less room in the mainContent div. You should be aware of this limitation - especially if the client is adding content with Contribute.
3. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This may help avoid several IE-specific bugs.
*/
.twoColHybLt #mainContent {
margin: 0 20px 0 13em; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
text-align: left;
background-color: #FFF;
} 

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
   height:0;
   font-size: 1px;
   line-height: 0px;
}
--> 
</style><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColHybLt #sidebar1 { padding-top: 30px; }
.twoColHybLt #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
</style>
<![endif]-->
<link href="CSS.css" rel="stylesheet" type="text/css">
</head>

<body class="twoColHybLt">

<div id="container">
 <div id="sidebar1">
   <h3><img src="Logo.png" width="150" height="150" alt="Logo"></h3>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
 <!-- end #sidebar1 --></div>
 <div id="mainContent">
   <h6 class="rss">RSS</h6>
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr class="menu">
       <th width="10%" height="50" class="menulinks" scope="col"><a href="Data og Programering/10 viktige Sertifiseringer.docx">Hjem</a></th>
       <th width="10%" height="50" scope="col"><a href="Data og Programering/Hvordan bytte språk på W7 Pro og Home Premium.pdf">Forum</a></th>
       <th width="10%" height="50" scope="col"> </th>
       <th width="10%" height="50" scope="col"> </th>
       <th width="10%" height="50" scope="col"> </th>
       <th width="10%" height="50" scope="col"> </th>
       <th width="10%" height="50" scope="col"> </th>
       <th width="10%" height="50" scope="col"> </th>
       <th width="10%" height="50" scope="col"> </th>
       <th width="10%" height="50" scope="col"> </th>
     </tr>
   </table>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --></div>
</body>
</html>

SweetMaryJane · 22. mai 2010

Du kan jo dele opp siden i logiske "deler" lagret i egne filer, så kan du include eller require sidene du trenger fra scriptet i index.php.

Ofte lurt å bruke div tags istedetfor tabeller når du styrer med CSS.

Gi div taggen en CSS class som er satt til block og 100% width height.

Å modellere en database riktig er jo ett projekt i seg selv, men PHP har egne mySQL funksjoner som gjør det lett å knytte sammen.

Bruno Mars · 22. mai 2010

Sorry, men du snakker gresk.

men slike deler du snakker om, er det liksom frames du mener?

Har heldigvis bestilt bok, også har jeg PHP til neste år. Er mest for å kunne ha litt å gå på.

SweetMaryJane · 22. mai 2010

Bok kan være greit å ha, men er langt ifra nødvendig.

Google er fin å bruke:

Hvis du aldri har brukt en database før kan det være litt høy læringskurve, og isåfall vil jeg anbefale deg å holde deg til PHP i første omgang.

Bruno Mars · 22. mai 2010

Hadde IT i to år på VGS. Første året drev vi en del med access. Husker egentlig lite fra det men så er mySQL mye mer utbredt også og det som brukes her.

Men trenger jeg database til dette da? Bare spør. Om jeg ikke trenger så kan jeg i første omgang lage en side uten, men tenkte at database egentlig er nødvendig.

SweetMaryJane · 22. mai 2010

Neida, trenger ikke det. Brukes jo til å lese/skrive data, og det går fint å bruke filer til samme nytten.

Men du vil nok merke etterhvert at databaser er utrolig praktiske når du får litt størrelse på siten.

Det jeg mente med å dele opp siten i logiske deler, er feks å skille ut menyen i en egen fil, som du kan bruke include funksjonen på.

Slik trenger du bare å oppdatere den ene filen, så vil forandringene forplante seg videre på alle sider du includer den i.

Akkuratt hvordan du skal sette opp dette kan være litt vrient, men vanskelig å se før du har lagt inn en del arbeid. Derfor kan det være greit å lage en "modell" av hvordan de forskjellige scriptene skal fungere med hverandre.

Hvis du skal legge ut siden din åpent på nettet, er det jo også en del sikkerhets problematikk involvert.

Bruno Mars · 22. mai 2010

Kunne du, eller noen andre, lage et lite eksempel på include og require, og laste opp filene her? Så på linkene dine, men ble ikke noe klokere på dette temaet.

Wattengård · 22. mai 2010

Til horisontal meny bruker man "Unordered list" og ikke en tabell...

<ul>

</ul>

Så er det opp til deg å finne ut hvordan du stiller de etter hverandre uten prikken

-C-

Bruno Mars · 22. mai 2010

Godt poeng.

Oppdatert.

CSS:

@charset "utf-8";
/* CSS Document */

.rss
{
text-align:right;
color:#F90;
font-family: calibri;
}

.menu
{
background-color:#333;
height:50;
font-family: calibri;
color: #FFF;
padding:0;  
margin:0; 
}

.menu li
{  
  list-style-type:none;
  display:inline;
  float:left;
}  
.menu:hover
{
background-color:#333;
height:50;
font-family: calibri;
color: #FFF;
}

a
{
font-family: calibri;
color:#FFF;
text-decoration:none;
}
a:hover
{
background-color:#F90;
background-repeat:repeat;
font-family: calibri;
color:#FFF;
}

kode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PHPtesting.phpnet.us - Side under utvikling</title>
<style type="text/css"> 
<!-- 
body  {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.twoColHybLt #container { 
width: 80%;  /* this will create a container 80% of the browser width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
} 

/* Tips for sidebar1:
1. Since we are working in relative units, it's best not to use padding on the sidebar. It will be added to the overall width for standards compliant browsers creating an unknown actual width. 
2. Since em units are used for the sidebar value, be aware that its width will vary with different default text sizes.
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColHybLt #sidebar1 p" rule.
*/
.twoColHybLt #sidebar1 {
float: left; 
width: 12em; /* since this element is floated, a width must be given */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual space within this div  */
}
.twoColHybLt #sidebar1 h3, .twoColHybLt #sidebar1 p {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
text-align: center;
}

/* Tips for mainContent:
1. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. Be aware it is possible to cause float drop (the dropping of the non-floated mainContent area below the sidebar) if an element wider than it can contain is placed within the mainContent div. WIth a hybrid layout (percentage-based overall width with em-based sidebar), it may not be possible to calculate the exact width available. If the user's text size is larger than average, you will have a wider sidebar div and thus, less room in the mainContent div. You should be aware of this limitation - especially if the client is adding content with Contribute.
3. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This may help avoid several IE-specific bugs.
*/
.twoColHybLt #mainContent {
margin: 0 20px 0 13em; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
text-align: left;
background-color: #FFF;
} 

/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
   height:0;
   font-size: 1px;
   line-height: 0px;
}
--> 
</style><!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColHybLt #sidebar1 { padding-top: 30px; }
.twoColHybLt #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
</style>
<![endif]-->
<link href="CSS.css" rel="stylesheet" type="text/css">
</head>

<body class="twoColHybLt">

<div id="container">
 <div id="sidebar1">
   <h3><img src="Logo.png" width="150" height="150" alt="Logo"></h3>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
 <!-- end #sidebar1 --></div>
 <div id="mainContent">
   <h6 class="rss">RSS</h6>
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr class="menu">
       <th height="50" class="menulinks" scope="col">
       <ul>
       <li><a href="http://www-google.no" target="_blank">Hjem</a></li>
       <li><a href="a href="http://www-google.no" target="_blank">Forum</a>        </li>
       </ul></th>
     </tr>
   </table>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p>
   <p> </p></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --></div>
</body>
</html>

Må fikses litt ytterligere selvsagt.

Endret 22. mai 2010 av Gregory House

SweetMaryJane · 23. mai 2010

Kunne du, eller noen andre, lage et lite eksempel på include og require, og laste opp filene her? Så på linkene dine, men ble ikke noe klokere på dette temaet.

Det er flere eksempler på include linken..

Er ikke noe særlig hokus pokus, du inkluderer en annen fil. Er det en fil med PHP kode, kan du bruke all koden i den inkluderte filen som du vil. Det er en måte å organisere og gjenbruke kode på.

Skal du lære deg PHP må du nok lære deg å bruke litt tid på å lese..

Bruno Mars · 23. mai 2010

Selvsagt gjør det det. :blush:

Men litt tilbake til CSS. Jeg må bruke "float:left" for å få menypunktene til å venstrestille seg. Men det ødelegger så teksten ikke midtstilles i høyda. Valign hjelper ikke. Forslag?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Side under utvikling</title>

<!--[if IE]>
<style type="text/css"> 
	/* place css fixes for all versions of IE in this conditional comment */
	.toKolone #sidebar1 { padding-top: 30px; }
	.toKolone #mainContent { zoom: 1; padding-top: 15px; }
	/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
</style>
<![endif]-->

<link href="NewCSS.css" rel="stylesheet" type="text/css" />
</head>

<body class="toKolone">
<div id="container">
  <div id="sidebar">
   	<h3><a href="http://phptesting.phpnet.us/"><img src="Logo.png" alt="Logo" width="150" height="150" border="0"></a></h3>
   		<p> </p>
     </div>
 	<div id="mainContent">
  	  <h6 class="rss">RSS</h6>
  	  <table width="100%" border="0" cellpadding="0" cellspacing="0" class="menu">
  	    <tr>
  	      <th scope="col"><ul>
  	        <li><a href="http://www.google.no/">Hjem</a></li>
           <li><a href="http://www.google.no/">Forum</a></li>
           <li><a href="http://www.google.no/">Kontakt oss</a></li>
         </ul></th>
       </tr>
     </table>
  	  <p> </p>
  	  <p><img src="logo2.png" width="715" height="100" alt="Reklame"></p>
   	<hr>
   	<h1>Her kommer innhold</h1>
   	<p>Av <a href="http://www.google.no/">House</a></p>
   	<p>Contrary to popular belief.</p>
	</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --></div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

/*Hovedside*/
body
{
font: calibri;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}

.toKolone #container
{ 
width: 900px;  /* this will create a container 900px width */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}

.toKolone #sidebar
{
float: left; 
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 5px 0; /* top and bottom padding create visual space within this div  */
margin:10px 10px 10px 10px;
}

.toKolone #mainContent
{
margin:10px 10px 10px 175px; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
text-align: left;
background-color: #FFF;
color: #666;
}

/*Formatering*/
.rss
{
text-align:right;
color:#F90;
font-family: calibri;
}

.menu
{
background:#333;
font-family: calibri;
white-space:nowrap;
list-style-type:none;
}

.menu li 
{
display:inline;
}
.menu li a
{
padding:0em 1em;
color:#fff;
text-decoration:none;
float:left;

}

.menu li a:hover
{
background:#F60;
color:#fff;
}

a
{
font-family: calibri;
color:#F60;
text-decoration:none;
}
a:hover
{
font-family: calibri;
color:#F60;
}

h1
{
font-family:calibri;
color:#000;
}

p
{
font-family:calibri;
}

Endret 23. mai 2010 av Gregory House

Wattengård · 25. mai 2010

Hvorfor har du listen din inni en tabellcelle? Forkast hele tabellen...

-C-

Bruno Mars · 25. mai 2010

Du sier noe, men hvordan skal jeg få det til? Jeg får det ikke helt til jeg.

Bakgrunnen på menyen skal være mørk grå, være 50px høy, hvit skrift og når musa er over skal bakgrunnen bli oransje.

bonefire · 26. mai 2010

Er det noe sånt du tenkte på angående de menypunktene?: http://turl.no/9q6

Lagde et lite html/css eksempel. CSS'en ligger såkalt Internt, så du ser hele greia i kildekoden.

ellers kan du jo ta en titt på en zip fil som ligger her: http://turl.no/9q7

-bf-

Bruno Mars · 26. mai 2010

Konge! Var slik jeg tenkte ja. Skal se på koden når jeg får litt bedre tid.

Takker.

Logg inn

Hjelp meg å utvikle et nettsted (for morro skyld) (PHP, CSS)

Anbefalte innlegg

Bruno Mars

Lenke til kommentar

Videoannonse

SweetMaryJane

Lenke til kommentar

Bruno Mars

Lenke til kommentar

SweetMaryJane

Lenke til kommentar

Bruno Mars

Lenke til kommentar

SweetMaryJane

Lenke til kommentar

Bruno Mars

Lenke til kommentar

Wattengård

Lenke til kommentar

Bruno Mars

Lenke til kommentar

SweetMaryJane

Lenke til kommentar

Bruno Mars

Lenke til kommentar

Wattengård

Lenke til kommentar

Bruno Mars

Lenke til kommentar

bonefire

Lenke til kommentar

Bruno Mars

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Trenger vi en ny EU avgjørelse? 1 2

Hvem er aktive 0 medlemmer