zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Seite auf mobiler Ansicht gleich wie auf Desktop

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 20.08.2018, 18:51
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2018
Beiträge: 52
IxonTV befindet sich auf einem aufstrebenden Ast
Standard

Et voila, die Seite war Gold wert! Ich hab jetzt alle Fehler behoben, und gleich auch nochmal einen CSS Checker drüber laufen lassen, auch da alles top. Sonst ist aber alles beim Alten...
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 20.08.2018, 18:55
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2018
Beiträge: 52
IxonTV befindet sich auf einem aufstrebenden Ast
Standard

Man kann ja bei 1:1 ranzoomen ! Nur schaffe ich es halt nicht in ein paar Tagen, das komplette Layout für mobile Geräte „umzuschreiben“. Deswegen möchte ich ihm für den Termin erst einmal etwas präsentieren, was funktioniert. Und nicht diese untereinander gepackten Bilder, die eigentlich viel zu groß für das Handy sind und man nichts mehr erkennt
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 20.08.2018, 18:56
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 110
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Bitte noch testen, ob das Entfernen von
HTML-Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
aus dem <head> Bereich irgendetwas verändert?
Mit Zitat antworten
  #14 (permalink)  
Alt 20.08.2018, 18:59
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2018
Beiträge: 52
IxonTV befindet sich auf einem aufstrebenden Ast
Standard

Tut es in der Tat, leider nicht so wie erwünscht:
Das erste Bild ist ohne den Meta Tag, das zweite mit.
Angehängte Grafiken
Dateityp: png B5E3AEEB-A1E3-4C02-891D-3ED51D06850E.png (337,4 KB, 1x aufgerufen)
Dateityp: png 5BE8F691-AC14-4ECC-BCDC-3C4A8DDB7575.png (367,3 KB, 1x aufgerufen)
Mit Zitat antworten
  #15 (permalink)  
Alt 20.08.2018, 21:23
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2018
Beiträge: 52
IxonTV befindet sich auf einem aufstrebenden Ast
Standard

Machen wir das weiter ?
Mit Zitat antworten
  #16 (permalink)  
Alt 20.08.2018, 21:39
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 110
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Nein... wir sind eindeutig auf dem falschen Weg!
Plan B:
ich habe mal die Elemente (im Kopfbereich) etwas anders formatiert...
Code:
* {
  box-sizing: border-box;
}
html, body {
  margin: 0px;
  padding: 0px;
  min-height: 100vh;
}
body{
  font-family: "Playfair Display";
  /*background-image: url(logo.ico);*/
  background-size: 70% auto;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 0px 250px;
}
#wrapper{
  min-height: 100vh;
  width: 100%;
  max-width: 1320px;
  margin: 0px auto 10px auto;
}
#Overheader{
  display: flex;
  justify-content: space-between;
  height: 30px;
}
#kontakt{
  margin: 0 1%;
}
#oeffnungszeiten{
  margin: 0 1%;
}
#impressum{
  margin: 0 1%;
}
#login{
  margin: 0 1%;
}
#banner{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 5px;
  background-color: rgba(120, 120, 120, 0.2);
  overflow: visible;
}
#banner > a {
  max-width: 25%;
}
#logo1{
  margin-left: 1%;
  width: 100%;
  max-width: 200px;
  border: 1px solid transparent;
  border-radius: 50%;
}
#navigation{
  display: flex;
  width: 100%;
}
div.nav {
  width: 100%;
  max-width: 140px;
  margin: 0px 5px;
}
#angebot,
#herstellung,
#team {
  width: 100%;
  max-width: 150px;
  border: 1px solid transparent;
 border-radius: 50%
}
#News{
  /*margin-top: -50px;*/
  display: block;
  padding: 4px 0px;
  width: 400px;
  float: right;
  background-color: white;
}
#newsfile{
  width: 350px;
  height: auto;
}
#overheader a{
        color: rgba(120, 120, 120, 0.7);
        text-align: center;
}
#overheader a:hover{
        color: rgba(120, 120, 120, 1.0);
        text-align: center;
}
.footer {
  background-color: #0d0d0d;
  height: 250px;
  width: 100%;
  overflow: hidden;
}

.footer a{
        color: white;
        padding: 20px;
        margin-top: 50px;
        margin-left: 150px;
        font-weight: bold;
}
.footer a:hover{
        color: rgba(120, 120, 120, 1);
}
.footer img{
        position: relative;
        top: 30px;
        left: 20px;
}
#LogoFooter{
        width: 100px;
        height: 100px;
}
.box{
        float: left;
}
.nav a:hover{
        background-color: rgba(120, 120, 120, 0.4);
}
/*#navibereich li {
        bottom: 0px;
        width: 100px;
        position: relative;
  display: inline;          /* Listenelemente nebeneinander
  list-style-type: none;      /* Aufzählungszeichen entfernen
  padding: 100px 0;
  /*border-left: 1px solid #14ede5;
  margin: 0;
}
#navibereich img{
        bottom: 0px;
}
#navibereich a{
  text-decoration: none;         /* Unterstreichung entfernen

}
#navibereich a:hover,
#startseite #navi01 a,       /* mit Komma am Ende
#galerie #navi02 a,
#ereignisse #navi03 a{
  background-color: #00BFFF;
  background-image: url(farbverlauf.jpg);/* Hintergrundgrafik einfügen
  background-repeat: repeat-x;           /* von links nach rechts wiederholen
  background-position: top left;         /* oben links beginnen
} {    /* ohne Komma am Ende
  background-color: #EDEDF8;


}*/

#Timeline{
        display: block;
        float: right;
        height: 20%;
        width: 20%;
        top: 300px;
}
#Timeline h2{
}
#Artikel1Img{
        /*border: 10px;
        border-color: #FFFFFF;*/
        display: block;
        margin-bottom: 15px;
        margin-top: -15px;
        margin-left: auto;
        margin-right: auto;
}
#Artikel1{
        /*border: 1px solid #83c2f7;*/
        /*border-bottom: 1px solid #a4a4a4;*/
        background-color: white;
        border-width: 0px 0px 1px 0px;
        margin-top: -15px;
}
#Artikel1 h3{
        color: black;
        font-family: Akkurat, sans-serif;
        text-align: center;
}
#info-box {
                background-color: white;
        position: absolute;
        right: 0;
        top: 30%;
        top: 30%;
        width: 25%;
}
#validate{
bottom: 0px;
left: 0px;
float: right;
}
Das solltest du mal kopieren und in eine 'test.css' dort speichern, wo auch dein original Stylesheet ist.
Dann im HTML Dokument das test.css statt des Originals verlinken.
Ist aber nur ein Konzept und lange noch nicht fertig - soll nur darum gehen, ob das deinen Vorstellungen näher kommt.

Die Änderungen, die ich eingebaut habe, sind durchweg am Anfang des Stylesheets... so etwa bis zum Format für '.footer'
Mit Zitat antworten
  #17 (permalink)  
Alt 20.08.2018, 21:50
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2018
Beiträge: 52
IxonTV befindet sich auf einem aufstrebenden Ast
Standard

Wie auch immer du das gemacht hast, es sieht toll aus! Ein paar Fragen hätte ich allerdings noch, ich will ja wenigstens was dabei lernen und verstehen wieso es jetzt anders ist .
Zeile 48: Was bedeutet das < Zeichen?
Zeile 73: Was ist der border-radius? Bzw was bewirkt er genau hier?
Mit Zitat antworten
  #18 (permalink)  
Alt 20.08.2018, 21:51
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.08.2018
Beiträge: 52
IxonTV befindet sich auf einem aufstrebenden Ast
Standard

Und OMG wie hast du es NUR mit CSS hingekriegt, dass die Buttons oben und das Logo ausgeschnitten ist?!?!?!
Mit Zitat antworten
  #19 (permalink)  
Alt 20.08.2018, 22:10
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 110
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Also das > in Zeile bedeutet, dass ich nur das unmittelbare Kindelement <a> in #banner formatieren will... ohne das > wären alle a's ausgewählt!
Schau dir das mit den Slektoren im CSS mal hier an!
https://wiki.selfhtml.org/wiki/CSS/Selektoren
Das border-radius macht die Ecken eines Elementes rund... mit dem Radius, der da angegeben ist.
Sind die Elemente quadratisch... so wie deine Bilder... dann wird bei einem Radius 50% sowas wie ein Kreis aus dem Element. Die überstehenden Ecken sind dann weg und es wirkt wie kreisrund 'ausgeschnitten'.
Dass dein Logo nicht ganz so 100% aussieht, liegt am Bild selber, da ist das sichtbare Logo etwas nach unten verschoben und darüber ist ein Rand... mach das Bild genau quadratisch und schneide es so aus, dass keine Ränder über das Bild (das man sehen soll) hinaus ragen, dann sieht das Logo auch nicht mehr so schief aus.
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 20.08.2018, 22:12
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 110
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

... fast vergessen... hier noch der Link zur Erklärung von border-radius.
https://wiki.selfhtml.org/wiki/CSS/E.../border-radius
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Seite in Seite B3ndech0 Javascript & Ajax 12 06.01.2010 13:42
Wordpress Seite Passwort-Schützen? sepp88 Serveradministration und serverseitige Scripte 5 01.11.2009 12:56
Seite wird auf anderem Computer falsch dargestellt Patrick Egli CSS 3 01.11.2009 10:40
Shtml auf jeder Seite einbinden - counter iVx Serveradministration und serverseitige Scripte 1 13.09.2007 17:31
Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite Chico_wau CSS 2 14.05.2007 18:08


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:56 Uhr.