Ergebnis 1 bis 5 von 5

Thema: stabiles htm Layout für gängige Browser

  1. #1
    HTML Newbie
    Registriert seit
    30.09.2014
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard stabiles htm Layout für gängige Browser

    gibt es ein gutes "How to" wie man ein für alle gängigen Browser und Bildschirmformatunabhängig ein stabiles Layout codieren kann - meins verschiebt sich auf jedem browser / Bildschirm .

    Freue mich auf eine Hilfestellung
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: stabiles htm Layout für gängige Browser

    CSS lernen und verstehen wäre die beste Voraussetzung. Außerdem sollte dir bewusst sein, dass Du nicht mit Bildschirmauflösungen/-formaten arbeitest sondern mit Viewports. Für diese kannst Du per mediaQueries für unterschiedlichste Viewports auch unterschiedliche Ansichten deiner Seite bauen. Such mal danach im Netz, gibt genug Anleitungen und Hilfen dazu.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    30.09.2014
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: stabiles htm Layout für gängige Browser

    ich habe die Formatierung per css gemacht und an meinem Mac book air sieht das ganze auch gut aus. Die dropdown menus im header und footer funktionieren und es bleibt das Problem mit der Verschiebung des Layouts an anderen PCs sowie die Klärung wie ich den Bereich ziwschen header und footer - in dem mein verlinkter Text erscheinen soll - codiert werden muss, damit die Textstellen per Linkanker in den sichtbaren Ausschnitt scrollen.
    hier sist die CSS Codierung
    Geändert von FritzvK (03.10.2014 um 15:07 Uhr)

  4. #4
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.152
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: stabiles htm Layout für gängige Browser

    Zitat Zitat von FritzvK
    hier sist die CSS Codierung

    body {
    background-color: #E7EADB;
    margin-top: 0%;
    margin-right: 20%;
    margin-bottom: 5%;
    margin-left: 20%;
    }
    usw.
    Was sollen wir damit?
    Außerdem gibt es dafür
    Code:
    ...

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    30.09.2014
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: stabiles htm Layout für gängige Browser

    sorry - hab mit dem button code nichts anfangen können.

    es geht um die positionsangaben des Layout die ich mittels div ids in css festlegen will -
    könntet ihr einen blick darüber werfen und event mir sagen was ich falsch mache.
    Code:
    body {
    background-color: #E7EADB;
    margin-top: 0%;
    margin-right: 20%;
    margin-bottom: 5%;
    margin-left: 20%;
    }
    h2 {
    font-family: calibri, Arial, Helvetica;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 100%;
    color: #00FD00;
    }
    h3 {
    font-family: calibri, Arial, Helvetica;
    font-variant: normal;
    font-weight: bold;
    font-size: 80%;
    color: #00FD00;
    }
    h4 {
    font-family: calibri, Arial, Helvetica;
    font-variant: normal;
    font-weight: bold;
    font-size: 60%;
    color: #00FD00;
    }
    h5 {
    font-family: calibri, Arial, Helvetica;
    font-variant: normal;
    font-style: oblique;
    font-size: 110%;
    color: #404040;
    text-align: center;
    padding-top: 2%;
    }
    h6 {
    font-family: calibri, Arial, Helvetica;
    font-variant: normal;
    font-style: oblique;
    font-size: 80%;
    color: #404040;
    text-align: center;
    padding-top: 4%;
    }
    #Bereich-Kopf {
    background-color: #404040;
    margin-top: 50px;
    width: 100%;
    height: 170px;
    
    }
    #Bereich-Kopf-1 {
    padding: 20px 20px ;
    float: left;
    width: 100px;
    }
    #Bereich-Kopf-2 {
    padding: 20px 20px ;
    float: left;
    width: 300px;
    }
    #Bereich-Kopf-3 {
    padding-top: 1%;
    padding: 20px 20px ;
    position:relative;
    left: 200px;
    width:150px;
    }
    #Bereich-Kopf-4 {
    padding: 0% 0% ;
    position: relative;
    left: 10%;
    Top: -20%;
    }
    #Bereich-Kopf-5 {
    background-color: #C0C0C0;
    margin-top: 1%;
    width: 100%;
    padding: 0% 0% ;
    position: relative;
    left: 0%;
    Top: -0%;
    }
    #Bereich-Register-Kopf {
    float: none;
    }
    
    
    
    h1 {
    font-family: calibri, Arial, Helvetica, Andele monospace;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 130%;
    color: #008000;
    }
    
    a:link {
    font-family: calibri, Arial, Helvetica;
    font-variant: normal;
    font-weight:200;
    font-size: 90%;
    text-decoration:none;
    color: #400000
    }
    a:hover {
    font-family: calibri, Arial, Helvetica;
    font-variant: normal;
    font-weight:500;
    font-size: 90%;
    text-decoration:none;
    color: #FF8000
    }
    a:visited {
    color: purple;
    text-decoration:none;
    }
    a:active {
    background-color: white;
    text-decoration:none;
    }
    li {
    margin-top: 5px;
    margin-bottom: 5px;
    list-style-type: none;
    }
    #Bereich-Kopf-reg {
    background-color:;
    margin-top: 0%;
    margin-left: 0%;
    width: 100%;
    
    }
    #menu {
    font-size:14px;
    position:absolute;
    }
    #menu ul {
    list-style-type:none;
    list-style-image:none;
    margin:0px;
    padding:0px;
    }
    #menu li.topmenu {
    float:left;
    }
    .topmenu a {
    float: left;
    width:200px;
    text-align:center;
    }
    .topmenu ul{
    display:none;
    }
    .topmenu a, .submenu a{
    padding:0px 5px;
    border-collapse:collapse;
    background-color: #C02340;
    color:#400040;
    font-weight:bold;
    text-decoration:none;
    text-align:center;
    background-color:;
    margin:0;
    }
    .submenu a{
    font-size:12px;
    width:210px;
    position:relative;
    clear:both; /* special IE6 */
    }
    #menu a:hover, .topmenu.on a {
    color:#FF8000;
    font-family: calibri, Arial, Helvetica;
    font-variant: normal;
    font-weight:500;
    font-size: 90%;
    text-decoration:none;
    color: #FF8000;
    }
    
    .topmenu:hover ul {
    display:block;
    z-index:500;
    float: none;
    }
    #mainframe {
    position: relative;
    margin-top: 3%;
    width:100%;
    scrollbar-track-color: #00FD00;
    border: #0000FF;
    }
    #Bereich-Register-bottom {
    background-color:;
    margin-top: 380px;
    margin-left: 0%;
    width: 100%;
    
    }
    #menubot {
    font-size:14px;
    position:absolute;
    }
    #menu li.topmenubot {
    float:left;
    }
    .topmenubot a {
    float: left;
    width:200px;
    text-align:center;
    }
    
    .topmenubot a {
    padding:1px 5px;
    border-collapse:collapse;
    color:#400040;
    font-weight:bold;
    text-decoration:none;
    text-align:center;
    background-color:#E7EADB;
    margin:0;
    }
    
    #menubot a:hover, .topmenu.on a {
    color:#FF8000;
    font-family: calibri, Arial, Helvetica;
    font-variant: normal;
    font-weight:500;
    font-size: 90%;
    text-decoration:none;
    color: #FF8000;
    }
    
    .topmenu:hover ul {
    display:block;
    z-index:500;
    float: none;
    }
    #Bereich-Register-bottom-1 {
    background-color:;
    margin-top:4%;
    margin-left: 0%;
    width: 100%;

Ähnliche Themen

  1. ...was für ein layout...
    Von rammstein im Forum Link Tipps
    Antworten: 7
    Letzter Beitrag: 05.09.2009, 14:19
  2. Browser anpassung von div layout
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 06.02.2009, 22:37
  3. Layout Verschiebung, Fehler je Browser unterschiedlich! :(
    Von MisterT im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 03.04.2008, 22:04
  4. Tabellen-Layout in DIV-Layout umändern...
    Von Peter_Pan im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 22.03.2007, 21:29
  5. Browser Emulator Browserarchiv auch alte Browser
    Von meikschmidt im Forum Link Tipps
    Antworten: 1
    Letzter Beitrag: 17.10.2006, 19:28

Stichworte

Berechtigungen

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