0

How can I set div with background-image and with 60% to be responsive? I have navbar (div) in top of site, with margin-left and margin-right 20%, responsive works here. Under this, is another div, too with margin-left and margin-right 20%, with background-image and here responsive doesn't works.

Second question: if i have 3 divs same line with images (1 img in 1 div), if they cant be located in 1 line because resolution of user, how to "explode" them to 2 or 3 lines?

if needed, demo: http://tlumacz-litewskiego.eu/

2
  • 1
    Please post relevant code. Jul 24, 2015 at 23:21
  • The .container class has fixed widths determined by a set of media-queries set to respond to widths: 768px, 992px and 1200px. You probably want a flexible design where the .container width is not fixed but a % of the parent. How to do this requires more than a short answer to a single question.
    – Marc Audet
    Jul 24, 2015 at 23:32

1 Answer 1

0

It seems like you are just learning so I thought I would take a minute and give a little guidance. First, you should understand that Bootstrap is a framework that allows you to achieve much of what you are trying to do. As you can see, the elements are now lined up and justified yet I used Bootstrap to achieve this, not additional css. Furthermore, as the screen collapses down to mobile, you can control when things stack as you were mentioning you wanted to do. Also, you will see that by using Bootstrap, a lot less styles are needed to achieve the desired result.

Example: http://jsbin.com/beruqorinu/edit?output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<header>
    <div class="container">
        <div class="row">
            <div id="header" class="col-sm-12">
                <h1>Tłumacz-litewskiego</h1>
            </div>
        </div>
        <div id="menu_container" class="row">
            <div class="col-sm-12">
                <nav>
                    <i class="fa fa-home"></i> Strona główna
                </nav>
            </div>
        </div>
        <div id="main_image" class="row">
            <div class="col-sm-8 bookbox">
                <h2>Tłumacz języka litewskiego</h2>
                <h4>mgr Živilė Wygońska</h4>
                <img class="img-responsive" src="http://tlumacz-litewskiego.eu/img/book.png">
            </div>
            <div class="col-sm-4 contact">
                <i class="fa fa-globe"></i> Polska, Podlaskie, Suwałki<br />
                <i class="fa fa-phone"></i> <b>Tel:</b> +48 515 231 589<br />
                <i class="fa fa-envelope-o"></i> <b>Email:</b> [email protected]                
            </div>
        </div>  
    </div>  
</header>

<section id="info">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <h3><i class="fa fa-book"></i> O mnie</h3>
                <img src="http://tlumacz-litewskiego.eu/img/slide1.jpg" class="img-responsive">
                <p>Litewski to mój ojczysty język, większość życia mieszkałam na Litwie, gdzie studiowałam filologię litewską na Uniwersytecie Wileńskim.</p>
                <div class="collapse" id="cl1">
                    <p>Po przeprowadzce do Polski  na Uniwersytecie Warszawskim w Instytucie Języka I Kultury Polskiej Dla Cudzoziemców uzyskałam świadectwo znajomości języka polskiego. Ukończyłam pedagogikę na Uniwersytecie w Białymstoku.</p>
                    <p>Posiadam dziesięcioletnie doświadczenie jako tłumacz języka litewskiego. Przez te 10 lat, pracując z różnymi klientami, przetłumaczyłam setki stron o przeróżnej tematyce, m.in. turystyka, sprawozdania, statuty, przetargi, strony www, artykuły, etykiety, instrukcje obsługi, katalogi, foldery reklamowe, dokumentacje sądowe i wiele wiele innych.</p>
                </div>
                <a role="button" data-toggle="collapse" href="#cl1" aria-expanded="false" aria-controls="collapseExample1" id="element1" onclick="changeText(1)">Więcej...</a>
            </div>
            <div class="col-sm-4">
                <h3><i class="fa fa-newspaper-o"></i> Oferta</h3>
                <img src="http://tlumacz-litewskiego.eu/img/slide2.jpg" class="img-responsive">
                <p>Tłumaczenia ustne, pisemne, nauka języka litewskiego i korepetycje.</p>
                <div class="collapse" id="cl2">
                    <p><b>Tłumaczenia pisemne:</b> Tłumaczę teksty na język litewski oraz z języka litewskiego. Przetłumaczyłam m.in. kilkanaście katalogów, opowiadania, różne dokumenty, umowy, projekty i dokumenty związanie z realizacją projektów unijnych.</p>
                    <p><b>Tłumaczenia ustne:</b> tłumaczenie konferencyjne, symultaniczne (możliwość wynajmu sprzętu dla tłumaczeń symultanicznych), konsekutywne, towarzyszące, szeptane.</p>
                    <p><b>Nauka języka litewskiego i korepetycje:</b> prowadzę kursy nauki języka litewskiego na wszystkich poziomach dla klientów indywidualnych oraz instytucji.</p>
                    <p>Każde zlecenie jest traktowane indywidualnie, swoją pracę wykonuję rzetelnie i solidnie. Na życzenie klienta mogę przedstawić referencje zadowolonych klientów. </p>
                    <p>Gwarantowane bezpieczeństwo przekazywanych dokumentów oraz informacji. Każdy dokument jest traktowany jako poufny. Wykonane tłumaczenie jest archiwizowane przez okres 12 miesięcy. </p>
                    <p><b>Cena</b> tłumaczenia zależy od stopnia trudności tekstu, rodzaju tłumaczenia oraz terminu realizacji. Istnieje możliwość negocjacji cen przy większych zleceniach. </p>
                    1 strona obliczeniowa to 1600 znaków ze spacjami 12-punktową czcionką Times New Roman.</p>
                </div>
                <a role="button" data-toggle="collapse" href="#cl2" aria-expanded="false" aria-controls="collapseExample2" id="element2" onclick="changeText(2)">Więcej...</a>
            </div>
            <div class="col-sm-4">
                <h3><i class="fa fa-users"></i> Klienci</h3>
                <img src="http://tlumacz-litewskiego.eu/img/slide3.jpg" class="img-responsive">
                <p>Urząd Miasta Suwałki<br />
                Regionalny Ośrodek Kultury i Sztuki w Suwałkach<br />
                Suwalski Ośrodek Kultury...</p>
                <div class="collapse" id="cl3">
                    <p>Wigierski Park Narodowy<br />
                    Muzeum Wigier (Stary Folwark)<br />
                    Starostwo Powiatowe w Suwałkach<br />
                    Urząd Miasta w Giżycku<br />
                    Centrum Informacji Turystycznej w Giżycku, Wydawnictwo Mazurskie S.C.<br />
                    Podlaska Regionalna Organizacja Turystyczna<br />
                    oraz inni.</p>
                </div>
                <a role="button" data-toggle="collapse" href="#cl3" aria-expanded="false" aria-controls="collapseExample3" id="element3" onclick="changeText(3)">Więcej...</a>              
            </div>
        </div>
    </div>
</section>

<footer>
    <div class="container">
        <div id="copyright" class="row">
            <div class="col-sm-12">
                &copy; 2015 <a href="http://tlumacz-litewskiego.eu/">tlumacz-litewskiego.eu</a>
            </div>
        </div>
    </div>
</footer>

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-65084817-1', 'auto');
    ga('send', 'pageview');
</script>
<script type="text/javascript">
    function changeText(idElement) {
        var element = document.getElementById('element' + idElement);
        if (idElement === 1 || idElement === 2 || idElement === 3) {
            if (element.innerHTML === 'Więcej...') element.innerHTML = 'Mniej...';
            else {
                element.innerHTML = 'Więcej...';
            }
        }
    }
</script>

</body>
</html>

CSS:

header h1 {
  margin-bottom: 20px;
  font-size: 40px;
}
nav {
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 20px;
  font-size: 24px;
  border-top: 2px solid #C7C7C7;
  border-bottom: 2px solid #C7C7C7;
}
#main_image {
  background: url(http://tlumacz-litewskiego.eu/img/bg.jpg) no-repeat center center;
  background-size: cover;
}
.bookbox,
.contact {
   padding: 20px;
}
.bookbox img {
  max-width: 128px;
}
.contact {
  font-size: 16px;
  color: white;
}
.contact i {
  margin-right: 2px;
}
#info {
  text-align: center;
}
#copyright {
  margin-top: 20px;
  text-align: right;
}

I have done this for you in the hopes that it will serve as an example so can learn how to properly lay things out. Several recommendations:

  • Try to avoid using inline css (directly in your html)
  • Avoid using percentages if possible. Bootstrap is a fixed pixel framework.
  • Visit http://getbootstrap.com and go through the docs, most importantly the Getting Started page (and see the examples).

Hope this helps!

Not the answer you're looking for? Browse other questions tagged or ask your own question.