Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 25 von 26

Thema: Erstellen einer Webseite - Brauche Hilfe

  1. #1
    gesperrt
    Registriert seit
    Jul 2013
    Ort
    Hannover
    Beiträge
    26.125
    ngb:news Artikel
    2

    Erstellen einer Webseite - Brauche Hilfe

    Guten morgen ngb,

    eigentlich wollte ich eine kleine ngb Pause machen, werde ich danach auch wieder tun, brauche aber Hilfe von HTML-Kennern. :-)

    Anbei eine HTML, wo oben links und oben rechts Logo sind. Das Rechte Logo ist allerdings nicht auf der Position wie das Linke. Das Rechte soll aber genauso hoch sein wie das Linke.

    lc.zip

    Wie muss dann der Code lauten?

    Es betrifft die Zeile 9 (?) bis 11.

    Die Logo sind ggf. nur dummy oder Platzhalter.

    Es handelt sich um ein freewebtemplate, welches ich für mich abändere.

    Gruß Steev

  2. #2

    Re: Erstellen einer Webseite - Brauche Hilfe

    Zip-Datei?
    Warum nicht codepen oder Konsorten?
    Für diesen Beitrag bedankt sich BurnerR

  3. #3
    gesperrt

    (Threadstarter)


    Registriert seit
    Jul 2013
    Ort
    Hannover
    Beiträge
    26.125
    ngb:news Artikel
    2

    Re: Erstellen einer Webseite - Brauche Hilfe

    In der ZIP steckt auch das ganze .css, die .images usw.

    Klicke auf die Grafik für eine größere Ansicht 

