html - Trying to resize the navbar, change font size, and center the text -
i'm trying create navbar website. i've gone through css , tried resize navbar , align text. don't know i'm going wrong.
here section of css.
.nav { font-family: "indie flower", serif; font-size: larger; color: white; } #navwrapper{ width = 100% float: left; margin: 0 auto; list-style : none font-family: "indie flower", arial; background-color: red; height = 10px; text-align = "center"; } also html
<body> <div id="main" class="main" style ="text-align = center"> </div> <div id = "navwrapper"> <p class = "nav">holder</> </div> <br> <iframe src = "http://chrisfoose.blogspot.com" width = "100%" height = "300" frameborder = "0"> <p>unfortunately browser not support dynamic content.</p> </iframe> </div> </body> also, link current results are:
var imgsrcarr = ["http://www.hdwallpapers.in/walls/running_horse-wide.jpg", "http://www.hdwallpapers.in/walls/colorful_background-wide.jpg", "http://www.hdwallpapers.in/walls/moonlight_cruise-wide.jpg"] var imgsrcarr = ["background/000.jpg", "background/001.jpg", "background/002.jpg", "background/003.jpg", "background/004.jpg"] window.onload = function() { var randnum = math.floor(math.random() * 4); document.getelementbyid("main").style.backgroundimage = "url('" + imgsrcarr[randnum] + "')" }@import url(http://fonts.googleapis.com/css?family=russo+one); @import "compass/css3"; @import url(http://fonts.googleapis.com/css?family=share+tech+mono); @import url(http://fonts.googleapis.com/css?family=indie+flower); svg { width: 600px; height: 120px; display: block; position: relative; overflow: hidden; margin: 0 auto; background: black; } { text-decoration: none; color: white; } .left { float: left; } .right { float: right; } .center { float: center; } div.main { margin: auto; ; height: 500px; ; width: 1000px; background-position: center; backgroud-repeat: no-repeat border: 1px solid black; } body { background-color: black; } #main { width: 1000px; margin: 0 auto; } #vid { width: 1200px; text-align: center; } #circle { position: fixed; z-index: 1; } #buttonred { width: 100px; height: 100px; border-radius: 100%; background-color: #8a0808; border-style: solid; text-align: center; } #buttonblue { width: 100px; height: 100px; border-radius: 100%; background-color: #4000ff; border-style: solid; text-align: center; } #buttongreen { width: 100px; height: 100px; border-radius: 100%; background-color: #088a08; border-style: solid; text-align: center; } #buttonpink { width: 100px; height: 100px; border-radius: 100%; background-color: pink; border-style: solid; text-align: center; } #buttonorange { width: 100px; height: 100px; border-radius: 100%; background-color: orange; border-style: solid; text-align: center; } #buttonback { witdth: 100px; height 100px; border-radius: 100%; background-color: red; border-style: solid; text-align: center; } ; table.center { ; background-color: white; ; margin.left: auto; ; margin.right: auto; ; } table.center { width: 70%; margin-left: 200px; margin-top: 300px; color: white; } p { font-family: arial, terminal, times new roman; margin-top: 30px; font-color: white; line-height: 100px; margin: 0; } p.bio { background-color: white; font-family: 'russo one', sans-serif; color: black; margin-top: 50px margin-left: 50px } div.enclose { margin-top: 50px margin-left: 50px } td.bio { padding: 15px; border-radius: 25px; } table.bio { width: 70%; margin-left: 300px; margin-top: 150px; padding: 50px; } table.video { width: 85%; margin-left: 150px; margin-top: 200px; } table.graphics { width: 85%; margin-left: 50px; margin-top: 150px; background-color: black; border: 1px border-color: white; } td.graphics { border: 1px solid white; align: center; } #videobanner { width: 150px; height: 50px; background-color: grey; text-align: center; margin-top: 1px; margin-bottom: 20px; color: white; } p.video { font-family: arial; font-size: large; color: white; text-align: center; font-size: 18px; margin-top: 5px; } p.menu { font-family: "indie flower", serif; font-color: white font-size: medium; font-weight: 700; } .nav { font-family: "indie flower", serif; font-size: larger; color: white; } #navwrapper { width=100% float: left; margin: 0 auto; list-style: none font-family: "indie flower", arial; background-color: red; height=10px; text-align="center"; }<body> <div id="main" class="main" style="text-align = center"> <div id="navwrapper"> <p class="nav">holder </> </div> <br> <iframe src="http://chrisfoose.blogspot.com" width="100%" height="300" frameborder="0"> <p>unfortunately browser not support dynamic content.</p> </iframe> </div> </div> </body> </html>you closing off main div prematurely , css incorrectly formatted. use colons not equals signs in css.
here updated codepen.
Comments
Post a Comment