HTML/CSS定位和間距

我是新來編碼，並已使用此資源一段時間，但這是我的第一個問題！HTML/CSS定位和間距

這裏是有問題的網頁的鏈接：http://www.andrewkennedy.ie/

我已經包括明亮的背景只是爲了可以很容易地看到不同元素的開始和結束。

我想知道如何擺脫元素之間的空白（邊距和填充設置爲0）以及如何獲取藍色部分的內容，並將它們放到綠色部分，而不會影響我的名字的中心位置。換句話說，我希望我的名字完全如此 - 在中心位置 - 然後在窗口的最右側使用「電子郵件」和「LinkedIn」與垂直菜單內聯顯示。

這裏是我的html：

<div id="header"> 
    <div id="contact_menu"> 
     <ul> 
      <li><a href="mailto:[email protected]" target="_top">Email</a> 
      </li> 
      <li><a href="https://www.linkedin.com/pub/andrew-kennedy/42/a26/704" target="_blank">LinkedIn</a> 
      </li> 
     </ul> 
    </div> 
    <div id="title"> 
     <h1><span>A</span>ndrew <span>K</span>ennedy</h1> 

    </div> 
    <div id="nav"> 
     <ul> 
      <li><a href="http://www.andrewkennedy.ie/" target="_blank">Home</a> 
      </li> 
      <li><a href="http://www.google.ie/" target="_blank">Google</a> 
      </li> 
      <li><a href="http://www.yahoo.com/" target="_blank">Yahoo</a> 
      </li> 
      <li><a href="http://www.bing.com/" target="_blank">Bing</a> 
      </li> 
     </ul> 
    </div> 
</div>

我的CSS的刪節版（略無關件）：

/* Title CSS*/ 
#title { 
    background-color: #00ff00; 
    color: #000000; 
    font-family:'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 
    font-size: 40px; 
    text-align: center; 
    letter-spacing: 5px; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
/* Contact Menu CSS */ 
#contact_menu ul { 
    text-align: right; 
    list-style-type: none; 
    margin: 50px 50px 0 0; 
    padding: 0; 
} 
#contact_menu ul li a { 
    font-family:'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 
    font-size: 30px; 
    text-decoration: none; 
    text-align: right; 
    width: 100px; 
    font-weight: 400; 
} 
/* Navigation Menu CSS */ 
#nav ul { 
    background-color: #ff0000; 
    text-align: center; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
#nav ul li { 
    display: inline; 
} 
#nav ul li a { 
    font-family:'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 
    font-size: 30px; 
    text-decoration: none; 
    text-align: center; 
    display: inline-block; 
    width: 200px; 
}

任何幫助將非常感激。謝謝你的時間。

Andrew

來源

2014-07-06 user3808730

你的代碼肯定需要的工作。下面是我的優化和評論小提琴：http://jsfiddle.net/QJcsB/。

代碼中還剩下冗餘，我會讓你解決這些問題。

更新的HTML：

<div id="header"> 
    <ul id = "contact_menu"> 
     <li> 
      <a href="mailto:[email protected]" target="_top">Email</a> 
     </li> 
     <li> 
      <a href="https://www.linkedin.com/pub/andrew-kennedy/42/a26/704" target="_blank">LinkedIn</a> 
     </li> 
    </ul> 
    <h1 id = "title"><span>Andrew</span> <span>Kennedy</span></h1> 
    <ul id = "nav"> 
     <li> 
      <a href="http://www.andrewkennedy.ie/" target="_blank">Home</a> 
     </li> 
     <li> 
      <a href="http://www.google.ie/" target="_blank">Google</a> 
     </li> 
     <li> 
      <a href="http://www.yahoo.com/" target="_blank">Yahoo</a> 
     </li> 
     <li> 
      <a href="http://www.bing.com/" target="_blank">Bing</a> 
     </li> 
    </ul> 
</div> 
<div id="main"> 
    <img src="http://placehold.it/500x300" /> 
</div> 
<div id="footer"></div>

而且，CSS：

/* It is a good practice to use one of the reset css files. 
For more info see http://www.cssreset.com/ */ 

* { 
    margin: 0; 
    padding: 0; 
} 

/* Color code #fff is a valid abbreviation of #ffffff */ 

body { 
    background-color: #fff; 
} 

/* There is really no need to wrap h1 tag in a div tag. The h1, 
by default is a block element and you can just assign an id to it and 
access it directly. */ 

#title { 
    background-color: #0f0; 
    color: #000; 
    /* font-weight, font-size, line-height, and font-family were 
    combined into font declaration */ 
    font: bold 45px/1.5 'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 
    text-align: center; 
    letter-spacing: 5px; 

    /* width of 100% is not necessary, because h1 is a block and 
    spans the entire width of its parent by default. The margin 
    and padding of 0 were deleted also, because these are specified 
    in a mini-reset up top. */ 
} 

