html - Why is my body wider then the content? -
i out of ideas... can't post images yet, sorry. so, making site , reason body keeps being wider content. can't seem find reason. when check in chrome dome doesn't marked actual body.
html { height:100%; width:100%; } body { background: black; margin:0; padding:0; position: relative; height: auto; min-height: 100% !important; font-size: 95%; display:block; width: 100%; overflow:auto; } .nav { background: #6192ec; height: 50px; width: 100%; text-align: center; } .nav nav{ width: 100%; line-height: 2.2; margin: 0 auto; margin-left: 4%; vertical-align: top; display: inline-block; } .nav nav { font-family: oxygen; font-size: 140%; list-style: none; color: #283040; text-decoration: none; padding: 0 60px 0 0; } .nav ul { position: relative; display: inline; padding: 0; } .nav nav ul li { display: inline-block; } this entire code. if find anything... grateful suggestions , thank in advance reading this!
your navigation bar pushing things out:
.nav nav{ width: 100%; // stretch entire width line-height: 2.2; margin: 0 auto; margin-left: 4%; // , start 4% away edge vertical-align: top; display: inline-block; } lose margin-left, , set margin: 0;
html { height:100%; width:100%; } body { background: black; margin:0; padding:0; position: relative; height: auto; min-height: 100% !important; font-size: 95%; display:block; width: 100%; overflow:auto; } { text-decoration: none; } .container { background: #fff url("/users/sophie/dropbox/projects/teneriffablog/imgsrc/pattern-9xhd.png") repeat; min-height:100%; position:relative; } .header { background: #3b3c3f; height: 80px; } .header img { height: 60px; width: auto; float: left; padding-left: 50px; padding-top: 10px; } .header h1 { float: left; margin: 0 1%; } .header a, a:active, a:visited { font-family: vollkorn; font-weight: normal; letter-spacing: 1px; line-height: 2.4; font-size: 110%; color: #e6e6e6; } .nav { background: #6192ec; height: 50px; width: 100%; text-align: center; } .nav nav{ width: 100%; line-height: 2.2; margin: 0; vertical-align: top; display: inline-block; } .nav nav { font-family: oxygen; font-size: 140%; list-style: none; color: #283040; text-decoration: none; padding: 0 60px 0 0; } .nav ul { position: relative; display: inline; padding: 0; } .nav nav ul li { display: inline-block; } .nav ul li .activearrow { width: 0px; height: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #f7f7f7; margin: -8px 0 0 20px; } .searchbar { float: right; margin: 0 2%; line-height: 5.5; } .searchbar input { font-family: arial,sans-serif; color: #909cb2; font-size: 110%; font-style: italic; border: 1px solid #6192ec; border-radius: 3px; background-color: #fff; height: 30px; width: 300px; padding: 3px; } .searchbar input.sbtn { height: 38px; width: 75px; } .impressum { color: #8c8686; font-family: 'lato',arial,sans-serif; font-size: 12px; text-align: left; height: 80px; width: auto; line-height: 80px; float: left; padding-left: 19%; } .credit { color: #8c8686; font-family: 'lato',arial,sans-serif; font-size: 12px; text-align: left; height: 80px; width: auto; line-height: 80px; float: right; padding-right: 20%; } .impressum ul, li { text-decoration: none; list-style: none; display: inline; padding: 0 6px; } .impressum { color: #8c8686; font-family: 'lato',arial,sans-serif; font-size: 12px; } .content { background: none; width: 100%; height: 100%; overflow: auto; display: block; padding-bottom: 80px; /* height of footer element */ } .content { color: 661128; font-family: 'lato', arial, sans-serif; text-align: center; } .welcome { float: right; width: 57%; } .hikelist { position: relative; background: #eff1f8 url("/users/sophie/dropbox/projects/teneriffablog/imgsrc/bg.png"); border-right: 1px solid #a0b6c9; float: left; width: 24.9%; min-height: 100%; height: 100%; } .hikelist ul { overflow: scroll; } .hikelist ul li { display: list-item; } .footer { width:100%; height:80px; position:absolute; bottom:0; left:0; background: #3b3c3f; } <div class="container"> <div class="header"> <img src="/users/sophie/dropbox/projects/teneriffablog/imgsrc/favicon.png" alt="icon"> <h1><a href="#">abc <i>def</i> hij <i>klm</i></a></h1> <article class="searchbar"> <form id="tfnewsearch" method="get" action="http://www.google.com"> <input type="text" id="tfq2b" class="tftextinput2" name="q" size="21" maxlength="120" value="suchen sie auf unserer website"> <input type="submit" value="suchen" class="sbtn"> </form> </article> </div> <div class="nav"> <nav> <ul> <li> <a href="#">home</a> <div class="activearrow"></div> </li> <li><a href="#">grundregeln</a></li> <li><a href="#">wanderungen</a></li> <li><a href="#">links</a></li> </ul> </nav> </div> <div class="content"> <div class="hikelist"> <ul> <li><a href="">item 1</a></li> <li><a href="">item 2</a></li> <li><a href="">item 3</a></li> <li><a href="">item 4</a></li> <li><a href="">item 5</a></li> <li><a href="">item 6</a></li> <li><a href="">item 7</a></li> <li><a href="">item 8</a></li> <li><a href="">item 9</a></li> <li><a href="">item 10</a></li> <li><a href="">item 11</a></li> <li><a href="">item 12</a></li> <li><a href="">item 13</a></li> <li><a href="">item 14</a></li> <li><a href="">item 15</a></li> <li><a href="">item 16</a></li> <li><a href="">item 17</a></li> <li><a href="">item 18</a></li> <li><a href="">item 19</a></li> <li><a href="">item 20</a></li> <li><a href="">item 21</a></li> <li><a href="">item 22</a></li> <li><a href="">item 23</a></li> <li><a href="">item 24</a></li> <li><a href="">item 25</a></li> <li><a href="">item 26</a></li> <li><a href="">item 27</a></li> <li><a href="">item 28</a></li> <li><a href="">item 29</a></li> <li><a href="">item 30</a></li> <li><a href="">item 31</a></li> <li><a href="">item 32</a></li> <li><a href="">item 33</a></li> <li><a href="">item 34</a></li> <li><a href="">item 35</a></li> <li><a href="">item 36</a></li> <li><a href="">item 37</a></li> <li><a href="">item 38</a></li> <li><a href="">item 39</a></li> <li><a href="">item 40</a></li> <li><a href="">item 41</a></li> <li><a href="">item 42</a></li> <li><a href="">item 43</a></li> <li><a href="">item 44</a></li> <li><a href="">item 45</a></li> <li><a href="">item 46</a></li> <li><a href="">item 47</a></li> <li><a href="">item 48</a></li> <li><a href="">item 49</a></li> <li><a href="">item 50</a></li> </ul> </div> <div class="welcome"> <div class="headimg"> </div> <h2>welcome</h2> <article> welcome text </article> </div> </div> </div> <div class="footer"> <div class="impressum"> <li> <ul><a href="#">about</a></ul> <ul>|</ul> <ul><a href="#">contact</a></ul> <ul>|</ul> <ul><a href="">impressum</a></ul> </li> </div> <div class="credit"> blup </div> </div> </div>
Comments
Post a Comment