[HTML] Grundgerüst mit HTML, CSS, PHP

Dieses Thema im Forum "Webdesign" wurde erstellt von sit-in, 8. März 2010 .

Schlagworte:
  1. 8. März 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Grundgerüst mit HTML, CSS, PHP

    Hallo liebe RR-Gemeinde :]

    nach sehr langer Zeit wollte ich jetzt mal wieder mit dem coden anfangen und mir eine Homepage erstellen...

    Leider gelingt es mir auch nach unzähligen Versuchen nicht, ein vernünftiges Grundgerüst zu programmieren...

    Dieses soll wie folgt aussehen:
    Bild


    - Das weiße um den schwaren Rahmen drumzu soll eine einfache Hintergrundfarbe darstellen, die ich auch mit CSS (body id) deklariert habe...
    - Der schwarze Rahmen soll ein Hintergrundbild sein, welches den Hauptteil umfassen soll und zentrier dargestellt werden soll (auch mit CSS gemacht... funktioniert auch)

    Jetzt zu den Problemen:
    - Der rote Rahmen soll eine Header-Grafik sein, welche fixiert (sich also nicht bewegt) sein soll und ganz oben und mittig dargestellt werden soll... Wie kann ich dieses einfassen am besten einfassen, sodass es am besten sogar wie eine zweite Hintergrundgrafik ist? (soll schon eine extra grafik sein, da die oben beschriebene hintergrundgrafik nur ein pixel hoch ist und sich per css auf die komplette seite wiederholt (repeat-y))
    - Der grüne Rahmen soll eine mittige Navigation darstellen, in der die Menüpunkte nebeneinander angeordnet sein sollen... Diese möchte ich möglichst mit der "php include" funktion einfassen, da es ja immer mal sein kann, dass ich etwas an der der navigation ändern möchte und ich nicht jedes mal jede einzelne website umändern will... wie genau fasse ich die dann ein und wie wird sie gecodet?
    - der blaue rahmen soll den hauptteil darstellen...

    ---> zusammenbasteln möchte ich diese einzelnen "rahmen" in form einer tabelle und da treten bei mir die probleme auf... die tabelle soll 1000 px breit sein... allerdings weiß ich dann nicht mehr weiter wie ich das am besten alles zusammenfüge... könnt ihr mir dabei helfen oder vllt sogar ein gecodetes "grundgerüst" posten?
    denn bei meinen versuchen war es so, dass auf einer seite (z.B. index) der ganze teil der website inklusive header einige pixel nach unten verschoben war, aber wiederrum auf einer anderen seite (z.B. bilder) der header und alles andere, so wie es auch sein soll, ganz oben war....


    hoffe ihr könnt mir helfen.... :] :] :]
    DANKE im voraus!!

    Mit freundlichen Grüßen,
    sit-in:]
     
    + Multi-Zitat Zitieren
  3. 8. März 2010
    AW: Grundgerüst mit HTML, CSS, PHP

    Kannst du den schonmal posten was du bisher hast?
     
    + Multi-Zitat Zitieren
  4. 8. März 2010
    AW: Grundgerüst mit HTML, CSS, PHP

    Hey, hab mir jetz nicht alles Komplett durch gelesen.

    Geht ihr es um die Page, oder darum um das zu lernen ?

    Wenn es dir um die Page geht, is es glaube leichter einfach nen cms zu nehmen.
     
    + Multi-Zitat Zitieren
  5. 8. März 2010
    AW: Grundgerüst mit HTML, CSS, PHP

    Ich möchte ja keine Disskussion ans Laufen bewegen aber ich glaube er sagte, dass er wieder mit Coden anfangen möchte
     
    + Multi-Zitat Zitieren
  6. 8. März 2010
    es geht mir um beides... also ich will lernen es zu coden und es auch hinkriegen, sodass es irgendwann gut aussieht und funtioniert...

    posten kann ich es...

    zum einen hier die HP (einfach nur zum testen auf ohost hochgeladen), wobei ich sagen muss dass ich schon wieder einiges versaut habe... die bilder hat er mir letztens noch alle nebeneinander angezeigt... jetzt komischerweise nicht mehr und ich weiß auch nicht, was ich jetzt wieder falsch gemacht habe...
    K E V I N L A N G E R | P H O T O G R A P H Y

    und zum anderen die codes:
    index.php:
    Code:
    <html>
 <head>
 <title>K E V I N L A N G E R | P H O T O G R A P H Y</title>
 <link rel="stylesheet" type="text/css" href="style.css">

 </head>
 
 <body id="haupt">
 <table id="tabelle" align="center" width="1000" valign="top" border="1">
 <tr align="center">
 <td width="100%">
 <?php include("navi.html"); ?>
 </td>
 </tr>
 <tr>
 <td width="100%" height="10">
 </td>
 </tr> 
 <tr align="center">
 <td width="100%">
 <p id="text">
 Der erste Text
<br>
<br>
<br>
<br>
<br>
<br>
askdjfklajsdflökj
<br>
<br>
<br>
<br>
jasdkfjö
 </p>
 </td>
 </tr>
 </table>
 </body>
</html>

    gallery.php:
    Code:
    <html>
 <head>
 <title>K E V I N L A N G E R | P H O T O G R A P H Y</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">

 <script type="text/javascript" src="js/prototype.js"></script>
 <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
 <script type="text/javascript" src="js/lightbox.js"></script>
 <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
 <link rel="stylesheet" type="text/css" href="style.css">

 </head>
 
 <body id="haupt">
 <table id="tabelle" align="center" width="1000" valign="top" border="1">
 <tr align="center">
 <td width="100%">
 <?php include("navi.html"); ?>
 </td>
 </tr>
 <tr>
 <td width="100%" height="10">
 </td>
 </tr> 
 <tr align="center">
 <td width="100%">
 <p id="text">
 BILDER
 </p>
 </td>
 </tr>
 <tr align="center">
 <a href="images/pictures/HDR_Autos.jpg" _fcksavedurl="Bild_01.jpg" rel="lightboxroadtrip" title="Fiat vs. Peugeot [HDR]"><img src="images/pictures/HDR_Autos.jpg" _fcksavedurl="Bild_01.jpg" border="0" title="Fiat vs. Peugeot [HDR]" height="96" width="146" /></a>
 <a href="images/pictures/HDR_Haus.jpg" _fcksavedurl="Bild_02.jpg" rel="lightboxroadtrip" title="Haus [HDR]"><img src="images/pictures/HDR_Haus.jpg" _fcksavedurl="Bild_02.jpg" border="0" title="Haus [HDR]" height="96" width="146" /></a>
 <a href="images/pictures/HDR_Muehle.jpg" _fcksavedurl="Bild_02.jpg" rel="lightboxroadtrip" title="Mühle [HDR["><img src="images/pictures/HDR_Muehle.jpg" _fcksavedurl="Bild_02.jpg" border="0" title="Mühle [HDR]" height="96" width="146" /></a>
 <a href="images/pictures/HDR_Schuppen2.jpg" _fcksavedurl="Bild_02.jpg" rel="lightboxroadtrip" title="Schuppen [HDR]"><img src="images/pictures/HDR_Schuppen2.jpg" _fcksavedurl="Bild_02.jpg" border="0" title="Schuppen [HDR]" height="96" width="146" /></a>
 </tr>

 </table>
 </body>
</html>

    style.css:
    Code:
    #haupt { margin-top:0px;
 margin-left:0px;
 margin-right:0px;
 padding:0px;
 background-image:url(back.jpg);
 background-repeat:repeat-y;
 background-attachment:fixed;
 background-color:191d2c;
 background-position:center;
}

a:link, a:visited, a:active, a:hover {
 font-family:Arial;
 font-size:14px;
 text-decoration:none;
 color:6abc00;
}

p#navi {
 align:center;
 font-family:Arial;
 font-size:14px;
 text-decoration:none;
 color:6abc00;
}

p#text {
 font-family: Arial;
 font-size: 14px;
 text-decoration: none;
 color:6abc00;
 align:left;
}

img#header {
position:center;
top:0px;
}

table#tabelle {
position:center;
top:0px;
}

    navi.html:
    Code:
    <img src="header.jpg" id="header">
 <p id="navi">
<table border="1">
<tr>
 <td>
 <a href="index.php">Home</a> | 
 </td>
 <td>
 <a href="about.php">About</a> | 
 </td>
 <td>
 <a href="gallery.php">Gallery</a> | 
 </td>
 <td>
 <a href="contact.php">Contact</a> | 
 </td>
 <td>
 <a href="links.php">Links</a>
 </td>
</tr>
</table>
 </p>


    denke ich hab durch mein vieles probieren schon wieder sehr viel mächtig versaut...

    zu den bildern: die will ich mit lightbox reinstellen... das funktioniert zum glück vernünftig ;-)

    genau :lol:

    was mir übrigens noch aufgefallen ist, ist, dass oben links auf der index seite komische zeichen in schwarz stehen... ich weiß bloß nicht wo die weg kommen... denke dass sich das alles daher um eine zeile nach unten drückt... bei der gallery ist es nicht so (also zumindest zu der zeit, wo die bilder noch alle nebeneinander waren, waren oben keine freie zeile^^)...

    habe auch schon probiert, die index.php als gleiche datei zu übernehmen und nur als about.php umzubenennen, weil ich schon dachte, die zeichen könnten von ohost kommen und werden nur auf der startseite dargestellt... dem ist aber nicht so... es wird bei dem gleich code immer die zeichen angezeigt.... keine ahnung warum^^
     
    + Multi-Zitat Zitieren
  7. 8. März 2010
    AW: Grundgerüst mit HTML, CSS, PHP

    Layout wird in CSS mit div-Layern gemacht und nicht in HTML mit Tabellen.

    Da ist ein ganz schönes Beispiel: Stichpunkt CSS: Layout ohne Tabellen

    Wenn du lernen willst, dann lerns richtig. Les dir den Metafragen-Sticky in "Webentwicklung" durch und beschäftige dich erst mal ein wenig mit dem Thema, bevor du dich an ein Projekt machst.
     
    + Multi-Zitat Zitieren
  8. 9. März 2010
    AW: Grundgerüst mit HTML, CSS, PHP

    aaah okay
    das ist mir auch neu, früher wurde noch alles sorgfältig mit tabellen gemacht... aber gut, werde mich da mal ran wagen, sieht jedenfalls nicht so schwer aus

    melde mich dann, wenn ich die erste seite fertig hab :] :]

    danke an alle die mir bisher geholfen haben
     
    + Multi-Zitat Zitieren
  9. 11. März 2010
    AW: Grundgerüst mit HTML, CSS, PHP

    Hallo ihr,

    ein interessantes Thema, zumal ich mich selbst für HTML und Websitedesign interessiere. Allerdings hab ich bisher noch nicht wirklich Ahnung.

    Wenn es drum geht, das zu lernen, wäre SELFHTML nicht so günstig oder? Habt ihr auch Tipps für Websitedesign? Geht mir in erster Linie um Grundschritte, das wäre schonmal klasse :]
     
    + Multi-Zitat Zitieren
  10. 11. März 2010
    AW: Grundgerüst mit HTML, CSS, PHP

    Ansonsten kannst du auch mal hier schauen:

    Webstandards-Projekt - Willkommen

    Dort gibt es auch viel zu lernen und erforschen besonders für Anfänger.
     
    + Multi-Zitat Zitieren
  11. 11. März 2010
    Sooooo das ganze nimmt langsam Gestalt an =)

    schaut doch mal rein:

    http://kevinphotography.ke.ohost.de


    Allerdings habe ich immer noch das gleiche Problem wie vorher, und zwar dass mir folgende Zeichen

    

    oben links in der Ecke angezeigt werden und sich komplett alles um eine Zeile nach unten verschiebt... ?( Woran kann das liegen? ?(


    Greetz,
    sit-in
    -----------------------------------------------------------
    aaah hab gerade eine lösung dafür gefunden...

    da ich ja mit dem ganz normalen editor code, habe ich das mit den editor einstellungen gespeichert... das heißt im format UTF-8...

    jetzt habe ich das ganze mal in verschiedenen formaten (unicode etc.) gespeichert, allerdings kamen hier dann nur noch symbole...

    letztendlich habe ich es mit "AINSI" probiert, mit welchem es nun endlich gegangen ist und die zeichen verschwunden sind =)


    :] :]
    ------------------------------------------------

    soo... ich habe jetzt wieder ein problem: und zwar weiß ich nicht, wie ich die fußzeile (mit copyright etc.) nach unten verschieben kann... habe schon alles erdenklich mögliche ausprobiert...

    Code:
    #fuss {
 background-color: #0a0d12;
 position: relative;
 height: 40px;
 width: 760px;
 bottom: 0px;
 left: 50%;
 margin-left: -380px;
 font-family: Arial;
 font-size: 10px;
 text-decoration: none;
 color: silver;
 text-align: center;
}
    habe ja eigentlich bottom: 0px hingeschrieben, aber irgendwie versetzt er es trotzdem nach oben, wie ihr hier sehen könnt:

    http://kevinphotography.ke.ohost.de/


    bitte um hilfe
     
    + Multi-Zitat Zitieren
  12. 29. März 2010
    AW: Grundgerüst mit HTML, CSS, PHP

    Das ist das "alte" Stick-Footer-Problem!

    Lies dir das durch, dann bekommst du es hin
    Make a Footer Stick to the Bottom of the Page
     
    + Multi-Zitat Zitieren
  13. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.

Auf dieses Thema antworten