навигация выбрасывает изображение из центра - PullRequest
Новая
       21

навигация выбрасывает изображение из центра

0 голосов
/ 12 мая 2011

Я работал над этим некоторое время и, похоже, сам не могу решить проблему или найти ответ где-нибудь.

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

Есть ли способ, которым я могу заставить его видеть проходить через панель навигации и центрироваться вокруг окна браузера?

вот код: 

<html>
<head>
<title>dir</title>

<style type="text/css">
body {
font-family: "Arial", "Helvetica", "Helvetica Neue";
font-size: 14px;
background-image: url('.jpg');
background-position:center;
background-size:50em;
background-repeat:no-repeat;
margin: 30px 0px 0 0;
text-align: left;
color: #333;
}
title {
font-family: "Arial", "Helvetica", "Helvetica Neue";
font-size: 14px;
background-image: url('.jpg');
background-position:center;
background-size:50em;
background-repeat:no-repeat;
margin: 30px 0px 0 0;
text-align: left;
color: #333;
}
div#container {
width:100px;
background:#FFF;
height:auto;
overflow:auto;  
border: 1px solid black;
border-left:0;
float:left;

}

div#site_title {
color:#00ffff;
text-transform: lowercase;
font-weight: ;
font-size: 35px;
line-height: 15px;
margin: 0 0 0 0px;
}

div#site_title2 {
color:#00ffff;
text-transform: uppercase;
font-weight: bold;
font-size: 17px;
line-height: 15px;
margin: 0 0 0 0px;
}


#menu ul{
list-style-type: none;
padding: 0;
margin-left: 0;
}

div#menu li a
{
background:#fff
border:1px solid #fff;
margin: 0;
padding: 0;
display: block; 
}


-googlechromefix-
div#menu li:hover a {
background:#00ffff;
color:#FFFFFF;
border:1px solid #fff;
margin: 0;
padding: 0;
display: block;

}
div#menu ul a
{
text-decoration: none;
color: #333;
}
div#menu ul a:hover
{
background:#00ffff;
color:#FFFFFF;
font-weight:bold
}





div#page_content {
font-family: "Arial", "Helvetica", "Helvetica Neue";
font-size: 14px;
margin: 30px 0px 0 0;
text-align: left;
color: #333;
}
.color01 {
color: 
}
#desertshoredom2 {
display:  block;  
margin-left: auto;   
margin-right: auto;
text-align: center;
border: 1px solid red;
}

div#container2 {
display: block;   
margin-left: auto;   
margin-right: auto;
text-align: center;
}

</style>
</head>

<body>
<div id="site_title">
<center><span> &#x25B3;&#x25B2;desertshore&#x25B2;&#x25B3;</span></center>
<div id="site_title2">
<span>directory</span>

</div>
</div>

<div id="container">
<div id="menu">
<ul>
    <li><a href="happyanniversary"><span class="color01">Happy Anniversary</span> </a></li>
    <p><li><a href="downloads"><span class="color01">Downloads</span></a></li </p>
    <p><li><a href="about"><span class="color01">About</span></a></li></p>
    <p><li><a href="ask"><span class="color01">Ask</span></a></li></p>
</ul>
</div>

</div>
<p><img id="desertshoredom2" src="desertshoredom2.jpg"/></p>

<div id="container2">
<h1>+++test+++ Test +++test+++</h1>
<p> idreamed idreamed</p>
</div>
</body>

Большое спасибо за помощь, кажется, что-то действительно простое, чего я не делаю, однако мой опыт работы с HTML / CSS чрезвычайно прост.

1 Ответ

0 голосов
/ 12 мая 2011

Вам просто нужно обновить следующий блок CSS, чтобы добавить position:absolute;

ДЕМО: http://jsfiddle.net/Jaybles/pzuRp/

div#container {
    width:100px;
    background:#FFF;
    height:auto;
    overflow:auto;    
    border: 1px solid black;
    border-left:0;
    float:left;
    position:absolute; 
}
...