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

Frage Footer will nicht so recht wie ich will

B

BerlinStold

Neues Mitglied
Hallo zusammen,
eins vorweg: Ich bin nicht die hellste Kerze auf dem Leuchter was HTML und CSS angeht. In jungen Jahren habe ich mich mal eingehend damit beschäftigt und mir autodidaktisch einiges beigebracht. Wirklich stilecht habe ich dabei vermutlich nie gearbeitet, aber mir hat's gereicht. In der Zwischenzeit habe ich die Einführung von HTML5 verschlafen und hatte einiges nachzuholen.

Nun bin ich vorwiegend Musiker und spiele in einer Band für die ich gerade die Website baue. Also hab ich mich rangesetzt und mir was zusammengebastelt. Vermutlich ist auch das nicht stilecht, aber bisher hat es sehr gut auf allen Browsern funktioniert.
Naja, bis jetzt.

Die Seite ist nicht allzu kompliziert aufgebaut. Sie hat eine festgelegte Breite und reiht vertikal div classes aneinander. Ich habe einen Header, eine Navigation, einen Content-Bereich und einen Footer. Innerhalb des Contentbereiches teile ich die Inhalte zusätzlich mittels Boxen. Bisher habe ich Boxen in statischen größen verwendet (festgelegte Breite, festgelegte Höhe).
Für die Seite mit dem Kontaktformular muss aber eine der beiden nebeneinander stehenden Boxen eine dynamische Höhe haben. Das funktioniert auch. Allerdings ist das jedem Element das darauf folgt egal. Die kleben fröhlich an irgendeiner festgesetzten Position (ich nehme an es ist die min-height meiner Boxen) und bewegen sich nicht mit. Und ich arme Socke bin mit meinem Latein am Ende. Ich hab schon alles versucht mit float und position-attributen der einzelnen Elemente rumgespielt. Aber das was ich erreichen will erreiche ich nicht. Auf jeder anderen Seite auf denen die Boxen festgesetzte Höhen haben funktioniert es. Nur dort nicht. Woran liegt das?

Hier ist die betreffende Seite:
http://bergschaden.bplaced.net/booking.html

HTML-Datei der Seite:

HTML: 
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="Bergschaden">
<meta name="description"
content="Dortmund">

<title>BERGSCHADEN</title>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src="js/jquery.bxslider.min.js"></script>

<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="general_sheets.css" rel="stylesheet" />


<link rel="shortcut icon" href="favicon.ico" />

<style type="text/css">
    <!--


@import url(http://fonts.googleapis.com/css?family=Open+Sans);


-->
    </style>




</head>
<body     >

<div class="gen_container">
<div class="alt_logo"></div>
<div class="logo"></div>
<div class="content_top">
<a href="index.html">startseite</a>
<a href="media.html">media</a>
<a href="aboutus.html">über uns</a>
<a href="dates.html">termine</a>
<a href="booking.html">kontakt</a>
</div>
<div class="content" style="height: auto;">

<h1>kontakt & booking</h1>
<p>Du hast eine Frage, willst uns einladen oder uns Schokolade ausgeben? Super, dann schreib uns doch!</p>

<div class="divide"></div>

<div class="content_container" style="height: auto;">
        <div class="content_box" style="width: 560px; float: left; height: auto; position: relative;">

<form action="/action_page.php">
    <label for="fname">Dein Vorname</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Dein Nachname</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="q_type">Was möchtest du fragen?</label>
    <select id="q_type" name="q_type">
      <option value="booking">Booking-Anfrage</option>
      <option value="general">Sonstiges</option>
    </select>

    <label for="subject">Beschreibe dein Anliegen genauer...</label>
    <textarea id="subject" name="subject" placeholder="Und immer dran denken, fragen kostet nichts..." style="min-height:200px"></textarea>

    <input type="submit" value="Abschicken">
  </form>

        </div>
        <div class="content_box" style="right: 0px; width: 170px; float: left; height: auto;">
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
</div>

        </div>
<div class="divide"></div>
<h1>spezielle Kontaktadressen</h1>
<p>Hier findest du genauere Kontaktadressen...</p>


</div>


    <div class="content_bottom"><a href="https://www.youtube.com/channel/UC8ERX_umKZEkwhv3Y0dmz2g/videos" target="framename_blank"><img src="yt_logo.png"></a>

<div class="links">
<a href="http://www.facebook.com/Bergschaden" target="framename_blank"><div class="buttons">Facebook</div></a>
<a href="http://www.soundcloud.com/Bergschaden" target="framename_blank"><div class="buttons">Soundcloud</div></a>
<a href="impressum.html"><div class="buttons" style="border-bottom: 0px;">Impressum</div></a>
</div>

<div class="links" style="margin-left: 375px;">
<a href=""><div class="buttons">alternativer Link 1</div></a>
<a href="" target="framename_blank"><div class="buttons" style="border-bottom: 0px;">alternativer Link 2</div></a>
</div>
<div class="links" style="margin-left: 590px; width: 240px;">
<p>bergschaden-music.de &copy; 2017</p>
<p></p>
<a href="#"><div class="buttons" style="border-bottom: 0px; width: 100%;">&uarr; nach oben</div></a>
</div>

    </div>


        </div>



</body>
</html>

Dazugehörige CSS-Datei:
http://bergschaden.bplaced.net/general_sheets.css
 
Werbung:
Ich hoffe ich verstehe was du meinst:

HTML: 
<div class="content_box" style="right: 0px;width: 170px;float: left;height: auto;">
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
<p>Du traust dich nicht?</p>
</div>

Setz das Ding mal position: relative
 
Das habe ich auch schon versucht. Das hilft aber leider nur bedingt, weil es erstens dazu führt dass die Boxen aneinander kleben und zweitens die in der Höhe verstellbare Textbox immer noch nicht vom Rest der Seite beachtet wird (kann man gut sehen, wenn man das Textfeld länger zieht...).upload_2017-7-22_1-12-11.png
 
Werbung:
Float hatte ich bisher gar nicht benutzt, hab ich nur versucht, um das Problem in den Griff zu bekommen.
Absolute und relative Positionierung habe ich allerdings sehr wohl benutzt. Von Flexlayout hab ich bisher noch nichts gehört. Was muss ich mir darunter vorstellen?
 
Okay. Vom ersten lesen klingt das nach viel mehr als ich brauche, aber vielleicht ist es tatsächlich die beste Lösung für Langlebigkeit und Erweiterbarkeit der Seite. Mir ist sehr wichtig, dass ich Elemente hab die ich wiederverwenden kann ohne gleich die ganze Seite umzucoden.

Danke für die Hilfe, ich schau mal, dass ich mich da in den nächsten Tagen/Wochen etwas reinlese. :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben