Header in CSS Struktur umsetzen

chris_54 · #1 (**permalink**) 31.01.2016, 23:11

Hallo zusammen,

ich würde gerne einen weiteren php include von einer Website, nämlich den Header-Bereich, von einer alten table Struktur in eine HTML-Struktur und eine ausgelagerte CSS-Struktur umwandeln.
Der Header-Bereich der Website (via php include) ist wie folgt aufgebaut:

Struktur_php_includedatei.jpg

Schon vorab vielen Dank für den Support.

Viele Grüße

Chris

MrMurphy · #2 (**permalink**) 01.02.2016, 03:38

Hallo

So ein Layout zu erstellen ist eine Fingerübung für Anfänger.

Das Problem ist, dass aus einer abstrakten Grafik der Inhalt überhaupt nicht ersichtlich ist.

Die einzelnen Kästchen können also nur als inhaltsleere div erstellt werden. Damit wirst du aber nichts anfangen können.

Gruss

MrMurphy

chris_54 · #3 (**permalink**) 01.02.2016, 21:02

Hallo MrMurphy, Hallo zusammen,

es wäre schön wenn dies recht einfach zu bewerkstelligen wäre.
Deshalb habe ich das Layout noch einmal konkretisiert:

Struktur_php_includedatei_2.jpg

Das ganze Setup befindet sich in einem DIV-Container mit einer Breite von 1024px welches durch php include in die Website oben eingefügt wird.
Wenn man nun das Ganze (wie von Dir geschrieben) in weitere div oder ähnlichem einteilen könnte, dann wäre dies klasse.
Man könnte dann die jetzige table Struktur dort hinein transferieren.
Wäre also echt gut, wenn jemand hier einen Vorschlag für das beigefügte Setup hätte.

Schon vorab vielen Dank.

Chris

cloned · #4 (**permalink**) 02.02.2016, 07:21

Du hast dir deine Frage schon beantwortet, du musst nur statt Text ein Text-Element, statt Button ein Button-Element, statt dem Logo ein Bildelement etc. nehmen. Gibt es eine Liste von Links (Menü), dann nimm doch auch das Listenelement dafür. Wo ist da dein konkretes Problem?

chris_54 · #5 (**permalink**) 02.02.2016, 22:36

Hallo cloned, Hallo zusammen,

wäre schön wenn ich zur Anschauung einfach ein Beispiel für den HTMl-Teil und den CSS-Teil bekommen könnte.
Dann hat man eine Grundstruktur die man dann enstprechend adaptieren kann. Die vielen, notwendigen Verschachtelungen der unterschiedlichen DIVs sind für einen Anfänger doch ein wenig komplex.

Schon vielen Dank hierfür.

Gruß

Chris

cloned · #6 (**permalink**) 03.02.2016, 07:53

Du hast dein Grundgerüst schon zweimal selbst gepostet, wieso sollen wir dir hier die Arbeit abnehmen um <button> <ul> <li> ... etc. zu schreiben? Oder mangelt es dir an Grundlegenden HTML und CSS Kenntnissen? Dann fange mit einer einfachen Navigation an und wenn du diese verstehst, arbeite dich zu komplexeren Varianten vor.

chris_54 · #7 (**permalink**) 03.02.2016, 22:37

...ich habe mal angefangen, ggf. kann jemand weiter supporten:

HMTL:

HTML-Code:

<ul id="menu">
<ul id="oben">
  <li class="current"><a href="first.html">Button</a></li>
  <li><a href="second.html">Feld1</a></li>
  <li><a href="third.html">Feld2</a></li>
  <li><a href="fourth.html">Feld3</a></li>

</ul>

<ul id="avmenu">
  <li class="current"><a href="first.html">Button1 oben</a></li>
  <li><a href="second.html">Button2 oben</a></li>
  <li><a href="third.html">Button3 oben</a></li>
  <li><a href="fourth.html">Button4 oben</a></li>
</ul>
<ul id="avmenu">
  <li class="current"><a href="first.html">Button1 unten</a></li>
  <li><a href="second.html">Button2 unten</a></li>
  <li><a href="third.html">Button3 unten</a></li>
  <li><a href="fourth.html">Button3 unten</a></li>
</ul>
</ul>

CSS-Teil:

Code:

ul#oben {
margin: 40px 0;
padding: 0;
font: 12px Arial;
list-style-type: none;
}

ul#oben li {
display: inline;
}
  
ul#oben li a {
padding: 5px 120px;
border: 1px solid #aaa;
background-color: #eee;
color: #47a;
text-decoration: none;
}

ul#avmenu {
margin: 40px 0;
padding: 0;
font: 12px Arial;
list-style-type: none;
}
  
ul#avmenu li {
display: inline;
}
  
ul#avmenu li a {
padding: 5px 10px;
border: 1px solid #aaa;
background-color: #eee;
color: #47a;
text-decoration: none;
}
ul#avmenu a:hover {
background: #fff;
color: #222;
}
  
ul#avmenu li.current a {
border:1px solid #777;
}

Gerne würde ich alles auf eine Breite von 1024px auslegen.

Vielen Dank.

Chris

MrMurphy · #8 (**permalink**) 04.02.2016, 00:10

Hallo

Ich habe mal ein Layout mit deinen Größenangaben erstellt.

Ein Problem dabei ist, dass die Proportionen deiner Zeichnung nicht zu deinen Größenangaben passen. Aber das soll nicht mein Problem sein.

Auf Listen kann auch verzichtet werden. Die sind sachlich nicht erforderlich und erschweren nur unnötig den CSS-Quelltext:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>header 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   /*Meine persönlichen Grundeinstellungen für alle Seiten*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: Sans-Serif;
         font-size: 100%;
      }
      body {
         margin: 0;
      }
   }

   /* ==================================================== */
   /* ***Ab hier beginnen die Angaben zur Problemlösung*** */

   /*Spezielle Einstellungen*/
   @media all {
      header {
         overflow: hidden;
         width: 1024px;
         height: 172px;
         margin: 20px auto;
      }
      header>* {
         float: left;
      }
      header>:nth-child(1) {
         width: 20px;
         height: 40px;
         padding: 0;
         border: 3px solid blue;
         margin: 0 10px 0 0;
      }
      header>:nth-child(2) {
         width: 137px;
         height: 40px;
         padding: 0;
         border: 3px solid blue;
         margin: 0 10px 0 0;
      }
      header>:nth-child(3) {
         width: 137px;
         height: 40px;
         padding: 0;
         border: 3px solid blue;
         margin: 0 10px 0 0;
      }
      header>:nth-child(4) {
         width: 700px;
         height: 80px;
         padding: 0;
         border: 3px solid blue;
         margin: 0;
      }
      header>:nth-child(5) {
         width: 140px;
         height: 60px;
         padding: 0;
         border: 3px solid blue;
         margin: 32px 20px 0 0;
      }
      header>:nth-child(6) {
         overflow: hidden;
         width: 410px;
         height: 60px;
         padding: 0;
         border: 0;
         margin: 32px 20px 0 0;
      }
      header>:nth-child(6)>* {
         width: 65px;
         height: 25px;
         float: left;
         padding: 0;
         border: 3px solid blue;
         margin: 0 20px 0 0;
      }
      header>:nth-child(6)>:last-child {
         margin: 0;
      }
      header>:nth-child(7) {
         overflow: hidden;
         width: 410px;
         height: 60px;
         padding: 0;
         border: 0;
         margin: 32px 0 0 0;
      }
      header>:nth-child(7)>* {
         width: 80px;
         height: 25px;
         float: left;
         padding: 0;
         border: 3px solid blue;
         margin: 0 20px 0 0;
      }
      header>:nth-child(7)>:nth-last-child(1n+5) {
         margin: 0 20px 5px 0;
      }
   }

   /* ***       Ende der Angaben zur Problemlösung***       */
   /* ===================================================== */

   /* Vorlage zum Kopieren für Media Queries */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <header>
      <div></div>
      <a href="">Button</a>
      <a href="">Button</a>
      <div>
         <p>Logo 1 (700px x 80px)</p>
      </div>
      <div>
         <div>Logo 2</div>
         <div>140px x 60px</div>
      </div>
      <div>
         <div>Text</div>
         <div>Text</div>
         <div>Text</div>
         <div>Text</div>
         <div>Text</div>
      </div>
      <div>
         <a href="">Button</a>
         <a href="">Button</a>
         <a href="">Button</a>
         <a href="">Button</a>
         <a href="">Button</a>
         <a href="">Button</a>
         <a href="">Button</a>
         <a href="">Button</a>
      </div>
   </header>
</body>
</html>

Gruss

MrMurphy

chris_54 · #9 (**permalink**) 06.02.2016, 00:06

Hallo MrMurphy,

super, vielen Dank, das hilft schon einmal sehr weiter.

Was müsste ich machen, wenn ich aus dem derzeitigen Text-Bereich ebenfalls einen Button-Bereich machen möchte.
Wenn ich einfach aus dem Text z.B. einen klickbaren Text, bzw. Button mache, dann verschiebt sich alles um einen DIV-Bereich nach rechts und der derzeitige Text-Bereich (bzw. der neu in Button/Link umgewandelte Bereich) bleibt einfach leer?!?
Das verstehe ich nicht. Was muss man hier beim CSS bzw. HTML ändern?

Zur Veranschaulichung anbei noch ein Update des Layouts:

Struktur_php_includedatei_3.jpg

Schon vorab vielen Dank.

Gruß

Chris

chris_54 · #10 (**permalink**) 07.02.2016, 20:32

Hallo zusammen,

nun hat es mit der DIV-Formatierung geklappt (ich hatte noch einen Fehler mit einem fehlenden <a>-Element), aber nur in der Darstellung via Firefox und Chrom.
Beim IE werden komischerweise alle DIV-Boxen an der linken Seite vertikal untereinander dargestellt?!?
Muss man beim IE etwas besonderes berücksichtigen, oder ggf. noch zusätzlich einfügen?

Ich habe bereits in der index.html, aber nicht in der php-include folgenden Quelltext eingebunden:

Code:

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Schon vorab vielen Dank für den Support.

Viele Grüße

Chris

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Struktur mit table durch CSS ersetzen	chris_54	CSS	3	31.01.2016 22:45
Anpassen eines CSS Templates - JPEG als Hintergrundbild setzen	soulknot	CSS	1	08.05.2011 17:31
Bitte um Hilfe - CSS und Prozentangaben	sprefer	CSS	3	01.03.2011 04:11
Wechselnder Header über (X)HTML oder CSS?	Xtremo	Barrierefreiheit	12	20.03.2007 21:06
flash header in CSS	mamuschka	CSS	2	12.03.2006 19:07