2017-04-24 90 views
-1

我被一個額外的關閉咖喱括號在CSS中,我不小心把事先寫其他行。如果我把它留在那裏,它實際上對結果沒有壞處。但是,當我刪除它時,其他元素的位置會重新定位。我不小心把一個額外的關閉花括號

((代碼行,額外的右大支架,其中箭頭指向))

請點擊下面的鏈接,看到兩個結果。

問題:有沒有什麼辦法在不重新定位其他元素的情況下將其刪除?

Without the Close Curly Bracket

With the Close Curly Bracket

body{ 
font: 15px/1.5 Helvetica, Arial, sans-serif; 
padding: 0; 
margin: 0; 
p(color#282f38); 
background-color: #F5F2ED; 
font:696863; 
} 

/*Global*/ 
.container{ 
width:80%; 
margin:auto; 
overflow:hidden; 
} 

ul{ 
margin:0; 
padding:0; 
} 

/* Header */ 
#fixed{ 
position: fixed; 
} 

header{ 
position: fixed; 
width: 100%; 
background:#282f38; 
color:#F5F2ED; 
padding-top: 10px; 
min-height:50px; 
border-bottom:#F5F2ED 3px solid; 
} 

header a{ 
color:#F5F2ED; 
text-decoration:none; 
text-transform:uppercase; 
font-size: 18px; 
} 

header li{ 
float:left; 
display: inline; 
padding: 0 20px 0 20px; 
} 

header #resume{ 
float: left; 
} 

header #resume h1{ 
margin: 0; 
padding: 0; 
} 

header nav{ 
position: relative; 
left: 30%; 
float: right; 
margin-top: 10px; 
} 
header .highlight, header .current a{ 
color:#696863 ; 
font-weight: bold; 
} 

header a:hover{ 
color:#696863; 
font-weight: bold; 
} 

/* Showcase */ 
#showcase { 
min-height: 350px; 
background: url('../Resources/Photographer.png') no-repeat 0 -120px; 
align-items: center; 
color: #ffffff; 
overflow: auto; 
} 

#showcase h1{ 
text-align: center; 
margin-top: 100px; 
font-size: 40px; 
margin-bottom: 10px; 
} 

#showcase p{ 
text-align:justify; 
margin:0; 
padding:0; 
font-size: 14; 
text-indent: inherit; 
} 

/* Social Medias*/ 

#socialmedias{ 
position:fixed; 
padding-top: : 5px; 
right: 20px; 
top: 130px; 
display: block; 
vertical-align: baseline; 
font: inherit; 
list-style-type: none; 
} 

} <<----------------------------------------------------------------------- 
/* Message Me Box */ 
#box{ 
width: 30%; 
overflow: hidden; 
padding: 1px; 
} 
/* Box Border */ 
.fieldset{ 
display: inline-block; 
border: 3px solid; 
float: right; 
} 
/* Message Me Title */ 
#legend{ 
font-size: 20px; 
font-weight: bold; 
color:#282f38; 
} 
/* Name Input */ 
#form-name{ 
display: block; 
width: 200px; 
margin-bottom: 10px; 
} 
/* Email Input */ 
#form-email{ 
display: block; 
width: 200px; 
margin-bottom: 10px; 
} 
/* Message Input */ 
#form-message{ 
display: block; 
margin-bottom: 10px; 
} 
/* Contact */ 
.button_contact{ 
position: relative; 
height: 30px; 
width: 100%; 
background:#696863; 
color: #F5F2ED; 
font-size: 14px; 
text-transform: uppercase; 
border: 0; 
} 
+0

謝謝你這麼多帕特里克MLR –

+0

您可以通過掉毛工具 –

+0

@PhumchaiPipatanamongkol嗨運行你的代碼,作爲一般的提示,如果選擇頁面上的ID(如'頭#resume {'),你不應該需要比只使用ID更具體(即'#resume {')。只有當你需要時才如此具體。此外,使用'header'選擇器非常危險,因爲'header'是一個普通元素,這意味着您的頁面可能有多個'header'標籤。你大概只希望你的樣式適用於頁面頁眉,而不是所有可能出現在頁面上的「標題」標籤,所以我建議在頁眉上使用類或ID。 –

回答

2

額外的花括號被視爲選擇下一個規則的一部分。即規則是

} #box { 
width: 30%; 
overflow: hidden; 
padding: 1px; 
} 

因此} #box什麼都不匹配。當您刪除}時,選擇器爲#box,並與ID爲「box」的元素相匹配。

如果您不想要刪除額外的}時所得到的效果,請刪除整個規則。

+0

我真誠的感謝您的時間和幫助! –

-1

我覺得有什麼做的HTML和CSS 「#FIXED」 ID名稱。 嘗試將名稱更改爲其他名稱。財產和你的名字可能會相互碰撞。所以,改變它...

+1

這絕對不是正確的答案。 –

+0

謝謝你的時間和幫助 –

+0

@PatrickMlr你是對的,但它確實突出了SO語法突出顯示的問題。 –

2

不只是一個錯誤,

檢查我在你的代碼添加註釋。

