2015-03-07 4 views
0

Я полный noob в этом ... Я сделал все классы академии кода, похоже, не нашел ответа на мою проблему нигде. В основном мой сайт централизован, сверху вниз он идет;У меня есть это «пространство» под моей навигационной панелью

Logo Navigation Bar {Огромного случайное пространство) Picture Copyright примечания

Именно это пространство я пытаюсь избавиться, так что пространство у меня между моим логотипом и навигационной панелью соответствует пространству между навигационной панелью и изображением ...

Вот мой HTML;

<!DOCTYPE html> 
<html> 
<head> 
<title>Access All Areas - Fashion</title> 
<link rel="stylesheet" href="stylesheet.css"> 
</head> 
<body> 
<div style="min-width: 960px; min-height: 760px; margin: 0 auto;"> 
<!-- AAA Logo --> 
<div class="image"> 
    <center> 
    <img src="a1.jpg" alt="Access All Areas Logo" width="750px"   
height="320px"> 
    </center> 
</div> 
<!--Navigation Bar--> 
<div class="nav"> 
    <center> 
    <ul> 
    <li class="main"><a href="main.html">HOME</a></li> 
    <li class="live"><a href="live.html">LIVE</a></li> 
    <li class="studio"><a href="studio.html">STUDIO</a></li> 
    <strong><li class="fashion"><a href="fashion.html">FASHION</a></li> 
</strong> 
    <li class="weddings"><a href="weddings.html">WEDDINGS</a></li> 
    <li class="portraits"><a href="portraits.html">PORTRAITS</a></li> 
    <li class="about"><a href="about.html">ABOUT</a> 
    <a href="contact.html">CONTACT</a></li> 
    </ul> 
    </center> 
</div><!--Nav--> 
</div><!--Style--> 
<!--COVER IMAGE--> 
<center> 
<div class="cover"> 
<img src="images/fashion.jpg" alt="Access All Areas Fashion Image" 
width="1400px" height="2300px"> 
</center> 
</div><!--Cover--> 
<!--Copyright--> 
<center> 
<div id="copyright"> 
<p><strong>ALL RIGHTS RESERVED ACCESS ALL AREAS PHOTOGRAPHY</p></strong> 
</div><!--Copyright--> 
</center> 
</body> 
</html> 

и мой CSS;

li { 
display:inline; 
} 

.nav a { 
font-family:arial; 
font-size:18px; 
color: black; 
padding:0px 75px 0px 25px; 
} 

a { 
text-decoration:none; 
} 

.cover { 
margin-top:0px; 
} 

.main { 
text-weight:strong; 
} 

p { 
font-family:arial; 
font-size:18px; 
font-weight:bold; 
} 

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

Большое спасибо

Питер Джеймс

+1

Я надеюсь, что код академии не учит никого использовать ''

. Кроме того, 'min-height: 760px;' кажется вашим преступником. – j08691

+0

Нет, я googled, как что-то сделать и нашел, что сработало. если есть лучший способ сделать что-то, я изменю его. Я хочу узнать все это –

+0

Хорошо, вот ссылка на элемент центра https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center. Я настоятельно рекомендую учиться на https://developer.mozilla.org/ – j08691

ответ

0

Было бы здорово и легко решить вашу проблему, если бы вы предоставили нам jsfiddle. Но в любом случае, я думаю, что проблема min-height. Поскольку вы заставляете заголовок иметь высоту 670px. См. Здесь http://jsfiddle.net/0v4fsg6z/ Я уменьшил высоту, чтобы удалить пространство перед записью Picture Picture.

0

Вы пытались установить свой img тег на position: absolute? fixed unfixed

+0

Я пробовал это, но он не делает того, что я хочу, чтобы он делал. Вместо этого он выравнивает левый и buggers вверх по остальной части макета. Сейчас я более или менее счастлив, когда проблема была минимальной. Я вступил в это, чтобы сделать что-то, чтобы остановить компоновку от перехода на haywire при событии изменения размера. это отсортировано сейчас, теперь единственное, что происходит с основным изображением, перемещается с окном, поскольку позиция занимает центральное место в окне, а не в макете .... –

+0

О, хорошо, я рад, что вы разобрались! :] Счастливые разработки. – BlueEyesWhiteDragon

+0

Какой текстовый редактор вы в основном используете? –

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