Вопросы по выравниванию по гиперссылке

Я работаю над блогом для проекта, и у меня есть определенный макет, запланированный, с верхним заголовком, навигацией слева, двумя секциями посередине (одна - это статья, другая - комментарии раздел.) и боковую панель (в сторону) вправо. Единственная проблема заключается в том, что верхний край боковой панели выравнивается с секцией нижних комментариев, а не с разделом верхней статьи. Любая помощь приветствуется.Вопросы по выравниванию по гиперссылке

Вот JSFiddle: http://jsfiddle.net/randomname14/nvu4qhcp/5/, и результат на полный экран (http://jsfiddle.net/randomname14/nvu4qhcp/5/embedded/result/)

А вот код (извините про то, что все тело, но я не уверен, что может быть причиной проблемы, так что я оставил в большей части)

<body> 


<header> 

<a href="my page.html" style="font-size:500%; text-decoration: none;"> <span style="color: #FFFFFF">tech</span><span style="color: #DB4105;">news</span><span style="color: #FFFFFF">daily</span> </a> 

</header> 

<nav> 
<hr/> 
<b><a href="my page.html" style="color: #FFFFFF;">Home</a><br> 
<hr> 
Hardware<br> 
<hr/> 
Software<br> 
<hr/> 
Builds<br> 
<hr/> 
Games<br> 
<hr/> 
Pereipherals<br> 
<hr/> 
Other Stuff<br> 
<hr/> 
FAQ<br> 
<hr/> 
Contact Me<br> 
<hr/> 
</nav> 

<section> 

<h1 style="font-size: 200%"> Article Title </h1> 

<img src="amd-radeon-logo.jpg" width="1095" border="3px"> 
Article 
</p> 

</section> 

<section> 

<textarea rows="10" cols="101" placeholder="Like this article if you liked it, dislike it if you disliked it, or leave a comment down below if your thoughts are more complicated than this."></textarea> 

</section> 

<aside style=" color: #FFFFFF;"> 

<hr/> 
<hr/> 
<b> 
<a href="http://www.reddit.com" style="text-decoration:none"> 
<img src="Ad.png" width="416" border="3px"> 
</a> 
<p style=" color: #FFFFFF; font-size: 125%"><b> Buy a Shirt today! </b></p> 
<hr/> 
<p style=" color: #FFFFFF; font-size: 125%"><b> Older Articles </b></p> 
<img src="390.jpg" width="416" border="3px"> 
<p style=" color: #FFFFFF; font-size: 70%"><b> AMD R9 300 Series GPU Leaked in Photos with R9 295X2 Cooler Design. </b> </p> 
<img src="INTEL.jpg" width="416" border="3px"> 
<p style=" color: #FFFFFF; font-size: 70%"><b> 14nm Intel Core M Broadwell-Y Laptops Coming Soon. </b></p> 
<img src="W10.png" width="416" border="3px"> 
<p style=" color: #FFFFFF; font-size: 70%"><b> Microsoft Unveils the Next Version of Windows. Uh, I Think They Forgot a Number... </b></p> 
<img src="Ubisoft.jpg" width="416" border="3px"> 
<p style=" color: #FFFFFF; font-size: 70%"><b> Ubisoft Blames OEMs for AC: Unity Performance Issues, <i>Really?</i> </b></p> 
<img src="780TI.jpg" width="416" border="3px"> 
<p style=" color: #FFFFFF; font-size: 70%"><b> GeForce GTX 700 Series Price Drops After 900 Series Unveiling </b></p> 
<img src="GEFORCE.png" width="416" border="3px"> 
<p style=" color: #FFFFFF; font-size: 70%"><b> Nvidia Unveils 2nd Generation Maxwell GPUs, The GTX 900 Series. </b></p> 
<hr/> 
Social:<br> 
<br> 
<img src="TWITTER.png" width="30"> 
<a href="http://www.twitter.com" style="color : white">Twitter</a> 
<br> 
<img src="FACEBOOK.png" width="30"> 
<a href="http://www.facebook.com" style="color : white">Facebook</a> 
<br> 
<img src="YOUTUBE.png" width="30"> 
<a href="http://www.youtube.com" style="color : white">YouTube</a> 
<hr/> 
Top Channels:<br> 
<br> 
<img src="LINUS.jpg" width="30"> 
<a href="http://www.youtube.com/user/linustechtips/videos" style="color : white;">Linus</a> 
<br> 
<img src="TEK.jpg" width="30"> 
<a href="http://www.youtube.com/user/razethew0rld/videos" style="color : white;">Logan</a> 
<br> 
<hr/> 
PC Builder Resources: 
<br> 
<br> 
<ul> 
<li><a href="http://www.intel,com" style="color : white;">Intel</a></li> 
<li><a href="http://www.amd.com" style="color : white;">AMD</a></li> 
</ul> 
<hr/> 
<hr/> 
</b> 
</aside> 

<footer> © Name, 2000-2014, all rights reserved. </footer>

источник

2014-12-23 randomname14

Вы должны использовать http://validator.w3.org/, ваш HTML содержит много ошибок (незакрытые теги (img, a, li ...), b содержащий элементы блока ...) – yunandtidus

Я пробовал использовать html, чтобы очистить его, и он протестировал его, он полностью испортил макет. Также об ошибках, я довольно новичок в html, я начал около 3-4 месяцев назад. – randomname14

Вы должны поместить «статьи» (в section элементы) внутри родительского контейнера.

HTML:

<div class="main-content"> 
    <section> 
     <h1 ... content of section 1 ... </p> 
    </section> 
    <section> 
     <textarea ... content of section 2 ... </textarea> 
    </section> 
</div>

CSS:

.main-content { 
    width:1100px; 
    float: left; 
} 
section { 
    width:1100px; 
    /*float: left; **can remove float** */ 
    padding:10px; 
    ... 
}

DEMO (with reduced width for demonstration purposes)

источник

2014-12-23 05:47:44 JRulle

Спасибо, это сработало! – randomname14

Вопросы по выравниванию по гиперссылке

ответ

Смежные вопросы