/* Your first and last names were surrounded by span elements. 
To invoke ::first-letter pseudo-element on these, the spans are displayed 
as inline-block */ 

#title > span { 
    display: inline-block; 
} 

#title > span::first-letter { 
    color: #900; 
} 

/* Same as with h1, there is no need to wrap an unordered list in a div. 
The ul, by default, is also displayed as a block */ 

#contact_menu { 
    background-color: #00f; 
    list-style-type: none; 
    text-align: right; 
} 

/* the list items are displayed as inline-blocks, which makes them stack 
horizontally while still allowing us to change their dimensions. Unlike 
floats, inline-blocks will not break the structure and do not require 
clearing */ 

#contact_menu > li { 
    display: inline-block; 
} 

#contact_menu > li > a { 
    /* Anchors (a), by default, are inlines. Changing their display 
    to block allows changing their dimensions. Instead of setting width 
    explicitly, the line-height and padding are used. Anchors do not 
    take a line to themselves, because they are wrapped in inline-block 
    list items */  
    display: block; 
    font: normal 30px/1.5 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 
    text-decoration: none; 
    padding: 0 5px; 

    /* text-align was deleted because it was specified on the level of 
    the ul and because li are inline-blocks, they wrap around the content 
    of their children, so doing text alignment within these is moot. width 
    was deleted as well because it is implicitly set through padding*/ 
} 

/* the entire chain in the selectors should be typed out. :hover pseudo-class 
is removed, because unless you are changing styles due to hovering, they'll 
stay the unchanged */ 

#contact_menu > li > a:link, 
#contact_menu > li > a:visited, 
#contact_menu > li > a:active { 
    color: #777; 
} 

#nav { 
    background-color: #f00; 
    list-style-type: none; 
    text-align: center; 
} 

#nav > li { 
    display: inline-block; 
} 

#nav > li > a { 
    display: block; 
    font: normal 30px/1.2 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 
    text-decoration: none; 
    padding: 0 10px; 
} 
#nav > li > a:link, 
#nav > li > a:active, 
#nav > li > a:visited { 
    color: #777; 
} 

/* I also removed the div surrounding your image */

來源

2014-07-06 03:09:38 DRD

非常感謝您的建議 - 您顯然已經竭盡全力幫助您。關於通用編碼風格，我已經採取了許多措施，並可以跟隨您所做的具體更改。我可以問，寫字體大小的目的是什麼，例如20px/1.5？我理解20px，但是/1.5的含義是什麼？ – user3808730

不客氣。正斜槓後的無單位數字將行高設置爲字體大小的1.5倍。這是設置元素高度的方法之一。您也可以使用單位（即20px/30px），但如果維度保持不變，那麼無單位數字是一個好方法。如果需要更改代碼，那麼您需要做的只是將字體大小和行高調整爲按比例調整。乾杯。 – DRD

將元素放置在h1標記中。 h1具有瀏覽器強加的自然邊際。無論如何，你不應該在h1標籤中包裝元素。將其更改爲無邊距的div，並且空白將消失。

包裝聯繫信息的ul可以放在「Andrew Kennedy」的父包裝中（從h1更改後）。將「position：absolute」添加到ul中，並且可以使用「left」屬性對其進行定位。

這裏是對標題div的修改。內聯css自然應該放在樣式表中，這僅僅是爲了演示目的。

<div id="title"> 
    <div style="font-size: 50px;"><span>A</span>ndrew <span>K</span>ennedy</div> 
    <ul style="position:absolute;font-size: 12px;right: 10px;margin-top: -40px;text-align: left;"> 
     <li><a href="mailto:[email protected]" target="_top">Email</a></li> 
     <li><a href="https://www.linkedin.com/pub/andrew-kennedy/42/a26/704" target="_blank">LinkedIn</a></li> 
    </ul> 
</div>

來源

2014-07-06 02:09:25 jumbopap

+1。可能的重複問題：http：// stackoverflow。com/a/5849954/1045794 – redditor

就像其他用戶說的，你已經把你的名字放在h1標籤中。這些標籤已經在內部有保證金，它們將被用於有很多空間的頁面，並且可以用於諸如文章標題之類的內容。對於您的情況，您可以刪除h1標籤，只需將它們替換爲段落標籤（不管您想要的樣式），還是可以更改h1的邊距。在您的CSS中，您可以更改h1標籤上的邊距以根據需要自定義網站。

這將是這個樣子

.h1 { 
margin-top:0px; 
margin-bottom:0px; 
}

來源

2014-07-06 03:08:08

HTML/CSS定位和間距

回答

相關問題