html - css placing icon for mobile web app -
I am trying to install icons for mobile web apps using CSS Although I am having some problem with this.
Below is my code but I do not see the icon, am I missing anything here?
This is my html & lt; Link rel = "stylesheet" type = "text / css" href = "/ mobile_pages / main / main_page.css" /> & Lt; Br> & Lt; Div id = "siteMenu" & gt; & Lt; A href = "/ index.php? Mid = s11" square = "icon" id = "intro_icon" & gt; & Lt; / A & gt; & Lt; a href = "/ index.php? mid = s15" square = "icon" id = "direction_icon" & gt; & Lt; / A & gt; & Lt; a href = "/ index.php? mid = s56" square = "icon" id = "pic_icon" & gt; & Lt; / A & gt; & Lt; a href = "/ index.php? mid = s21" square = "icon" id = "news_icon" & gt; & Lt; / A & gt; & Lt; a href = "/ index.php? mid = s31" square = "icon" id = "movie_icon" & gt; & Lt; / A & gt; & Lt; / Div & gt; This is my CSS # site menu {status: relative; Width: Device width; Height: Device height; } .know {background-size: cover; Width: 80px; Height: 80px; } #intro_icon {status: complete; Background-image: url ('intro_icon.png'); Top: 50px; Left: 0 pixels; } #direction_icon {status: absolute; Background-image: url ('direction_icon.png'); Top: 50px; Left: 90px; } #pic_icon {status: Completed; Background-image: url ('pic_icon.png'); Top: 50px; Left: 180px; } When I give specific px for width and height in #siteMenu, then I can see the icon. However, I want it to be the width of the device and the height of the device.
I tried 100%, Auto Value for width and height but still did not work. What should I do here?
Just trying to log your logo with the Google logo, it's working fine.
Can you make sure that the path of your icons is correct, so in the same folder as your CSS?
Make sure the ccs file is referenced properly, and & lt; Link & gt; Tag & lt; Top & gt; The tag of your page?
#intro_icon {Status: Completed; Background-image: url ('http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_ (2011) .png'); Top: 50px; Left: 0 pixels; } For device-width and device-height, they are not media-query parameters that are not for CSS attributes. Apart from this, you have to set the entire page of the HTML and body tags:
html {width: 100%; Height: 100%; } Body {Min-height: 100%; Padding: 0px; Margin: 0px; } #siteMenu {status: relative; Width: 100%; Height: 100%; Height: 100 VH; Minute-height: 100%; } , note that not supported by all browsers (e.g. IE8)
Comments
Post a Comment