• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

html Anfänger braucht Hilfe beim Aufbau einer responsiven Website

Status
Für weitere Antworten geschlossen.
-dAtA-TRoN- schrieb:
ann ist der kristall mittig aber keine ahnung wie ich den dann skalierbar bekomme.
Zum Vergrößern anklicken....

Ich hatte es dir prophezeit. Niemand lernt das in ein paar Tagen.

max-width:100% bewirkt lediglich, dass das Bild nicht über seine tatsächliche Größe hinaus skaliert werden kann.

Der einfachste Weg wäre, ein paar Media Queries zu schreiben und dort die unterschiedlichen Bildgrößen zu deklarieren.
 
Hallo nochmal,
habe mittlerweile mit der website angefangen und stoße erwartungsgemäß immer mal wieder aucf probleme. aufgrund der wenigen zeit die mir zum erstellen der website bleibt, habe ich mich dazu entschlossen, das "responsive design" über board zu werfen. es ist schon so schwierig genug für mich.

habe momentan das problem, dass ich die drei buttons der website nicht wie geplant
"links-mitte-rechts" angeordnet bekomme (siehe bilder).

könnt ihr mir da helfen? habe schon einiges ausprobiert und bekomme es einfach nicht hin.

gruß

Mein html Code:

Code: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>

<body>



    <video autoplay loop poster="img/site-components/Altar_Room.png" id="bgvid">
        <source src="Video/trailer_header_webm.webm">
        <source src="Video/trailer_header_mp4.mp4">
    </video>

    <div id="replaced_logo">
        <img src="img/branding/replaced_logo.png" width="146" height="332" alt=""/>
    </div>

    <div id="button_left">
          <img src="img/buttons/button_left_01.png" width="424" height="124" alt=""/>
      </div>

    <div id="dwld_button">
        <img src="img/buttons/dwld_button_01.png" width="572" height="124" alt=""/>
    </div>

    <div id="button_right">
        <img src="img/buttons/button_right_01.png" width="424" height="124" alt=""/>
    </div>

    <div id="panel">
        <img src="img/site-components/panel.png" width="1920" height="422" alt=""/>
      </div>

</body>
</html>


Mein css Code:

Code: 
@charset "utf-8";
/* CSS Document */

video#bgvid {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover;
    }

#replaced_logo {
    padding-top: 100px;
    text-align: center;
    }

#button_left {
    z-index: +10;
    }

#dwld_button {
    z-index: +10;
    }

#button_right {;
    z-index: +10;
    }

#panel {
    position: fixed;
    top: 57%;
    left: 0%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -10;
    }
 

Anhänge

  • Replaced 2.jpg
    Replaced 2.jpg
    828,3 KB · Aufrufe: 8
  • Test.jpg
    Test.jpg
    631,1 KB · Aufrufe: 8
Zuletzt bearbeitet von einem Moderator:
Du solltest anstatt des Quellcode besser einen Link zur Seite posten, damit haben wir mehr Möglichkeiten Fehler zu entdecken
 
danke für den hinweis aber sie ist leider noch nicht online. wie postet man eigentlich code in dieser "code-ansicht"?
 
@ Code - Zusatzinfo: [code=option][/code]
BBCodes [code=option] - Unterstützte Sprachen schrieb:
4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, q, qbasic, rails, rebol, reg, rexx, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, spark, sparql, sql, stonescript, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, upc, urbi, uscript, vala, vb, vbnet, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic
Zum Vergrößern anklicken....
 
bdt600 schrieb:
Was hindert dich daran? Zur Not bei einem Freehoster
Zum Vergrößern anklicken....

Ich bekomme free webspace von meiner schule gestellt. deshalb brauche ich mich darum nicht kümmern.

das mit dem float war nett gemeint aber ich bekomme es so auch irgendwie nicht hin. ich habe es nun zwar geschafft abstände zwischen den buttons einzufügen und sie in eine reihe zu bringen aber ich glaube es ist trozdem ganz falsch und nicht im "nicht im sinne des erfinders".:D

habe versucht es so zu lösen:

Code: 
#button_left {
    float: left;
    z-index: +10;
    margin-left: -8px;
    margin-right: 150px;
    }

#dwld_button {
    margin-left: 90px;
    float: left;
    z-index: +10;
    }

#button_right {
    float: left;
    z-index: +10;
    margin-left: 252px;

ich weiß, es ist sicher ganz falsch. bekomme den rechten button auf diese weise auch nicht ganz an den rechten bildschirmrand. und sobald man das browserfenster auch nur ein stück verkleinert werden die buttons untereinander angezeigt.

brauche definitiv hilfe...
 

Anhänge

  • Test.jpg
    Test.jpg
    302,1 KB · Aufrufe: 5
Zuletzt bearbeitet von einem Moderator:
kann mit denn keiner erklären wie ich drei div-container nebeneinander platzieren kann?
 
so, bin wie ich glaube der lösung auf der spur :). könnt ihr mir sagen wie ich die buttons links und rechts GANZ and den rand bekomme? und wie bekomme ich den mittleren button mittig?

hier ein update vom code:

html:
HTML: 
    <div id="button_left">
        <img src="img/buttons/button_left_01.png" width="424" height="124" alt=""/>
    </div>
  
    <div id="dwld_button">
           <img src="img/buttons/dwld_button_01.png" width="572" height="124" alt=""/>
      </div>
  
    <div id="button_right">
        <img src="img/buttons/button_right_01.png" width="424" height="124" alt=""/>
    </div>
  
    <div style="clear:both;"></div>

css:
Code: 
#button_left {
    float: left;  
    }

#dwld_button {
    float: left;
    }

#button_right {
    float: right;
    }

gruß
 

Anhänge

  • Test.jpg
    Test.jpg
    308,8 KB · Aufrufe: 5
Zuletzt bearbeitet von einem Moderator:
Tronjer schrieb:
Wozu habe ich das fiddle gebaut? :(
Zum Vergrößern anklicken....

SORRY, vielen dank für deine bemühungen ;). war da aber gerade schon wieder am schreiben als dein post kam. passt denn das "fiddle" noch auf meinen jetzigen code?

ich müsste doch eigentlich nur noch wissen, wie ich die beiden äußeren buttons ganz an den bildschirmrand verschieben kann. und natürlich wie ich den "download here" button zentriere. oder ist meine bisherige lösung "unsauber"?
 
Flexbox macht es einfacher, weil die sonst notwendigen clears entfallen.

Wenn du statt dessen Floats verwenden willst, benötigst du drei äußere Container mit width: 33%, die left gefloatet werden. Darin positionierst du die images mit display: block. Das image im mittleren Div erhält ein margin: auto, das im rechten ein float: right, welches wieder gecleared werden muss.

Damit ist der Kram aber noch nicht responsiv.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben