login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Bootstrap positionering probleem

Offline advertentiep - 02/01/2017 12:24 (laatste wijziging 02/01/2017 13:55)
Avatar van advertentiepPHP interesse Goed 2017 allen!

Ik heb van bootsnipp.com twee snippets gehaald: een menu bar en een header/afbeelding met een drijvend form in het midden (of dat is wat ik wil).

Snippets zijn natuurlijk twee losstaande stukjes code niet altijd (wel vaak) verticaal mooi uitkomen.

CSS van de afbeelding + form
php code - Bekijk de code zonder highlighting - Klap code in 
  1. .search-background img {
  2.     width: 100%;
  3. }
  4. .well-searchbox {
  5.   min-height: 20px;
  6.   min-width: 400px;
  7.   padding: 19px;
  8.   position: absolute;
  9.   z-index: 80;
  10.   top: 90px;
  11.   right: 50%;
  12.   background: rgba(0, 0, 0, 0.6);
  13.   margin-bottom: 20px;
  14.   border: 1px solid #e3e3e3;
  15.   border-radius: 4px;
  16.   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  17.           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  18. }
  19.  
  20. .well-searchbox label {
  21.     color: #fff;
  22. }

HTML menu + afbeelding + form
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="container">
  2.     <div class="row">
  3.         <div class="span12">
  4.             <div class="head">
  5.                 <div class="row-fluid">
  6.                         <div class="span12">
  7.                                 <div class="span6">
  8.                                         <a href="index.php"><img src="IMG/logo.png" alt="Ga naar de beginpagina" /></a>
  9.                                 </div>
  10.  
  11.                                 <div class="span4 offset2" style="margin-top:15px;">
  12.                                         <button class="btn pull-right" type="button">Sign In</button>
  13.                                 </div>
  14.                         </div>
  15.                 </div>
  16.  
  17.                 <div class="navbar">
  18.                         <div class="navbar-inner">
  19.                                 <div class="container">
  20.                                         <ul class="nav">
  21.                                                 <li>
  22.                                                         <a href="#">Beginpagina</a>
  23.                                                 </li>
  24.  
  25.                                                 <li>
  26.                                                         <a href="#">Hoe werkt het ?</a>
  27.                                                 </li>
  28.  
  29.                                                 <li>
  30.                                                         <a href="#">Aanmelden</a>
  31.                                                 </li>
  32.  
  33.                                                 <li>
  34.                                                         <a href="#">Inloggen</a>
  35.                                                 </li>
  36.                                         </ul>
  37.                                 </div>
  38.                         </div>
  39.                 </div>
  40.             </div>
  41.         </div>
  42.     </div>
  43. </div>
  44.  
  45. 		<div class="search-background">
  46.             <img src="https://lh4.googleusercontent.com/-T4pmKmAS5D4/U0uihfPzEZI/AAAAAAAAA2c/sN0mjJS2bx4/w957-h374-no/141.jpg">
  47.         </div>
  48.             <div class="well-searchbox">
  49.                 <form class="form-horizontal" role="form">
  50.                     <div class="form-group">
  51.                         <label class="col-md-4 control-label">Keyword</label>
  52.                         <div class="col-md-8">
  53.                             <input type="text" class="form-control" placeholder="Keyword">
  54.                         </div>
  55.  
  56.                     </div>
  57.  
  58.                     <div class="form-group">
  59.                         <label class="col-md-4 control-label">Country</label>
  60.                         <div class="col-md-8">
  61.                             <select class="form-control" placeholder="Country">
  62.                                 <option value="">All</option>
  63.                                 <option value="">Country 1</option>
  64.                                 <option value="">Country 2</option>
  65.                             </select>
  66.                         </div>
  67.                     </div>
  68.  
  69.                     <div class="form-group">
  70.                         <label class="col-md-4 control-label">Province</label>
  71.                         <div class="col-md-8">
  72.                             <select class="form-control" placeholder="Province">
  73.                                 <option value="">All</option>
  74.                                 <option value="">Province 1</option>
  75.                                 <option value="">Province 2</option>
  76.                             </select>
  77.                         </div>
  78.                     </div>
  79.                     <div class="col-sm-offset-4 col-sm-5">
  80.                         <button type="submit" class="btn btn-success">Search</button>
  81.                     </div>
  82.                 </form>
  83.             </div>


zoals op www.advertentieplek.com Los werken deze snippets perfect, maar zodra de afbeelding niet meer tegen de bovenkant van de browser aan zit, wordt het formulier ook fout gepositioneerd.

EDIT: ik twijfelde ivm responsiviteit (is dat een woord?) @media en dan voor alle devices toch gewoon een vast top waarde zetten ?

4 antwoorden

Gesponsorde links
Offline Thomas - 02/01/2017 13:58
Avatar van Thomas Moderator Dat klopt, want het formulier is niet absoluut gepositioneerd ten opzichte van de afbeelding, maar (ook in het algemeen) ten opzichte van het eerst bovengelegen relatief gepositioneerde element. Dat is dit geval je body, want het formulier staat niet in de afbeelding-div.
Offline advertentiep - 02/01/2017 15:06
Avatar van advertentiep PHP interesse Ja super.

body = relative
img = absolute
form = relative

Aangezien ik mijn body aanpas, is er nogal veel gebeurd.
Kan ik een nieuwe class aanmaken en deze onder de afbeelding & form plaatsten dat alles daarna weer goed gerelativeerd wordt ?
Offline Thomas - 03/01/2017 15:48 (laatste wijziging 03/01/2017 15:54)
Avatar van Thomas Moderator Je kunt alles custom maken, maar dan zou je je moeten afvragen waarom je een heleboel standaard functionaliteit importeert via bootstrap. Het formulier lijkt ook niet erg responsive (althans de laatste keer dat ik dit bekeek). Is het niet veel handiger om dit ding from scratch te ontwerpen en bij voorkeur met gebruikmaking van bootstrap-functionaliteit? En start wellicht met de mobiele versie (mobile first).

Ik zou trouwens verwachten:
body: relative (impliciet)
image: relative (expliciet), met in deze div de form
form: absolute (ten opzichte van image)
Offline advertentiep - 04/01/2017 10:33
Avatar van advertentiep PHP interesse Ik denk dat het form wel responsive is (inmiddels) alleen de positionering belabberd is omdat ik aanpassingen in de CSS heb gemaakt.

De snippet is vanaf de grond gewoon niet goed opgebouwd denk ik, zo maar is naar kijken.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.235s