Jump to content
  • 0

Проблемы со спском

demi

Asked by demi,

 Share

Question

demi Explorer

demi

Posted
Posted 





.list{
	float:right;
	width:240px;
	margin:5px;
}
.list li {
	background-color:#333;
	list-style-image:url(../img/list.gif);
	list-style-position:inside;
	width:230px;
	padding: 8px 0 0 10px;
	height:25px;
	margin-top:5px;
}
h2{

	font-variant:small-caps;
	font-size:15px;
	color:#B9AC39;	
	line-height:20px;
	text-align:left;

	}

h1{
	color:#566a41;
	font-size:15px;	
}


<div class="list">
<ul>
  <li><a href="#"><a><h2>Home</h2></a></li>
  <li><a href="#"><a><h2>WHO WE ARE</h2></a></li>
  <li><a href="#"><a><h2>IMAGE GALLERY</h2></a></li>
  <li><a href="#"><a><h2>OUR PROJECTS</h2></a></li>
  <li><a href="#"><a><h2>CONTACTS</h2></a></li>
</ul>
 </div>  <!--Конец списка -->



Проблема с вледущем: этот код отображаеться как нужно только в опере. В остальных браузерах совем бред.

Подскажите как зделать что б во всех браузерах отображалось как в опере.

И если можно подскажите хороший ресурс где описано о разнице отоборажения в браузерах и как это фиксить.

Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0
demi Explorer

demi

Posted
  • Author
Posted (edited)

После долгих эксперемен код превратился в это и ещё там каккимто чудным образом оказалось "<a>" но поидеи должно быть так:



.list{
        float:right;
        width:240px;
        margin:5px;
}
.list li {
        background-color:#333;
        list-style-image:url(../img/list.gif);
        list-style-position:inside;
        width:230px;
        padding: 8px 0 0 10px;
        height:25px;
        margin-top:5px;
}
.list li a{

	font-variant:small-caps;
        font-size:15px;
        color:#B9AC39;  
        text-align:left;
	display:inline-block;
	}

        }

h1{
        color:#566a41;
        font-size:15px; 
}


<div class="list">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">WHO WE ARE</a></li>
  <li><a href="#">IMAGE GALLERY</a></li>
  <li><a href="#">OUR PROJECTS</a></li>
  <li><a href="#">CONTACTS</a></li>

</ul>
 </div>  <!--Конец списка -->

Кто чего сможет подсказать, натолкнуть на мысль?

Edited by demi
Link to comment
Share on other sites
  • 0
Softlink Explorer

Softlink

Posted
Posted

Подсказать как сделать так что б во всех браузерах данный список отображался как на картинке. Пока что так отображаеться только в опере.

у меня вот так все работает. Только нет маркера списка, чтобы попробовать.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<style>

.list{
        float:right;
        width:240px;
        margin:5px;
}
.list li {
        background-color:#333;
        list-style-image:url(../img/list.gif);
        list-style-position:inside;
        width:230px;
        padding: 8px 0 0 10px;
        height:25px;
		border:2px solid #000;
		text-transform:uppercase;
}
.list li a{

        font-variant:small-caps;
        font-size:15px;
        color:#B9AC39;  
        text-align:left;
        display:inline-block;
		text-decoration:none;
        }

        }

h1{
        color:#566a41;
        font-size:15px; 
}
</style>
<body>
<div class="list">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">WHO WE ARE</a></li>
  <li><a href="#">IMAGE GALLERY</a></li>
  <li><a href="#">OUR PROJECTS</a></li>
  <li><a href="#">CONTACTS</a></li>

</ul>
 </div>  <!--Конец списка -->

</body>
</html>

Link to comment
Share on other sites
  • 0
Softlink Explorer

Softlink

Posted
Posted

Оно то конешно работает и выравнивает по вертикали. но если поставить вместо маркера картинку: http://your-photo.ucoz.ru/_ph/25/2/58006219.gif. то текс выровнять по центур не получаеться.

"невозможно найти ресурс"

Link to comment
Share on other sites
  • 0
Softlink Explorer

Softlink

Posted
Posted (edited)

а вот так вот если? Маркер списка отменить, и сделать его просто картинкой.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<style>

.list{
        float:right;
        width:240px;
        margin:5px;
}
.list li {
        background-color:#333;
        list-style-type:none;
        width:230px;
        padding: 8px 0 0 10px;
        height:25px;
		border:2px solid #000;
		text-transform:uppercase;
}

.list li img{
float:left;
padding-right:5px;
}

.list li a{
        padding-top:-8px;
        font-variant:small-caps;
        font-size:15px;
        color:#B9AC39;  
        text-align:left;
        display:inline-block;
		text-decoration:none;
        }

        }

h1{
        color:#566a41;
        font-size:15px; 
}
</style>
<body>
<div class="list">
<ul>
  <li><img src="images/list.gif"><a href="#">Home</a></li>
  <li><img src="images/list.gif"><a href="#">WHO WE ARE</a></li>
  <li><img src="images/list.gif"><a href="#">IMAGE GALLERY</a></li>
  <li><img src="images/list.gif"><a href="#">OUR PROJECTS</a></li>
  <li><img src="images/list.gif"><a href="#">CONTACTS</a></li>

</ul>
 </div>  <!--Конец списка -->

</body>
</html>

Edited by Softlink
Link to comment
Share on other sites
  • 0
Bonzash Explorer

Bonzash

Posted
Posted (edited)

а вот так вот если? Маркер списка отменить, и сделать его просто картинкой.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<style>

.list{
        float:right;
        width:240px;
        margin:5px;
}
.list li {
        background-color:#333;
        list-style-type:none;
        width:230px;
        padding: 8px 0 0 10px;
        height:25px;
		border:2px solid #000;
		text-transform:uppercase;
}

.list li img{
float:left;
padding-right:5px;
}

.list li a{
        padding-top:-8px;
        font-variant:small-caps;
        font-size:15px;
        color:#B9AC39;  
        text-align:left;
        display:inline-block;
		text-decoration:none;
        }

        }

h1{
        color:#566a41;
        font-size:15px; 
}
</style>
<body>
<div class="list">
<ul>
  <li><img src="images/list.gif"><a href="#">Home</a></li>
  <li><img src="images/list.gif"><a href="#">WHO WE ARE</a></li>
  <li><img src="images/list.gif"><a href="#">IMAGE GALLERY</a></li>
  <li><img src="images/list.gif"><a href="#">OUR PROJECTS</a></li>
  <li><img src="images/list.gif"><a href="#">CONTACTS</a></li>

</ul>
 </div>  <!--Конец списка -->

</body>
</html>

Бедаааа...

Работающий код:

<style type="text/css">
    ul.example
    {
        margin: 5px 0;
        padding: 0 0 0 2px;
    }
    ul.example li
    {
        margin: 5px 0; padding: 0 0 0 20px;
        list-style-type: none;
        background: url('img.gif') no-repeat 0 6px;
    }
</style>
<ul class="example">
    <li>text</li>
    <li>text</li>
</ul>

demi картинку сделай бекграундом и задай отступы.

Edited by Bonzash
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept