2013-05-16 93 views
-1

www.thames.ikas.sk 如果您將瀏覽器調整爲屏幕的一半寬度,爲什麼我的右側有白色條紋?爲什麼我的html和body沒有全寬? 當瀏覽器爲全寬時沒有問題。 平板電腦或手機也有問題。 請幫忙Joomla模板(右側的白色條紋)

+0

請考慮更新您的問題,包括有關HTML,CSS和JavaScript代碼段在這裏,而不是簡單地粘貼一條鏈接。有關詳細信息,請參閱[我的網站或項目中的某些內容不起作用。我可以只粘貼一個鏈接嗎?](http://meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste -a-link-to-it) –

+0

imo:就像cms系統一樣:只需要鏈接到出現錯誤的網站,然後在這裏張貼10個css文件就可以了。 (重現出現在cms中的錯誤可能很難,因爲它有時可以「正常工作」,而它的正義html,js和css沒有cms後面)應該有一個選項,可以在OP後「添加」代碼示例該解決方案被發現,所以每個有類似問題的人都可以使用它,並應該接受與cms相關的問題(不包括片段),當然如果有人能提供它,應該這樣做;) – Django

+0

@Django,如果您仔細閱讀我發佈的鏈接上的答案,您會發現規則的一個重要原因是孤立片段的過程常常會揭示問題和解決方案。我不會懷疑這個過程是艱難的,但絕對是有用的。 –

回答

0

你讓你的設計要求屏幕寬度至少爲960px。在這個寬度之下,即使視口寬度小於960px,一些元素仍然被迫使用這個空間。

試着改變你的設計不使用這個強制的寬度,或更糟糕的(在我看來)確保背景也拉伸到兩側。

+0

如何強制背景向兩側伸展?你的意思是背景大小:封面? – Matop79

0
#header_inner, #main_body_inner, #navigation_inner, #footer_inner { 
width: 960px; 
} 

這就是你的問題。)

你應該添加一些CSS/Media Queries您template.css例如

@media (max-width: 960px) 
#header_inner, #main_body_inner, #navigation_inner, #footer_inner { 
width: 100%; 
} 

,這應該進入你的模板來設置viewport條件的index.php文件:

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

請閱讀這兩個環節,我希望谷歌翻譯鏈接工作;)

編輯:任何固定寬度爲320像素或更高的應該用@媒體查詢加以處理,只是爲了使它適用於移動/平板電腦設備,如果你想讓你的頁面處於「響應式樣式」。

檢查.logo類(寬度:634px)

通常你結束了:

/* Default wide-screen styles */ 

@media (max-width: 1024px) { 
/* styles for narrow desktop browsers and iPad landscape */ 
} 

@media (max-width: 768px) { 
/* styles for narrower desktop browsers and iPad portrait */ 
} 

@media (max-width: 480px) { 
/* styles for iPhone/Android landscape (and really narrow browser windows) */ 
} 

@media (max-width: 320px) { 
/* styles for iPhone/Android portrait */ 
} 

@media (max-width: 240px) { 
/* styles for smaller devices */ 
} 
+0

,並且如果您移除nivo滑塊,則幾乎可以按照預期工作 – Django