避免這些錯誤的最佳方法是使用IDE。 有這麼多的開源工具可用。例如NetBeans。

他們可以幫助您識別您的錯誤。 檢查此截圖,它們也易於使用。

enter image description here

/* Social Medias*/ 

#socialmedias{ 
position:fixed; 
padding-top: : 5px; // Error 1, 
right: 20px; 
top: 130px; 
display: block; 
vertical-align: baseline; 
font: inherit; 
list-style-type: none; 
} 

} // Error 2 

body{ 
font: 15px/1.5 Helvetica, Arial, sans-serif; 
padding: 0; 
margin: 0; 
p(color#282f38); // Error 3 
background-color: #F5F2ED; 
font:696863; 
} 
+1

感謝您的澄清和時間! –

2

你在你的CSS許多錯誤。我驗證過上W3C CSS Validator

enter image description here

我已經改變了你的CSS你的CSS。請看下圖:

body { 
 
\t font: 15px/1.5 Helvetica, Arial, sans-serif; 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t background-color: #F5F2ED; 
 
} 
 

 
p { 
 
\t color: #282f38; 
 
} 
 

 
/*Global*/ 
 
.container { 
 
\t width: 80%; 
 
\t margin: auto; 
 
\t overflow: hidden; 
 
} 
 

 
ul { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
/* Header */ 
 
#fixed { 
 
\t position: fixed; 
 
} 
 

 
header { 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t background: #282f38; 
 
\t color: #F5F2ED; 
 
\t padding-top: 10px; 
 
\t min-height: 50px; 
 
\t border-bottom: #F5F2ED 3px solid; 
 
} 
 

 
header a { 
 
\t color: #F5F2ED; 
 
\t text-decoration: none; 
 
\t text-transform: uppercase; 
 
\t font-size: 18px; 
 
} 
 

 
header li { 
 
\t float: left; 
 
\t display: inline; 
 
\t padding: 0 20px 0 20px; 
 
} 
 

 
header #resume { 
 
\t float: left; 
 
} 
 

 
header #resume h1 { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
header nav { 
 
\t position: relative; 
 
\t left: 30%; 
 
\t float: right; 
 
\t margin-top: 10px; 
 
} 
 

 
header .highlight, header .current a { 
 
\t color: #696863; 
 
\t font-weight: bold; 
 
} 
 

 
header a:hover { 
 
\t color: #696863; 
 
\t font-weight: bold; 
 
} 
 

 
/* Showcase */ 
 
#showcase { 
 
\t min-height: 350px; 
 
\t background: url('../Resources/Photographer.png') no-repeat 0 -120px; 
 
\t align-items: center; 
 
\t color: #ffffff; 
 
\t overflow: auto; 
 
} 
 

 
#showcase h1 { 
 
\t text-align: center; 
 
\t margin-top: 100px; 
 
\t font-size: 40px; 
 
\t margin-bottom: 10px; 
 
} 
 

 
#showcase p { 
 
\t text-align: justify; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t font-size: 14px; 
 
\t text-indent: inherit; 
 
} 
 

 
/* Social Medias*/ 
 
#socialmedias { 
 
\t position: fixed; 
 
\t padding-top: 5px; 
 
\t right: 20px; 
 
\t top: 130px; 
 
\t display: block; 
 
\t vertical-align: baseline; 
 
\t font: inherit; 
 
\t list-style-type: none; 
 
} 
 

 
/* Message Me Box */ 
 
#box { 
 
\t width: 30%; 
 
\t overflow: hidden; 
 
\t padding: 1px; 
 
} 
 
/* Box Border */ 
 
.fieldset { 
 
\t display: inline-block; 
 
\t border: 3px solid; 
 
\t float: right; 
 
} 
 
/* Message Me Title */ 
 
#legend { 
 
\t font-size: 20px; 
 
\t font-weight: bold; 
 
\t color: #282f38; 
 
} 
 
/* Name Input */ 
 
#form-name { 
 
\t display: block; 
 
\t width: 200px; 
 
\t margin-bottom: 10px; 
 
} 
 
/* Email Input */ 
 
#form-email { 
 
\t display: block; 
 
\t width: 200px; 
 
\t margin-bottom: 10px; 
 
} 
 
/* Message Input */ 
 
#form-message { 
 
\t display: block; 
 
\t margin-bottom: 10px; 
 
} 
 
/* Contact */ 
 
.button_contact { 
 
\t position: relative; 
 
\t height: 30px; 
 
\t width: 100%; 
 
\t background: #696863; 
 
\t color: #F5F2ED; 
 
\t font-size: 14px; 
 
\t text-transform: uppercase; 
 
\t border: 0; 
 
}

+0

非常感謝 –

0
/* Header */ 
----------------->#fixed{<------------------ 
position: fixed; 
} 

試圖改變其中的箭頭指向的ID,使用類,因爲有這麼多的矛盾,如果我們直接使用的ID。欲瞭解更多信息,請找到下面的鏈接:

https://github.com/CSSLint/csslint/wiki/disallow-ids-in-selectors

+0

非常感謝您的幫助 –