user
  • 0
Гуру

Помогите с небольшой модификацией логотипа CSS?

  • 0

Я почти понял это, но я новичок в кодировании, и этот последний бит меня смущает.

Я пытаюсь, чтобы мой логотип «талисман» был на одном уровне с верхней строкой моего заголовка и сидел «на» панели навигации внизу. У меня на сайте есть фото именно того, о чем я говорю на сайте. ( bloggingbuddhist.com )

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

Код, которым я манипулирую, приведен ниже, похоже, мне действительно нужно манипулировать панелью навигации меню… если не больше, чем это. Любые идеи, что сделать, чтобы весь этот раздел сидел заподлицо, как у меня на картинке на сайте? СПАСИБО!

#logo {
float:left;
height:150px;
overflow:hidden;
padding:10px 0 0px 10px;
}

#logo #h1{
float:left;
font-family:Georgia, serif;
font-size:48px;
}

#logo #h2 {
color:#777;
float:left;
font-size:13px;
padding:5px 20px 10px;
}

#logo #h1 a {
text-decoration: none;
color:#999;
border:0;
}
#logo #h1 a:hover, #logo #h1 a:visited, #logo #h1 a:link {
border:0;
}

#header-icons {
position:absolute;
right:0;
margin-top:10px;
z-index:99;
}

#header-icons .twitter,
#header-icons .rss{
height:27px;
width:160px;
margin:16px 25px;
}
#header-icons .twitter{
background: url("img/twitter.png") no-repeat scroll 0 0 transparent;
}

#header-icons .rss{
background: url("img/rss.png") no-repeat scroll 0 0 transparent;
}

#header-icons .twitter a,
#header-icons .rss a{
padding:10px 80px;
border:0;
}

#menu {
background:url("img/menu-bg.png") no-repeat scroll 0 top transparent;
clear:both;
margin:0 auto 0 -4px;
width:1052px;
}

.menu-bottom {
background:url("img/menu-bottom-bg.png?m") no-repeat scroll 0 bottom transparent;
padding-bottom:16px;
}

#menu ul {
background:url("img/menu-curve-bg.png") no-repeat scroll left top #f1f1f1;
list-style:none outside none;
margin:0 30px;
padding:0px 10px 0 40px;
text-align:right;
float:right;
}

#menu li {
display: inline;
padding:14px 0 11px;
border-left:1px solid transparent;
border-right:1px solid transparent;
white-space:nowrap;
position:relative;
}

#menu li.current_page_item,
#menu li.current_page_item:hover {
background-color: #fafafa;
border-left:1px solid #E5E5E5;
border-right:1px solid #E5E5E5;
}

#menu a {
border:0 none;
color:#a1a1a1;
font-size:16px;
font-weight:bold;
text-decoration:none;
text-shadow:1px 1px 0px #fff;
padding:10px 40px;
line-height:40px;
}
#menu a:hover, 
#menu a:active,
#menu li.current_page_item a:link,
#menu li.current_page_item a:visited,
#menu li.current_page_item a:hover,
#menu li.current_page_item a:active{
color:#999;
border:0;
}

#menu li:hover {
background-color: #f7f7f7;
border-left:1px solid #E5E5E5;
border-right:1px solid #E5E5E5;
}
Share
  1. Уменьшите отступ #logo до 8px вместо, 10px и логотип будет лучше вписываться в фон.

    • 0
  2. Добавьте эту строку в свой css:

    #logo img {height: 190px; position: absolute;}
    

    Это должно сделать это, вам нужно будет сделать фон изображения прозрачным.

    • 0

Оставить ответ

You must login to add an answer.