html - put navigation inside content div -
i seeking correct webpage. if @ html , css posted below, there following unintended behavior: 1) galnavigation seats on content. want is:(if consider box webpage)
|-----------------------------------------| |<h2>my gallery</h2> | |here collection of..... | |<gal_navigation> | | | |href garchumuk href falta | | img src img src | | of of | | garchumuk falta | | , on | |-----------------------------------------| 2) also, shown, href should appear @ top of img, not beside.
it best, if can done browser independent way. (currently, href appears @ top of img in firefox, not in gnome's epiphany)
the codes far have managed: html:
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd" > <html> <head> <title>mysite</title> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css" media="all"> </style> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> </head> <body> <div id="container"> <div id="header"> <h1> site </h1> </div> <div id="navigation"> <ul> <li> <a href="aboutme.html">about me</a> </li> </ul> </div> <div id="gal_content"> <!--<p>--> <!--<img src="images/gallery.jpg" alt="mypic">--> <!--</p>--> <h2> gallery </h2> here collection of pictures have taken during several trips. these galleries hosted in picasa , flickr web album. <div id="galnavigation"> <table style="width:94px;margin:0.5em 0 0em 0;" border="0px"> <tbody> <tr> <td valign="top" align="center"> <a href="https://picasaweb.google.com/bnrj.rudra/garchumuk?feat=embedwebsite" target="_blank"> <font style="color:#fff;font-size:.75em; text-shadow: 2px 2px 7px #111; text-align:center; border:none;"><i>garchumuk</i></font><img src="https://lh4.googleusercontent.com/-7eovmjb2asm/r4d-sw0h7ye/aaaaaaaabqw/mr4xsrt2vnm/s160-c/garchumuk.jpg" width="94" height="94" style="margin:1px 0 0 0px;" alt="garchumuk"></a> </td> <td valign="top" align="center"> <a href="https://picasaweb.google.com/bnrj.rudra/faltatrip?feat=embedwebsite" target="_blank"><font style="color:#fff; font-size:.75em;text-shadow: 2px 2px 7px #111; text-align:center; border:none;"><i>falta</i></font><img src="https://lh5.googleusercontent.com/-3zqd1oqrua0/trgv6z4aj8e/aaaaaaaad-s/uq2lqhtw_zo/s160-c/faltatrip.jpg" width="94" height="94" style="margin:1px 0 0 0px;" alt="falta"></a> </td> </tr> <tr> <td align="center" valign="top"> <a href="https://picasaweb.google.com/106471678921553351367/takitrip?authuser=0&feat=embedwebsite" target="_blank"><font style="color:#fff;font-size:.75em; text-shadow: 2px 2px 7px #111; text-align:center; border:none;"><i>taki trip</i></font><img src="https://lh3.googleusercontent.com/-ektodai7xas/sxthhve6v9e/aaaaaaaaez8/pccxlzkblm4/s160-c/takitrip.jpg" width="94" height="94" style="margin:1px 0 0 4px;"></a> </td> </tr> </tbody> </table> </div> </div> <div id="footermainpan"> </div> </div> </body> </html> css:
body { font : 100% "times new roman", times, serif; color : #0a8bf8; background : #184470; margin : 0; } h1 { position : absolute; height : 0; overflow : hidden; } .accessaid2, h1 { position : absolute; height : 0; overflow : hidden; } .accessaid, h1 { position : absolute; height : 0; overflow : hidden; } #header { background : #184470 url(images/banner2.png) no-repeat; height : 60px; margin : 0 auto; border-left : 214px solid #184470; } #navigation { position : absolute; top : 60px; left : 1%; width : 15%; color : #e4ecef; font-size : 110%; } #navigation ul { margin : 0 0 2em 0; padding : 0; list-style : none; color : #e4ecef; } #navigation ul { color : white; text-decoration : none; display : block; background : #4674b2; padding : 0 0.5em; margin : 0 2em 1px 1em; color : #e4ecef; box-shadow :0 10px 10px #000; } #navigation a:visited { color : #e4ecef; } #navigation a:hover { background : #5096f0; } #content { background : #e4ecef; padding : 0.0em 2.5em; border-radius: 15px 15px 15px 15px; --moz-border-radius: 15px 15px 15px 15px; -webkit-border-radius: 15px 15px 15px 15px; width : 62%; float : right; margin-right : 17%; margin-left : 30%; border : 0px; background : #e0e9f8; } #gal_content { background : #e4ecef; padding : 0.0em 2.5em; border-radius: 15px 15px 15px 15px; --moz-border-radius: 15px 15px 15px 15px; -webkit-border-radius: 15px 15px 15px 15px; width : 62%; float : right; margin-right : 17%; margin-left : 30%; border : 0px; /*background : #e0e9f8;*/ } #galnavigation { position : absolute; top : 0px; left : 23%; width : 17%; color : #000; font-size : 100%; } #galnavigation a:hover { background : #5096f0; } #galnavigation ul { margin : 100% 0 1em 0; padding : 0; list-style : none; color : #000; } #galnavigation ul { color : white; text-decoration : none; display : block; background : #4674b2; padding : 0 0.5em; margin : 0 1em 1px 1em; color : #e4ecef; box-shadow : 0 10px 10px #000; } h2 { font-size : 200%; color : #184470; } h3 { font-size : 125%; color : #184470; } #container { /*position : relative; width : 100%; border : solid #036; border-width : 0 0px; margin : auto;*/ } #content img { height : 200px; padding : 0; border : 0 solid #333; float : right; margin : .5em 0em 2em 2em; } #content img.icon { height : 120px; width :120px; padding : 0; border : 0 solid #333; float : right; } #content img.poems { height : 1200px; padding : 0; border : 0 solid #333; float : right; } #footermainpan { height : 10%; color : #2f5958; margin : 0 auto; clear : both; padding : 6px 0 0; } #playlist tbody tr.even td { background-color : #00cc66; } #playlist tbody tr.odd td { background-color: #000; } #footerpan { width : 100%; position : relative; margin : 0 auto; } #footerpan ul { width :50%; height : 0px; position : relative; margin : 0 auto; color : #e0f6f0; text-shadow : 2px 2px 7px #111; text-align : left; border : none; font-size : 1.5em; font-weight : bold; list-style-type: none; } #footerpan li { float: left; } #footerpan ul li { padding : 0 10px 0; color : #fff; background : #184470; text-decoration : none; font-size : 13px; } #footerpan ul li a:hover { text-decoration : underline; } #footerpan p.copyright { width : 250px; margin : 10px 0 0 2px; position : relative; left : 40%; color : #fff; } i not regular html/css writer, , have tried make code minimal. kindly help.
check folllowing js fiddle
http://jsfiddle.net/arunberti/d5sjr/ html
<body> <div id="container"> <div id="header"> <h1> site </h1> </div> <div id="navigation"> <ul> <li> <a href="aboutme.html">about me</a> </li> </ul> </div> <div id="gal_content"> <!--<p>--> <!--<img src="images/gallery.jpg" alt="mypic">--> <!--</p>--> <h2> gallery </h2> here collection of pictures have taken during several trips. these galleries hosted in picasa , flickr web album. <div id="galnavigation"> <table style="width:94px;margin:0.5em 0 0em 0;" border="0px"> <tbody> <tr> <td valign="top" align="center"> <a href="https://picasaweb.google.com/bnrj.rudra/garchumuk?feat=embedwebsite" target="_blank"> <font style="color:#fff;font-size:.75em; text-shadow: 2px 2px 7px #111; text-align:center; border:none;"><i>garchumuk</i></font> <br> <img src="https://lh4.googleusercontent.com/-7eovmjb2asm/r4d-sw0h7ye/aaaaaaaabqw/mr4xsrt2vnm/s160-c/garchumuk.jpg" width="94" height="94" style="margin:1px 0 0 0px;" alt="garchumuk"></a> </td> <td valign="top" align="center"> <a href="https://picasaweb.google.com/bnrj.rudra/faltatrip?feat=embedwebsite" target="_blank"><font style="color:#fff; font-size:.75em;text-shadow: 2px 2px 7px #111; text-align:center; border:none;"><i>falta</i></font> <br> <img src="https://lh5.googleusercontent.com/-3zqd1oqrua0/trgv6z4aj8e/aaaaaaaad-s/uq2lqhtw_zo/s160-c/faltatrip.jpg" width="94" height="94" style="margin:1px 0 0 0px;" alt="falta"></a> </td> </tr> <tr> <td align="center" valign="top"> <a href="https://picasaweb.google.com/106471678921553351367/takitrip?authuser=0&feat=embedwebsite" target="_blank"><font style="color:#fff;font-size:.75em; text-shadow: 2px 2px 7px #111; text-align:center; border:none;"><i>taki trip</i></font> <br> <img src="https://lh3.googleusercontent.com/-ektodai7xas/sxthhve6v9e/aaaaaaaaez8/pccxlzkblm4/s160-c/takitrip.jpg" width="94" height="94" style="margin:1px 0 0 4px;"></a> </td> </tr> </tbody> </table> </div> </div> <div id="footermainpan"> </div> </div> css:
body { font : 100% "times new roman", times, serif; color : #0a8bf8; background : #184470; margin : 0; } h1 { height : 0; overflow : hidden; } .accessaid2, h1 { height : 0; overflow : hidden; } .accessaid, h1 { height : 0; overflow : hidden; } #header { background : #184470 url(images/banner2.png) no-repeat; height : 60px; margin : 0 auto; border-left : 214px solid #184470; } #navigation { top : 60px; left : 1%; width : 15%; color : #e4ecef; font-size : 110%; } #navigation ul { margin : 0 0 2em 0; padding : 0; list-style : none; color : #e4ecef; } #navigation ul { color : white; text-decoration : none; display : block; background : #4674b2; padding : 0 0.5em; margin : 0 2em 1px 1em; color : #e4ecef; box-shadow :0 10px 10px #000; } #navigation a:visited { color : #e4ecef; } #navigation a:hover { background : #5096f0; } #content { background : #e4ecef; padding : 0.0em 2.5em; border-radius: 15px 15px 15px 15px; --moz-border-radius: 15px 15px 15px 15px; -webkit-border-radius: 15px 15px 15px 15px; width : 62%; float : right; margin-right : 17%; margin-left : 30%; border : 0px; background : #e0e9f8; } #gal_content { background : #e4ecef; padding : 0.0em 2.5em; border-radius: 15px 15px 15px 15px; --moz-border-radius: 15px 15px 15px 15px; -webkit-border-radius: 15px 15px 15px 15px; width : 62%; float : right; margin-right : 17%; margin-left : 30%; border : 0px; /*background : #e0e9f8;*/ } #galnavigation { top : 0px; left : 23%; width : 17%; color : #000; font-size : 100%; } #galnavigation a:hover { background : #5096f0; } #galnavigation ul { margin : 100% 0 1em 0; padding : 0; list-style : none; color : #000; } #galnavigation ul { color : white; text-decoration : none; display : block; background : #4674b2; padding : 0 0.5em; margin : 0 1em 1px 1em; color : #e4ecef; box-shadow : 0 10px 10px #000; } h2 { font-size : 200%; color : #184470; } h3 { font-size : 125%; color : #184470; } #container { /*position : relative; width : 100%; border : solid #036; border-width : 0 0px; margin : auto;*/ } #content img { height : 200px; padding : 0; border : 0 solid #333; float : right; margin : .5em 0em 2em 2em; } #content img.icon { height : 120px; width :120px; padding : 0; border : 0 solid #333; float : right; } #content img.poems { height : 1200px; padding : 0; border : 0 solid #333; float : right; } #footermainpan { height : 10%; color : #2f5958; margin : 0 auto; clear : both; padding : 6px 0 0; } #playlist tbody tr.even td { background-color : #00cc66; } #playlist tbody tr.odd td { background-color: #000; } #footerpan { width : 100%; position : relative; margin : 0 auto; } #footerpan ul { width :50%; height : 0px; position : relative; margin : 0 auto; color : #e0f6f0; text-shadow : 2px 2px 7px #111; text-align : left; border : none; font-size : 1.5em; font-weight : bold; list-style-type: none; } #footerpan li { float: left; } #footerpan ul li { padding : 0 10px 0; color : #fff; background : #184470; text-decoration : none; font-size : 13px; } #footerpan ul li a:hover { text-decoration : underline; } #footerpan p.copyright { width : 250px; margin : 10px 0 0 2px; position : relative; left : 40%; color : #fff; } i hope way want
Comments
Post a Comment