1 Replies - 695 Views - Last Post: 14 February 2017 - 08:05 PM

#1 ahmedba   User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 220
  • Joined: 24-January 14

How to add banner on left side of logo without cutting

Posted 14 February 2017 - 03:51 AM

How to add banner swf in left side of logo without cutting or broke ?

I have banner swf i need to add on left side of logo

my design contain to menu - logo and banner

before i put banner design logo full display without cutting

but after adding banner my design corrupt and banner cutting

Html code

<div class="container">
        <ul>
            <li><a href="#home">الرئيسيه</a></li>
            <li><a href="#news">نبذه عن</a><i>|</i></li>
            <li><a href="#contact">اتصل بنا</a><i>|</i></li>
            <li><a href="#contact">اللغه</a><i>|</i></li>
            <li><a href="#contact"> تسجيل دخول</a><i>|</i></li>
        </ul>
        <div class="w3ls_header_middle">
            <div class="container">
                <div class="agileits_logo">
                    <img src="../../images/logo.png">
                </div>
                <div class="agileits_logo"></div>
                </div>
after banner added
           <div>
               <embed src="../../images/banner.swf" type="application/x-shockwave-flash" width="624" height="104" />
               

           </div>
            

            </div>

        </div>


css code

body {margin:0}
ul {
    border-top: 2px solid red;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    height:5%;
    padding: 1px;
 
}

li {
    float: right;
}

li a {
    color: white;
    padding: 16px;
    text-decoration: none;
}
li i{
  
  color:white;
  
}
.w3ls_header_middle {
    padding: 0 0;
     /*padding-top:30px*/
	
}

.agileits_logo{
	float:right;
	margin-right:0em;
    margin-top:1em;
   
  

	
}

---after banner added---

.agileits_banner {
	float:left;
    margin-left:0em;
    margin-top:1em;
	
}


image problem found in link below :

http://www.mediafire...6vj/changes.jpg

so that

How to add banner swf in left side of logo without cutting or broke ?

Is This A Good Question/Topic? 0
  • +

Replies To: How to add banner on left side of logo without cutting

#2 Nonsense7   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 22-October 14

Re: How to add banner on left side of logo without cutting

Posted 14 February 2017 - 08:05 PM

Try using web developer tools on your browser to see how your elements flow in your layout. I believe your issue is that because you are floating both the banner and logo, that this removes them from the normal flow, which pushes them up to the top of the page behind the navbar. As a quick fix, I believe if you increase the value of
margin-top:
on both your banner and logo that should push them farther down the page and clear your navbar.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1