Name:	lcpic.JPG 
Hits:	24 
Größe:	68,5 KB 
ID:	58746

  4. #4
    Zeitreisender

    Administrator

    Avatar von drfuture
    Registriert seit
    Jul 2013
    Ort
    in der Zukunft
    Beiträge
    7.331
    ngb:news Artikel
    18

    Re: Erstellen einer Webseite - Brauche Hilfe

    ohne nun das ganze Ding zu verändert (z.B. passt sich das Layout halt nicht dem Viewport an):

    eine neue css-class:
    Code (CSS):
    1. #page #header img.logor {
    2.     position:absolute;
    3.     left:767px;
    4.     top:40px;
    5. }
    und das logo ändern in:

    Code (HTML5):
    1.             <a href="index.html"><img class="logo" src="images/LClogo.png" width="110" height="110" alt=""></a>
    2.             <img src="images/LClogo.png" width="110" height="110" alt="" class="logor">
    Für diesen Beitrag bedankt sich Steev
    |_|D *`~{ Ich kenne deine Zukunft }~´* |_|D

  5. #5
    sglatschtglei... Avatar von M315T3R
    Registriert seit
    Jul 2013
    Ort
    Bier
    Beiträge
    2.527

    Re: Erstellen einer Webseite - Brauche Hilfe

    In der /css/style.css Zeile 24 bis 32 top:40px anpassen

    #page #header img.logo {
    position:absolute;
    left:25px;
    top:40px;
    }
    #page #header span {
    position:absolute;
    left:767px;
    top:40px;


    Tante Edit sagt: Da war einer schneller
    Für diesen Beitrag bedankt sich Steev
    139% der Leute übertreiben.

  6. #6
    gesperrt

    (Threadstarter)


    Registriert seit
    Jul 2013
    Ort
    Hannover
    Beiträge
    26.125
    ngb:news Artikel
    2

    Re: Erstellen einer Webseite - Brauche Hilfe

    @drfuture:

    Ich hoffe, ich habe alles richtig gemacht (aus dein logor allerdings auch ein logo), aber jetzt ist das Logo Nur rechts oben.

    Klicke auf die Grafik für eine größere Ansicht 

Name:	lcnew.JPG 
Hits:	27 
Größe:	118,2 KB 
ID:	58747

    Edit: Achso, eine Neue Class logor, bewusst mit "R"? Ich teste mal.

    Edit2: Ich hielt das für einen Rechtschreibfehler, aber du meinst damit "Rechts".

    Edit3: Ok, jetzt habe ich es so gemacht und das Logo ist Nur links

    Klicke auf die Grafik für eine größere Ansicht 

Name:	lcnew2.JPG 
Hits:	18 
Größe:	124,4 KB 
ID:	58749

    Code (CSS):
    1. body {
    2.     margin:0;
    3.     padding:0;
    4.     background:url("../images/pattern.jpg");
    5.     line-height:25px;
    6. }
    7. a {
    8.     outline:0;
    9. }
    10. img {
    11.     border:0;
    12. }
    13. #page {
    14.     width:100%;
    15. }
    16. #page #header {
    17.     width:960px;
    18.     height:210px;
    19.     margin:0 auto;
    20.     text-align:center;
    21.     position:relative;
    22. }
    23. #page #header img.logo {
    24.     position:absolute;
    25.     left:25px;
    26.     top:40px;
    27. }
    28. #page #header img.logor {
    29.     position:absolute;
    30.     left:25px;
    31.     top:40px;
    32. }
    33. #page #header span {
    34.     position:absolute;
    35.     left:767px;
    36.     top:70px;
    37. }
    Code (HTML):
    1. <a href="index.html"><img class="logo" src="images/LClogo.png" width="110" height="110" alt=""></a>
    2.             <img src="images/LClogo.png" width="110" height="110" alt="" class="logor">
    Geändert von Steev (06.04.21 um 11:35 Uhr)

  7. #7
    Zeitreisender

    Administrator

    Avatar von drfuture
    Registriert seit
    Jul 2013
    Ort
    in der Zukunft
    Beiträge
    7.331
    ngb:news Artikel
    18

    Re: Erstellen einer Webseite - Brauche Hilfe

    bei dir steht bei #page #header img.logor auch eindeutig etwas anderes als bei mir
    Für diesen Beitrag bedankt sich Steev
    |_|D *`~{ Ich kenne deine Zukunft }~´* |_|D

  8. #8
    gesperrt

    (Threadstarter)


    Registriert seit
    Jul 2013
    Ort
    Hannover
    Beiträge
    26.125
    ngb:news Artikel
    2

    Re: Erstellen einer Webseite - Brauche Hilfe

    Code (Text):
    1. left:767px;
    das lag am c&p


    Cool, ja funktioniert jetzt , jetzt gibt's hier und da noch was zu tüfteln, aber der Kunde ist bereits allgemein zufrieden.

    Danke dir.

  9. #9
    gesperrt

    (Threadstarter)


    Registriert seit
    Jul 2013
    Ort
    Hannover
    Beiträge
    26.125
    ngb:news Artikel
    2

    Re: Erstellen einer Webseite - Brauche Hilfe

    Guten morgen, habe gerade überlegt ob meine fast-rein-text Webseite (+ .JPG und 1 OneDrive Link + E-Mail-Adresse-Link + Mobilphone Link) Cookies verwendet und ich den "Cookies zulassen" Dialog einbauen muss. EU-Verordnung. Es gibt wohl so Tester online, aber sie ist ja noch nicht online. Da bin ich DAU

    Spoiler: 


  10. #10
    Zeitreisender

    Administrator

    Avatar von drfuture
    Registriert seit
    Jul 2013
    Ort
    in der Zukunft
    Beiträge
    7.331
    ngb:news Artikel
    18

    Re: Erstellen einer Webseite - Brauche Hilfe

    Vermutlich nein, kannst du im Browser selber sehen, z.b. dort wo man die Cookies löscht oder in den dev Tools.
    Davon abgesehen braucht man das in Deutschland eigentlich nicht wirklich.

    Die Frage ist (und die ist nicht böse gemeint) ob du Seiten verkaufen solltest wenn du nicht einmal weißt ob deine eigene Seite Cookies erzeugt.

    Ist z.b. Impressum und Datenschutz Hinweis korrekt?
    Für diesen Beitrag bedankt sich Steev
    |_|D *`~{ Ich kenne deine Zukunft }~´* |_|D

  11. #11

    Re: Erstellen einer Webseite - Brauche Hilfe

    So wie ich die Regelung verstehe, brauchst du nur die Cookie-Vereinbarung, so fern du wirklich Cookies verwendest. Wenn deine Webseite keine Cookies nutzt, brauchst du also nichts in der Richtung tun. Ansonsten solltest du aufklären warum du Cookies verwendest und das extra Bestätigen lassen. Wenn du dir unsicher bist, schau in die Entwickler-Konsole (Taste F12) in deinem Browser und schau ob Cookies gesetzt werden.
    Für diesen Beitrag bedankt sich Steev

  12. #12
    gesperrt

    (Threadstarter)


    Registriert seit
    Jul 2013
    Ort
    Hannover
    Beiträge
    26.125
    ngb:news Artikel
    2

    Re: Erstellen einer Webseite - Brauche Hilfe

    Zitat Zitat von drfuture Beitrag anzeigen
    Impressum und Datenschutz Hinweis korrekt?
    Ein Impressum gibt es vollkommen transparent und offiziell, einen DSGVO Hinweis nicht.

    Ich schreibe hier demnächst oder bald die URL rein, dann wird es vllt. deutlicher.

  13. #13

    Re: Erstellen einer Webseite - Brauche Hilfe

    Den Keks-Hinweis braucht man in Deutschland nicht. Erst wenn man Trackingcoockies setzt, sollte man darüber nachdenken.
    Für diesen Beitrag bedankt sich Steev

  14. #14

    Re: Erstellen einer Webseite - Brauche Hilfe

    @one: Bist du dir da sicher? Es reicht doch schon eine Google Maps Einbindung für eine Anfahrtskarte oder Google Analytics zu integrieren, und das muß man zulassen und auch "opt-out" anbieten - so kenne ich das zumindest. Und so ist es dann auch DSGVO Konform.

    Ich lasse mich aber gern eines besseren belehren.

  15. #15
    Cloogshicer®

    Moderator

    Avatar von dexter
    Registriert seit
    Jul 2013
    Beiträge
    3.125

    Re: Erstellen einer Webseite - Brauche Hilfe

    Zitat Zitat von theSplit Beitrag anzeigen
    @one: Bist du dir da sicher? Es reicht doch schon eine Google Maps Einbindung für eine Anfahrtskarte oder Google Analytics zu integrieren, und das muß man zulassen und auch "opt-out" anbieten
    Im Moment wo irgndwas von Google ins Spiel kommt, kommt Tracking ins Spiel. Anfahrt via Google Map=Tracking.
    Corona ist Harmlos.

    And if you choose to fail us i say: we will never forgive you

  16. #16

    Re: Erstellen einer Webseite - Brauche Hilfe

    Ja, bin ich mir sicher. Solange nichts getrackt wird, ist der Hinweis in Deutschland nicht notwendig. Es ist aber eben auch so wie dexter sagt, bei Fremdcookies kann man sich nie sicher sein (oder eben doch) und dann braucht es auch den Hinweis. Im Grundgedanken zielt dieser Pflicht-Hinweis auch auf genau solche Cookies ab. Die, welche Dich zum Beispiel nur wiedererkennen (einloggen) oder Deinen Warenkorb speichern, waren nie im Fadenkreuz. Zur Sicherheit bindet aber fast jede Seite grundsätzlichen diese nervenden Hinweise ein.

    Google arbeitet ja aber schon daran, Tracking abzuschaffen. Was die Werbebranche nebenbei extrem nervt.

  17. #17
    gesperrt

    (Threadstarter)


    Registriert seit
    Jul 2013
    Ort
    Hannover
    Beiträge
    26.125
    ngb:news Artikel
    2

    Re: Erstellen einer Webseite - Brauche Hilfe

    Wie füge ich denn eine normale URL ein, so dass sie anklickbar ist?

    Wenn ich einfach im HTML-Text die URL einfüge

    Code (HTML):
    1. ...dies ist ein link https://www.google.de text weiter...
    so ist die URL letztlich im Browser nur ein Text, kein Link.

    Ich kenne den Weg über
    Code (HTML):
    1. <a href="https://www.google.de">Linktext</a>
    aber ich möchte nur die URL, keinen Linktext.

    Wisst ihr was ich meine?

  18. #18
    Zeitreisender

    Administrator

    Avatar von drfuture
    Registriert seit
    Jul 2013
    Ort
    in der Zukunft
    Beiträge
    7.331
    ngb:news Artikel
    18

    Re: Erstellen einer Webseite - Brauche Hilfe

    <a href="https://www.google.de">https://www.google.de</a>
    |_|D *`~{ Ich kenne deine Zukunft }~´* |_|D

  19. #19
    Mitglied Avatar von saddy
    Registriert seit
    Jul 2013
    Ort
    *.*
    Beiträge
    3.942

    Re: Erstellen einer Webseite - Brauche Hilfe

    Code (HTML5):
    1.     <a href="https://www.google.de">https://www.google.de</a>


    Edit: Pffft

  20. #20
    gesperrt

    (Threadstarter)


    Registriert seit
    Jul 2013
    Ort
    Hannover
    Beiträge
    26.125
    ngb:news Artikel
    2

    Re: Erstellen einer Webseite - Brauche Hilfe

    ok, dann mache ich das so.

  21. #21
    gesperrt

    (Threadstarter)


    Registriert seit
    Jul 2013
    Ort
    Hannover
    Beiträge
    26.125
    ngb:news Artikel
    2

    Re: Erstellen einer Webseite - Brauche Hilfe

    Könnt ihr mir nochmal helfen?

    Ich will die beiden Bilder bzw. Links nebeneinander haben und nicht untereinander, wie lässt sich das machen?

    Das ist der Code

    Code (HTML):
    1. <!DOCTYPE html>
    2.     <title>Title</title>
    3.     <meta charset="utf-8">
    4.     <link href="css/style.css" rel="stylesheet" type="text/css">
    5. </head>
    6.     <div id="page">
    7.         <div id="header">
    8.             <a href="index.html"><img class="logo" src="images/logo.png" width="95" height="95" alt=""></a>
    9.             <ul class="navigation">
    10.                 <li>
    11.                     <a href="index.html">1</a>
    12.                 </li>
    13.                 <li>
    14.                     <a href="about.html">2</a>
    15.                 </li>
    16.                 <li>
    17.                     <a href="angebot.html">3</a>
    18.                 </li>
    19.                 <li class="active">
    20.                     <a href="referenzen.html">4</a>
    21.                 </li>
    22.                 <li class="last">
    23.                     <a href="kontakt.html">5</a>
    24.                 </li>
    25.             </ul>
    26.         </div>
    27.         <div id="body">
    28.             <div class="content">
    29.                 <div>
    30.                     <ul class="section">
    31.                         <li>
    32.                             <h2><a>Überschrift</a></h2><br>
    33.                             <p>
    34.                                 <h2><a href="URL1" title="Title1">
    35.     <img alt="Title1" src="images/test.jpg" width="300" height="424" /></a></h2>
    36. <p>Bild anlicken zum PDF Download</p>
    37.                             </p>
    38.                             <h2><a>Überschrift 2</a></h2><br>
    39.                             <p>
    40.                                 <h2><a href="URL2" title="Title2">
    41.     <img alt="Title2" src="images/test.jpg" width="300" height="424" /></a></h2>
    42. <p>Bild anlicken zum PDF Download</p>
    43.                             </p>
    44.                         </li>
    45.                     </ul>
    46.                 </div>
    47.             </div>
    48.             <!-- End of Content-->
    49.         </div>
    50.         <div id="footer">
    51.         <span class="contact"><a href="mailto:info@webseite.de" >info@webseite.de</a> | <a href="tel:+4912345678" >+49 (0)12345678</a></span>
    52.             <span class="footnote"> &copy; 2021. Alle Rechte vorbehalten. </span> </div>
    53.     </div>
    54. </body>
    55. </html>
    Code:
    1. /** Website template by freewebsitetemplates.com **/
    2. body {
    3.     margin:0;
    4.     padding:0;
    5.     background:url("../images/pattern.jpg");
    6.     line-height:25px;
    7. }
    8. a {
    9.     outline:0;
    10. }
    11. img {
    12.     border:0;
    13. }
    14. #page {
    15.     width:100%;
    16. }
    17. #page #header {
    18.     width:960px;
    19.     height:210px;
    20.     margin:0 auto;
    21.     text-align:center;
    22.     position:relative;
    23. }
    24. #page #header img.logo {
    25.     position:absolute;
    26.     left:25px;
    27.     top:40px;
    28. }
    29. #page #header img.logor {
    30.     position:absolute;
    31.     left:767px;
    32.     top:40px;
    33. }
    34. #page #header span {
    35.     position:absolute;
    36.     left:767px;
    37.     top:70px;
    38. }
    39. #page #header span h3 {
    40.     font-family:Arial;
    41.     color:#252823;
    42.     font-size:16px;
    43.     font-weight:normal;
    44.     margin:0;
    45.     height:37px;
    46. }
    47. #page #header span h2 {
    48.     color:#252823;
    49.     font-family:Arial;
    50.     font-size:20px;
    51.     margin:0;
    52.     text-shadow:0 0px 0 #ccc;
    53. }
    54. #page #header ul.navigation {
    55.     list-style-type:none;
    56.     margin:190px 0 0 0;
    57.     padding:1px 0 3px 0;
    58.     display:inline-block;
    59.     background:transparent url("../images/bg-menu-body.png");
    60.     background-repeat:repeat-x;
    61.     background-position:center;
    62.     height:38px;
    63.     line-height:44px;
    64.     border-style:solid;
    65.     border-top:none;
    66.     border-bottom:none;
    67.     border-color:#ffffff;
    68.     border-width:1px;
    69.     -moz-border-radius:10px;
    70.     border-radius:10px;
    71. }
    72. #page #header ul.navigation li {
    73.     float:left;
    74.     height:40px;
    75.     padding:0;
    76.     margin:0;
    77. }
    78. #page #header ul.navigation li.first:hover {
    79.     -moz-border-radius:10px 0 0 10px;
    80.     border-radius:10px 0 0 10px;
    81. }
    82. #page #header ul.navigation li.last:hover {
    83.     -moz-border-radius:0 10px 10px 0;
    84.     border-radius:0 10px 10px 0;
    85. }
    86. #page #header ul.navigation li a {
    87.     display:block;
    88.     text-decoration:none;
    89.     padding:0 20px;
    90.     font-family:Arial;
    91.     color:#646b60;
    92.     font-size:15px;
    93.     font-weight:bold;
    94.     text-transform:uppercase;
    95.     text-shadow:0 1px 0 #ffffff;
    96. }
    97. #page #header ul.navigation li:hover {
    98.     background:transparent url("../images/bg-menu-li.png");
    99.     background-repeat:repeat-x;
    100. }
    101. #page #header ul.navigation li:hover a {
    102.     background:transparent url("../images/bg-menu-arrow-selected.png");
    103.     background-repeat:no-repeat;
    104.     background-position:top center;
    105.     color:#fff9ae;
    106.     text-shadow:1px 0 1px #787b5a;
    107. }
    108. #page #header ul.navigation li.active {
    109.     background:transparent url("../images/bg-menu-li.png");
    110.     background-repeat:repeat-x;
    111. }
    112. #page #header ul.navigation li.active a {
    113.     background:transparent url("../images/bg-menu-arrow-selected.png");
    114.     background-repeat:no-repeat;
    115.     background-position:top center;
    116.     color:#fff9ae;
    117.     text-shadow:1px 0 1px #787b5a;
    118. }
    119. #page #header ul.navigation li.first.active {
    120.     display:inline-block;
    121.     -moz-border-radius:10px 0 0 10px;
    122.     border-radius:10px 0 0 10px;
    123. }
    124. #page #header ul.navigation li.last.active {
    125.     display:inline-block;
    126.     -moz-border-radius:0 10px 10px 0;
    127.     border-radius:0 10px 10px 0;
    128. }
    129. #page #body {
    130.     width:960px;
    131.     margin:0 auto;
    132.     background:transparent url("../images/bg-featured-top-shadow.png");
    133.     background-repeat:no-repeat;
    134.     background-position:top center;
    135.     padding-top:9px;
    136. }
    137. #page #body #content {
    138.     width:960px;
    139.     margin:0 auto;
    140.     padding:0;
    141. }
    142. #page #body #content div#featured {
    143.     width:900px;
    144.     border-style:solid;
    145.     border-color:#fff799;
    146.     border-width:2px;
    147.     border-top:none;
    148.     border-right:none;
    149.     border-left:none;
    150.     background-color:#ffffff;
    151.     padding:50px 30px 30px 30px;
    152.     overflow:hidden;
    153. }
    154. #page #body #content div#featured h2,h3,h4,h5,h6 {
    155.     margin:0;
    156. }
    157. #page #body #content div#featured h2 {
    158.     font-family:Arial;
    159.     font-size:22px;
    160.     color:#3d4c33;
    161.     margin-top:20px;
    162.     width:460px;
    163. }
    164. #page #body #content div#featured h2 a {
    165.     text-decoration:none;
    166.     font-family:Arial;
    167.     font-size:21px;
    168.     color:#3d4c33;
    169.     line-height:43px;
    170.     font-weight:normal;
    171.     text-align:center;
    172.     letter-spacing:1px;
    173.     display:block;
    174. }
    175. #page #body #content div#featured h2 a span {
    176.     font-family:Arial;
    177.     font-size:31px;
    178.     color:#3d4c33;
    179.     letter-spacing: 2px;
    180. }
    181. #page #body #content div#featured a.readmore {
    182.     background:url("../images/interface.png") no-repeat scroll 0 -101px transparent;
    183.     display:block;
    184.     height:51px;
    185.     width:462px;
    186.     line-height:48px;
    187.     text-align:center;
    188.     text-decoration:none;
    189.     font-family:Arial;
    190.     font-weight:bold;
    191.     font-size:22px;
    192.     color:#533a10;
    193.     text-shadow:0 1px 0 #ffffff;
    194.     text-transform:uppercase;
    195. }
    196. #page #body #content div#featured a.readmore:hover {
    197.     background:url("../images/interface.png") no-repeat scroll 0 0 transparent;
    198. }
    199. #page #body #content div#featured a img {
    200.     float:right;
    201.     margin:0 10px;
    202. }
    203. #page #body #content div#featured p {
    204.     font-family:Arial;
    205.     font-size:14px;
    206.     color:#2e3b25;
    207.     line-height:30px;
    208.     text-align:justify;
    209.     width:460px;
    210. }
    211. #page #body #content div#featured p a {
    212.     font-family:Arial;
    213.     font-size:14px;
    214.     color:#2e3b25;
    215. }
    216. #page #body #content div#featured p a:hover {
    217.     font-family:Arial;
    218.     font-size:14px;
    219.     text-decoration:none;
    220. }
    221. #page #body #content div.articles {
    222.     width:960px;
    223.     height:237px;
    224.     background:transparent url("../images/bg-brown-round-bottom.png");
    225.     background-repeat:no-repeat;
    226.     background-position:bottom center;
    227.     padding-bottom:7px;
    228. }
    229. #page #body #content div.articles div {
    230.     background-color:#35271f;
    231.     width:940px;
    232.     height:237px;
    233.     padding:0 10px;
    234. }
    235. #page #body #content div.articles div h2, h3,h4,h5,h6 {
    236.     margin:0;
    237.     height:50px;
    238.     line-height:50px;
    239.     font-family:Arial;
    240.     font-size:22px;
    241.     color:#ffffff;
    242.     font-weight:normal;
    243.     text-transform:uppercase;
    244.     text-align:center;
    245. }
    246. #page #body #content div.articles div h2 {
    247.     background:url("../images/border-horizontal.jpg");
    248.     background-repeat:repeat-x;
    249.     background-position:bottom center;
    250.     margin-bottom:7px;
    251. }
    252. #page #body #content div.articles div ul {
    253.     list-style-type:none;
    254.     margin:0;
    255.     padding:0;
    256. }
    257. #page #body #content div.articles div ul li {
    258.     float:left;
    259.     width:280px;
    260.     padding:0 15px;
    261.     background:url("../images/border-vertical.jpg");
    262.     background-repeat:repeat-y;
    263.     background-position:left;
    264. }
    265. #page #body #content div.articles div ul li.first {
    266.     background-image:none;
    267. }
    268. #page #body #content div.articles div ul li h2,h3,h4,h5,h6 {
    269.     font-family:Arial;
    270.     font-size:18px;
    271.     font-weight:normal;
    272.     color:#c2c2c1;
    273.     background:none;
    274.     text-transform:none;
    275.     text-align:left;
    276. }
    277. #page #body #content div.articles div ul li h2 a {
    278.     text-decoration:none;
    279.     font-family:Arial;
    280.     font-size:18px;
    281.     font-weight:normal;
    282.     color:#c2c2c1;
    283. }
    284. #page #body #content div.articles div ul li h2 a:hover {
    285.     text-decoration:none;
    286.     font-family:Arial;
    287.     font-size:18px;
    288.     font-weight:normal;
    289.     color:#ffffff;
    290. }
    291. #page #body #content div.articles div ul li p {
    292.     font-family:Arial;
    293.     font-size:14px;
    294.     color:#726c66;
    295.     margin-top:0;
    296.     letter-spacing: 1px;
    297. }
    298. #page #body #content div.articles div ul li p a {
    299.     color:#726c66;
    300. }
    301. #page #body #content div.articles div ul li p a:hover {
    302.     color:#ffffff;
    303. }
    304. #page #body #content div.connect {
    305.     margin-top:40px;
    306.     height:60px;
    307.     width:960px;
    308.     background:url("../images/border.jpg");
    309.     background-repeat:repeat-x;
    310.     background-position:top;
    311. }
    312. #page #body #content div.connect div {
    313.     height:60px;
    314.     line-height:60px;
    315.     width:940px;
    316.     padding:0 10px;
    317.     background:url("../images/border.jpg");
    318.     background-repeat:repeat-x;
    319.     background-position:bottom;
    320. }
    321. #page #body #content div.connect div a.twitter {
    322.     background:url("../images/twitter-update.png");
    323.     background-repeat:repeat-x;
    324.     background-position:center center;
    325.     height:23px;
    326.     width:192px;
    327.     display:block;
    328.     text-decoration:none;
    329.     float:left;
    330.     margin:18px 20px 0 0;
    331. }
    332. #page #body #content div.connect div p {
    333.     font-family:Arial;
    334.     font-size:14px;
    335.     font-weight:normal;
    336.     color:#252823;
    337.     text-align:justify;
    338. }
    339. #page #body #content div.connect div p a {
    340.     font-family:Arial;
    341.     font-size:14px;
    342.     color:#252823;
    343. }
    344. #page #body #content div.connect div p a:hover {
    345.     font-family:Arial;
    346.     font-size:14px;
    347.     color:#033842;
    348. }
    349. #page #body #content div.connect div p a.user {
    350.     font-family:Arial;
    351.     font-size:14px;
    352.     color:#252823;
    353.     text-decoration:none;
    354. }
    355. #page #body #content div.connect div p a.user:hover {
    356.     color:#033842;
    357.     text-decoration:underline;
    358. }
    359. #page #body #content div.section {
    360.     width:960px;
    361.     margin-top:40px;
    362.     overflow:hidden;
    363. }
    364. #page #body #content div.section ul {
    365.     list-style-type:none;
    366.     margin:0;
    367.     padding:0;
    368. }
    369. #page #body #content div.section ul li.first {
    370.     width:610px;
    371.     height:300px;
    372.     float:left;
    373.     margin-right:40px;
    374.     background:url("../images/border.jpg");
    375.     background-repeat:repeat-x;
    376.     background-position:bottom;
    377. }
    378. #page #body #content div.section ul li.first h2 {
    379.     height:60px;
    380.     line-height:60px;
    381.     font-family:Helvetica;
    382.     font-size:24px;
    383.     color:#252823;
    384.     background:url("../images/border.jpg");
    385.     background-repeat:repeat-x;
    386.     background-position:bottom;
    387. }
    388. #page #body #content div.section ul li.first ul {
    389.     list-style-type:none;
    390.     margin:0;
    391.     padding:20px 0;
    392. }
    393. #page #body #content div.section ul li.first ul li a img {
    394.     float:left;
    395.     margin:0 10px 10px 0;
    396. }
    397. #page #body #content div.section ul li.first ul li p {
    398.     font-family:Arial;
    399.     font-size:14px;
    400.     color:#252823;
    401.     margin-top:0;
    402.     letter-spacing: 1px;
    403.     text-align:justify;
    404. }
    405. #page #body #content div.section ul li.first ul li p a {
    406.     font-family:Arial;
    407.     font-size:14px;
    408.     color:#343831;
    409. }
    410. #page #body #content div.section ul li.first ul li p a:hover {
    411.     color:#033842;
    412. }
    413. #page #body #content div.section ul li.first ul li p a.readmore {
    414.     text-decoration:none;
    415. }
    416. #page #body #content div.section ul li.first ul li p a.readmore:hover {
    417.     color:#033842;
    418. }
    419. #page #body #content div.section ul li.first ul li h2 {
    420.     font-family:Arial;
    421.     font-size:14px;
    422.     color:#252823;
    423.     background-image:none;
    424.     line-height:25px;
    425.     margin-bottom:0;
    426.     height:auto;
    427.     margin-top:0;
    428. }
    429. #page #body #content div.section ul li.first ul li h2 a {
    430.     font-family:Arial;
    431.     font-size:14px;
    432.     color:#252823;
    433.     text-decoration:none;
    434.     background-image:none;
    435.     font-weight:bold;
    436.     text-transform:uppercase;
    437.     line-height:25px;
    438. }
    439. #page #body #content div.section ul li.last {
    440.     height:300px;
    441.     width:310px;
    442.     float:left;
    443.     background:url("../images/border.jpg");
    444.     background-repeat:repeat-x;
    445.     background-position:bottom;
    446. }
    447. #page #body #content div.section ul li.last h2 {
    448.     height:60px;
    449.     line-height:60px;
    450.     font-family:Helvetica;
    451.     font-size:24px;
    452.     color:#252823;
    453.     background:url("../images/border.jpg");
    454.     background-repeat:repeat-x;
    455.     background-position:bottom;
    456. }
    457. #page #body #content div.section ul li.last ul {
    458.     list-style-type:none;
    459.     margin:0;
    460.     padding:20px 0;
    461. }
    462. #page #body #content div.section ul li.last ul li {
    463.     height:70px;
    464.     background-image:none;
    465.     margin:0;
    466. }
    467. #page #body #content div.section ul li.last ul li h2 {
    468.     background-image:none;
    469.     float:left;
    470.     height:20px;
    471.     line-height:20px;
    472.     margin:0;
    473.     text-align:center;
    474.     width:20px;
    475.     font-family:Arial;
    476.     font-size:12px;
    477.     color:#343831;
    478. }
    479. #page #body #content div.section ul li.last ul li h2 span {
    480.     float:left;
    481.     margin:0;
    482.     font-family:Arial;
    483.     font-size:22px;
    484.     font-weight:bold;
    485. }
    486. #page #body #content div.section ul li.last ul li span {
    487.     float:left;
    488.     height:auto;
    489.     margin:0;
    490. }
    491. #page #body #content div.section ul li.last ul li p {
    492.     float:right;
    493.     width:260px;
    494.     margin:0;
    495.     font-family:Arial;
    496.     font-size:14px;
    497. }
    498. #page #body #content div.section ul li.last ul li a {
    499.     float:right;
    500.     width:260px;
    501.     margin:0;
    502.     font-family:Arial;
    503.     font-size:14px;
    504.     text-decoration:none;
    505.     color:#252823;
    506. }
    507. #page #body #content div.section ul li.last ul li a:hover {
    508.     color:#033842;
    509.     text-decoration:underline;
    510. }
    511. #page #body div.content {
    512.     background:url("../images/bg-bottom-inner-content.png");
    513.     background-repeat:repeat-x;
    514.     background-position:bottom center;
    515.     padding-bottom:7px;
    516.     width:960px;
    517. }
    518. #page #body div.content div {
    519.     background-color:#ffffff;
    520.     overflow:hidden;
    521.     padding:80px 30px;
    522. }
    523. #page #body div.content div h1,h2,h3,h4,h5,h6 {
    524.     margin:0;
    525.     padding:0;
    526. }
    527. #page #body div.content div ul.section {
    528.     list-style-type:none;
    529.     margin:0;
    530.     padding:0;
    531. }
    532. #page #body div.content div ul.section li {
    533.     margin-bottom:30px;
    534. }
    535. #page #body div.content div ul.section li h2 {
    536.     font-family:Arial;
    537.     font-size:20px;
    538.     color:#252823;
    539.     font-weight:normal;
    540. }
    541. #page #body div.content div ul.section li h4 {
    542.     font-family:Arial;
    543.     font-size:14px;
    544.     color:#252823;
    545.     font-weight:normal;
    546.     margin:0;
    547.     padding:0;
    548.     height:35px;
    549.     text-transform:uppercase;
    550. }
    551. #page #body div.content div ul.section li h3 {
    552.     font-family:Arial;
    553.     font-size:14px;
    554.     color:#252823;
    555.     font-weight:normal;
    556.     margin:0;
    557.     padding:0;
    558.     height:35px;
    559. }
    560. #page #body div.content div ul.section li h2 a {
    561.     font-family:Arial;
    562.     font-size:20px;
    563.     color:#252823;
    564.     text-decoration:none;
    565.     font-weight:normal;
    566.     text-transform:uppercase;
    567. }
    568. #page #body div.content div ul.section li h2 a:hover {
    569.     color:#252823;
    570. }
    571. #page #body div.content div ul.section li p {
    572.     font-family:Arial;
    573.     font-size:14px;
    574.     color:#252823;
    575.     margin:10px 0 10px 0;
    576.     line-height:30px;
    577.     text-align:justify;
    578.     letter-spacing: 1px;
    579. }
    580. #page #body div.content div ul.section li p a {
    581.     font-family:Arial;
    582.     font-size:14px;
    583.     color:#252823;
    584.     margin:0 0 10px 0;
    585. }
    586. #page #body div.content div ul.section li p a:hover {
    587.     font-family:Arial;
    588.     font-size:14px;
    589.     color:#033842;
    590.     margin:0 0 10px 0;
    591. }
    592. #page #body div.content div ul.section li h5 {
    593.     margin:0;
    594.     height:35px;
    595. }
    596. #page #body div.content div ul.section li h5 a {
    597.     font-family:Arial;
    598.     font-size:16px;
    599.     color:#252823;
    600.     text-decoration:none;
    601.     text-transform:uppercase;
    602.     font-weight:normal;
    603. }
    604. #page #body div.content div ul.section li h5 a:hover {
    605.     font-family:Arial;
    606.     font-size:16px;
    607.     color:#252823;
    608.     text-decoration:none;
    609.     text-transform:uppercase;
    610.     font-weight:normal;
    611. }
    612. #page #body div.content div ul.section li h5 a span {
    613.     font-family:Arial;
    614.     font-size:16px;
    615.     color:#252823;
    616.     text-decoration:none;
    617.     text-transform:uppercase;
    618.     font-weight:normal;
    619. }
    620. #page #body div.content div ul.details {
    621.     list-style-type:none;
    622.     margin:0;
    623.     padding:0;
    624. }
    625. #page #body div.content div ul.details li {
    626.     margin-bottom:30px;
    627. }
    628. #page #body div.content div ul.details li h2 {
    629.     font-family:Arial;
    630.     font-size:16px;
    631.     color:#343831;
    632.     font-weight:bold;
    633.     text-transform:uppercase;
    634. }
    635. #page #body div.content div ul.details li h3 {
    636.     font-family:Arial;
    637.     font-size:14px;
    638.     color:#252823;
    639.     font-weight:normal;
    640.     margin:0;
    641.     height:40px;
    642.     letter-spacing:1px;
    643. }
    644. #page #body div.content div ul.details li span {
    645.     display:block;
    646.     font-family:Arial;
    647.     font-size:14px;
    648.     color:#252823;
    649.     letter-spacing:1px;
    650. }
    651. #page #body div.content div div {
    652.     width:630px;
    653.     float:left;
    654.     padding:0;
    655.     margin:0 30px 0 0;
    656. }
    657. #page #body div.content div div ul.section li p {
    658.     margin-bottom:40px;
    659.     color: #252823;
    660.     font-family: Arial;
    661.     font-size: 14px;
    662.     letter-spacing: 1px;
    663.     line-height: 30px;
    664.     text-align: justify;
    665. }
    666. #page #body div.content div div ul {
    667. }
    668. #page #body div.content div div.aside {
    669.     width:210px;
    670.     float:left;
    671. }
    672. #page #body div.content div div.aside h2 {
    673.     font-family:Arial;
    674.     font-size:14px;
    675.     color:#343831;
    676.     font-weight:normal;
    677.     text-transform:uppercase;
    678. }
    679. #page #body div.content div div.aside ul {
    680.     margin:10px 0 30px 0;
    681.     padding:0 0 0 18px;
    682.     color:#343831;
    683. }
    684. #page #body div.content div div.aside ul li a {
    685.     text-decoration:none;
    686.     font-family:Arial;
    687.     font-size:14px;
    688.     color:#252823;
    689.     letter-spacing:1px;
    690. }
    691. #page #body div.content div div.aside ul li a:hover {
    692.     text-decoration:none;
    693.     font-family:Arial;
    694.     font-size:14px;
    695.     color:#033842;
    696.     text-decoration:underline;
    697. }
    698. #page #footer {
    699.     width:960px;
    700.     margin:0 auto;
    701.     padding:30px 0;
    702.     height:50px;
    703.     line-height:50px;
    704. }
    705. #page #footer ul.connect {
    706.     margin:0;
    707.     padding:0;
    708.     list-style-type:none;
    709. }
    710. #page #footer ul.connect li {
    711.     float:left;
    712. }
    713. #page #footer ul.connect li a {
    714.     text-decoration:none;
    715.     display:block;
    716.     margin-right:10px;
    717. }
    718. #page #footer ul.connect li a.facebook {
    719.     background:url("../images/icon.png") no-repeat scroll 0 -97px transparent;
    720.     width:47px;
    721.     height:47px;
    722. }
    723. #page #footer ul.connect li a.facebook:hover {
    724.     background:url("../images/icon.png") no-repeat scroll 0 0 transparent;
    725. }
    726. #page #footer ul.connect li a.twitter {
    727.     background:url("../images/icon.png") no-repeat scroll 0 -485px transparent;
    728.     width:47px;
    729.     height:47px;
    730. }
    731. #page #footer ul.connect li a.twitter:hover {
    732.     background:url("../images/icon.png") no-repeat scroll 0 -388px transparent;
    733. }
    734. #page #footer ul.connect li a.googleplus {
    735.     background:url("../images/icon.png") no-repeat scroll 0 -291px transparent;
    736.     width:47px;
    737.     height:47px;
    738. }
    739. #page #footer ul.connect li a.googleplus:hover {
    740.     background:url("../images/icon.png") no-repeat scroll 0 -194px transparent;
    741. }
    742. #page #footer span.footnote {
    743.     float:right;
    744.     font-family:Arial;
    745.     font-size:14px;
    746.     color:#383f33;
    747.     }
    748. #page #footer span.contact {
    749.     float:left;
    750.     font-family:Arial;
    751.     font-size:20px;
    752.     color:#383f33;
    753. }
    754. #page #footer span.footnote a {
    755.     text-decoration:none;
    756.     font-family:Arial;
    757.     font-size:14px;
    758.     color:#383f33;
    759. }
    760. #page #footer span.footnote a:hover {
    761.     color:#ffffff;
    762. }
    und so sieht es aus



    Ich möchte es aber so nebeneinander



    Was muss ich machen?

  22. #22
    Mitglied Avatar von saddy
    Registriert seit
    Jul 2013
    Ort
    *.*
    Beiträge
    3.942

    Re: Erstellen einer Webseite - Brauche Hilfe

    Sei doch so lieb und stell und bei so was mal codepen.io o.ä. zur Verfügung.

    Sind das Übungsaufgaben für dich oder machen wir hier eigentlich deine Arbeit?

    Auch falls das Übungsaufgaben sind, feste Pixelangaben sinds heutzutage eher nicht mehr so (mach das Ding mal an nem Smartphone auf).
    Ein kleines css framework würde dir viel Arbeit abnehmen und auch das Problem mit der Bilderanordnung für alle Endgeräte lösen.
    Das z.B.: https://purecss.io/layouts/

    Eine Liste mit gängigen css frameworks findest du z.B. hier falls du was bestimmtes oder einfach nur Inspiration suchst: https://github.com/troxler/awesome-css-frameworks

  23. #23
    Cloogshicer®

    Moderator

    Avatar von dexter
    Registriert seit
    Jul 2013
    Beiträge
    3.125

    Re: Erstellen einer Webseite - Brauche Hilfe

    Frameworks sind die Pest, da blickt man nämlich hinterher garnich mehr durch.

    Was Du suchst ist entweder float oder die passende von mehreren display-Eigenschaften, die das lösen.
    Corona ist Harmlos.

    And if you choose to fail us i say: we will never forgive you

  24. #24
    Mitglied Avatar von saddy
    Registriert seit
    Jul 2013
    Ort
    *.*
    Beiträge
    3.942

    Re: Erstellen einer Webseite - Brauche Hilfe

    Naja so lightweight frameworks sind ja oft modular aufgebaut.
    Der Lerneffekt ist natürlich größer wenn mans selbst macht.

    Hier z.B. behielte man den Überblick noch gut, oder man pickt sich das raus was man braucht (halt nicht alle columns aber mai das sind jetzt keine megabyte ):
    https://unpkg.com/purecss@2.0.6/build/base-min.css
    https://unpkg.com/purecss@2.0.6/buil...onsive-min.css

  25. #25
    Zeitreisender

    Administrator

    Avatar von drfuture
    Registriert seit
    Jul 2013
    Ort
    in der Zukunft
    Beiträge
    7.331
    ngb:news Artikel
    18

    Re: Erstellen einer Webseite - Brauche Hilfe

    Ich denke das Problem ist oft das die Gefahr groß ist das man sich eben denkt "Das Framework kümmert sich schon um alles".
    Ohne geprüft zu haben was das Framework tatsächlich macht (nicht nur auf css bezogen, viel schlimmer ist das bei js oder php etc.) Ob sich das Framework dann wirklich auch um sichere Zugriffe kümmert oder nur um "einfache".

    Alles in allem sollte man sich damit nur die Arbeit erleichtern und nicht für jedes Projekt das Rad neu erfinden. Trotzdem aber verstehen können was gerade in solchen einfachen css-files genau steht und was es macht.

    Wenn ich mir da die .css Datei von div. "Enterprise-Level Webanwendungen" anschaue... gut die werden zu 99% nur im LAN betrieben... aber da liefen dann 2-5MB css-Files mit drin und dafür zahlt man leider auch noch viel Geld.
    |_|D *`~{ Ich kenne deine Zukunft }~´* |_|D

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •