Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Bootstrap 2 header images positioning

    Hello!

    I make a joomla 3 theme with bootsrap. My problem is that I must put 5 image in header and I can't positioning the images like in the picture or in attachment:


    this has been done:
    CSS:
    Code:
    .flag {
        display: block;
        position:relative;
    	padding-left: 15px;
    	float:left;
    }
    
    .logo  {
    background-image: url('images/header.jpg');
    background-repeat: no-repeat;
    	background-position: top center;
    background-size:100% 100%;
    height: 183px;
    }
    
    .logo .logo-btn{
    float: none;
    position: absolute;
    padding: 15px 15px 15px 15px;
    
    }
    
    .facebook-button {
        display: block;
    	float: none;
        position:relative;
    	padding-right: 15px;
    	float:right;
    }
    HTML:
    Code:
     <div class="logo">
    		
    		<img class="radio-button" src="images/image05.png" alt="" />
    		<img class="flag" src="images/image02.png" alt="flag" />
    		<img src="images/image03.png" alt="facebook" />
    		<img src="images/image04.png" alt="youtube" />
                    <img class="logo-btn" src="image01.png" alt="logo" />
    </div>

    Many thanks for any help !
    LostMind
    Bootstrap 2 header images positioning-header.jpg

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,450
    Thanks
    23
    Thanked 631 Times in 630 Posts
    Welcome to the forums LostMind,
    You didn't give me any links to the images so I used your 640x215 as an aid and positioned divs instead.
    Try to stay away from using position:relative; and position: absolute; they will only get you into trouble most of the time, forceing you to use them more and more in your lay out.
    If you have any questions feel free to ask:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style type="text/css">
    .logo  {
    	background-color: pink;
    	background-image: url('images/header.jpg');
    	background-repeat: no-repeat;
    	background-position: top center;
    	background-size:100% 100%;
    	height: 183px;
    	width: 1000px;
    	outline:1px solid red;
    }
    .img2, .img3, .img4{
    	width: 100px;
    	height: 20px;
    	border: 1px solid black;
    	margin: 10px;
    	display:inline;
    }
    .img3, .img4{
    	float:right;
    }
    .img2{
    	float:left;
    }
    .img5{
    	width: 200px;
    	height: 30px;
    	margin: 20px;
    	float:right;
    	border: 1px solid black;
    }
    .img1{
    	width: 500px;
    	height: 50px;
    	border: 1px solid black;
    	clear:both;
    	margin: 0 auto;
    }
    
    </style>
    </head>
    
    <body>
     <div class="logo">
    	<div class="img2">img2</div>
    	<div class="img3">img3</div>
    	<div class="img4">img4</div>
    	<div class="img1">img1</div>
    	<div class="img5">img5</div>
    </div>
    </body>
    </html>
    background color and borders are just to help show the divs.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    LostMind (04-10-2014)

  • #3
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Perfect solution!

    Quote Originally Posted by sunfighter View Post
    Welcome to the forums LostMind,
    You didn't give me any links to the images so I used your 640x215 as an aid and positioned divs instead.
    Try to stay away from using position:relative; and position: absolute; they will only get you into trouble most of the time, forceing you to use them more and more in your lay out.
    If you have any questions feel free to ask:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style type="text/css">
    .logo  {
    	background-color: pink;
    	background-image: url('images/header.jpg');
    	background-repeat: no-repeat;
    	background-position: top center;
    	background-size:100% 100%;
    	height: 183px;
    	width: 1000px;
    	outline:1px solid red;
    }
    .img2, .img3, .img4{
    	width: 100px;
    	height: 20px;
    	border: 1px solid black;
    	margin: 10px;
    	display:inline;
    }
    .img3, .img4{
    	float:right;
    }
    .img2{
    	float:left;
    }
    .img5{
    	width: 200px;
    	height: 30px;
    	margin: 20px;
    	float:right;
    	border: 1px solid black;
    }
    .img1{
    	width: 500px;
    	height: 50px;
    	border: 1px solid black;
    	clear:both;
    	margin: 0 auto;
    }
    
    </style>
    </head>
    
    <body>
     <div class="logo">
    	<div class="img2">img2</div>
    	<div class="img3">img3</div>
    	<div class="img4">img4</div>
    	<div class="img1">img1</div>
    	<div class="img5">img5</div>
    </div>
    </body>
    </html>
    background color and borders are just to help show the divs.

    Thaaaaaaaaaanks!!!! This is perfect! YOU saved my day . I give you a beer D
    many,many thanks my friend


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •